@iqual/nuxt-icms 1.0.14 → 1.1.0

package/components/Blokkli/Timeline/Element/icms_timeline_element.svg

@@ -0,0 +1,7 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 8L9 22" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+<circle cx="9" cy="11" r="1" fill="black"/>
+<circle cx="9" cy="19" r="1" fill="black"/>
+<rect x="12.25" y="9.25" width="9.5" height="3.5" rx="1.15" stroke="black" stroke-width="1.5"/>
+<rect x="12.25" y="17.25" width="9.5" height="3.5" rx="1.15" stroke="black" stroke-width="1.5"/>
+</svg>

package/components/Blokkli/Timeline/Element/icon.svg

@@ -0,0 +1,7 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 8L9 22" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<circle cx="9" cy="11" r="1" fill="none"/>
+<circle cx="9" cy="19" r="1" fill="none"/>
+<rect x="12.25" y="9.25" width="9.5" height="3.5" rx="1.15" stroke="currentColor" stroke-width="1.5" fill="none"/>
+<rect x="12.25" y="17.25" width="9.5" height="3.5" rx="1.15" stroke="currentColor" stroke-width="1.5" fill="none"/>
+</svg>

package/components/Blokkli/Timeline/Element/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <ParagraphTimelineElement v-bind="props" :blokkliData="blokkliData" />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsTimelineElementFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsTimelineElementFragment>()
+
+const blokkliData = defineBlokkli({
+  bundle: 'icms_timeline_element',
+  globalOptions: ['reverseColumns'],
+})
+</script>

package/components/Blokkli/Timeline/Layout/icms_layout_timeline.svg

@@ -0,0 +1,16 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_286_20)">
+<rect x="0.75" y="4.75" width="24.5" height="24.5" rx="1.25" stroke="black" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M26 27H27C28.1046 27 29 26.1046 29 25V3C29 1.89543 28.1046 1 27 1H5C3.89543 1 3 1.89543 3 3V4" stroke="black" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M7 10L7 24" stroke="black" stroke-width="1.5" stroke-linecap="round"/>
+<circle cx="7" cy="13" r="1" fill="black"/>
+<circle cx="7" cy="21" r="1" fill="black"/>
+<rect x="10.25" y="11.25" width="9.5" height="3.5" rx="1.15" stroke="black" stroke-width="1.5"/>
+<rect x="10.25" y="19.25" width="9.5" height="3.5" rx="1.15" stroke="black" stroke-width="1.5"/>
+</g>
+<defs>
+<clipPath id="clip0_286_20">
+<rect width="30" height="30" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/components/Blokkli/Timeline/Layout/icon.svg

@@ -0,0 +1,16 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_286_20)">
+<rect x="0.75" y="4.75" width="24.5" height="24.5" rx="1.25" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M26 27H27C28.1046 27 29 26.1046 29 25V3C29 1.89543 28.1046 1 27 1H5C3.89543 1 3 1.89543 3 3V4" stroke="currentColor" fill="none" stroke-width="1.5" stroke-linejoin="round"/>
+<path d="M7 10L7 24" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+<circle cx="7" cy="13" r="1" fill="none"/>
+<circle cx="7" cy="21" r="1" fill="none"/>
+<rect x="10.25" y="11.25" width="9.5" height="3.5" rx="1.15" stroke="currentColor" fill="none" stroke-width="1.5"/>
+<rect x="10.25" y="19.25" width="9.5" height="3.5" rx="1.15" stroke="currentColor" fill="none" stroke-width="1.5"/>
+</g>
+<defs>
+<clipPath id="clip0_286_20">
+<rect width="30" height="30" fill="none"/>
+</clipPath>
+</defs>
+</svg>

package/components/Blokkli/Timeline/Layout/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <ParagraphTimelineLayout v-bind="props" :blokkliData="blokkliData" />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutTimelineFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutTimelineFragment>()
+
+const blokkliData = defineBlokkli({
+  bundle: 'icms_layout_timeline',
+  globalOptions: ['spacingBottom', 'spacingTop', 'colorScheme'],
+})
+</script>

package/components/Blokkli/iFrame/icon-blokkli-option-large-spacing-bottom.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.49 12.87H5.51c-.28 0-.51-.23-.51-.51v-.99c0-.28.23-.51.51-.51H18.5c.28 0 .51.23.51.51v.99c0 .28-.23.51-.51.51Z" class="bk-option-icon-fill-strong" style="fill-rule:evenodd;stroke-width:0"/><rect width="20.01" height="5.95" x="2" y="14.29" class="bk-option-icon-fill-strong" rx=".53" ry=".53" style="stroke-width:0"/></svg>

package/components/Blokkli/iFrame/icon-blokkli-option-large-spacing-top.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.49 12.87H5.51c-.28 0-.51-.23-.51-.51v-.99c0-.28.23-.51.51-.51H18.5c.28 0 .51.23.51.51v.99c0 .28-.23.51-.51.51Z" class="bk-option-icon-fill-strong" style="fill-rule:evenodd;stroke-width:0"/><rect width="20.01" height="5.95" x="2" y="3.5" class="bk-option-icon-fill-strong" rx=".53" ry=".53" style="stroke-width:0"/></svg>

package/components/Blokkli/iFrame/icon-blokkli-option-no-spacing.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.49 12.87H5.51c-.28 0-.51-.23-.51-.51v-.99c0-.28.23-.51.51-.51H18.5c.28 0 .51.23.51.51v.99c0 .28-.23.51-.51.51Z" class="bk-option-icon-fill-strong" style="fill-rule:evenodd;stroke-width:0"/></svg>

package/components/Blokkli/iFrame/icon-blokkli-option-small-spacing-bottom.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.49 12.87H5.51c-.28 0-.51-.23-.51-.51v-.99c0-.28.23-.51.51-.51H18.5c.28 0 .51.23.51.51v.99c0 .28-.23.51-.51.51Z" class="bk-option-icon-fill-strong" style="fill-rule:evenodd;stroke-width:0"/><rect width="20.01" height="3.53" x="2" y="14.29" class="bk-option-icon-fill-strong" rx=".52" ry=".52" style="stroke-width:0"/></svg>

package/components/Blokkli/iFrame/icon-blokkli-option-small-spacing-top.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M18.49 12.87H5.51c-.28 0-.51-.23-.51-.51v-.99c0-.28.23-.51.51-.51H18.5c.28 0 .51.23.51.51v.99c0 .28-.23.51-.51.51Z" class="bk-option-icon-fill-strong" style="fill-rule:evenodd;stroke-width:0"/><rect width="20.01" height="3.53" x="2" y="5.92" class="bk-option-icon-fill-strong" rx=".52" ry=".52" style="stroke-width:0"/></svg>

package/components/Blokkli/iFrame/{Layout/index.vue → index.vue}

@@ -1,5 +1,5 @@
 <template>
-  <ParagraphIFrameLayout v-bind="props" :blokkliData="blokkliData" />
+  <ParagraphIFrame v-bind="props" :blokkliData="blokkliData" />
 </template>
 
 <script lang="ts" setup>
@@ -9,10 +9,6 @@ const props = defineProps<ParagraphIcmsLayoutIframeFragment>()
 
 const blokkliData = defineBlokkli({
   bundle: 'icms_layout_iframe',
-  globalOptions: [
-    'spacingBottom',
-    'spacingTop',
-  ],
+  globalOptions: ['textWidth', 'spacingBottom', 'spacingTop', 'colorScheme'],
 })
-
 </script>

package/components/DesignSystem/Organisms/TimelineElement.vue

@@ -0,0 +1,92 @@
+<template>
+  <DesignSystemAtomsGridRow
+    class="flex w-full shrink-0 flex-col-reverse justify-end p-0 lg:grid lg:scroll-mt-32"
+    data-timeline-element
+  >
+    <!-- Text column -->
+    <div :class="textColumnClasses">
+      <DesignSystemOrganismsContentBlock
+        :pretitle="pretitle"
+        :title="title"
+        :titleStyle="titleStyle"
+        :titleWeight="titleWeight"
+        titleClass="mb-2"
+        :subtitle="subtitle"
+        subtitleClass="font-semibold"
+        :text="text"
+        :colorScheme="colorScheme"
+        :hasDecorativeLine="false"
+      />
+      <BlokkliField
+        name="field_icms_buttons"
+        :list="buttons"
+        class="mt-6 flex flex-wrap gap-6"
+        :class="[{ droptarget: isEditing }]"
+      />
+    </div>
+
+    <!-- Media column -->
+    <div :class="mediaColumnClasses">
+      <DesignSystemMoleculesMediaSlider
+        v-if="media"
+        :media="media"
+        :colorScheme="colorScheme"
+        sliderClass="my-0"
+        imageSizes="xs:750px sm:750px md:750px lg:750px"
+        mediaClass="my-0 w-full rounded-lg overflow-hidden"
+      />
+    </div>
+  </DesignSystemAtomsGridRow>
+</template>
+
+<script lang="ts" setup>
+import type { MediaFragment } from '#graphql-operations'
+const props = defineProps<{
+  pretitle?: string
+  title?: string
+  titleStyle?: string
+  titleWeight?: string
+  subtitle?: string
+  text?: string
+  media?: (MediaFragment | null)[] | undefined
+  buttons?: Array<object>
+  colorScheme?: string
+  hasDecorativeLine?: boolean
+  reverseColumns?: boolean
+  isEditing?: boolean
+}>()
+
+const reverseColumns = ref(false)
+
+watch(
+  () => props.reverseColumns,
+  (newVal) => {
+    reverseColumns.value = Boolean(Number(newVal))
+  },
+  { immediate: true },
+)
+
+const textColumnClasses = computed(() => {
+  const classList = ['col-span-12', 'lg:col-span-5']
+
+  if (reverseColumns.value) {
+    classList.push('lg:order-last', 'lg:col-start-8')
+  } else {
+    classList.push('lg:order-first', 'lg:col-start-1')
+  }
+
+  return classList.join(' ')
+})
+
+const mediaColumnClasses = computed(() => {
+  const classList = ['col-span-12', 'lg:col-span-5']
+
+  if (reverseColumns.value) {
+    classList.push('lg:order-first', 'lg:col-start-1')
+  } else {
+    classList.push('lg:order-last', 'lg:col-start-8')
+  }
+
+  return classList.join(' ')
+})
+</script>

package/components/Paragraph/Timeline/Element/fragment.graphql

@@ -0,0 +1,16 @@
+fragment paragraphIcmsTimelineElement on ParagraphIcmsTimelineElement {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  titleStyle: fieldIcmsTitleStyle
+  subtitle: fieldIcmsSubtitle
+  text: fieldIcmsText
+  buttons: fieldIcmsButtons {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsButtonElement
+    }
+  }
+  media: fieldIcmsMediaElements {
+    ...media
+  }
+}

package/components/Paragraph/Timeline/Element/index.vue

@@ -0,0 +1,31 @@
+<template>
+  <DesignSystemOrganismsTimelineElement
+    :pretitle="pretitle"
+    :title="title"
+    :title-style="titleStyle"
+    :title-weight="titleWeight"
+    :subtitle="subtitle"
+    :text="text"
+    :media="media"
+    :buttons="buttons"
+    :color-scheme="colorScheme"
+    :has-decorative-line="false"
+    :reverse-columns="reverseColumns"
+    :is-editing="isEditing"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsTimelineElementFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsTimelineElementFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+const reverseColumns = computed(() => {
+  return options.value.reverseColumns
+})
+
+const colorScheme = inject<string>('colorScheme')
+const titleWeight = inject<string>('titleWeight')
+</script>

package/components/Paragraph/Timeline/Layout/fragment.graphql

@@ -0,0 +1,14 @@
+fragment paragraphIcmsLayoutTimeline on ParagraphIcmsLayoutTimeline {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  titleStyle: fieldIcmsTitleStyle
+  titleWeight: fieldIcmsTitleWeight
+  subtitle: fieldIcmsSubtitle
+  text: fieldIcmsText
+  timelineElements: fieldIcmsTimelineElements {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsTimelineElement
+    }
+  }
+}

package/components/Paragraph/Timeline/Layout/index.vue

@@ -0,0 +1,325 @@
+<template>
+  <DesignSystemAtomsContainer :color-scheme="colorScheme" :spacing="spacing">
+    <DesignSystemAtomsGridRow v-if="pretitle || title || subtitle || text">
+      <div class="col-span-12">
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :title="title"
+          :titleStyle="titleStyle"
+          :titleWeight="titleWeight"
+          :subtitle="subtitle"
+          :text="text"
+          :colorScheme="colorScheme"
+          :hasDecorativeLine="Boolean(subtitle || text)"
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+
+    <DesignSystemAtomsGridRow class="mt-10 lg:mt-20">
+      <!-- Anchor navigation -->
+      <div class="relative col-span-12 mb-6 lg:col-span-4 lg:mb-0">
+        <ul
+          v-if="!isEditing"
+          class="sticky left-0 top-32 z-10 flex flex-col gap-2"
+        >
+          <li v-for="(item, index) in props.timelineElements" :key="index">
+            <button
+              @click="handleAnchorLinkClick(Number(index))"
+              class="cursor-pointer transition-colors duration-200 ease-in-out"
+              :class="{
+                'font-semibold': currentIndex === Number(index),
+              }"
+            >
+              {{ item.props?.title }}
+            </button>
+          </li>
+        </ul>
+      </div>
+
+      <div class="relative col-span-12 lg:col-span-8">
+        <!-- Mobile slider navigation -->
+        <div
+          v-if="isMobile && !isEditing"
+          class="relative col-span-12 mb-10 lg:col-span-4"
+        >
+          <ul
+            :class="decorativeLine({ colorScheme })"
+            class="flex h-0.5 flex-nowrap items-center justify-between"
+          >
+            <li
+              v-for="(_, index) in props.timelineElements"
+              :key="index"
+              class="p-4 first:-translate-x-4 last:translate-x-4"
+            >
+              <button
+                @click="handleAnchorLinkClick(Number(index))"
+                :class="
+                  carouselDot({
+                    colorScheme,
+                    active: currentIndex === Number(index),
+                  })
+                "
+              ></button>
+            </li>
+          </ul>
+        </div>
+
+        <!-- Mobile slider -->
+        <Carousel
+          v-if="isMobile && !isEditing"
+          @init-api="setApi"
+          :class="carousel({ colorScheme })"
+        >
+          <BlokkliField
+            v-slot="{ items }"
+            name="field_icms_timeline_elements"
+            :list="timelineElements"
+            proxy-mode
+          >
+            <CarouselContent class="m-0 gap-8">
+              <BlokkliItem v-for="item in items" v-bind="item" />
+            </CarouselContent>
+          </BlokkliField>
+          <CarouselPrevious
+            class="-bottom-[90px] left-0 top-auto xl:bottom-auto xl:left-16 xl:top-1/2"
+            :class="carouselButton({ colorScheme })"
+          >
+            <ChevronLeft :size="24" :stroke-width="1" />
+          </CarouselPrevious>
+          <CarouselNext
+            class="-bottom-[90px] left-[66px] top-auto xl:bottom-auto xl:left-auto xl:right-16 xl:top-1/2"
+            :class="carouselButton({ colorScheme })"
+          >
+            <ChevronRight :size="24" :stroke-width="1" />
+          </CarouselNext>
+        </Carousel>
+
+        <!-- Desktop timeline -->
+        <BlokkliField
+          v-if="isEditing || !isMobile"
+          name="field_icms_timeline_elements"
+          :list="timelineElements"
+          class="flex flex-col gap-32"
+          :class="{ droptarget: isEditing }"
+        />
+
+        <!-- Desktop line -->
+        <template v-if="!isMobile && !isEditing">
+          <div :class="decorativeCircle({ colorScheme })" class="top-0"></div>
+          <div
+            :class="decorativeLine({ colorScheme })"
+            class="absolute left-1/2 top-0 h-full w-0.5 -translate-x-1/2"
+          ></div>
+          <div
+            :class="decorativeCircle({ colorScheme })"
+            class="bottom-0"
+          ></div>
+        </template>
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutTimelineFragment } from '#graphql-operations'
+import { tv } from 'tailwind-variants'
+import type { CarouselApi } from '@iqual/nuxt-icms/components/ui/carousel'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+
+const props = defineProps<ParagraphIcmsLayoutTimelineFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+const { isMobile } = useIsMobile()
+
+const colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+
+const childTitleWeight = useChildTitleWeight(props.titleWeight ?? '')
+
+const api = ref<CarouselApi>()
+function setApi(val: CarouselApi) {
+  api.value = val
+
+  val?.on('select', () => {
+    const selectedIndex = val.selectedScrollSnap()
+    setCurrentIndex(selectedIndex)
+  })
+}
+
+const currentIndex = ref(0)
+const setCurrentIndex = (index: number) => {
+  if (index < 0 || index >= (props.timelineElements?.length ?? 0)) return
+  currentIndex.value = index
+}
+
+const scrollToCarousel = (index: number) => {
+  if (!index && !api.value) return
+  nextTick(() => {
+    api.value?.scrollTo(index)
+  })
+}
+
+const scrollToElement = (element: HTMLElement) => {
+  if (!element) return
+  nextTick(() => {
+    element.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  })
+}
+
+const getTimelineElements = () =>
+  document.querySelectorAll('[data-timeline-element]')
+
+const handleAnchorLinkClick = (index: number) => {
+  if (isMobile.value) {
+    setCurrentIndex(index)
+    scrollToCarousel(index)
+  } else {
+    const elements = getTimelineElements()
+    scrollToElement(elements[index] as HTMLElement)
+  }
+}
+
+const timelineObserver = ref<IntersectionObserver | null>(null)
+
+onMounted(() => {
+  if (isEditing || isMobile.value) return
+
+  const elements = getTimelineElements()
+
+  timelineObserver.value = new IntersectionObserver(
+    (entries) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          const index = Array.from(elements).indexOf(
+            entry.target as HTMLElement,
+          )
+          if (index !== -1) {
+            setCurrentIndex(index)
+          }
+        }
+      })
+    },
+    {
+      rootMargin: '-10% 0px -80% 0px',
+      threshold: 0,
+    },
+  )
+
+  elements.forEach((element) => {
+    timelineObserver.value?.observe(element)
+  })
+})
+
+onUnmounted(() => {
+  timelineObserver.value?.disconnect()
+})
+
+const carousel = tv({
+  base: 'rounded-lg',
+  variants: {
+    colorScheme: {
+      none: 'bg-white',
+      dark: 'bg-gray-950',
+      light: 'bg-gray-50',
+      accent: 'bg-primary-600',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const carouselButton = tv({
+  base: 'size-10 border-none disabled:opacity-40 @sm:size:12 @md:size-16 [&_svg]:size-auto',
+  variants: {
+    colorScheme: {
+      none: 'bg-gray-50 text-black hover:bg-black hover:text-white dark:bg-gray-50 dark:text-black hover:dark:bg-black hover:dark:text-white',
+      dark: 'bg-white text-black hover:bg-gray-100 hover:text-black dark:bg-white dark:text-black hover:dark:bg-gray-100 hover:dark:text-black',
+      light:
+        'bg-gray-100 text-black hover:bg-black hover:text-white dark:bg-gray-100 dark:text-black hover:dark:bg-black hover:dark:text-white',
+      accent:
+        'bg-primary-700 text-white hover:bg-primary-800 hover:text-white dark:bg-primary-700 dark:text-white hover:dark:bg-primary-800 hover:dark:text-white',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const decorativeLine = tv({
+  base: '',
+  variants: {
+    colorScheme: {
+      none: 'bg-gray-200',
+      dark: 'bg-white',
+      light: 'bg-gray-200',
+      accent: 'bg-white',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const decorativeCircle = tv({
+  base: 'absolute left-1/2 size-4 -translate-x-1/2 border-2 rounded-full z-10',
+  variants: {
+    colorScheme: {
+      none: 'border-gray-200 bg-white',
+      dark: 'border-white bg-gray-950',
+      light: 'border-gray-200 bg-gray-50',
+      accent: 'border-white bg-primary-600',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const carouselDot = tv({
+  base: 'cursor-pointer transition-colors duration-200 ease-in-out size-4 border-2 rounded-full',
+  variants: {
+    colorScheme: {
+      none: 'bg-white border-gray-200',
+      dark: 'bg-gray-950 border-white',
+      light: 'bg-gray-50 border-gray-200',
+      accent: 'bg-primary-600 border-white',
+    },
+  },
+  compoundVariants: [
+    {
+      colorScheme: 'none',
+      active: true,
+      class: 'bg-gray-200',
+    },
+    {
+      colorScheme: 'dark',
+      active: true,
+      class: 'bg-white',
+    },
+    {
+      colorScheme: 'light',
+      active: true,
+      class: 'bg-gray-200',
+    },
+    {
+      colorScheme: 'accent',
+      active: true,
+      class: 'bg-white',
+    },
+  ],
+  defaultVariants: {
+    colorScheme: 'none',
+    active: false,
+  },
+})
+
+provide('colorScheme', colorScheme)
+provide('titleWeight', childTitleWeight)
+</script>

package/components/Paragraph/iFrame/{Layout/fragment.graphql → fragment.graphql}

@@ -4,10 +4,6 @@ fragment paragraphIcmsLayoutIframe on ParagraphIcmsLayoutIframe {
   titleWeight: fieldIcmsTitleWeight
   titleStyle: fieldIcmsTitleStyle
   text: fieldIcmsText
-  iFrameElements: fieldIcmsIframeElements {
-    ...paragraphsFieldItem
-    props {
-      ...paragraphIcmsIframeElement
-    }
-  }
+  embed: fieldIcmsEmbedCode
+  height: fieldIcmsIframeHeight
 }

package/components/Paragraph/iFrame/index.vue

@@ -0,0 +1,56 @@
+<template>
+  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
+    <DesignSystemAtomsGridRow>
+      <div :class="textWrapperClassList">
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :title="title"
+          :titleWeight="titleWeight"
+          :text="text"
+          :colorScheme="colorScheme"
+        />
+
+        <div
+          v-if="embed"
+          v-html="embed"
+          class="embed-wrapper mt-10"
+          :style="{ '--iframe-height': `${props.height || 600}px` }"
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutIframeFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutIframeFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+const textWrapperClassList = computed(() => {
+  if (options.value.textWidth === 'medium') {
+    return ['col-span-8', 'col-start-3']
+  } else if (options.value.textWidth === 'narrow') {
+    return ['col-span-8', 'col-start-3', 'md:col-span-6', 'md:col-start-4']
+  }
+  return ['col-span-12']
+})
+
+const colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+
+provide('isEditing', isEditing)
+</script>
+
+<style>
+.embed-wrapper > iframe {
+  width: 100%;
+  height: var(--iframe-height, 600px);
+}
+</style>

package/nuxt.config.ts

@@ -168,15 +168,21 @@ export default defineNuxtConfig({
     drupalRoute: {
       enabled: true,
       routeQueries: {
-        nodeIcmsPage: { fragments: [
-          'nodeIcmsPage'
-        ] },
-        slug: { fragments: [
-          'nodeIcmsPage',
-        ]},
-        nodeCanonical: { fragments: [
-          'nodeIcmsPage',
-        ]},
+        nodeIcmsPage: {
+          fragments: [
+            'nodeIcmsPage'
+          ]
+        },
+        slug: {
+          fragments: [
+            'nodeIcmsPage',
+          ]
+        },
+        nodeCanonical: {
+          fragments: [
+            'nodeIcmsPage',
+          ]
+        },
       },
     },
     devMode: {
@@ -217,6 +223,7 @@ export default defineNuxtConfig({
         'paragraphIcmsLayoutMedia',
         'paragraphIcmsLayoutDownloads',
         'paragraphIcmsLayoutIframe',
+        'paragraphIcmsLayoutTimeline',
         // Element components
         'paragraphIcmsButtonElement',
         'paragraphIcmsCardElement',
@@ -228,7 +235,7 @@ export default defineNuxtConfig({
         'paragraphIcms2ColTextElement',
         'paragraphIcmsLogoElement',
         'paragraphIcmsPartnershipElement',
-        'paragraphIcmsIframeElement',
+        'paragraphIcmsTimelineElement',
       ]
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@iqual/nuxt-icms",
-  "version": "1.0.14",
+  "version": "1.1.0",
   "description": "ICMS Base",
   "type": "module",
   "private": false,

package/components/Blokkli/iFrame/Element/icon.svg

@@ -1,5 +0,0 @@
-<svg width="18" height="14" viewBox="0 0 18 14" fill="none" xmlns="http://www.w3.org/2000/svg" style="fill:none!important;">
-<path d="M6 1L1.80023 6.03972C1.33667 6.59599 1.33667 7.40401 1.80023 7.96028L6 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M12 13L16.1998 7.96028C16.6633 7.40401 16.6633 6.59599 16.1998 6.03972L12 1" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-<path d="M7.5 10.5L10.5 3.5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
-</svg>

package/components/Blokkli/iFrame/Element/index.vue

@@ -1,14 +0,0 @@
-<template>
-  <ParagraphIFrameElement v-bind="props" :blokkliData="blokkliData" />
-</template>
-
-<script lang="ts" setup>
-import type { ParagraphIcmsIframeElementFragment } from '#graphql-operations'
-
-const props = defineProps<ParagraphIcmsIframeElementFragment>()
-
-const blokkliData = defineBlokkli({
-  bundle: 'icms_iframe_element',
-})
-
-</script>

package/components/Paragraph/iFrame/Element/fragment.graphql

@@ -1,9 +0,0 @@
-fragment paragraphIcmsIframeElement on ParagraphIcmsIframeElement {
-  title: fieldIcmsTitle
-  link: fieldIcmsLink {
-    uri {
-      path
-    }
-  }
-  height: fieldIcmsNumber
-}

package/components/Paragraph/iFrame/Element/index.vue

@@ -1,16 +0,0 @@
-<template>
-  <DesignSystemMoleculesIFrame
-    :title="title"
-    :link="link?.uri?.path"
-    :height="height"
-    :is-editing="isEditing"
-  />
-</template>
-
-<script lang="ts" setup>
-import type { ParagraphIcmsIframeElementFragment } from '#graphql-operations'
-
-defineProps<ParagraphIcmsIframeElementFragment>()
-
-const isEditing = inject<boolean>('isEditing')
-</script>

package/components/Paragraph/iFrame/Layout/index.vue

@@ -1,161 +0,0 @@
-<template>
-  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
-    <DesignSystemAtomsGridRow class="pb-14 md:pb-0">
-      <div class="col-span-12 md:col-span-6" v-if="title">
-        <DesignSystemOrganismsContentBlock
-          :pretitle="pretitle"
-          :title="title"
-          :titleWeight="titleWeight"
-          :text="text"
-          :colorScheme="colorScheme"
-        />
-      </div>
-
-      <div v-if="isEditing" class="col-span-12">
-        <BlokkliField
-          name="field_icms_iframe_elements"
-          :list="iFrameElements"
-          :class="{ droptarget: isEditing }"
-        />
-      </div>
-
-      <div v-else class="col-span-12">
-        <template v-if="iFrameElements && iFrameElements.length === 1">
-          <DesignSystemMoleculesIFrame
-            :title="iFrameElements[0].props?.title"
-            :link="iFrameElements[0].props?.link?.uri?.path"
-            :height="iFrameElements[0].props?.height"
-          />
-        </template>
-
-        <Tabs
-          v-if="!isMobile && iFrameElements && iFrameElements.length > 1"
-          default-value="tab-1"
-          class="rounded-lg shadow-custom"
-        >
-          <TabsList
-            class="flex flex-col items-center justify-center bg-transparent p-0 lg:flex-row dark:bg-transparent"
-          >
-            <TabsTrigger
-              v-for="(iFrameElement, key) in iFrameElements"
-              :key="key"
-              :value="`tab-${key + 1}`"
-              :class="tabTrigger({ colorScheme })"
-            >
-              {{ iFrameElement?.props?.title }}
-            </TabsTrigger>
-          </TabsList>
-          <TabsContent
-            forceMount
-            v-for="(iFrameElement, key) in iFrameElements"
-            :key="key"
-            :value="`tab-${key + 1}`"
-            :class="tabContent({ colorScheme })"
-          >
-            <DesignSystemMoleculesIFrame
-              :title="iFrameElement.props?.title"
-              :link="iFrameElement.props?.link?.uri?.path"
-              :height="iFrameElement.props?.height"
-            />
-          </TabsContent>
-        </Tabs>
-
-        <Accordion
-          v-if="isMobile && iFrameElements && iFrameElements.length > 1"
-          type="single"
-          class="w-full"
-          collapsible
-          default-value="accordion-1"
-        >
-          <AccordionItem
-            v-for="(iFrameElement, key) in iFrameElements"
-            :key="key"
-            :value="`accordion-${key + 1}`"
-            class="mb-1 border-none [&>h3]:mb-0"
-          >
-            <AccordionTrigger
-              :ref="(el: any) => (triggerRefs[key] = el)"
-              :class="accordionTrigger({ colorScheme })"
-              @click="handleClick(key)"
-            >
-              {{ iFrameElement?.props?.title }}
-            </AccordionTrigger>
-            <AccordionContent class="p-4 pb-6 text-base">
-              <DesignSystemMoleculesIFrame
-                :title="iFrameElement.props?.title"
-                :link="iFrameElement.props?.link?.uri?.path"
-                :height="iFrameElement.props?.height"
-              />
-            </AccordionContent>
-          </AccordionItem>
-        </Accordion>
-      </div>
-    </DesignSystemAtomsGridRow>
-  </DesignSystemAtomsContainer>
-</template>
-
-<script lang="ts" setup>
-import type { ParagraphIcmsLayoutIframeFragment } from '#graphql-operations'
-import { tv } from 'tailwind-variants'
-
-defineProps<ParagraphIcmsLayoutIframeFragment>()
-
-const { isMobile } = useIsMobile()
-
-const { options, isEditing } = useAttrs().blokkliData
-
-const tabTrigger = tv({
-  base: 'inline-flex w-full flex-1 items-center justify-center whitespace-nowrap rounded-none rounded-t-lg py-4 text-base shadow-custom-inner transition-all disabled:pointer-events-none lg:w-fit data-[state=active]:shadow-none',
-  variants: {
-    colorScheme: {
-      none: 'bg-white dark:bg-white text-black dark:text-black data-[state=active]:bg-white dark:data-[state=active]:bg-white dark:data-[state=active]:text-black',
-      dark: 'bg-gray-700 dark:bg-gray-700 text-white dark:text-white data-[state=active]:bg-gray-900 dark:data-[state=active]:bg-gray-900 data-[state=active]:text-white',
-      light:
-        'bg-white dark:bg-white text-black dark:text-black data-[state=active]:bg-white dark:data-[state=active]:bg-white dark:data-[state=active]:text-black',
-      accent:
-        'bg-primary-600 dark:bg-primary-600 text-white dark:text-white data-[state=active]:bg-primary-700 dark:data-[state=active]:bg-primary-700 data-[state=active]:text-white',
-    },
-  },
-})
-
-const tabContent = tv({
-  base: 'm-0 rounded-b-lg p-8 text-black md:p-16',
-  variants: {
-    colorScheme: {
-      none: 'bg-white text-black',
-      dark: 'bg-gray-900 text-white',
-      light: 'bg-white text-black',
-      accent: 'bg-primary-700 text-white',
-    },
-  },
-})
-
-const accordionTrigger = tv({
-  base: 'items-center rounded-lg px-6 py-4 shadow-custom-small hover:no-underline gap-4 text-left text-base',
-  variants: {
-    colorScheme: {
-      none: 'bg-white text-black',
-      dark: 'bg-gray-900 text-white',
-      light: 'bg-white text-black',
-      accent: 'bg-primary-700 text-white',
-    },
-  },
-})
-
-const triggerRefs = ref<Array<ComponentPublicInstance>>([])
-
-const handleClick = (index: number): void => {
-  const { handleAccordionOpen } = useAccordionScroll(triggerRefs.value[index])
-  handleAccordionOpen()
-}
-
-const colorScheme = computed(() => {
-  return options.value.colorScheme
-})
-
-const spacing = computed(() => {
-  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
-})
-
-provide('isEditing', isEditing)
-</script>