@designcrowd/fe-shared-lib 1.4.8-promocardv1 → 1.4.9

package/src/atoms/components/Carousel/carousel.stories.js

@@ -1,530 +1,261 @@
-import Icon from '../Icon/Icon.vue';
-import { cards } from './Carousel.fixtures';
 import Carousel from './Carousel.vue';
+import Icon from '../Icon/Icon.vue';
+import { carouselProps, cards } from './Carousel.fixtures';
 
 export default {
   title: 'Components/Carousel',
   component: Carousel,
-  tags: ['autodocs'],
-  argTypes: {
-    cards: {
-      control: 'object',
-      description: 'Array of card data to display in the carousel',
-      table: {
-        type: { summary: 'Array<Object>' },
-        defaultValue: { summary: '[]' },
-      },
-    },
-    showControls: {
-      control: 'boolean',
-      description: 'Show/hide navigation arrows',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'true' },
-      },
-    },
-    showBullets: {
-      control: 'boolean',
-      description: 'Show/hide pagination bullets',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'true' },
-      },
-    },
-    hideBulletsOnMobile: {
-      control: 'boolean',
-      description: 'Hide pagination bullets on mobile devices',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'true' },
-      },
-    },
-    navCarousel: {
-      control: 'boolean',
-      description: 'Use alternative navigation styling',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-    disableRightClick: {
-      control: 'boolean',
-      description: 'Disable right-click context menu',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'false' },
-      },
-    },
-    options: {
-      control: 'object',
-      description: 'Swiper options object for customization',
-      table: {
-        type: { summary: 'Object' },
-        defaultValue: { summary: '{}' },
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      description: {
-        component:
-          'A flexible carousel component built with Swiper.js. Supports multiple slides, custom navigation, pagination, and various display options.',
-      },
-    },
-  },
 };
 
-// Default story with interactive controls
-export const Default = {
-  args: {
-    cards,
-    showControls: true,
-    showBullets: true,
-    hideBulletsOnMobile: false,
-    navCarousel: false,
-    options: {
-      loop: true,
-      spaceBetween: 20,
-      slidesPerView: 1,
-      breakpoints: {
-        640: {
-          slidesPerView: 2,
-          slidesPerGroup: 2,
-        },
-        1024: {
-          slidesPerView: 3,
-          slidesPerGroup: 3,
-        },
-      },
-    },
-  },
-  render: (args) => ({
+export const Sample = () => {
+  return {
     components: { Carousel },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="tw-p-8">
-        <Carousel
-          :cards="args.cards"
-          :show-controls="args.showControls"
-          :show-bullets="args.showBullets"
-          :hide-bullets-on-mobile="args.hideBulletsOnMobile"
-          :nav-carousel="args.navCarousel"
-          :options="args.options"
-        >
-          <template #slide="{ slide }">
-            <div class="tw-flex tw-flex-col tw-items-center tw-cursor-pointer tw-p-4 tw-bg-gray-50 tw-rounded-lg tw-h-full">
-              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-48 tw-object-contain tw-mb-4" />
-              <span class="tw-text-lg tw-font-semibold tw-text-center">{{ slide.name }}</span>
-            </div>
-          </template>
-        </Carousel>
-      </div>
-    `,
-  }),
-};
-
-// Single slide view
-export const SingleSlide = {
-  args: {
-    cards,
-    showControls: true,
-    showBullets: true,
-    options: {
-      loop: false,
-      slidesPerView: 1,
-      slidesPerGroup: 1,
-    },
-  },
-  render: (args) => ({
-    components: { Carousel },
-    setup() {
-      return { args };
-    },
-    template: `
-      <div class="tw-p-8 tw-max-w-md tw-mx-auto">
-        <Carousel
-          :cards="args.cards"
-          :show-controls="args.showControls"
-          :show-bullets="args.showBullets"
-          :options="args.options"
-        >
-          <template #slide="{ slide }">
-            <div class="tw-flex tw-flex-col tw-items-center tw-p-6 tw-bg-white tw-rounded-xl tw-shadow-lg">
-              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-64 tw-object-contain tw-mb-4" />
-              <h3 class="tw-text-xl tw-font-bold tw-text-center">{{ slide.name }}</h3>
-              <p class="tw-text-gray-600 tw-text-center tw-mt-2">Click to learn more</p>
-            </div>
-          </template>
-        </Carousel>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Display one slide at a time with navigation controls.',
-      },
+    data() {
+      return {
+        carouselProps,
+        cards,
+      };
     },
-  },
-};
-
-// Without navigation controls
-export const WithoutControls = {
-  args: {
-    cards,
-    showControls: false,
-    showBullets: true,
-    options: {
-      loop: true,
-      autoplay: {
-        delay: 3000,
-        disableOnInteraction: false,
+    methods: {
+      alert(e) {
+        // eslint-disable-next-line no-alert
+        alert(`You have clicked the "${e.slide.name}" slide`);
       },
     },
-  },
-  render: (args) => ({
-    components: { Carousel },
-    setup() {
-      return { args };
-    },
     template: `
-      <div class="tw-p-8">
-        <Carousel
-          :cards="args.cards"
-          :show-controls="args.showControls"
-          :show-bullets="args.showBullets"
-          :options="args.options"
-        >
-          <template #slide="{ slide }">
-            <div class="tw-flex tw-flex-col tw-items-center tw-p-4">
-              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-40 tw-object-contain tw-mb-2" />
-              <span class="tw-text-center tw-font-medium">{{ slide.name }}</span>
-            </div>
-          </template>
-        </Carousel>
-      </div>
+      <Carousel
+      class="tw-p-8"
+        :cards="cards"
+        :options="carouselProps"
+        :hide-bullets-on-mobile="false"
+        @on-slide-click="alert"
+      >
+        <template #slide="{ slide }">
+          <div class="tw-flex tw-flex-col tw-items-center tw-cursor-pointer">
+            <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full" width="100px" />
+              <span>{{ slide.name }}</span>
+          </div>
+        </template>
+      </Carousel>
     `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Auto-playing carousel without navigation arrows. Uses only pagination bullets for navigation.',
-      },
-    },
-  },
+  };
 };
 
-// Without bullets
-export const WithoutBullets = {
-  args: {
-    cards,
-    showControls: true,
-    showBullets: false,
-    options: {
-      loop: true,
-      slidesPerView: 2,
-      spaceBetween: 20,
-    },
-  },
-  render: (args) => ({
+export const CarouselDotsHidden = () => {
+  return {
     components: { Carousel },
-    setup() {
-      return { args };
+    data() {
+      return {
+        carouselProps,
+        cards,
+      };
     },
-    template: `
-      <div class="tw-p-8">
-        <Carousel
-          :cards="args.cards"
-          :show-controls="args.showControls"
-          :show-bullets="args.showBullets"
-          :options="args.options"
-        >
-          <template #slide="{ slide }">
-            <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-bg-gray-100 tw-rounded">
-              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-32 tw-object-contain tw-mb-2" />
-              <span class="tw-text-center">{{ slide.name }}</span>
-            </div>
-          </template>
-        </Carousel>
-      </div>
-    `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Carousel with arrow controls only, no pagination bullets.',
+    methods: {
+      alert(e) {
+        // eslint-disable-next-line no-alert
+        alert(`You have clicked the "${e.slide.name}" slide`);
       },
     },
-  },
-};
-
-// Custom arrow styling
-export const CustomArrows = {
-  args: {
-    cards,
-  },
-  render: (args) => ({
-    components: { Carousel, Icon },
-    setup() {
-      return { args };
-    },
     template: `
-      <div class="tw-p-8">
-        <Carousel :cards="args.cards" :options="{ loop: true }">
-          <template #arrow-left>
-            <div class="tw-bg-blue-500 tw-text-white tw-rounded-full tw-p-3 tw-cursor-pointer hover:tw-bg-blue-600 tw-transition tw-shadow-lg">
-              <Icon classes="tw-transform tw-rotate-180" name="chevron-right" size="lg" color="white" />
-            </div>
-          </template>
-          <template #slide="{ slide }">
-            <div class="tw-flex tw-flex-col tw-items-center tw-p-4">
-              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-40 tw-object-contain tw-mb-2" />
-              <span class="tw-text-center tw-font-medium">{{ slide.name }}</span>
-            </div>
-          </template>
-          <template #arrow-right>
-            <div class="tw-bg-blue-500 tw-text-white tw-rounded-full tw-p-3 tw-cursor-pointer hover:tw-bg-blue-600 tw-transition tw-shadow-lg">
-              <Icon name="chevron-right" size="lg" color="white" />
-            </div>
-          </template>
-        </Carousel>
-      </div>
+      <Carousel
+        :cards="cards"
+        :show-bullets="false"
+        @on-slide-click="alert"
+      >
+        <template #slide="{ slide }">
+          <div class="tw-flex tw-flex-col tw-items-center tw-cursor-pointer">
+            <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full" />
+            <span>{{ slide.name }}</span>
+          </div>
+        </template>
+      </Carousel>
     `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Carousel with custom-styled navigation arrows using the arrow slots.',
-      },
-    },
-  },
+  };
 };
 
-// Free mode (continuous scroll)
-export const FreeMode = {
-  args: {
-    cards: [...cards, ...cards, ...cards],
-  },
-  render: (args) => ({
-    components: { Carousel },
-    setup() {
-      return { args };
+export const CustomArrows = () => {
+  return {
+    components: { Carousel, Icon },
+    data() {
+      return {
+        carouselProps,
+        cards,
+      };
     },
     template: `
-      <div class="tw-p-8">
-        <Carousel 
-          :cards="args.cards" 
-          :options="{
-            loop: false,
-            spaceBetween: 20,
-            freeMode: true,
-            slidesPerView: 'auto',
-          }"
-        >
-          <template #slide="{ slide }">
-            <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-bg-white tw-rounded-lg tw-shadow" style="width: 200px;">
-              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-32 tw-object-contain tw-mb-2" />
-              <span class="tw-text-center tw-text-sm tw-font-medium">{{ slide.name }}</span>
-            </div>
-          </template>
-        </Carousel>
-      </div>
+      <Carousel :cards="cards">
+        <template #arrow-left>
+          <Icon classes="left-arrow tw--mb-1 tw-mr-4 tw-cursor-pointer tw-transform tw-rotate-180" name="maker-youtube" color="secondary-500" size="3xl" />
+        </template>
+        <template #slide="{ slide }">
+          <div class="tw-flex tw-flex-col tw-items-center">
+            <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full" />
+            <span>{{ slide.name }}</span>
+          </div>
+        </template>
+        <template #arrow-right>
+        <Icon classes="tw--mb-1 tw-ml-4 tw-cursor-pointer" name="maker-youtube" color="secondary-500" size="3xl" />
+        </template>
+      </Carousel>
     `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Free scrolling mode where users can drag freely without snapping to slides.',
-      },
-    },
-  },
+  };
 };
 
-// Centered slides
-export const CenteredSlides = {
-  args: {
-    cards: [...cards, ...cards],
-  },
-  render: (args) => ({
-    components: { Carousel },
-    setup() {
-      return { args };
+export const CustomOptions = () => {
+  return {
+    components: { Carousel, Icon },
+    data() {
+      return {
+        carouselProps,
+        cards,
+        options: {
+          loop: false,
+          breakpoints: {
+            1024: {
+              pagination: false,
+              slidesPerView: 4,
+              slidesPerGroup: 4,
+            },
+          },
+        },
+      };
     },
     template: `
-      <div class="tw-p-8">
-        <Carousel 
-          :cards="args.cards" 
-          :options="{
-            loop: true,
-            centeredSlides: true,
-            slidesPerView: 1.5,
-            spaceBetween: 30,
-          }"
-        >
-          <template #slide="{ slide }">
-            <div class="tw-flex tw-flex-col tw-items-center tw-p-6 tw-bg-gradient-to-br tw-from-purple-100 tw-to-blue-100 tw-rounded-xl">
-              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-48 tw-object-contain tw-mb-4" />
-              <span class="tw-text-center tw-text-lg tw-font-semibold">{{ slide.name }}</span>
-            </div>
-          </template>
-        </Carousel>
-      </div>
+      <Carousel :cards="cards" :options="options">
+        <template #arrow-left>
+          <Icon classes="tw--mb-1 tw-ml-4 tw-cursor-pointer" name="chevron-left" size="4xl" />
+        </template>
+        <template #slide="{ slide }">
+          <div class="tw-flex tw-flex-col tw-items-center">
+            <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full" />
+            <span>{{ slide.name }}</span>
+          </div>
+        </template>
+        <template #arrow-right>
+          <Icon classes="tw--mb-1 tw-ml-4 tw-cursor-pointer" name="chevron-right" size="4xl" />
+        </template>
+      </Carousel>
     `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Carousel with centered active slide and partial view of adjacent slides.',
-      },
-    },
-  },
+  };
 };
 
-// Multiple carousels on same page
-export const MultipleCarousels = {
-  render: () => ({
+export const SampleMultiple = () => {
+  return {
     components: { Carousel },
-    setup() {
+    data() {
       return {
+        carouselProps,
         cards,
         swiperOne: {
           options: {
-            loop: true,
             navigation: {
-              prevEl: '.carousel__button-prev--1',
-              nextEl: '.carousel__button-next--1',
+              prevEl: `.carousel__button-prev--1`,
+              nextEl: `.carousel__button-next--1`,
             },
             pagination: {
-              el: '.pagination--1',
+              el: `.pagination--1`,
             },
           },
           navigationUniqueIndexer: '1',
         },
         swiperTwo: {
           options: {
-            loop: true,
             navigation: {
-              prevEl: '.carousel__button-prev--2',
-              nextEl: '.carousel__button-next--2',
+              prevEl: `.carousel__button-prev--2`,
+              nextEl: `.carousel__button-next--2`,
             },
             pagination: {
-              el: '.pagination--2',
+              el: `.pagination--2`,
             },
           },
           navigationUniqueIndexer: '2',
         },
       };
     },
+    methods: {
+      alert(slide) {
+        // eslint-disable-next-line no-alert
+        alert(`You have clicked the ${slide.name} slide`);
+      },
+    },
     template: `
-      <div class="tw-p-8 tw-space-y-12">
-        <div>
-          <h3 class="tw-text-xl tw-font-bold tw-mb-4 tw-text-center">First Carousel</h3>
-          <div class="tw-max-w-md tw-mx-auto">
-            <Carousel
+      <div>
+        <h1 class="tw-w-full tw-text-center">Have a look at the configuration of this story if you need multiple carousels on the same page.</h1>
+        <div class="tw-flex tw-flex-col tw-justify-center tw-mx-8">
+          <div class="tw-w-full tw-flex tw-items-center tw-justify-center">
+            <div class="tw-w-1/2 md:tw-w-1/6">
+              <Carousel
               :cards="cards"
               :show-bullets="true"
               :swiper-ref="swiperOne.navigationUniqueIndexer"
               :navigation-unique-indexer="swiperOne.navigationUniqueIndexer"
               :options="swiperOne.options"
-            >
-              <template #slide="{ slide }">
-                <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-bg-blue-50 tw-rounded-lg">
-                  <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-40 tw-object-contain tw-mb-2" />
-                  <span class="tw-text-center tw-font-medium">{{ slide.name }}</span>
-                </div>
-              </template>
-            </Carousel>
+              @on-slide-click="alert"
+              >
+                <template #slide="{ slide }">
+                  <div class="tw-flex tw-flex-col tw-items-center tw-cursor-pointer">
+                    <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full" />
+                    <span>{{ slide.name }}</span>
+                  </div>
+                </template>
+              </Carousel>
+            </div>
           </div>
-        </div>
-        
-        <div>
-          <h3 class="tw-text-xl tw-font-bold tw-mb-4 tw-text-center">Second Carousel</h3>
-          <div class="tw-max-w-md tw-mx-auto">
-            <Carousel
+          <div class="tw-w-full tw-flex tw-items-center tw-justify-center">
+            <div class="tw-w-1/2 md:tw-w-1/6">
+              <Carousel
               :cards="cards"
               :show-bullets="true"
               :swiper-ref="swiperTwo.navigationUniqueIndexer"
               :navigation-unique-indexer="swiperTwo.navigationUniqueIndexer"
               :options="swiperTwo.options"
-            >
-              <template #slide="{ slide }">
-                <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-bg-green-50 tw-rounded-lg">
-                  <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-40 tw-object-contain tw-mb-2" />
-                  <span class="tw-text-center tw-font-medium">{{ slide.name }}</span>
-                </div>
-              </template>
-            </Carousel>
+              @on-slide-click="alert"
+              >
+                <template #slide="{ slide }">
+                  <div class="tw-flex tw-flex-col tw-items-center tw-cursor-pointer">
+                    <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full" />
+                    <span>{{ slide.name }}</span>
+                  </div>
+                </template>
+              </Carousel>
+            </div>
           </div>
         </div>
       </div>
     `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story:
-          'Example of multiple independent carousels on the same page. Each requires unique navigationUniqueIndexer.',
-      },
-    },
-  },
+  };
 };
 
-// Responsive breakpoints demo
-export const ResponsiveBreakpoints = {
-  args: {
-    cards: [...cards, ...cards],
-  },
-  render: (args) => ({
-    components: { Carousel },
-    setup() {
-      return { args };
+export const FreeMode = () => {
+  return {
+    components: { Carousel, Icon },
+    data() {
+      return {
+        carouselProps,
+        cards: [...cards, ...cards, ...cards],
+        options: {
+          loop: false,
+          spaceBetween: 30,
+          freeMode: true,
+          slidesPerView: 'auto',
+        },
+      };
     },
     template: `
-      <div class="tw-p-8">
-        <div class="tw-mb-4 tw-p-4 tw-bg-blue-50 tw-rounded-lg">
-          <p class="tw-text-sm tw-font-semibold tw-mb-2">Responsive behavior:</p>
-          <ul class="tw-text-sm tw-space-y-1">
-            <li>• Mobile (< 640px): 1 slide</li>
-            <li>• Tablet (640px - 1023px): 2 slides</li>
-            <li>• Desktop (≥ 1024px): 4 slides</li>
-          </ul>
-        </div>
-        <Carousel 
-          :cards="args.cards" 
-          :options="{
-            loop: true,
-            spaceBetween: 20,
-            slidesPerView: 1,
-            slidesPerGroup: 1,
-            breakpoints: {
-              640: {
-                slidesPerView: 2,
-                slidesPerGroup: 2,
-              },
-              1024: {
-                slidesPerView: 4,
-                slidesPerGroup: 4,
-              },
-            },
-          }"
-        >
+        <Carousel :cards="cards" :options="options">
+          <template #arrow-left>
+            <Icon classes="tw--mb-1 tw-ml-4 tw-cursor-pointer" name="chevron-left" size="4xl" />
+          </template>
           <template #slide="{ slide }">
-            <div class="tw-flex tw-flex-col tw-items-center tw-p-4 tw-bg-white tw-border tw-border-gray-200 tw-rounded-lg">
-              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-full tw-h-32 tw-object-contain tw-mb-2" />
-              <span class="tw-text-center tw-text-sm tw-font-medium">{{ slide.name }}</span>
+            <div class="tw-flex tw-flex-col tw-items-center">
+              <img :src="slide.imageUrl" :alt="slide.name" class="tw-w-20" />
+              <span>{{ slide.name }}</span>
             </div>
           </template>
+          <template #arrow-right>
+            <Icon classes="tw--mb-1 tw-ml-4 tw-cursor-pointer" name="chevron-right" size="4xl" />
+          </template>
         </Carousel>
-      </div>
     `,
-  }),
-  parameters: {
-    docs: {
-      description: {
-        story: 'Demonstrates responsive behavior with different numbers of slides at different screen sizes.',
-      },
-    },
-  },
+  };
 };