@iqual/nuxt-icms 1.0.2

package/components/DesignSystem/Atoms/Button.vue

@@ -0,0 +1,144 @@
+<template>
+  <NuxtLink
+    :class="cn(button({ colorScheme, style, textAlignment }), buttonClass)"
+    :target="targetBlank ? '_blank' : '_self'"
+    :to="linkComplete"
+    :title="title"
+    :prefetch="prefetch"
+  >
+    <span class="block">{{ label }}</span>
+    <span v-if="subline" class="block text-sm font-light">{{ subline }}</span>
+  </NuxtLink>
+</template>
+
+<script lang="ts" setup>
+import cn from '@iqual/nuxt-icms/composables/useCn'
+import { tv } from 'tailwind-variants'
+
+const props = defineProps<{
+  label?: string
+  subline?: string
+  title?: string
+  link?: string
+  params?: string
+  targetBlank?: boolean
+  style?: string
+  colorScheme?: string
+  textAlignment?: string
+  buttonClass?: string
+}>()
+
+const button = tv({
+  base: 'cursor-pointer font-medium py-2 px-3 rounded-lg duration-200 ease-in-out block w-full md:w-fit',
+  variants: {
+    colorScheme: {
+      none: '',
+      dark: '',
+      light: '',
+      accent: '',
+    },
+    style: {
+      normal: '',
+      focus: '',
+      minimal: 'px-0 underline text-current',
+    },
+    textAlignment: {
+      left: 'text-left',
+      center: 'text-center',
+      right: 'text-right',
+    },
+  },
+  compoundVariants: [
+    {
+      colorScheme: 'none',
+      style: 'normal',
+      class:
+        'bg-white text-black hover:bg-black hover:text-white border border-black',
+    },
+    {
+      colorScheme: 'none',
+      style: 'focus',
+      class:
+        'bg-black text-white hover:bg-white hover:text-black border border-black',
+    },
+    {
+      colorScheme: 'none',
+      style: 'minimal',
+      class: 'hover:text-primary-500',
+    },
+
+    {
+      colorScheme: 'light',
+      style: 'normal',
+      class:
+        'bg-gray-50 text-black hover:bg-black hover:text-white border border-black',
+    },
+    {
+      colorScheme: 'light',
+      style: 'focus',
+      class:
+        'bg-black text-gray-50 hover:bg-gray-50 hover:text-black border border-black',
+    },
+    {
+      colorScheme: 'light',
+      style: 'minimal',
+      class: 'hover:text-primary-500',
+    },
+
+    {
+      colorScheme: 'dark',
+      style: 'normal',
+      class:
+        'bg-black text-white hover:bg-white hover:text-black border border-white',
+    },
+    {
+      colorScheme: 'dark',
+      style: 'focus',
+      class:
+        'bg-white text-black hover:bg-black hover:text-white border border-white',
+    },
+    {
+      colorScheme: 'dark',
+      style: 'minimal',
+      class: 'hover:text-primary-500',
+    },
+
+    {
+      colorScheme: 'accent',
+      style: 'normal',
+      class:
+        'bg-primary-600 text-white hover:bg-white hover:text-black border border-white',
+    },
+    {
+      colorScheme: 'accent',
+      style: 'focus',
+      class:
+        'bg-black text-white hover:bg-white hover:text-black border border-black hover:border-white',
+    },
+    {
+      colorScheme: 'accent',
+      style: 'minimal',
+      class: 'hover:text-black',
+    },
+  ],
+  defaultVariants: {
+    colorScheme: 'none',
+    style: 'normal',
+    textAlignment: 'left',
+  },
+})
+
+const prefetch = inject('prefetch', false)
+
+const linkComplete = computed(() => {
+  let link = ''
+
+  if (props?.link) {
+    link += props?.link
+  }
+  if (props?.params) {
+    link += props?.params
+  }
+  return link
+})
+</script>

package/components/DesignSystem/Atoms/Container.vue

@@ -0,0 +1,54 @@
+<template>
+  <section :class="containerClassList">
+    <slot />
+  </section>
+</template>
+
+<script lang="ts" setup>
+const props = withDefaults(
+  defineProps<{
+    colorScheme?: string
+    spacing?: {
+      top?: string
+      bottom?: string
+    }
+    class?: string
+  }>(),
+  {
+    colorScheme: 'none',
+    spacing: () => ({
+      top: 'small',
+      bottom: 'small',
+    }),
+  },
+)
+
+const containerClassList = computed(() => {
+  const classList = []
+  if (props.class) {
+    classList.push(props.class)
+  }
+  if (props.colorScheme === 'dark') {
+    classList.push('bg-gray-950 text-white')
+  }
+  if (props.colorScheme === 'light') {
+    classList.push('bg-gray-50')
+  }
+  if (props.colorScheme === 'accent') {
+    classList.push('bg-primary-600 text-white')
+  }
+  if (props.spacing.top === 'small') {
+    classList.push('pt-16')
+  }
+  if (props.spacing.top === 'large') {
+    classList.push('pt-24 md:pt-32')
+  }
+  if (props.spacing.bottom === 'small') {
+    classList.push('pb-16')
+  }
+  if (props.spacing.bottom === 'large') {
+    classList.push('pb-24 md:pb-32')
+  }
+  return classList
+})
+</script>

package/components/DesignSystem/Atoms/GridRow.vue

@@ -0,0 +1,13 @@
+<template>
+  <div :class="cn('container mx-auto grid grid-cols-12 gap-6', props.class)">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import cn from '@iqual/nuxt-icms/composables/useCn'
+
+const props = defineProps<{
+  class?: string
+}>()
+</script>

package/components/DesignSystem/Molecules/ButtonGroup.vue

@@ -0,0 +1,45 @@
+<template>
+  <div
+    v-if="links?.length"
+    :class="cn('mt-6 flex flex-wrap gap-6', wrapperClass, buttonAlignment)"
+  >
+    <DesignSystemAtomsButton
+      v-for="link in links"
+      :label="link?.props.label"
+      :subline="link?.props.subline"
+      :link="link?.props.link?.uri.path"
+      :params="link?.props.params"
+      :style="link?.props.buttonStyle"
+      :target-blank="link?.props.targetBlank"
+      :title="link?.props.title"
+      :colorScheme="colorScheme"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import cn from '@iqual/nuxt-icms/composables/useCn'
+
+type Link = {
+  props: {
+    label?: string
+    subline?: string
+    link?: {
+      uri: {
+        path: string
+      }
+    }
+    params?: string
+    buttonStyle?: string
+    targetBlank?: boolean
+    title?: string
+  }
+}
+
+defineProps<{
+  links?: Array<Link>
+  colorScheme?: string
+  wrapperClass?: string
+  buttonAlignment?: string
+}>()
+</script>

package/components/DesignSystem/Molecules/Card.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="@container">
+    <div :class="[card({ colorScheme }), { 'pb-20': icon }]">
+      <Media
+        v-if="image"
+        :media="image"
+        imageAspectRatio="4/3"
+        imageSizes="xs:100vw sm:100vw md:50vw lg:380px"
+        elementClass="aspect-4/3 w-full rounded-lg object-cover object-center @xl:w-1/2 @xl:shrink-0"
+      />
+      <DesignSystemOrganismsContentBlock
+        :title="title"
+        :titleWeight="titleWeight"
+        :titleStyle="'heading-5'"
+        titleClass="!mb-2 text-center @xl:text-left font-semibold"
+        :text="text"
+      />
+      <div v-if="icon" :class="cardIconWrapper({ colorScheme })">
+        <Media
+          :media="icon"  
+          mediaClass="icon"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { tv } from 'tailwind-variants'
+import type { MediaFragment } from '#graphql-operations'
+
+defineProps<{
+  title?: string
+  titleWeight?: string
+  text?: string
+  image?: MediaFragment
+  icon?: MediaFragment
+  colorScheme?: string
+}>()
+
+const card = tv({
+  base: 'relative shadow-custom-small rounded-lg p-6 h-full flex gap-6 flex-col @xl:flex-row @xl:pb-6 @7xl:p-16 @7xl:gap-16',
+  variants: {
+    colorScheme: {
+      none: 'bg-white',
+      dark: 'bg-gray-900',
+      light: 'bg-white',
+      accent: 'bg-primary-700',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const cardIconWrapper = tv({
+  base: 'absolute -bottom-12 left-1/2 flex size-24 -translate-x-1/2 items-center justify-center rounded-full p-6 @xl:[left:calc(25%+12px)] @7xl:@xl:[left:calc(25%+32px)]',
+  variants: {
+    colorScheme: {
+      none: 'bg-gray-50',
+      dark: 'bg-gray-800',
+      light: 'bg-gray-100',
+      accent: 'bg-primary-500',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+</script>

package/components/DesignSystem/Molecules/IconText.vue

@@ -0,0 +1,62 @@
+<template>
+  <div :class="iconText({ colorScheme })">
+    <div :class="iconTextIcon({ colorScheme })">
+      <Media
+        v-if="icon"
+        :media="icon"
+        mediaClass="size-10"
+      />
+    </div>
+    <DesignSystemOrganismsContentBlock
+      :title="title"
+      :titleWeight="titleWeight"
+      titleClass="text-xl lg:text-xl font-semibold mb-2"
+      :text="text"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { tv } from 'tailwind-variants'
+import type { MediaFragment } from '#graphql-operations'
+
+defineProps<{
+  title?: string
+  titleWeight?: string
+  text?: string
+  icon?: MediaFragment
+  colorScheme?: string
+}>()
+
+const iconText = tv({
+  base: 'flex items-center gap-6 rounded-lg py-5 px-6 shadow-custom-small',
+  variants: {
+    colorScheme: {
+      none: 'bg-white',
+      dark: 'bg-gray-900 text-white',
+      light: 'bg-white',
+      accent: 'bg-primary-700 text-white',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const iconTextIcon = tv({
+  base: 'w-20 shrink-0 rounded-full flex justify-center items-center aspect-square',
+  variants: {
+    colorScheme: {
+      none: 'bg-gray-50',
+      dark: 'bg-gray-400',
+      light: 'bg-gray-50',
+      accent: 'bg-primary-400',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+
+</script>

package/components/DesignSystem/Molecules/MediaSlider.vue

@@ -0,0 +1,72 @@
+<template>
+  <div :class="cn('@container', 'my-6', sliderClass)">
+    <Carousel
+      :active="media && media?.length > 1"
+    >
+      <CarouselContent>
+        <CarouselItem
+          v-for="(element, index) in media"
+          :key="index"
+          class="flex flex-col justify-center pl-4"
+        >
+          <Media 
+            v-if="element"
+            :media="element"
+            :showCaption="showCaption"
+            :mediaClass="mediaClass"
+            :elementClass="elementClass"
+            :figcaptionClass="figcaptionClass"
+          />
+        </CarouselItem>
+      </CarouselContent>
+      <CarouselPrevious
+        v-if="media && media?.length > 1"
+        class="left-4 @3xs:left-8 @2xs:left-10 @md:left-16"
+        :class="carouselButton({ colorScheme })"
+      >
+        <ChevronLeft :size="24" :stroke-width="1" />
+      </CarouselPrevious>
+      <CarouselNext
+        v-if="media && media?.length > 1"
+        class="right-4 @3xs:right-8 @2xs:right-10 @md:right-16"
+        :class="carouselButton({ colorScheme })"
+      >
+        <ChevronRight :size="24" :stroke-width="1" />
+      </CarouselNext>
+    </Carousel>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import cn from '@iqual/nuxt-icms/composables/useCn'
+import { tv } from 'tailwind-variants'
+import { ChevronLeft, ChevronRight } from 'lucide-vue-next'
+import type { MediaFragment } from '#graphql-operations'
+
+defineProps<{
+  media?: (MediaFragment | null)[] | undefined
+  sliderClass?: string
+  mediaClass?: string
+  colorScheme?: string
+  showCaption?: boolean
+  figcaptionClass?: string
+  elementClass?: string
+}>()
+
+const carouselButton = tv({
+  base: 'size-10 border-none disabled:opacity-40 @sm:size:12 @md:size:16 [&_svg]:size-auto',
+  variants: {
+    colorScheme: {
+      none: 'bg-gray-50 text-black hover:bg-black hover:text-white dark:bg-gray-50 dark:text-black hover:dark:bg-black hover:dark:text-white',
+      dark: 'bg-black text-white hover:bg-gray-50 hover:text-black dark:bg-black dark:text-white hover:dark:bg-gray-50 hover:dark:text-black',
+      light:
+        'bg-gray-50 text-black hover:bg-black hover:text-white dark:bg-gray-50 dark:text-black hover:dark:bg-black hover:dark:text-white',
+      accent:
+        'bg-primary-600 text-white hover:bg-primary-800 hover:text-white dark:bg-primary-600 dark:text-white hover:dark:bg-primary-800 hover:dark:text-white',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+</script>

package/components/DesignSystem/Molecules/Partnership.vue

@@ -0,0 +1,40 @@
+<template>
+  <div :class="partnershipElement({ colorScheme })">
+    <NuxtLink :to="link" :title="title">
+      <Media
+        v-if="logo"
+        :media="logo"
+        imageSizes="xs:100vw sm:100vw md:50vw lg:580px"
+        mediaClass="h-full"
+      />
+    </NuxtLink>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { tv } from 'tailwind-variants'
+import type { MediaFragment } from '#graphql-operations'
+
+defineProps<{
+  logo?: MediaFragment
+  link?: string
+  title?: string
+}>()
+
+const partnershipElement = tv({
+  base: 'flex md:min-h-32 w-1/2 xl:w-auto xl:flex-1 justify-center p-4',
+  variants: {
+    colorScheme: {
+      none: 'bg-white',
+      dark: 'bg-gray-900',
+      light: 'bg-white',
+      accent: 'bg-primary-700',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const colorScheme = inject<string>('colorScheme')
+</script>

package/components/DesignSystem/Molecules/Table.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="overflow-x-auto rounded-lg shadow-custom-offset">
+    <table
+      class="w-full min-w-[600px] table-auto border-collapse text-left text-sm"
+    >
+      <thead>
+        <tr>
+          <th
+            v-for="(header, index) in tableHeaders"
+            :key="index"
+            :class="th({ colorScheme })"
+          >
+            {{ header }}
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr
+          v-for="(row, rowIndex) in tableRows"
+          :key="rowIndex"
+          :class="tr({ colorScheme })"
+        >
+          <td
+            v-for="(value, colIndex) in row"
+            :key="colIndex"
+            :class="td({ colorScheme })"
+            v-html="value"
+          />
+        </tr>
+      </tbody>
+      <caption
+        v-if="tableData?.value.caption"
+        class="absolute -bottom-8 left-1/2 -translate-x-1/2 text-center text-xs italic"
+      >
+        {{
+          tableData?.value.caption
+        }}
+      </caption>
+    </table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { tv } from 'tailwind-variants'
+
+const tr = tv({
+  base: 'border-b last:border-0',
+  variants: {
+    colorScheme: {
+      none: 'border-gray-100',
+      dark: 'border-gray-700',
+      light: 'border-gray-200',
+      accent: 'border-primary-500',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const th = tv({
+  base: 'first:z-1 px-4 py-8 text-center text-sm first:sticky first:left-0 first:min-w-48 even:rounded-t-lg',
+  variants: {
+    colorScheme: {
+      none: 'odd:bg-white even:bg-gray-50',
+      dark: 'odd:bg-black even:bg-gray-900',
+      light: 'odd:bg-gray-50 even:bg-gray-100',
+      accent: 'odd:bg-primary-600 even:bg-primary-700',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const td = tv({
+  base: 'first:z-1 h-14 px-4 py-3 text-center leading-6 first:sticky first:left-0 first:min-w-48 first:max-w-40 first:text-left first:text-sm first:font-bold',
+  variants: {
+    colorScheme: {
+      none: 'odd:bg-white even:bg-gray-50',
+      dark: 'odd:bg-black even:bg-gray-900',
+      light: 'odd:bg-gray-50 even:bg-gray-100',
+      accent: 'odd:bg-primary-600 even:bg-primary-700',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const xIcon =
+  '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: block; margin: 0 auto">><path d="M18 6L6 18M6 6L18 18" stroke="#D9D9D9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+const checkIcon =
+  '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" style="display: block; margin: 0 auto;">><path d="M20.5 6L9.5 17L4.5 12" stroke="#757575" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>'
+
+const props = defineProps<{
+  tableData?: Record<string, any>
+  colorScheme?: string
+}>()
+
+const parseWeight = (weight: any) => {
+  const num = parseFloat(weight)
+  return Number.isFinite(num) ? num : Infinity
+}
+
+const tableHeaders = computed(() => {
+  if (!props.tableData?.value) {
+    return []
+  }
+
+  const rows = Object.keys(props.tableData.value)
+    .filter((key) => key !== 'caption')
+    .map((key) => props.tableData?.value[key])
+
+  if (rows.length === 0) {
+    return []
+  }
+
+  const rowWithLowestWeight = rows.reduce((minRow, currentRow) => {
+    const currentWeight = parseWeight(currentRow.weight)
+    const minWeight = parseWeight(minRow.weight)
+    return currentWeight < minWeight ? currentRow : minRow
+  })
+
+  return Object.entries(rowWithLowestWeight)
+    .filter(([key]) => Number.isInteger(Number(key)))
+    .map(([_, value]) => value)
+})
+
+const headerRowKey = computed(() => {
+  if (!props.tableData?.value) {
+    return null
+  }
+
+  return Object.keys(props.tableData.value)
+    .filter((key) => key !== 'caption')
+    .reduce((minKey, currentKey) => {
+      const currentRow = props.tableData?.value[currentKey]
+      const minRow = props.tableData?.value[minKey]
+      const currentWeight = parseWeight(currentRow.weight)
+      const minWeight = parseWeight(minRow.weight)
+      return currentWeight < minWeight ? currentKey : minKey
+    })
+})
+
+const tableRows = computed(() => {
+  if (!props.tableData?.value) {
+    return []
+  }
+
+  return Object.keys(props.tableData.value)
+    .filter((key) => key !== 'caption' && key !== headerRowKey.value)
+    .map((key) => {
+      const row = props.tableData?.value[key]
+      return { weight: parseWeight(row.weight), data: row }
+    })
+    .sort((a, b) => a.weight - b.weight)
+    .map(({ data }) => {
+      const { weight, ...rowWithoutWeight } = data
+      return Object.values(rowWithoutWeight).map((item) => {
+        if (item === 'check') {
+          return checkIcon
+        } else if (item === 'x') {
+          return xIcon
+        }
+        return item
+      })
+    })
+})
+</script>