@iqual/nuxt-icms 1.4.10 → 1.5.0

package/components/DesignSystem/Organisms/SpotlightCard.vue

@@ -0,0 +1,174 @@
+<template>
+  <div :class="themedClass('containerClass', '@container relative')">
+    <a
+      v-if="link?.path"
+      :href="link?.path"
+      :title="linkLabel"
+      :class="themedClass('linkOverlayClass', 'absolute inset-0 z-4')"
+    />
+    <div :class="card({ colorScheme })">
+      <div :class="themedClass('mediaContainerClass', 'card-grid-item z-1')">
+        <Media
+          v-if="image"
+          :media="image"
+          imageAspectRatios="3/4"
+          imageSizes="xs:100vw sm:100vw md:50vw lg:33vw"
+          :mediaClass="themedClass('mediaClass')"
+          :figcaptionClass="themedClass('figcaptionClass')"
+          :elementClass="themedClass('elementClass')"
+        />
+      </div>
+
+      <div v-if="image" :class="overlay({ colorScheme })"></div>
+
+      <div
+        :class="
+          themedClass(
+            'contentContainerClass',
+            'card-grid-item z-3 flex flex-col p-6 lg:p-8',
+          )
+        "
+      >
+        <div v-if="icon" :class="cardIconWrapper({ colorScheme })">
+          <Media
+            :media="icon"
+            :mediaClass="
+              themedClass(
+                'iconMediaClass',
+                'w-full h-full object-scale-down object-center',
+              )
+            "
+          />
+        </div>
+        <slot name="content">
+          <DesignSystemOrganismsContentBlock
+            :pretitle="pretitle"
+            :pretitleClass="
+              themedClass(
+                'pretitleClass',
+                '[&>p:last-of-type]:mb-0 text-base lg:text-base font-medium',
+              )
+            "
+            :title="title"
+            :titleWeight="titleWeight"
+            :titleStyle="'heading-5'"
+            :titleClass="themedClass('titleClass', 'mb-2 font-semibold')"
+            :text="text"
+            :textClass="themedClass('textClass', '[&>p:last-of-type]:mb-0')"
+          />
+        </slot>
+        <slot name="links"></slot>
+      </div>
+    </div>
+  </div>
+</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'
+import { tv } from 'tailwind-variants'
+
+const themedClass = useTheme('DesignSystemOrganismsSpotlightCard')
+
+const props = defineProps<{
+  pretitle?: string
+  title?: string
+  text?: string
+  image?: MediaFragment
+  icon?: MediaFragment
+  link?: { path?: string }
+  linkLabel?: string
+  email?: string
+  phone?: string
+  linkExtra?: string
+  linkLinkedin?: string
+  containerClass?: string
+  pretitleClass?: string
+  titleClass?: string
+  textClass?: string
+}>()
+
+const colorScheme = inject<Ref<ColorScheme>>('colorScheme')
+const titleWeight = inject<string>('titleWeight')
+
+const card = tv({
+  base: themedClass('cardBase', 'card-grid relative gap-6 lg:gap-8 h-full'),
+  variants: {
+    colorScheme: {
+      none: themedClass('cardVariantsColorSchemeNone', 'bg-gray-50'),
+      dark: themedClass('cardVariantsColorSchemeDark', 'bg-gray-900'),
+      light: themedClass('cardVariantsColorSchemeLight', 'bg-white'),
+      accent: themedClass('cardVariantsColorSchemeAccent', 'bg-primary-700'),
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const cardIconWrapper = tv({
+  base: themedClass(
+    'cardIconWrapperBase',
+    'shrink-0 flex size-16 items-center justify-center p-2 aspect-square',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass('cardIconWrapperVariantsColorSchemeNone', 'bg-white'),
+      dark: themedClass(
+        'cardIconWrapperVariantsColorSchemeDark',
+        'bg-gray-950',
+      ),
+      light: themedClass(
+        'cardIconWrapperVariantsColorSchemeLight',
+        'bg-gray-50',
+      ),
+      accent: themedClass(
+        'cardIconWrapperVariantsColorSchemeAccent',
+        'bg-primary-600',
+      ),
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const overlay = tv({
+  base: themedClass('overlayBase', 'absolute inset-0 z-2'),
+  variants: {
+    colorScheme: {
+      none: themedClass(
+        'overlayVariantsColorSchemeNone',
+        'bg-gradient-to-t from-white/90 via-white/50 to-white/0',
+      ),
+      dark: themedClass(
+        'overlayVariantsColorSchemeDark',
+        'bg-gradient-to-t from-black/90 via-black/50 to-black/0',
+      ),
+      light: themedClass(
+        'overlayVariantsColorSchemeLight',
+        'bg-gradient-to-t from-white/90 via-white/50 to-white/0',
+      ),
+      accent: themedClass(
+        'overlayVariantsColorSchemeAccent',
+        'bg-gradient-to-t from-black/90 via-black/50 to-black/0',
+      ),
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+</script>
+
+<style lang="css" scoped>
+.card-grid {
+  display: grid;
+  grid-template-areas: 'content';
+}
+
+.card-grid-item {
+  grid-area: content;
+}
+</style>

package/components/DesignSystem/Organisms/TeamElement.vue

@@ -22,7 +22,7 @@
         :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',
+            'flex w-full grow flex-col gap-6 @xl:w-[calc(50%-24px)] @xl:shrink-1 @xl:justify-center @7xl:w-full',
           )
         "
       >
@@ -58,14 +58,12 @@
             :title="email"
             :link="'mailto:' + email"
             :target-blank="false"
-            :style="'minimal'"
+            :buttonStyle="'minimal'"
             :colorScheme="colorScheme"
             :buttonClass="
               themedClass('buttonClass', 'block p-0 font-normal break-all')
             "
             :labelClass="themedClass('labelClass')"
-            :sublineClass="themedClass('sublineClass')"
-            textAlignment="left"
           />
 
           <DesignSystemAtomsButton
@@ -73,14 +71,12 @@
             :title="phone"
             :link="'tel:' + phone"
             :target-blank="false"
-            :style="'minimal'"
+            :buttonStyle="'minimal'"
             :colorScheme="colorScheme"
             :buttonClass="
               themedClass('buttonClass', 'block p-0 font-normal break-all')
             "
             :labelClass="themedClass('labelClass')"
-            :sublineClass="themedClass('sublineClass')"
-            textAlignment="left"
           />
         </div>
 
@@ -130,7 +126,6 @@ defineProps<{
   buttonsContainerClass?: string
   buttonClass?: string
   labelClass?: string
-  sublineClass?: string
 }>()
 
 const teamElementWrapper = tv({

package/components/DesignSystem/Organisms/TeaserCard.vue

@@ -1,21 +1,23 @@
 <template>
   <div :class="themedClass('containerClass', '@container')">
     <div :class="teaserCard({ colorScheme })">
-      <Media
-        v-if="image"
-        :media="image"
-        imageSizes="xs:100vw sm:100vw md:420px lg:420px"
-        imageAspectRatios="16/9"
-        :mediaClass="themedClass('mediaClass', '@xl:w-1/2')"
-        :figcaptionClass="themedClass('figcaptionClass')"
-        :elementClass="themedClass('elementClass', 'w-full')"
-      />
+      <div :class="mediaContainer({ colorScheme })">
+        <Media
+          v-if="image"
+          :media="image"
+          imageSizes="xs:100vw sm:100vw md:420px lg:420px"
+          imageAspectRatios="16/9"
+          :mediaClass="themedClass('mediaClass', '@xl:w-1/2')"
+          :figcaptionClass="themedClass('figcaptionClass')"
+          :elementClass="themedClass('elementClass', 'w-full')"
+        />
+      </div>
 
       <div
         :class="
           themedClass(
             'textContainerClass',
-            '@xl:w-1/2 @7xl:p-12 @xl:p-0 flex h-full flex-col',
+            'flex h-full flex-col @xl:w-1/2 @xl:p-0 @7xl:p-12',
           )
         "
       >
@@ -50,19 +52,22 @@
         <slot name="extra"></slot>
         <slot name="buttongroup">
           <div
-            v-if="link"
+            v-if="link?.path"
             :class="themedClass('buttonContainerClass', 'mt-auto flex pt-6')"
           >
             <DesignSystemAtomsButton
-              :link="link"
-              :label="linkLabel ?? linkLabelFallback"
-              :title="linkLabel ?? linkLabelFallback"
+              :link="link?.path"
+              :label="
+                linkLabel ?? $texts('teaser_card.link_label', 'Read more')
+              "
+              :title="
+                linkLabel ?? $texts('teaser_card.link_label', 'Read more')
+              "
               :target-blank="false"
-              :style="'focus'"
+              :buttonStyle="'focus'"
               :colorScheme="colorScheme"
               :buttonClass="themedClass('buttonClass')"
               :labelClass="themedClass('labelClass')"
-              :sublineClass="themedClass('sublineClass')"
             />
           </div>
         </slot>
@@ -75,20 +80,19 @@
 import type { ColorScheme } from '@iqual/nuxt-icms/types/global'
 import type { MediaFragment } from '#graphql-operations'
 import { tv } from 'tailwind-variants'
+import cn from '@iqual/nuxt-icms/composables/useCn'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
 const themedClass = useTheme('DesignSystemOrganismsTeaserCard')
 
-defineProps<{
+const props = defineProps<{
   image?: MediaFragment
   pretitle?: string
   title?: string
-  titleWeight?: string
   subtitle?: string
   text?: string
-  link?: string
+  link?: { path?: string }
   linkLabel?: string
-  colorScheme?: ColorScheme
   containerClass?: string
   mediaClass?: string
   figcaptionClass?: string
@@ -101,11 +105,12 @@ defineProps<{
   buttonContainerClass?: string
   buttonClass?: string
   labelClass?: string
-  sublineClass?: string
 }>()
 
 const { $texts } = useNuxtApp()
-const linkLabelFallback = $texts('teaser_card.link_label', 'Read more')
+
+const colorScheme = inject<Ref<ColorScheme>>('colorScheme')
+const titleWeight = inject<string>('titleWeight')
 
 const teaserCard = tv({
   base: themedClass(
@@ -124,4 +129,22 @@ const teaserCard = tv({
     colorScheme: 'none',
   },
 })
+
+const mediaContainer = tv({
+  base: themedClass('mediaContainerBase', 'shrink-0 aspect-video'),
+  variants: {
+    colorScheme: {
+      none: themedClass('mediaContainerVariantsColorSchemeNone', 'bg-gray-50'),
+      dark: themedClass('mediaContainerVariantsColorSchemeDark', 'bg-gray-900'),
+      light: themedClass('mediaContainerVariantsColorSchemeLight', 'bg-white'),
+      accent: themedClass(
+        'mediaContainerVariantsColorSchemeAccent',
+        'bg-primary-700',
+      ),
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
 </script>

package/components/DesignSystem/Organisms/TeaserSimple.vue

@@ -0,0 +1,116 @@
+<template>
+  <div :class="themedClass('containerClass', '@container relative')">
+    <a
+      v-if="link?.path"
+      :href="link?.path"
+      :title="linkLabel"
+      :class="themedClass('linkOverlayClass', 'peer absolute inset-0 z-1')"
+    />
+    <div :class="teaser({ colorScheme })">
+      <slot name="content">
+        <DesignSystemOrganismsContentBlock
+          :title="title"
+          :titleWeight="titleWeight"
+          :titleStyle="'heading-5'"
+          :titleClass="themedClass('titleClass', 'mb-0 font-semibold')"
+        />
+      </slot>
+      <slot name="links"></slot>
+      <div
+        v-if="link?.path"
+        :class="
+          themedClass('iconWrapperClass', 'flex items-center justify-end')
+        "
+      >
+        <SpriteSymbol name="arrow-right" :class="arrow({ colorScheme })" />
+      </div>
+    </div>
+  </div>
+</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'
+import { tv } from 'tailwind-variants'
+
+const themedClass = useTheme('DesignSystemOrganismsTeaserSimple')
+
+defineProps<{
+  title?: string
+  link?: { path?: string }
+  linkLabel?: string
+  email?: string
+  phone?: string
+  linkExtra?: string
+  linkLinkedin?: string
+  containerClass?: string
+  titleClass?: string
+}>()
+
+const colorScheme = inject<Ref<ColorScheme>>('colorScheme')
+const titleWeight = inject<string>('titleWeight')
+
+const teaser = tv({
+  base: themedClass(
+    'teaserBase',
+    'flex h-full flex-col gap-6 p-6 lg:p-8 justify-between peer-hover:[&_svg]:translate-x-[5px]',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass('teaserVariantsColorSchemeNone', 'bg-gray-50'),
+      dark: themedClass('teaserVariantsColorSchemeDark', 'bg-gray-900'),
+      light: themedClass('teaserVariantsColorSchemeLight', 'bg-white'),
+      accent: themedClass('teaserVariantsColorSchemeAccent', 'bg-primary-700'),
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const teaserIconWrapper = tv({
+  base: themedClass(
+    'teaserIconWrapperBase',
+    'shrink-0 flex size-16 items-center justify-center p-2 aspect-square mb-6 lg:mb-8',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass('teaserIconWrapperVariantsColorSchemeNone', 'bg-white'),
+      dark: themedClass(
+        'teaserIconWrapperVariantsColorSchemeDark',
+        'bg-gray-900',
+      ),
+      light: themedClass(
+        'teaserIconWrapperVariantsColorSchemeLight',
+        'bg-gray-50',
+      ),
+      accent: themedClass(
+        'teaserIconWrapperVariantsColorSchemeAccent',
+        'bg-primary-600',
+      ),
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const arrow = tv({
+  base: themedClass('bulletPointBase', 'size-6 shrink-0 transition-transform'),
+  variants: {
+    colorScheme: {
+      none: themedClass('bulletPointVariantsColorSchemeNone', 'text-gray-950'),
+      dark: themedClass('bulletPointVariantsColorSchemeDark', 'text-white'),
+      light: themedClass(
+        'bulletPointVariantsColorSchemeLight',
+        'text-gray-950',
+      ),
+      accent: themedClass('bulletPointVariantsColorSchemeAccent', 'text-white'),
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+</script>

package/components/DesignSystem/Organisms/Testimonial.vue

@@ -55,7 +55,10 @@
         :media="logo"
         imageSizes="xs:100px"
         :mediaClass="
-          themedClass('logoMediaClass', 'hidden max-w-24 lg:block shrink-0')
+          themedClass(
+            'logoMediaClass',
+            'hidden max-w-24 max-h-12 lg:block shrink-0',
+          )
         "
         :figcaptionClass="themedClass('logoFigcaptionClass')"
         :elementClass="themedClass('logoElementClass')"

package/components/DesignSystem/Organisms/TextCard.vue

@@ -0,0 +1,131 @@
+<template>
+  <div :class="themedClass('containerClass', '@container relative')">
+    <a
+      v-if="link?.path"
+      :href="link?.path"
+      :title="linkLabel"
+      :class="themedClass('linkOverlayClass', 'absolute inset-0 z-1')"
+    />
+    <div :class="card({ colorScheme })">
+      <div v-if="icon" :class="cardIconWrapper({ colorScheme })">
+        <Media
+          :media="icon"
+          :mediaClass="
+            themedClass(
+              'mediaClass',
+              'w-full h-full object-scale-down object-center',
+            )
+          "
+        />
+      </div>
+      <slot name="content">
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :pretitleClass="
+            themedClass(
+              'pretitleClass',
+              '[&>p:last-of-type]:mb-0 text-base lg:text-base font-medium',
+            )
+          "
+          :title="title"
+          :titleWeight="titleWeight"
+          :titleStyle="'heading-5'"
+          :titleClass="themedClass('titleClass', 'mb-2 font-semibold')"
+          :text="text"
+          :textClass="themedClass('textClass', '[&>p:last-of-type]:mb-0')"
+        />
+      </slot>
+      <slot name="links">
+        <div
+          v-if="link?.path"
+          :class="
+            themedClass(
+              'linksContainerClass',
+              'relative z-2 flex flex-wrap items-center gap-4',
+            )
+          "
+        >
+          <DesignSystemAtomsButton
+            :label="$texts('teaser_card.link_label', 'Read more')"
+            :title="$texts('teaser_card.link_label', 'Read more')"
+            :link="link?.path"
+            :target-blank="false"
+            :buttonStyle="'minimal'"
+            :colorScheme="colorScheme"
+            :buttonClass="themedClass('buttonClass')"
+            :labelClass="themedClass('labelClass')"
+          />
+        </div>
+      </slot>
+    </div>
+  </div>
+</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'
+import { tv } from 'tailwind-variants'
+
+const themedClass = useTheme('DesignSystemOrganismsTextCard')
+
+defineProps<{
+  pretitle?: string
+  title?: string
+  text?: string
+  image?: MediaFragment
+  icon?: MediaFragment
+  link?: { path?: string }
+  linkLabel?: string
+  email?: string
+  phone?: string
+  linkExtra?: string
+  linkLinkedin?: string
+  containerClass?: string
+  pretitleClass?: string
+  titleClass?: string
+  textClass?: string
+}>()
+
+const colorScheme = inject<Ref<ColorScheme>>('colorScheme')
+const titleWeight = inject<string>('titleWeight')
+
+const card = tv({
+  base: themedClass('cardBase', 'flex h-full flex-col gap-4 justify-between'),
+  variants: {
+    colorScheme: {
+      none: themedClass('cardVariantsColorSchemeNone'),
+      dark: themedClass('cardVariantsColorSchemeDark'),
+      light: themedClass('cardVariantsColorSchemeLight'),
+      accent: themedClass('cardVariantsColorSchemeAccent'),
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const cardIconWrapper = tv({
+  base: themedClass(
+    'cardIconWrapperBase',
+    'shrink-0 flex size-16 items-center justify-center p-2 aspect-square mb-4',
+  ),
+  variants: {
+    colorScheme: {
+      none: themedClass('cardIconWrapperVariantsColorSchemeNone', 'bg-gray-50'),
+      dark: themedClass(
+        'cardIconWrapperVariantsColorSchemeDark',
+        'bg-gray-900',
+      ),
+      light: themedClass('cardIconWrapperVariantsColorSchemeLight', 'bg-white'),
+      accent: themedClass(
+        'cardIconWrapperVariantsColorSchemeAccent',
+        'bg-primary-700',
+      ),
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+</script>

package/components/DesignSystem/Organisms/TwoColumnTextElement.vue

@@ -2,9 +2,12 @@
   <DesignSystemAtomsGridRow :class="themedClass('containerClass')">
     <div
       :class="
-        themedClass(
-          'firstColumnClass',
-          'col-span-12 sm:col-span-6 lg:col-span-5 lg:col-start-2',
+        cn(
+          themedClass(
+            'firstColumnClass',
+            'col-span-12 sm:col-span-6 lg:col-span-5',
+          ),
+          firstColumnClass,
         )
       "
     >
@@ -20,9 +23,12 @@
     </div>
     <div
       :class="
-        themedClass(
-          'secondColumnClass',
-          'col-span-12 sm:col-span-6 lg:col-span-4 lg:col-start-8',
+        cn(
+          themedClass(
+            'secondColumnClass',
+            'col-span-12 sm:col-span-6 lg:col-span-4',
+          ),
+          secondColumnClass,
         )
       "
     >
@@ -39,7 +45,7 @@
           cn(
             themedClass(
               'textContainerClass',
-              'ck-content hyphens-auto text-base lg:hyphens-none',
+              'ck-content text-base hyphens-auto lg:hyphens-none',
             ),
             textClass,
           )
@@ -51,6 +57,8 @@
 </template>
 
 <script lang="ts" setup>
+import type { Ref } from 'vue'
+import type { AlignHorizontalReduced } from '@iqual/nuxt-icms/types/global'
 import cn from '@iqual/nuxt-icms/composables/useCn'
 import { useTheme } from '@iqual/nuxt-icms/composables/useTheme'
 
@@ -68,10 +76,26 @@ defineProps<{
   text?: string
   textClass?: string
   containerClass?: string
-  firstColumnClass?: string
-  secondColumnClass?: string
   titleCompositionFirstContainerClass?: string
   titleCompositionSecondContainerClass?: string
   textContainerClass?: string
 }>()
+
+const alignHorizontalReduced = inject<Ref<AlignHorizontalReduced>>(
+  'alignHorizontalReduced',
+)
+
+const firstColumnClass = computed(() => {
+  if (alignHorizontalReduced?.value === 'right') {
+    return 'lg:col-start-8 lg:order-2'
+  }
+  return 'lg:col-start-2 lg:order-1'
+})
+
+const secondColumnClass = computed(() => {
+  if (alignHorizontalReduced?.value === 'right') {
+    return 'lg:col-start-2 lg:order-1'
+  }
+  return 'lg:col-start-8 lg:order-2'
+})
 </script>