@iqual/nuxt-icms 1.3.1 → 1.4.1

package/components/DesignSystem/Organisms/TeamElement.vue

@@ -1,28 +1,58 @@
 <template>
-  <div class="@container">
+  <div :class="themedClass('containerClass', '@container')">
     <div :class="teamElementWrapper({ colorScheme })">
       <Media
         v-if="image"
         :media="image"
         imageAspectRatios="1/1"
-        imageSizes="xs:100vw sm:100vw md:320px lg:380px"
-        mediaClass="aspect-square min-h-64 rounded-full overflow-hidden object-cover object-center @xl:w-[calc(50%-24px)] @xl:shrink-0"
+        imageSizes="xs:100vw sm:100vw md:420px lg:420px"
+        :mediaClass="
+          themedClass(
+            'mediaClass',
+            'min-h-64 w-full @xl:w-[calc(50%-24px)] @xl:shrink-0 @7xl:w-fit',
+          )
+        "
+        :figcaptionClass="themedClass('figcaptionClass')"
+        :elementClass="
+          themedClass('elementClass', 'w-full rounded-full overflow-hidden')
+        "
       />
 
       <div
-        class="@xl:shrink-1 flex w-full grow flex-col gap-6 @xl:w-[calc(50%-24px)] @xl:justify-center"
+        :class="
+          themedClass(
+            'textContainerClass',
+            '@xl:shrink-1 @xl:w-[calc(50%-24px)] @xl:justify-center @7xl:w-full flex w-full grow flex-col gap-6',
+          )
+        "
       >
         <DesignSystemOrganismsContentBlock
-          :title="(firstname ?? '') + ((firstname && lastname) ? ' ' : '') + (lastname ?? '')"
+          :title="
+            (firstname ?? '') +
+            (firstname && lastname ? ' ' : '') +
+            (lastname ?? '')
+          "
           :titleWeight="titleWeight"
-          titleClass="text-2xl lg:text-2xl font-semibold mb-2 last:mb-0"
+          :titleClass="
+            themedClass(
+              'titleClass',
+              'text-2xl lg:text-2xl font-semibold mb-2 last:mb-0',
+            )
+          "
           :subtitle="position"
-          subtitleClass="mb-0"
+          :subtitleClass="themedClass('subtitleClass', 'mb-0')"
           :text="text"
-          textClass="mt-2"
+          :textClass="themedClass('textClass', 'mt-2')"
         />
 
-        <div class="mt-auto flex flex-col gap-2">
+        <div
+          :class="
+            themedClass(
+              'contactButtonsContainerClass',
+              'mt-auto flex flex-col gap-2',
+            )
+          "
+        >
           <DesignSystemAtomsButton
             :label="email"
             :title="email"
@@ -30,7 +60,12 @@
             :target-blank="false"
             :style="'minimal'"
             :colorScheme="colorScheme"
-            buttonClass="block p-0 font-normal break-all"
+            :buttonClass="
+              themedClass('buttonClass', 'block p-0 font-normal break-all')
+            "
+            :labelClass="themedClass('labelClass')"
+            :sublineClass="themedClass('sublineClass')"
+            textAlignment="left"
           />
 
           <DesignSystemAtomsButton
@@ -40,14 +75,24 @@
             :target-blank="false"
             :style="'minimal'"
             :colorScheme="colorScheme"
-            buttonClass="block p-0 font-normal break-all"
+            :buttonClass="
+              themedClass('buttonClass', 'block p-0 font-normal break-all')
+            "
+            :labelClass="themedClass('labelClass')"
+            :sublineClass="themedClass('sublineClass')"
+            textAlignment="left"
           />
         </div>
 
         <BlokkliField
           name="field_icms_buttons"
           :list="buttons"
-          class="flex flex-wrap gap-4"
+          :class="
+            themedClass(
+              'buttonsContainerClass',
+              'flex flex-wrap items-center gap-4',
+            )
+          "
         />
       </div>
     </div>
@@ -55,8 +100,12 @@
 </template>
 
 <script lang="ts" setup>
-import { tv } from 'tailwind-variants'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import type { MediaFragment } from '#graphql-operations'
+import { tv } from 'tailwind-variants'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const themedClass = useTheme('DesignSystemOrganismsTeamElement')
 
 defineProps<{
   firstname?: string
@@ -68,22 +117,37 @@ defineProps<{
   text?: string
   image?: MediaFragment
   buttons?: Array<object>
-  colorScheme?: string
+  colorScheme?: ColorScheme
+  containerClass?: string
+  mediaClass?: string
+  figcaptionClass?: string
+  elementClass?: string
+  textContainerClass?: string
+  titleClass?: string
+  subtitleClass?: string
+  textClass?: string
+  contactButtonsContainerClass?: string
+  buttonsContainerClass?: string
+  buttonClass?: string
+  labelClass?: string
+  sublineClass?: string
 }>()
 
 const teamElementWrapper = tv({
-  base: 'flex h-full flex-col gap-6 rounded-lg items-center p-6 shadow-custom-small @xl:flex-row @7xl:p-12 @xl:gap-12',
+  base: themedClass(
+    'teamElementWrapperBase',
+    'flex h-full flex-col gap-6 items-center @xl:flex-row @xl:gap-12',
+  ),
   variants: {
     colorScheme: {
-      none: 'bg-white',
-      dark: 'bg-gray-900',
-      light: 'bg-white',
-      accent: 'bg-primary-700',
+      none: themedClass('teamElementWrapperVariantsColorSchemeNone'),
+      dark: themedClass('teamElementWrapperVariantsColorSchemeDark'),
+      light: themedClass('teamElementWrapperVariantsColorSchemeLight'),
+      accent: themedClass('teamElementWrapperVariantsColorSchemeAccent'),
     },
   },
   defaultVariants: {
     colorScheme: 'none',
   },
 })
-
 </script>

package/components/DesignSystem/Organisms/TeaserCard.vue

@@ -1,46 +1,83 @@
 <template>
-  <div class="@container">
+  <div :class="themedClass('containerClass', '@container')">
     <div :class="teaserCard({ colorScheme })">
       <Media
         v-if="image"
         :media="image"
-        imageSizes="xs:100vw sm:100vw md:320px lg:380px"
-        imageAspectRatios="16/9"
-        mediaClass="aspect-16/9 w-full @xl:w-1/2"
-        elementClass="size-full object-cover object-center rounded-lg"
+        imageSizes="xs:100vw sm:100vw md:420px lg:420px"
+        imageAspectRatios="4/3"
+        :mediaClass="themedClass('mediaClass', '@xl:w-1/2')"
+        :figcaptionClass="themedClass('figcaptionClass')"
+        :elementClass="themedClass('elementClass', 'w-full')"
       />
 
-      <div class="flex h-full flex-col @xl:w-1/2">
-        <DesignSystemOrganismsContentBlock
-          :pretitle="pretitle"
-          pretitleClass="mb-2 text-base lg:text-base text-gray-300 font-medium"
-          :title="title"
-          :titleWeight="titleWeight"
-          titleClass="mb-2 text-xl lg:text-xl @sm:!text-2xl font-semibold line-clamp-4"
-          :subtitle="subtitle"
-          subtitleClass="mb-2 text-base lg:text-base font-semibold"
-          :text="text"
-          textClass="text-sm line-clamp-4"
-        />
-
-        <div v-if="link" class="mt-auto flex pt-6">
-          <DesignSystemAtomsButton
-            :link="link"
-            :label="linkLabel ?? linkLabelFallback"
-            :title="linkLabel ?? linkLabelFallback"
-            :target-blank="false"
-            :style="'normal'"
-            :colorScheme="colorScheme"
+      <div
+        :class="
+          themedClass(
+            'textContainerClass',
+            '@xl:w-1/2 @7xl:p-12 @xl:p-0 flex h-full flex-col',
+          )
+        "
+      >
+        <slot name="content">
+          <DesignSystemOrganismsContentBlock
+            :pretitle="pretitle"
+            :pretitleClass="
+              themedClass(
+                'pretitleClass',
+                'mb-2 text-base lg:text-base font-medium',
+              )
+            "
+            :title="title"
+            :titleWeight="titleWeight"
+            :titleClass="
+              themedClass(
+                'titleClass',
+                'mb-2 text-xl lg:text-xl @sm:!text-2xl font-semibold line-clamp-4',
+              )
+            "
+            :subtitle="subtitle"
+            :subtitleClass="
+              themedClass(
+                'subtitleClass',
+                'mb-2 text-base lg:text-base font-semibold',
+              )
+            "
+            :text="text"
+            :textClass="themedClass('textClass', 'text-sm line-clamp-4')"
           />
-        </div>
+        </slot>
+        <slot name="extra"></slot>
+        <slot name="buttongroup">
+          <div
+            v-if="link"
+            :class="themedClass('buttonContainerClass', 'mt-auto flex pt-6')"
+          >
+            <DesignSystemAtomsButton
+              :link="link"
+              :label="linkLabel ?? linkLabelFallback"
+              :title="linkLabel ?? linkLabelFallback"
+              :target-blank="false"
+              :style="'focus'"
+              :colorScheme="colorScheme"
+              :buttonClass="themedClass('buttonClass')"
+              :labelClass="themedClass('labelClass')"
+              :sublineClass="themedClass('sublineClass')"
+            />
+          </div>
+        </slot>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { tv } from 'tailwind-variants'
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import type { MediaFragment } from '#graphql-operations'
+import { tv } from 'tailwind-variants'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const themedClass = useTheme('DesignSystemOrganismsTeaserCard')
 
 defineProps<{
   image?: MediaFragment
@@ -51,20 +88,36 @@ defineProps<{
   text?: string
   link?: string
   linkLabel?: string
-  colorScheme?: string
+  colorScheme?: ColorScheme
+  containerClass?: string
+  mediaClass?: string
+  figcaptionClass?: string
+  elementClass?: string
+  textContainerClass?: string
+  pretitleClass?: string
+  titleClass?: string
+  subtitleClass?: string
+  textClass?: string
+  buttonContainerClass?: string
+  buttonClass?: string
+  labelClass?: string
+  sublineClass?: string
 }>()
 
 const { $texts } = useNuxtApp()
 const linkLabelFallback = $texts('teaser_card.link_label', 'Read more')
 
 const teaserCard = tv({
-  base: 'relative shadow-custom-small rounded-lg p-6 h-full flex gap-6 flex-col @xl:flex-row @7xl:p-12 @7xl:gap-12',
+  base: themedClass(
+    'teaserCardBase',
+    'relative h-full flex gap-6 flex-col @xl:flex-row @7xl:gap-12',
+  ),
   variants: {
     colorScheme: {
-      none: 'bg-white',
-      dark: 'bg-gray-900',
-      light: 'bg-white',
-      accent: 'bg-primary-700',
+      none: themedClass('teaserCardVariantsColorSchemeNone'),
+      dark: themedClass('teaserCardVariantsColorSchemeDark'),
+      light: themedClass('teaserCardVariantsColorSchemeLight'),
+      accent: themedClass('teaserCardVariantsColorSchemeAccent'),
     },
   },
   defaultVariants: {

package/components/DesignSystem/Organisms/Testimonial.vue

@@ -1,43 +1,76 @@
 <template>
-  <div>
+  <div :class="themedClass('containerClass')">
     <DesignSystemOrganismsContentBlock
       :title="title"
       :titleWeight="titleWeight"
-      titleClass="text-xl font-semibold lg:text-2xl mb-1"
+      :titleClass="
+        themedClass('titleClass', 'text-xl font-semibold lg:text-2xl mb-1')
+      "
       :text="text"
+      :textClass="themedClass('textClass')"
       :colorScheme="colorScheme"
     />
-    <div class="mt-10 flex items-center">
+    <div
+      :class="themedClass('authorContainerClass', 'mt-10 flex items-center')"
+    >
       <Media
         v-if="image"
         :media="image"
         imageAspectRatios="1/1"
         imageSizes="xs:60px"
-        mediaClass="mr-6 size-16 rounded-full overflow-hidden"
+        :mediaClass="
+          themedClass(
+            'mediaClass',
+            'mr-6 size-16 rounded-full overflow-hidden shrink-0',
+          )
+        "
+        :figcaptionClass="themedClass('figcaptionClass')"
+        :elementClass="themedClass('elementClass')"
       />
       <div
-        class="flex shrink-0 flex-col"
-        :class="{ 'mr-6 border-black pr-6 lg:border-r-1': logo }"
+        :class="[
+          themedClass('authorNameContainerClass', 'flex flex-col'),
+          logo ? authorDivider({ colorScheme }) : '',
+        ]"
       >
         <div>
-          <span v-if="firstName" class="font-bold">{{ firstName }}</span>
-          <span v-if="lastName">&nbsp;</span>
-          <span v-if="lastName" class="font-bold">{{ lastName }}</span>
+          <span
+            v-if="firstName"
+            :class="themedClass('authorFirstNameClass', 'font-bold')"
+            >{{ firstName }}</span
+          >
+          <template v-if="lastName">
+            <span>&nbsp;</span>
+            <span :class="themedClass('authorLastNameClass', 'font-bold')">{{
+              lastName
+            }}</span>
+          </template>
+        </div>
+        <div v-if="position" :class="themedClass('authorPositionClass')">
+          {{ position }}
         </div>
-        <div v-if="position">{{ position }}</div>
       </div>
       <Media
         v-if="logo"
         :media="logo"
         imageSizes="xs:100px"
-        mediaClass="hidden max-w-24 lg:block"
+        :mediaClass="
+          themedClass('logoMediaClass', 'hidden max-w-24 lg:block shrink-0')
+        "
+        :figcaptionClass="themedClass('logoFigcaptionClass')"
+        :elementClass="themedClass('logoElementClass')"
       />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import type { MediaFragment } from '#graphql-operations'
+import { tv } from 'tailwind-variants'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const themedClass = useTheme('DesignSystemOrganismsTestimonial')
 
 defineProps<{
   title?: string
@@ -48,6 +81,43 @@ defineProps<{
   lastName?: string
   position?: string
   logo?: MediaFragment
-  colorScheme?: string
+  colorScheme?: ColorScheme
+  containerClass?: string
+  titleClass?: string
+  textClass?: string
+  mediaClass?: string
+  figcaptionClass?: string
+  elementClass?: string
+  authorContainerClass?: string
+  authorNameContainerClass?: string
+  authorNameClass?: string
+  authorPositionClass?: string
+  logoMediaClass?: string
+  logoFigcaptionClass?: string
+  logoElementClass?: string
 }>()
+
+const authorDivider = tv({
+  base: themedClass(
+    'authorDividerBase',
+    'lg:border-r-1 mr-6 border-black pr-6',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass('authorDividerVariantsColorSchemeNone', 'border-black'),
+      dark: themedClass('authorDividerVariantsColorSchemeDark', 'border-white'),
+      light: themedClass(
+        'authorDividerVariantsColorSchemeLight',
+        'border-black',
+      ),
+      accent: themedClass(
+        'authorDividerVariantsColorSchemeAccent',
+        'border-white',
+      ),
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
 </script>

package/components/DesignSystem/Organisms/TimelineElement.vue

@@ -1,46 +1,64 @@
 <template>
   <DesignSystemAtomsGridRow
-    class="flex w-full shrink-0 flex-col-reverse justify-end p-0 lg:grid lg:scroll-mt-32"
     data-timeline-element
+    :class="
+      themedClass(
+        'containerClass',
+        'flex w-full shrink-0 flex-col-reverse justify-end p-0 lg:grid lg:scroll-mt-32',
+      )
+    "
   >
     <!-- Text column -->
-    <div :class="textColumnClasses">
+    <div :class="themedClass('firstColumnClass', textColumnClasses)">
       <DesignSystemOrganismsContentBlock
         :pretitle="pretitle"
+        :pretitleClass="themedClass('pretitleClass')"
         :title="title"
         :titleStyle="titleStyle"
         :titleWeight="titleWeight"
-        titleClass="mb-2"
+        :titleClass="themedClass('titleClass', 'mb-2')"
         :subtitle="subtitle"
-        subtitleClass="font-semibold"
+        :subtitleClass="themedClass('subtitleClass', 'font-semibold')"
         :text="text"
+        :textClass="themedClass('textClass')"
         :colorScheme="colorScheme"
-        :hasDecorativeLine="false"
       />
       <BlokkliField
         name="field_icms_buttons"
         :list="buttons"
-        class="mt-6 flex flex-wrap gap-6"
-        :class="[{ droptarget: isEditing }]"
+        :class="[
+          themedClass(
+            'buttonsContainerClass',
+            'mt-6 flex flex-wrap items-center gap-6',
+          ),
+          { droptarget: isEditing },
+        ]"
       />
     </div>
 
     <!-- Media column -->
-    <div :class="mediaColumnClasses">
+    <div :class="themedClass('secondColumnClass', mediaColumnClasses)">
       <DesignSystemMoleculesMediaSlider
         v-if="media"
         :media="media"
-        :colorScheme="colorScheme"
-        sliderClass="my-0"
+        colorScheme="none"
+        :containerClass="themedClass('mediaContainerClass', 'my-0')"
         imageSizes="xs:750px sm:750px md:750px lg:750px"
-        mediaClass="my-0 w-full rounded-lg overflow-hidden"
+        :mediaClass="themedClass('mediaClass', 'my-0')"
+        :figcaptionClass="themedClass('figcaptionClass')"
+        :elementClass="themedClass('elementClass')"
       />
     </div>
   </DesignSystemAtomsGridRow>
 </template>
 
 <script lang="ts" setup>
+import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import type { MediaFragment } from '#graphql-operations'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const themedClass = useTheme('DesignSystemOrganismsTimelineElement')
+
 const props = defineProps<{
   pretitle?: string
   title?: string
@@ -50,10 +68,22 @@ const props = defineProps<{
   text?: string
   media?: (MediaFragment | null)[] | undefined
   buttons?: Array<object>
-  colorScheme?: string
+  colorScheme?: ColorScheme
   hasDecorativeLine?: boolean
   reverseColumns?: boolean
   isEditing?: boolean
+  containerClass?: string
+  firstColumnClass?: string
+  secondColumnClass?: string
+  pretitleClass?: string
+  titleClass?: string
+  subtitleClass?: string
+  textClass?: string
+  buttonsContainerClass?: string
+  mediaContainerClass?: string
+  mediaClass?: string
+  figcaptionClass?: string
+  elementClass?: string
 }>()
 
 const reverseColumns = ref(false)

package/components/DesignSystem/Organisms/TwoColumnTextElement.vue

@@ -1,32 +1,61 @@
 <template>
-  <DesignSystemAtomsGridRow>
-    <div class="col-span-12 sm:col-span-6 lg:col-span-5 lg:col-start-2">
+  <DesignSystemAtomsGridRow :class="themedClass('containerClass')">
+    <div
+      :class="
+        themedClass(
+          'firstColumnClass',
+          'col-span-12 sm:col-span-6 lg:col-span-5 lg:col-start-2',
+        )
+      "
+    >
       <DesignSystemMoleculesTitleComposition
+        :containerClass="themedClass('titleCompositionFirstContainerClass')"
         :pretitle="pretitle"
-        :pretitleClass="pretitleClass"
+        :pretitleClass="themedClass('pretitleClass')"
         :title="title"
-        :titleClass="titleClass"
+        :titleClass="themedClass('titleClass')"
         :weight="titleWeight"
         :style="titleStyle"
       />
     </div>
-    <div class="col-span-12 sm:col-span-6 lg:col-span-4 lg:col-start-8">
+    <div
+      :class="
+        themedClass(
+          'secondColumnClass',
+          'col-span-12 sm:col-span-6 lg:col-span-4 lg:col-start-8',
+        )
+      "
+    >
       <DesignSystemMoleculesTitleComposition
+        :containerClass="
+          themedClass('titleCompositionSecondContainerClass', 'mb-2 text-base')
+        "
         :subtitle="subtitle"
-        :subtitleClass="subtitleClass"
-        class="mb-2 text-base"
+        :subtitleClass="themedClass('subtitleClass')"
       />
       <div
         v-if="text"
-        class="ck-content hyphens-auto text-base"
+        :class="
+          cn(
+            themedClass(
+              'textContainerClass',
+              'ck-content hyphens-auto text-base lg:hyphens-none',
+            ),
+            textClass,
+          )
+        "
         v-html="text"
-        :textClass="textClass"
       />
     </div>
   </DesignSystemAtomsGridRow>
 </template>
 
 <script lang="ts" setup>
+import cn from '@iqual/nuxt-icms/composables/useCn'
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const themedClass = useTheme('DesignSystemOrganismsTwoColumnTextElement')
+
 defineProps<{
   pretitle?: string
   pretitleClass?: string
@@ -38,5 +67,11 @@ defineProps<{
   subtitleClass?: string
   text?: string
   textClass?: string
+  containerClass?: string
+  firstColumnClass?: string
+  secondColumnClass?: string
+  titleCompositionFirstContainerClass?: string
+  titleCompositionSecondContainerClass?: string
+  textContainerClass?: string
 }>()
 </script>

package/components/DesignSystem/Pages/Search.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <DesignSystemAtomsContainer :class="themedClass('containerClass')">
+      <DesignSystemAtomsGridRow :class="themedClass('rowClass')">
+        <div :class="themedClass('columnClass', 'col-span-12')">
+          <SearchFacetsFacetedSearchUI
+            :base-filter="{}"
+            :facets="['type']"
+            listing-type="all"
+            :items-per-page="4"
+            :no-results-text="
+              $texts(
+                'listing.no_results',
+                'Currently there is no content available.',
+              )
+            "
+            :loading-text="$texts('listing.loading', 'Loading...')"
+            :load-more-text="$texts('listing.load_more', 'Load more')"
+            color-scheme="none"
+            :debug="false"
+            :enable-text-search="true"
+            group-results-by-facet="type"
+          >
+            <template #results="{ results }">
+              <DesignSystemOrganismsSearchResults :results="results" />
+            </template>
+          </SearchFacetsFacetedSearchUI>
+        </div>
+      </DesignSystemAtomsGridRow>
+    </DesignSystemAtomsContainer>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
+
+const themedClass = useTheme('DesignSystemPagesSearch')
+const { $texts } = useNuxtApp()
+</script>