renaming PageEduResourceArticle to PageEduExplainerArticle, enhancing…

… DetailHeadline to support pills and different pill colors
nasa-jpl · Aug 7, 2024 · 45d9b4b · 45d9b4b
1 parent e143636
commit 45d9b4b
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 44 deletions.
diff --git a/packages/vue/src/components/BaseTag/BaseTag.vue b/packages/vue/src/components/BaseTag/BaseTag.vue
@@ -10,8 +10,8 @@ const variantMap: Attributes = {
 
 const sizeMap: Attributes = {
   sm: 'text-xs uppercase border-t-2 py-1 px-2.5',
-  md: 'text-base capitalize border-t py-1 px-3',
-  lg: 'text-lg capitalize border-t py-1 px-3'
+  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'
 }
 
 interface BaseTagProps {

diff --git a/packages/vue/src/components/DetailHeadline/DetailHeadline.stories.js b/packages/vue/src/components/DetailHeadline/DetailHeadline.stories.js
@@ -1,9 +1,27 @@
-import DetailHeadline from './DetailHeadline.vue'
+import DetailHeadline, { pillColorVariants } from './DetailHeadline.vue'
 
 export default {
   title: 'Components/Utilities/DetailHeadline',
   component: DetailHeadline,
-  excludeStories: /.*Data$/
+  excludeStories: /.*Data$/,
+  argTypes: {
+    ariaLabel: {
+      type: 'string',
+      description:
+        "ARIA label. Recommended if your button label isn't descriptive, or if it only contains an icon."
+    },
+    pillColor: {
+      type: 'string',
+      description: 'Color of pill',
+      control: {
+        type: 'select'
+      },
+      options: pillColorVariants,
+      table: {
+        defaultValue: { summary: 'primary' }
+      }
+    }
+  }
 }
 
 export const DetailHeadlineData = {
@@ -67,3 +85,10 @@ export const NoAuthor = {
     ]
   }
 }
+
+export const Pill = {
+  args: {
+    ...DetailHeadlineData,
+    pill: true
+  }
+}
diff --git a/packages/vue/src/components/DetailHeadline/DetailHeadline.vue b/packages/vue/src/components/DetailHeadline/DetailHeadline.vue
@@ -1,45 +1,59 @@
 <template>
-  <div v-if="title || label || topics || publicationDate || author">
+  <div v-if="hasData">
     <div
-      v-if="label || (topics && topics.length) || readTime"
-      class="flex flex-wrap items-start mb-3"
+      v-if="hasEyebrow"
+      class="flex flex-wrap items-center mb-3"
     >
-      <div
-        v-if="topics && topics.length"
-        class="inline"
-      >
-        <BaseLink
-          variant="secondary"
-          :to="topics[0].url"
-          class="py-3"
-          :use-primary-color="themeStore.theme === 'ThemeEdu'"
+      <template v-if="pill && pillLabel">
+        <BaseTag
+          :variant="pillColor"
+          class="mr-3"
+        >
+          {{ pillLabel }}
+        </BaseTag>
+      </template>
+      <template v-else>
+        <div
+          v-if="topics && topics.length"
+          class="inline"
         >
-          <span :itemprop="schema ? 'articleSection' : undefined">
-            {{ topics[0].title }}
-          </span>
-        </BaseLink>
-      </div>
-      <span
-        v-else-if="label"
-        class="text-subtitle py-3 edu:text-primary"
-      >
-        <template v-if="!labelLink">
-          {{ label }}
-        </template>
-        <template v-else>
           <BaseLink
             variant="secondary"
-            :to="labelLink"
+            :to="topics[0].url"
             class="py-3"
             :use-primary-color="themeStore.theme === 'ThemeEdu'"
           >
-            {{ label }}
+            <span :itemprop="schema ? 'articleSection' : undefined">
+              {{ topics[0].title }}
+            </span>
           </BaseLink>
-        </template>
-      </span>
-      <span class="sr-only">.</span>
+        </div>
+        <span
+          v-else-if="label"
+          class="text-subtitle py-3 edu:text-primary"
+        >
+          <template v-if="!labelLink">
+            {{ label }}
+          </template>
+          <template v-else>
+            <BaseLink
+              variant="secondary"
+              :to="labelLink"
+              class="py-3"
+              :use-primary-color="themeStore.theme === 'ThemeEdu'"
+            >
+              {{ label }}
+            </BaseLink>
+          </template>
+        </span>
+      </template>
+      <span
+        v-if="hasTag"
+        class="sr-only"
+        >.</span
+      >
       <span
-        :class="`${(topics && topics.length) || label ? 'divide-gray-mid-dark border-l ml-3 pl-3 ' : ''} my-4  text-gray-mid-dark uppercase text-sm lg:text-base leading-none`"
+        :class="`${hasTag && !pill ? 'divide-gray-mid-dark border-l ml-3 pl-3 ' : ''} my-4  text-gray-mid-dark uppercase text-sm lg:text-base leading-none`"
       >
         {{ readTime }}
       </span>
@@ -51,7 +65,7 @@
       >{{ title }}
     </BaseHeading>
     <div
-      v-if="authors?.length || publicationDate"
+      v-if="hasByline"
       class="lg:text-base text-gray-mid-dark divide-gray-mid-dark px-3 mt-5 -ml-3 text-sm leading-none"
     >
       <span
@@ -107,12 +121,16 @@ import { useThemeStore } from '../../store/theme'
 import type { Topic, AuthorObject } from './../../interfaces'
 import BaseLink from './../BaseLink/BaseLink.vue'
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
+import BaseTag from '../BaseTag/BaseTag.vue'
+
+export const pillColorVariants = ['primary', 'secondary', 'action']
 
 export default defineComponent({
   name: 'DetailHeadline',
   components: {
     BaseLink,
-    BaseHeading
+    BaseHeading,
+    BaseTag
   },
   props: {
     title: {
@@ -156,13 +174,34 @@ export default defineComponent({
       required: false,
       default: undefined
     },
+    pill: {
+      type: Boolean,
+      default: false
+    },
+    pillColor: {
+      type: String,
+      default: 'primary',
+      validator: (prop: string): boolean => pillColorVariants.includes(prop)
+    },
     schema: {
       type: Boolean,
       default: false
     }
   },
   computed: {
     ...mapStores(useThemeStore),
+    hasTag(): boolean {
+      return this.topics?.length || this.label ? true : false
+    },
+    hasEyebrow(): boolean {
+      return this.hasTag || this.readTime ? true : false
+    },
+    hasByline(): boolean {
+      return this.authors?.length || this.publicationDate ? true : false
+    },
+    hasData(): boolean {
+      return this.title || this.hasEyebrow || this.hasByline ? true : false
+    },
     pubDatetime(): string | undefined {
       const currentTime = this.publicationTime || '00:00:00'
       const returnDate = new Date(this.publicationDate + ' ' + currentTime)
@@ -181,6 +220,9 @@ export default defineComponent({
         authors = [this.author] as AuthorObject[]
       }
       return authors
+    },
+    pillLabel(): string | undefined {
+      return this.label ? this.label : this.topics?.length ? this.topics[0].title : undefined
     }
   }
 })

diff --git a/...Article/PageEduResourceArticle.stories.js → ...rticle/PageEduExplainerArticle.stories.js b/...Article/PageEduResourceArticle.stories.js → ...rticle/PageEduExplainerArticle.stories.js
@@ -8,11 +8,11 @@ import { BlockVideoEmbedData } from './../../../components/BlockVideoEmbed/Block
 import { BlockRelatedLinksData } from './../../../components/BlockRelatedLinks/BlockRelatedLinks.stories.js'
 import { BlockLinkCardCarouselData } from './../../../components/BlockLinkCarousel/BlockLinkCarousel.stories.js'
 import { BlockStreamfieldTruncatedData } from './../../../components/BlockStreamfield/BlockStreamfield.stories'
-import PageEduResourceArticle from './PageEduResourceArticle.vue'
+import PageEduExplainerArticle from './PageEduExplainerArticle.vue'
 
 export default {
-  title: 'Templates/EDU/PageEduResourceArticle',
-  component: PageEduResourceArticle,
+  title: 'Templates/EDU/PageEduExplainerArticle',
+  component: PageEduExplainerArticle,
   decorators: [
     () => ({
       template: `<div id="storyDecorator" class="disable-nav-offset"><story/></div>`
@@ -30,9 +30,9 @@ export default {
 export const BaseStory = {
   args: {
     data: {
-      __typename: 'EDUResourceArticlePage',
-      pageType: 'EDUResourceArticlePage',
-      contentType: 'edu_resources.EDUResourceArticlePage',
+      __typename: 'EDUExplainerArticlePage',
+      pageType: 'EDUExplainerArticlePage',
+      contentType: 'edu_resources.EDUExplainerArticlePage',
       seoTitle: 'Test Resource',
       searchDescription: '',
       slug: 'test-resource',

diff --git a/...esourceArticle/PageEduResourceArticle.vue → ...lainerArticle/PageEduExplainerArticle.vue b/...esourceArticle/PageEduResourceArticle.vue → ...lainerArticle/PageEduExplainerArticle.vue
@@ -14,7 +14,7 @@ import BlockIframeEmbed from '../../../components/BlockIframeEmbed/BlockIframeEm
 import BlockRelatedLinks from '../../../components/BlockRelatedLinks/BlockRelatedLinks.vue'
 
 export default defineComponent({
-  name: 'PageEduResourceArticle',
+  name: 'PageEduExplainerArticle',
   components: {
     HeroMedia,
     BaseImagePlaceholder,