From a6038d336ddab576674a3c8b101759f5ac1ff0e9 Mon Sep 17 00:00:00 2001
From: pghorpade <pghorpade@library.ucla.edu>
Date: Mon, 16 Sep 2024 13:55:17 -0700
Subject: [PATCH 01/20] feat: set ref ismobile to false and update it in
 onmounted client side

---
 src/lib-components/HeaderSmart.vue | 71 +++++++++++++++---------------
 src/stories/HeaderSmart.stories.js | 41 +++--------------
 2 files changed, 42 insertions(+), 70 deletions(-)

diff --git a/src/lib-components/HeaderSmart.vue b/src/lib-components/HeaderSmart.vue
index edca78b77..4a32d8869 100644
--- a/src/lib-components/HeaderSmart.vue
+++ b/src/lib-components/HeaderSmart.vue
@@ -1,56 +1,55 @@
-<script>
-import { mapState } from 'pinia'
+<script setup>
+import { computed, onMounted, ref, watch } from 'vue'
+import { useGlobalStore } from '@/stores/GlobalStore'
+import { useWindowSize } from '@vueuse/core'
+import { storeToRefs } from 'pinia'
 import SiteBrandBar from '@/lib-components/SiteBrandBar'
 import HeaderMainResponsive from '@/lib-components/HeaderMainResponsive'
 import HeaderMain from '@/lib-components/HeaderMain'
-import { useGlobalStore } from '@/stores/GlobalStore'
 
-export default {
-  name: 'HeaderSmart',
-  components: {
-    SiteBrandBar,
-    HeaderMainResponsive,
-    HeaderMain,
-  },
-  props: {
-    title: {
-      type: String,
-      default: '',
-    },
+// Props
+const props = defineProps({
+  title: {
+    type: String,
+    default: '',
   },
-  computed: {
-    ...mapState(useGlobalStore, ['header', 'winWidth']),
-    primaryMenuItems() {
-      return this.header.primary
-    },
-    secondaryMenuItems() {
-      return this.header.secondary
-    },
-    isMobile() {
-      return this.winWidth <= 1024
-    },
-    whichHeader() {
-      return this.isMobile ? 'header-main-responsive' : 'header-main'
-    },
+})
+
+// Access the global store
+const globalStore = useGlobalStore()
+const { header } = storeToRefs(globalStore)
+const isMobile = ref(false)
+onMounted(() => {
+  const { width } = useWindowSize()
+  watch(width, (newWidth) => {
+    isMobile.value = newWidth <= 1200
   },
-}
+    { immediate: true })
+})
+// Computed properties
+const primaryMenuItems = computed(() => header.value.primary)
+const secondaryMenuItems = computed(() => header.value.secondary)
+const whichHeader = computed(() => (isMobile.value ? HeaderMainResponsive : HeaderMain))
 </script>
 
 <template>
   <header class="header-smart">
     <SiteBrandBar class="brand-bar" />
     <component
-      :is="whichHeader" :class="isMobile ? 'mobile-header' : 'desktop-header'" :primary-nav="primaryMenuItems"
-      :secondary-nav="secondaryMenuItems" :title="title"
+      :is="whichHeader"
+      :class="isMobile ? 'mobile-header' : 'desktop-header'"
+      :primary-nav="primaryMenuItems"
+      :secondary-nav="secondaryMenuItems"
+      :title="title"
     />
   </header>
 </template>
 
 <style lang="scss" scoped>
 @media #{$medium} {
-    .brand-bar {
-        position: absolute;
-        width: 100%;
-    }
+  .brand-bar {
+    position: absolute;
+    width: 100%;
+  }
 }
 </style>
diff --git a/src/stories/HeaderSmart.stories.js b/src/stories/HeaderSmart.stories.js
index ef2ba6cc1..992ae7b85 100644
--- a/src/stories/HeaderSmart.stories.js
+++ b/src/stories/HeaderSmart.stories.js
@@ -1,12 +1,15 @@
 // Storybook default settings
 import { useGlobalStore } from '@/stores/GlobalStore'
 import HeaderSmart from '@/lib-components/HeaderSmart'
+import { onMounted, ref } from 'vue'
 
 export default {
   title: 'GLOBAL / Header Smart',
   component: HeaderSmart,
 }
 
+
+
 const mock = {
   secondary: [
     {
@@ -262,11 +265,11 @@ const mockMicrosite = {
 // Variations of stories below
 export function Default() {
   return {
-    created() {
+    setup() {
       const globalStore = useGlobalStore()
       globalStore.header.primary = mock.primary
       globalStore.header.secondary = mock.secondary
-      globalStore.winWidth = 824
+      // To simulate mobile header just resize the storybook window
     },
 
     components: { HeaderSmart },
@@ -278,11 +281,11 @@ export function Default() {
 // Variations of stories below
 export function DefaultMicrosite() {
   return {
-    created() {
+    setup() {
       const globalStore = useGlobalStore()
       globalStore.header.primary = mockMicrosite.primary
       globalStore.header.secondary = mockMicrosite.secondary
-      globalStore.winWidth = 824
+      // To simulate mobile header just resize the storybook window
     },
 
     components: { HeaderSmart },
@@ -290,33 +293,3 @@ export function DefaultMicrosite() {
     template: '<header-smart title="Modern Endangered Archives Program"/>',
   }
 }
-
-export function DesktopWindowWidth() {
-  return {
-    created() {
-      const globalStore = useGlobalStore()
-      globalStore.header.primary = mock.primary
-      globalStore.header.secondary = mock.secondary
-      globalStore.winWidth = 1200
-    },
-    components: { HeaderSmart },
-
-    template: '<header-smart />',
-  }
-}
-
-export function DesktopWindowWidthMicrosite() {
-  return {
-    created() {
-      const globalStore = useGlobalStore()
-      globalStore.header.primary = mockMicrosite.primary
-      globalStore.header.secondary = mockMicrosite.secondary
-      globalStore.winWidth = 1200
-    },
-
-    components: { HeaderSmart },
-
-    template: `<header-smart 
-            title="Modern Endangered Archives Program" />`,
-  }
-}

From a4550b17b20ac037c45add0cba21ebda3f34433c Mon Sep 17 00:00:00 2001
From: pghorpade <pghorpade@library.ucla.edu>
Date: Fri, 20 Sep 2024 08:07:24 -0700
Subject: [PATCH 02/20] fix: hydration error and undefined errors by adding
 watchers

---
 src/lib-components/HeaderMain.vue     |  11 ++-
 src/lib-components/HeaderSmart.vue    |  24 ++++--
 src/lib-components/IconWithLink.vue   | 112 +++++++++++++++-----------
 src/lib-components/NavSecondary.vue   |  79 ++++++++++++++----
 src/styles/ftva/_section-wrapper.scss |  44 ++++++++--
 5 files changed, 196 insertions(+), 74 deletions(-)

diff --git a/src/lib-components/HeaderMain.vue b/src/lib-components/HeaderMain.vue
index 69844a5ff..a7877f48b 100644
--- a/src/lib-components/HeaderMain.vue
+++ b/src/lib-components/HeaderMain.vue
@@ -32,8 +32,15 @@ const parseTitle = computed(() => {
 
 <template>
   <header class="header-main">
-    <NavSecondary :items="secondaryNav" :is-microsite="parseTitle" />
-    <NavPrimary class="primary" :items="primaryNav" :title="title" />
+    <NavSecondary
+      :items="secondaryNav"
+      :is-microsite="parseTitle"
+    />
+    <NavPrimary
+      class="primary"
+      :items="primaryNav"
+      :title="title"
+    />
   </header>
 </template>
 
diff --git a/src/lib-components/HeaderSmart.vue b/src/lib-components/HeaderSmart.vue
index 4a32d8869..072a9e52e 100644
--- a/src/lib-components/HeaderSmart.vue
+++ b/src/lib-components/HeaderSmart.vue
@@ -18,25 +18,39 @@ const props = defineProps({
 // Access the global store
 const globalStore = useGlobalStore()
 const { header } = storeToRefs(globalStore)
+// Use refs for primary, secondary menu items, and header type
+const primaryMenuItems = ref(header.value.primary || [])
+const secondaryMenuItems = ref(header.value.secondary || [])
+const currentHeader = ref(HeaderMain)
+
 const isMobile = ref(false)
 onMounted(() => {
   const { width } = useWindowSize()
   watch(width, (newWidth) => {
+    console.log("newWidth", newWidth)
     isMobile.value = newWidth <= 1200
+    currentHeader.value = isMobile.value ? HeaderMainResponsive : HeaderMain
   },
     { immediate: true })
+
+  watch(
+    header,
+    (newVal, oldVal) => {
+      console.log('Header updated from parent page', newVal, oldVal)
+      primaryMenuItems.value = newVal.primary
+      secondaryMenuItems.value = newVal.secondary
+    },
+    { deep: true, immediate: true }
+  )
 })
-// Computed properties
-const primaryMenuItems = computed(() => header.value.primary)
-const secondaryMenuItems = computed(() => header.value.secondary)
-const whichHeader = computed(() => (isMobile.value ? HeaderMainResponsive : HeaderMain))
+
 </script>
 
 <template>
   <header class="header-smart">
     <SiteBrandBar class="brand-bar" />
     <component
-      :is="whichHeader"
+      :is="currentHeader"
       :class="isMobile ? 'mobile-header' : 'desktop-header'"
       :primary-nav="primaryMenuItems"
       :secondary-nav="secondaryMenuItems"
diff --git a/src/lib-components/IconWithLink.vue b/src/lib-components/IconWithLink.vue
index e5172ab26..70d2bf686 100644
--- a/src/lib-components/IconWithLink.vue
+++ b/src/lib-components/IconWithLink.vue
@@ -1,11 +1,12 @@
 <script>
 import { defineAsyncComponent } from 'vue'
 import SmartLink from '@/lib-components/SmartLink.vue'
-
+import SvgIconFtvaGcal from 'ucla-library-design-tokens/assets/svgs/icon-ftva-gcal.svg'
 export default {
   name: 'IconWithLink',
   components: {
     SmartLink,
+    SvgIconFtvaGcal,
     SvgIconConsultation: defineAsyncComponent(() =>
       import('ucla-library-design-tokens/assets/svgs/icon-chat.svg')
     ),
@@ -139,9 +140,9 @@ export default {
       )
     ),
 
-    SvgIconFtvaGcal: defineAsyncComponent(() =>
+    /*SvgIconFtvaGcal: defineAsyncComponent(() =>
       import('ucla-library-design-tokens/assets/svgs/icon-ftva-gcal.svg')
-    ),
+    ),*/
 
     SvgIconFtvaOutlook: defineAsyncComponent(() =>
       import(
@@ -209,65 +210,86 @@ export default {
 
 <template>
   <div class="icon-with-link">
-    <SmartLink v-if="to" :to="to" class="icon-with-link-container link">
-      <component :is="iconName" class="icon" aria-hidden="true" />
-      <div class="text" v-text="text" />
+    <SmartLink
+      v-if="to"
+      :to="to"
+      class="icon-with-link-container link"
+    >
+      <component
+        :is="iconName"
+        class="icon"
+        aria-hidden="true"
+      />
+      <div
+        class="text"
+        v-text="text"
+      />
     </SmartLink>
-    <div v-else class="icon-with-link-container">
-      <component :is="iconName" class="icon" aria-hidden="true" />
-      <div class="text" v-text="text" />
+    <div
+      v-else
+      class="icon-with-link-container"
+    >
+      <component
+        :is="iconName"
+        class="icon"
+        aria-hidden="true"
+      />
+      <div
+        class="text"
+        v-text="text"
+      />
     </div>
   </div>
 </template>
 
 <style lang="scss" scoped>
 .icon-with-link {
-    --link-color: var(--color-primary-blue-03);
-    --icon-color: var(--color-primary-blue-03);
-    --icon-color-highlight: var(--color-default-cyan-03);
+  --link-color: var(--color-primary-blue-03);
+  --icon-color: var(--color-primary-blue-03);
+  --icon-color-highlight: var(--color-default-cyan-03);
 
-    display: inline-block;
-    line-height: 1;
+  display: inline-block;
+  line-height: 1;
 
-    .text {
-        @include button;
-        white-space: pre-wrap;
-    }
+  .text {
+    @include button;
+    white-space: pre-wrap;
+  }
 
-    .link {
-        color: var(--link-color);
-    }
+  .link {
+    color: var(--link-color);
+  }
 
-    .icon-with-link-container {
-        display: inline-flex;
-        flex-direction: row;
-        flex-wrap: nowrap;
-        justify-content: flex-start;
-        align-items: center;
-        gap: var(--space-xs);
-    }
+  .icon-with-link-container {
+    display: inline-flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--space-xs);
+  }
 
-    .icon {
-        flex-shrink: 0;
+  .icon {
+    flex-shrink: 0;
 
-        .svg__stroke--primary-blue-03 {
-            stroke: var(--icon-color);
-        }
+    .svg__stroke--primary-blue-03 {
+      stroke: var(--icon-color);
+    }
 
-        .svg__fill--primary-blue-03 {
-            fill: var(--icon-color);
-        }
+    .svg__fill--primary-blue-03 {
+      fill: var(--icon-color);
+    }
 
-        .svg__stroke--default-cyan-03 {
-            stroke: var(--icon-color-highlight);
-        }
+    .svg__stroke--default-cyan-03 {
+      stroke: var(--icon-color-highlight);
     }
+  }
 
-    // Hover states
-    @media #{$has-hover} {
-        .link:hover {
-            @include link-hover;
-        }
+  // Hover states
+  @media #{$has-hover} {
+    .link:hover {
+      @include link-hover;
     }
+  }
 }
 </style>
diff --git a/src/lib-components/NavSecondary.vue b/src/lib-components/NavSecondary.vue
index 5a7fa1bb0..472338bd3 100644
--- a/src/lib-components/NavSecondary.vue
+++ b/src/lib-components/NavSecondary.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 // components
 import SvgLogoUclaLibrary from 'ucla-library-design-tokens/assets/svgs/logo-library.svg'
-import { computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import type { PropType } from 'vue'
 import SmartLink from '@/lib-components/SmartLink.vue'
 import ButtonLink from '@/lib-components/ButtonLink.vue'
@@ -22,6 +22,17 @@ const { items, isMicrosite } = defineProps({
   },
 })
 
+const secondaryItems = ref(items || [])
+
+watch(
+  items,
+  (newVal, oldVal) => {
+    console.log('NavSecondary updated from parent page', newVal, oldVal)
+    secondaryItems.value = newVal
+  },
+  { deep: true, immediate: true }
+)
+
 const classes = computed(() => {
   return [
     'flex-container',
@@ -30,7 +41,8 @@ const classes = computed(() => {
   ]
 })
 const parsedLinks = computed(() => {
-  return items.map((obj) => {
+  return (secondaryItems.value || []).map((obj) => {
+    console.log("nav-secondary:", JSON.stringify(obj))
     let support = 'list-item'
     if (obj.classes)
       support = `${support} ${obj.classes}`
@@ -42,37 +54,74 @@ const parsedLinks = computed(() => {
 })
 
 const parsedItemsMinusAccount = computed(() => {
-  return parsedLinks.value.slice(0, -1)
+  return parsedLinks?.value?.slice(0, -1)
 })
 const accountLink = computed(() => {
-  return parsedLinks.value[parsedLinks.value.length - 1]
+  return parsedLinks.value && parsedLinks.value.length > 0 ? parsedLinks?.value[parsedLinks?.value?.length - 1] : null
 })
 </script>
 
 <template>
-  <nav aria-label="Secondary Navigation" class="nav-secondary">
+  <nav
+    aria-label="Secondary Navigation"
+    class="nav-secondary"
+  >
     <div :class="classes">
-      <a v-if="isMicrosite" href="https://www.library.ucla.edu" target="_blank" aria-label="UCLA Library home page">
-        <SvgLogoUclaLibrary class="svg logo-ucla" alt="UCLA Library logo blue" />
+      <a
+        v-if="isMicrosite"
+        href="https://www.library.ucla.edu"
+        target="_blank"
+        aria-label="UCLA Library home page"
+      >
+        <SvgLogoUclaLibrary
+          class="svg logo-ucla"
+          alt="UCLA Library logo blue"
+        />
       </a>
 
       <div class="navigation-list">
-        <ul v-if="!isMicrosite" class="list">
-          <li v-for="item in parsedItemsMinusAccount" :key="`nav-secondary-${item.name}`" :class="item.classes">
-            <SmartLink class="link underline-hover" :to="item.to" :link-target="item.target">
+        <ul
+          v-if="!isMicrosite"
+          class="list"
+        >
+          <li
+            v-for="item in parsedItemsMinusAccount"
+            :key="`nav-secondary-${item.name}`"
+            :class="item.classes"
+          >
+            <SmartLink
+              class="link underline-hover"
+              :to="item.to"
+              :link-target="item.target"
+            >
               {{ item.name }}
             </SmartLink>
           </li>
         </ul>
 
         <ButtonLink
-          v-if="!isMicrosite" :label="accountLink.name" class="account-button" :link-target="accountLink.target"
-          :to="accountLink.to" :is-secondary="true"
+          v-if="!isMicrosite && accountLink"
+          :label="accountLink?.name"
+          class="account-button"
+          :link-target="accountLink?.target"
+          :to="accountLink?.to"
+          :is-secondary="true"
         />
 
-        <ul v-if="isMicrosite" class="link-list">
-          <li v-for="item in parsedLinks" :key="`nav-secondary-${item.name}`" :class="item.classes">
-            <SmartLink class="link underline-hover" :to="item.to" :link-target="item.target">
+        <ul
+          v-if="isMicrosite"
+          class="link-list"
+        >
+          <li
+            v-for="item in parsedLinks"
+            :key="`nav-secondary-${item.name}`"
+            :class="item.classes"
+          >
+            <SmartLink
+              class="link underline-hover"
+              :to="item.to"
+              :link-target="item.target"
+            >
               {{ item.name }}
             </SmartLink>
           </li>
diff --git a/src/styles/ftva/_section-wrapper.scss b/src/styles/ftva/_section-wrapper.scss
index fc39b08f8..d3648230f 100644
--- a/src/styles/ftva/_section-wrapper.scss
+++ b/src/styles/ftva/_section-wrapper.scss
@@ -1,4 +1,9 @@
 .ftva.section-wrapper {
+    .section-header {
+        // Set to zero to remove margin under Section Title
+        // Explore Other Series
+        margin-bottom: 0px;
+    }
 
     // default link styles for FTVA
     .section-link {
@@ -9,12 +14,12 @@
         text-decoration: underline;
         text-decoration-thickness: 3px;
         -webkit-text-decoration-color: #{$grey-blue};
-                text-decoration-color: #{$grey-blue};
+        text-decoration-color: #{$grey-blue};
         text-underline-offset: 4px;
 
         &:hover {
             -webkit-text-decoration-color: #{$bright-blue};
-                    text-decoration-color: #{$bright-blue};
+            text-decoration-color: #{$bright-blue};
         }
     }
 
@@ -37,8 +42,6 @@
                     background-color: var(--color-children-theme);
                 }
             }
-
-
         }
 
         &.theme-paleblue {
@@ -47,14 +50,11 @@
 
             background-color: var(--color-theme);
 
-
             :deep(*) {
                 .block-highlight.card {
                     background-color: var(--color-children-theme);
                 }
             }
-
-
         }
 
         // FTVA uses different page max-width
@@ -62,4 +62,34 @@
             max-width: var(--ftva-container-max-width);
         }
     }
+
+    // Breakpoints
+    @media #{$medium} {
+        .section-header {
+            margin-bottom: 10px;
+        }
+
+        .section-link {
+            margin-bottom: 20px;
+        }
+
+        &.theme-paleblue {
+            --color-theme: #{$page-blue};
+            --color-children-theme: var(--color-white);
+
+            :deep(*) {
+                .section-teaser-list {
+                    .list {
+                        background-color: var(--color-theme);
+                    }
+
+                    .block-card-three-column {
+                        .meta {
+                            background-color: var(--color-children-theme);
+                        }
+                    }
+                }
+            }
+        }
+    }
 }
\ No newline at end of file

From 368051c2e23eac8e65c88f67da4b4a10df1f6e5f Mon Sep 17 00:00:00 2001
From: pghorpade <pghorpade@library.ucla.edu>
Date: Thu, 26 Sep 2024 18:10:43 -0700
Subject: [PATCH 03/20] fix: replace globalstore with useWindowSize from vueuse
 , also revert iconwithlink and section-wrapper  changes not needed in this PR
 and add watcher to update layout data when nuxt needs to work with craft
 draft previews

---
 src/lib-components/HeaderSmart.vue    | 12 +++--
 src/lib-components/IconWithLink.vue   |  6 +--
 src/lib-components/NavPrimary.vue     | 66 ++++++++++++++++++++-------
 src/lib-components/NavSecondary.vue   | 18 +++++---
 src/stories/NavPrimary.stories.js     | 19 ++++++++
 src/styles/ftva/_section-wrapper.scss | 35 --------------
 6 files changed, 88 insertions(+), 68 deletions(-)

diff --git a/src/lib-components/HeaderSmart.vue b/src/lib-components/HeaderSmart.vue
index 072a9e52e..795e245c3 100644
--- a/src/lib-components/HeaderSmart.vue
+++ b/src/lib-components/HeaderSmart.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, onMounted, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch, markRaw } from 'vue'
 import { useGlobalStore } from '@/stores/GlobalStore'
 import { useWindowSize } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
@@ -18,18 +18,21 @@ const props = defineProps({
 // Access the global store
 const globalStore = useGlobalStore()
 const { header } = storeToRefs(globalStore)
+
 // Use refs for primary, secondary menu items, and header type
 const primaryMenuItems = ref(header.value.primary || [])
 const secondaryMenuItems = ref(header.value.secondary || [])
-const currentHeader = ref(HeaderMain)
+
+// Mark components as raw to prevent them from being reactive
+const currentHeader = ref(markRaw(HeaderMain))
 
 const isMobile = ref(false)
 onMounted(() => {
   const { width } = useWindowSize()
   watch(width, (newWidth) => {
-    console.log("newWidth", newWidth)
+    console.log('newWidth', newWidth)
     isMobile.value = newWidth <= 1200
-    currentHeader.value = isMobile.value ? HeaderMainResponsive : HeaderMain
+    currentHeader.value = markRaw(isMobile.value ? HeaderMainResponsive : HeaderMain)
   },
     { immediate: true })
 
@@ -43,7 +46,6 @@ onMounted(() => {
     { deep: true, immediate: true }
   )
 })
-
 </script>
 
 <template>
diff --git a/src/lib-components/IconWithLink.vue b/src/lib-components/IconWithLink.vue
index 70d2bf686..6a9e5d114 100644
--- a/src/lib-components/IconWithLink.vue
+++ b/src/lib-components/IconWithLink.vue
@@ -1,12 +1,10 @@
 <script>
 import { defineAsyncComponent } from 'vue'
 import SmartLink from '@/lib-components/SmartLink.vue'
-import SvgIconFtvaGcal from 'ucla-library-design-tokens/assets/svgs/icon-ftva-gcal.svg'
 export default {
   name: 'IconWithLink',
   components: {
     SmartLink,
-    SvgIconFtvaGcal,
     SvgIconConsultation: defineAsyncComponent(() =>
       import('ucla-library-design-tokens/assets/svgs/icon-chat.svg')
     ),
@@ -140,9 +138,9 @@ export default {
       )
     ),
 
-    /*SvgIconFtvaGcal: defineAsyncComponent(() =>
+    SvgIconFtvaGcal: defineAsyncComponent(() =>
       import('ucla-library-design-tokens/assets/svgs/icon-ftva-gcal.svg')
-    ),*/
+    ),
 
     SvgIconFtvaOutlook: defineAsyncComponent(() =>
       import(
diff --git a/src/lib-components/NavPrimary.vue b/src/lib-components/NavPrimary.vue
index 43d96e5fa..5a5a5b773 100644
--- a/src/lib-components/NavPrimary.vue
+++ b/src/lib-components/NavPrimary.vue
@@ -10,7 +10,7 @@ import type { PropType } from 'vue'
 import SmartLink from '@/lib-components/SmartLink.vue'
 import ButtonLink from '@/lib-components/ButtonLink.vue'
 import NavMenuItem from '@/lib-components/NavMenuItem.vue'
-import { useGlobalStore } from '@/stores/GlobalStore'
+import { useWindowSize } from '@vueuse/core' // Import useWindowSize from vueuse
 import { useTheme } from '@/composables/useTheme'
 
 import type { NavPrimaryItemType } from '@/types/types'
@@ -34,7 +34,18 @@ const { items, currentPath, title, acronym } = defineProps({
   },
 })
 
-const globalStore = useGlobalStore()
+const primaryItems = ref(items || [])
+
+watch(
+  items,
+  (newVal, oldVal) => {
+    console.log('NavPrimary data updated from nuxt layout or app.vue when working with craft draft previews', newVal, oldVal)
+    primaryItems.value = newVal
+  },
+  { deep: true, immediate: true }
+)
+
+
 const route = useRoute()
 // Refs to track menu states
 const isOpened = ref(false) // tracks if main menu is open
@@ -74,20 +85,20 @@ const shouldRenderSmartLink = computed(() => title || acronym)
 const noChildren = computed(() => {
   if (!title)
     return []
-  return items.filter(item => !item.children || !item.children.length)
+  return primaryItems.value.filter(item => !item.children || !item.children.length)
 })
 
 const supportLinks = computed(() => {
-  return items.filter(item => !item.children || !item.children.length)
+  return primaryItems.value.filter(item => !item.children || !item.children.length)
 })
 
 const currentPathActiveIndex = computed(() => {
   const currentPathNew = currentPath || route?.path
-  return items.findIndex(item => item.url && currentPathNew.includes(item.url))
+  return primaryItems.value.findIndex(item => item.url && currentPathNew.includes(item.url))
 })
 
 const parsedItems = computed(() =>
-  items
+  primaryItems.value
     .filter(item => item.children && item.children.length)
     .map((item, index) => ({
       ...item,
@@ -129,10 +140,12 @@ function clearActive() {
   activeMenuIndex.value = currentPathActiveIndex.value
 }
 
-// MOBILE METHODS & EVENTS
-const isMobile = computed(() => {
-  return globalStore?.winWidth ? (globalStore?.winWidth <= 750) : false // 750 matches {$small} in _variables.scss
-})
+// Replace globalStore logic for window width with useWindowSize
+const { width } = useWindowSize()
+
+// Use computed to check if it's mobile based on window width
+const isMobile = computed(() => width.value <= 750) // Use 750px for mobile breakpoint
+
 // toggle Mobile-only menu
 function toggleMobileMenu() {
   // close others
@@ -182,7 +195,10 @@ onMounted(() => {
     :class="classes"
   >
     <!-- item top contains logos, etc -->
-    <div v-if="themeSettings.renderItemTop" class="item-top">
+    <div
+      v-if="themeSettings.renderItemTop"
+      class="item-top"
+    >
       <SmartLink
         v-if="shouldRenderSmartLink"
         to="/"
@@ -226,7 +242,10 @@ onMounted(() => {
         />
       </a>
     </div>
-    <div v-else-if="isMobile && themeSettings.headerText" class="item-top-mobile">
+    <div
+      v-else-if="isMobile && themeSettings.headerText"
+      class="item-top-mobile"
+    >
       {{ themeSettings.headerText }}
     </div>
 
@@ -234,7 +253,10 @@ onMounted(() => {
 
     <!-- search button is placed before menu so that it can be easily kept at top when menu expands -->
     <!-- more menu was added in later version of this component and is not rendered at all in default -->
-    <div v-if="themeSettings.showSearch" class="more-menu">
+    <div
+      v-if="themeSettings.showSearch"
+      class="more-menu"
+    >
       <ButtonLink
         v-if="!mobileMenuIsOpened"
         class="search-button"
@@ -263,13 +285,19 @@ onMounted(() => {
         <IconMenuClose class="icon-menu-close" />
       </ButtonLink>
       <!-- navSearch is loaded into this a slot by HeaderSticky so we don't have to prop drill  -->
-      <div class="slot-container" :class="[{ 'is-opened': slotIsOpened, 'is-opened-mobile': mobileMenuIsOpened }]">
+      <div
+        class="slot-container"
+        :class="[{ 'is-opened': slotIsOpened, 'is-opened-mobile': mobileMenuIsOpened }]"
+      >
         <slot name="additional-menu" />
       </div>
     </div>
 
     <!-- this is the primary menu and first in the tab index -->
-    <ul class="menu" :class="[{ 'is-opened-mobile': mobileMenuIsOpened }]">
+    <ul
+      class="menu"
+      :class="[{ 'is-opened-mobile': mobileMenuIsOpened }]"
+    >
       <NavMenuItem
         v-for="(item, index) in parsedItems"
         :key="`NavMenuItem-${item.name}`"
@@ -282,7 +310,8 @@ onMounted(() => {
       >
         <!-- insert caret icon into NavMenuItem slot if theme calls for it -->
         <span
-          v-if="themeSettings.horizontalMobileMenu && isMobile" class="caret"
+          v-if="themeSettings.horizontalMobileMenu && isMobile"
+          class="caret"
           :class="{ 'is-active': item.isActive }"
         >
           <span class="chevron">
@@ -323,7 +352,10 @@ onMounted(() => {
       </div>
     </div>
     <!-- slot for additional buttons that stick to the bottom of the mobile menu (like donate on ftva mobile) -->
-    <div v-if="isMobile && mobileMenuIsOpened" class="mobile-menu-slot">
+    <div
+      v-if="isMobile && mobileMenuIsOpened"
+      class="mobile-menu-slot"
+    >
       <slot name="additional-mobile-menu-items" />
     </div>
     <div class="background-white" />
diff --git a/src/lib-components/NavSecondary.vue b/src/lib-components/NavSecondary.vue
index 472338bd3..c4656f4da 100644
--- a/src/lib-components/NavSecondary.vue
+++ b/src/lib-components/NavSecondary.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 // components
 import SvgLogoUclaLibrary from 'ucla-library-design-tokens/assets/svgs/logo-library.svg'
-import { ref, computed, watch } from 'vue'
+import { computed, ref, watch, shallowRef } from 'vue'
 import type { PropType } from 'vue'
 import SmartLink from '@/lib-components/SmartLink.vue'
 import ButtonLink from '@/lib-components/ButtonLink.vue'
@@ -22,13 +22,17 @@ const { items, isMicrosite } = defineProps({
   },
 })
 
-const secondaryItems = ref(items || [])
+// Convert `items` to a shallow reactive reference
+const itemsRef = shallowRef(items) // Or you can use `toRef(props, 'items')`
+
+const secondaryItems = ref(itemsRef.value || [])
+console.log(items, secondaryItems.value)
 
 watch(
-  items,
+  itemsRef, // This is now a reactive source
   (newVal, oldVal) => {
-    console.log('NavSecondary updated from parent page', newVal, oldVal)
-    secondaryItems.value = newVal
+    console.log('NavSecondary updated from nuxt layout or nuxt app.vue', newVal, oldVal)
+    secondaryItems.value = newVal || []
   },
   { deep: true, immediate: true }
 )
@@ -44,8 +48,8 @@ const parsedLinks = computed(() => {
   return (secondaryItems.value || []).map((obj) => {
     console.log("nav-secondary:", JSON.stringify(obj))
     let support = 'list-item'
-    if (obj.classes)
-      support = `${support} ${obj.classes}`
+    if (obj?.classes)
+      support = `${support} ${obj?.classes}`
     return {
       ...obj,
       classes: support,
diff --git a/src/stories/NavPrimary.stories.js b/src/stories/NavPrimary.stories.js
index 34af97f54..d6c547f24 100644
--- a/src/stories/NavPrimary.stories.js
+++ b/src/stories/NavPrimary.stories.js
@@ -207,6 +207,25 @@ export function WithMicrositeTitle() {
   }
 }
 
+export function FTVA() {
+  return {
+    data() {
+      return {
+        micrositeItems,
+      }
+    },
+    components: { NavPrimary },
+    template: `
+        <div>
+        NavPrimary is used in the ftva site, however it's much more dependent on headersticky for positioning and styles, especially in mobile views.
+Therefore, it does not have a standalone story, but is instead used in the HeaderSticky <a style="text-decoration:underline; color:blue;" href="/?path=/story/global-header-sticky--ftva-version">story</a>.
+
+If the FTVA product ever uses NavPrimary outside of headersticky context, a story should be created for it.
+        </div>
+    `,
+  }
+}
+
 /* Notes on FTVA version
 NavPrimary is used in the ftva site, however it's much more dependent on headersticky for positioning and styles, especially in mobile views.
 Therefore, it does not have a standalone story, but is instead used in the HeaderSticky story.
diff --git a/src/styles/ftva/_section-wrapper.scss b/src/styles/ftva/_section-wrapper.scss
index d3648230f..c577b3313 100644
--- a/src/styles/ftva/_section-wrapper.scss
+++ b/src/styles/ftva/_section-wrapper.scss
@@ -1,9 +1,4 @@
 .ftva.section-wrapper {
-    .section-header {
-        // Set to zero to remove margin under Section Title
-        // Explore Other Series
-        margin-bottom: 0px;
-    }
 
     // default link styles for FTVA
     .section-link {
@@ -62,34 +57,4 @@
             max-width: var(--ftva-container-max-width);
         }
     }
-
-    // Breakpoints
-    @media #{$medium} {
-        .section-header {
-            margin-bottom: 10px;
-        }
-
-        .section-link {
-            margin-bottom: 20px;
-        }
-
-        &.theme-paleblue {
-            --color-theme: #{$page-blue};
-            --color-children-theme: var(--color-white);
-
-            :deep(*) {
-                .section-teaser-list {
-                    .list {
-                        background-color: var(--color-theme);
-                    }
-
-                    .block-card-three-column {
-                        .meta {
-                            background-color: var(--color-children-theme);
-                        }
-                    }
-                }
-            }
-        }
-    }
 }
\ No newline at end of file

From 78d4f4cfb37785e8a0a21cb8287c31e9d364dd35 Mon Sep 17 00:00:00 2001
From: Tinuola 'Tinu' Awopetu <24995224+tinuola@users.noreply.github.com>
Date: Tue, 17 Sep 2024 16:19:37 -0700
Subject: [PATCH 04/20] feat: APPS-2943 Add initialTab setting option to
 TabToggle (#611)

* wip: add prop for initialTab selection

* refactor glider animation to work with setting intial tab position

* remove margin value on glider/offset

* add story for initialTab prop

* refactor: tab glider animation

* task: update code documentation

---------

Co-authored-by: tinuola <tinuola@users.noreply.github.com>
---
 src/lib-components/TabItem.vue    |   4 +-
 src/lib-components/TabList.vue    | 125 +++++++++++++++++++-----------
 src/stories/TabToggle.stories.js  |  23 ++++++
 src/styles/default/_tab-list.scss |   8 +-
 4 files changed, 108 insertions(+), 52 deletions(-)

diff --git a/src/lib-components/TabItem.vue b/src/lib-components/TabItem.vue
index 4a1cc9a78..1325940a8 100644
--- a/src/lib-components/TabItem.vue
+++ b/src/lib-components/TabItem.vue
@@ -19,7 +19,7 @@ const { content, icon, title } = defineProps({
   },
 })
 
-const activeTab = inject('activeTab')
+const activeTabTitle = inject('activeTabTitle')
 
 const theme = useTheme()
 
@@ -29,7 +29,7 @@ const classes = computed(() => {
 </script>
 
 <template>
-  <div v-show="title === activeTab" :class="classes">
+  <div v-show="title === activeTabTitle" :class="classes">
     <div
       v-text="content"
     />
diff --git a/src/lib-components/TabList.vue b/src/lib-components/TabList.vue
index 1e0df73de..ab4bef7dd 100644
--- a/src/lib-components/TabList.vue
+++ b/src/lib-components/TabList.vue
@@ -1,12 +1,17 @@
 <script setup lang="ts">
-import { computed, defineAsyncComponent, provide, ref, useSlots } from 'vue'
+import { computed, defineAsyncComponent, onMounted, provide, ref, useSlots, watch } from 'vue'
+import { useWindowSize } from '@vueuse/core'
 import { useTheme } from '@/composables/useTheme'
 
-const { alignment } = defineProps({
+const { alignment, initialTab } = defineProps({
   alignment: {
     type: String,
     default: 'left',
   },
+  initialTab: {
+    type: Number,
+    default: 0
+  }
 })
 
 const SvgIconCalendar = defineAsyncComponent(() =>
@@ -24,13 +29,14 @@ const tabProps = tabSlots!.map((tabItem) => {
 
 const tabItems = ref(tabProps)
 
-const activeTab = ref(tabItems.value[0]?.title)
-
 const tabRefs = ref<Array<any>>([])
 
+const activeTabIndex = ref(0)
+const activeTabTitle = ref(tabItems.value[0]?.title)
+
 const tabGliderRef = ref()
 
-provide('activeTab', activeTab)
+provide('activeTabTitle', activeTabTitle)
 
 const iconMapping = {
   'icon-calendar': {
@@ -44,9 +50,34 @@ const iconMapping = {
   },
 }
 
+onMounted(() => {
+  activeTabIndex.value = initialTab
+  activeTabTitle.value = tabItems.value[initialTab]?.title
+
+  const activeTabElem = tabRefs.value[initialTab]
+
+  /* @argument {boolean} hasInitialWidth */
+  // Boolean flag to disable glider's default
+  // full width, and set glider's starting
+  // position to align with initial tab.
+  animateTabGlider(activeTabElem, false)
+
+  const { width } = useWindowSize()
+  watch(width, (_newWidth) => {
+    // The glider width and animation/travel distance
+    // depend on the width and position of the tab
+    // buttons; when the window resizes, these button
+    // values change. The animation method needs to be
+    // called again to update the glider logic using the
+    // new button values.
+    const activeTabElem = tabRefs.value[activeTabIndex.value]
+    animateTabGlider(activeTabElem, true)
+  })
+})
+
 // Computed
 const parsedAriaLabel = computed(() => {
-  const tabTitle = hyphenateTabName(activeTab.value)
+  const tabTitle = hyphenateTabName(activeTabTitle.value)
   return `panel-${tabTitle}`
 })
 
@@ -67,40 +98,6 @@ function setTabAriaControl(tabName: string) {
   return `panel-${tabTitle}`
 }
 
-function switchTab(tabName: string) {
-  activeTab.value = tabName
-
-  const tabIndex = tabItems.value!.findIndex(tab => tab?.title === tabName)
-
-  const tabElem: HTMLElement = tabRefs.value[tabIndex]
-
-  if (tabElem)
-    tabElem.focus()
-
-  if (!tabElem.classList.contains('active'))
-    animateTabGlider(tabElem)
-}
-
-function animateTabGlider(elem: HTMLElement) {
-  const tabGlider = tabGliderRef.value
-
-  const scaleGliderWidth = elem.offsetWidth / tabGlider.offsetWidth
-
-  // Calculate width to scale animated glider
-  // Use variable in CSS
-  tabGlider.style.setProperty('--scale_glider_width', scaleGliderWidth)
-
-  // Calculate and set distance to animate
-  // Use variable in CSS
-  tabGlider.style.setProperty('--translate_glider_left', `${elem.offsetLeft}px`)
-
-  // Object with positional values of tab button
-  const tabBtn = elem.getBoundingClientRect()
-
-  // Set glider to same height as tab button
-  tabGlider.style.height = `${tabBtn.height}px`
-}
-
 function hyphenateTabName(str: string) {
   return str.toLowerCase().replace(/\s/g, '-')
 }
@@ -108,7 +105,7 @@ function hyphenateTabName(str: string) {
 function keydownHandler(e: KeyboardEvent) {
   const tabTitleList = tabItems.value!.map(obj => obj?.title)
 
-  const activeIndex = tabTitleList.indexOf(activeTab.value)
+  const activeIndex = tabTitleList.indexOf(activeTabTitle.value)
 
   let targetTab
 
@@ -132,6 +129,44 @@ function keydownHandler(e: KeyboardEvent) {
     default:
   }
 }
+
+function switchTab(tabName: string) {
+  const tabIndex = tabItems.value!.findIndex(tab => tab?.title === tabName)
+
+  activeTabTitle.value = tabName
+  activeTabIndex.value = tabIndex
+
+  const tabElem: HTMLElement = tabRefs.value[tabIndex]
+
+  if (tabElem)
+    tabElem.focus()
+
+  if (!tabElem.classList.contains('active'))
+    animateTabGlider(tabElem, true)
+}
+
+function animateTabGlider(elem: HTMLElement, hasInitialWidth: boolean) {
+  const tabGlider = tabGliderRef.value
+
+  // Get positional values of tab button
+  // and set glider height to match tab button
+  const tabBtn = elem.getBoundingClientRect()
+  tabGlider.style.height = `${tabBtn.height}px`
+
+  if (!hasInitialWidth) {
+    tabGlider.style.width = '0'
+  }
+  else {
+    // Set glider width to match tab button
+    tabGlider.style.width = `${tabBtn.width}px`
+
+    // Remove tab button background; display glider background instead
+    elem.style.background = 'none'
+  }
+
+  // Calculate and set distance (CSS variable) to animate glider
+  tabGlider.style.setProperty('--move_glider', `${elem.offsetLeft}px`)
+}
 </script>
 
 <template>
@@ -149,11 +184,11 @@ function keydownHandler(e: KeyboardEvent) {
         :ref="(el) => tabRefs[index] = el"
         :key="tab?.title"
         class="tab-list-item"
-        :class="{ active: activeTab === tab?.title }"
+        :class="{ active: activeTabTitle === tab?.title }"
         role="tab"
-        :tabindex="activeTab === tab?.title ? 0 : -1"
+        :tabindex="activeTabTitle === tab?.title ? 0 : -1"
         :aria-controls="setTabAriaControl(tab?.title)"
-        :aria-selected="activeTab === tab?.title"
+        :aria-selected="activeTabTitle === tab?.title"
         @keydown="keydownHandler"
         @click="switchTab(tab?.title)"
       >
@@ -166,7 +201,7 @@ function keydownHandler(e: KeyboardEvent) {
     </div>
   </div>
   <!-- Slot: TabItem -->
-  <div :id="parsedAriaLabel" class="tab-list-body" role="tabpanel" :aria-labelledby="parsedAriaLabel" :hidden="!activeTab">
+  <div :id="parsedAriaLabel" class="tab-list-body" role="tabpanel" :aria-labelledby="parsedAriaLabel" :hidden="!activeTabTitle">
     <slot />
   </div>
 </template>
diff --git a/src/stories/TabToggle.stories.js b/src/stories/TabToggle.stories.js
index bbddf5fee..75e62b233 100644
--- a/src/stories/TabToggle.stories.js
+++ b/src/stories/TabToggle.stories.js
@@ -94,6 +94,29 @@ export function Default() {
   }
 }
 
+export function SetInitialTab() {
+  return {
+    data() {
+      return { ...mockContent }
+    },
+    components: { TabItem, TabList },
+    template: `<div class="wrapper">
+      <tab-list :initial-tab="1">
+        
+        <tab-item title="Label 1" icon="icon-calendar" :content="text1">
+        </tab-item>
+
+        <tab-item title="Label 2" icon="icon-list" :content="text2">
+        </tab-item>
+
+        <tab-item title="Label 3" :content="text3">
+        </tab-item>
+      
+      </tab-list>
+    </div>`
+  }
+}
+
 export function FTVACentered() {
   return {
     data() {
diff --git a/src/styles/default/_tab-list.scss b/src/styles/default/_tab-list.scss
index 8da122f19..b04f03001 100644
--- a/src/styles/default/_tab-list.scss
+++ b/src/styles/default/_tab-list.scss
@@ -32,19 +32,17 @@
     right: 0;
     bottom: 0;
     margin: 8px 0;
+    height: auto;
     border-radius: .25rem;
     background-color: $white;
     box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .25);
-    scale: var(--scale_glider_width, .125) 1;
-    translate: var(--translate_glider_left, 0) 0;
+    translate: var(--move_glider, 0) 0;
     transform-origin: left;
     transition: scale 300ms ease-out, translate 300ms ease-out;
   }
 
-  // Set background of initial active tab
-  .tab-glider ~ .tab-list-item:nth-of-type(1).active {
+  .tab-glider ~ .tab-list-item.active {
     background: $white;
-    transition: background-color 3000ms;
   }
 
   .tab-list-item {

From e2647262d73309300e8718f5adc288e3df41f691 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Tue, 17 Sep 2024 23:20:26 +0000
Subject: [PATCH 05/20] chore(release): set `package.json` to 3.19.0 [skip ci]

# [3.19.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.18.0...v3.19.0) (2024-09-17)

### Features

* APPS-2943 Add initialTab setting option to TabToggle ([#611](https://github.com/UCLALibrary/ucla-library-website-components/issues/611)) ([aadedac](https://github.com/UCLALibrary/ucla-library-website-components/commit/aadedac4eaa4db7f2c9c08796ab2bcaed09ece93))
---
 CHANGELOG.md | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4992386b0..38042c8d0 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [3.19.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.18.0...v3.19.0) (2024-09-17)
+
+
+### Features
+
+* APPS-2943 Add initialTab setting option to TabToggle ([#611](https://github.com/UCLALibrary/ucla-library-website-components/issues/611)) ([aadedac](https://github.com/UCLALibrary/ucla-library-website-components/commit/aadedac4eaa4db7f2c9c08796ab2bcaed09ece93))
+
 # [3.18.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.17.2...v3.18.0) (2024-09-13)
 
 
diff --git a/package.json b/package.json
index bd232363e..47fd37458 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "ucla-library-website-components",
   "type": "module",
   "private": false,
-  "version": "3.18.0",
+  "version": "3.19.0",
   "main": "./dist/ucla-library-website-components.umd.cjs",
   "module": "./dist/ucla-library-website-components.js",
   "style": "./dist/style.css",

From d31145569202a7add6d8ab3f45f0341660f02cc0 Mon Sep 17 00:00:00 2001
From: JenDiamond <thejendiamond@gmail.com>
Date: Fri, 20 Sep 2024 13:23:02 -0700
Subject: [PATCH 06/20] feat: APPS-2945 FTVA Variation of SectionTeaserList
 (#613)

* add separated ftva style files

* remove border bottom just for FTVA

* make /plan-your-visit the default URL for the Plan Your Visit button in the BlockInfo component

* uAdd a SectionWrapper story for TabList component that uses SectionTeaserList

* fixes

* fixes

* section-header

* linting

* fix past events and csectionteasercard spacing

* fix gap

* revert default/_section-teaser-card.scss

* update changes to blockCardThreeColumn

* default styles for section-teaser-list

* default styles for section-teaser-list

* delete commented out code

* move styling to wrapper

* update vertical cards

* fix syntax
---
 src/lib-components/BlockCardThreeColumn.vue  |   5 -
 src/lib-components/BlockInfo.vue             |   2 +-
 src/lib-components/SectionTeaserList.vue     |  52 +++----
 src/stories/SectionWrapper.stories.js        | 146 ++++++++++++++++++-
 src/styles/_base.scss                        |   1 +
 src/styles/_ftva-theme.scss                  |   1 +
 src/styles/default/_section-teaser-list.scss |  30 ++++
 src/styles/ftva/_section-teaser-list.scss    |  24 +++
 src/styles/ftva/_section-wrapper.scss        |  37 ++++-
 9 files changed, 256 insertions(+), 42 deletions(-)
 create mode 100644 src/styles/default/_section-teaser-list.scss
 create mode 100644 src/styles/ftva/_section-teaser-list.scss

diff --git a/src/lib-components/BlockCardThreeColumn.vue b/src/lib-components/BlockCardThreeColumn.vue
index 1d8bba7cf..af46c0eaa 100644
--- a/src/lib-components/BlockCardThreeColumn.vue
+++ b/src/lib-components/BlockCardThreeColumn.vue
@@ -180,7 +180,6 @@ const parsedDateFormat = computed(() => {
     flex: 1;
 
     color: $accent-blue;
-    background-color: var(--color-theme, var(--color-white));
     padding-top: 2px;
   }
 
@@ -237,8 +236,6 @@ const parsedDateFormat = computed(() => {
     flex-basis: 50%;
     flex: 2;
 
-    background-color: var(--color-theme, var(--color-white));
-
     :deep(.card-meta) {
       display: grid;
       grid-template-rows: min-content 1fr;
@@ -308,7 +305,6 @@ const parsedDateFormat = computed(() => {
       width: 100%;
 
       .molecule-no-image {
-        /* TODO There should be a default image instaed */
         min-height: $large-height;
         border-radius: 12px 12px 0 0;
       }
@@ -321,7 +317,6 @@ const parsedDateFormat = computed(() => {
       border-radius: 0 0 12px 12px;
 
       :deep(.card-meta) {
-        /* height: fit-content; */
         min-height: 0;
 
         .title {
diff --git a/src/lib-components/BlockInfo.vue b/src/lib-components/BlockInfo.vue
index 980b28306..475b730b0 100644
--- a/src/lib-components/BlockInfo.vue
+++ b/src/lib-components/BlockInfo.vue
@@ -27,7 +27,7 @@ const { ftvaTicketInformation, ftvaEventRegistration, to } = defineProps({
   /* Default url is the internal 'Plan Your Visit' page; pending. */
   to: {
     type: String,
-    default: '',
+    default: '/plan-your-visit',
   },
 })
 
diff --git a/src/lib-components/SectionTeaserList.vue b/src/lib-components/SectionTeaserList.vue
index e90d0785d..231dd354f 100644
--- a/src/lib-components/SectionTeaserList.vue
+++ b/src/lib-components/SectionTeaserList.vue
@@ -1,9 +1,11 @@
+<!-- Associated with BlockClippedDate & BlockCardThreeColumn -->
 <script
   setup
   lang="ts"
 >
 import { computed, defineAsyncComponent } from 'vue'
 import type { PropType } from 'vue'
+import { useTheme } from '@/composables/useTheme'
 import type { EventItemType } from '@/types/types'
 
 // COMPONENTS
@@ -27,21 +29,35 @@ const { items, nShown, componentName } = defineProps({
   },
 })
 
+// THEME
+const theme = useTheme()
+
 // DYNAMIC LAZY COMPONENT LOADING
 const BlockCardThreeColumn = defineAsyncComponent(() =>
   import('@/lib-components/BlockCardThreeColumn.vue')
 )
 
+// COMPUTED PROPERTIES
 const parsedComponentName = computed(() => {
   if (componentName === 'BlockCardThreeColumn')
     return BlockCardThreeColumn
   return BlockClippedDate
 })
+
+const isDisabledBlockShowHide = computed(() => {
+  if (items.length <= nShown || (theme?.value === 'ftva' && componentName !== 'BlockClippedDate'))
+    return true
+  return false
+})
+
+const classes = computed(() => {
+  return ['section-teaser-list', theme?.value || '']
+})
 </script>
 
 <template>
-  <section class="section-teaser-list">
-    <BlockShowHide :disable="items.length <= nShown">
+  <section :class="classes">
+    <BlockShowHide :disable="isDisabledBlockShowHide">
       <ul class="list">
         <component
           :is="parsedComponentName"
@@ -70,34 +86,6 @@ const parsedComponentName = computed(() => {
   lang="scss"
   scoped
 >
-.section-teaser-list {
-  background-color: var(--color-white);
-  max-width: $container-l-main + px;
-
-  .list {
-    @for $i from 1 through 30 {
-      :deep(.block-highlight:nth-child(#{$i}) .molecule) {
-        left: calc(random(500) * -1) + px;
-      }
-    }
-  }
-
-  .list-item {
-    margin-bottom: var(--space-xl);
-    padding-bottom: var(--space-xl);
-
-    border-bottom: 2px dotted var(--color-secondary-grey-02);
-
-    &:last-child {
-      border: 0;
-      margin-bottom: 0;
-      padding-bottom: 0;
-    }
-  }
-
-  .hidden .list-item:has(+ .show-hide-hideable) {
-    border: 0;
-    padding-bottom: 0;
-  }
-}
+@import "@/styles/default/_section-teaser-list.scss";
+@import "@/styles/ftva/_section-teaser-list.scss";
 </style>
diff --git a/src/stories/SectionWrapper.stories.js b/src/stories/SectionWrapper.stories.js
index 5b924ec9b..ebd4681f3 100644
--- a/src/stories/SectionWrapper.stories.js
+++ b/src/stories/SectionWrapper.stories.js
@@ -2,12 +2,16 @@ import { computed } from 'vue'
 
 // Import component
 import { mock as mockMediaWithText } from './mock/BlockMediaWithText'
+import * as API from '@/stories/mock-api.json'
 import SectionWrapper from '@/lib-components/SectionWrapper'
 
 import BlockMediaWithText from '@/lib-components/BlockMediaWithText'
 import DividerWayFinder from '@/lib-components/DividerWayFinder'
 import SectionTeaserCard from '@/lib-components/SectionTeaserCard'
+import SectionTeaserList from '@/lib-components/SectionTeaserList.vue'
 import SmartLink from '@/lib-components/SmartLink.vue'
+import TabItem from '@/lib-components/TabItem.vue'
+import TabList from '@/lib-components/TabList.vue'
 
 const propsForMediaWithText = {
   sectionHeader: mockMediaWithText.mediaWithText[0].titleLink,
@@ -252,7 +256,7 @@ const mockFtvaSeries = [
   },
 ]
 
-export function FtvaExploreOtherSeries() {
+export function FtvaSeries3Cards() {
   return {
     data() {
       return {
@@ -276,7 +280,7 @@ export function FtvaExploreOtherSeries() {
           >
             View All Series <span style="font-size:1.5em;"> &#8250;</span>
           </smart-link>
-          
+
         </template>
         <SectionTeaserCard
 
@@ -311,7 +315,7 @@ export function FtvaSeries2Cards() {
           >
             View All Series <span style="font-size:1.5em;"> &#8250;</span>
           </smart-link>
-          
+
         </template>
         <SectionTeaserCard
 
@@ -321,3 +325,139 @@ export function FtvaSeries2Cards() {
   `,
   }
 }
+
+const mockUpcomingEvents = [
+  {
+    sectionHandle: 'ftvaEvent',
+    to: 'events/la-région-centrale-03-08-24',
+    title: 'TEST - La Région Centrale Screening',
+    startDateWithTime: '2027-03-09T03:30:00+00:00',
+    startDate: '2027-03-08',
+    startTime: 'PST19:30:00',
+    image: API.image,
+    tagLabels: [
+      {
+        title: 'Guest speaker'
+      },
+      {
+        title: '1.37 Dye Transfer Print'
+      }
+    ]
+  },
+  {
+    sectionHandle: 'ftvaEvent',
+    to: 'events/test-corpus-callosum-04-08-27',
+    title: 'TEST - Corpus Callosum',
+    startDateWithTime: '2027-04-09T02:30:00+00:00',
+    startDate: '2027-04-08',
+    startTime: 'PDT19:30:00',
+    image: API.image,
+    tagLabels: [
+      {
+        title: '35mm'
+      }
+    ]
+  },
+  {
+    to: 'events/wavelength-08-22-24',
+    sectionHandle: 'ftvaEvent',
+    title: 'TEST - Wavelength',
+    startDateWithTime: '2027-09-18T02:30:00+00:00',
+    startDate: '2027-09-17',
+    startTime: 'PDT19:30:00',
+    image: API.image,
+    tagLabels: []
+  }
+]
+
+const mockPastEvents = [
+  {
+    sectionHandle: 'ftvaEvent',
+    to: 'events/past-event-michael-snow-death-12-10-23',
+    title: 'TEST - Past Event Michael Snow',
+    startDateWithTime: '2023-12-10T02:00',
+    startDate: '2023-12-10',
+    startTime: 'PST12:00:00',
+    image: API.image,
+    tagLabels: [
+      {
+        title: '70mm'
+      }
+    ]
+  },
+  {
+    sectionHandle: 'ftvaEvent',
+    to: 'events/covid-vaccinations-10-12-21',
+    title: 'Covid Vaccination Conies',
+    startDateWithTime: '2021-10-12T07:30',
+    startDate: '2021-10-12',
+    startTime: 'PST07:30:00',
+    image: API.image,
+    tagLabels: [
+      {
+        title: 'Immunization'
+      }
+    ]
+  },
+]
+
+export function FtvaTabListSectionTeaserListPastUpcoming() {
+  return {
+    data() {
+      return {
+        mockUpcomingEvents,
+        mockPastEvents
+      }
+    },
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
+    components: { SectionWrapper, TabItem, TabList, SectionTeaserList },
+    template: `
+      <SectionWrapper theme="paleblue">
+        <TabList alignment="left">
+          <TabItem
+            title="Upcoming Events"
+            class="tab-content"
+          >
+            <template v-if="mockUpcomingEvents && mockUpcomingEvents.length > 0">
+              <!-- :n-shown="10"  this prop does not do anything if theme is ftva-->
+              <SectionTeaserList
+                :items="mockUpcomingEvents"
+                component-name="BlockCardThreeColumn"
+                :n-shown="10"
+                class="tabbed-event-list"
+              />
+            </template>
+            <template v-else>
+              <p class="empty-tab">
+                There are no upcoming events in this series.
+              </p>
+            </template>
+          </TabItem>
+
+          <TabItem
+            title="Past Events"
+            class="tab-content"
+          >
+            <template v-if="mockPastEvents && mockPastEvents.length > 0">
+              <SectionTeaserList
+                :items="mockPastEvents"
+                component-name="BlockCardThreeColumn"
+                n-shown="10"
+                class="tabbed-event-list"
+              />
+            </template>
+            <template v-else>
+              <p class="empty-tab">
+                There are no past events in this series.
+              </p>
+            </template>
+          </TabItem>
+        </TabList>
+      </SectionWrapper>
+  `,
+  }
+}
diff --git a/src/styles/_base.scss b/src/styles/_base.scss
index 58787eb9f..c0f319156 100644
--- a/src/styles/_base.scss
+++ b/src/styles/_base.scss
@@ -13,3 +13,4 @@
 @import "default/_block-card-with-image";
 @import "default/_rich-text";
 @import "default/_section-teaser-card";
+@import "default/_section-teaser-list"
diff --git a/src/styles/_ftva-theme.scss b/src/styles/_ftva-theme.scss
index 126bc242d..eec455755 100644
--- a/src/styles/_ftva-theme.scss
+++ b/src/styles/_ftva-theme.scss
@@ -13,3 +13,4 @@
 @import "ftva/_block-card-with-image";
 @import "ftva/_rich-text";
 @import "ftva/_section-teaser-card";
+@import"ftva/_section-teaser-list";
diff --git a/src/styles/default/_section-teaser-list.scss b/src/styles/default/_section-teaser-list.scss
new file mode 100644
index 000000000..ea949de99
--- /dev/null
+++ b/src/styles/default/_section-teaser-list.scss
@@ -0,0 +1,30 @@
+.section-teaser-list {
+  background-color: var(--color-white);
+  max-width: $container-l-main + px;
+
+  .list {
+    @for $i from 1 through 30 {
+      :deep(.block-highlight:nth-child(#{$i}) .molecule) {
+        left: calc(random(500) * -1) + px;
+      }
+    }
+  }
+
+  .list-item {
+    margin-bottom: var(--space-xl);
+    padding-bottom: var(--space-xl);
+
+    border-bottom: 2px dotted var(--color-secondary-grey-02);
+
+    &:last-child {
+      border: 0;
+      margin-bottom: 0;
+      padding-bottom: 0;
+    }
+  }
+
+  .hidden .list-item:has(+ .show-hide-hideable) {
+    border: 0;
+    padding-bottom: 0;
+  }
+}
diff --git a/src/styles/ftva/_section-teaser-list.scss b/src/styles/ftva/_section-teaser-list.scss
new file mode 100644
index 000000000..c5ffc7322
--- /dev/null
+++ b/src/styles/ftva/_section-teaser-list.scss
@@ -0,0 +1,24 @@
+.ftva.section-teaser-list {
+  // container for the horizontal cards
+  max-width: unset;
+  padding: 2.5%;
+  border-radius: 12px;
+
+  .list {
+    background-color: transparent;
+  }
+
+  // Breakpoints
+  @media #{$medium} {
+    // Hide horizontal container on smaller screen
+    border-radius: 0;
+    padding: 0;
+    background-color: transparent;
+
+    .list-item {
+      border-bottom: none;
+      margin-bottom: var(--space-m);
+      padding-bottom: var(--space-m);
+    }
+  }
+}
diff --git a/src/styles/ftva/_section-wrapper.scss b/src/styles/ftva/_section-wrapper.scss
index c577b3313..8df4be07f 100644
--- a/src/styles/ftva/_section-wrapper.scss
+++ b/src/styles/ftva/_section-wrapper.scss
@@ -1,4 +1,9 @@
 .ftva.section-wrapper {
+    .section-header {
+        // Set to zero to remove margin under Section Title
+        // Explore Other Series
+        margin-bottom: 0px;
+    }
 
     // default link styles for FTVA
     .section-link {
@@ -57,4 +62,34 @@
             max-width: var(--ftva-container-max-width);
         }
     }
-}
\ No newline at end of file
+
+    // Breakpoints
+    @media #{$medium} {
+        .section-header {
+            margin-bottom: 10px;
+        }
+
+        .section-link {
+            margin-bottom: 20px;
+        }
+
+        &.theme-paleblue {
+            --color-theme: #{$page-blue};
+            --color-children-theme: var(--color-white);
+
+            :deep(*) {
+                .section-teaser-list {
+                    .list {
+                        background-color: var(--color-theme);
+                    }
+
+                    .block-card-three-column {
+                        .meta {
+                            background-color: var(--color-children-theme);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

From a87e14672c0ab0cd1600ac36de691309f988a8d9 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Fri, 20 Sep 2024 20:23:49 +0000
Subject: [PATCH 07/20] chore(release): set `package.json` to 3.20.0 [skip ci]

# [3.20.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.19.0...v3.20.0) (2024-09-20)

### Features

* APPS-2945 FTVA Variation of SectionTeaserList ([#613](https://github.com/UCLALibrary/ucla-library-website-components/issues/613)) ([29e04f0](https://github.com/UCLALibrary/ucla-library-website-components/commit/29e04f02dca55089287eb24f7550f336b04c52b1))
---
 CHANGELOG.md | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 38042c8d0..14399742a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [3.20.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.19.0...v3.20.0) (2024-09-20)
+
+
+### Features
+
+* APPS-2945 FTVA Variation of SectionTeaserList ([#613](https://github.com/UCLALibrary/ucla-library-website-components/issues/613)) ([29e04f0](https://github.com/UCLALibrary/ucla-library-website-components/commit/29e04f02dca55089287eb24f7550f336b04c52b1))
+
 # [3.19.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.18.0...v3.19.0) (2024-09-17)
 
 
diff --git a/package.json b/package.json
index 47fd37458..8464857ad 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "ucla-library-website-components",
   "type": "module",
   "private": false,
-  "version": "3.19.0",
+  "version": "3.20.0",
   "main": "./dist/ucla-library-website-components.umd.cjs",
   "module": "./dist/ucla-library-website-components.js",
   "style": "./dist/style.css",

From 09f58e65883c714f1f8fb66a411e2777b1a05b9f Mon Sep 17 00:00:00 2001
From: Jess <jessica.divers@gmail.com>
Date: Mon, 23 Sep 2024 17:48:33 -0700
Subject: [PATCH 08/20] feat: APPS-2946 Create Two Column Layout component
 (#614)

* feat: begin sidebar structure, start drawio docs

* feat: more progress side

* feat: progress on 2col, stories

* chore: finish stories, tests

* chore: cleanup, documentation

* fix: double padding

* fix: inconsistent spacing when card-meta is above sidebar

---------

Co-authored-by: Jess Divers <jessica.divers@library.ucla.edu>
---
 src/documentation/TwoColLayoutWSticky.drawio  | 131 +++++++++++
 src/documentation/TwoColLayoutWSticky.svg     |   1 +
 .../TwoColLayoutWStickySideBar.vue            | 158 +++++++++++++
 src/lib-components/index.js                   |   2 +
 src/stories/TwoColLayoutStickySideBar.spec.js |  10 +
 .../TwoColLayoutWStickySideBar.stories.js     | 209 ++++++++++++++++++
 6 files changed, 511 insertions(+)
 create mode 100644 src/documentation/TwoColLayoutWSticky.drawio
 create mode 100644 src/documentation/TwoColLayoutWSticky.svg
 create mode 100644 src/lib-components/TwoColLayoutWStickySideBar.vue
 create mode 100644 src/stories/TwoColLayoutStickySideBar.spec.js
 create mode 100644 src/stories/TwoColLayoutWStickySideBar.stories.js

diff --git a/src/documentation/TwoColLayoutWSticky.drawio b/src/documentation/TwoColLayoutWSticky.drawio
new file mode 100644
index 000000000..3f3b358ed
--- /dev/null
+++ b/src/documentation/TwoColLayoutWSticky.drawio
@@ -0,0 +1,131 @@
+<mxfile host="65bd71144e">
+    <diagram id="k3MkfsP0TAj-Hgy-79KS" name="Page-1">
+        <mxGraphModel dx="650" dy="1500" grid="1" gridSize="10" guides="1" tooltips="1" connect="1" arrows="1" fold="1" page="1" pageScale="1" pageWidth="850" pageHeight="1100" math="0" shadow="0">
+            <root>
+                <mxCell id="0"/>
+                <mxCell id="1" parent="0"/>
+                <mxCell id="2" value="" style="whiteSpace=wrap;html=1;aspect=fixed;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;" vertex="1" parent="1">
+                    <mxGeometry x="20" y="10" width="380" height="380" as="geometry"/>
+                </mxCell>
+                <mxCell id="3" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#ae4132;dashed=1;strokeWidth=3;" vertex="1" parent="1">
+                    <mxGeometry x="30" y="20" width="220" height="360" as="geometry"/>
+                </mxCell>
+                <mxCell id="9" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f5f5f5;fontColor=#333333;strokeColor=#666666;" vertex="1" parent="1">
+                    <mxGeometry x="440" y="10" width="160" height="610" as="geometry"/>
+                </mxCell>
+                <mxCell id="10" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#fad9d5;strokeColor=#ae4132;" vertex="1" parent="1">
+                    <mxGeometry x="450" y="20" width="140" height="90" as="geometry"/>
+                </mxCell>
+                <mxCell id="11" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#b0e3e6;strokeColor=#0e8088;" vertex="1" parent="1">
+                    <mxGeometry x="450" y="120" width="140" height="90" as="geometry"/>
+                </mxCell>
+                <mxCell id="12" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#fad9d5;strokeColor=#ae4132;" vertex="1" parent="1">
+                    <mxGeometry x="450" y="220" width="140" height="120" as="geometry"/>
+                </mxCell>
+                <mxCell id="14" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeWidth=3;dashed=1;strokeColor=#004C99;" vertex="1" parent="1">
+                    <mxGeometry x="260" y="20" width="130" height="360" as="geometry"/>
+                </mxCell>
+                <mxCell id="18" value="" style="endArrow=classic;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;strokeColor=#000033;startArrow=none;" edge="1" parent="1" source="20">
+                    <mxGeometry relative="1" as="geometry">
+                        <mxPoint x="210" y="190" as="sourcePoint"/>
+                        <mxPoint x="325" y="370" as="targetPoint"/>
+                        <Array as="points">
+                            <mxPoint x="325" y="270"/>
+                        </Array>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="21" value="" style="endArrow=none;html=1;exitX=0.5;exitY=1;exitDx=0;exitDy=0;strokeColor=#000033;" edge="1" parent="1" source="4" target="20">
+                    <mxGeometry relative="1" as="geometry">
+                        <mxPoint x="325" y="150" as="sourcePoint"/>
+                        <mxPoint x="325" y="380" as="targetPoint"/>
+                        <Array as="points"/>
+                    </mxGeometry>
+                </mxCell>
+                <mxCell id="20" value="Sticky" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;dashed=1;labelBackgroundColor=#FFF9CF;strokeWidth=4;fontColor=#050505;" vertex="1" parent="1">
+                    <mxGeometry x="295" y="220" width="60" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="24" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+                    <mxGeometry x="450" y="350" width="140" height="90" as="geometry"/>
+                </mxCell>
+                <mxCell id="28" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+                    <mxGeometry x="30" y="20" width="220" height="70" as="geometry"/>
+                </mxCell>
+                <mxCell id="29" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+                    <mxGeometry x="30" y="140" width="220" height="120" as="geometry"/>
+                </mxCell>
+                <mxCell id="31" value="" style="rounded=0;whiteSpace=wrap;html=1;dashed=1;labelBackgroundColor=none;strokeColor=#FF8000;strokeWidth=2;fontColor=#050505;fillColor=none;" vertex="1" parent="1">
+                    <mxGeometry x="40" y="100" width="200" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="32" value="slot: primaryTop&amp;nbsp;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;dashed=1;labelBackgroundColor=none;strokeWidth=2;fontColor=#050505;" vertex="1" parent="1">
+                    <mxGeometry x="50" y="40" width="190" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="36" value="" style="rounded=0;whiteSpace=wrap;html=1;dashed=1;labelBackgroundColor=none;strokeColor=#FF8000;strokeWidth=2;fontColor=#050505;fillColor=none;" vertex="1" parent="1">
+                    <mxGeometry x="450" y="120" width="140" height="90" as="geometry"/>
+                </mxCell>
+                <mxCell id="39" value="" style="rounded=0;whiteSpace=wrap;html=1;dashed=1;labelBackgroundColor=none;strokeColor=#FF8000;strokeWidth=2;fontColor=#050505;fillColor=none;" vertex="1" parent="1">
+                    <mxGeometry x="450" y="350" width="140" height="90" as="geometry"/>
+                </mxCell>
+                <mxCell id="47" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeWidth=3;dashed=1;strokeColor=#00CCCC;" vertex="1" parent="1">
+                    <mxGeometry x="260" y="19" width="130" height="185" as="geometry"/>
+                </mxCell>
+                <mxCell id="44" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=none;strokeColor=#ae4132;dashed=1;strokeWidth=3;movable=0;resizable=0;rotatable=0;deletable=0;editable=0;connectable=0;" vertex="1" parent="1">
+                    <mxGeometry x="450" y="20" width="140" height="590" as="geometry"/>
+                </mxCell>
+                <mxCell id="4" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#b0e3e6;strokeColor=#0e8088;" vertex="1" parent="1">
+                    <mxGeometry x="260" y="20" width="130" height="70" as="geometry"/>
+                </mxCell>
+                <mxCell id="23" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#d5e8d4;strokeColor=#82b366;" vertex="1" parent="1">
+                    <mxGeometry x="260" y="100" width="130" height="100" as="geometry"/>
+                </mxCell>
+                <mxCell id="49" value="SMALL SCREENS" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;dashed=1;labelBackgroundColor=#FFFFFF;strokeWidth=2;fontSize=13;fontColor=#000033;" vertex="1" parent="1">
+                    <mxGeometry x="430" y="-40" width="120" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="66" value="slot: sidebarTop (mobile only)&amp;nbsp;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;dashed=1;labelBackgroundColor=none;strokeWidth=2;fontColor=#050505;" vertex="1" parent="1">
+                    <mxGeometry x="50" y="100" width="190" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="68" value="slot: primaryMid&amp;nbsp;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;dashed=1;labelBackgroundColor=none;strokeWidth=2;fontColor=#050505;" vertex="1" parent="1">
+                    <mxGeometry x="50" y="185" width="190" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="69" value="" style="rounded=0;whiteSpace=wrap;html=1;dashed=1;labelBackgroundColor=none;strokeColor=#FF8000;strokeWidth=2;fontColor=#050505;fillColor=none;" vertex="1" parent="1">
+                    <mxGeometry x="40" y="273" width="200" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="70" value="slot: sidebarBottom (mobile only)&amp;nbsp;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;dashed=1;labelBackgroundColor=none;strokeWidth=2;fontColor=#050505;" vertex="1" parent="1">
+                    <mxGeometry x="50" y="273" width="190" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="71" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#f8cecc;strokeColor=#b85450;" vertex="1" parent="1">
+                    <mxGeometry x="30" y="310" width="220" height="70" as="geometry"/>
+                </mxCell>
+                <mxCell id="72" value="slot: primaryBottom&amp;nbsp;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;dashed=1;labelBackgroundColor=none;strokeWidth=2;fontColor=#050505;" vertex="1" parent="1">
+                    <mxGeometry x="50" y="330" width="190" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="73" value="slot: sidebarTop (desktop only)&amp;nbsp;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;dashed=1;labelBackgroundColor=none;strokeWidth=2;fontColor=#050505;" vertex="1" parent="1">
+                    <mxGeometry x="260" y="40" width="120" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="74" value="slot: sidebarBottom (desktop only)&amp;nbsp;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;dashed=1;labelBackgroundColor=none;strokeWidth=2;fontColor=#050505;" vertex="1" parent="1">
+                    <mxGeometry x="265" y="140" width="120" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="75" value="XLARGE / LARGE / MEDIUM SCREENS" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;dashed=1;labelBackgroundColor=#FFFFFF;strokeWidth=2;fontSize=13;fontColor=#000033;" vertex="1" parent="1">
+                    <mxGeometry x="10" y="-40" width="270" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="76" value="slot: primaryTop&amp;nbsp;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;dashed=1;labelBackgroundColor=none;strokeWidth=2;fontColor=#050505;" vertex="1" parent="1">
+                    <mxGeometry x="450" y="50" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="77" value="slot: primaryMid&amp;nbsp;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;dashed=1;labelBackgroundColor=none;strokeWidth=2;fontColor=#050505;" vertex="1" parent="1">
+                    <mxGeometry x="450" y="260" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="78" value="" style="rounded=0;whiteSpace=wrap;html=1;fillColor=#fad9d5;strokeColor=#ae4132;" vertex="1" parent="1">
+                    <mxGeometry x="450" y="450" width="140" height="120" as="geometry"/>
+                </mxCell>
+                <mxCell id="79" value="slot: primaryBottom" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;dashed=1;labelBackgroundColor=none;strokeWidth=2;fontColor=#050505;" vertex="1" parent="1">
+                    <mxGeometry x="450" y="490" width="140" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="80" value="slot: sidebarTop&amp;nbsp;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;dashed=1;labelBackgroundColor=none;strokeWidth=2;fontColor=#050505;" vertex="1" parent="1">
+                    <mxGeometry x="460" y="150" width="120" height="30" as="geometry"/>
+                </mxCell>
+                <mxCell id="81" value="slot: sidebarBottom&amp;nbsp;&amp;nbsp;" style="text;html=1;strokeColor=none;fillColor=none;align=center;verticalAlign=middle;whiteSpace=wrap;rounded=0;dashed=1;labelBackgroundColor=none;strokeWidth=2;fontColor=#050505;" vertex="1" parent="1">
+                    <mxGeometry x="461" y="380" width="120" height="30" as="geometry"/>
+                </mxCell>
+            </root>
+        </mxGraphModel>
+    </diagram>
+</mxfile>
\ No newline at end of file
diff --git a/src/documentation/TwoColLayoutWSticky.svg b/src/documentation/TwoColLayoutWSticky.svg
new file mode 100644
index 000000000..140ac35d4
--- /dev/null
+++ b/src/documentation/TwoColLayoutWSticky.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="592px" height="662px" viewBox="-0.5 -0.5 592 662" content="&lt;mxfile&gt;&lt;diagram id=&quot;k3MkfsP0TAj-Hgy-79KS&quot; name=&quot;Page-1&quot;&gt;7Vvvj6I4GP5rTO4+3AUoIH5UR3cvGS+X9Ta397FCR5sBaqAz6v71V6Qg0KqstnizQRNDX0qhz/P2/UUdgGm0/5TA7WZBAhQOLCPYD8DTwLJcx2C/meCQC0zH4JJ1ggMuOwmW+DviwqLbGw5QWutICQkp3taFPolj5NOaDCYJ2dW7vZCwftctXCNBsPRhKEr/wQHd5FKvmFcm/4zwelPc2SzmF8GiMxekGxiQXUUEZgMwTQih+VG0n6IwA6/AJb9ufuZs+WAJimmbC6z8gncYvvG58eeih2Kyuw2maLmFftbeMUIHYLKhUchaJjuE6TaH+AXvERt18oLDcEpCkhwvBy9O9s3kJKYVef5h8pQm5BVVzrjHDzvDnw0lFO3Pzs8sUWPqhkiEaHJgXfgFBc6HugLtTqwBj8s2FcZKIeSasi5HPoHJDjiecmzBdWwT8hYHGWpPBpvvFaSrwMYkRjLsILJNwPCYBDDdHAc2y26FqgI10II6tJYIbSmrQesqgHakEdqH66xtX1Va05Ug65oKkC3G0AYtDEaBc1F1VUDoXFVO05ZAOFKBoKkXwZWBAHJlCBrIMzxPD4JmpxC2cEsfUAnbQlhifReGdlfup+pXJG6nqqCGPR2NFHl29/oSB7r8j+ldBxfFwTiLNVnLD2GaYr+OJ9pj+i2D/neHt/6tnHnac1aOjQNvSBA1DO6RYEKL+3F68kdCgRDMNjBmj03eEh9VgRRxT1AIKX6vjyUDkV/6F8HsLie+zIZBaRqK/Bn4VdWQtTEQsJzaQGDYGIghsUZUGIiBAw+VbtusQ3r+gZv3sYa1UJod5COeFKYEq5UOWS38REWHOKfaFOg2ZeFGJodcq/406TAdVfrTjPV/WH9qVuMHlUAMt5YU+68HQRWYpaR1/utccv2QWGkY4nWcWSFGJGLySWZ3Mctmx/xEhIMgu43UA9R9RM2+h3CFwgn0X9fHThWtms/no+lc8BC2GFIbTvZV5BJGjRUr8QmywBko8AiWTnfLcAoc5AW2bAV71gooSz0aIQtwOoz6rBZO9a6oz/OR78sgXHlONvNHpsVNJ3YTgLrT4kcAWKrbNQSVRM1AdfLWxmCeK+bM5x7zzoIVtS5YUYn5V2EWmgUJCSWGJsMKxFwwDbPy6DibQoIjmBz+JtuB5cIowz5epdty1h/Sf0qTq0ukK2C4Yfcla66M15UT7PZL7n9WfwGqHclPSUmnwZE91Ojbby7nTNlHTznHHInYyso5pucoALezWtkNr2oi8g5Xx6fIbpygFH+vtgmFtNIOUIiqbRTgapO/Ea1INCyMtqbKUbIwNFLXWbX91mKmkqxB53vKzjJXwX5IYlS5ATFUKKHoMJeL8fMzEy2nX2azP5cCpB8nHs3rOexz1gfzHRomkPjken3xPjvTSA1/k4Wp0nfOCih2xTD1lIekOEArmBzzEOOXiKwww98ySBwefu0zE5WZiXRd60pNXLEiJeSeC9a5Z1glw0VE1wnDfaZzvd5jDYHAiLZ6TxHSXLKzE0IpiXpTq3chymjXthCHmnfNPKR2DSRbt7RV/4ctCqXFwumXibplAkCHEclQTNbORaEBSl/p8bC3jerzyy5Tj6FY47jgEnve1fLe2HbSKfGOQPy35/GXT7NBdsc5+623FrOnP74u+qKDyqJDY9uarOZQum/l/F+qOfTvPhUt8Wb5uu1rHSUMi691+gqDdoZLZ94Jxbq3NT1kM7vddpUo2ZYzFMs0Z3ObfmXcQ+uow5VRbLy9msz0xu8eiptvxmQrV1cE64llnbOpS5PlnvW7WDdrrJe73DWwzpqnfyznm+BP//sGs/8A&lt;/diagram&gt;&lt;/mxfile&gt;"><defs/><g><rect x="11" y="51" width="380" height="380" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><rect x="21" y="61" width="220" height="360" fill="none" stroke="#ae4132" stroke-width="3" stroke-dasharray="9 9" pointer-events="all"/><rect x="431" y="51" width="160" height="610" fill="#f5f5f5" stroke="#666666" pointer-events="all"/><rect x="441" y="61" width="140" height="90" fill="#fad9d5" stroke="#ae4132" pointer-events="all"/><rect x="441" y="161" width="140" height="90" fill="#b0e3e6" stroke="#0e8088" pointer-events="all"/><rect x="441" y="261" width="140" height="120" fill="#fad9d5" stroke="#ae4132" pointer-events="all"/><rect x="251" y="61" width="130" height="360" fill="none" stroke="#004c99" stroke-width="3" stroke-dasharray="9 9" pointer-events="all"/><path d="M 316 291 L 316 301 Q 316 311 316 321 L 316 404.63" fill="none" stroke="#000033" stroke-miterlimit="10" pointer-events="stroke"/><path d="M 316 409.88 L 312.5 402.88 L 316 404.63 L 319.5 402.88 Z" fill="#000033" stroke="#000033" stroke-miterlimit="10" pointer-events="all"/><path d="M 316 131 L 316 261" fill="none" stroke="#000033" stroke-miterlimit="10" pointer-events="stroke"/><rect x="286" y="261" width="60" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 58px; height: 1px; padding-top: 276px; margin-left: 287px;"><div data-drawio-colors="color: #050505; background-color: #FFF9CF; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(5, 5, 5); line-height: 1.2; pointer-events: all; background-color: rgb(255, 249, 207); white-space: normal; overflow-wrap: normal;">Sticky</div></div></div></foreignObject><text x="316" y="280" fill="#050505" font-family="Helvetica" font-size="12px" text-anchor="middle">Sticky</text></switch></g><rect x="441" y="391" width="140" height="90" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><rect x="21" y="61" width="220" height="70" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><rect x="21" y="181" width="220" height="120" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><rect x="31" y="141" width="200" height="30" fill="none" stroke="#ff8000" stroke-width="2" stroke-dasharray="6 6" pointer-events="all"/><rect x="41" y="81" width="190" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 188px; height: 1px; padding-top: 96px; margin-left: 42px;"><div data-drawio-colors="color: #050505; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(5, 5, 5); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">slot: primaryTop </div></div></div></foreignObject><text x="136" y="100" fill="#050505" font-family="Helvetica" font-size="12px" text-anchor="middle">slot: primaryTop </text></switch></g><rect x="441" y="161" width="140" height="90" fill="none" stroke="#ff8000" stroke-width="2" stroke-dasharray="6 6" pointer-events="all"/><rect x="441" y="391" width="140" height="90" fill="none" stroke="#ff8000" stroke-width="2" stroke-dasharray="6 6" pointer-events="all"/><rect x="251" y="60" width="130" height="185" fill="none" stroke="#00cccc" stroke-width="3" stroke-dasharray="9 9" pointer-events="all"/><rect x="441" y="61" width="140" height="590" fill="none" stroke="#ae4132" stroke-width="3" stroke-dasharray="9 9" pointer-events="all"/><rect x="251" y="61" width="130" height="70" fill="#b0e3e6" stroke="#0e8088" pointer-events="all"/><rect x="251" y="141" width="130" height="100" fill="#d5e8d4" stroke="#82b366" pointer-events="all"/><rect x="421" y="1" width="120" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 16px; margin-left: 422px;"><div data-drawio-colors="color: #000033; background-color: #FFFFFF; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 13px; font-family: Helvetica; color: rgb(0, 0, 51); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: normal; overflow-wrap: normal;">SMALL SCREENS</div></div></div></foreignObject><text x="481" y="20" fill="#000033" font-family="Helvetica" font-size="13px" text-anchor="middle">SMALL SCREENS</text></switch></g><rect x="41" y="141" width="190" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 188px; height: 1px; padding-top: 156px; margin-left: 42px;"><div data-drawio-colors="color: #050505; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(5, 5, 5); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">slot: sidebarTop (mobile only) </div></div></div></foreignObject><text x="136" y="160" fill="#050505" font-family="Helvetica" font-size="12px" text-anchor="middle">slot: sidebarTop (mobile only) </text></switch></g><rect x="41" y="226" width="190" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 188px; height: 1px; padding-top: 241px; margin-left: 42px;"><div data-drawio-colors="color: #050505; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(5, 5, 5); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">slot: primaryMid </div></div></div></foreignObject><text x="136" y="245" fill="#050505" font-family="Helvetica" font-size="12px" text-anchor="middle">slot: primaryMid </text></switch></g><rect x="31" y="314" width="200" height="30" fill="none" stroke="#ff8000" stroke-width="2" stroke-dasharray="6 6" pointer-events="all"/><rect x="41" y="314" width="190" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 188px; height: 1px; padding-top: 329px; margin-left: 42px;"><div data-drawio-colors="color: #050505; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(5, 5, 5); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">slot: sidebarBottom (mobile only) </div></div></div></foreignObject><text x="136" y="333" fill="#050505" font-family="Helvetica" font-size="12px" text-anchor="middle">slot: sidebarBottom (mobile onl...</text></switch></g><rect x="21" y="351" width="220" height="70" fill="#f8cecc" stroke="#b85450" pointer-events="all"/><rect x="41" y="371" width="190" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 188px; height: 1px; padding-top: 386px; margin-left: 42px;"><div data-drawio-colors="color: #050505; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(5, 5, 5); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">slot: primaryBottom </div></div></div></foreignObject><text x="136" y="390" fill="#050505" font-family="Helvetica" font-size="12px" text-anchor="middle">slot: primaryBottom </text></switch></g><rect x="251" y="81" width="120" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 96px; margin-left: 252px;"><div data-drawio-colors="color: #050505; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(5, 5, 5); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">slot: sidebarTop (desktop only) </div></div></div></foreignObject><text x="311" y="100" fill="#050505" font-family="Helvetica" font-size="12px" text-anchor="middle">slot: sidebarTop (de...</text></switch></g><rect x="256" y="181" width="120" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 196px; margin-left: 257px;"><div data-drawio-colors="color: #050505; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(5, 5, 5); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">slot: sidebarBottom (desktop only) </div></div></div></foreignObject><text x="316" y="200" fill="#050505" font-family="Helvetica" font-size="12px" text-anchor="middle">slot: sidebarBottom...</text></switch></g><rect x="1" y="1" width="270" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 268px; height: 1px; padding-top: 16px; margin-left: 2px;"><div data-drawio-colors="color: #000033; background-color: #FFFFFF; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 13px; font-family: Helvetica; color: rgb(0, 0, 51); line-height: 1.2; pointer-events: all; background-color: rgb(255, 255, 255); white-space: normal; overflow-wrap: normal;">XLARGE / LARGE / MEDIUM SCREENS</div></div></div></foreignObject><text x="136" y="20" fill="#000033" font-family="Helvetica" font-size="13px" text-anchor="middle">XLARGE / LARGE / MEDIUM SCREENS</text></switch></g><rect x="441" y="91" width="140" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 106px; margin-left: 442px;"><div data-drawio-colors="color: #050505; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(5, 5, 5); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">slot: primaryTop </div></div></div></foreignObject><text x="511" y="110" fill="#050505" font-family="Helvetica" font-size="12px" text-anchor="middle">slot: primaryTop </text></switch></g><rect x="441" y="301" width="140" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 316px; margin-left: 442px;"><div data-drawio-colors="color: #050505; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(5, 5, 5); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">slot: primaryMid </div></div></div></foreignObject><text x="511" y="320" fill="#050505" font-family="Helvetica" font-size="12px" text-anchor="middle">slot: primaryMid </text></switch></g><rect x="441" y="491" width="140" height="120" fill="#fad9d5" stroke="#ae4132" pointer-events="all"/><rect x="441" y="531" width="140" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 138px; height: 1px; padding-top: 546px; margin-left: 442px;"><div data-drawio-colors="color: #050505; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(5, 5, 5); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">slot: primaryBottom</div></div></div></foreignObject><text x="511" y="550" fill="#050505" font-family="Helvetica" font-size="12px" text-anchor="middle">slot: primaryBottom</text></switch></g><rect x="451" y="191" width="120" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 206px; margin-left: 452px;"><div data-drawio-colors="color: #050505; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(5, 5, 5); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">slot: sidebarTop </div></div></div></foreignObject><text x="511" y="210" fill="#050505" font-family="Helvetica" font-size="12px" text-anchor="middle">slot: sidebarTop </text></switch></g><rect x="452" y="421" width="120" height="30" fill="none" stroke="none" pointer-events="all"/><g transform="translate(-0.5 -0.5)"><switch><foreignObject pointer-events="none" width="100%" height="100%" requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility" style="overflow: visible; text-align: left;"><div xmlns="http://www.w3.org/1999/xhtml" style="display: flex; align-items: unsafe center; justify-content: unsafe center; width: 118px; height: 1px; padding-top: 436px; margin-left: 453px;"><div data-drawio-colors="color: #050505; " style="box-sizing: border-box; font-size: 0px; text-align: center;"><div style="display: inline-block; font-size: 12px; font-family: Helvetica; color: rgb(5, 5, 5); line-height: 1.2; pointer-events: all; white-space: normal; overflow-wrap: normal;">slot: sidebarBottom  </div></div></div></foreignObject><text x="512" y="440" fill="#050505" font-family="Helvetica" font-size="12px" text-anchor="middle">slot: sidebarBottom  </text></switch></g></g><switch><g requiredFeatures="http://www.w3.org/TR/SVG11/feature#Extensibility"/><a transform="translate(0,-5)" xlink:href="https://www.diagrams.net/doc/faq/svg-export-text-problems" target="_blank"><text text-anchor="middle" font-size="10px" x="50%" y="100%">Text is not SVG - cannot display</text></a></switch></svg>
\ No newline at end of file
diff --git a/src/lib-components/TwoColLayoutWStickySideBar.vue b/src/lib-components/TwoColLayoutWStickySideBar.vue
new file mode 100644
index 000000000..17e350d96
--- /dev/null
+++ b/src/lib-components/TwoColLayoutWStickySideBar.vue
@@ -0,0 +1,158 @@
+<script lang="ts" setup>
+import { onMounted, ref, watch } from 'vue'
+import type { Ref } from 'vue'
+import { useWindowSize } from '@vueuse/core'
+import SectionWrapper from '@/lib-components/SectionWrapper.vue'
+
+// Track height of sidebar and ensure main content as at least as tall
+const isMobile: Ref<boolean> = ref(false)
+const sidebar: Ref<HTMLDivElement | null> = ref(null)
+const primaryCol: Ref<HTMLDivElement | null> = ref(null)
+
+function setMainMinHeight() {
+  primaryCol.value!.style!.minHeight = `${sidebar.value!.clientHeight + 125}px` // add 125 px to account for top and bottom padding
+}
+
+onMounted(() => {
+  const { width } = useWindowSize()
+  watch([width, sidebar], ([newWidth]) => {
+    isMobile.value = newWidth <= 750
+
+    if (isMobile.value === true)
+      primaryCol.value!.style!.minHeight = 'auto' // on mobile, reset height
+
+    else
+      setMainMinHeight()
+  }, { immediate: true })
+})
+</script>
+
+<template>
+  <div class="two-column">
+    <!-- main column -->
+    <div
+      ref="primaryCol"
+      class="primary-column top"
+    >
+      <SectionWrapper class="primary-section-wrapper">
+        <slot name="primaryTop" />
+        <div v-if="isMobile" class="sidebar-mobile-top">
+          <slot name="sidebarTop" />
+        </div>
+        <slot name="primaryMid" />
+        <div v-if="isMobile" class="sidebar-mobile-bottom">
+          <slot name="sidebarBottom" />
+        </div>
+        <slot name="primaryBottom" />
+      </SectionWrapper>
+    </div>
+
+    <!-- sidebar column -->
+    <div class="sidebar-column">
+      <div
+        ref="sidebar"
+        class="sidebar-content-wrapper"
+      >
+        <slot v-if="!isMobile" name="sidebarTop" />
+        <slot v-if="!isMobile" name="sidebarBottom" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.two-column {
+  position: relative;
+  width: 100%;
+  max-width: var(--ftva-container-max-width);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+
+  .primary-column {
+    margin-bottom: 0px;
+    width: 67%;
+
+    .primary-section-wrapper {
+      padding-left: 0px;
+      margin: var(--space-2xl) auto;
+      padding: 0 var(--unit-gutter);
+    }
+  }
+
+  .sidebar-column {
+    min-width: 314px;
+    width: 30%;
+    position: absolute;
+    height: 100%;
+    top: 0;
+    right: 0;
+    padding-top: var(--space-2xl);
+    padding-bottom: 40px;
+    padding-right: var(--unit-gutter);
+
+    .sidebar-content-wrapper {
+      position: sticky;
+      top: 85px;
+      will-change: top;
+
+      >* {
+        margin-bottom: 30px;
+
+        &:last-child {
+          margin-bottom: 48px;
+        }
+      }
+    }
+  }
+}
+
+// MEDIUM DEVICE STYLES
+@media (max-width: 1200px) {
+  .two-column {
+    padding-right: var(--unit-gutter);
+  }
+
+  .two-column>.primary-column {
+    width: 62%;
+  }
+}
+
+// MOBILE STYLES
+@media #{$small} {
+  .two-column {
+    display: grid;
+    grid-template-columns: 1fr;
+
+    .primary-column {
+      width: auto;
+      grid-column: 1;
+
+      .primary-section-wrapper {
+        padding-left: var(--unit-gutter);
+
+        // Cardmeta divs have a bottom-margin, but the last one doesn't always display if content is overflowing.
+        // We remove the margin from the last card-meta div to ensure it displays consistently, and re-add the spacing below
+        :deep(.card-meta) {
+          div:last-child {
+            margin-bottom: 0px;
+          }
+        }
+      }
+
+      .sidebar-mobile-top {
+        padding-top: var(--space-l); // add padding to top of sidebar
+      }
+      .sidebar-mobile-top, .sidebar-mobile-bottom {
+        > * {
+          margin-bottom: 30px;
+        }
+      }
+    }
+
+    .sidebar-column {
+      display: none;
+    }
+  }
+}
+</style>
diff --git a/src/lib-components/index.js b/src/lib-components/index.js
index efbb8353c..619ef5c31 100644
--- a/src/lib-components/index.js
+++ b/src/lib-components/index.js
@@ -127,3 +127,5 @@ export { default as StoryWithImage } from './StoryWithImage.vue'
 export { default as TabItem } from './TabItem.vue'
 export { default as TabList } from './TabList.vue'
 export { default as VideoEmbed } from './VideoEmbed.vue'
+// LAYOUTS
+export { default as TwoColLayoutWStickySideBar } from './TwoColLayoutWStickySideBar.vue' // used in FTVA
diff --git a/src/stories/TwoColLayoutStickySideBar.spec.js b/src/stories/TwoColLayoutStickySideBar.spec.js
new file mode 100644
index 000000000..bea91c398
--- /dev/null
+++ b/src/stories/TwoColLayoutStickySideBar.spec.js
@@ -0,0 +1,10 @@
+describe('LAYOUT / Two Columns W Sticky Sidebar', () => {
+  it('Default', () => {
+    cy.visit(
+      '/iframe.html?id=layout-2-column-layout-with-sticky-sidebar--event-series'
+    )
+    cy.get('.two-column').should('exist')
+
+    cy.percySnapshot('LAYOUT / Two Columns W Sticky Sidebar: Event Series')
+  })
+})
diff --git a/src/stories/TwoColLayoutWStickySideBar.stories.js b/src/stories/TwoColLayoutWStickySideBar.stories.js
new file mode 100644
index 000000000..a8655d1f3
--- /dev/null
+++ b/src/stories/TwoColLayoutWStickySideBar.stories.js
@@ -0,0 +1,209 @@
+import { computed } from 'vue'
+import BlockEventDetail from '@/lib-components/BlockEventDetail.vue'
+import BlockInfo from '@/lib-components/BlockInfo.vue'
+import ButtonDropdown from '@/lib-components/ButtonDropdown.vue'
+import CardMeta from '@/lib-components/CardMeta.vue'
+import DividerWayFinder from '@/lib-components/DividerWayFinder.vue'
+import RichText from '@/lib-components/RichText.vue'
+import SectionWrapper from '@/lib-components/SectionWrapper.vue'
+import TwoColLayoutWStickySideBar from '@/lib-components/TwoColLayoutWStickySideBar.vue'
+
+// Storybook default settings
+export default {
+  title: 'LAYOUT / 2 Column Layout with Sticky Sidebar',
+  components: TwoColLayoutWStickySideBar,
+}
+
+// Mock data for Event Series Page components
+const reallyLongRichText = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.'
+const mockSeriesPageData = {
+  title: 'Page.Title',
+  eventDescription: 'Page.eventDescription, Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry\'s standard dummy text ever since the 1500s.',
+  ftvaEventIntroduction: 'Page.ftvaEventIntroduction, Shorter intro text here.',
+  guestSpeaker: 'Page.guestSpeaker, Guest Speaker Name',
+  richText: `page.richText, page rich-text content here on some pages.${reallyLongRichText}`,
+  startDate: '2021-09-01',
+  endDate: '2021-09-30',
+  ongoing: false,
+  location: [
+    {
+      id: '195746',
+      title: 'Billy Wilder Theater',
+      url: 'https://test-craft.library.ucla.edu/locations/billy-wilder-theater',
+      uri: 'locations/billy-wilder-theater'
+    },
+    {
+      id: '195746',
+      title: 'Other Location',
+      url: 'https://test-craft.library.ucla.edu/locations/other-locations',
+      uri: 'locations/somelocation'
+    }
+  ]
+}
+const ftvaTicketInformation = [
+  {
+    title: 'Admission is free',
+  },
+  {
+    title: 'Seats are assigned on a first come, first served basis',
+  },
+  {
+    title: 'The box office opens one hour before the event',
+  },
+]
+
+export function EventSeries() {
+  return {
+    data() {
+      return {
+        page: mockSeriesPageData,
+        ftvaTicketInformation
+      }
+    },
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
+    components: { TwoColLayoutWStickySideBar, CardMeta, RichText, BlockInfo, BlockEventDetail, SectionWrapper },
+    template: `<div>
+                <SectionWrapper theme='paleblue'>Previous Section Content</SectionWrapper>
+                <TwoColLayoutWStickySideBar>
+                    <template v-slot:primaryTop>
+                        <CardMeta
+                            category="Series"
+                            :title="page?.title"
+                            :text="page?.eventDescription"
+                            :introduction="page?.ftvaEventIntroduction"
+                            :guest-speaker="page?.guestSpeaker"
+                        />
+                    </template>
+                    <template v-slot:primaryMid>
+                        <RichText
+                            v-if="page?.richText"
+                            :rich-text-content="page?.richText"
+                        />
+                    </template>
+                    <template v-slot:sidebarTop>
+                        <BlockEventDetail
+                            data-test="event-details"
+                            :start-date="page?.startDate"
+                            :end-date="page?.endDate"
+                            :ongoing="page?.ongoing"
+                            :locations="page?.location" />
+                    </template>
+                    <template v-slot:sidebarBottom>
+                        <BlockInfo
+                            v-if="ftvaTicketInformation && ftvaTicketInformation.length > 0"
+                            data-test="ticket-info"
+                            :ftva-ticket-information="ftvaTicketInformation" />
+                    </template>
+                </TwoColLayoutWStickySideBar>
+                <SectionWrapper theme='paleblue'>Next Section Content</SectionWrapper>
+                </div>`
+  }
+}
+
+// Mock data for Event Detail Page components
+const mockEventDetailPageData = {
+  id: '2847944',
+  typeHandle: 'ftvaEvent',
+  title: 'La Région Centrale 03-08-24',
+  tagLabels: [
+    {
+      title: 'Guest speaker'
+    },
+    {
+      title: '35mm'
+    }
+  ],
+  startDateWithTime: '2024-03-09T03:30:00+00:00',
+  category: 'Series Title Here',
+  endTime: '20:30:00',
+  location: [
+    {
+      id: '195746',
+      title: 'Billy Wilder Theater',
+      url: 'https://test-craft.library.ucla.edu/locations/billy-wilder-theater',
+      uri: 'locations/billy-wilder-theater'
+    },
+    {
+      id: '195746',
+      title: 'Other Location',
+      url: 'https://test-craft.library.ucla.edu/locations/other-locations',
+      uri: 'locations/somelocation'
+    }
+  ],
+  acknowledements: 'page.acknowledgements text here', // [SIC] this is the way it's spelled in the query
+}
+// for Add to Calendar Button
+const mockCalendarData = {
+  isEvent: true,
+  title: 'La Région Centrale Screening',
+  startDateWithTime: '2025-07-08T02:30:00+00:00',
+  endTime: '20:30:00',
+  location: [
+    {
+      title: 'Billy Wilder Theater',
+      campusMapId: null,
+      publicUrl: 'https://www.cinema.ucla.edu/billy-wilder-theater',
+      address: []
+    }
+  ],
+  eventDescription: '<p>Admission is free. No advance reservations. Your seat will be assigned to you when you pick up your ticket at the box office. Seats are assigned on a first come, first served basis. The box office opens one hour before the event.</p>\n<p>La Région Centrale</p>\n<p>Canada, 1971</p>\n<p>The late avant-garde master Michael Snow’s work explores the nature of perception, consciousness, participation, and in many ways is uncategorizable but relation to time is evident. He worked in many mediums and his films playfully and prolifically rethink the parameters while requiring audiences to actively participate in this work. La Région Centrale is a three-hour-long film that calls attention to the mechanics of filmmaking, using a computer-programmed, motorized tripod that rotates the camera 360 degrees in any direction, repeatedly, without dialogue or any other subject beyond the landscape, over the course of a day.'
+}
+
+export function FTVAEventDetail() {
+  return {
+    data() {
+      return {
+        page: mockEventDetailPageData,
+        ftvaTicketInformation,
+        mockCalendarData
+      }
+    },
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
+    components: { TwoColLayoutWStickySideBar, ButtonDropdown, CardMeta, DividerWayFinder, RichText, BlockInfo, BlockEventDetail, SectionWrapper },
+    template: `<div>
+        <SectionWrapper theme='paleblue'>Previous Section Content</SectionWrapper>
+        <TwoColLayoutWStickySideBar>
+        <template v-slot:primaryTop>
+            <CardMeta
+                :category="page.category"
+                :title="page?.title"
+                :tag-labels="page?.tagLabels"
+                :introduction="page?.acknowledements"
+                :guest-speaker="page?.guestSpeaker"
+            />
+            <RichText
+                v-if="page?.eventDescription"
+                :rich-text-content="page?.eventDescription"
+            />
+        </template>
+        <template v-slot:primaryBottom>
+            <DividerWayFinder />
+        </template>
+        <template v-slot:sidebarTop>
+                <BlockEventDetail
+                    data-test="event-details"
+                    :start-date="page?.startDateWithTime"
+                    :time="page?.startDateWithTime"
+                    :ongoing="page?.ongoing"
+                    :locations="page?.location"
+                />
+                <ButtonDropdown v-bind="mockCalendarData" />
+                <BlockInfo
+                    v-if="ftvaTicketInformation && ftvaTicketInformation.length > 0"
+                    data-test="ticket-info"
+                    :ftva-ticket-information="ftvaTicketInformation"
+                />
+        </template>
+        </TwoColLayoutWStickySideBar>
+        <SectionWrapper theme='paleblue'>Next Section Content</SectionWrapper>
+        </div>`
+  }
+}

From 0dc39706046c047902f7871962bc007a25cfac89 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Tue, 24 Sep 2024 00:49:24 +0000
Subject: [PATCH 09/20] chore(release): set `package.json` to 3.21.0 [skip ci]

# [3.21.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.20.0...v3.21.0) (2024-09-24)

### Features

* APPS-2946 Create Two Column Layout component ([#614](https://github.com/UCLALibrary/ucla-library-website-components/issues/614)) ([cc5d52d](https://github.com/UCLALibrary/ucla-library-website-components/commit/cc5d52d050683917cd0b0bcb65fee01000184da4))
---
 CHANGELOG.md | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 14399742a..26af1c474 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [3.21.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.20.0...v3.21.0) (2024-09-24)
+
+
+### Features
+
+* APPS-2946 Create Two Column Layout component ([#614](https://github.com/UCLALibrary/ucla-library-website-components/issues/614)) ([cc5d52d](https://github.com/UCLALibrary/ucla-library-website-components/commit/cc5d52d050683917cd0b0bcb65fee01000184da4))
+
 # [3.20.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.19.0...v3.20.0) (2024-09-20)
 
 
diff --git a/package.json b/package.json
index 8464857ad..31f0e6c3a 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "ucla-library-website-components",
   "type": "module",
   "private": false,
-  "version": "3.20.0",
+  "version": "3.21.0",
   "main": "./dist/ucla-library-website-components.umd.cjs",
   "module": "./dist/ucla-library-website-components.js",
   "style": "./dist/style.css",

From f52f7553d19358a42db72b55bb8fe295d672f5fd Mon Sep 17 00:00:00 2001
From: Tinuola 'Tinu' Awopetu <24995224+tinuola@users.noreply.github.com>
Date: Tue, 24 Sep 2024 09:51:16 -0700
Subject: [PATCH 10/20] fix: APPS-2947 Update NavBreadcrumb logic to display
 route title or prop title (#616)

* wip: refactor breadcrumb logic

* wip: update breadcrumb stories

* task: clean up code

* fix: add extra logic for parent breadcrumb icon on mobile

* update code documentation

* update ref, function naming

* fix: update ref name in template

* fix: remove collapsed class when group is expanded

---------

Co-authored-by: tinuola <tinuola@users.noreply.github.com>
Co-authored-by: Parinita Mulak <pghorpade@library.ucla.edu>
---
 src/lib-components/NavBreadcrumb.vue | 136 +++++++++++++++++++--------
 src/stories/NavBreadcrumb.stories.js |  96 +++++++++++++------
 2 files changed, 163 insertions(+), 69 deletions(-)

diff --git a/src/lib-components/NavBreadcrumb.vue b/src/lib-components/NavBreadcrumb.vue
index d885276c6..fc9400344 100644
--- a/src/lib-components/NavBreadcrumb.vue
+++ b/src/lib-components/NavBreadcrumb.vue
@@ -8,6 +8,14 @@ import { useTheme } from '@/composables/useTheme'
 // COMPONENTS
 import SmartLink from '@/lib-components/SmartLink.vue'
 
+/* Note:
+  Setting all props at page-level defaults to the legacy pattern of a single-level breadcrumb.
+
+  The library website currently uses the legacy pattern.
+
+  For non-legacy behavior/use cases (FTVA, et al), breadcrumbs are parsed from the route; with the option to set the final breadcrumb title from route data or at page-level with the 'title' prop.
+  */
+
 const { to, parentTitle, title } = defineProps({
   to: {
     type: String,
@@ -17,10 +25,6 @@ const { to, parentTitle, title } = defineProps({
     type: String,
     default: '',
   },
-  /* Note:
-  For legacy (Library website) breadcrumbs, `title` is the hardcoded value entered at page-level;
-  Otherwise, for FTVA (and other future themes/use case?), `title` is coming from or parsed from Craft data
-  */
   title: {
     type: String,
     default: '',
@@ -33,20 +37,36 @@ const isExpanded = ref(false)
 
 const isMobile = ref(false)
 
+const collapseBreadcrumbs = ref(false)
+
+const collapsedBreadcrumbsBtn = ref()
+
+const setRouteTitle = ref(false)
+
 onMounted(() => {
   // Watch for changes in window width only after the component is mounted
   const { width } = useWindowSize()
   watch(width, (newWidth) => {
-    // console.log("window width changes on client side")
     isMobile.value = newWidth <= 1200
   }, { immediate: true })
 })
 
-// Split URI path; then remove empty string at start of the array
 const parsedBreadcrumbs = computed(() => {
-  const decodedRoutePath = decodeURI(route.path)
+  let path = route.path
+
+  // Remove first '/' of route
+  if (path.indexOf('/') === 0)
+    path = path.slice(1)
+
+  // Remove last '/' of route
+  if (path.lastIndexOf('/') === (path.length - 1))
+    path = path.slice(0, path.length - 1)
+
+  const decodedRoutePath = decodeURI(path)
+
   const pathWithNoTrailingDates = stripUrlDate(decodedRoutePath)
-  const pagePathArray = pathWithNoTrailingDates.split('/').slice(1)
+
+  const pagePathArray = pathWithNoTrailingDates.split('/')
 
   return pagePathArray
 })
@@ -54,24 +74,28 @@ const parsedBreadcrumbs = computed(() => {
 const parsedBreadcrumbLinks = computed(() => {
   const breadcrumbsList = parsedBreadcrumbs.value
 
-  const arrLength = breadcrumbsList.length
+  const breadcrumbListLength = breadcrumbsList.length
+
+  if (breadcrumbListLength > 4)
+    setCollapseBreadcrumbs()
 
   if (isMobile.value) {
-    // return last 2 items
+    // For mobile display, get last 2 items
     const mobileBreadcrumb
       = createBreadcrumbLinks(breadcrumbsList).slice(-2)
 
+    // Display parent item only
     return mobileBreadcrumb.splice(0, 1)
   }
   else if (!isMobile.value) {
-    if (arrLength > 4 && !isExpanded.value) {
+    if (breadcrumbListLength > 4 && !isExpanded.value) {
       setLinkExpansion()
 
       // Keep 1st and last 2 items in breadcrumbs array
       // Replace deleted items with `...`
       const truncatedBreadcrumbsList = breadcrumbsList.toSpliced(
         1,
-        arrLength - 3,
+        breadcrumbListLength - 3,
         '...'
       )
 
@@ -86,7 +110,7 @@ const parsedBreadcrumbLinks = computed(() => {
 function createBreadcrumbLinks(arr) {
   const breadCrumbObjects = []
 
-  // if props are present, we are using the legacy single breadcrumb
+  // if all props are present, use the legacy single-level breadcrumb pattern
   if (to && parentTitle && title) {
     // Set the parent
     breadCrumbObjects.push({
@@ -104,39 +128,56 @@ function createBreadcrumbLinks(arr) {
     })
     return breadCrumbObjects
   }
-  // otherwise format based on route
-  arr.forEach((item, index) => {
-    const linkLength = item.length
-    const linkIndex = route.path.indexOf(item)
-    // Create a link for the item
-    const linkTo = route.path.substring(0, linkLength + linkIndex)
-    const linkTitle = item.replaceAll('-', ' ')
-
-    let isLastItem
-    index === arr.length - 1 ? (isLastItem = true) : (isLastItem = false)
-
-    // Identifies the `...` in the breadcrumbs array
-    let isTruncatedGroup
-    isExpanded.value === false && index === 1
-      ? (isTruncatedGroup = true)
-      : (isTruncatedGroup = false)
+  else {
+    // otherwise format breadcrumbs based on route
+    arr.forEach((item, index) => {
+      const linkLength = item.length
 
-    breadCrumbObjects.push({
-      to: linkTo,
-      title: linkTitle,
-      isTruncatedGroup,
-      isLastItem,
+      const linkIndex = route.path.indexOf(item)
+
+      // Recreate a link for the item
+      const linkTo = route.path.substring(0, linkLength + linkIndex)
+
+      const linkTitle = item.replaceAll('-', ' ')
+
+      let isLastItem
+      index === arr.length - 1 ? (isLastItem = true) : (isLastItem = false)
+
+      // If breadcrumb pattern has more than four levels, identify the `...` (collapsed levels) from the breadcrumbs array
+      let isTruncatedGroup
+      if (collapseBreadcrumbs.value) {
+        isExpanded.value === false && index === 1
+          ? (isTruncatedGroup = true)
+          : (isTruncatedGroup = false)
+      }
+
+      breadCrumbObjects.push({
+        to: linkTo,
+        title: linkTitle,
+        isTruncatedGroup,
+        isLastItem,
+      })
     })
-  })
-  return breadCrumbObjects
+    return breadCrumbObjects
+  }
+}
+
+// Event handler for parent breadcrumbs; if title prop is passed at page level as the final breadcrumb title, prevent it from from overriding a preceding parent title.
+function handleSetRouteTitle() {
+  setRouteTitle.value = true
 }
 
 function setLinkExpansion() {
   isExpanded.value = false
 }
 
+function setCollapseBreadcrumbs() {
+  collapseBreadcrumbs.value = true
+}
+
 function toggleLinksExpansion() {
   isExpanded.value = !isExpanded.value
+  collapsedBreadcrumbsBtn.value[0].classList.remove('collapsed-url')
 }
 
 function stripUrlDate(str) {
@@ -170,11 +211,13 @@ const parsedClasses = computed(() => {
         v-if="!linkObj.isLastItem && !linkObj.isTruncatedGroup"
         :to="linkObj.to"
         class="parent-page-url"
+        @click="handleSetRouteTitle()"
         v-text="linkObj.title"
       />
-      <!-- Collapsed group should not link -->
+      <!-- Collapsed group should not link; set with button rather than SmartLink -->
       <button
         v-else-if="!linkObj.isLastItem && linkObj.isTruncatedGroup"
+        ref="collapsedBreadcrumbsBtn"
         class="parent-page-url collapsed-url"
         tabindex="0"
         @click="toggleLinksExpansion()"
@@ -184,13 +227,26 @@ const parsedClasses = computed(() => {
         v-if="!linkObj.isLastItem"
         aria-hidden="true"
       />
-      <!-- FTVA uses title field from Craft for the final breadcrumb -->
+
+      <!-- Final Breadcrumb Logic -->
+
+      <!-- Prevent final [prop] title/breadcrumb from overriding a parent title -->
+      <span
+        v-if="linkObj.isLastItem && setRouteTitle"
+        class="parent-page-url"
+        v-text="linkObj.title"
+      />
+      <SvgIconCaretRight
+        v-if="linkObj.isLastItem && setRouteTitle"
+        aria-hidden="true"
+      />
+      <!-- Set final breadcrumb with prop title if available -->
       <span
-        v-if="linkObj.isLastItem && theme === 'ftva'"
+        v-else-if="linkObj.isLastItem && title"
         class="current-page-title"
         v-text="title"
       />
-      <!-- Otherwise, use parsed route url to set last breadcrumb; if future or default use will be to get the `title` from data and not the slug, this condition can be removed, and the condition above checking for the ftva theme can be refactored -->
+      <!-- Set final breadcrumb with route title if prop title is unavailable -->
       <span
         v-else-if="linkObj.isLastItem"
         class="current-page-title"
diff --git a/src/stories/NavBreadcrumb.stories.js b/src/stories/NavBreadcrumb.stories.js
index 92197035e..daf256188 100644
--- a/src/stories/NavBreadcrumb.stories.js
+++ b/src/stories/NavBreadcrumb.stories.js
@@ -6,16 +6,50 @@ import NavBreadcrumb from '@/lib-components/NavBreadcrumb'
 export default {
   title: 'NAV / Breadcrumb',
   component: NavBreadcrumb,
-  decorators: [
-    () => ({
-      router,
-      template: '<story />',
-    }),
-  ],
 }
 
 function Template(args) {
-  router.push(args.to)
+  return {
+    setup() {
+      return { args }
+    },
+    components: { NavBreadcrumb },
+    template: '<nav-breadcrumb to="/about/news" title="Jane Doe" parentTitle="Parent"/>',
+  }
+}
+
+// Legacy breadcrumbs (Values entered at page-level)
+export const DefaultSingleLevelWithPageProps = Template.bind({})
+
+// Breadcrumbs generated from route with option to use title from route or set at page-level
+function Template2(args) {
+  router.push('/parent-1/parent-2/final-breadcrumb/')
+  return {
+    setup() {
+      return { args }
+    },
+    components: { NavBreadcrumb },
+    template: '<nav-breadcrumb />',
+  }
+}
+
+export const MultipleLevelsRouteWithSlashEnding = Template2.bind({})
+
+function Template3(args) {
+  router.push('/parent-1/parent-2/final-breadcrumb')
+  return {
+    setup() {
+      return { args }
+    },
+    components: { NavBreadcrumb },
+    template: '<nav-breadcrumb />',
+  }
+}
+
+export const MultipleLevelsRouteNoSlashEnding = Template3.bind({})
+
+function Template4(args) {
+  router.push('/events/upcoming-events/la-région-centrale-10-20-23-screening-03-08-24')
   return {
     setup() {
       return { args }
@@ -25,28 +59,33 @@ function Template(args) {
   }
 }
 
-// Legacy breadcrumb (Values entered at page-level)
-export const Default = Template.bind({})
-Default.args = {
-  to: '/about/news',
-  title: 'Jane Doe',
-  parentTitle: 'Parent',
+export const MultipleLevelsWithRouteTitle = Template4.bind({})
+
+export const MultipleLevelsWithPropTitle = Template4.bind({})
+MultipleLevelsWithPropTitle.args = {
+  title: 'Breadcrumb Title Passed by Prop',
 }
 
-// All breadcrumbs generated from route
-export const MultipleNesting = Template.bind({})
-MultipleNesting.args = {
-  to: '/events/upcoming-events/la-région-centrale-10-20-23-screening-03-08-24',
+function Template5(args) {
+  router.push('/explore-collections/watch-and-listen-online/ktla-collection/national-and-local-politics/ktla-news-demo-article')
+  return {
+    setup() {
+      return { args }
+    },
+    components: { NavBreadcrumb },
+    template: '<nav-breadcrumb v-bind="args" />',
+  }
 }
 
-// All breadcrumbs generated from route
-export const MultipleNestingCollapsed = Template.bind({})
-MultipleNestingCollapsed.args = {
-  to: '/explore-collections/watch-and-listen-online/ktla-collection/national-and-local-politics/ktla-news-demo-article',
+export const CollapsedLevelsWithRouteTitle = Template5.bind({})
+
+export const CollapsedLevelsWithPropTitle = Template5.bind({})
+CollapsedLevelsWithPropTitle.args = {
+  title: 'Breadcrumb Title Passed by Prop',
 }
 
-function TemplateFTVA(args) {
-  router.push(args.to)
+function Template6(args) {
+  router.push('/watch-and-listen-online/senator-john-f.-kennedy-gives-press-conference-in-los-angeles')
   return {
     provide() {
       return {
@@ -61,10 +100,9 @@ function TemplateFTVA(args) {
   }
 }
 
-// FTVA Event: Using title from Craft data
-// to generate final breadcrumb
-export const FTVA = TemplateFTVA.bind({})
-FTVA.args = {
-  to: '/watch-and-listen-online/senator-john-f.-kennedy-gives-press-conference-in-los-angeles',
-  title: 'Senator John F. Kennedy: "Press Conference" in Los Angeles?'
+export const FTVATheme = Template6.bind({})
+
+export const FTVAThemeWithPropTitle = Template6.bind({})
+FTVAThemeWithPropTitle.args = {
+  title: 'Breadcrumb Title Passed by Prop',
 }

From e82cfe75821c34319a291c0623c7f7cfd4e3748e Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Tue, 24 Sep 2024 16:52:11 +0000
Subject: [PATCH 11/20] chore(release): set `package.json` to 3.21.1 [skip ci]

## [3.21.1](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.21.0...v3.21.1) (2024-09-24)

### Bug Fixes

* APPS-2947 Update NavBreadcrumb logic to display route title or prop title ([#616](https://github.com/UCLALibrary/ucla-library-website-components/issues/616)) ([cba8af6](https://github.com/UCLALibrary/ucla-library-website-components/commit/cba8af6b661b1dd283a834df4983da882c0776f4))
---
 CHANGELOG.md | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 26af1c474..ddf3836ee 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## [3.21.1](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.21.0...v3.21.1) (2024-09-24)
+
+
+### Bug Fixes
+
+* APPS-2947 Update NavBreadcrumb logic to display route title or prop title ([#616](https://github.com/UCLALibrary/ucla-library-website-components/issues/616)) ([cba8af6](https://github.com/UCLALibrary/ucla-library-website-components/commit/cba8af6b661b1dd283a834df4983da882c0776f4))
+
 # [3.21.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.20.0...v3.21.0) (2024-09-24)
 
 
diff --git a/package.json b/package.json
index 31f0e6c3a..fd59a4150 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "ucla-library-website-components",
   "type": "module",
   "private": false,
-  "version": "3.21.0",
+  "version": "3.21.1",
   "main": "./dist/ucla-library-website-components.umd.cjs",
   "module": "./dist/ucla-library-website-components.js",
   "style": "./dist/style.css",

From 2d68746c7e57a5fd5fb351540d97196025536358 Mon Sep 17 00:00:00 2001
From: Jess <jessica.divers@gmail.com>
Date: Tue, 24 Sep 2024 10:48:50 -0700
Subject: [PATCH 12/20] feat: APPS-2957 Create FTVA Pullquote (#617)

* feat: ftva pull-quote

* chore: lint

* fix: font weight, non italic

* fix: bolder bold inside pullquote

* fix: font weight

* fix: add 12px

---------

Co-authored-by: Jess Divers <jessica.divers@library.ucla.edu>
Co-authored-by: Parinita Mulak <pghorpade@library.ucla.edu>
---
 src/lib-components/PullQuote.vue    | 102 ++++++----------------------
 src/stories/PullQuote.stories.js    |  43 ++++++++++++
 src/styles/default/_pull-quote.scss |  66 ++++++++++++++++++
 src/styles/ftva/_pull-quote.scss    |  39 +++++++++++
 4 files changed, 167 insertions(+), 83 deletions(-)
 create mode 100644 src/styles/default/_pull-quote.scss
 create mode 100644 src/styles/ftva/_pull-quote.scss

diff --git a/src/lib-components/PullQuote.vue b/src/lib-components/PullQuote.vue
index 13157e044..86687f366 100644
--- a/src/lib-components/PullQuote.vue
+++ b/src/lib-components/PullQuote.vue
@@ -1,27 +1,27 @@
-<script>
-// COMPONENTS
+<script lang="ts" setup>
+import { computed } from 'vue'
 import RichText from './RichText.vue'
+import { useTheme } from '@/composables/useTheme'
 
-export default {
-  name: 'PullQuote',
-  components: {
-    RichText,
+const { text, attribution } = defineProps({
+  text: {
+    type: String,
+    default: '',
   },
-  props: {
-    text: {
-      type: String,
-      default: '',
-    },
-    attribution: {
-      type: String,
-      default: '',
-    },
+  attribution: {
+    type: String,
+    default: '',
   },
-}
+})
+
+const theme = useTheme()
+const classes = computed(() => {
+  return ['pull-quote', theme?.value || '']
+})
 </script>
 
 <template>
-  <div class="pull-quote">
+  <div :class="classes">
     <RichText v-if="text" class="quote" :rich-text-content="text" />
     <div v-if="attribution" class="attribution-block">
       <span class="dash">—</span>
@@ -31,70 +31,6 @@ export default {
 </template>
 
 <style lang="scss" scoped>
-.pull-quote {
-    background-color: var(--color-white);
-    max-width: var(--container-width);
-    text-align: left;
-    font-family: var(--font-primary);
-    font-size: 24px;
-    font-style: italic;
-    font-weight: 600;
-    line-height: 150%;
-    letter-spacing: 0.01em;
-    color: var(--color-primary-blue-03);
-    border-left: 4px solid var(--color-default-cyan-03);
-    border-radius: 2px;
-    padding: 24px var(--spacing-text-left);
-    --spacing-text-left: 64px;
-    --container-width: $container-m-text + px;
-
-    :deep(.rich-text) {
-        max-width: none;
-        margin: 0;
-        padding-right: 0;
-    }
-
-    :deep(div),
-    :deep(p) {
-        color: var(--color-primary-blue-03);
-        font-size: 24px;
-        font-style: italic;
-        font-weight: 600;
-        line-height: 150%;
-    }
-
-    :deep(.parsed-content) {
-        margin-bottom: 0;
-    }
-
-    // Breakpoints
-    @media #{$small} {
-        --spacing-text-left: 24px;
-        --container-width: 100%;
-    }
-
-    .attribution-block {
-        padding-top: 24px;
-    }
-
-    .dash {
-        font-size: 48px;
-        font-style: normal;
-        font-weight: 300;
-        color: var(--color-secondary-grey-05);
-        position: absolute;
-        height: 58px;
-    }
-
-    .attribution {
-        font-weight: 400;
-        font-size: 20px;
-        font-style: normal;
-        line-height: 140%;
-        align-items: center;
-        text-transform: uppercase;
-        color: var(--color-secondary-grey-05);
-        margin-left: 50px;
-    }
-}
+@import "@/styles/default/_pull-quote.scss";
+@import "@/styles/ftva/_pull-quote.scss";
 </style>
diff --git a/src/stories/PullQuote.stories.js b/src/stories/PullQuote.stories.js
index 4a421e8f5..6b1b7355b 100644
--- a/src/stories/PullQuote.stories.js
+++ b/src/stories/PullQuote.stories.js
@@ -1,3 +1,4 @@
+import { computed } from 'vue'
 import PullQuote from '../lib-components/PullQuote'
 
 export default {
@@ -46,3 +47,45 @@ export function NoAttribution() {
     `,
   }
 }
+
+export function FTVADefault() {
+  return {
+    data() {
+      return {
+        ...mock,
+      }
+    },
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
+    components: { PullQuote },
+    template: `
+        <pull-quote
+            :text="text"
+            :attribution="attribution"
+        />
+    `,
+  }
+}
+export function FTVADefaultNoAttribution() {
+  return {
+    data() {
+      return {
+        ...mock,
+      }
+    },
+    provide() {
+      return {
+        theme: computed(() => 'ftva'),
+      }
+    },
+    components: { PullQuote },
+    template: `
+        <pull-quote
+            :text="text"
+        />
+    `,
+  }
+}
diff --git a/src/styles/default/_pull-quote.scss b/src/styles/default/_pull-quote.scss
new file mode 100644
index 000000000..485139ed9
--- /dev/null
+++ b/src/styles/default/_pull-quote.scss
@@ -0,0 +1,66 @@
+.pull-quote {
+    background-color: var(--color-white);
+    max-width: var(--container-width);
+    text-align: left;
+    font-family: var(--font-primary);
+    font-size: 24px;
+    font-style: italic;
+    font-weight: 600;
+    line-height: 150%;
+    letter-spacing: 0.01em;
+    color: var(--color-primary-blue-03);
+    border-left: 4px solid var(--color-default-cyan-03);
+    border-radius: 2px;
+    padding: 24px var(--spacing-text-left);
+    --spacing-text-left: 64px;
+    --container-width: $container-m-text + px;
+
+    :deep(.rich-text) {
+        max-width: none;
+        margin: 0;
+        padding-right: 0;
+    }
+
+    :deep(div),
+    :deep(p) {
+        color: var(--color-primary-blue-03);
+        font-size: 24px;
+        font-style: italic;
+        font-weight: 600;
+        line-height: 150%;
+    }
+
+    :deep(.parsed-content) {
+        margin-bottom: 0;
+    }
+
+    // Breakpoints
+    @media #{$small} {
+        --spacing-text-left: 24px;
+        --container-width: 100%;
+    }
+
+    .attribution-block {
+        padding-top: 24px;
+    }
+
+    .dash {
+        font-size: 48px;
+        font-style: normal;
+        font-weight: 300;
+        color: var(--color-secondary-grey-05);
+        position: absolute;
+        height: 58px;
+    }
+
+    .attribution {
+        font-weight: 400;
+        font-size: 20px;
+        font-style: normal;
+        line-height: 140%;
+        align-items: center;
+        text-transform: uppercase;
+        color: var(--color-secondary-grey-05);
+        margin-left: 50px;
+    }
+}
\ No newline at end of file
diff --git a/src/styles/ftva/_pull-quote.scss b/src/styles/ftva/_pull-quote.scss
new file mode 100644
index 000000000..34ac8fafc
--- /dev/null
+++ b/src/styles/ftva/_pull-quote.scss
@@ -0,0 +1,39 @@
+.ftva.pull-quote {
+    --spacing-text-left: 36px;
+    padding: 20px var(--spacing-text-left);
+    border-color: $grey-blue;
+
+    :deep(div),
+    :deep(p) {
+        @include ftva-card-title-1;
+        color: $accent-blue;
+        line-height: 140%;
+        font-weight: 500;
+        font-style: normal;
+    }
+    :deep(strong){
+        font-weight: 600;
+    }
+
+    :deep(.parsed-content) {
+        margin-bottom: 0;
+    }
+    
+    .attribution-block {
+        padding-top: 12px;
+        ::before {
+            content: url('ucla-library-design-tokens/assets/svgs/icon-ftva-diamond.svg');
+            padding-right: 8px;
+            filter: invert(98%) sepia(131%) saturate(1029%) hue-rotate(196deg) brightness(130%) contrast(68%);
+        }
+        .attribution {
+            margin-left: 0px;
+            @include ftva-subtitle-1;
+            color: $subtitle-grey;
+        }
+    }
+    // hide default dash for ftva
+    .dash {
+        display: none;
+    }
+}
\ No newline at end of file

From 04b1bff31c3c77332bf76305402bb8b18f96b2a2 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Tue, 24 Sep 2024 17:49:38 +0000
Subject: [PATCH 13/20] chore(release): set `package.json` to 3.22.0 [skip ci]

# [3.22.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.21.1...v3.22.0) (2024-09-24)

### Features

* APPS-2957 Create FTVA Pullquote ([#617](https://github.com/UCLALibrary/ucla-library-website-components/issues/617)) ([65577e8](https://github.com/UCLALibrary/ucla-library-website-components/commit/65577e81ea76682975ab087c345036030160a00b))
---
 CHANGELOG.md | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ddf3836ee..b4d1b771c 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [3.22.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.21.1...v3.22.0) (2024-09-24)
+
+
+### Features
+
+* APPS-2957 Create FTVA Pullquote ([#617](https://github.com/UCLALibrary/ucla-library-website-components/issues/617)) ([65577e8](https://github.com/UCLALibrary/ucla-library-website-components/commit/65577e81ea76682975ab087c345036030160a00b))
+
 ## [3.21.1](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.21.0...v3.21.1) (2024-09-24)
 
 
diff --git a/package.json b/package.json
index fd59a4150..3a0a32461 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "ucla-library-website-components",
   "type": "module",
   "private": false,
-  "version": "3.21.1",
+  "version": "3.22.0",
   "main": "./dist/ucla-library-website-components.umd.cjs",
   "module": "./dist/ucla-library-website-components.js",
   "style": "./dist/style.css",

From a125bfd1df5ad69b33db6fc8fa2e3a0c633bd596 Mon Sep 17 00:00:00 2001
From: Tinuola 'Tinu' Awopetu <24995224+tinuola@users.noreply.github.com>
Date: Wed, 25 Sep 2024 16:07:40 -0700
Subject: [PATCH 14/20] fix: APPS-2982 Remove excess padding values (#620)

* fix: remove excess padding values

* adjust responsiveness of fix

---------

Co-authored-by: tinuola <tinuola@users.noreply.github.com>
---
 .../TwoColLayoutWStickySideBar.vue             | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/lib-components/TwoColLayoutWStickySideBar.vue b/src/lib-components/TwoColLayoutWStickySideBar.vue
index 17e350d96..d827ef86a 100644
--- a/src/lib-components/TwoColLayoutWStickySideBar.vue
+++ b/src/lib-components/TwoColLayoutWStickySideBar.vue
@@ -74,9 +74,8 @@ onMounted(() => {
     width: 67%;
 
     .primary-section-wrapper {
-      padding-left: 0px;
       margin: var(--space-2xl) auto;
-      padding: 0 var(--unit-gutter);
+      padding: 0 var(--unit-gutter) 0 0;
     }
   }
 
@@ -89,7 +88,6 @@ onMounted(() => {
     right: 0;
     padding-top: var(--space-2xl);
     padding-bottom: 40px;
-    padding-right: var(--unit-gutter);
 
     .sidebar-content-wrapper {
       position: sticky;
@@ -111,10 +109,18 @@ onMounted(() => {
 @media (max-width: 1200px) {
   .two-column {
     padding-right: var(--unit-gutter);
-  }
 
-  .two-column>.primary-column {
-    width: 62%;
+    .primary-column {
+      width: 62%;
+
+      .primary-section-wrapper {
+        padding-left: var(--unit-gutter);
+      }
+    }
+
+    .sidebar-column {
+      padding-right: var(--unit-gutter);
+    }
   }
 }
 

From ddcf71c3b317f0bc65ff0717e39dd73f046ef629 Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Wed, 25 Sep 2024 23:08:28 +0000
Subject: [PATCH 15/20] chore(release): set `package.json` to 3.22.1 [skip ci]

## [3.22.1](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.22.0...v3.22.1) (2024-09-25)

### Bug Fixes

* APPS-2982 Remove excess padding values ([#620](https://github.com/UCLALibrary/ucla-library-website-components/issues/620)) ([d895d3c](https://github.com/UCLALibrary/ucla-library-website-components/commit/d895d3cb2d3e0198bf3bca4b5c2cd4232f60e6a5))
---
 CHANGELOG.md | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b4d1b771c..e1a9b447b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+## [3.22.1](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.22.0...v3.22.1) (2024-09-25)
+
+
+### Bug Fixes
+
+* APPS-2982 Remove excess padding values ([#620](https://github.com/UCLALibrary/ucla-library-website-components/issues/620)) ([d895d3c](https://github.com/UCLALibrary/ucla-library-website-components/commit/d895d3cb2d3e0198bf3bca4b5c2cd4232f60e6a5))
+
 # [3.22.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.21.1...v3.22.0) (2024-09-24)
 
 
diff --git a/package.json b/package.json
index 3a0a32461..0a83e6894 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "ucla-library-website-components",
   "type": "module",
   "private": false,
-  "version": "3.22.0",
+  "version": "3.22.1",
   "main": "./dist/ucla-library-website-components.umd.cjs",
   "module": "./dist/ucla-library-website-components.js",
   "style": "./dist/style.css",

From ad7dc0edab74b85d31ce28b4c77a20d885840ffa Mon Sep 17 00:00:00 2001
From: Jess <jessica.divers@gmail.com>
Date: Wed, 25 Sep 2024 16:58:07 -0700
Subject: [PATCH 16/20] chore: APPS-2962 move styles from page to story (#619)

* chore: move styles from page to story

* fix: tweak gap for 2 cards

---------

Co-authored-by: Jess Divers <jessica.divers@library.ucla.edu>
Co-authored-by: Tinuola 'Tinu' Awopetu <24995224+tinuola@users.noreply.github.com>
---
 src/styles/ftva/_section-teaser-card.scss | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/styles/ftva/_section-teaser-card.scss b/src/styles/ftva/_section-teaser-card.scss
index e3fd5c1ab..0e4a1209d 100644
--- a/src/styles/ftva/_section-teaser-card.scss
+++ b/src/styles/ftva/_section-teaser-card.scss
@@ -4,7 +4,13 @@
     align-items: flex-start;
     overflow-y: auto;
     padding-top: 25px;
+    gap: var(--space-xl) 20px;
     scrollbar-color: $grey-blue $white;
+    &:has(> :last-child:nth-child(3)) {
+        /* if section has 3 elements */
+        justify-content: space-between;
+        gap: var(--space-xl) 16px;
+    }
 
     .card {
         flex-basis: calc((100% / 3) - 22px);

From 51135870fcc0e07cac4d44ad00cdece6ecb80aa7 Mon Sep 17 00:00:00 2001
From: Jess <jessica.divers@gmail.com>
Date: Thu, 26 Sep 2024 17:28:29 -0700
Subject: [PATCH 17/20] 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 <jessica.divers@library.ucla.edu>
---
 src/lib-components/CardMeta.vue |  24 +++++++-
 src/stories/CardMeta.stories.js | 105 +++++++++++++++++++++++++++++++-
 src/styles/ftva/_card-meta.scss |  42 +++++++++++--
 3 files changed, 164 insertions(+), 7 deletions(-)

diff --git a/src/lib-components/CardMeta.vue b/src/lib-components/CardMeta.vue
index 4c97772a6..56107bb0e 100644
--- 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
index 1999ee134..0927261cb 100644
--- 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
index 2f3db1b1a..b7b193903 100644
--- 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;
+      }
+    }
+  }
+}
\ No newline at end of file

From 9fea87ef898ce42aaf40d0b66346d11af088c57f Mon Sep 17 00:00:00 2001
From: semantic-release-bot <semantic-release-bot@martynus.net>
Date: Fri, 27 Sep 2024 00:29:17 +0000
Subject: [PATCH 18/20] chore(release): set `package.json` to 3.23.0 [skip ci]

# [3.23.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.22.1...v3.23.0) (2024-09-27)

### Features

* Apps-2951 card meta changes for article detail page ([#618](https://github.com/UCLALibrary/ucla-library-website-components/issues/618)) ([ace6bfe](https://github.com/UCLALibrary/ucla-library-website-components/commit/ace6bfed531e1ac7a4ba39852adfb4712b994074))
---
 CHANGELOG.md | 7 +++++++
 package.json | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index e1a9b447b..6e1c98675 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,10 @@
+# [3.23.0](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.22.1...v3.23.0) (2024-09-27)
+
+
+### Features
+
+* Apps-2951 card meta changes for article detail page ([#618](https://github.com/UCLALibrary/ucla-library-website-components/issues/618)) ([ace6bfe](https://github.com/UCLALibrary/ucla-library-website-components/commit/ace6bfed531e1ac7a4ba39852adfb4712b994074))
+
 ## [3.22.1](https://github.com/UCLALibrary/ucla-library-website-components/compare/v3.22.0...v3.22.1) (2024-09-25)
 
 
diff --git a/package.json b/package.json
index 0a83e6894..c261f911a 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "ucla-library-website-components",
   "type": "module",
   "private": false,
-  "version": "3.22.1",
+  "version": "3.23.0",
   "main": "./dist/ucla-library-website-components.umd.cjs",
   "module": "./dist/ucla-library-website-components.js",
   "style": "./dist/style.css",

From e9bf3e51ee96c83c65e086ac06ce0f7e37891705 Mon Sep 17 00:00:00 2001
From: pghorpade <pghorpade@library.ucla.edu>
Date: Fri, 20 Sep 2024 08:07:24 -0700
Subject: [PATCH 19/20] fix: hydration error and undefined errors by adding
 watchers

---
 src/styles/ftva/_section-wrapper.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/styles/ftva/_section-wrapper.scss b/src/styles/ftva/_section-wrapper.scss
index 8df4be07f..d3648230f 100644
--- a/src/styles/ftva/_section-wrapper.scss
+++ b/src/styles/ftva/_section-wrapper.scss
@@ -92,4 +92,4 @@
             }
         }
     }
-}
+}
\ No newline at end of file

From 74ae7f27f1ce20a444633a29f776a7afa0b6590f Mon Sep 17 00:00:00 2001
From: pghorpade <pghorpade@library.ucla.edu>
Date: Thu, 26 Sep 2024 18:32:03 -0700
Subject: [PATCH 20/20] fix: lint errors

---
 src/lib-components/HeaderSmart.vue  | 6 +++---
 src/lib-components/IconWithLink.vue | 1 +
 src/lib-components/NavPrimary.vue   | 4 ++--
 src/lib-components/NavSecondary.vue | 4 ++--
 src/stories/HeaderSmart.stories.js  | 3 ---
 5 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/lib-components/HeaderSmart.vue b/src/lib-components/HeaderSmart.vue
index 795e245c3..64bdc70cd 100644
--- a/src/lib-components/HeaderSmart.vue
+++ b/src/lib-components/HeaderSmart.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { computed, onMounted, ref, watch, markRaw } from 'vue'
-import { useGlobalStore } from '@/stores/GlobalStore'
+import { markRaw, onMounted, ref, watch } from 'vue'
 import { useWindowSize } from '@vueuse/core'
 import { storeToRefs } from 'pinia'
+import { useGlobalStore } from '@/stores/GlobalStore'
 import SiteBrandBar from '@/lib-components/SiteBrandBar'
 import HeaderMainResponsive from '@/lib-components/HeaderMainResponsive'
 import HeaderMain from '@/lib-components/HeaderMain'
@@ -34,7 +34,7 @@ onMounted(() => {
     isMobile.value = newWidth <= 1200
     currentHeader.value = markRaw(isMobile.value ? HeaderMainResponsive : HeaderMain)
   },
-    { immediate: true })
+  { immediate: true })
 
   watch(
     header,
diff --git a/src/lib-components/IconWithLink.vue b/src/lib-components/IconWithLink.vue
index 6a9e5d114..065e1eeaa 100644
--- a/src/lib-components/IconWithLink.vue
+++ b/src/lib-components/IconWithLink.vue
@@ -1,6 +1,7 @@
 <script>
 import { defineAsyncComponent } from 'vue'
 import SmartLink from '@/lib-components/SmartLink.vue'
+
 export default {
   name: 'IconWithLink',
   components: {
diff --git a/src/lib-components/NavPrimary.vue b/src/lib-components/NavPrimary.vue
index 5a5a5b773..f16303162 100644
--- a/src/lib-components/NavPrimary.vue
+++ b/src/lib-components/NavPrimary.vue
@@ -7,10 +7,11 @@ import SvgIconCaretDown from 'ucla-library-design-tokens/assets/svgs/icon-caret-
 import { computed, onMounted, ref, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import type { PropType } from 'vue'
+
+import { useWindowSize } from '@vueuse/core' // Import useWindowSize from vueuse
 import SmartLink from '@/lib-components/SmartLink.vue'
 import ButtonLink from '@/lib-components/ButtonLink.vue'
 import NavMenuItem from '@/lib-components/NavMenuItem.vue'
-import { useWindowSize } from '@vueuse/core' // Import useWindowSize from vueuse
 import { useTheme } from '@/composables/useTheme'
 
 import type { NavPrimaryItemType } from '@/types/types'
@@ -45,7 +46,6 @@ watch(
   { deep: true, immediate: true }
 )
 
-
 const route = useRoute()
 // Refs to track menu states
 const isOpened = ref(false) // tracks if main menu is open
diff --git a/src/lib-components/NavSecondary.vue b/src/lib-components/NavSecondary.vue
index c4656f4da..ad9cc8975 100644
--- a/src/lib-components/NavSecondary.vue
+++ b/src/lib-components/NavSecondary.vue
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 // components
 import SvgLogoUclaLibrary from 'ucla-library-design-tokens/assets/svgs/logo-library.svg'
-import { computed, ref, watch, shallowRef } from 'vue'
+import { computed, ref, shallowRef, watch } from 'vue'
 import type { PropType } from 'vue'
 import SmartLink from '@/lib-components/SmartLink.vue'
 import ButtonLink from '@/lib-components/ButtonLink.vue'
@@ -46,7 +46,7 @@ const classes = computed(() => {
 })
 const parsedLinks = computed(() => {
   return (secondaryItems.value || []).map((obj) => {
-    console.log("nav-secondary:", JSON.stringify(obj))
+    console.log('nav-secondary:', JSON.stringify(obj))
     let support = 'list-item'
     if (obj?.classes)
       support = `${support} ${obj?.classes}`
diff --git a/src/stories/HeaderSmart.stories.js b/src/stories/HeaderSmart.stories.js
index 992ae7b85..8e42191c2 100644
--- a/src/stories/HeaderSmart.stories.js
+++ b/src/stories/HeaderSmart.stories.js
@@ -1,15 +1,12 @@
 // Storybook default settings
 import { useGlobalStore } from '@/stores/GlobalStore'
 import HeaderSmart from '@/lib-components/HeaderSmart'
-import { onMounted, ref } from 'vue'
 
 export default {
   title: 'GLOBAL / Header Smart',
   component: HeaderSmart,
 }
 
-
-
 const mock = {
   secondary: [
     {