oddsgate-ds 1.0.169 → 1.0.174

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

@@ -1,132 +1,132 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import Button from '@/components/atoms/Button/Button.component'
-import { IProductsSlider } from './ProductsSlider.interface'
-import ProductsSlider from './ProductsSlider.component'
-import React from 'react'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/ProductsSlider',
-  component: ProductsSlider,
-  tags: ['autodocs']
-} as Meta
-
-const image = (
-  <img
-    width="100%"
-    height="100%"
-    sizes="100vw"
-    decoding="async"
-    src="/assets/placeholder.png"
-    alt="Empty state"
-  />
-)
-
-export const Simple: StoryObj<IProductsSlider> = {
-  render: args => <div style={{ width: "100%", height: "200dvh" }}><ProductsSlider {...args}></ProductsSlider></div>,
-  args: {
-    content: [
-      {
-        imageElement: image,
-        title: 'My name 1',
-        description: 'My role',
-      },
-      {
-        imageElement: image,
-        title: 'My name 2',
-        description: 'My role',
-      },
-      {
-        imageElement: image,
-        title: 'My name 3',
-        description: 'My role',
-      },
-      {
-        imageElement: image,
-        title: 'My name 4',
-        description: 'My role',
-      },
-      {
-        imageElement: image,
-        title: 'My name 5',
-        description: 'My role',
-      },
-      {
-        imageElement: image,
-        title: 'My name 6',
-        description: 'My role',
-      },
-      {
-        imageElement: image,
-        title: 'My name 7',
-        description: 'My role',
-      },
-      {
-        imageElement: image,
-        title: 'My name 9',
-        description: 'My role',
-      },
-      {
-        imageElement: image,
-        title: 'My name 9',
-        description: 'My role',
-      },
-      {
-        imageElement: image,
-        title: 'My name 10',
-        description: 'My role',
-      },
-      {
-        imageElement: image,
-        title: 'My name 11',
-        description: 'My role',
-      },
-      {
-        imageElement: image,
-        title: 'My name 1§2',
-        description: 'My role',
-      },
-      {
-        imageElement: image,
-        title: 'My name 13',
-        description: 'My role',
-      },
-      {
-        imageElement: image,
-        title: 'My name 14',
-        description: 'My role',
-      },
-      {
-        imageElement: image,
-        title: 'My name 15',
-        description: 'My role',
-      },
-      {
-        imageElement: image,
-        title: 'My name 16',
-        description: 'My role',
-      },
-      {
-        imageElement: image,
-        title: 'My name 17',
-        description: 'My role',
-      },
-      {
-        imageElement: image,
-        title: 'My name 19',
-        description: 'My role',
-      },
-      {
-        imageElement: image,
-        title: 'My name 19',
-        description: 'My role',
-      },
-      {
-        imageElement: image,
-        title: 'My name 20',
-        description: 'My role',
-      }
-    ],
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Button from '@/components/atoms/Button/Button.component'
+import { IProductsSlider } from './ProductsSlider.interface'
+import ProductsSlider from './ProductsSlider.component'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/ProductsSlider',
+  component: ProductsSlider,
+  tags: ['autodocs']
+} as Meta
+
+const image = (
+  <img
+    width="100%"
+    height="100%"
+    sizes="100vw"
+    decoding="async"
+    src="/assets/placeholder.png"
+    alt="Empty state"
+  />
+)
+
+export const Simple: StoryObj<IProductsSlider> = {
+  render: args => <div style={{ width: "100%", height: "200dvh" }}><ProductsSlider {...args}></ProductsSlider></div>,
+  args: {
+    content: [
+      {
+        imageElement: image,
+        title: 'My name 1',
+        description: 'My role',
+      },
+      {
+        imageElement: image,
+        title: 'My name 2',
+        description: 'My role',
+      },
+      {
+        imageElement: image,
+        title: 'My name 3',
+        description: 'My role',
+      },
+      {
+        imageElement: image,
+        title: 'My name 4',
+        description: 'My role',
+      },
+      {
+        imageElement: image,
+        title: 'My name 5',
+        description: 'My role',
+      },
+      {
+        imageElement: image,
+        title: 'My name 6',
+        description: 'My role',
+      },
+      {
+        imageElement: image,
+        title: 'My name 7',
+        description: 'My role',
+      },
+      {
+        imageElement: image,
+        title: 'My name 9',
+        description: 'My role',
+      },
+      {
+        imageElement: image,
+        title: 'My name 9',
+        description: 'My role',
+      },
+      {
+        imageElement: image,
+        title: 'My name 10',
+        description: 'My role',
+      },
+      {
+        imageElement: image,
+        title: 'My name 11',
+        description: 'My role',
+      },
+      {
+        imageElement: image,
+        title: 'My name 1§2',
+        description: 'My role',
+      },
+      {
+        imageElement: image,
+        title: 'My name 13',
+        description: 'My role',
+      },
+      {
+        imageElement: image,
+        title: 'My name 14',
+        description: 'My role',
+      },
+      {
+        imageElement: image,
+        title: 'My name 15',
+        description: 'My role',
+      },
+      {
+        imageElement: image,
+        title: 'My name 16',
+        description: 'My role',
+      },
+      {
+        imageElement: image,
+        title: 'My name 17',
+        description: 'My role',
+      },
+      {
+        imageElement: image,
+        title: 'My name 19',
+        description: 'My role',
+      },
+      {
+        imageElement: image,
+        title: 'My name 19',
+        description: 'My role',
+      },
+      {
+        imageElement: image,
+        title: 'My name 20',
+        description: 'My role',
+      }
+    ],
+  }
+}

package/src/components/organisms/ProductsSlider/ProductsSlider.theme.ts

@@ -1,77 +1,77 @@
-import { colors, radius, responsiveMedia } from '@/styles/variables';
-
-import { IProductsSlider } from './ProductsSlider.interface';
-import styled from 'styled-components';
-
-export const StyledProductsSlider = styled.div<IProductsSlider>`
-  position: relative;
-  width: 100%;
-  contain: paint;
-`;
-
-export const StyledProductsSliderWrapper = styled.div<IProductsSlider>`
-  position: relative;
-  overflow: hidden;
-
-  @media only screen and (min-width: ${responsiveMedia}) {
-    transform: translateX(-25%);
-  }
-`;
-
-export const StyledProductsSliderSlides = styled.div<IProductsSlider>`
-  position: relative;
-  display: flex;
-  flex-flow: row wrap;
-
-  @media only screen and (min-width: ${responsiveMedia}) {
-    justify-content: center;
-    align-items: center;
-
-    transform-origin: center;
-    transition: all 0.6s;
-    transform: rotate(0deg);
-    z-index: 100;
-  }
-`;
-export const StyledProductsSliderSlide = styled.div<IProductsSlider>`
-  width: 100%;
-  padding: 0.5rem;
-  margin-bottom: 4rem;
-
-  @media only screen and (min-width: 560px) {
-    width: 50%;
-  }
-  @media only screen and (min-width: ${responsiveMedia}) {
-    position: absolute;
-    width: 26rem;
-    margin-bottom: 0;
-    transform-origin: center;
-    opacity: 0.4;
-    transition: .3s linear all;
-    cursor: pointer;
-
-    & > div{
-      width: 100%;
-      height: 100%;
-      pointer-events:none;
-    }
-
-    &.active{
-      opacity: 1;
-    }
-  }
-`;
-
-
-export const StyledProductsSliderContent = styled.div<IProductsSlider>`
-  position: absolute;
-  top: 65%;
-  left: 50%;
-  max-width: 50rem;
-  background: ${colors.third10};
-  border-radius: ${radius.md};
-  padding: 2rem;
-  margin: auto;
-  transform: translateX(-50%);
-`;
-
+import { colors, radius, responsiveMedia } from '@/styles/variables';
+
+import { IProductsSlider } from './ProductsSlider.interface';
+import styled from 'styled-components';
+
+export const StyledProductsSlider = styled.div<IProductsSlider>`
+  position: relative;
+  width: 100%;
+  contain: paint;
+`;
+
+export const StyledProductsSliderWrapper = styled.div<IProductsSlider>`
+  position: relative;
+  overflow: hidden;
+
+  @media only screen and (min-width: ${responsiveMedia}) {
+    transform: translateX(-25%);
+  }
+`;
+
+export const StyledProductsSliderSlides = styled.div<IProductsSlider>`
+  position: relative;
+  display: flex;
+  flex-flow: row wrap;
+
+  @media only screen and (min-width: ${responsiveMedia}) {
+    justify-content: center;
+    align-items: center;
+
+    transform-origin: center;
+    transition: all 0.6s;
+    transform: rotate(0deg);
+    z-index: 100;
+  }
+`;
+export const StyledProductsSliderSlide = styled.div<IProductsSlider>`
+  width: 100%;
+  padding: 0.5rem;
+  margin-bottom: 4rem;
+
+  @media only screen and (min-width: 560px) {
+    width: 50%;
+  }
+  @media only screen and (min-width: ${responsiveMedia}) {
+    position: absolute;
+    width: 26rem;
+    margin-bottom: 0;
+    transform-origin: center;
+    opacity: 0.4;
+    transition: .3s linear all;
+    cursor: pointer;
+
+    & > div{
+      width: 100%;
+      height: 100%;
+      pointer-events:none;
+    }
+
+    &.active{
+      opacity: 1;
+    }
+  }
+`;
+
+
+export const StyledProductsSliderContent = styled.div<IProductsSlider>`
+  position: absolute;
+  top: 65%;
+  left: 50%;
+  max-width: 50rem;
+  background: ${colors.third10};
+  border-radius: ${radius.md};
+  padding: 2rem;
+  margin: auto;
+  transform: translateX(-50%);
+`;
+

package/src/components/organisms/ProductsSlider/index.ts

@@ -1 +1 @@
-export { default } from './ProductsSlider.component'
+export { default } from './ProductsSlider.component'