@iqual/nuxt-icms 1.4.10 → 1.5.0

package/components/Node/Icms/Page/Teaser/index.vue

@@ -1,22 +1,52 @@
 <template>
-  <DesignSystemOrganismsTeaserCard
+  <component
+    :is="getComponent()"
     :image="image || mainImage"
-    :pretitle="pretitle"
+    :pretitle="pretitle || topicsLabel"
     :title="title || mainTitle"
-    :titleWeight="titleWeight"
     :text="text || mainText"
-    :link="link?.path"
-    :link-label="linkLabel"
-    :colorScheme="colorScheme"
+    :link="link"
+    :linkLabel="linkLabel || $texts('teaser.link_label', 'Read more')"
   />
 </template>
 
 <script lang="ts" setup>
-import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import type { TeaserVariant } from '@iqual/nuxt-icms/types/global'
 import type { NodeIcmsPageTeaserFragment } from '#graphql-operations'
+import {
+  DesignSystemOrganismsTeaserCard,
+  DesignSystemOrganismsFeatureCard,
+  DesignSystemOrganismsTextCard,
+  DesignSystemOrganismsSpotlightCard,
+  DesignSystemOrganismsFlipTeaser,
+  DesignSystemOrganismsTeaserSimple,
+} from '#components'
 
-defineProps<NodeIcmsPageTeaserFragment>()
+const props = defineProps<NodeIcmsPageTeaserFragment>()
 
-const colorScheme = inject<ColorScheme>('colorScheme')
-const titleWeight = inject<string>('titleWeight')
+const { $texts } = useNuxtApp()
+
+const topicsLabel = computed(() => {
+  return (
+    props.topics
+      ?.map((t) => t?.label)
+      .filter(Boolean)
+      .join(', ') || ''
+  )
+})
+
+const getComponent = () => {
+  if (!teaserVariant.value) return 'feature'
+  const components: Record<string, Component> = {
+    teaser: DesignSystemOrganismsTeaserCard,
+    feature: DesignSystemOrganismsFeatureCard,
+    text: DesignSystemOrganismsTextCard,
+    spotlight: DesignSystemOrganismsSpotlightCard,
+    flipTeaser: DesignSystemOrganismsFlipTeaser,
+    simple: DesignSystemOrganismsTeaserSimple,
+  }
+  return components[teaserVariant.value]
+}
+
+const teaserVariant = inject<TeaserVariant>('teaserVariant')
 </script>

package/components/Node/Icms/Page/fragment.graphql

@@ -14,4 +14,8 @@ fragment nodeIcmsPage on NodeIcmsPage {
       ...paragraph
     }
   }
+  metatag {
+    tag
+    attributes
+  }
 }

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

@@ -1,6 +1,5 @@
 fragment paragraphIcmsButtonElement on ParagraphIcmsButtonElement {
   label: fieldIcmsLinkLabel
-  subline: fieldIcmsLinkSubline
   title: fieldIcmsLinkTitle
   link: fieldIcmsLink {
     uri {
@@ -8,7 +7,5 @@ fragment paragraphIcmsButtonElement on ParagraphIcmsButtonElement {
     }
   }
   params: fieldIcmsLinkParams
-  buttonStyle: fieldIcmsLinkStyle
   targetBlank: fieldIcmsLinkTargetBlank
-  textAlignment: fieldIcmsTextAlignment
 }

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

@@ -2,17 +2,14 @@
   <div :class="themedClass('containerClass', 'w-full md:w-auto')">
     <DesignSystemAtomsButton
       :label="label"
-      :subline="subline"
       :title="title"
       :link="link?.uri?.path"
       :params="params"
       :target-blank="targetBlank"
-      :style="buttonStyle"
-      :textAlignment="textAlignment"
+      :buttonStyle="buttonStyle"
       :colorScheme="colorScheme"
       :buttonClass="themedClass('buttonClass')"
       :labelClass="themedClass('labelClass')"
-      :sublineClass="themedClass('sublineClass')"
     />
   </div>
 </template>
@@ -24,7 +21,13 @@ import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 const themedClass = useTheme('ParagraphButtonElement')
 
+const { options, isEditing } = useAttrs().blokkliData as any
+
 defineProps<ParagraphIcmsButtonElementFragment>()
 
+const buttonStyle = computed(() => {
+  return options.value.buttonStyle
+})
+
 const colorScheme = inject<ColorScheme>('colorScheme')
 </script>

package/components/Paragraph/CallToAction/fragment.graphql

@@ -2,6 +2,11 @@ fragment paragraphIcmsLayoutCallToAction on ParagraphIcmsLayoutCallToAction {
   image: fieldIcmsMediaElement {
     ...media
   }
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  subtitle: fieldIcmsSubtitle
   text: fieldIcmsText
   buttons: fieldIcmsButtons {
     ...paragraphsFieldItem

package/components/Paragraph/CallToAction/index.vue

@@ -1,97 +1,45 @@
 <template>
-  <DesignSystemAtomsContainer
-    :colorScheme="colorScheme"
-    :spacing="{ top: 'none', bottom: 'none' }"
-    :class="cn(themedClass('containerClass'), containerClassList)"
-  >
-    <DesignSystemAtomsGridRow :class="themedClass('rowClass', 'pb-14 md:pb-0')">
-      <div
-        :class="
-          themedClass(
-            'firstColumnClass',
-            'col-span-12 flex justify-center md:col-span-12 xl:col-span-3',
-          )
-        "
-      >
-        <Media
-          v-if="image"
-          :media="image"
-          imageSizes="xs:175px xl:350px"
-          imageAspectRatios="1/1"
-          :mediaClass="themedClass('mediaClass', '-mt-12 xl:w-full')"
-          :figcaptionClass="themedClass('figcaptionClass')"
-          :elementClass="themedClass('elementClass')"
-        />
-      </div>
-      <div
-        :class="
-          themedClass(
-            'secondColumnClass',
-            'col-span-12 flex items-center md:col-span-9 xl:col-span-6',
-          )
-        "
-      >
-        <div
-          v-if="text"
-          :class="
-            themedClass(
-              'textClass',
-              'ck-content py-8 text-lg md:pr-8 xl:p-8 xl:text-2xl',
-            )
-          "
-          v-html="text"
-        />
-      </div>
-      <div
-        :class="
-          themedClass(
-            'thirdColumnClass',
-            'col-span-12 flex items-center justify-center md:col-span-3 xl:col-span-3',
-          )
-        "
-      >
-        <BlokkliField
-          name="field_icms_buttons"
-          :list="buttons"
-          :class="[
-            themedClass(
-              'buttonsContainerClass',
-              'flex flex-wrap items-center justify-center gap-4',
-            ),
-            { droptarget: isEditing },
-          ]"
-        />
-      </div>
-    </DesignSystemAtomsGridRow>
-  </DesignSystemAtomsContainer>
+  <component :is="getComponent(callToActionVariant)" v-bind="props" />
 </template>
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutCallToActionFragment } from '#graphql-operations'
-import cn from '@iqual/nuxt-icms/composables/useCn'
-import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
-const themedClass = useTheme('ParagraphCallToAction')
+import type { CallToActionVariant } from '@iqual/nuxt-icms/types/global'
+import DesignSystemOrganismsCallToActionDefault from '@iqual/nuxt-icms/components/DesignSystem/Organisms/CallToAction.vue'
+import DesignSystemOrganismsCallToActionFeature from '@iqual/nuxt-icms/components/DesignSystem/Organisms/CallToActionFeature.vue'
+import DesignSystemOrganismsCallToActionFullwidth from '@iqual/nuxt-icms/components/DesignSystem/Organisms/CallToActionFullwidth.vue'
 
-defineProps<ParagraphIcmsLayoutCallToActionFragment>()
+const props = defineProps<ParagraphIcmsLayoutCallToActionFragment>()
 
-const { options, isEditing } = useAttrs().blokkliData
+const { options, isEditing } = useAttrs().blokkliData as any
 
 const colorScheme = computed(() => {
   return options.value.colorScheme
 })
 
-const containerClassList = computed(() => {
-  const classList = []
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
 
-  if (options.value.spacingTop == 'small') {
-    classList.push('mt-16')
-  }
-  if (options.value.spacingTop == 'large') {
-    classList.push('mt-32')
-  }
-  return classList.join(' ')
+const callToActionVariant = computed(() => {
+  return options.value.callToActionVariant || 'feature'
 })
 
+const alignHorizontalFull = computed(() => {
+  return options.value.alignHorizontalFull
+})
+
+const getComponent = (variant: CallToActionVariant) => {
+  const components: Record<string, Component> = {
+    default: DesignSystemOrganismsCallToActionDefault,
+    feature: DesignSystemOrganismsCallToActionFeature,
+    fullwidth: DesignSystemOrganismsCallToActionFullwidth,
+  }
+  return components[variant] || DesignSystemOrganismsCallToActionFeature
+}
+
 provide('colorScheme', colorScheme)
-provide('prefetch', true)
+provide('spacing', spacing)
+provide('alignHorizontalFull', alignHorizontalFull)
+provide('isEditing', isEditing)
 </script>

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

@@ -1,20 +1,29 @@
 <template>
-  <DesignSystemMoleculesCard
-    :title="title"
-    :titleWeight="titleWeight"
-    :text="text"
-    :image="image"
-    :icon="icon"
-    :colorScheme="colorScheme"
-  />
+  <component :is="getComponent(variant)" v-bind="props" />
 </template>
 
 <script lang="ts" setup>
-import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import type { CardVariant } from '@iqual/nuxt-icms/types/global'
 import type { ParagraphIcmsCardElementFragment } from '#graphql-operations'
+import {
+  DesignSystemOrganismsFeatureCard,
+  DesignSystemOrganismsTextCard,
+  DesignSystemOrganismsSpotlightCard,
+  DesignSystemOrganismsFactCard,
+} from '#components'
 
-defineProps<ParagraphIcmsCardElementFragment>()
+const props = defineProps<ParagraphIcmsCardElementFragment>()
 
-const colorScheme = inject<ColorScheme>('colorScheme')
-const titleWeight = inject<string>('titleWeight')
+const getComponent = (variant: CardVariant) => {
+  if (!variant) return
+  const components: Record<string, Component> = {
+    feature: DesignSystemOrganismsFeatureCard,
+    text: DesignSystemOrganismsTextCard,
+    spotlight: DesignSystemOrganismsSpotlightCard,
+    fact: DesignSystemOrganismsFactCard,
+  }
+  return components[variant] || FeatureCard
+}
+
+const variant = inject<CardVariant>('variant')
 </script>

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

@@ -10,7 +10,12 @@
     >
       <div
         v-if="pretitle || title"
-        :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-9')"
+        :class="
+          cn(
+            themedClass('firstColumnClass', 'col-span-12 md:col-span-9'),
+            alignmentClassList,
+          )
+        "
       >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
@@ -24,7 +29,12 @@
       </div>
       <div
         v-if="subtitle || text"
-        :class="themedClass('secondColumnClass', 'col-span-12 md:col-span-9')"
+        :class="
+          cn(
+            themedClass('secondColumnClass', 'col-span-12 md:col-span-9'),
+            alignmentClassList,
+          )
+        "
       >
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
@@ -41,14 +51,14 @@
       :list="cards"
       :class="[
         themedClass(
-          'buttonsContainerClass',
+          'cardsContainerClass',
           'grid-3-col container mx-auto grid gap-x-6 gap-y-12',
         ),
-        { droptarget: isEditing },
         {
-          [themedClass('buttonsContainerOffsetClass', 'mt-10')]:
+          [themedClass('cardsContainerOffsetClass', 'mt-10')]:
             pretitle || title,
         },
+        { droptarget: isEditing },
       ]"
     />
   </DesignSystemAtomsContainer>
@@ -56,23 +66,50 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutCardsFragment } from '#graphql-operations'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import cn from '@iqual/nuxt-icms/composables/useCn'
 const themedClass = useTheme('ParagraphCardLayout')
 
 const props = defineProps<ParagraphIcmsLayoutCardsFragment>()
 
-const { options, isEditing } = useAttrs().blokkliData
+const { options, isEditing } = useAttrs().blokkliData as any
+
+const parentColorScheme = inject<ColorScheme>('colorScheme', 'none')
 
 const colorScheme = computed(() => {
-  return options.value.colorScheme
+  if (options.value.colorScheme !== undefined) {
+    return options.value.colorScheme
+  } else {
+    return unref(parentColorScheme)
+  }
 })
 
 const spacing = computed(() => {
   return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
 })
 
+const cardVariant = computed(() => {
+  return options.value.cardVariant
+})
+
+const alignmentClassList = computed(() => {
+  const classList = []
+  if (options.value.alignHorizontalFull == 'center') {
+    classList.push('text-center')
+    classList.push('md:col-span-8')
+    classList.push('md:col-start-3')
+  }
+  if (options.value.alignHorizontalFull == 'right') {
+    classList.push('text-right')
+    classList.push('md:col-start-4')
+  }
+  return classList.join(' ')
+})
+
 const childTitleWeight = useChildTitleWeight(props.titleWeight ?? '')
 
+provide('variant', cardVariant)
 provide('colorScheme', colorScheme)
 provide('isEditing', isEditing)
 provide('titleWeight', childTitleWeight)

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

@@ -0,0 +1,22 @@
+fragment paragraphIcmsCollapsibleElement on ParagraphIcmsCollapsibleElement {
+  collapsibleTitle: fieldIcmsCollapsibleTitle
+  layouts: fieldIcmsCollapsibleLayouts {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsLayout2ColTextElements
+      ...paragraphIcmsLayoutCards
+      ...paragraphIcmsLayoutDownloads
+      ...paragraphIcmsLayoutGallery
+      ...paragraphIcmsLayoutIframe
+      ...paragraphIcmsLayoutLinkLists
+      ...paragraphIcmsLayoutMedia
+      ...paragraphIcmsLayoutPartnerships
+      ...paragraphIcmsLayoutTable
+      ...paragraphIcmsLayoutTestimonial
+      ...paragraphIcmsLayoutText
+      ...paragraphIcmsLayoutTextcolIconlist
+      ...paragraphIcmsLayoutTextImageIntro
+      ...paragraphIcmsLayoutTextMedia
+    }
+  }
+}

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

@@ -0,0 +1,69 @@
+<template>
+  <div v-if="isEditing" :class="title({ colorScheme })">
+    <DesignSystemOrganismsContentBlock
+      :text="collapsibleTitle"
+      :textClass="themedClass('textClass', 'text-sm mb-3')"
+    />
+    <BlokkliField
+      name="field_icms_collapsible_layouts"
+      :list="layouts"
+      :class="
+        cn(themedClass('containerClass', 'flex min-h-20 w-full flex-col gap-6'), {
+          droptarget: isEditing,
+        })
+      "
+    />
+  </div>
+  <BlokkliField v-else
+    name="field_icms_collapsible_layouts"
+    :list="layouts"
+    :class="
+      cn(themedClass('containerClass', 'flex min-h-20 w-full flex-col gap-6'), {
+        droptarget: isEditing,
+      })
+    "
+  />
+</template>
+
+<script lang="ts" setup>
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import { tv } from 'tailwind-variants'
+import cn from '@iqual/nuxt-icms/composables/useCn'
+
+import type { ParagraphIcmsCollapsibleElementFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsCollapsibleElementFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData as any
+
+const themedClass = useTheme('ParagraphTabsElement')
+
+const title = tv({
+  base: themedClass('collapsibleTitleBase', 'px-3 py-2 mb-4 rounded-sm'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'collapsibleTitleVariantsColorSchemeNone',
+        'bg-gray-50',
+      ),
+      dark: themedClass(
+        'collapsibleTitleVariantsColorSchemeDark',
+        'bg-gray-900',
+      ),
+      light: themedClass(
+        'collapsibleTitleVariantsColorSchemeLight',
+        'bg-white',
+      ),
+      accent: themedClass(
+        'collapsibleTitleVariantsColorSchemeAccent',
+        'bg-primary-700',
+      ),
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const colorScheme = inject<ColorScheme>('colorScheme')
+</script>

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

@@ -0,0 +1,14 @@
+fragment paragraphIcmsLayoutCollapsible on ParagraphIcmsLayoutCollapsible {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  subtitle: fieldIcmsSubtitle
+  text: fieldIcmsText
+  collapsibleElements: fieldIcmsCollapsibleElements {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsCollapsibleElement
+    }
+  }
+}