@iqual/nuxt-icms 1.0.2

package/components/Paragraph/Introduction/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
+    <DesignSystemAtomsGridRow>
+      <div class="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"
+          >
+            <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"
+            />
+          </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"
+          >
+            <DesignSystemOrganismsContentBlock
+              :pretitle="pretitle"
+              :title="title"
+              :subtitle="subtitle"
+              :text="text"
+              :titleWeight="titleWeight"
+              :titleStyle="titleStyle"
+              :colorScheme="colorScheme"
+            />
+            <BlokkliField
+              name="field_icms_buttons"
+              :list="buttons"
+              class="order-1 mt-6 flex flex-wrap gap-6 md:order-none"
+              :class="[buttonAlignment, { droptarget: isEditing }]"
+            />
+            <Media
+              v-if="signature"
+              mediaClass="ml-auto mr-6 mt-6 max-w-44"
+              :media="signature"
+              imageSizes="xs:180px"
+            />
+          </div>
+        </DesignSystemAtomsGridRow>
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutTextImageIntroFragment } from '#graphql-operations'
+import { tv } from 'tailwind-variants'
+
+defineProps<ParagraphIcmsLayoutTextImageIntroFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+const introductionRow = tv({
+  base: 'rounded-lg w-full shadow-custom p-0',
+  variants: {
+    colorScheme: {
+      none: 'bg-white',
+      dark: 'bg-gray-900',
+      light: 'bg-white',
+      accent: 'bg-primary-700',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+
+const buttonAlignment = computed(() => {
+  switch (options.value.buttonAlignment) {
+    case 'left':
+      return 'justify-start'
+    case 'center':
+      return 'justify-center'
+    case 'right':
+      return 'justify-end'
+    default:
+      return 'justify-start'
+  }
+})
+
+provide('colorScheme', colorScheme)
+</script>

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

@@ -0,0 +1,11 @@
+fragment paragraphIcmsLogoElement on ParagraphIcmsLogoElement {
+  logo: fieldIcmsLogo {
+    ...media
+  }
+  link: fieldIcmsLink {
+    uri {
+      path
+    }
+  }
+  title: fieldIcmsLinkTitle
+}

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

@@ -0,0 +1,17 @@
+<template>
+  <DesignSystemOrganismsLogoElement
+    :logo="logo"
+    :link="link?.uri?.path"
+    :title="title"
+    :colorScheme="colorScheme"
+    class="w-full md:w-[calc(50%-12px)]"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLogoElementFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsLogoElementFragment>()
+
+const colorScheme = inject<string>('colorScheme')
+</script>

package/components/Paragraph/Media/fragment.graphql

@@ -0,0 +1,5 @@
+fragment paragraphIcmsLayoutMedia on ParagraphIcmsLayoutMedia {
+  media: fieldIcmsMediaElements {
+    ...media
+  }
+}

package/components/Paragraph/Media/index.vue

@@ -0,0 +1,83 @@
+<template>
+  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
+    <div :class="rowClassList">
+      <div :class="columnClassList">
+        <DesignSystemMoleculesMediaSlider
+          v-if="media && media.length"
+          :media="media"
+          :colorScheme="colorScheme"
+          :showCaption="true"
+          :sliderClass="mediaSliderClassList"
+          :elementClass="mediaElementClassList"
+          
+        />
+      </div>
+    </div>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutTextMediaFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsLayoutTextMediaFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+const mediaSliderClassList = computed(() => {
+  const classList = []
+  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 colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+
+const rowClassList = computed(() => {
+  const classList = ['grid grid-cols-12 gap-6']
+  if (options.value.width === 'full') {
+    return classList
+  }
+  classList.push('container mx-auto')
+
+  return classList
+})
+
+const imageSizes = computed(() => {
+
+  if (options.value.width === 'full') {
+    return 'xs:100vw sm:100vw md:100vw lg:100vw'
+  }
+
+  if (options.value.width === 'page') {
+    return 'xs:100vw sm:100vw md:100vw lg:1280px'
+  }
+
+  return 'xs:100vw sm:100vw md:50vw lg:640px'
+})
+
+const columnClassList = computed(() => {
+  const classList = ['col-span-12']
+
+  if (options.value.width === 'narrow') {
+    classList.push('md:col-span-6 md:col-start-4')
+  }
+
+  return classList
+})
+
+</script>

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

@@ -0,0 +1,11 @@
+fragment paragraphIcmsPartnershipElement on ParagraphIcmsPartnershipElement {
+  logo: fieldIcmsLogo {
+    ...media
+  }
+  link: fieldIcmsLink {
+    uri {
+      path
+    }
+  }
+  title: fieldIcmsLinkTitle
+}

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

@@ -0,0 +1,14 @@
+<template>
+  <DesignSystemMoleculesPartnership
+    :logo="logo"
+    :link="link?.uri?.path"
+    :title="title"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsPartnershipElementFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsPartnershipElementFragment>()
+
+</script>

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

@@ -0,0 +1,17 @@
+fragment paragraphIcmsLayoutPartnerships on ParagraphIcmsLayoutPartnerships {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  titleWeight: fieldIcmsTitleWeight
+  textRows: fieldIcmsTextRows
+  image: fieldIcmsMediaElement {
+    ...media
+  }
+  overlayTitle: fieldIcmsPartnershipTitle
+  overlayText: fieldIcmsText
+  partnershipElements: fieldIcmsPartnershipElements {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsPartnershipElement
+    }
+  }
+}

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

@@ -0,0 +1,119 @@
+<template>
+  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
+    <DesignSystemAtomsGridRow class="md:pr-24">
+      <div class="col-span-12">
+        <DesignSystemAtomsGridRow
+          :class="partnershipsRow({ colorScheme })"
+          class=""
+        >
+          <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"
+          >
+            <DesignSystemOrganismsContentBlock
+              :pretitle="pretitle"
+              :title="title"
+              :titleWeight="titleWeight"
+              :colorScheme="colorScheme"
+            />
+
+            <ul class="flex flex-col gap-4">
+              <li
+                v-for="(textRow, index) in textRows"
+                :key="index"
+                class="flex items-start gap-2"
+              >
+                <SpriteSymbol
+                  name="chevron-right"
+                  class="size-6 flex-shrink-0"
+                />
+                {{ textRow }}
+              </li>
+            </ul>
+          </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"
+          >
+            <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"
+            />
+          </div>
+        </DesignSystemAtomsGridRow>
+
+        <DesignSystemAtomsGridRow
+          :class="partnershipsOffsetRow({ colorScheme })"
+        >
+          <div class="col-span-1 p-5 lg:p-8">
+            <DesignSystemOrganismsContentBlock
+              :pretitle="overlayTitle"
+              :text="overlayText"
+              :colorScheme="colorScheme"
+            />
+
+            <BlokkliField
+              v-if="partnershipElements"
+              name="field_icms_partnership_elements"
+              :list="partnershipElements"
+              class="mt-8 flex flex-wrap xl:flex-nowrap"
+              :class="{ droptarget: isEditing }"
+            />
+          </div>
+        </DesignSystemAtomsGridRow>
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutPartnershipsFragment } from '#graphql-operations'
+import { tv } from 'tailwind-variants'
+
+defineProps<ParagraphIcmsLayoutPartnershipsFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+const partnershipsRow = tv({
+  base: 'rounded-lg w-full shadow-custom p-0',
+  variants: {
+    colorScheme: {
+      none: 'bg-white',
+      dark: 'bg-gray-900',
+      light: 'bg-white',
+      accent: 'bg-primary-700',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+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',
+  variants: {
+    colorScheme: {
+      none: 'bg-white',
+      dark: 'bg-gray-900',
+      light: 'bg-white',
+      accent: 'bg-primary-700',
+    },
+  },
+  defaultVariants: {
+    colorScheme: 'none',
+  },
+})
+
+const colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+
+provide('colorScheme', colorScheme)
+</script>

package/components/Paragraph/SingleTestimonial/fragment.graphql

@@ -0,0 +1,24 @@
+fragment paragraphIcmsLayoutTestimonial on ParagraphIcmsLayoutTestimonial {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  subtitle: fieldIcmsSubtitle
+  media: fieldIcmsMediaElements {
+    ...media
+  }
+  text: fieldIcmsText
+  buttons: fieldIcmsButtons {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsButtonElement
+    }
+  }
+  textplain: fieldIcmsTextPlain
+  logoelements: fieldIcmsLogoElements {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsLogoElement
+    }
+  }
+}

package/components/Paragraph/SingleTestimonial/index.vue

@@ -0,0 +1,79 @@
+<template>
+  <DesignSystemAtomsContainer :spacing="spacing" :colorScheme="colorScheme">
+    <DesignSystemAtomsGridRow>
+      <div class="col-span-12 md:col-span-5">
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :title="title"
+          :subtitle="subtitle"
+          :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">
+        <DesignSystemOrganismsContentBlock
+          :pretitle="textplain"
+          pretitleClass="mb-0"
+        />
+      </div>
+      <div class="col-span-12 md:col-span-5">
+        <DesignSystemOrganismsContentBlock
+          :subtitle="subtitle"
+          :text="text"
+          :media="media"
+          mediaClass="size-full rounded-lg overflow-hidden"
+          mediaSliderClass="mt-0 rounded-lg overflow-hidden"
+          :colorScheme="colorScheme"
+        />
+
+        <BlokkliField
+          name="field_icms_buttons"
+          :list="buttons"
+          class="mt-6 flex flex-wrap gap-6"
+          :class="[buttonAlignment, { droptarget: isEditing }]"
+        />
+      </div>
+      <div class="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 }"
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutTestimonialFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsLayoutTestimonialFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+
+const colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+const buttonAlignment = computed(() => {
+  switch (options.value.buttonAlignment) {
+    case 'left':
+      return 'justify-start'
+    case 'center':
+      return 'justify-center'
+    case 'right':
+      return 'justify-end'
+    default:
+      return 'justify-start'
+  }
+})
+
+provide('colorScheme', colorScheme)
+</script>

package/components/Paragraph/Table/fragment.graphql

@@ -0,0 +1,11 @@
+fragment paragraphIcmsLayoutTable on ParagraphIcmsLayoutTable {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  subtitle: fieldIcmsSubtitle
+  text: fieldIcmsText
+  tableData: fieldIcmsTable {
+    value: value
+  }
+}

package/components/Paragraph/Table/index.vue

@@ -0,0 +1,43 @@
+<template>
+  <DesignSystemAtomsContainer :spacing="spacing" :colorScheme="colorScheme">
+    <DesignSystemAtomsGridRow>
+      <div class="col-span-12 md:col-span-6 lg:col-span-4">
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :title="title"
+          :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
+          titleClass="mb-0"
+          :subtitle="subtitle"
+        />
+      </div>
+      <div class="col-span-12 md:col-span-6 lg:col-start-7">
+        <DesignSystemOrganismsContentBlock :text="text" />
+      </div>
+    </DesignSystemAtomsGridRow>
+    <DesignSystemAtomsGridRow class="mt-10 md:mt-20">
+      <div class="relative col-span-12">
+        <DesignSystemMoleculesTable
+          :table-data="tableData"
+          :colorScheme="colorScheme"
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutTableFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsLayoutTableFragment>()
+
+const { options, parentType } = useAttrs().blokkliData
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+
+const colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+</script>

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

@@ -0,0 +1,17 @@
+fragment paragraphIcmsTabElement on ParagraphIcmsTabElement {
+  tabTitle: fieldIcmsTabTitle
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  titleStyle: fieldIcmsTitleStyle
+  subtitle: fieldIcmsSubtitle
+  media: fieldIcmsMediaElements {
+    ...media
+  }
+  text: fieldIcmsText
+  buttons: fieldIcmsButtons {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsButtonElement
+    }
+  }
+}

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

@@ -0,0 +1,78 @@
+<template>
+  <div :class="[tabContent({ colorScheme }), { 'not-last:mb-10': isEditing }]">
+    <DesignSystemOrganismsContentBlock
+      :pretitle="pretitle"
+      :title="title"
+      :titleWeight="titleWeight"
+      :titleStyle="titleStyle"
+      :subtitle="subtitle"
+      :media="media"
+      mediaClass="size-full rounded-lg overflow-hidden"
+      mediaSliderClass="max-w-[500px] rounded-lg overflow-hidden"
+      :text="text"
+      :colorScheme="colorScheme"
+    />
+
+    <BlokkliField
+      name="field_icms_buttons"
+      :list="buttons"
+      class="mt-8 flex flex-wrap gap-6"
+      :class="[buttonAlignmentClass, { droptarget: isEditing }]"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { tv } from 'tailwind-variants'
+
+import type { ParagraphIcmsTabElementFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsTabElementFragment>()
+
+const { options, isEditing } = defineBlokkli({
+  bundle: 'icms_tab_element',
+})
+
+const tabTrigger = tv({
+  base: 'inline-flex w-full flex-1 items-center justify-center whitespace-nowrap rounded-none rounded-t-lg py-4 text-base shadow-custom-inner transition-all disabled:pointer-events-none lg:w-fit data-[state=active]:shadow-none',
+  variants: {
+    colorScheme: {
+      none: 'bg-white dark:bg-white text-black dark:text-black data-[state=active]:bg-white dark:data-[state=active]:bg-white dark:data-[state=active]:text-black',
+      dark: 'bg-gray-700 dark:bg-gray-700 text-white dark:text-white data-[state=active]:bg-gray-900 dark:data-[state=active]:bg-gray-900 data-[state=active]:text-white',
+      light:
+        'bg-white dark:bg-white text-black dark:text-black data-[state=active]:bg-white dark:data-[state=active]:bg-white dark:data-[state=active]:text-black',
+      accent:
+        'bg-primary-600 dark:bg-primary-600 text-white dark:text-white data-[state=active]:bg-primary-700 dark:data-[state=active]:bg-primary-700 data-[state=active]:text-white',
+    },
+  },
+})
+
+const tabContent = tv({
+  base: 'm-0 rounded-b-lg p-8 text-black md:p-16',
+  variants: {
+    colorScheme: {
+      none: 'bg-white text-black',
+      dark: 'bg-gray-900 text-white',
+      light: 'bg-white text-black',
+      accent: 'bg-primary-700 text-white',
+    },
+  },
+})
+
+const colorScheme = inject<string>('colorScheme')
+const buttonAlignment = inject<string>('buttonAlignment')
+const titleWeight = inject<string>('childTitleWeight')
+
+const buttonAlignmentClass = computed(() => {
+  switch (buttonAlignment?.value) {
+    case 'left':
+      return 'justify-start'
+    case 'center':
+      return 'justify-center'
+    case 'right':
+      return 'justify-end'
+    default:
+      return 'justify-start'
+  }
+})
+</script>

package/components/Paragraph/Tabs/Layout/fragment.graphql

@@ -0,0 +1,11 @@
+fragment paragraphIcmsLayoutTabs on ParagraphIcmsLayoutTabs {
+  title: fieldIcmsTitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  tabElements: fieldIcmsTabElements {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsTabElement
+    }
+  }
+}