feat: creates ExcerptPod w/ NotesAccordion components

packages/vue-component-library/package.json

@@ -107,4 +107,4 @@
   "engines": {
     "pnpm": "^9.12.1"
   }
-}
+}

packages/vue-component-library/src/lib-components/ExcerptPod.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+// Imports
+import { computed, defineProps } from 'vue'
+import NotesAccordion from '@/lib-components/NotesAccordion.vue'
+import { useTheme } from '@/composables/useTheme'
+
+const props = withDefaults(defineProps<ExcerptPodProps>(), {
+  title: '',
+  subtitle: '',
+  text: '',
+  accordions: () => [],
+  labelOpen: '',
+  labelClose: '',
+})
+
+const theme = useTheme()
+
+// Props
+interface ExcerptPodProps {
+  title: string
+  subtitle: string
+  text: string
+  accordions: Array<{
+    title: string
+    text: string
+  }>
+  labelOpen: string
+  labelClose: string
+}
+
+// Computed
+const classes = computed(() => ['excerpt-pod', theme?.value || ''])
+
+const showAccordion = computed(() => {
+  return (
+    props.accordions.length > 0
+        && props.accordions.some(accordion => accordion.title || accordion.text)
+  )
+})
+</script>
+
+<template>
+  <div :class="classes">
+    <!-- Title -->
+    <h5 class="title" v-html="title" />
+    <!-- Info -->
+    <div class="info">
+      <h6 class="subtitle" v-html="subtitle" />
+      <div class="text-excerpt">
+        <div class="text" v-html="text" />
+        <NotesAccordion
+          v-if="showAccordion"
+          :items="accordions"
+          :label-open="labelOpen"
+          :label-close="labelClose"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "@/styles/dlc/_excerpt-pod.scss";
+</style>

packages/vue-component-library/src/lib-components/NotesAccordion.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+// Imports
+import {
+  computed,
+  defineProps,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  ref,
+} from 'vue'
+import SvgArrowDown from 'ucla-library-design-tokens/assets/svgs/icon-caret-down.svg'
+import type { ComponentPublicInstance } from 'vue'
+import { useTheme } from '@/composables/useTheme'
+
+const props = withDefaults(defineProps<NotesAccordionItem>(), {
+  items: () => [],
+  labelOpen: 'Less',
+  labelClose: 'More',
+})
+
+const theme = useTheme()
+
+// Props
+interface NotesAccordionItem {
+  items: Array<{
+    title: string
+    text: string
+  }>
+  labelOpen?: string
+  labelClose?: string
+}
+// Data
+const isOpen = ref(false)
+const textRefs = ref<(HTMLElement | null)[]>([])
+const textHeight = ref(0)
+
+// Computed
+const classes = computed(() => [
+  'notes-accordion',
+  theme?.value || '',
+  { 'is-open': isOpen.value },
+])
+
+const dynamicLabel = computed(() =>
+  isOpen.value ? props.labelOpen : props.labelClose
+)
+
+const wrapperStyles = computed(() => ({
+  height: isOpen.value ? `${textHeight.value}px` : '0',
+}))
+
+// Methods
+function measureTextHeight() {
+  let totalHeight = 0
+  for (const ref of textRefs.value) {
+    if (ref)
+      totalHeight += ref.getBoundingClientRect().height
+  }
+
+  textHeight.value = totalHeight
+}
+
+function toggle() {
+  isOpen.value = !isOpen.value
+  nextTick(() => {
+    measureTextHeight()
+  })
+}
+
+function getTextRef(idx: number) {
+  return (el: Element | ComponentPublicInstance | null) => setTextRef(idx, el)
+}
+
+function setTextRef(idx: number, el: Element | ComponentPublicInstance | null) {
+  // If it's a Vue component instance, get its $el property
+  const element
+        = el && '$el' in el ? (el.$el as HTMLElement) : (el as HTMLElement | null)
+  textRefs.value[idx] = element
+}
+
+// Lifecycle Hook
+onMounted(() => {
+  measureTextHeight()
+  window.addEventListener('resize', measureTextHeight)
+})
+onUnmounted(() => {
+  window.removeEventListener('resize', measureTextHeight)
+})
+</script>
+
+<template>
+  <div :class="classes">
+    <div class="wrapper" :style="wrapperStyles">
+      <div
+        v-for="(item, idx) in items"
+        :key="idx"
+        :ref="getTextRef(idx)"
+        class="text-wrapper"
+      >
+        <span class="title" v-html="item.title" />
+        <div class="text" v-html="item.text" />
+      </div>
+    </div>
+    <button class="btn" :aria-expanded="isOpen" @click="toggle">
+      <transition name="fade-label" mode="out-in">
+        <span :key="dynamicLabel" class="label" v-html="dynamicLabel" />
+      </transition>
+      <SvgArrowDown class="caret-icon" />
+    </button>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "@/styles/dlc/_notes-accordion.scss";
+</style>

packages/vue-component-library/src/stories/ExcerptPod.spec.js

@@ -0,0 +1,20 @@
+describe('Funkhaus / ExcerptPod', () => {
+  it('Default', () => {
+    cy.visit(
+      '/iframe.html?id=funkhaus-excerptpod--default&args=&viewMode=story'
+    )
+    cy.get('.excerpt-pod').should('exist')
+    cy.get('.excerpt-pod .title').should('exist')
+    cy.get('.excerpt-pod .subtitle').should('exist')
+    cy.get('.excerpt-pod .text').should('exist')
+    cy.percySnapshot('Funkhaus / ExcerptPod: Default')
+  })
+
+  it('Renders NotesAccordion when accordions are present', () => {
+    cy.visit(
+      '/iframe.html?id=funkhaus-excerptpod--more-sections&args=&viewMode=story'
+    )
+    cy.get('.excerpt-pod .notes-accordion').should('exist')
+    cy.get('.notes-accordion .btn').should('exist')
+  })
+})

packages/vue-component-library/src/stories/ExcerptPod.stories.js

@@ -0,0 +1,88 @@
+import { computed } from 'vue'
+import ExcerptPod from '@/lib-components/ExcerptPod.vue'
+
+export default {
+  title: 'Funkhaus / ExcerptPod',
+  component: ExcerptPod,
+  argTypes: {
+    title: {
+      control: 'text',
+      description: 'Accordion title (HTML allowed)',
+    },
+    text: {
+      control: 'text',
+      description: 'Accordion content (HTML allowed)',
+    },
+    accordions: {
+      control: 'object',
+      description: 'Array of accordion sections',
+    },
+    labelOpen: { control: 'text', description: 'Label when open' },
+    labelClose: { control: 'text', description: 'Label when closed' },
+  },
+}
+
+function Template(args) {
+  return {
+    components: { ExcerptPod },
+    provide() {
+      return {
+        theme: computed(() => 'dlc'),
+      }
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+    <ExcerptPod
+        :title="args.title"
+        :text="args.text"
+        :subtitle="args.subtitle"
+        :accordions="args.accordions"
+        :labelOpen="args.labelOpen"
+        :labelClose="args.labelClose"
+    />
+  `,
+  }
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  title: 'Notes',
+  subtitle: 'Subtitle goes hereeee',
+  text: 'This digital collection is comprised of selected digitized photographic negatives from the analog photographic archive. Digitization and description of this collection is ongoing. The analog collection consists of photonegatives documenting events and people in Southern California and photographic prints documenting events and people in Southern California, the U.S., and the world. The material originates from the Los Angeles Times newspaper and includes glass negatives (ca. 1918-1932), nitrate negatives (ca. 1925-45), and safety negatives (ca. 1935-present). Also includes prints and negatives from the Los Angeles Times Orange County and San Diego bureaus.',
+  accordions: [
+    {
+      title: 'Accordion Section',
+      text: 'Accordion content goes here. It can be as long as you want, and it can include <b>HTML</b> tags.',
+    },
+  ],
+  labelOpen: 'Show Less',
+  labelClose: 'Show More',
+}
+export const EmptyProps = Template.bind({})
+EmptyProps.args = {
+  ...Default.args,
+  accordions: [{}],
+}
+
+export const MoreSections = Template.bind({})
+MoreSections.args = {
+  ...Default.args,
+  accordions: [
+    {
+      title: 'Section 1',
+      text: 'First section content.',
+    },
+    {
+      title: 'Section 2',
+      text: 'Second section content.',
+    },
+    {
+      title: 'Section 3',
+      text: 'Third section content.',
+    },
+  ],
+  labelOpen: 'Collapse All',
+  labelClose: 'Expand All',
+}

packages/vue-component-library/src/stories/NotesAccordion.spec.js

@@ -0,0 +1,20 @@
+describe('Funkhaus / NotesAccordion', () => {
+  it('Default', () => {
+    cy.visit(
+      '/iframe.html?id=funkhaus-notesaccordion--default&args=&viewMode=story'
+    )
+    cy.get('.notes-accordion').should('exist')
+    cy.get('.notes-accordion .btn').should('exist')
+    cy.get('.notes-accordion .label').should('exist')
+    cy.percySnapshot('Funkhaus / NotesAccordion: Default')
+  })
+
+  it('Toggles open/close label on button click', () => {
+    cy.visit(
+      '/iframe.html?id=funkhaus-notesaccordion--default&args=&viewMode=story'
+    )
+    cy.get('.notes-accordion .btn').click()
+    cy.get('.notes-accordion').should('have.class', 'is-open')
+    cy.get('.notes-accordion .label').should('exist')
+  })
+})

packages/vue-component-library/src/stories/NotesAccordion.stories.js

@@ -0,0 +1,66 @@
+import { computed } from 'vue'
+import NotesAccordion from '@/lib-components/NotesAccordion.vue'
+
+export default {
+  title: 'Funkhaus / NotesAccordion',
+  component: NotesAccordion,
+  argTypes: {
+    items: {
+      control: 'object',
+      description: 'Array of accordion sections',
+    },
+    labelOpen: { control: 'text', description: 'Label when open' },
+    labelClose: { control: 'text', description: 'Label when closed' },
+  },
+}
+
+function Template(args) {
+  return {
+    components: { NotesAccordion },
+    provide() {
+      return {
+        theme: computed(() => 'dlc'),
+      }
+    },
+    setup() {
+      return { args }
+    },
+    template: `
+    <NotesAccordion
+      :items="args.items"
+      :labelOpen="args.labelOpen"
+      :labelClose="args.labelClose"
+    />
+  `,
+  }
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  items: [
+    {
+      title: 'Background',
+      text: 'IInani oratio numquam ea ius, per nihil mollis percipitur te. Mundi omittam fastidii ius ex. Mel ex everti consequat, sit equidem corrumpit adversarium cu. Sed an facer utroque. Pro dictas praesent delicatissimi in, ceteros nostrum blandit cu nec. Audire iisque id vis, sea cu omnes democritum temporibus.Eu vel dicam soluta, id omnis impetus pro. Error vocibus tacimates vim ut. Est in eirmod oblique.Inani oratio numquam ea ius, per nihil mollis percipitur te. Mundi omittam fastidii ius ex. Mel ex everti consequat, sit equidem corrumpit adversarium cu. Sed an facer utroque. Pro dictas praesent delicatissimi in, ceteros nostrum blandit cu nec. Audire iisque id vis, sea cu omnes democritum temporibus.Eu vel dicam soluta, id omnis impetus pro. Error vocibus tacimates vim ut. Est in eirmod oblique.',
+    },
+  ],
+}
+
+export const MoreSections = Template.bind({})
+MoreSections.args = {
+  items: [
+    {
+      title: 'Section 1',
+      text: 'First section content.',
+    },
+    {
+      title: 'Section 2',
+      text: 'Second section content.',
+    },
+    {
+      title: 'Section 3',
+      text: 'Third section content.',
+    },
+  ],
+  labelOpen: 'Collapse All',
+  labelClose: 'Expand All',
+}