feat: creates ExcerptPod component

packages/vue-component-library/package.json

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

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

@@ -0,0 +1,198 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue'
+
+export interface Props {
+  duration?: number
+  easing?: string
+  opened?: boolean
+  preventClose?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  duration: 400,
+  easing: 'cubic-bezier(0.4, 0, 0.2, 1)',
+  opened: false,
+  preventClose: false
+})
+
+const emit = defineEmits<{
+  opening: []
+  opened: []
+  closing: []
+  closed: []
+}>()
+
+const isOpened = ref<boolean>(props.opened)
+const isClosing = ref<boolean>(false)
+const isExpanding = ref<boolean>(false)
+const animation = ref<Animation | null>(null)
+const height = ref<string>('auto')
+const detailsRef = ref<HTMLDetailsElement | null>(null)
+const summaryRef = ref<HTMLElement | null>(null)
+const contentRef = ref<HTMLElement | null>(null)
+
+const classes = computed(() => [
+  'effect-slide-toggle',
+  { 'is-opened': isOpened.value },
+  { 'is-closed': !isOpened.value },
+  { 'is-closing': isClosing.value },
+  { 'is-opening': isExpanding.value }
+])
+
+watch(() => props.opened, (newVal: boolean) => {
+  if (newVal)
+    open()
+
+  else
+    close()
+})
+
+function onClick(): void {
+  if (isClosing.value || !isOpened.value) {
+    open()
+  }
+  else if (isExpanding.value || isOpened.value) {
+    if (!props.preventClose)
+      close()
+  }
+}
+
+function close(): void {
+  if (!detailsRef.value || !summaryRef.value)
+    return
+
+  isClosing.value = true
+  emit('closing')
+
+  const startHeight = `${detailsRef.value.offsetHeight}px`
+  const endHeight = `${summaryRef.value.offsetHeight}px`
+
+  if (animation.value)
+    animation.value.cancel()
+
+  animation.value = detailsRef.value.animate(
+    { height: [startHeight, endHeight] },
+    { duration: props.duration, easing: props.easing }
+  )
+
+  animation.value.onfinish = () => onAnimationFinish(false)
+  animation.value.oncancel = () => (isClosing.value = false)
+}
+
+async function open(): Promise<void> {
+  if (!detailsRef.value)
+    return
+
+  height.value = `${detailsRef.value.offsetHeight}px`
+  isOpened.value = true
+  emit('opening')
+
+  await nextTick()
+  expand()
+}
+
+function expand(): void {
+  if (!detailsRef.value || !summaryRef.value || !contentRef.value)
+    return
+
+  isExpanding.value = true
+  const startHeight = `${detailsRef.value.offsetHeight}px`
+  const endHeight = `${summaryRef.value.offsetHeight + contentRef.value.offsetHeight}px`
+
+  if (animation.value)
+    animation.value.cancel()
+
+  animation.value = detailsRef.value.animate(
+    { height: [startHeight, endHeight] },
+    { duration: props.duration, easing: props.easing }
+  )
+
+  animation.value.onfinish = () => onAnimationFinish(true)
+  animation.value.oncancel = () => (isExpanding.value = false)
+}
+
+function onAnimationFinish(open: boolean): void {
+  isOpened.value = open
+  animation.value = null
+  isClosing.value = false
+  isExpanding.value = false
+  height.value = 'auto'
+  if (open)
+    emit('opened')
+  else
+    emit('closed')
+}
+
+// Animate to a specific height (useful for content changes)
+function animateToHeight(targetHeight: number, startHeight?: number): void {
+  if (!detailsRef.value || !summaryRef.value)
+    return
+
+  const startHeightPx = startHeight ? `${startHeight}px` : `${detailsRef.value.offsetHeight}px`
+  const endHeight = `${targetHeight}px`
+
+  if (animation.value)
+    animation.value.cancel()
+
+  animation.value = detailsRef.value.animate(
+    { height: [startHeightPx, endHeight] },
+    { duration: props.duration, easing: props.easing }
+  )
+
+  animation.value.onfinish = () => {
+    height.value = endHeight
+    animation.value = null
+  }
+  animation.value.oncancel = () => {
+    animation.value = null
+  }
+}
+
+// Expose methods for parent components
+defineExpose({
+  open,
+  close,
+  animateToHeight,
+  isOpened: computed(() => isOpened.value)
+})
+</script>
+
+<template>
+  <details
+    ref="detailsRef"
+    :class="classes"
+    :open="isOpened"
+  >
+    <summary
+      ref="summaryRef"
+      class="summary"
+      @click.prevent="onClick"
+    >
+      <slot name="summary" />
+    </summary>
+    <div
+      ref="contentRef"
+      class="content"
+    >
+      <slot />
+    </div>
+  </details>
+</template>
+
+<style scoped>
+.effect-slide-toggle {
+  overflow: hidden;
+  height: v-bind('height');
+
+  .summary {
+    display: block;
+    cursor: pointer;
+    user-select: none;
+
+    &::marker,
+    &::-webkit-details-marker {
+      display: none;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+// Imports
+import { computed, defineProps, ref } from 'vue'
+import SvgArrowDown from 'ucla-library-design-tokens/assets/svgs/icon-caret-down.svg'
+import { useTheme } from '@/composables/useTheme'
+import EffectSlideToggle from '@/lib-components/EffectSlideToggle.vue'
+
+// Props
+interface ExcerptPodProps {
+  title: string
+  subtitle: string
+  text: string
+  labelOpen: string
+  labelClose: string
+  sentenceSplitCount: number
+}
+const props = withDefaults(defineProps<ExcerptPodProps>(), {
+  title: '',
+  subtitle: '',
+  text: '',
+  labelOpen: '',
+  labelClose: '',
+  sentenceSplitCount: 2,
+})
+
+const theme = useTheme()
+
+// Data
+const isOpen = ref(false)
+
+// Computed
+const classes = computed(() => [
+  'excerpt-pod',
+  theme?.value || '',
+  { 'is-open': isOpen.value },
+])
+
+const dynamicLabel = computed(() =>
+  isOpen.value ? props.labelOpen : props.labelClose
+)
+
+// Split text into first two sentences and the rest
+const textParts = computed(() => {
+  if (!props.text)
+    return { truncatedText: '', remainingText: '', hasMore: false }
+
+  // Simple sentence splitting - splits on period followed by space and capital letter
+  const sentenceRegex = /\.\s+(?=[A-Z])/g
+  const sentences = props.text.split(sentenceRegex)
+
+  if (sentences.length <= props.sentenceSplitCount) {
+    return {
+      truncatedText: props.text,
+      remainingText: '',
+      hasMore: false
+    }
+  }
+
+  // First X sentences
+  let truncatedText = sentences.slice(0, props.sentenceSplitCount).join('. ')
+
+  // Add period if not present
+  if (!truncatedText.endsWith('.'))
+    truncatedText += '.'
+
+  // Remaining text - rejoin with periods
+  const remainingText = ` ${sentences.slice(props.sentenceSplitCount).join('.')}`
+
+  return {
+    truncatedText,
+    remainingText,
+    hasMore: true,
+  }
+})
+
+// Methods
+function toggle() {
+  isOpen.value = !isOpen.value
+}
+</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">
+        <EffectSlideToggle
+          :opened="isOpen"
+          @click.stop="toggle"
+        >
+          <!-- summary -->
+          <template #summary>
+            <div class="summary-content">
+              <span v-html="textParts.truncatedText" />
+            </div>
+          </template>
+          <!-- content -->
+          <div v-html="textParts.remainingText" />
+        </EffectSlideToggle>
+        <button
+          v-if="textParts.hasMore"
+          class="btn"
+          :aria-expanded="isOpen"
+          @click.stop="toggle"
+        >
+          <transition
+            name="fade-label"
+            mode="out-in"
+          >
+            <span
+              :key="dynamicLabel"
+              class="label"
+              v-html="dynamicLabel"
+            />
+          </transition>
+          <SvgArrowDown class="caret-icon" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "@/styles/dlc/_excerpt-pod.scss";
+</style>

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

@@ -0,0 +1,9 @@
+describe('Funkhaus / ExcerptPod', () => {
+  it('Default', () => {
+    cy.visit(
+      '/iframe.html?id=funkhaus-excerptpod--default&args=&viewMode=story'
+    )
+    cy.get('.excerpt-pod').should('exist')
+    cy.percySnapshot('Funkhaus / ExcerptPod: Default')
+  })
+})