feat: Apps-2951 card meta changes for article detail page (#618)

* feat: card-meta date-created prop * feat: ftvaArticle styles * fix: linter, tweaks * fix: styles based on UX feedback * fix: add globalstore to story for sharebutton * fix: mistake in story --------- Co-authored-by: Jess Divers <[email protected]>
UCLALibrary · Sep 27, 2024 · ace6bfe · ace6bfe · github-actions · Sep 27, 2024
1 parent 0d3e630
commit ace6bfe
Show file tree

Hide file tree

Showing 3 changed files with 164 additions and 7 deletions.
diff --git a/src/lib-components/CardMeta.vue b/src/lib-components/CardMeta.vue
@@ -49,6 +49,12 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  // often used to display date article was published
+  // will be styled or formatted differently than startDate & endDate
+  dateCreated: {
+    type: String,
+    required: false,
+  },
   // long single date = 'Febuary 1, 2022', short = 'Feb 1, 2022
   // long date range =  'Febuary 1, 2022 - Febuary 2, 2022', short = 'Feb 1 - Feb 2'
   dateFormat: {
@@ -119,6 +125,13 @@ const parsedDate = computed(() => {
   return ''
 })
 
+const parsedDateCreated = computed(() => {
+  if (props.dateCreated)
+    return format(new Date(props.dateCreated), 'MMMM d, yyyy')
+
+  return ''
+})
+
 const parsedTime = computed(() => {
   // necessary check for library-website-nuxt & meap
   if (props.startDate && props.sectionHandle === 'event')
@@ -147,7 +160,7 @@ const parsedLocations = computed(() => {
 })
 
 const classes = computed(() => {
-  return ['card-meta', theme?.value || '']
+  return ['card-meta', theme?.value || '', props.sectionHandle]
 })
 </script>
 
@@ -199,6 +212,12 @@ const classes = computed(() => {
         class="schedule-item"
         v-html="bylineTwo"
       />
+      <div
+        v-if="dateCreated"
+        class="schedule-item date-created"
+      >
+        {{ parsedDateCreated }}
+      </div>
     </div>
 
     <div
@@ -265,6 +284,9 @@ const classes = computed(() => {
       <slot name="floatingslot" />
     </div>
 
+    <div v-if="sectionHandle === 'ftvaArticle'" class="heading-about-author">
+      About the author
+    </div>
     <RichText
       v-if="text"
       class="text"

diff --git a/src/stories/CardMeta.stories.js b/src/stories/CardMeta.stories.js
@@ -1,5 +1,7 @@
-import { computed } from 'vue'
+import { computed, onBeforeUnmount, onMounted } from 'vue'
 import CardMeta from '@/lib-components/CardMeta'
+import ButtonDropdown from '@/lib-components/ButtonDropdown.vue'
+import { useGlobalStore } from '@/stores/GlobalStore'
 
 // Storybook default settings
 export default {
@@ -142,6 +144,11 @@ export function FTVAOngoing() {
     data() {
       return { ...mockDefault }
     },
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
     components: { CardMeta },
     template: `
       <card-meta
@@ -156,3 +163,99 @@ export function FTVAOngoing() {
   `,
   }
 }
+
+const mockFTVAArticleData = {
+  title: 'TEST - Tom Reed’s “For Members Only”: Black Perspectives on Local L.A. TV',
+  articleCategories: [
+    {
+      title: 'Featured'
+    },
+    {
+      title: 'Announcement'
+    }
+  ],
+  postDate: '2024-07-02T05:08:00-07:00',
+  contributors: [
+    {
+      byline: 'Written by',
+      contributor: 'Axa Liaux (external contributor)'
+    }
+  ],
+  aboutTheAuthor: '<p>Our guest writer is <strong>Jen Diamond</strong>. She wrote this entry</p>',
+  sectionHandle: 'ftvaArticle'
+}
+const parsedArticleCategories = mockFTVAArticleData.articleCategories.map(category => category.title).join(', ')
+// data for share button in slot
+const mockSocialList = {
+  buttonTitle: 'Share',
+  hasIcon: true,
+  dropdownList: [
+    {
+      dropdownItemTitle: 'Copy Link',
+      dropdownItemUrl: '',
+      iconName: 'svg-icon-ftva-social-link',
+    },
+    {
+      dropdownItemTitle: 'Email',
+      dropdownItemUrl: '',
+      iconName: 'svg-icon-ftva-social-email',
+    },
+    {
+      dropdownItemTitle: 'Facebook',
+      dropdownItemUrl: 'https://www.facebook.com/sharer/sharer.php?u=',
+      iconName: 'svg-icon-ftva-social-facebook',
+    },
+    {
+      dropdownItemTitle: 'X',
+      dropdownItemUrl: 'https://twitter.com/share?url=',
+      iconName: 'svg-icon-ftva-social-x',
+    },
+  ],
+}
+export function FTVAArticleDetailWShareButton() {
+  return {
+    data() {
+      return {
+        ...mockFTVAArticleData,
+        parsedArticleCategories,
+        mockSocialList
+      }
+    },
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
+    // The ShareButton needs globalstore logic, so its included in this story
+    setup() {
+      onMounted(() => {
+        const globalStore = useGlobalStore()
+
+        const updateWinWidth = () => {
+          globalStore.winWidth = window.innerWidth
+        }
+
+        updateWinWidth()
+
+        window.addEventListener('resize', updateWinWidth)
+
+        onBeforeUnmount(() => {
+          window.removeEventListener('resize', updateWinWidth)
+        })
+      })
+    },
+    components: { CardMeta, ButtonDropdown },
+    template: ` 
+      <card-meta
+          :category="parsedArticleCategories"
+          :title="title"
+          :bylineOne="contributors[0].contributor"
+          :dateCreated="postDate"
+          :text="aboutTheAuthor"
+          sectionHandle="ftvaArticle"
+      >
+      <template v-slot:sharebutton><ButtonDropdown button-title="Share" has-icon=true :dropdown-list="mockSocialList.dropdownList" /></template>
+      </card-meta>
+  `,
+  }
+}
diff --git a/src/styles/ftva/_card-meta.scss b/src/styles/ftva/_card-meta.scss
@@ -4,7 +4,7 @@
   .category {
     @include ftva-button-link;
     color: $accent-blue;
-    margin: 0 0 20px;
+    margin: 0 0 12px;
   }
 
   .title {
@@ -14,7 +14,7 @@
   }
 
   .title-no-link {
-    @include ftva-h3;
+    @include ftva-h2;
     color: $heading-grey;
     margin: 0 0 24px;
   }
@@ -28,6 +28,18 @@
     margin-bottom: 8px;
   }
 
+  .byline-group {
+    flex-direction: row;
+    @include ftva-body-2;
+    color: $medium-grey;
+    .date-created::before {
+      content: url('ucla-library-design-tokens/assets/svgs/icon-ftva-diamond.svg');
+      margin: 0 8px;
+      padding-top: -10px;
+      filter: invert(98%) sepia(131%) saturate(1029%) hue-rotate(196deg) brightness(130%) contrast(68%);
+    }
+  }
+
   // styles the rich-text components
   // introduction and guestSpeaker
   .rich-text {
@@ -36,15 +48,35 @@
   }
 
   .sharebutton-slot {
-    margin-top: 28px;
-
+    margin-top: 20px;
+    margin-bottom: 36px;
     &:empty {
       display: none;
     }
+    @media #{$small} {
+      margin-top: 12px;
+      margin-bottom: 28px;
+    }
   }
 
   .parsed-start-time {
     @include ftva-emphasized-subtitle;
     color: $accent-blue;
   }
-}
+
+  &.ftvaArticle {
+    // on card-meta with sectionHandle prop = 'ftvaArticle'
+    // we have a unique 'About the Author' section which uses different styles
+    .heading-about-author {
+      @include ftva-subtitle-2;
+      color: $accent-blue;
+      padding-bottom: 4px;
+    }
+    .text {
+      :deep(.parsed-content) > p {
+        @include ftva-body-2;
+        color: $medium-grey;
+      }
+    }
+  }
+}