From 7cd0440e400ea6ed7167414a04b39f7420052249 Mon Sep 17 00:00:00 2001
From: Stephanie Smith <stephanie.c.smith@jpl.nasa.gov>
Date: Wed, 7 Aug 2024 09:53:56 -0700
Subject: [PATCH] configuring pill label for explainer articles

---
 packages/vue/src/components/BaseTag/BaseTag.vue           | 8 ++++----
 .../vue/src/components/DetailHeadline/DetailHeadline.vue  | 1 +
 .../edu/PageEduEventDetail/PageEduEventDetail.vue         | 4 ++--
 .../PageEduExplainerArticle/PageEduExplainerArticle.vue   | 4 +++-
 4 files changed, 10 insertions(+), 7 deletions(-)

diff --git a/packages/vue/src/components/BaseTag/BaseTag.vue b/packages/vue/src/components/BaseTag/BaseTag.vue
index b3b22d6b..152155d7 100644
--- 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
index 50fd3d3c..cca76b69 100644
--- 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
index 186a4f2e..88145e96 100644
--- 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
index ef7e2b40..9af7ac12 100644
--- 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"