@designcrowd/fe-shared-lib 1.5.1 → 1.5.3-CarouselUpdatev0

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

@@ -1,261 +1,530 @@
-import Carousel from './Carousel.vue';
 import Icon from '../Icon/Icon.vue';
-import { carouselProps, cards } from './Carousel.fixtures';
+import { cards } from './Carousel.fixtures';
+import Carousel from './Carousel.vue';
 
 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.',
+      },
+    },
+  },
 };
 
-export const Sample = () => {
-  return {
+// 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) => ({
     components: { Carousel },
-    data() {
-      return {
-        carouselProps,
-        cards,
-      };
+    setup() {
+      return { args };
     },
-    methods: {
-      alert(e) {
-        // eslint-disable-next-line no-alert
-        alert(`You have clicked the "${e.slide.name}" slide`);
-      },
+    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: `
-      <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>
+      <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.',
+      },
+    },
+  },
 };
 
-export const CarouselDotsHidden = () => {
-  return {
+// Without navigation controls
+export const WithoutControls = {
+  args: {
+    cards,
+    showControls: false,
+    showBullets: true,
+    options: {
+      loop: true,
+      autoplay: {
+        delay: 3000,
+        disableOnInteraction: false,
+      },
+    },
+  },
+  render: (args) => ({
     components: { Carousel },
-    data() {
-      return {
-        carouselProps,
-        cards,
-      };
+    setup() {
+      return { args };
     },
-    methods: {
-      alert(e) {
-        // eslint-disable-next-line no-alert
-        alert(`You have clicked the "${e.slide.name}" slide`);
+    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>
+    `,
+  }),
+  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) => ({
+    components: { Carousel },
+    setup() {
+      return { args };
+    },
     template: `
-      <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>
+      <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.',
+      },
+    },
+  },
 };
 
-export const CustomArrows = () => {
-  return {
+// Custom arrow styling
+export const CustomArrows = {
+  args: {
+    cards,
+  },
+  render: (args) => ({
     components: { Carousel, Icon },
-    data() {
-      return {
-        carouselProps,
-        cards,
-      };
+    setup() {
+      return { args };
     },
     template: `
-      <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>
+      <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>
     `,
-  };
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Carousel with custom-styled navigation arrows using the arrow slots.',
+      },
+    },
+  },
 };
 
-export const CustomOptions = () => {
-  return {
-    components: { Carousel, Icon },
-    data() {
-      return {
-        carouselProps,
-        cards,
-        options: {
-          loop: false,
-          breakpoints: {
-            1024: {
-              pagination: false,
-              slidesPerView: 4,
-              slidesPerGroup: 4,
-            },
-          },
-        },
-      };
+// Free mode (continuous scroll)
+export const FreeMode = {
+  args: {
+    cards: [...cards, ...cards, ...cards],
+  },
+  render: (args) => ({
+    components: { Carousel },
+    setup() {
+      return { args };
     },
     template: `
-      <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>
+      <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>
+    `,
+  }),
+  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 };
+    },
+    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>
     `,
-  };
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story: 'Carousel with centered active slide and partial view of adjacent slides.',
+      },
+    },
+  },
 };
 
-export const SampleMultiple = () => {
-  return {
+// Multiple carousels on same page
+export const MultipleCarousels = {
+  render: () => ({
     components: { Carousel },
-    data() {
+    setup() {
       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>
-        <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
+      <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
               :cards="cards"
               :show-bullets="true"
               :swiper-ref="swiperOne.navigationUniqueIndexer"
               :navigation-unique-indexer="swiperOne.navigationUniqueIndexer"
               :options="swiperOne.options"
-              @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>
+            >
+              <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>
           </div>
-          <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
+        </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
               :cards="cards"
               :show-bullets="true"
               :swiper-ref="swiperTwo.navigationUniqueIndexer"
               :navigation-unique-indexer="swiperTwo.navigationUniqueIndexer"
               :options="swiperTwo.options"
-              @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>
+            >
+              <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>
           </div>
         </div>
       </div>
     `,
-  };
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Example of multiple independent carousels on the same page. Each requires unique navigationUniqueIndexer.',
+      },
+    },
+  },
 };
 
-export const FreeMode = () => {
-  return {
-    components: { Carousel, Icon },
-    data() {
-      return {
-        carouselProps,
-        cards: [...cards, ...cards, ...cards],
-        options: {
-          loop: false,
-          spaceBetween: 30,
-          freeMode: true,
-          slidesPerView: 'auto',
-        },
-      };
+// Responsive breakpoints demo
+export const ResponsiveBreakpoints = {
+  args: {
+    cards: [...cards, ...cards],
+  },
+  render: (args) => ({
+    components: { Carousel },
+    setup() {
+      return { args };
     },
     template: `
-        <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>
+      <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,
+              },
+            },
+          }"
+        >
           <template #slide="{ slide }">
-            <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 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>
           </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.',
+      },
+    },
+  },
 };