configuring pill label for explainer articles

nasa-jpl · Aug 7, 2024 · 7cd0440 · 7cd0440
1 parent 45d9b4b
commit 7cd0440
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 7 deletions.
diff --git a/packages/vue/src/components/BaseTag/BaseTag.vue b/packages/vue/src/components/BaseTag/BaseTag.vue
@@ -9,9 +9,9 @@ const variantMap: Attributes = {
 }
 
 const sizeMap: Attributes = {
-  sm: 'text-xs uppercase border-t-2 py-1 px-2.5',
-  md: 'text-xs lg:text-base capitalize border-t py-1 px-3',
-  lg: 'text-base lg:text-lg capitalize border-t py-1 px-3'
+  sm: 'text-xs border-t-2 py-1 px-2.5',
+  md: 'text-xs lg:text-base border-t py-1.5 px-3.5',
+  lg: 'text-base lg:text-lg border-t py-1.5 px-5'
 }
 
 interface BaseTagProps {
@@ -28,7 +28,7 @@ const props = withDefaults(defineProps<BaseTagProps>(), {
 <template>
   <p
     :class="`${variantMap[props.variant]} ${sizeMap[props.size]}`"
-    class="ThemeVariantLight text-contrast-none inline-block text-white font-bold edu:font-extrabold rounded-full leading-tight m-0"
+    class="ThemeVariantLight text-contrast-none inline-block text-white font-bold edu:font-extrabold rounded-full leading-tight m-0 uppercase"
   >
     <slot />
     <span class="sr-only">.</span>

diff --git a/packages/vue/src/components/DetailHeadline/DetailHeadline.vue b/packages/vue/src/components/DetailHeadline/DetailHeadline.vue
@@ -7,6 +7,7 @@
       <template v-if="pill && pillLabel">
         <BaseTag
           :variant="pillColor"
+          size="lg"
           class="mr-3"
         >
           {{ pillLabel }}

diff --git a/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue b/packages/vue/src/templates/edu/PageEduEventDetail/PageEduEventDetail.vue
@@ -32,11 +32,11 @@
     >
       <div
         v-if="data.eventType"
-        class="flex flex-wrap items-start mb-3"
+        class="flex flex-wrap items-start mb-4"
       >
         <BaseTag
           variant="primary"
-          size="md"
+          size="lg"
         >
           {{ data.eventType }}
         </BaseTag>

diff --git a/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue b/packages/vue/src/templates/edu/PageEduExplainerArticle/PageEduExplainerArticle.vue
@@ -107,8 +107,10 @@ export default defineComponent({
         :publication-date="data.publicationDate"
         :publication-time="data.publicationTime"
         :author="data.author"
-        :label="data.displayLabel"
+        label="Explainer Article"
+        pill-color="secondary"
         schema
+        pill
       />
       <ShareButtonsEdu
         v-if="data?.url"