@iqual/nuxt-icms 1.0.2

package/components/Paragraph/TextMedia/index.vue

@@ -0,0 +1,125 @@
+<template>
+  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
+    <DesignSystemAtomsGridRow>
+
+      <div :class="textColumnClassList">
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          pretitleClass="mb-2.5"
+          :title="title"
+          :subtitle="subtitle"
+          :titleWeight="titleWeight"
+          :titleStyle="titleStyle"
+          titleClass="mb-5"
+          :text="text"
+          :colorScheme="colorScheme"
+        />
+        <BlokkliField
+          name="field_icms_buttons"
+          :list="buttons"
+          class="mt-6 flex flex-wrap gap-6"
+          :class="[buttonAlignment, { droptarget: isEditing }]"
+        />
+      </div>
+      <div :class="imageColumnClassList">
+        <DesignSystemMoleculesMediaSlider
+          v-if="media && media.length"
+          :media="media"
+          :colorScheme="colorScheme"
+          mediaClass="size-full rounded-lg overflow-hidden"
+          sliderClass="my-0 rounded-lg overflow-hidden"
+          imageSizes="xs:100vw sm:100vw md:50vw lg:640px"
+        />
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutTextMediaFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsLayoutTextMediaFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+const textColumnClassList = computed(() => {
+  const classList = ['col-span-12']
+
+  if (options.value.textWidth === 'medium') {
+    classList.push('md:col-span-6')
+  } else if (options.value.textWidth === 'narrow') {
+    classList.push('md:col-span-4')
+  } else {
+    classList.push('md:col-span-8')
+  }
+
+  if (options.value.textAlign === 'right') {
+    classList.push(
+      'md:order-last',
+      options.value.textWidth === 'medium'
+        ? 'md:col-start-7 md:pl-6'
+        : options.value.textWidth === 'narrow'
+          ? 'md:col-start-8'
+          : 'md:col-start-5',
+    )
+  }
+  
+  if (options.value.textAlign === 'left' && options.value.textWidth === 'medium') {
+    classList.push('md:pr-6')
+  }
+
+  return classList
+})
+
+const imageColumnClassList = computed(() => {
+  const classList = ['col-span-12']
+
+  if (options.value.textWidth === 'medium') {
+    classList.push('md:col-span-6')
+  } else if (options.value.textWidth === 'narrow') {
+    classList.push('md:col-span-7')
+  } else {
+    classList.push('md:col-span-3')
+  }
+
+  if (options.value.textAlign === 'left') {
+    classList.push(
+      'md:order-last',
+      options.value.textWidth === 'medium'
+        ? 'md:col-start-7 md:pl-6'
+        : options.value.textWidth === 'narrow'
+          ? 'md:col-start-6'
+          : 'md:col-start-10',
+    )
+  }
+
+  if (options.value.textAlign === 'right' && options.value.textWidth === 'medium') {
+    classList.push('md:pr-6')
+  }
+
+  return classList
+})
+
+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/TwoColumnText/Element/fragment.graphql

@@ -0,0 +1,8 @@
+fragment paragraphIcms2ColTextElement on ParagraphIcms2ColTextElement {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  subtitle: fieldIcmsSubtitle
+  text: fieldIcmsText
+}

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

@@ -0,0 +1,31 @@
+<template>
+  <DesignSystemOrganismsTwoColumnTextElement
+    :pretitle="pretitle"
+    :title="title"
+    :titleWeight="titleWeight"
+    :titleStyle="titleStyle"
+    titleClass="mb-0"
+    :subtitle="subtitle"
+    :text="text"
+    :class="twoColumnTextElementClassList"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcms2ColTextElementFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcms2ColTextElementFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+const twoColumnTextElementClassList = computed(() => {
+  const classList = []
+  if (options.value.spacingBottom === 'small') {
+    classList.push('mb-16')
+  }
+  if (options.value.spacingBottom === 'large') {
+    classList.push('mb-32')
+  }
+  return classList
+})
+</script>

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

@@ -0,0 +1,8 @@
+fragment paragraphIcmsLayout2ColTextElements on ParagraphIcmsLayout2ColTextElements {
+  twoColumnTextElements: fieldIcms2ColTextElements {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcms2ColTextElement
+    }
+  }
+}

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

@@ -0,0 +1,25 @@
+<template>
+  <DesignSystemAtomsContainer :spacing="spacing" :colorScheme="colorScheme">
+    <BlokkliField
+      name="field_icms_2_col_text_elements"
+      :list="twoColumnTextElements"
+      :class="{ droptarget: isEditing }"
+    />
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayout2ColTextElementsFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsLayout2ColTextElementsFragment>()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+const colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+</script>

package/components/Paragraph/fragment.paragraphsFieldItem.graphql

@@ -0,0 +1,6 @@
+fragment paragraphsFieldItem on Paragraph {
+  uuid
+  bundle: entityBundle
+  isNew
+  options: paragraphsBlokkliOptions
+}

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

@@ -0,0 +1,9 @@
+fragment paragraphIcmsIframeElement on ParagraphIcmsIframeElement {
+  title: fieldIcmsTitle
+  link: fieldIcmsLink {
+    uri {
+      path
+    }
+  }
+  height: fieldIcmsNumber
+}

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

@@ -0,0 +1,16 @@
+<template>
+  <DesignSystemMoleculesIFrame
+    :title="title"
+    :link="link?.uri?.path"
+    :height="height"
+    :is-editing="isEditing"
+  />
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsIframeElementFragment } from '#graphql-operations'
+
+defineProps<ParagraphIcmsIframeElementFragment>()
+
+const isEditing = inject<boolean>('isEditing')
+</script>

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

@@ -0,0 +1,13 @@
+fragment paragraphIcmsLayoutIframe on ParagraphIcmsLayoutIframe {
+  pretitle: fieldIcmsPretitle
+  title: fieldIcmsTitle
+  titleWeight: fieldIcmsTitleWeight
+  titleStyle: fieldIcmsTitleStyle
+  text: fieldIcmsText
+  iFrameElements: fieldIcmsIframeElements {
+    ...paragraphsFieldItem
+    props {
+      ...paragraphIcmsIframeElement
+    }
+  }
+}

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

@@ -0,0 +1,161 @@
+<template>
+  <DesignSystemAtomsContainer :colorScheme="colorScheme" :spacing="spacing">
+    <DesignSystemAtomsGridRow class="pb-14 md:pb-0">
+      <div class="col-span-12 md:col-span-6" v-if="title">
+        <DesignSystemOrganismsContentBlock
+          :pretitle="pretitle"
+          :title="title"
+          :titleWeight="titleWeight"
+          :text="text"
+          :colorScheme="colorScheme"
+        />
+      </div>
+
+      <div v-if="isEditing" class="col-span-12">
+        <BlokkliField
+          name="field_icms_iframe_elements"
+          :list="iFrameElements"
+          :class="{ droptarget: isEditing }"
+        />
+      </div>
+
+      <div v-else class="col-span-12">
+        <template v-if="iFrameElements && iFrameElements.length === 1">
+          <DesignSystemMoleculesIFrame
+            :title="iFrameElements[0].props?.title"
+            :link="iFrameElements[0].props?.link?.uri?.path"
+            :height="iFrameElements[0].props?.height"
+          />
+        </template>
+
+        <Tabs
+          v-if="!isMobile && iFrameElements && iFrameElements.length > 1"
+          default-value="tab-1"
+          class="rounded-lg shadow-custom"
+        >
+          <TabsList
+            class="flex flex-col items-center justify-center bg-transparent p-0 lg:flex-row dark:bg-transparent"
+          >
+            <TabsTrigger
+              v-for="(iFrameElement, key) in iFrameElements"
+              :key="key"
+              :value="`tab-${key + 1}`"
+              :class="tabTrigger({ colorScheme })"
+            >
+              {{ iFrameElement?.props?.title }}
+            </TabsTrigger>
+          </TabsList>
+          <TabsContent
+            forceMount
+            v-for="(iFrameElement, key) in iFrameElements"
+            :key="key"
+            :value="`tab-${key + 1}`"
+            :class="tabContent({ colorScheme })"
+          >
+            <DesignSystemMoleculesIFrame
+              :title="iFrameElement.props?.title"
+              :link="iFrameElement.props?.link?.uri?.path"
+              :height="iFrameElement.props?.height"
+            />
+          </TabsContent>
+        </Tabs>
+
+        <Accordion
+          v-if="isMobile && iFrameElements && iFrameElements.length > 1"
+          type="single"
+          class="w-full"
+          collapsible
+          default-value="accordion-1"
+        >
+          <AccordionItem
+            v-for="(iFrameElement, key) in iFrameElements"
+            :key="key"
+            :value="`accordion-${key + 1}`"
+            class="mb-1 border-none [&>h3]:mb-0"
+          >
+            <AccordionTrigger
+              :ref="(el: any) => (triggerRefs[key] = el)"
+              :class="accordionTrigger({ colorScheme })"
+              @click="handleClick(key)"
+            >
+              {{ iFrameElement?.props?.title }}
+            </AccordionTrigger>
+            <AccordionContent class="p-4 pb-6 text-base">
+              <DesignSystemMoleculesIFrame
+                :title="iFrameElement.props?.title"
+                :link="iFrameElement.props?.link?.uri?.path"
+                :height="iFrameElement.props?.height"
+              />
+            </AccordionContent>
+          </AccordionItem>
+        </Accordion>
+      </div>
+    </DesignSystemAtomsGridRow>
+  </DesignSystemAtomsContainer>
+</template>
+
+<script lang="ts" setup>
+import type { ParagraphIcmsLayoutIframeFragment } from '#graphql-operations'
+import { tv } from 'tailwind-variants'
+
+defineProps<ParagraphIcmsLayoutIframeFragment>()
+
+const { isMobile } = useIsMobile()
+
+const { options, isEditing } = useAttrs().blokkliData
+
+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 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 triggerRefs = ref<Array<ComponentPublicInstance>>([])
+
+const handleClick = (index: number): void => {
+  const { handleAccordionOpen } = useAccordionScroll(triggerRefs.value[index])
+  handleAccordionOpen()
+}
+
+const colorScheme = computed(() => {
+  return options.value.colorScheme
+})
+
+const spacing = computed(() => {
+  return { bottom: options.value.spacingBottom, top: options.value.spacingTop }
+})
+
+provide('isEditing', isEditing)
+</script>

package/components/Section/Footer/index.vue

@@ -0,0 +1,144 @@
+<template>
+  <footer>
+    <DesignSystemAtomsContainer
+      :spacing="{ top: 'none', bottom: 'none' }"
+      class="border-y border-y-gray-100 pb-10 pt-16"
+    >
+      <DesignSystemAtomsGridRow class="grid-cols-3 lg:gap-36">
+        <div class="col-span-3 mb-6 lg:col-span-1">
+          <Media
+            v-if="companyLogo"
+            :media="companyLogo"
+            mediaClass="mb-8 w-32"
+            imageSizes="xs:128px"
+          />
+
+          <DesignSystemOrganismsContentBlock
+            :title="companyName"
+            :titleWeight="'h5'"
+            :titleStyle="'heading-5'"
+            :text="companyDescription"
+          />
+        </div>
+        <div
+          class="col-span-3 mb-6 flex flex-col gap-8 lg:col-span-1 lg:flex-row"
+        >
+          <ul v-for="(link, index) in footerMenuLinks" :key="index">
+            <p class="mb-5 font-bold" v-text="link.link.label" />
+
+            <li
+              v-for="(subLink, index) in link.subtree"
+              :key="index"
+              class="mb-3 last:mb-0"
+            >
+              <NuxtLink
+                v-if="subLink.link.url"
+                :to="subLink.link.url.path"
+                :title="subLink.link.label"
+                class="transition-colors hover:text-primary-500 focus:text-primary-500"
+              >{{ subLink.link.label }}</NuxtLink>
+            </li>
+          </ul>
+        </div>
+        <div class="col-span-3 mb-6 flex flex-col gap-6 lg:col-span-1">
+          <DesignSystemOrganismsContentBlock :text="address" />
+          <div>
+            <NuxtLink
+              v-if="phoneNumber"
+              :to="`tel:${phoneNumber}`"
+              :title="phoneNumber"
+              class="mb-2 block w-fit font-medium text-black hover:text-primary-500 motion-safe:transition-colors motion-safe:duration-200"
+            >
+              {{ phoneNumber }}
+            </NuxtLink>
+            <NuxtLink
+              v-if="emailAddress"
+              :to="`mailto:${emailAddress}`"
+              :title="emailAddress"
+              class="mb-2 block w-fit font-medium text-black hover:text-primary-500 motion-safe:transition-colors motion-safe:duration-200"
+            >
+              {{ emailAddress }}
+            </NuxtLink>
+          </div>
+        </div>
+      </DesignSystemAtomsGridRow>
+    </DesignSystemAtomsContainer>
+    <DesignSystemAtomsContainer
+      v-if="socialMediaLinks || footerMetaMenuLinks"
+      :spacing="{ top: 'none', bottom: 'none' }"
+      class="py-6"
+    >
+      <DesignSystemAtomsGridRow>
+        <div
+          class="col-span-12 flex flex-col-reverse justify-between gap-6 lg:flex-row"
+        >
+          <div class="flex gap-4">
+            <template v-for="(link, index) in socialMediaLinks" :key="index">
+              <NuxtLink
+                v-if="link?.uri?.path"
+                :to="link?.uri?.path"
+                :title="getSocialMediaIconMeta(link.uri.path).title"
+                target="_blank"
+                class="group"
+              >
+                <SpriteSymbol
+                  v-if="getSocialMediaIconMeta(link.uri.path)?.sprite"
+                  :name="getSocialMediaIconMeta(link.uri.path).sprite"
+                  class="size-8 transition-colors group-hover:text-primary-500"
+                />
+              </NuxtLink>
+            </template>
+          </div>
+          <div class="flex items-center">
+            <ul class="flex flex-col gap-4 md:flex-row md:gap-6">
+              <li v-for="(link, index) in footerMetaMenuLinks" :key="index">
+                <NuxtLink
+                  v-if="link.link.url"
+                  :to="link.link.url.path"
+                  :title="link.link.label"
+                  class="underline transition-colors hover:text-primary-500 focus:text-primary-500"
+                  prefetch
+                >{{ link.link.label }}</NuxtLink>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </DesignSystemAtomsGridRow>
+    </DesignSystemAtomsContainer>
+  </footer>
+</template>
+
+<script lang="ts" setup>
+import type { NuxtSvgSpriteSymbol } from '../../../../../.nuxt/nuxt-svg-sprite/runtime'
+const initData: Ref<InitData> = await useInitData()
+const { footerMenuLinks, footerMetaMenuLinks, globalConfig } = initData.value
+const {
+  companyLogo,
+  companyName,
+  companyDescription,
+  address,
+  phoneNumber,
+  emailAddress,
+  socialMediaLinks,
+} = globalConfig
+
+interface SocialMediaIconMeta {
+  sprite: NuxtSvgSpriteSymbol
+  title: string
+}
+
+const socialIconsMap: Record<string, NuxtSvgSpriteSymbol> = {
+  facebook: 'facebook',
+  instagram: 'instagram',
+  x: 'x',
+  linkedin: 'linkedin',
+  tiktok: 'tiktok',
+  pinterest: 'pinterest',
+}
+
+const getSocialMediaIconMeta = (url: string): SocialMediaIconMeta => {
+  const domain = new URL(url).hostname.split('.com')[0].split('.').slice(-1)[0]
+  const title = domain.charAt(0).toUpperCase() + domain.slice(1)
+  return { sprite: socialIconsMap[domain], title: title }
+}
+</script>