oddsgate-ds 1.0.174 → 1.0.176

package/src/components/organisms/Slider/Slider.interface.ts

@@ -1,19 +1,23 @@
-import { CSSProperties } from 'react';
-
-export interface ISlider {
-  $responsiveCSS?: string,
-  arrows?: boolean,
-  dots?: boolean,
-  slidesToShow?: number
-  slidesToScroll?: number
-  infinite?: boolean
-  autoplay?: boolean
-  spacing?: string
-  mediaQueries?: object
-  $mobileOnly?: boolean
-  mobileOnly?: boolean
-  onSlide?: () => void
-  className?: string
-  style?: CSSProperties
-  children: React.ReactNode
-}
+import { CSSProperties } from 'react';
+
+export type SliderVariant = 'default' | 'awards';
+
+export interface ISlider {
+  $responsiveCSS?: string,
+  arrows?: boolean,
+  dots?: boolean,
+  slidesToShow?: number
+  slidesToScroll?: number
+  infinite?: boolean
+  autoplay?: boolean
+  spacing?: string
+  mediaQueries?: object
+  $mobileOnly?: boolean
+  mobileOnly?: boolean
+  onSlide?: () => void
+  className?: string
+  style?: CSSProperties
+  children: React.ReactNode
+  variant?: SliderVariant
+  $variant?: SliderVariant
+}

package/src/components/organisms/Slider/Slider.stories.tsx

@@ -1,146 +1,223 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { ISlider } from './Slider.interface'
-import React from 'react'
-import Slider from './Slider.component'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/Slider',
-  component: Slider,
-  tags: ['autodocs'],
-  argTypes: {
-    slidesToShow: {
-      control: { type: 'number' }
-    },
-    arrows: {
-      control: { type: 'boolean' }
-    },
-    dots: {
-      control: { type: 'boolean' }
-    }
-  }
-} as Meta
-
-const image = (
-  <img
-    width="100%"
-    height="100%"
-    sizes="100vw"
-    decoding="async"
-    src="/assets/placeholder.png"
-    alt="Empty state"
-  />
-)
-
-export const Simple: StoryObj<ISlider> = {
-  render: args => (
-    <div
-      style={{
-        maxWidth: '750px',
-        margin: 'auto'
-      }}
-    >
-      <Slider
-        slidesToShow={2}
-        slidesToScroll={1}
-        infinite={false}
-        spacing={'1rem'}
-        mediaQueries={{
-          900: {
-            slidesToShow: 2
-          },
-          500: {
-            slidesToShow: 1
-          }
-        }}
-        {...args}
-      >
-        <div>{image}</div>
-        <div>{image}</div>
-        <div>{image}</div>
-        <div>{image}</div>
-        <div>{image}</div>
-        <div>{image}</div>
-      </Slider>
-    </div>
-  ),
-  args: {
-    slidesToShow: 3,
-    arrows: true,
-    dots: true
-  }
-}
-
-
-
-export const LessSliders: StoryObj<ISlider> = {
-  render: args => (
-    <div
-      style={{
-        margin: 'auto'
-      }}
-    >
-      <Slider
-        slidesToShow={4}
-        slidesToScroll={1}
-        infinite={false}
-        spacing={'1rem'}
-        mediaQueries={{
-          900: {
-            slidesToShow: 2
-          },
-          500: {
-            slidesToShow: 1
-          }
-        }}
-        {...args}
-      >
-        <div>{image}</div>
-        <div>{image}</div>
-      </Slider>
-    </div>
-  ),
-}
-
-
-export const MobileOnly: StoryObj<ISlider> = {
-  render: args => (
-    <div
-      style={{
-        maxWidth: '750px',
-        margin: 'auto'
-      }}
-    >
-      <Slider
-        slidesToShow={2}
-        slidesToScroll={1}
-        infinite={false}
-        spacing={'1rem'}
-        autoplay={false}
-        mediaQueries={{
-          900: {
-            slidesToShow: 2,
-            autoplay: true,
-          },
-          500: {
-            slidesToShow: 1
-          }
-        }}
-        {...args}
-      >
-        <div style={{ maxWidth: "100%" }}>{image}</div>
-        <div style={{ maxWidth: "25%" }}>{image}</div>
-        <div style={{ maxWidth: "25%" }}>{image}</div>
-        <div style={{ maxWidth: "25%" }}>{image}</div>
-        <div style={{ maxWidth: "25%" }}>{image}</div>
-        <div style={{ maxWidth: "25%" }}>{image}</div>
-      </Slider>
-    </div>
-  ),
-  args: {
-    ...Simple.args,
-    mobileOnly: true
-  }
-}
-
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ISlider } from './Slider.interface'
+import React from 'react'
+import Slider from './Slider.component'
+import AwardCard from '../../molecules/AwardCard/AwardCard.component'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Slider',
+  component: Slider,
+  tags: ['autodocs'],
+  argTypes: {
+    slidesToShow: {
+      control: { type: 'number' }
+    },
+    arrows: {
+      control: { type: 'boolean' }
+    },
+    dots: {
+      control: { type: 'boolean' }
+    }
+  }
+} as Meta
+
+const image = (
+  <img
+    width="100%"
+    height="100%"
+    sizes="100vw"
+    decoding="async"
+    src="/assets/placeholder.png"
+    alt="Empty state"
+  />
+)
+
+export const Simple: StoryObj<ISlider> = {
+  render: args => (
+    <div
+      style={{
+        maxWidth: '750px',
+        margin: 'auto'
+      }}
+    >
+      <Slider
+        slidesToShow={2}
+        slidesToScroll={1}
+        infinite={false}
+        spacing={'1rem'}
+        mediaQueries={{
+          900: {
+            slidesToShow: 2
+          },
+          500: {
+            slidesToShow: 1
+          }
+        }}
+        {...args}
+      >
+        <div>{image}</div>
+        <div>{image}</div>
+        <div>{image}</div>
+        <div>{image}</div>
+        <div>{image}</div>
+        <div>{image}</div>
+      </Slider>
+    </div>
+  ),
+  args: {
+    slidesToShow: 3,
+    arrows: true,
+    dots: true
+  }
+}
+
+
+
+export const LessSliders: StoryObj<ISlider> = {
+  render: args => (
+    <div
+      style={{
+        margin: 'auto'
+      }}
+    >
+      <Slider
+        slidesToShow={4}
+        slidesToScroll={1}
+        infinite={false}
+        spacing={'1rem'}
+        mediaQueries={{
+          900: {
+            slidesToShow: 2
+          },
+          500: {
+            slidesToShow: 1
+          }
+        }}
+        {...args}
+      >
+        <div>{image}</div>
+        <div>{image}</div>
+      </Slider>
+    </div>
+  ),
+}
+
+
+export const MobileOnly: StoryObj<ISlider> = {
+  render: args => (
+    <div
+      style={{
+        maxWidth: '750px',
+        margin: 'auto'
+      }}
+    >
+      <Slider
+        slidesToShow={2}
+        slidesToScroll={1}
+        infinite={false}
+        spacing={'1rem'}
+        autoplay={false}
+        mediaQueries={{
+          900: {
+            slidesToShow: 2,
+            autoplay: true,
+          },
+          500: {
+            slidesToShow: 1
+          }
+        }}
+        {...args}
+      >
+        <div style={{ maxWidth: "100%" }}>{image}</div>
+        <div style={{ maxWidth: "25%" }}>{image}</div>
+        <div style={{ maxWidth: "25%" }}>{image}</div>
+        <div style={{ maxWidth: "25%" }}>{image}</div>
+        <div style={{ maxWidth: "25%" }}>{image}</div>
+        <div style={{ maxWidth: "25%" }}>{image}</div>
+      </Slider>
+    </div>
+  ),
+  args: {
+    ...Simple.args,
+    mobileOnly: true
+  }
+}
+
+export const AwardsSlider: StoryObj<ISlider> = {
+  render: args => (
+    <div>
+      <Slider
+        {...args}
+        slidesToShow={4}
+        slidesToScroll={1}
+        infinite={false}
+        spacing={'1rem'}
+        mediaQueries={{
+          900: {
+            slidesToShow: 2
+          },
+          500: {
+            slidesToShow: 1
+          }
+        }}
+        dots={true}
+        variant="awards"
+      >
+        <AwardCard
+          title="Best workplace 2024 in IT - Portugal"
+          chip={{ label: 'Winner', variant: 'primary' }}
+          imageElement={
+            <img
+              width="100%"
+              height="100%"
+              sizes="100vw"
+              decoding="async"
+              src="https://picsum.photos/91/91"
+              alt="Empty state"
+            />
+          }
+        />
+        <AwardCard
+          title="Best Innovative B2B platform in Europe"
+          chip={{ label: 'Nominee', variant: 'secondary' }}
+          imageElement={image}
+        />
+        <AwardCard
+          title="CEO of the Year in LATAM"
+          chip={{ label: 'Winner', variant: 'primary' }}
+          imageElement={image}
+        />
+        <AwardCard
+          title="Best Innovative B2B platform in Europe"
+          chip={{ label: 'Nominee', variant: 'secondary' }}
+          imageElement={image}
+        />
+        <AwardCard
+          title="Best workplace 2024 in IT - Portugal"
+          chip={{ label: 'Winner', variant: 'primary' }}
+          imageElement={image}
+        />
+        <AwardCard
+          title="Best Innovative B2B platform in Europe"
+          chip={{ label: 'Nominee', variant: 'secondary' }}
+          imageElement={image}
+        />
+        <AwardCard
+          title="CEO of the Year in LATAM"
+          chip={{ label: 'Winner', variant: 'primary' }}
+          imageElement={image}
+        />
+        <AwardCard
+          title="Best Innovative B2B platform in Europe"
+          chip={{ label: 'Nominee', variant: 'secondary' }}
+          imageElement={image}
+        />
+      </Slider>
+    </div>
+  ),
+  args: {
+    ...Simple.args
+  }
+}