feature: MetaPanel, BlockAccordion, EduLessonPage

apps/vue-storybook/.storybook/preview.ts

@@ -6,6 +6,7 @@ import { createRouter, createWebHashHistory, type RouterOptions } from 'vue-rout
 import { Swiper, SwiperSlide } from 'swiper/vue'
 import vClickOutside from 'click-outside-vue3'
 import VueCompareImage from 'vue3-compare-image'
+import { BindOncePlugin } from 'vue-bind-once'
 import { createPinia } from 'pinia'
 import filters from '@explorer-1/vue/src/utils/filters'
 import '@explorer-1/common/src/scss/styles-with-fonts.scss'
@@ -38,6 +39,7 @@ setup((app, _context) => {
   app.use(router)
   app.use(vClickOutside)
   app.use(VueCompareImage)
+  app.use(BindOncePlugin)
   app.component('Swiper', Swiper)
   app.component('SwiperSlide', SwiperSlide)
   app.config.globalProperties.$filters = filters

apps/vue-storybook/package.json

@@ -44,6 +44,7 @@
     "mitt": "^3.0.1",
     "swiper": "^11.1.3",
     "vue": "^3.2.47",
+    "vue-bind-once": "^0.2.1",
     "vue3-compare-image": "^1.2.5"
   },
   "devDependencies": {

packages/common/src/scss/_grid.scss

@@ -6,27 +6,27 @@
 
   .MixedBleedGrid {
     @screen sm {
-      grid-template-columns: [bleed-start] auto [container-start] 53.33px [indent-col-2] 53.33px [indent-col-3] 533.33px [container-end] auto [bleed-end];
+      grid-template-columns: [bleed-start] 1fr [container-start] 53.33px [indent-col-2] 53.33px [indent-col-3] 533.33px [container-end] 1fr [bleed-end];
       @apply grid gap-0;
     }
 
     @screen md {
-      grid-template-columns: [bleed-start] auto [container-start] 64px [indent-col-2] 64px [indent-col-3] 640px [container-end] auto [bleed-end];
+      grid-template-columns: [bleed-start] 1fr [container-start] 64px [indent-col-2] 64px [indent-col-3] 640px [container-end] 1fr [bleed-end];
       @apply grid;
     }
 
     @screen lg {
-      grid-template-columns: [bleed-start] auto [container-start] 85.33px [indent-col-2] 85.33px [indent-col-3] 853.33px [container-end] auto [bleed-end];
+      grid-template-columns: [bleed-start] 1fr [container-start] 85.33px [indent-col-2] 85.33px [indent-col-3] 853.33px [container-end] 1fr [bleed-end];
       @apply grid;
     }
 
     @screen xl {
-      grid-template-columns: [bleed-start] auto [container-start] 108px [indent-col-2] 108px [indent-col-3] 1088px [container-end] auto [bleed-end];
+      grid-template-columns: [bleed-start] 1fr [container-start] 108px [indent-col-2] 108px [indent-col-3] 1088px [container-end] 1fr [bleed-end];
       @apply grid;
     }
 
     @screen 2xl {
-      grid-template-columns: [bleed-start] auto [container-start] 110px [indent-col-2] 110px [indent-col-3] 1100px [container-end] auto [bleed-end];
+      grid-template-columns: [bleed-start] 1fr [container-start] 110px [indent-col-2] 110px [indent-col-3] 1100px [container-end] 1fr [bleed-end];
       @apply grid;
     }
 
@@ -42,6 +42,10 @@
       grid-column-start: container-start;
     }
 
+    .col-start-indent-col-1 {
+      grid-column-start: indent-col-1;
+    }
+
     .col-start-indent-col-2 {
       grid-column-start: indent-col-2;
     }

packages/vue/package.json

@@ -38,6 +38,7 @@
     "tailwindcss": "^3.4.3",
     "twitter-widgets": "^2.0.0",
     "vue": "^3.4.21",
+    "vue-bind-once": "^0.2.1",
     "vue-observe-visibility": "^1.0.0",
     "vue3-compare-image": "^1.2.5"
   },

packages/vue/src/components/BaseAccordionItem/BaseAccordionItem.stories.js

@@ -0,0 +1,15 @@
+import BaseAccordionItem from './BaseAccordionItem.vue'
+import { BlockStreamfieldTruncatedData } from '../BlockStreamfield/BlockStreamfield.stories'
+export default {
+  title: 'Components/Base/BaseAccordionItem',
+  component: BaseAccordionItem
+}
+
+// stories
+export const BaseStory = {
+  name: 'BaseAccordionItem',
+  args: {
+    headingLevel: 'h3',
+    item: { title: 'Title for the accordion', body: BlockStreamfieldTruncatedData.body }
+  }
+}

packages/vue/src/components/BaseAccordionItem/BaseAccordionItem.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import { AccordionItemObject } from './../../interfaces.ts'
+import { uniqueId } from 'lodash'
+import IconPlus from './../Icons/IconPlus.vue'
+import BlockStreamfield from './../BlockStreamfield/BlockStreamfield.vue'
+
+export interface BaseAccordionItemProps {
+  headingLevel?: string
+  item: AccordionItemObject
+  backgroundClass?: string
+}
+
+// define props
+const props = withDefaults(defineProps<BaseAccordionItemProps>(), {
+  headingLevel: 'h2',
+  backgroundClass: undefined,
+  item(): AccordionItemObject {
+    return {
+      title: undefined,
+      body: undefined
+    }
+  }
+})
+
+const { headingLevel, item } = reactive(props)
+
+const ariaExpanded = ref(false)
+const isHidden = ref(true)
+const itemId = ref(uniqueId())
+
+const panelId = computed(() => {
+  return `block_accordion_panel_${itemId.value}`
+})
+
+const headingId = computed(() => {
+  return `block_accordion_heading_${itemId.value}`
+})
+
+const handleClick = () => {
+  ariaExpanded.value = !ariaExpanded.value
+  isHidden.value = !isHidden.value
+  if (isHidden.value) {
+    emit('accordionItemClosed')
+  } else {
+    emit('accordionItemOpened')
+  }
+}
+
+const emit = defineEmits(['accordionItemOpened', 'accordionItemClosed'])
+</script>
+<template>
+  <div
+    class="BaseAccordionItem"
+    :class="{ '-open': !isHidden }"
+  >
+    <div class="BaseAccordionHeader">
+      <slot name="header">
+        <div
+          v-if="headingLevel && item"
+          class="border-b border-gray-light-mid"
+        >
+          <component :is="headingLevel">
+            <button
+              v-bind-once="{ id: headingId, 'aria-controls': panelId }"
+              :aria-expanded="ariaExpanded"
+              class="BaseAccordion-trigger group flex flex-nowrap justify-between items-center w-full can-hover:hover:underline text-body-lg"
+              @click="handleClick()"
+            >
+              <slot name="heading">
+                <div class="pointer-events-none text-left p-4 xl:py-6">
+                  {{ item.title }}
+                </div>
+              </slot>
+              <span
+                class="BaseAccordion-icon pointer-events-none text-xs text-action flex-shrink-0 transform transition-transform"
+                :class="{ 'rotate-45': !isHidden }"
+              >
+                <IconPlus />
+              </span>
+            </button>
+          </component>
+        </div>
+      </slot>
+    </div>
+    <div
+      v-show="!isHidden"
+      class="BaseAccordionContent"
+    >
+      <slot>
+        <div
+          v-bind-once="{ id: panelId, 'aria-labelledby': headingId }"
+          role="region"
+          class="BaseAccordion-panel"
+        >
+          <slot name="panelContents">
+            <div class="px-4 pb-8">
+              <BlockStreamfield
+                :data="item.body"
+                variant="fluid"
+              />
+            </div>
+          </slot>
+        </div>
+      </slot>
+    </div>
+  </div>
+</template>

packages/vue/src/components/BaseButton/BaseButton.vue

@@ -2,7 +2,7 @@
 import { defineComponent } from 'vue'
 
 interface Variants {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const variants: Variants = {
@@ -11,6 +11,11 @@ export const variants: Variants = {
   dark: '-dark',
   social: '-social'
 }
+export const colors: Variants = {
+  primary: '-color-primary',
+  secondary: '-color-secondary',
+  action: '-color-action'
+}
 
 export default defineComponent({
   name: 'BaseButton',
@@ -21,6 +26,12 @@ export default defineComponent({
       default: 'primary',
       validator: (prop: string): boolean => Object.keys(variants).includes(prop)
     },
+    color: {
+      type: String,
+      required: false,
+      default: 'primary',
+      validator: (prop: string): boolean => Object.keys(colors).includes(prop)
+    },
     compact: {
       type: Boolean,
       default: false,

packages/vue/src/components/BaseImage/BaseImage.vue

@@ -5,7 +5,7 @@ import type { PropType } from 'vue'
 export type ImageLoader = 'lazy' | 'eager' | undefined
 
 interface ObjectFitClasses {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const objectFitClasses: ObjectFitClasses = {

packages/vue/src/components/BaseImagePlaceholder/BaseImagePlaceholder.vue

@@ -2,7 +2,7 @@
 import { defineComponent } from 'vue'
 
 interface AspectRatios {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const aspectRatios: AspectRatios = {

packages/vue/src/components/BaseLink/BaseLink.vue

@@ -4,7 +4,7 @@ import { eventBus } from './../../utils/eventBus'
 import MixinAnimationCaret from './../MixinAnimationCaret/MixinAnimationCaret.vue'
 
 interface Variants {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const variants: Variants = {

packages/vue/src/components/BlockAccordion/BlockAccordion.stories.js

@@ -0,0 +1,29 @@
+import BlockAccordion from './BlockAccordion.vue'
+import { BlockStreamfieldTruncatedData } from '../BlockStreamfield/BlockStreamfield.stories'
+
+export default {
+  title: 'Components/Blocks/BlockAccordion',
+  component: BlockAccordion
+}
+
+// stories
+export const BaseStory = {
+  name: 'BlockAccordion',
+  args: {
+    headingLevel: 'h5',
+    items: [
+      {
+        title: 'Title for the accordion',
+        body: BlockStreamfieldTruncatedData.body
+      },
+      {
+        title: 'Another',
+        body: BlockStreamfieldTruncatedData.body
+      },
+      {
+        title: 'Yet another',
+        body: BlockStreamfieldTruncatedData.body
+      }
+    ]
+  }
+}

packages/vue/src/components/BlockAccordion/BlockAccordion.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { reactive } from 'vue'
+import { AccordionItemObject } from '../../interfaces'
+import BaseAccordionItem from './../BaseAccordionItem/BaseAccordionItem.vue'
+
+interface BlockAccordionProps {
+  autoClose?: boolean
+  headingLevel?: string
+  items?: AccordionItemObject[]
+}
+
+// define props
+const props = withDefaults(defineProps<BlockAccordionProps>(), {
+  autoClose: false,
+  headingLevel: 'h2',
+  items: undefined
+})
+
+const { headingLevel, items } = reactive(props)
+</script>
+<template>
+  <div class="BlockAccordion">
+    <slot>
+      <BaseAccordionItem
+        v-for="(item, index) in items"
+        :key="index"
+        :heading-level="headingLevel"
+        :item="item"
+      />
+    </slot>
+  </div>
+</template>

packages/vue/src/components/BlockHeading/BlockHeading.stories.js

@@ -1,5 +1,4 @@
 import BlockHeading from './BlockHeading.vue'
-
 export default {
   title: 'Components/Blocks/BlockHeading',
   component: BlockHeading,
@@ -10,7 +9,8 @@ export const BlockHeadingData = {
   blockType: 'HeadingBlock',
   heading: 'Heading Text',
   level: 'h2',
-  size: 'h2'
+  size: 'h2',
+  blockId: `${Math.random().toString(36).slice(2)}`
 }
 
 // stories

packages/vue/src/components/BlockHeading/BlockHeading.vue

@@ -11,22 +11,28 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from 'vue'
+import { defineComponent, type PropType } from 'vue'
+import { type HeadingLevel } from './../BaseHeading/BaseHeading.vue'
 import { getHeadingId } from '../../utils/getHeadingId'
+
 import BaseHeading from './../BaseHeading/BaseHeading.vue'
 
+export interface BlockHeadingObject {
+  blockType?: string
+  heading: HeadingLevel
+  level?: HeadingLevel
+  size?: string
+  blockId?: string
+}
+
 export default defineComponent({
   name: 'BlockHeading',
   components: {
     BaseHeading
   },
   props: {
     data: {
-      type: Object,
-      required: false
-    },
-    index: {
-      type: Number,
+      type: Object as PropType<BlockHeadingObject>,
       required: false,
       default: undefined
     },
@@ -37,7 +43,9 @@ export default defineComponent({
   },
   computed: {
     getId() {
-      return this.generateId ? getHeadingId(this.data?.heading, this.index) : undefined
+      return this.data && this.generateId
+        ? getHeadingId(this.data.heading, this.data.blockId)
+        : undefined
     }
   }
 })

packages/vue/src/components/BlockLinkCarousel/BlockLinkCarousel.vue

@@ -21,7 +21,7 @@ import BlockLinkCard from './../BlockLinkCard/BlockLinkCard.vue'
 import BlockLinkTile from './../BlockLinkTile/BlockLinkTile.vue'
 
 interface Variants {
-  [name: string]: string
+  [key: string]: string
 }
 
 export const itemTypes: Variants = {