@iqual/nuxt-icms 1.0.2

package/components/DesignSystem/Molecules/TitleComposition.vue

@@ -0,0 +1,66 @@
+<template>
+  <div v-if="pretitle || title || subtitle">
+    <p
+      v-if="pretitle"
+      :class="
+        cn('mb-2 text-xl font-semibold lg:text-2xl', props.pretitleClass)
+      "
+    >
+      {{ pretitle }}
+    </p>
+    <h1 v-if="title && weight === 'h1'" :class="cn(titleClassList, props.titleClass)" v-html="title.replace(/\n/g, '<br>')"></h1>
+    <h2 v-if="title && weight === 'h2'" :class="cn(titleClassList, props.titleClass)" v-html="title.replace(/\n/g, '<br>')"></h2>
+    <h3 v-if="title && weight === 'h3'" :class="cn(titleClassList, props.titleClass)" v-html="title.replace(/\n/g, '<br>')"></h3>
+    <h4 v-if="title && weight === 'h4'" :class="cn(titleClassList, props.titleClass)" v-html="title.replace(/\n/g, '<br>')"></h4>
+    <h5 v-if="title && weight === 'h5'" :class="cn(titleClassList, props.titleClass)" v-html="title.replace(/\n/g, '<br>')"></h5>
+    <h6 v-if="title && weight === 'h6'" :class="cn(titleClassList, props.titleClass)" v-html="title.replace(/\n/g, '<br>')"></h6>
+    <p v-if="title && weight === 'p'" :class="cn(titleClassList, props.titleClass)" v-html="title.replace(/\n/g, '<br>')"></p>
+    <p v-if="subtitle" :class="cn('mb-2 font-semibold', props.subtitleClass)">
+      {{ subtitle }}
+    </p>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import cn from '@iqual/nuxt-icms/composables/useCn'
+
+const props = withDefaults(
+  defineProps<{
+    pretitle?: string
+    pretitleClass?: string
+    title?: string
+    titleClass?: string
+    subtitle?: string
+    subtitleClass?: string
+    weight?: string
+    style?: string
+  }>(),
+  {
+    weight: 'h2',
+    style: 'heading-2',
+  },
+)
+
+const titleClassList = computed(() => {
+  const classList = []
+  if (props.style == 'heading-1') {
+    classList.push('h1')
+  }
+  if (props.style == 'heading-2') {
+    classList.push('h2')
+  }
+  if (props.style == 'heading-3') {
+    classList.push('h3')
+  }
+  if (props.style == 'heading-4') {
+    classList.push('h4')
+  }
+  if (props.style == 'heading-5') {
+    classList.push('h5')
+  }
+  if (props.style == 'heading-6') {
+    classList.push('h6')
+  }
+  return classList
+})
+</script>

package/components/DesignSystem/Molecules/iFrame.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="relative">
+    <div v-if="isEditing" class="absolute inset-0 z-10 h-full w-full"></div>
+    <iframe
+      class="h-full w-full"
+      :title="title"
+      :src="link"
+      :style="{ height: height ? `${height}px` : '600px' }"
+      frameborder="0"
+      loading="lazy"
+    ></iframe>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  title?: string
+  link?: string
+  height?: number
+  isEditing?: boolean
+}>()
+</script>

package/components/DesignSystem/Organisms/ContentBlock.vue

@@ -0,0 +1,82 @@
+<template>
+  <div>
+    <DesignSystemMoleculesTitleComposition
+      :pretitle="pretitle"
+      :pretitleClass="pretitleClass"
+      :title="title"
+      :titleClass="titleClass"
+      :subtitle="subtitle"
+      :subtitleClass="subtitleClass"
+      :weight="titleWeight"
+      :style="titleStyle"
+    />
+
+    <DesignSystemMoleculesMediaSlider
+      v-if="media && media.length"
+      :media="media"
+      :colorScheme="colorScheme"
+      :mediaClass="mediaClass"
+      :sliderClass="mediaSliderClass"
+      :elementClass="mediaElementClass"
+    />
+
+    <div
+      v-if="text"
+      class="ck-content hyphens-auto text-base lg:hyphens-none"
+      :class="cn(textColumnClass, textClass)"
+      v-html="text"
+    />
+
+    <DesignSystemMoleculesButtonGroup
+      :links="links"
+      :colorScheme="colorScheme"
+      :wrapperClass="buttonWrapperClass"
+      :buttonAlignment="buttonAlignment"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import cn from '@iqual/nuxt-icms/composables/useCn'
+import type { MediaFragment } from '#graphql-operations'
+
+const props = defineProps<{
+  pretitle?: string
+  pretitleClass?: string
+  title?: string
+  titleClass?: string
+  subtitle?: string
+  subtitleClass?: string
+  text?: string
+  textClass?: string
+  links?: Array<object>
+  buttonAlignment?: string
+  buttonWrapperClass?: string
+  textColumns?: string
+  titleWeight?: string
+  titleStyle?: string
+  media?: MediaFragment[]
+  mediaClass?: string
+  colorScheme?: string
+  mediaSliderClass?: string
+  mediaElementClass?: string
+}>()
+
+const textColumnClass = computed(() => {
+  if (props?.textColumns === 'two') {
+    return 'md:column-count-2'
+  } else if (props?.textColumns === 'three') {
+    return 'md:column-count-3'
+  }
+  return ''
+})
+
+const buttonAlignment = computed(() => {
+  if (props.buttonAlignment === 'center') {
+    return 'justify-center'
+  } else if (props.buttonAlignment === 'right') {
+    return 'justify-end'
+  }
+  return ''
+})
+</script>

package/components/DesignSystem/Organisms/FlipTeaser.vue

@@ -0,0 +1,160 @@
+<template>
+  <div
+    :class="{ 'shadow-custom-small': open }"
+    class="flip-teaser relative col-span-12 aspect-square overflow-hidden rounded-lg transition-shadow duration-300 ease-in-out hover:shadow-custom-small md:col-span-6 xl:col-span-3"
+    @mouseenter="open = true"
+    @mouseleave="open = false"
+  >
+    <!-- Image -->
+    <div class="flip-teaser-grid-item">
+      <Media
+        v-if="image"
+        :media="image"
+        imageSizes="xs:100vw sm:100vw md:50vw lg:320px"
+      />
+      <!-- Opaque Overlay -->
+      <div :class="flipTeaserOpaqueOverlay({ colorScheme })" />
+    </div>
+
+    <!-- Title -->
+    <div class="flip-teaser-grid-item relative flex items-end px-6 py-7">
+      <DesignSystemOrganismsContentBlock
+        :title="title"
+        :titleWeight="titleWeight"
+        :titleStyle="'heading-5'"
+        titleClass="font-semibold mb-0"
+      />
+    </div>
+
+    <!-- Overlay -->
+    <div
+      :class="
+        cn(flipTeaserOverlay({ colorScheme }), {
+          '!cursor-default opacity-100': open,
+        })
+      "
+    >
+      <!-- Texts -->
+      <div>
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          pretitleClass="text-gray-300 font-medium text-base lg:text-base mb-2"
+          :title="title"
+          :titleWeight="titleWeight"
+          titleClass="mb-2"
+          :subtitle="subtitle"
+          :text="text"
+          textClass="text-sm line-clamp-3"
+          :titleStyle="'heading-5'"
+          :colorScheme="colorScheme"
+        />
+      </div>
+
+      <!-- Decorative arrow -->
+      <NuxtLink
+        :class="flipTeaserIconWrapper({ colorScheme })"
+        :to="link === '' ? language : language + link"
+        :title="linkLabel"
+      >
+        <SpriteSymbol
+          name="chevron-down"
+          :class="flipTeaserIcon({ colorScheme })"
+        />
+      </NuxtLink>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { tv } from 'tailwind-variants'
+import cn from '@iqual/nuxt-icms/composables/useCn'
+import type { MediaFragment } from '#graphql-operations'
+
+defineProps<{
+  image?: MediaFragment
+  pretitle?: string
+  title?: string
+  titleWeight?: string
+  subtitle?: string
+  text?: string
+  link?: string
+  linkLabel?: string
+}>()
+
+const flipTeaserOverlay = tv({
+  base: 'flip-teaser-grid-item absolute inset-0 flex cursor-pointer flex-col justify-between gap-4 p-6 opacity-0 transition-opacity duration-300 ease-in-out',
+  variants: {
+    colorScheme: {
+      none: 'bg-white',
+      dark: 'bg-gray-900',
+      light: 'bg-gray-50',
+      accent: 'bg-primary-700',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const flipTeaserOpaqueOverlay = tv({
+  base: 'pointer-events-none absolute inset-0 opacity-60',
+  variants: {
+    colorScheme: {
+      none: 'bg-white',
+      dark: 'bg-gray-900',
+      light: 'bg-gray-50',
+      accent: 'bg-primary-700',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const flipTeaserIconWrapper = tv({
+  base: 'group ml-auto grid size-12 shrink-0 cursor-pointer place-content-center rounded-full transition-all',
+  variants: {
+    colorScheme: {
+      none: 'bg-gray-50 hover:bg-black',
+      dark: 'bg-black hover:bg-white',
+      light: 'bg-gray-100 hover:bg-black',
+      accent: 'bg-primary-600 hover:bg-primary-800',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const flipTeaserIcon = tv({
+  base: 'size-8 -rotate-90 transition-all duration-300 ease-in-out',
+  variants: {
+    colorScheme: {
+      none: 'text-black group-hover:text-white',
+      dark: 'text-white group-hover:text-black',
+      light: 'text-black group-hover:text-white',
+      accent: 'text-white',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const colorScheme = inject<string>('colorScheme')
+
+const open = ref(false)
+const language = ref(useCurrentLanguage())
+
+</script>
+
+<style lang="css" scoped>
+.flip-teaser {
+  display: grid;
+  grid-template-areas: 'content';
+}
+
+.flip-teaser-grid-item {
+  grid-area: content;
+}
+</style>

package/components/DesignSystem/Organisms/LogoElement.vue

@@ -0,0 +1,37 @@
+<template>
+  <NuxtLink :class="logoElement({ colorScheme })" :to="link" :title="title">
+    <Media 
+      v-if="logo"
+      :media="logo"
+      mediaClass="h-full"
+      imageSizes="xs:200px"
+    />
+  </NuxtLink>
+</template>
+
+<script lang="ts" setup>
+import { tv } from 'tailwind-variants'
+import type { MediaFragment } from '#graphql-operations'
+
+defineProps<{
+  logo?: MediaFragment
+  link?: string
+  title?: string
+  colorScheme?: string
+}>()
+
+const logoElement = tv({
+  base: 'flex h-[160px] w-full items-center justify-center rounded-lg bg-white p-8 shadow-custom',
+  variants: {
+    colorScheme: {
+      none: 'bg-white',
+      dark: 'bg-gray-900',
+      light: 'bg-white',
+      accent: 'bg-primary-700',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+</script>

package/components/DesignSystem/Organisms/TeamElement.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="@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"
+      />
+
+      <div
+        class="@xl:shrink-1 flex w-full grow flex-col gap-6 @xl:w-[calc(50%-24px)] @xl:justify-center"
+      >
+        <DesignSystemOrganismsContentBlock
+          :title="(firstname ?? '') + ((firstname && lastname) ? ' ' : '') + (lastname ?? '')"
+          :titleWeight="titleWeight"
+          titleClass="text-2xl lg:text-2xl font-semibold mb-2 last:mb-0"
+          :subtitle="position"
+          subtitleClass="mb-0"
+          :text="text"
+          textClass="mt-2"
+        />
+
+        <div class="mt-auto flex flex-col gap-2">
+          <DesignSystemAtomsButton
+            :label="email"
+            :title="email"
+            :link="'mailto:' + email"
+            :target-blank="false"
+            :style="'minimal'"
+            :colorScheme="colorScheme"
+            buttonClass="block p-0 font-normal break-all"
+          />
+
+          <DesignSystemAtomsButton
+            :label="phone"
+            :title="phone"
+            :link="'tel:' + phone"
+            :target-blank="false"
+            :style="'minimal'"
+            :colorScheme="colorScheme"
+            buttonClass="block p-0 font-normal break-all"
+          />
+        </div>
+
+        <BlokkliField
+          name="field_icms_buttons"
+          :list="buttons"
+          class="flex flex-wrap gap-4"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { tv } from 'tailwind-variants'
+import type { MediaFragment } from '#graphql-operations'
+
+defineProps<{
+  firstname?: string
+  lastname?: string
+  titleWeight?: string
+  position?: string
+  email?: string
+  phone?: string
+  text?: string
+  image?: MediaFragment
+  buttons?: Array<object>
+  colorScheme?: 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',
+  variants: {
+    colorScheme: {
+      none: 'bg-white',
+      dark: 'bg-gray-900',
+      light: 'bg-white',
+      accent: 'bg-primary-700',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+</script>

package/components/DesignSystem/Organisms/TeaserCard.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="@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"
+      />
+
+      <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>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { tv } from 'tailwind-variants'
+import type { MediaFragment } from '#graphql-operations'
+
+defineProps<{
+  image?: MediaFragment
+  pretitle?: string
+  title?: string
+  titleWeight?: string
+  subtitle?: string
+  text?: string
+  link?: string
+  linkLabel?: string
+  colorScheme?: 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',
+  variants: {
+    colorScheme: {
+      none: 'bg-white',
+      dark: 'bg-gray-900',
+      light: 'bg-white',
+      accent: 'bg-primary-700',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+</script>

package/components/DesignSystem/Organisms/Testimonial.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <DesignSystemOrganismsContentBlock
+      :title="title"
+      :titleWeight="titleWeight"
+      titleClass="text-xl font-semibold lg:text-2xl mb-1"
+      :text="text"
+      :colorScheme="colorScheme"
+    />
+    <div class="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"
+      />
+      <div
+        class="flex shrink-0 flex-col"
+        :class="{ 'mr-6 border-black pr-6 lg:border-r-1': logo }"
+      >
+        <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>
+        </div>
+        <div v-if="position">{{ position }}</div>
+      </div>
+      <Media
+        v-if="logo"
+        :media="logo"
+        imageSizes="xs:100px"
+        mediaClass="hidden max-w-24 lg:block"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { MediaFragment } from '#graphql-operations'
+
+defineProps<{
+  title?: string
+  titleWeight?: string
+  text?: string
+  image?: MediaFragment
+  firstName?: string
+  lastName?: string
+  position?: string
+  logo?: MediaFragment
+  colorScheme?: string
+}>()
+</script>

package/components/DesignSystem/Organisms/TwoColumnTextElement.vue

@@ -0,0 +1,42 @@
+<template>
+  <DesignSystemAtomsGridRow>
+    <div class="col-span-12 sm:col-span-6 lg:col-span-5 lg:col-start-2">
+      <DesignSystemMoleculesTitleComposition
+        :pretitle="pretitle"
+        :pretitleClass="pretitleClass"
+        :title="title"
+        :titleClass="titleClass"
+        :weight="titleWeight"
+        :style="titleStyle"
+      />
+    </div>
+    <div class="col-span-12 sm:col-span-6 lg:col-span-4 lg:col-start-8">
+      <DesignSystemMoleculesTitleComposition
+        :subtitle="subtitle"
+        :subtitleClass="subtitleClass"
+        class="mb-2 text-base"
+      />
+      <div
+        v-if="text"
+        class="ck-content hyphens-auto text-base"
+        v-html="text"
+        :textClass="textClass"
+      />
+    </div>
+  </DesignSystemAtomsGridRow>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  pretitle?: string
+  pretitleClass?: string
+  title?: string
+  titleClass?: string
+  titleWeight?: string
+  titleStyle?: string
+  subtitle?: string
+  subtitleClass?: string
+  text?: string
+  textClass?: string
+}>()
+</script>

package/components/Drupal/Breadcrumb/fragment.breadcrumb.graphql

@@ -0,0 +1,6 @@
+fragment breadcrumb on Breadcrumb {
+  url {
+    path
+  }
+  title
+}