@iqual/nuxt-icms 1.3.1 → 1.4.0

package/components/Paragraph/Introduction/index.vue

@@ -1,28 +1,47 @@
 <template>
-  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
-    <DesignSystemAtomsGridRow>
-      <div class="col-span-12">
+  <DesignSystemAtomsContainer
+    :colorScheme="colorScheme"
+    :spacing="spacing"
+    :class="themedClass('containerClass')"
+  >
+    <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
+      <div :class="themedClass('columnClass', 'col-span-12')">
         <DesignSystemAtomsGridRow :class="introductionRow({ colorScheme })">
           <div
-            class="col-span-12 p-8 pb-0 md:col-span-5 md:p-12 md:pr-0 lg:p-16 lg:pr-0"
+            :class="
+              themedClass(
+                'introductionRowFirstColumnClass',
+                'col-span-12 md:col-span-5',
+              )
+            "
           >
             <Media
               v-if="image"
               :media="image"
-              mediaClass="aspect-square"
               imageAspectRatios="1/1"
               imageSizes="xs:100vw sm:100vw md:320px lg:380px"
-              elementClass="rounded-lg size-full object-cover object-center"
+              :mediaClass="themedClass('mediaClass')"
+              :elementClass="themedClass('elementClass')"
+              :figcaptionClass="themedClass('figcaptionClass')"
             />
           </div>
           <div
-            class="col-span-12 flex flex-col p-8 pt-0 md:col-span-7 md:p-12 md:pl-5 lg:p-16 lg:pl-6"
+            :class="
+              themedClass(
+                'introductionRowSecondColumnClass',
+                'col-span-12 flex flex-col p-8 pt-0 md:col-span-7 md:p-12 md:pl-5 lg:p-16 lg:pl-12',
+              )
+            "
           >
             <DesignSystemOrganismsContentBlock
               :pretitle="pretitle"
+              :pretitleClass="themedClass('pretitleClass')"
               :title="title"
+              :titleClass="themedClass('titleClass')"
               :subtitle="subtitle"
+              :subtitleClass="themedClass('subtitleClass')"
               :text="text"
+              :textClass="themedClass('textClass')"
               :titleWeight="titleWeight"
               :titleStyle="titleStyle"
               :colorScheme="colorScheme"
@@ -30,14 +49,26 @@
             <BlokkliField
               name="field_icms_buttons"
               :list="buttons"
-              class="order-1 mt-6 flex flex-wrap gap-6 md:order-none"
-              :class="[buttonAlignment, { droptarget: isEditing }]"
+              :class="
+                cn(
+                  themedClass(
+                    'buttonsContainerClass',
+                    'order-1 mt-6 flex flex-wrap items-center gap-6 md:order-none',
+                  ),
+                  buttonAlignment,
+                  { droptarget: isEditing },
+                )
+              "
             />
             <Media
               v-if="signature"
-              mediaClass="ml-auto mr-6 mt-6 max-w-44"
               :media="signature"
               imageSizes="xs:180px"
+              :mediaClass="
+                themedClass('secondMediaClass', 'ml-auto mr-6 mt-6 max-w-44')
+              "
+              :figcaptionClass="themedClass('secondFigcaptionClass')"
+              :elementClass="themedClass('secondElementClass')"
             />
           </div>
         </DesignSystemAtomsGridRow>
@@ -48,20 +79,24 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutTextImageIntroFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import { tv } from 'tailwind-variants'
+import cn from '@iqual/nuxt-icms/composables/useCn'
 
 defineProps<ParagraphIcmsLayoutTextImageIntroFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
+const themedClass = useTheme()
+
 const introductionRow = tv({
-  base: 'rounded-lg w-full shadow-custom p-0',
+  base: themedClass('introductionRowBase', 'w-full p-0'),
   variants: {
     colorScheme: {
-      none: 'bg-white',
-      dark: 'bg-gray-900',
-      light: 'bg-white',
-      accent: 'bg-primary-700',
+      none: themedClass('introductionRowVariantsColorSchemeNone'),
+      dark: themedClass('introductionRowVariantsColorSchemeDark'),
+      light: themedClass('introductionRowVariantsColorSchemeLight'),
+      accent: themedClass('introductionRowVariantsColorSchemeAccent'),
     },
   },
   defaultVariants: {

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

@@ -8,4 +8,5 @@ fragment paragraphIcmsLogoElement on ParagraphIcmsLogoElement {
     }
   }
   title: fieldIcmsLinkTitle
+  targetBlank: fieldIcmsLinkTargetBlank
 }

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

@@ -2,16 +2,21 @@
   <DesignSystemOrganismsLogoElement
     :logo="logo"
     :link="link?.uri?.path"
+    :targetBlank="targetBlank"
     :title="title"
     :colorScheme="colorScheme"
-    class="w-full md:w-[calc(50%-12px)]"
+    :class="themedClass('containerClass', 'w-full md:w-[calc(50%-12px)]')"
   />
 </template>
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLogoElementFragment } from '#graphql-operations'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsLogoElementFragment>()
 
-const colorScheme = inject<string>('colorScheme')
+const themedClass = useTheme()
+
+const colorScheme = inject<ColorScheme>('colorScheme')
 </script>

package/components/Paragraph/Media/index.vue

@@ -1,21 +1,40 @@
 <template>
-  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
-    <div :class="rowClassList">
-      <div :class="columnClassList">
+  <DesignSystemAtomsContainer
+    :colorScheme="colorScheme"
+    :spacing="spacing"
+    :class="themedClass('containerClass')"
+  >
+    <div :class="themedClass('rowClass', rowClassList)">
+      <div :class="themedClass('columnClass', columnClassList)">
         <DesignSystemMoleculesMediaSlider
           v-if="media && media.length > 1"
           :media="media"
-          :colorScheme="colorScheme"
+          :containerClass="themedClass('mediaSliderContainerClass', 'my-0')"
+          :mediaClass="themedClass('mediaSliderMediaClass')"
+          :elementClass="
+            themedClass('mediaSliderElementClass', 'block w-full h-auto')
+          "
+          :figcaptionClass="themedClass('mediaSliderFigcaptionClass')"
+          :carouselClass="themedClass('mediaSliderCarouselClass')"
+          :carouselContentClass="themedClass('mediaSliderCarouselContentClass')"
+          :carouselItemClass="themedClass('mediaSliderCarouselItemClass')"
+          :carouselButtonPrevClass="
+            themedClass('mediaSliderCarouselButtonPrevClass')
+          "
+          :carouselButtonNextClass="
+            themedClass('mediaSliderCarouselButtonNextClass')
+          "
+          colorScheme="none"
           showCaption
-          :sliderClass="mediaSliderClassList"
-          :elementClass="mediaElementClassList"
         />
 
         <Media
           v-else-if="media && media.length === 1 && media[0]"
           :media="media[0]"
           :imageSizes="imageSizes"
-          :elementClass="elementClassList"
+          :mediaClass="themedClass('mediaMediaClass')"
+          :elementClass="themedClass('mediaElementClass')"
+          :figcaptionClass="themedClass('mediaFigcaptionClass')"
           showCaption
         />
       </div>
@@ -25,31 +44,13 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutMediaFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsLayoutMediaFragment>()
 
-const { options, isEditing } = useAttrs().blokkliData
+const themedClass = useTheme()
 
-const mediaSliderClassList = computed(() => {
-  const classList = ['my-0']
-  if (options.value.width !== 'full') {
-    classList.push('rounded-lg overflow-hidden')
-  }
-  return classList.join(' ')
-})
-
-const mediaElementClassList = computed(() => {
-  const classList = ['display-block', 'w-full h-auto']
-  if (options.value.width !== 'full') {
-    classList.push('rounded-lg overflow-hidden')
-  }
-  return classList.join(' ')
-})
-
-const elementClassList = computed(() => {
-  if (options.value.width === 'full') return ''
-  return 'rounded-lg'
-})
+const { options, isEditing } = useAttrs().blokkliData
 
 const colorScheme = computed(() => {
   return options.value.colorScheme
@@ -62,11 +63,11 @@ const spacing = computed(() => {
 const rowClassList = computed(() => {
   const classList = ['grid grid-cols-12 gap-6']
   if (options.value.width === 'full') {
-    return classList
+    return classList.join(' ')
   }
   classList.push('container mx-auto')
 
-  return classList
+  return classList.join(' ')
 })
 
 const imageSizes = computed(() => {
@@ -88,6 +89,6 @@ const columnClassList = computed(() => {
     classList.push('md:col-span-6 md:col-start-4')
   }
 
-  return classList
+  return classList.join(' ')
 })
 </script>

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

@@ -8,4 +8,5 @@ fragment paragraphIcmsPartnershipElement on ParagraphIcmsPartnershipElement {
     }
   }
   title: fieldIcmsLinkTitle
+  targetBlank: fieldIcmsLinkTargetBlank
 }

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

@@ -2,13 +2,20 @@
   <DesignSystemMoleculesPartnership
     :logo="logo"
     :link="link?.uri?.path"
+    :targetBlank="targetBlank"
     :title="title"
+    :linkClass="themedClass('linkClass')"
+    :mediaClass="themedClass('mediaClass')"
+    :figcaptionClass="themedClass('figcaptionClass')"
+    :elementClass="themedClass('elementClass')"
   />
 </template>
 
 <script lang="ts" setup>
 import type { ParagraphIcmsPartnershipElementFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsPartnershipElementFragment>()
 
+const themedClass = useTheme()
 </script>

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

@@ -1,30 +1,38 @@
 <template>
-  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
-    <DesignSystemAtomsGridRow class="md:pr-24">
-      <div class="col-span-12">
-        <DesignSystemAtomsGridRow
-          :class="partnershipsRow({ colorScheme })"
-          class=""
-        >
+  <DesignSystemAtomsContainer
+    :colorScheme="colorScheme"
+    :spacing="spacing"
+    :class="themedClass('containerClass')"
+  >
+    <DesignSystemAtomsGridRow :class="themedClass('rowClass', 'md:pr-24')">
+      <div :class="themedClass('columnClass', 'col-span-12')">
+        <DesignSystemAtomsGridRow :class="partnershipsRow({ colorScheme })">
           <div
-            class="col-span-12 p-8 pb-0 md:col-span-6 md:p-12 md:pr-0 lg:p-16 lg:pr-0"
+            :class="
+              themedClass(
+                'partnershipsRowFirstColumnClass',
+                'col-span-12 p-8 pb-0 md:col-span-6 md:p-12 md:pr-0 lg:p-16 lg:pr-0',
+              )
+            "
           >
             <DesignSystemOrganismsContentBlock
               :pretitle="pretitle"
+              :pretitleClass="themedClass('pretitleClass')"
               :title="title"
+              :titleClass="themedClass('titleClass')"
               :titleWeight="titleWeight"
               :colorScheme="colorScheme"
             />
 
-            <ul class="flex flex-col gap-4">
+            <ul :class="themedClass('textRowsClass', 'flex flex-col gap-4')">
               <li
                 v-for="(textRow, index) in textRows"
                 :key="index"
-                class="flex items-start gap-2"
+                :class="themedClass('textRowClass', 'flex items-start gap-2')"
               >
                 <SpriteSymbol
                   name="chevron-right"
-                  class="size-6 flex-shrink-0"
+                  :class="bulletPoint({ colorScheme })"
                 />
                 {{ textRow }}
               </li>
@@ -32,15 +40,21 @@
           </div>
 
           <div
-            class="col-span-12 p-8 pt-0 md:col-span-6 md:col-start-8 md:p-12 md:pl-5 lg:p-16 lg:pl-6"
+            :class="
+              themedClass(
+                'partnershipsRowSecondColumnClass',
+                'col-span-12 md:col-span-6 md:col-start-8',
+              )
+            "
           >
             <Media
               v-if="image"
-              mediaClass="aspect-square w-full"
               :media="image"
               imageAspectRatios="1/1"
               imageSizes="xs:100vw sm:100vw md:25vw lg:320px"
-              elementClass="size-full object-cover object-center rounded-lg"
+              :mediaClass="themedClass('mediaClass')"
+              :elementClass="themedClass('elementClass')"
+              :figcaptionClass="themedClass('figcaptionClass')"
             />
           </div>
         </DesignSystemAtomsGridRow>
@@ -48,10 +62,19 @@
         <DesignSystemAtomsGridRow
           :class="partnershipsOffsetRow({ colorScheme })"
         >
-          <div class="col-span-1 p-5 lg:p-8">
+          <div
+            :class="
+              themedClass(
+                'partnershipsOffsetRowColumnClass',
+                'col-span-1 p-5 lg:p-8',
+              )
+            "
+          >
             <DesignSystemOrganismsContentBlock
               :pretitle="overlayTitle"
+              :pretitleClass="themedClass('overlayTitle')"
               :text="overlayText"
+              :textClass="themedClass('overlayText')"
               :colorScheme="colorScheme"
             />
 
@@ -59,8 +82,13 @@
               v-if="partnershipElements"
               name="field_icms_partnership_elements"
               :list="partnershipElements"
-              class="mt-8 flex flex-wrap xl:flex-nowrap"
-              :class="{ droptarget: isEditing }"
+              :class="[
+                themedClass(
+                  'partnershipsContainerClass',
+                  'mt-8 flex flex-wrap xl:flex-nowrap',
+                ),
+                { droptarget: isEditing },
+              ]"
             />
           </div>
         </DesignSystemAtomsGridRow>
@@ -71,20 +99,32 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutPartnershipsFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 import { tv } from 'tailwind-variants'
 
 defineProps<ParagraphIcmsLayoutPartnershipsFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
+const themedClass = useTheme()
+
 const partnershipsRow = tv({
-  base: 'rounded-lg w-full shadow-custom p-0',
+  base: themedClass('partnershipsRowBase', 'w-full p-0'),
   variants: {
     colorScheme: {
-      none: 'bg-white',
-      dark: 'bg-gray-900',
-      light: 'bg-white',
-      accent: 'bg-primary-700',
+      none: themedClass('partnershipsRowVariantsColorSchemeNone', 'bg-white'),
+      dark: themedClass(
+        'partnershipsRowVariantsColorSchemeDark',
+        'bg-gray-950',
+      ),
+      light: themedClass(
+        'partnershipsRowVariantsColorSchemeLight',
+        'bg-gray-50',
+      ),
+      accent: themedClass(
+        'partnershipsRowVariantsColorSchemeAccent',
+        'bg-primary-600',
+      ),
     },
   },
   defaultVariants: {
@@ -93,13 +133,46 @@ const partnershipsRow = tv({
 })
 
 const partnershipsOffsetRow = tv({
-  base: 'rounded-lg w-full shadow-custom p-0 max-w-[75%] md:max-w-[50%] md:-mr-12 -mt-40 sm:-mt-52 relative z-10 grid-cols-1',
+  base: themedClass(
+    'partnershipsOffsetRowBase',
+    'p-0 max-w-[75%] md:max-w-[50%] md:-mr-12 -mt-40 sm:-mt-52 relative z-10 grid-cols-1',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'partnershipsOffsetRowVariantsColorSchemeNone',
+        'bg-gray-50',
+      ),
+      dark: themedClass(
+        'partnershipsOffsetRowVariantsColorSchemeDark',
+        'bg-gray-900',
+      ),
+      light: themedClass(
+        'partnershipsOffsetRowVariantsColorSchemeLight',
+        'bg-white',
+      ),
+      accent: themedClass(
+        'partnershipsOffsetRowVariantsColorSchemeAccent',
+        'bg-primary-700',
+      ),
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const bulletPoint = tv({
+  base: themedClass('bulletPointBase', 'size-6 flex-shrink-0'),
   variants: {
     colorScheme: {
-      none: 'bg-white',
-      dark: 'bg-gray-900',
-      light: 'bg-white',
-      accent: 'bg-primary-700',
+      none: themedClass('bulletPointVariantsColorSchemeNone', 'text-gray-950'),
+      dark: themedClass('bulletPointVariantsColorSchemeDark', 'text-white'),
+      light: themedClass(
+        'bulletPointVariantsColorSchemeLight',
+        'text-gray-950',
+      ),
+      accent: themedClass('bulletPointVariantsColorSchemeAccent', 'text-white'),
     },
   },
   defaultVariants: {

package/components/Paragraph/SingleTestimonial/index.vue

@@ -1,46 +1,85 @@
 <template>
-  <DesignSystemAtomsContainer :spacing="spacing" :colorScheme="colorScheme">
-    <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-5">
+  <DesignSystemAtomsContainer
+    :spacing="spacing"
+    :colorScheme="colorScheme"
+    :class="themedClass('containerClass')"
+  >
+    <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
+      <div
+        :class="themedClass('firstColumnClass', 'col-span-12 md:col-span-5')"
+      >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
+          :pretitleClass="themedClass('pretitleClass')"
           :title="title"
-          :subtitle="subtitle"
+          :titleClass="themedClass('titleClass', 'mb-0')"
           :titleWeight="titleWeight"
           :titleStyle="titleStyle"
-          titleClass="mb-0"
           :colorScheme="colorScheme"
         />
       </div>
-      <div class="col-span-12 flex items-end md:col-span-6 md:col-start-7">
+      <div
+        :class="
+          themedClass(
+            'secondColumnClass',
+            'col-span-12 flex items-end md:col-span-6 md:col-start-7',
+          )
+        "
+      >
         <DesignSystemOrganismsContentBlock
           :pretitle="textplain"
-          pretitleClass="mb-0"
+          :pretitleClass="themedClass('textPlainClass', 'mb-0')"
         />
       </div>
-      <div class="col-span-12 md:col-span-5">
+      <div
+        :class="themedClass('thirdColumnClass', 'col-span-12 md:col-span-5')"
+      >
         <DesignSystemOrganismsContentBlock
           :subtitle="subtitle"
+          :subtitleClass="themedClass('subtitleClass')"
           :text="text"
+          :textClass="themedClass('textClass')"
           :media="media"
-          mediaClass="size-full rounded-lg overflow-hidden"
-          mediaSliderClass="mt-0 rounded-lg overflow-hidden"
+          :mediaClass="themedClass('mediaClass')"
+          :mediaContainerClass="themedClass('mediaContainerClass', 'mt-0')"
           :colorScheme="colorScheme"
         />
 
         <BlokkliField
           name="field_icms_buttons"
           :list="buttons"
-          class="mt-6 flex flex-wrap gap-6"
-          :class="[buttonAlignment, { droptarget: isEditing }]"
+          :class="
+            cn(
+              themedClass(
+                'buttonsContainerClass',
+                'mt-6 flex flex-wrap items-center gap-6',
+              ),
+              buttonAlignment,
+              { droptarget: isEditing },
+            )
+          "
         />
       </div>
-      <div class="col-span-12 mt-4 md:col-span-6 md:col-start-7 md:mt-0">
+      <div
+        :class="
+          themedClass(
+            'fourthColumnClass',
+            'col-span-12 mt-4 md:col-span-6 md:col-start-7 md:mt-0',
+          )
+        "
+      >
         <BlokkliField
           name="field_icms_logo_elements"
           :list="logoelements"
-          class="flex flex-wrap items-center gap-6"
-          :class="{ droptarget: isEditing }"
+          :class="
+            cn(
+              themedClass(
+                'logoElementsContainerClass',
+                'flex flex-wrap items-center gap-6',
+              ),
+              { droptarget: isEditing },
+            )
+          "
         />
       </div>
     </DesignSystemAtomsGridRow>
@@ -49,11 +88,15 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutTestimonialFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+import cn from '@iqual/nuxt-icms/composables/useCn'
 
 defineProps<ParagraphIcmsLayoutTestimonialFragment>()
 
 const { options, isEditing } = useAttrs().blokkliData
 
+const themedClass = useTheme()
+
 const spacing = computed(() => {
   return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
 })

package/components/Paragraph/Table/index.vue

@@ -1,25 +1,46 @@
 <template>
-  <DesignSystemAtomsContainer :spacing="spacing" :colorScheme="colorScheme">
-    <DesignSystemAtomsGridRow>
-      <div class="col-span-12 md:col-span-12">
+  <DesignSystemAtomsContainer
+    :spacing="spacing"
+    :colorScheme="colorScheme"
+    :class="themedClass('containerClass')"
+  >
+    <DesignSystemAtomsGridRow :class="themedClass('firstRowClass')">
+      <div
+        :class="
+          themedClass('firstRowFirstColumnClass', 'col-span-12 md:col-span-12')
+        "
+      >
         <DesignSystemOrganismsContentBlock
           :pretitle="pretitle"
+          :pretitleClass="themedClass('pretitleClass')"
           :title="title"
+          :titleClass="themedClass('titleClass', 'mb-0')"
           :titleWeight="titleWeight"
           :titleStyle="titleStyle"
-          titleClass="mb-0"
           :subtitle="subtitle"
+          :subtitleClass="themedClass('subtitleClass')"
         />
       </div>
-      <div class="col-span-12 md:col-span-9">
-        <DesignSystemOrganismsContentBlock :text="text" />
+      <div
+        :class="
+          themedClass('firstRowSecondColumnClass', 'col-span-12 md:col-span-9')
+        "
+      >
+        <DesignSystemOrganismsContentBlock
+          :text="text"
+          :textClass="themedClass('textClass')"
+        />
       </div>
     </DesignSystemAtomsGridRow>
-    <DesignSystemAtomsGridRow class="mt-10 md:mt-20">
-      <div class="relative col-span-12">
+    <DesignSystemAtomsGridRow
+      :class="themedClass('secondRowClass', 'mt-10 md:mt-20')"
+    >
+      <div :class="themedClass('secondRowColumnClass', 'relative col-span-12')">
         <DesignSystemMoleculesTable
-          :table-data="tableData"
+          :tableData="tableData"
           :colorScheme="colorScheme"
+          :containerClass="themedClass('tableContainerClass')"
+          :tableClass="themedClass('tableClass')"
         />
       </div>
     </DesignSystemAtomsGridRow>
@@ -28,8 +49,10 @@
 
 <script lang="ts" setup>
 import type { ParagraphIcmsLayoutTableFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 defineProps<ParagraphIcmsLayoutTableFragment>()
+const themedClass = useTheme()
 
 const { options, parentType } = useAttrs().blokkliData