Merge branch 'main' into card-meta_APPS-3011_fix-about-author_APPS-29…

…76_link-category-in-event-detail

CHANGELOG.md

@@ -1,3 +1,17 @@
+## [3.29.7](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.29.6...v3.29.7) (2024-10-22)
+
+
+### Bug Fixes
+
+* APPS-2972   Reformat dates to exclude the leading zero on single digit dates ([#638](https://github.com/UCLALibrary/ucla-library-website-components/issues/638)) ([76b7155](https://github.com/UCLALibrary/ucla-library-website-components/commit/76b715599dd529232f1655b92afc21df86012b52))
+
+## [3.29.6](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.29.5...v3.29.6) (2024-10-22)
+
+
+### Bug Fixes
+
+* APPS-3007 Use RichText comp in BlockCTA comp ([#634](https://github.com/UCLALibrary/ucla-library-website-components/issues/634)) ([42adaea](https://github.com/UCLALibrary/ucla-library-website-components/commit/42adaeafa0c6424d063fc2220cb727946e25b173))
+
 ## [3.29.5](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.29.4...v3.29.5) (2024-10-18)
 
 

package.json

@@ -2,7 +2,7 @@
   "name": "ucla-library-website-components",
   "type": "module",
   "private": false,
-  "version": "3.29.5",
+  "version": "3.29.7",
   "main": "./dist/ucla-library-website-components.umd.cjs",
   "module": "./dist/ucla-library-website-components.js",
   "style": "./dist/style.css",

src/lib-components/BlockCallToAction.vue

@@ -4,6 +4,7 @@ import { computed, defineAsyncComponent } from 'vue'
 import { useGlobalStore } from '@/stores/GlobalStore'
 
 import ButtonLink from '@/lib-components/ButtonLink.vue'
+import RichText from '@/lib-components/RichText.vue'
 
 import { useTheme } from '@/composables/useTheme'
 
@@ -72,6 +73,10 @@ const SvgCallToActionMoney = defineAsyncComponent(() =>
   import('ucla-library-design-tokens/assets/svgs/call-to-action-money.svg')
 )
 
+const SvgCallToActionFTVAExternalLinkDark = defineAsyncComponent(() =>
+  import('ucla-library-design-tokens/assets/svgs/icon-ftva-external-link-dark.svg')
+)
+
 const SvgCallToActionFTVAInfo = defineAsyncComponent(() =>
   import('ucla-library-design-tokens/assets/svgs/icon-ftva-info.svg')
 )
@@ -89,6 +94,10 @@ const iconMapping = {
     icon: SvgCallToActionFind,
     label: 'CTA Find'
   },
+  'svg-call-to-action-ftva-external-link-dark': {
+    icon: SvgCallToActionFTVAExternalLinkDark,
+    label: 'CTA FTVA External Link'
+  },
   'svg-call-to-action-ftva-info': {
     icon: SvgCallToActionFTVAInfo,
     label: 'CTA FTVA Info'
@@ -187,11 +196,7 @@ const classes = computed(() => {
       >
         {{ parsedContent.title }}
       </h2>
-      <div
-        :class="{ 'ftva-global-data': props.useGlobalData && theme === 'ftva' }"
-        class="text"
-        v-html="parsedContent.text"
-      />
+      <RichText :class="{ 'ftva-global-data': props.useGlobalData && theme === 'ftva' }" class="text" :rich-text-content="parsedContent.text" />
     </div>
     <div v-if="theme !== 'ftva'">
       <ButtonLink

src/lib-components/BlockCardThreeColumn.vue

@@ -6,6 +6,7 @@
 import { computed } from 'vue'
 import type { PropType } from 'vue'
 import MoleculePlaceholder from 'ucla-library-design-tokens/assets/svgs/molecule-placeholder.svg'
+import format from 'date-fns/format'
 import { useTheme } from '@/composables/useTheme'
 
 // COMPONENTS
@@ -15,7 +16,6 @@ import CardMeta from '@/lib-components/CardMeta.vue'
 
 // UTILITY FUNCTIONS
 import formatFullDay from '@/utils/formatFullDay'
-import formatDay from '@/utils/formatEventDay'
 import formatMonth from '@/utils/formatEventMonth'
 
 // TYPESCRIPT
@@ -75,8 +75,7 @@ const parsedDateMonth = computed(() => {
 
 const parsedDateDay = computed(() => {
   if (props.startDate)
-    return formatDay(props.startDate)
-
+    return format(new Date(props.startDate), 'd')
   return ''
 })
 

src/stories/BlockCardThreeColumn.stories.js

@@ -28,6 +28,22 @@ const mockDefault = {
   ],
 }
 
+const mockSingleDigitDate = {
+  to: 'series/todd-solondz-series',
+  startDate: '2026-02-03T06:30:00+00:00',
+  image: API.image,
+  title: 'TEST - Todd Solondz Series',
+  endDate: '2026-04-08T05:45:00+00:00',
+  tagLabels: [
+    {
+      title: 'Guest speaker'
+    },
+    {
+      title: '35mm'
+    }
+  ],
+}
+
 // Variations of stories below
 export function Default(args) {
   return {
@@ -53,6 +69,30 @@ export function Default(args) {
   }
 }
 
+export function SingleDigitDate(args) {
+  return {
+    data() {
+      return { ...mockSingleDigitDate }
+    },
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
+    components: { BlockCardThreeColumn },
+    template: `
+      <block-card-three-column
+        :to="to"
+        :start-date="startDate"
+        :image="image"
+        :image-aspect-ratio="100"
+        :title="title"
+        :tagLabels="tagLabels"
+        :startTime="parsedTime"
+      />`,
+  }
+}
+
 export function LongTitle(args) {
   return {
     data() {

src/stories/BlockClippedDate.stories.js

@@ -16,8 +16,26 @@ const mock = {
   title: 'Seven seas of the ancient world',
   alternativeFullName: '陳餘敏卿纪念基金',
   language: 'zh',
-  startDate: '2022-03-31T07:00:00+00:00',
-  endDate: '2021-11-26T11:00:00-08:00',
+  startDate: '2026-12-17T07:00:00+00:00',
+  endDate: '2027-12-26T11:00:00-08:00',
+  text: '<p>In Greek literature (which is where the phrase entered Western literature), the Seven Seas were the Aegean, Adriatic, Mediterranean, Black, Red, and Caspian seas, with the Persian Gulf</p>',
+  imageAspectRatio: 60,
+  locations: [
+    { title: 'Powellarium', to: '/location/bar' },
+    { title: 'Research Library (Charles E. Young)', to: '/location/baz' },
+  ],
+  sectionHandle: 'event',
+}
+
+const mockSingleDigitDate = {
+  image: API.image,
+  to: '/visit/foo/bar/',
+  category: 'Ullamco',
+  title: 'Seven seas of the ancient world',
+  alternativeFullName: '陳餘敏卿纪念基金',
+  language: 'zh',
+  startDate: '2026-02-05T07:00:00+00:00',
+  endDate: '2027-02-07T11:00:00-08:00',
   text: '<p>In Greek literature (which is where the phrase entered Western literature), the Seven Seas were the Aegean, Adriatic, Mediterranean, Black, Red, and Caspian seas, with the Persian Gulf</p>',
   imageAspectRatio: 60,
   locations: [
@@ -68,6 +86,31 @@ export function Default() {
   }
 }
 
+export function SingleDigitDate() {
+  return {
+    data() {
+      return { ...mockSingleDigitDate }
+    },
+    components: { BlockClippedDate },
+    template: `
+      <block-clipped-date
+          :image="image"
+          :to="to"
+          :category="category"
+          :title="title"
+          :start-date="startDate"
+          :end-date="endDate"
+          :text="text"
+          :image-aspect-ratio="60"
+          :locations="locations"
+          :alternativeFullName="alternativeFullName"
+          :language="language"
+          :section-handle="sectionHandle"
+      />
+  `,
+  }
+}
+
 export function OngoingEvent() {
   return {
     data() {

src/stories/SectionTeaserList.stories.js

@@ -17,7 +17,7 @@ const mockDefault = [
     category: 'Ullamco',
     title: 'Fames ac turpis egestas sed tempus lorem ipsum',
     startDate: '2021-09-03T08:00:00+00:00',
-    endDate: '2021-10-08T07:10:00+00:00',
+    endDate: '2021-10-28T07:10:00+00:00',
     text: 'Ultricies leo integer malesuada nunc vel risus commodo viverra.',
     sectionHandle: 'event',
   },
@@ -26,8 +26,8 @@ const mockDefault = [
     to: '/visit/foo/baz/',
     category: 'Sagittis',
     title: 'Amet nisl suscipit adipiscing bibendum lectus sed',
-    startDate: '2021-09-03T08:00:00+00:00',
-    endDate: '2021-10-08T07:10:00+00:00',
+    startDate: '2021-09-09T08:00:00+00:00',
+    endDate: '2021-10-18T07:10:00+00:00',
     sectionHandle: 'event',
     text: 'A diam maecenas sed enim. Tristique senectus et netus et malesuada fames. Nibh nisl condimentum id venenatis. Mi bibendum neque egestas congue. Placerat duis ultricies lacus sed turpis. Massa enim nec dui nunc mattis. Dolor morbi non arcu risus quis varius vestibulum sed.',
   },
@@ -37,7 +37,7 @@ const mockDefault = [
     category: 'Tincidunt',
     title: 'Scelerisque varius morbi enim nunc ornare quam',
     startDate: '2021-09-03T08:00:00+00:00',
-    endDate: '2021-10-08T07:10:00+00:00',
+    endDate: '2021-10-23T07:10:00+00:00',
     sectionHandle: 'event',
     text: 'Eu ultrices vitae auctor eu augue. Dolor morbi non arcu risus quis varius quam. Augue lacus viverra vitae congue eu consequat.',
   },
@@ -46,8 +46,8 @@ const mockDefault = [
     to: '/visit/foo/ban/',
     category: 'Gravida',
     title: 'At varius vel pharetra vel turpis. Quam vulputate dignissim suspendisse in est ante in. Sed cras ornare arcu. Non diam phasellus vestibulum.',
-    startDate: '2021-09-03T08:00:00+00:00',
-    endDate: '2021-10-08T07:10:00+00:00',
+    startDate: '2021-09-08T08:00:00+00:00',
+    endDate: '2021-10-18T07:10:00+00:00',
     sectionHandle: 'event',
     text: 'Accumsan tortor posuere ac ut consequat semper viverra libero.',
   },
@@ -70,7 +70,7 @@ const mockMixedOngoingEvents = [
     category: 'Ullamco',
     title: 'Fames ac turpis egestas sed tempus lorem ipsum',
     startDate: '2021-09-03T08:00:00+00:00',
-    endDate: '2021-10-08T07:10:00+00:00',
+    endDate: '2021-10-13T07:10:00+00:00',
     text: 'Ultricies leo integer malesuada nunc vel risus commodo viverra.',
     sectionHandle: 'event',
   },
@@ -133,7 +133,7 @@ const mockDynamicComponent = [
     id: '2847944',
     to: 'events/la-région-centrale-03-08-24',
     title: 'TEST - La Région Centrale Screening',
-    startDate: '2027-03-31T07:00:00+00:00',
+    startDate: '2027-03-05T07:00:00+00:00',
     image: API.image,
     tagLabels: [
       { title: 'Guest speaker' },

src/styles/default/_block-call-to-action.scss

@@ -97,6 +97,14 @@
     max-width: 640px;
   }
 
+  :deep(.rich-text) {
+    padding-right: 0;
+
+    .parsed-content {
+      color: unset; 
+    }
+  }
+
   .text {
     @include step-0;
     text-align: center;
@@ -105,6 +113,7 @@
     max-width: 640px;
   }
 
+
   // Breakpoints
   @media #{$medium} {
     &.full-width {

src/styles/ftva/_block-call-to-action.scss

@@ -42,23 +42,20 @@
     margin-bottom: 4px;
   }
 
-  .text {
+
+  :deep(.rich-text.text) {
     @include ftva-body-2;
-    font-size: 16px;
     line-height: 1.5;
     max-width: 100%;
     position: relative;
+
+    p {
+      font-size: 16px;
+    }
   }
 
-  :deep(.text a) {
-    color: $accent-blue;
-    text-decoration: underline;
-  }
-
-  :deep(.text.ftva-global-data > p::after) {
+  :deep(.rich-text a[target="_blank"]::after) {
     content: url('ucla-library-design-tokens/assets/svgs/icon-ftva-external-link-dark.svg');
-    position: absolute;
-    margin-left: 10px;
-    bottom: -1px;
+    scale: 1;
   }
 }