@meeovi/layer-shared 1.0.0

package/app/components/ui/Divider/__tests__/Divider.spec.tsx

@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils';
+import Divider from '~/components/ui/Divider/Divider.vue';
+
+describe('<Divider />', () => {
+  it('should render component', () => {
+    const { getByTestId } = mount(Divider);
+
+    expect(getByTestId('divider'));
+  });
+});

package/app/components/ui/Footer.vue

@@ -0,0 +1,92 @@
+<template>
+  <footer class="pt-10 bg-neutral-100 mb-[58px] md:mb-0" data-testid="footer">
+    <div
+      class="grid justify-center grid-cols-[1fr_1fr] md:grid-cols-[repeat(4,1fr)] px-4 md:px-6 pb-10 max-w-screen-3xl mx-auto"
+      data-testid="section-top"
+    >
+      <div v-for="{ key, subcategories } in categories" :key="key" class="min-w-[25%] xs:min-w-[50%] flex flex-col">
+        <div class="ml-4 text-lg font-medium leading-7 text-neutral-900 font-body">
+          {{ $t(`categories.${key}.label`) }}
+        </div>
+        <ul>
+          <SfListItem
+            v-for="{ key: subcategoryKey, link } in subcategories"
+            :key="subcategoryKey"
+            class="py-2 !bg-transparent typography-text-sm font-body"
+          >
+            <SfLink
+              :tag="NuxtLink"
+              class="no-underline text-neutral-600 hover:underline hover:!text-neutral-900 active:underline active:!text-neutral-900"
+              variant="secondary"
+              :to="link"
+            >
+              {{ $t(`categories.${key}.subcategories.${subcategoryKey}`) }}
+            </SfLink>
+          </SfListItem>
+        </ul>
+      </div>
+    </div>
+    <hr />
+    <div class="py-10 md:flex md:mx-auto max-w-screen-3xl" data-testid="section-middle">
+      <div v-for="{ key, icon, link, details } in contactOptions" :key="key" class="mx-auto my-4 text-center">
+        <component :is="icon" size="lg" />
+        <p class="py-1 my-2 font-medium typography-text-lg font-body">
+          <SfLink
+            :tag="NuxtLink"
+            class="no-underline text-neutral-600 hover:underline hover:!text-neutral-900 active:underline active:!text-neutral-900"
+            variant="secondary"
+            :to="link"
+          >
+            {{ $t(`contactOptions.${key}.label`) }}
+          </SfLink>
+        </p>
+        <p v-for="option in details" :key="option" class="leading-5 typography-text-sm text-neutral-600 font-body">
+          {{ $t(`contactOptions.${key}.details.${option}`) }}
+        </p>
+      </div>
+    </div>
+    <div class="bg-neutral-900" data-testid="section-bottom">
+      <div class="justify-end px-4 py-10 md:flex md:py-6 max-w-screen-3xl mx-auto">
+        <div class="flex justify-center py-2 gap-x-4 md:self-start">
+          <SfButton
+            v-for="{ label, link, icon } in socialMedia"
+            :key="label"
+            :tag="NuxtLink"
+            :to="link"
+            :title="$t('socialLabel', { label })"
+            square
+            variant="tertiary"
+            class="text-white active:text-white hover:text-white hover:!bg-neutral-500 active:!bg-transparent"
+            :data-testid="label"
+          >
+            <component :is="icon" />
+          </SfButton>
+        </div>
+        <div class="flex items-center justify-center gap-6 py-2 my-4 md:ml-auto md:my-0">
+          <SfLink
+            v-for="{ key, link } in bottomLinks"
+            :key="key"
+            :tag="NuxtLink"
+            class="text-white no-underline typography-text-sm active:text-white active:underline hover:text-white hover:underline"
+            variant="secondary"
+            :to="link"
+          >
+            {{ $t(`bottomLinks.${key}`) }}
+          </SfLink>
+        </div>
+        <p
+          class="flex items-center justify-center leading-5 text-center typography-text-sm text-white/50 font-body md:ml-6"
+        >
+          {{ companyName }}
+        </p>
+      </div>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts">
+import { SfButton, SfLink, SfListItem } from '@storefront-ui/vue';
+import { bottomLinks, categories, companyName, contactOptions, socialMedia } from '~/mocks';
+
+const NuxtLink = resolveComponent('NuxtLink');
+</script>

package/app/components/ui/Form/FormHelperText.vue

@@ -0,0 +1,5 @@
+<template>
+  <small class="text-xs text-neutral-500 mt-0.5 block" data-testid="form-helper-text">
+    <slot />
+  </small>
+</template>

package/app/components/ui/Form/FormLabel.vue

@@ -0,0 +1,5 @@
+<template>
+  <span class="block text-sm font-medium pb-0.5" data-testid="form-label">
+    <slot />
+  </span>
+</template>

package/app/components/ui/Form/FormPasswordInput.vue

@@ -0,0 +1,15 @@
+<template>
+  <SfInput :type="isPasswordVisible ? 'text' : 'password'">
+    <template #suffix>
+      <button type="button" @click="isPasswordVisible = !isPasswordVisible">
+        <component :is="isPasswordVisible ? SfIconVisibilityOff : SfIconVisibility" />
+      </button>
+    </template>
+  </SfInput>
+</template>
+
+<script setup lang="ts">
+import { SfInput, SfIconVisibility, SfIconVisibilityOff } from '@storefront-ui/vue';
+
+const isPasswordVisible = ref<boolean>();
+</script>

package/app/components/ui/Form/__tests__/FormHelperText.spec.ts

@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils';
+import FormHelperText from '~/components/ui/Form/FormHelperText.vue';
+
+describe('<FormHelperText />', () => {
+  it('should render component', () => {
+    const { getByTestId } = mount(FormHelperText);
+
+    expect(getByTestId('form-helper-text')); 
+  });
+});

package/app/components/ui/Form/__tests__/FormLabel.spec.ts

@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils';
+import FormLabel from '~/components/ui/Form/FormLabel.vue';
+
+describe('<FormLabel />', () => {
+  it('should render component', () => {
+    const { getByTestId } = mount(FormLabel);
+
+    expect(getByTestId('form-label')); 
+  });
+});

package/app/components/ui/Hero/Hero.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="relative min-h-[600px] mb-10">
+    <div class="md:flex md:flex-row-reverse md:justify-center min-h-[600px] max-w-screen-3xl mx-auto">
+      <div class="flex flex-col justify-center md:basis-2/4 md:items-stretch md:overflow-hidden">
+        <NuxtImg
+          :src="image"
+          alt="Hero"
+          class="h-auto w-full object-cover object-left"
+          width="764"
+          height="600"
+          fetchpriority="high"
+          format="webp"
+          preload
+        />
+      </div>
+      <div class="p-4 md:p-10 md:flex md:flex-col md:justify-center md:items-start md:basis-2/4">
+        <p class="typography-text-xs md:typography-text-sm font-bold tracking-widest text-neutral-500 uppercase">
+          {{ subtitle }}
+        </p>
+        <h1 class="typography-headline-2 md:typography-headline-1 md:leading-[67.5px] font-bold mt-2 mb-4">
+          {{ title }}
+        </h1>
+        <p class="typography-text-base md:typography-text-lg">{{ description }}</p>
+        <div class="flex flex-col md:flex-row gap-4 mt-6">
+          <SfButton size="lg" :tag="NuxtLink" :to="primaryButtonLink">
+            {{ primaryButtonText }}
+          </SfButton>
+          <SfButton size="lg" :tag="NuxtLink" :to="secondaryButtonLink" class="bg-white" variant="secondary">
+            {{ secondaryButtonText }}
+          </SfButton>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { SfButton } from '@storefront-ui/vue';
+import type { HeroProps } from '~/components/ui/Hero/types';
+
+defineProps<HeroProps>();
+
+const NuxtLink = resolveComponent('NuxtLink');
+</script>

package/app/components/ui/Hero/types.ts

@@ -0,0 +1,10 @@
+export type HeroProps = {
+  image: string;
+  subtitle: string;
+  title: string;
+  description: string;
+  primaryButtonLink: string;
+  primaryButtonText: string;
+  secondaryButtonLink: string;
+  secondaryButtonText: string;
+};

package/app/components/ui/Modal/Modal.vue

@@ -0,0 +1,19 @@
+<template>
+  <UiOverlay :visible="modelValue">
+    <SfModal class="md:max-h-[min(calc(100vh-32px),100%)]" v-bind="{ ...$attrs, ...props }">
+      <slot />
+    </SfModal>
+  </UiOverlay>
+</template>
+
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+<script setup lang="ts">
+import { SfModal } from '@storefront-ui/vue';
+import type { ModalProps } from '~/components/ui/Modal/types';
+
+const props = defineProps<ModalProps>();
+</script>

package/app/components/ui/Modal/types.ts

@@ -0,0 +1,8 @@
+import type { ConcreteComponent } from 'vue';
+
+export interface ModalProps {
+  modelValue?: boolean;
+  tag?: string | ConcreteComponent;
+  disableClickAway?: boolean;
+  disableEsc?: boolean;
+}

package/app/components/ui/Motionable.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { useMotions } from '@vueuse/motion';
+
+interface MotionableProps {
+	as?: string | object;
+	name: string;
+	show?: boolean;
+}
+
+const props = withDefaults(defineProps<MotionableProps>(), {
+	as: 'div',
+	show: true,
+});
+
+const motions = useMotions();
+const leaved = ref(!props.show);
+
+watch(
+	() => props.show,
+	async (newShow) => {
+		const motion = motions[props.name];
+
+		if (motion && motion.isAnimating.value) {
+			motion.stop('leave');
+
+			if (newShow) {
+				motion.apply('enter');
+			}
+		}
+
+		if (!newShow) {
+			leaved.value = false;
+
+			motion.leave(() => {
+				leaved.value = true;
+			});
+		}
+	},
+);
+</script>
+<template>
+	<component :is="as" v-if="show || !leaved" v-motion="name">
+		<slot />
+	</component>
+</template>

package/app/components/ui/NavbarBottom.vue

@@ -0,0 +1,63 @@
+<template>
+  <nav class="w-full fixed bottom-0 left-0 flex flex-row items-stretch md:hidden" data-testid="navbar-bottom">
+    <SfButton
+      v-for="{ label, icon, link } in items"
+      :key="label"
+      variant="tertiary"
+      :class="[
+        '!p-1 !pt-3 flex flex-col h-full w-full rounded-none bg-primary-700 text-white hover:text-white hover:bg-primary-800 active:text-white active:bg-primary-900 !text-xs !font-base',
+        { 'text-white bg-primary-900': $route.path === link },
+      ]"
+      size="sm"
+      :tag="NuxtLink"
+      :to="link"
+    >
+      <template #prefix>
+        <div class="relative">
+          <component :is="icon" />
+          <SfBadge
+            v-if="label === 'cart'"
+            :content="cartLineItemsCount"
+            class="outline-white bg-white !text-neutral-900 translate-x-[5px] translate-y-[-3px]"
+          />
+        </div>
+      </template>
+      {{ label }}
+    </SfButton>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { SfButton, SfBadge, SfIconShoppingCart, SfIconHome, SfIconMenu, SfIconPerson } from '@storefront-ui/vue';
+
+const { t } = useI18n();
+const { data: cart } = useCart();
+
+const items = [
+  {
+    label: t('home'),
+    icon: SfIconHome,
+    link: paths.home,
+  },
+  {
+    label: t('products'),
+    icon: SfIconMenu,
+    link: paths.category,
+  },
+  {
+    label: t('cart'),
+    icon: SfIconShoppingCart,
+    link: paths.cart,
+  },
+  {
+    label: t('account.navBarBottomHeading'),
+    icon: SfIconPerson,
+    link: paths.account,
+  },
+];
+
+const cartLineItemsCount = computed(
+  () => cart.value?.lineItems.reduce((total, { quantity }) => total + quantity, 0) ?? 0,
+);
+const NuxtLink = resolveComponent('NuxtLink');
+</script>

package/app/components/ui/NavbarTop.vue

@@ -0,0 +1,25 @@
+<template>
+  <header
+    :class="[
+      'h-14 md:h-20 flex z-50 md:sticky md:-top-5 md:pt-2.5 md:shadow-md',
+      { 'bg-primary-700 text-white': filled },
+      { 'bg-white text-[#02C652] border-b border-neutral-200': !filled },
+    ]"
+    data-testid="navbar-top"
+  >
+    <div
+      class="flex gap-[clamp(1rem,3vw,3rem)] items-center w-full md:h-[60px] max-w-screen-3xl py-6 px-4 md:px-6 lg:px-10 mx-auto sticky top-0 justify-between md:justify-normal"
+    >
+      <NuxtLink :to="paths.home" aria-label="Sf Homepage" class="h-6 md:h-7 -mt-1.5">
+        <UiVsfLogo />
+      </NuxtLink>
+      <slot />
+    </div>
+  </header>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  filled?: boolean;
+}>();
+</script>

package/app/components/ui/Overlay/Overlay.vue

@@ -0,0 +1,14 @@
+<template>
+  <div
+    v-if="visible"
+    class="w-full h-full top-0 bottom-0 left-0 right-0 bg-neutral-500/50 fixed z-50"
+    data-testid="overlay"
+  >
+    <slot />
+  </div>
+</template>
+<script setup lang="ts">
+import type { OverlayProps } from '~/components/ui/Overlay/types';
+
+defineProps<OverlayProps>();
+</script>

package/app/components/ui/Overlay/__tests__/Overlay.spec.ts

@@ -0,0 +1,14 @@
+import { mount } from '@vue/test-utils';
+import Overlay from '~/components/ui/Overlay/Overlay.vue';
+
+describe('<Overlay />', () => {
+  it('should render component', () => {
+    const wrapper = mount(Overlay, {
+      props: {
+        visible: true,
+      },
+    });
+
+    expect(wrapper.getByTestId('overlay'));    
+  });
+});

package/app/components/ui/Overlay/types.ts

@@ -0,0 +1,3 @@
+export interface OverlayProps {
+  visible?: boolean;
+}

package/app/components/ui/PageBuilder.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import type { Page, OsProposal, PageBlock, BlockType } from '~/types';
+
+const componentMap: Record<BlockType, any> = {
+	block_hero: resolveComponent('BlocksHero'),
+	block_faqs: resolveComponent('BlocksFaqs'),
+	block_richtext: resolveComponent('BlocksRichText'),
+	block_testimonials: resolveComponent('BlocksTestimonials'),
+	block_quote: resolveComponent('BlocksQuote'),
+	block_cta: resolveComponent('BlocksCta'),
+	block_form: resolveComponent('BlocksForm'),
+	block_logocloud: resolveComponent('BlocksLogoCloud'),
+	block_team: resolveComponent('BlocksTeam'),
+	block_html: resolveComponent('BlocksRawHtml'),
+	block_video: resolveComponent('BlocksVideo'),
+	block_gallery: resolveComponent('BlocksGallery'),
+	block_steps: resolveComponent('BlocksSteps'),
+	block_columns: resolveComponent('BlocksColumns'),
+	block_divider: resolveComponent('BlocksDivider'),
+};
+
+const props = defineProps<{
+	page: Page | OsProposal;
+}>();
+
+const blocks = computed(() => {
+	const blocks = unref(props.page as Page)?.blocks as PageBlock[];
+	return blocks?.filter((block) => {
+		return block.hide_block !== true;
+	});
+});
+</script>
+<template>
+	<div id="content" class="mx-auto">
+		<template v-for="block in blocks" :key="block.id">
+			<component :is="componentMap[block.collection]" v-if="block && block.collection" :data="block.item" />
+		</template>
+	</div>
+</template>

package/app/components/ui/PageContainer.vue

@@ -0,0 +1,5 @@
+<template>
+	<div class="px-4 py-8 mx-auto max-w-7xl md:py-24 lg:py-12 lg:px-8">
+		<slot />
+	</div>
+</template>

package/app/components/ui/Pagination/Pagination.vue

@@ -0,0 +1,151 @@
+<template>
+  <nav
+    class="flex justify-between items-end border-t border-neutral-200"
+    role="navigation"
+    aria-label="pagination"
+    data-testid="pagination"
+  >
+    <SfButton
+      size="lg"
+      :aria-label="$t('prevAriaLabel')"
+      :disabled="pagination.selectedPage <= 1"
+      variant="tertiary"
+      class="gap-3"
+      @click="pagination.prev"
+    >
+      <template #prefix>
+        <SfIconChevronLeft />
+      </template>
+      <span class="hidden sm:inline-flex">{{ $t('prev') }}</span>
+    </SfButton>
+    <ul class="flex justify-center">
+      <li v-if="!pagination.pages.includes(1)">
+        <div
+          :class="[
+            'flex pt-1 border-t-4 border-transparent',
+            { 'font-medium border-t-4 !border-primary-500': pagination.selectedPage === 1 },
+          ]"
+        >
+          <button
+            type="button"
+            class="px-4 py-3 md:w-12 rounded-md text-neutral-500 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
+            :aria-current="pagination.selectedPage === 1"
+            @click="pagination.setPage(1)"
+          >
+            1
+          </button>
+        </div>
+      </li>
+      <li v-if="pagination.startPage > 2">
+        <div class="flex pt-1 border-t-4 border-transparent">
+          <button type="button" disabled aria-hidden="true" class="px-4 py-3 md:w-12 rounded-md text-neutral-500">
+            ...
+          </button>
+        </div>
+      </li>
+      <li v-if="maxVisiblePages === 1 && pagination.selectedPage === pagination.totalPages">
+        <div class="flex pt-1 border-t-4 border-transparent">
+          <button
+            type="button"
+            class="px-4 py-3 md:w-12 rounded-md text-neutral-500 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
+            :aria-current="pagination.endPage - 1 === pagination.selectedPage"
+            @click="pagination.setPage(pagination.endPage - 1)"
+          >
+            {{ pagination.endPage - 1 }}
+          </button>
+        </div>
+      </li>
+      <li v-for="page in pagination.pages" :key="`page-${page}`">
+        <div
+          :class="[
+            'flex pt-1 border-t-4 border-transparent',
+            { 'font-medium border-t-4 !border-primary-700': pagination.selectedPage === page },
+          ]"
+        >
+          <button
+            type="button"
+            :class="[
+              'px-4 py-3 md:w-12 text-neutral-500 rounded-md hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900',
+              {
+                '!text-neutral-900 hover:!text-primary-800 active:!text-primary-900': pagination.selectedPage === page,
+              },
+            ]"
+            :aria-label="$t('currentPage', { page, totalPages: pagination.totalPages })"
+            :aria-current="pagination.selectedPage === page"
+            @click="pagination.setPage(page)"
+          >
+            {{ page }}
+          </button>
+        </div>
+      </li>
+      <li v-if="maxVisiblePages === 1 && pagination.selectedPage === 1">
+        <div class="flex pt-1 border-t-4 border-transparent">
+          <button
+            type="button"
+            class="px-4 py-3 md:w-12 rounded-md text-neutral-500 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
+            :aria-label="$t('secondPageAriaLabel')"
+            @click="pagination.setPage(2)"
+          >
+            2
+          </button>
+        </div>
+      </li>
+      <li v-if="pagination.endPage < pagination.totalPages - 1">
+        <div class="flex pt-1 border-t-4 border-transparent">
+          <button type="button" disabled aria-hidden="true" class="px-4 py-3 md:w-12 rounded-md text-neutral-500">
+            ...
+          </button>
+        </div>
+      </li>
+      <li v-if="!pagination.pages.includes(pagination.totalPages)">
+        <div
+          :class="[
+            'flex pt-1 border-t-4 border-transparent',
+            { 'font-medium border-t-4 !border-primary-500': pagination.selectedPage === pagination.totalPages },
+          ]"
+        >
+          <button
+            type="button"
+            class="px-4 py-3 md:w-12 rounded-md text-neutral-500 hover:bg-primary-100 hover:text-primary-800 active:bg-primary-200 active:text-primary-900"
+            :aria-current="pagination.totalPages === pagination.selectedPage"
+            @click="pagination.setPage(pagination.totalPages)"
+          >
+            {{ pagination.totalPages }}
+          </button>
+        </div>
+      </li>
+    </ul>
+    <SfButton
+      size="lg"
+      :aria-label="$t('nextAriaLabel')"
+      :disabled="pagination.selectedPage >= pagination.totalPages"
+      variant="tertiary"
+      class="gap-3"
+      @click="pagination.next"
+    >
+      <span class="hidden sm:inline-flex">{{ $t('next') }}</span>
+      <template #suffix>
+        <SfIconChevronRight />
+      </template>
+    </SfButton>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { SfButton, SfIconChevronLeft, SfIconChevronRight, usePagination } from '@storefront-ui/vue';
+import type { PaginationProps } from '~/components/ui/Pagination/types';
+
+const props = defineProps<PaginationProps>();
+
+const { currentPage, pageSize, totalItems, maxVisiblePages: maxVisiblePagesProperty } = toRefs(props);
+const pagination = computed(() =>
+  reactive(
+    usePagination({
+      totalItems: totalItems.value,
+      currentPage: currentPage.value,
+      pageSize: pageSize.value,
+      maxPages: maxVisiblePagesProperty.value,
+    }),
+  ),
+);
+</script>

package/app/components/ui/Pagination/__tests__/Pagination.spec.ts

@@ -0,0 +1,17 @@
+import { mount } from '@vue/test-utils';
+import Pagination from '~/components/ui/Pagination/Pagination.vue';
+
+describe('<Pagination />', () => {
+  it('should render component', () => {
+    const { getByTestId } = mount(Pagination, {
+      props: {
+        currentPage: 4,
+        pageSize: 24,
+        maxVisiblePages: 5,
+        totalItems: 2137,
+      },
+    });
+
+    expect(getByTestId('pagination'));
+  });
+});

package/app/components/ui/Pagination/types.ts

@@ -0,0 +1,6 @@
+export type PaginationProps = {
+  currentPage: number;
+  pageSize: number;
+  totalItems: number;
+  maxVisiblePages: number;
+};