feat: productSlider [SFUI2-1190]

.changeset/beige-coins-argue.md

@@ -0,0 +1,5 @@
+---
+'@storefront-ui/vue': patch
+---
+
+fix typings of SfScrollable drag prop

apps/docs/components/blocks/ProductSlider.md

@@ -0,0 +1,34 @@
+---
+layout: DefaultLayout
+hideBreadcrumbs: true
+description: The ProductSlider allows for scrollable content with product cards, providing a visually appealing and interactive way to showcase products.
+hideToc: true
+---
+# ProductSlider
+
+::: warning This is an experimental block
+This block has been built on top of experimental base component. The API and structure of it might change based on user feedback.
+:::
+
+The example allows for scrollable content with product cards, providing a visually appealing and interactive way to showcase products.
+
+## Basic
+
+Users can easily navigate through the cards by swiping or using navigation arrows, making it convenient to explore a collection of products within a limited space. The component is responsive and adapts to different devices, ensuring a consistent and enjoyable browsing experience.
+
+For further customization options, please refer to our documentation on the [Scrollable](/<!-- vue -->vue<!-- end vue --><!-- react -->react<!-- end react -->/components/scrollable.html) component and [Product Card](/<!-- vue -->vue<!-- end vue --><!-- react -->react<!-- end react -->/blocks/ProductCard.html) block pages.
+
+<Showcase showcase-name="ProductSlider/Basic" style="min-height:380px">
+
+<!-- vue -->
+<<<../../preview/nuxt/pages/showcases/ProductSlider/Basic.vue
+<!-- end vue -->
+<!-- react -->
+<<<../../preview/next/pages/showcases/ProductSlider/Basic.tsx#source
+<!-- end react -->
+
+</Showcase>
+
+## Accessibility notes
+
+The ProductSlider supports the use of the keyboard (Tab/alt+Tab) to navigate through images.

apps/docs/components/blocks/Review.md

@@ -10,7 +10,7 @@ hideToc: true
 
 ## With Avatar
 
-Basic Review usage with avatar and [Rating](/vue/components/rating.html) base component.
+Basic Review usage with avatar and [Rating](/<!-- vue -->vue<!-- end vue --><!-- react -->react<!-- end react -->/components/rating.html) base component.
 
 <Showcase showcase-name="Review/WithAvatar" style="min-height:220px">
 

apps/preview/next/pages/showcases/ProductSlider/Basic.tsx

@@ -0,0 +1,110 @@
+/* eslint-disable react/no-array-index-key */
+/* eslint-disable jsx-a11y/anchor-has-content */
+import { ShowcasePageLayout } from '../../showcases';
+
+// #region source
+import {
+ SfLink,
+ SfButton,
+ SfIconFavorite,
+ SfIconChevronLeft,
+ SfIconChevronRight,
+ SfScrollable,
+} from '@storefront-ui/react';
+import classNames from 'classnames';
+
+const products = Array.from(Array(10), (_, i) => ({
+ id: i.toString(),
+ name: 'Athletic mens walking sneakers',
+ price: '$2,345.99',
+ img: {
+ src: 'http://localhost:3100/@assets/sneakers.png',
+ alt: 'White sneaker shoe',
+ },
+}));
+
+function ButtonPrev({ disabled, ...attributes }: { disabled?: boolean }) {
+ return (
+ <SfButton
+ className={classNames('absolute !rounded-full z-10 left-4 bg-white hidden md:block', {
+ '!hidden': disabled,
+ })}
+ variant="secondary"
+ size="lg"
+ square
+ {...attributes}
+ >
+ <SfIconChevronLeft />
+ </SfButton>
+ );
+}
+
+ButtonPrev.defaultProps = { disabled: false };
+
+function ButtonNext({ disabled, ...attributes }: { disabled?: boolean }) {
+ return (
+ <SfButton
+ className={classNames('absolute !rounded-full z-10 right-4 bg-white hidden md:block', {
+ '!hidden': disabled,
+ })}
+ variant="secondary"
+ size="lg"
+ square
+ {...attributes}
+ >
+ <SfIconChevronRight />
+ </SfButton>
+ );
+}
+
+ButtonNext.defaultProps = { disabled: false };
+
+export default function GalleryVertical() {
+ return (
+ <SfScrollable
+ className="m-auto items-center w-full [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
+ buttons-placement="floating"
+ drag
+ slotPreviousButton={<ButtonPrev />}
+ slotNextButton={<ButtonNext />}
+ >
+ {products.map(({ id, name, price, img }) => (
+ <div
+ key={id}
+ className="first:ms-auto last:me-auto border border-neutral-200 shrink-0 rounded-md hover:shadow-lg w-[148px] lg:w-[192px]"
+ >
+ <div className="relative">
+ <SfLink href="#">
+ <img
+ src={img.src}
+ alt={img.alt}
+ className="block object-cover h-auto rounded-md aspect-square lg:w-[190px] lg:h-[190px]"
+ width="146"
+ height="146"
+ />
+ </SfLink>
+ <SfButton
+ type="button"
+ variant="tertiary"
+ size="sm"
+ square
+ className="absolute bottom-0 right-0 mr-2 mb-2 bg-white border border-neutral-200 !rounded-full"
+ aria-label="Add to wishlist"
+ >
+ <SfIconFavorite size="sm" />
+ </SfButton>
+ </div>
+ <div className="p-2 border-t border-neutral-200 typography-text-sm">
+ <SfLink href="#" variant="secondary" className="no-underline">
+ {name}
+ </SfLink>
+ <span className="block mt-2 font-bold">{price}</span>
+ </div>
+ </div>
+ ))}
+ </SfScrollable>
+ );
+}
+// #endregion source
+
+GalleryVertical.getLayout = ShowcasePageLayout;

apps/preview/nuxt/pages/showcases/ProductSlider/Basic.vue

@@ -0,0 +1,84 @@
+<template>
+ <SfScrollable
+ class="m-auto items-center w-full [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]"
+ buttons-placement="floating"
+ drag
+ >
+ <template #previousButton="defaultProps">
+ <SfButton
+ v-bind="defaultProps"
+ class="absolute !rounded-full z-10 left-4 bg-white hidden md:block"
+ :class="{ '!hidden': defaultProps.disabled }"
+ variant="secondary"
+ size="lg"
+ square
+ >
+ <SfIconChevronLeft />
+ </SfButton>
+ </template>
+ <div
+ v-for="{ id, name, price, img } in products"
+ :key="id"
+ class="first:ms-auto last:me-auto border border-neutral-200 shrink-0 rounded-md hover:shadow-lg w-[148px] lg:w-[192px]"
+ >
+ <div class="relative">
+ <SfLink href="#">
+ <img
+ :src="img.src"
+ :alt="img.alt"
+ class="block object-cover h-auto rounded-md aspect-square lg:w-[190px] lg:h-[190px]"
+ width="146"
+ height="146"
+ />
+ </SfLink>
+ <SfButton
+ type="button"
+ variant="tertiary"
+ size="sm"
+ square
+ class="absolute bottom-0 right-0 mr-2 mb-2 bg-white border border-neutral-200 !rounded-full"
+ aria-label="Add to wishlist"
+ >
+ <SfIconFavorite size="sm" />
+ </SfButton>
+ </div>
+ <div class="p-2 border-t border-neutral-200 typography-text-sm">
+ <SfLink href="#" variant="secondary" class="no-underline">{{ name }}</SfLink>
+ <span class="block mt-2 font-bold">{{ price }}</span>
+ </div>
+ </div>
+ <template #nextButton="defaultProps">
+ <SfButton
+ v-bind="defaultProps"
+ class="absolute !rounded-full z-10 right-4 bg-white hidden md:block"
+ :class="{ '!hidden': defaultProps.disabled }"
+ variant="secondary"
+ size="lg"
+ square
+ >
+ <SfIconChevronRight />
+ </SfButton>
+ </template>
+ </SfScrollable>
+</template>
+
+<script lang="ts" setup>
+import {
+ SfLink,
+ SfButton,
+ SfIconFavorite,
+ SfIconChevronLeft,
+ SfIconChevronRight,
+ SfScrollable,
+} from '@storefront-ui/vue';
+
+const products = Array.from(Array(10), (_, i) => ({
+ id: i.toString(),
+ name: 'Athletic mens walking sneakers',
+ price: '$2,345.99',
+ img: {
+ src: 'http://localhost:3100/@assets/sneakers.png',
+ alt: 'White sneaker shoe',
+ },
+}));
+</script>

packages/sfui/frameworks/vue/components/SfScrollable/SfScrollable.vue

@@ -44,7 +44,7 @@ const props = defineProps({
  default: undefined,
  },
  drag: {
- type: [Object || Boolean] as PropType<ScrollableOptions['drag']>,
+ type: [Object, Boolean] as PropType<ScrollableOptions['drag']>,
  default: undefined,
  },
  prevDisabled: {