oddsgate-ds 1.0.113 → 1.0.115

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

@@ -0,0 +1,133 @@
+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',
+      }
+    ],
+    className: "h-100",
+  }
+}

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

@@ -0,0 +1,66 @@
+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%;
+  overflow: hidden;
+`;
+
+export const StyledProductsSliderWrapper = styled.div<IProductsSlider>`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  @media only screen and (min-width: ${responsiveMedia}) {
+    margin: 0 auto;
+    margin-right: 0;
+    transform: translate(-30%, 0%);
+  }
+`;
+
+export const StyledProductsSliderSlides = styled.div<IProductsSlider>`
+  @media only screen and (min-width: ${responsiveMedia}) {
+    transform-origin: center;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    z-index: 100;
+    transform: rotate(0deg);
+    transition: all 0.6s;
+  }
+`;
+export const StyledProductsSliderSlide = styled.div<IProductsSlider>`
+  @media only screen and (min-width: ${responsiveMedia}) {
+    position: absolute;
+    width: 26rem;
+    transform-origin: center;
+    opacity: 0.4;
+    transition: .3s linear all;
+    cursor: pointer;
+
+    & > div{
+      width: 100%;
+      height: 100%;
+      pointer-events:none;
+      transform: rotate(-90deg);
+    }
+
+    &.active{
+      opacity: 1;
+    }
+  }
+`;
+
+
+export const StyledProductsSliderContent = styled.div<IProductsSlider>`
+  max-width: 50rem;
+  background: ${colors.third10};
+  border-radius: ${radius.md};
+  padding: 2rem;
+  margin: auto;
+  transform: translateY(135px);
+`;
+

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

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

package/src/index.ts

@@ -51,6 +51,7 @@ export { default as Slider } from './components/organisms/Slider'
 export { default as Cover } from './components/organisms/Cover'
 export { default as Tabs } from './components/organisms/Tabs'
 export { default as CircularSlider } from './components/organisms/CircularSlider'
+export { default as ProductsSlider } from './components/organisms/ProductsSlider'
 
 export { iconsList } from './helpers/getIcons'
 

package/dist/cjs/types/components/organisms/CircularSliderTeste/CircularSliderTeste.component.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ICircularSliderTeste } from './CircularSliderTeste.interface';
-declare const CircularSliderTeste: ({ cta, content, style, className, }: ICircularSliderTeste) => React.JSX.Element;
-export default CircularSliderTeste;

package/dist/cjs/types/components/organisms/CircularSliderTeste/CircularSliderTeste.interface.d.ts

@@ -1,12 +0,0 @@
-import { CSSProperties } from 'react';
-export type ICircularSliderTeste = {
-    id?: string;
-    className?: string;
-    style?: CSSProperties;
-    content?: {
-        name?: string;
-        role?: string;
-        img?: React.ReactNode;
-    }[];
-    cta?: React.ReactNode;
-};

package/dist/cjs/types/components/organisms/CircularSliderTeste/CircularSliderTeste.theme.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { ICircularSliderTeste } from './CircularSliderTeste.interface';
-export declare const StyledCircularSliderTeste: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICircularSliderTeste>> & string;
-export declare const StyledCircularSliderTesteWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICircularSliderTeste>> & string;
-export declare const StyledCircularSliderTesteSlides: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICircularSliderTeste>> & string;
-export declare const StyledCircularSliderTesteSlide: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICircularSliderTeste>> & string;
-export declare const StyledCircularSliderTesteContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICircularSliderTeste>> & string;

package/dist/cjs/types/components/organisms/CircularSliderTeste/index.d.ts

@@ -1 +0,0 @@
-export { default } from './CircularSliderTeste.component';

package/dist/esm/types/components/organisms/CircularSliderTeste/CircularSliderTeste.component.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { ICircularSliderTeste } from './CircularSliderTeste.interface';
-declare const CircularSliderTeste: ({ cta, content, style, className, }: ICircularSliderTeste) => React.JSX.Element;
-export default CircularSliderTeste;

package/dist/esm/types/components/organisms/CircularSliderTeste/CircularSliderTeste.interface.d.ts

@@ -1,12 +0,0 @@
-import { CSSProperties } from 'react';
-export type ICircularSliderTeste = {
-    id?: string;
-    className?: string;
-    style?: CSSProperties;
-    content?: {
-        name?: string;
-        role?: string;
-        img?: React.ReactNode;
-    }[];
-    cta?: React.ReactNode;
-};

package/dist/esm/types/components/organisms/CircularSliderTeste/CircularSliderTeste.theme.d.ts

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import { ICircularSliderTeste } from './CircularSliderTeste.interface';
-export declare const StyledCircularSliderTeste: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICircularSliderTeste>> & string;
-export declare const StyledCircularSliderTesteWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICircularSliderTeste>> & string;
-export declare const StyledCircularSliderTesteSlides: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICircularSliderTeste>> & string;
-export declare const StyledCircularSliderTesteSlide: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICircularSliderTeste>> & string;
-export declare const StyledCircularSliderTesteContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICircularSliderTeste>> & string;

package/dist/esm/types/components/organisms/CircularSliderTeste/index.d.ts

@@ -1 +0,0 @@
-export { default } from './CircularSliderTeste.component';

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

@@ -1,13 +0,0 @@
-import { CSSProperties } from 'react';
-
-export type ICircularSliderTeste = {
-  id?: string;
-  className?: string;
-  style?: CSSProperties;
-  content?: {
-    name?: string,
-    role?: string,
-    img?: React.ReactNode
-  }[],
-  cta?: React.ReactNode
-}

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

@@ -1,134 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import Button from '@/components/atoms/Button/Button.component'
-import CircularSliderTeste from './CircularSliderTeste.component'
-import { ICircularSliderTeste } from './CircularSliderTeste.interface'
-import React from 'react'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/CircularSliderTeste',
-  component: CircularSliderTeste,
-  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<ICircularSliderTeste> = {
-  render: args => <div style={{ width: "100%", height: "200dvh" }}><CircularSliderTeste {...args}></CircularSliderTeste></div>,
-  args: {
-    cta: <Button variant={'secondary'}>Join the Team</Button>,
-    content: [
-      {
-        name: 'My name 1',
-        role: 'My role',
-        img: image
-      },
-      {
-        name: 'My name 2',
-        role: 'My role',
-        img: image
-      },
-      {
-        name: 'My name 3',
-        role: 'My role',
-        img: image
-      },
-      {
-        name: 'My name 4',
-        role: 'My role',
-        img: image
-      },
-      {
-        name: 'My name 5',
-        role: 'My role',
-        img: image
-      },
-      {
-        name: 'My name 6',
-        role: 'My role',
-        img: image
-      },
-      {
-        name: 'My name 7',
-        role: 'My role',
-        img: image
-      },
-      {
-        name: 'My name 9',
-        role: 'My role',
-        img: image
-      },
-      {
-        name: 'My name 9',
-        role: 'My role',
-        img: image
-      },
-      {
-        name: 'My name 10',
-        role: 'My role',
-        img: image
-      },
-      {
-        name: 'My name 11',
-        role: 'My role',
-        img: image
-      },
-      {
-        name: 'My name 1§2',
-        role: 'My role',
-        img: image
-      },
-      {
-        name: 'My name 13',
-        role: 'My role',
-        img: image
-      },
-      {
-        name: 'My name 14',
-        role: 'My role',
-        img: image
-      },
-      {
-        name: 'My name 15',
-        role: 'My role',
-        img: image
-      },
-      {
-        name: 'My name 16',
-        role: 'My role',
-        img: image
-      },
-      {
-        name: 'My name 17',
-        role: 'My role',
-        img: image
-      },
-      {
-        name: 'My name 19',
-        role: 'My role',
-        img: image
-      },
-      {
-        name: 'My name 19',
-        role: 'My role',
-        img: image
-      },
-      {
-        name: 'My name 20',
-        role: 'My role',
-        img: image
-      }
-    ],
-    className: "h-100",
-  }
-}

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

@@ -1,65 +0,0 @@
-import { ICircularSliderTeste } from './CircularSliderTeste.interface';
-import { responsiveMedia } from '@/styles/variables';
-import styled from 'styled-components';
-
-export const StyledCircularSliderTeste = styled.div<ICircularSliderTeste>`
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-`;
-
-export const StyledCircularSliderTesteWrapper = styled.div<ICircularSliderTeste>`
-  position: relative;
-  display: flex;
-  justify-content: center;
-  margin: 0 auto;
-  margin-right: 0;
-`;
-
-export const StyledCircularSliderTesteSlides = styled.div<ICircularSliderTeste>`
-  transform-origin: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  z-index: 100;
-  transform: rotate(-180deg);
-`;
-export const StyledCircularSliderTesteSlide = styled.div<ICircularSliderTeste>`
-  position: absolute;
-  transform-origin: center;
-  transition: .3s linear all;
-  filter: brightness(70%);
-  cursor: pointer;
-
-  & img{
-    height: 100%;
-    object-fit: cover;
-    pointer-events:none;
-    filter: grayscale(100%);
-    transform: rotate(90deg);
-  }
-
-  &.active{
-    filter: brightness(100%);
-  }
-`;
-
-export const StyledCircularSliderTesteContent = styled.div<ICircularSliderTeste>`
-  width: 50%;
-  text-align: center;
-  margin: auto;
-
-  &>div{
-    opacity: 0;
-    transform: translate(0%, 5%);
-    transition: all 0.3s ease;
-  }
-  &.active{
-    &>div{
-      opacity: 1;
-      transform: translate(0%, 0%);
-    }
-  }
-`;
-

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

@@ -1 +0,0 @@
-export { default } from './CircularSliderTeste.component'