@iqual/nuxt-icms 1.0.2

package/components/Media/index.vue

@@ -0,0 +1,33 @@
+<template>
+  <component :is="mediaComponentMap[mediaType]" v-bind="props" />
+</template>
+
+<script lang="ts" setup>
+
+import { MediaIcon, MediaImage, MediaRemoteVideo, MediaVideo } from '#components';
+import type { MediaFragment } from '#graphql-operations'
+
+const mediaComponentMap = {
+  'MediaImage': MediaImage,
+  'MediaVideo': MediaVideo,
+  'MediaRemoteVideo': MediaRemoteVideo,
+  'MediaIcon': MediaIcon,
+}
+
+type MediaType = keyof typeof mediaComponentMap;
+const mediaType = computed<MediaType>(() => {
+  return props.media?.type as MediaType;
+});
+
+const props = defineProps<{
+  media: MediaFragment
+  mediaClass?: string
+  figcaptionClass?: string
+  showCaption?: boolean
+  imageAspectRatios?: string
+  imageSizes?: string
+  imageLoading?: "lazy" | "eager" | undefined
+  elementClass?: string
+}>()
+
+</script>

package/components/Node/Icms/Page/fragment.graphql

@@ -0,0 +1,17 @@
+fragment nodeIcmsPage on NodeIcmsPage {
+  title
+  uuid
+  topics: fieldIcmsTopics {
+    id
+    label
+  }
+  blokkliProps {
+    ...blokkliProps
+  }
+  paragraphs: fieldIcmsParagraphs {
+    ...paragraphsFieldItem
+    props {
+      ...paragraph
+    }
+  }
+}

package/components/Node/Icms/Page/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <BlokkliProvider v-slot="{ entity }" v-bind="blokkliProps" :entity="props">
+    <BlokkliField :list="paragraphs" name="field_icms_paragraphs" />
+  </BlokkliProvider>
+</template>
+
+<script lang="ts" setup>
+import type { NodeIcmsPageFragment } from '#graphql-operations'
+
+const props = defineProps<NodeIcmsPageFragment>()
+
+// Pass the topics of the article to the context, to be used in Layouts
+provide('topics', props.topics)
+</script>

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

@@ -0,0 +1,14 @@
+fragment paragraphIcmsButtonElement on ParagraphIcmsButtonElement {
+  label: fieldIcmsLinkLabel
+  subline: fieldIcmsLinkSubline
+  title: fieldIcmsLinkTitle
+  link: fieldIcmsLink {
+    uri {
+      path
+    }
+  }
+  params: fieldIcmsLinkParams
+  buttonStyle: fieldIcmsLinkStyle
+  targetBlank: fieldIcmsLinkTargetBlank
+  textAlignment: fieldIcmsTextAlignment
+}

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

@@ -0,0 +1,23 @@
+<template>
+  <div class="w-full md:w-auto">
+    <DesignSystemAtomsButton
+      :label="label"
+      :subline="subline"
+      :title="title"
+      :link="link?.uri?.path"
+      :params="params"
+      :target-blank="targetBlank"
+      :style="buttonStyle"
+      :textAlignment="textAlignment"
+      :colorScheme="colorScheme"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsButtonElementFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsButtonElementFragment>()
+
+const colorScheme = inject<string>('colorScheme')
+</script>

package/components/Paragraph/CallToAction/fragment.graphql

@@ -0,0 +1,12 @@
+fragment paragraphIcmsLayoutCallToAction on ParagraphIcmsLayoutCallToAction {
+  image: fieldIcmsMediaElement {
+    ...media
+  }
+  text: fieldIcmsText
+  buttons: fieldIcmsButtons {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsButtonElement
+    }
+  }
+}

package/components/Paragraph/CallToAction/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <DesignSystemAtomsContainer
+    :colorScheme="colorScheme"
+    :spacing="{ top: 'none', bottom: 'none' }"
+    :class="containerClassList"
+  >
+    <DesignSystemAtomsGridRow class="pb-14 md:pb-0">
+      <div class="col-span-12 flex justify-center md:col-span-12 xl:col-span-3">
+        <Media
+          v-if="image"
+          :media="image"
+          imageSizes="xs:60px xl:320px"
+          imageAspectRatios="1/1"
+          mediaClass="-mt-12 -40 xl:w-full"
+          elementClass="size-full object-cover object-center aspect-square rounded-lg xl:rounded-none xl:rounded-t-lg"
+        />
+      </div>
+      <div class="col-span-12 flex items-center md:col-span-9 xl:col-span-6">
+        <div
+          v-if="text"
+          class="ck-content py-8 text-lg md:pr-8 xl:p-8 xl:text-2xl"
+          v-html="text"
+        />
+      </div>
+      <BlokkliField
+        name="field_icms_buttons"
+        :list="buttons"
+        class="col-span-12 flex items-center md:col-span-3 xl:col-span-3"
+        :class="{ droptarget: isEditing }"
+      />
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutCallToActionFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsLayoutCallToActionFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+const colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+const containerClassList = computed(() => {
+  const classList = []
+
+  if (options.value.spacingTop == 'small') {
+    classList.push('mt-16')
+  }
+  if (options.value.spacingTop == 'large') {
+    classList.push('mt-32')
+  }
+  return classList.join(' ')
+})
+
+provide('colorScheme', colorScheme)
+provide('prefetch', true)
+</script>

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

@@ -0,0 +1,10 @@
+fragment paragraphIcmsCardElement on ParagraphIcmsCardElement {
+  title: fieldIcmsTitle
+  text: fieldIcmsText
+  image: fieldIcmsMediaElement {
+    ...media
+  }
+  icon: fieldIcmsIcon {
+    ...media
+  }
+}

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

@@ -0,0 +1,19 @@
+<template>
+  <DesignSystemMoleculesCard
+    :title="title"
+    :titleWeight="titleWeight"
+    :text="text"
+    :image="image"
+    :icon="icon"
+    :colorScheme="colorScheme"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsCardElementFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsCardElementFragment>()
+
+const colorScheme = inject<string>('colorScheme')
+const titleWeight = inject<string>('titleWeight')
+</script>

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

@@ -0,0 +1,14 @@
+fragment paragraphIcmsLayoutCards on ParagraphIcmsLayoutCards {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  subtitle: fieldIcmsSubtitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  text: fieldIcmsText
+  cards: fieldIcmsCardElements {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsCardElement
+    }
+  }
+}

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

@@ -0,0 +1,58 @@
+<template>
+  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
+    <DesignSystemAtomsGridRow v-if="pretitle || title">
+      <div class="col-span-12 md:col-span-4">
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :title="title"
+          :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
+          titleClass="mb-0"
+          :colorScheme="colorScheme"
+        />
+      </div>
+      <div class="col-span-12 md:col-span-6 md:col-start-7">
+        <DesignSystemOrganismsContentBlock
+          :subtitle="subtitle"
+          :text="text"
+          :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
+          :colorScheme="colorScheme"
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+
+    <BlokkliField
+      name="field_icms_card_elements"
+      :list="cards"
+      class="container mx-auto grid gap-x-6 gap-y-20"
+      :class="[
+        'grid-3-col',
+        { droptarget: isEditing },
+        { 'mt-10 md:mt-20': pretitle || title },
+      ]"
+    />
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutCardsFragment } from '#graphql-operations'
+
+const props = defineProps<ParagraphIcmsLayoutCardsFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+const colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+
+const childTitleWeight = useChildTitleWeight(props.titleWeight ?? '')
+
+provide('colorScheme', colorScheme)
+provide('isEditing', isEditing)
+provide('titleWeight', childTitleWeight)
+</script>

package/components/Paragraph/Contact/fragment.graphql

@@ -0,0 +1,20 @@
+fragment paragraphIcmsLayoutContact on ParagraphIcmsLayoutContact {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  subtitle: fieldIcmsSubtitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  text: fieldIcmsText
+  buttons: fieldIcmsButtons {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsButtonElement
+    }
+  }
+  media: fieldIcmsMediaElements {
+    ...media
+  }
+  contactWebform: fieldIcmsWebform {
+    id
+  }
+}

package/components/Paragraph/Contact/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
+    <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 md:col-span-7"></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="{ droptarget: isEditing }"
+        />
+      </div>
+      <div class="col-span-12 md:col-span-6 md:col-start-7">
+        <DrupalWebform
+          v-if="contactWebform?.id"
+          :form-id="contactWebform?.id"
+          class="mt-4 md:mt-0"
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutContactFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsLayoutContactFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+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/Downloads/fragment.graphql

@@ -0,0 +1,15 @@
+fragment paragraphIcmsLayoutDownloads on ParagraphIcmsLayoutDownloads {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  titleWeight: fieldIcmsTitleWeight
+  text: fieldIcmsText
+  media: fieldIcmsMediaElements {
+    ...media
+  }
+  documents: fieldIcmsDocuments {
+    name
+    mediaFileUrl {
+    path
+    }
+  }
+}

package/components/Paragraph/Downloads/index.vue

@@ -0,0 +1,104 @@
+<template>
+  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
+    <DesignSystemAtomsGridRow>
+      <div class="col-span-12 md:col-span-5">
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :title="title"
+          :titleWeight="titleWeight"
+          titleClass="mb-0"
+          :colorScheme="colorScheme"
+        />
+      </div>
+      <div class="col-span-12 md:col-span-7"></div>
+      <div class="col-span-12 md:col-span-5">
+        <DesignSystemOrganismsContentBlock
+          :media="media"
+          mediaClass="size-full rounded-lg overflow-hidden"
+          mediaSliderClass="mt-0 rounded-lg overflow-hidden"
+          :text="text"
+          :colorScheme="colorScheme"
+        />
+      </div>
+      <div class="col-span-12 md:order-last md:col-span-7 md:col-start-7">
+        <div v-if="documents && documents.length">
+          <div v-for="(document, index) in documents" :key="index">
+            <a
+              :href="document.mediaFileUrl?.path"
+              target="_blank"
+              rel="noopener noreferrer"
+              :class="download({ colorScheme })"
+            >
+              <div :class="downloadIcon({ colorScheme })">
+                <svg
+                  class="size-5"
+                  width="auto"
+                  height="auto"
+                  viewBox="0 0 16 18"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M9.66634 0.666656V3.99999C9.66634 4.44202 9.84194 4.86594 10.1545 5.1785C10.4671 5.49106 10.891 5.66666 11.333 5.66666H14.6663M10.4997 0.666656H2.99967C2.55765 0.666656 2.13372 0.842251 1.82116 1.15481C1.5086 1.46737 1.33301 1.8913 1.33301 2.33332V15.6667C1.33301 16.1087 1.5086 16.5326 1.82116 16.8452C2.13372 17.1577 2.55765 17.3333 2.99967 17.3333H12.9997C13.4417 17.3333 13.8656 17.1577 14.1782 16.8452C14.4907 16.5326 14.6663 16.1087 14.6663 15.6667V4.83332L10.4997 0.666656Z"
+                    stroke="currentColor"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </svg>
+              </div>
+              <DesignSystemOrganismsContentBlock :text="document.name" />
+            </a>
+          </div>
+        </div>
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import { tv } from 'tailwind-variants'
+import type { ParagraphIcmsLayoutDownloadsFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsLayoutDownloadsFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+const colorScheme = computed(() => options.value.colorScheme)
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+
+const download = tv({
+  base: 'flex items-center gap-4 rounded-lg mb-4 py-4 px-5 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 downloadIcon = tv({
+  base: 'w-10 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',
+  },
+})
+
+provide('colorScheme', colorScheme)
+provide('isEditing', isEditing)
+</script>

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

@@ -0,0 +1,10 @@
+fragment paragraphIcmsFaqElement on ParagraphIcmsFaqElement {
+  question: fieldIcmsQuestion
+  answer: fieldIcmsAnswer
+  buttons: fieldIcmsButtons {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsButtonElement
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+<template>
+  <AccordionItem
+    :key="index"
+    :value="`accordion-${index + 1}`"
+    class="border-none not-last:mb-1 [&>h3]:mb-0"
+    v-bind="computedProps"
+  >
+    <AccordionTrigger
+      :ref="(el: any) => (triggerRefs[index] = el)"
+      :class="accordionTrigger({ colorScheme })"
+      @click="handleClick(index)"
+    >
+      {{ question }}
+    </AccordionTrigger>
+    <AccordionContent class="p-4 pb-6 text-base" ref="contentRef">
+      <div v-html="answer" />
+      <BlokkliField
+        name="field_icms_buttons"
+        :list="buttons"
+        class="mt-6 flex flex-wrap gap-6"
+        :class="[{ droptarget: isEditing }]"
+      />
+    </AccordionContent>
+  </AccordionItem>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsFaqElementFragment } from '#graphql-operations'
+import { tv } from 'tailwind-variants'
+import { useAccordionScroll } from '@iqual/nuxt-icms/composables/useAccordionScroll'
+import type { ComponentPublicInstance } from 'vue'
+
+defineProps<ParagraphIcmsFaqElementFragment>()
+
+const accordionTrigger = tv({
+  base: 'items-center rounded-lg px-6 py-4 shadow-custom-small hover:no-underline gap-4 text-left text-base',
+  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 { index, isEditing } = useAttrs().blokkliData
+
+const triggerRefs = ref<Array<ComponentPublicInstance>>([])
+
+const handleClick = (index: number): void => {
+  const { handleAccordionOpen } = useAccordionScroll(triggerRefs.value[index])
+  handleAccordionOpen()
+}
+
+const colorScheme = inject<string>('colorScheme')
+
+const computedProps = computed(() => {
+  if (isEditing) {
+    return {
+      open: true,
+    }
+  }
+  return {}
+})
+</script>

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

@@ -0,0 +1,23 @@
+fragment paragraphIcmsLayoutFaq on ParagraphIcmsLayoutFaq {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  subtitle: fieldIcmsSubtitle
+  media: fieldIcmsMediaElements {
+    ...media
+  }
+  text: fieldIcmsText
+  buttons: fieldIcmsButtons {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsButtonElement
+    }
+  }
+  faqElements: fieldIcmsFaqElements {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsFaqElement
+    }
+  }
+}

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

@@ -0,0 +1,84 @@
+<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 md:col-span-7"></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="relative col-span-12 mt-4 md:col-span-6 md:col-start-7 md:mt-0"
+      >
+        <Accordion :default-value="defaultValue" :collapsible="true">
+          <BlokkliField
+            name="field_icms_faq_elements"
+            :list="faqElements"
+            :class="{ droptarget: isEditing }"
+          />
+        </Accordion>
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutFaqFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsLayoutFaqFragment>()
+
+const defaultValue = computed(() => {
+  if (!isEditing) {
+    return 'accordion-1'
+  } else {
+    return ''
+  }
+})
+
+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>