oddsgate-ds 1.0.174 → 1.0.175

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

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

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

@@ -1,138 +1,138 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import Button from '@/components/atoms/Button/Button.component'
-import CircularSlider from './CircularSlider.component'
-import { ICircularSlider } from './CircularSlider.interface'
-import React from 'react'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/CircularSlider',
-  component: CircularSlider,
-  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<ICircularSlider> = {
-  render: args => (
-    <div style={{ width: '100%', height: '200dvh' }}>
-      <CircularSlider {...args}></CircularSlider>
-    </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'
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Button from '@/components/atoms/Button/Button.component'
+import CircularSlider from './CircularSlider.component'
+import { ICircularSlider } from './CircularSlider.interface'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/CircularSlider',
+  component: CircularSlider,
+  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<ICircularSlider> = {
+  render: args => (
+    <div style={{ width: '100%', height: '200dvh' }}>
+      <CircularSlider {...args}></CircularSlider>
+    </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/CircularSlider/CircularSlider.theme.ts

@@ -1,126 +1,126 @@
-import { ICircularSlider } from './CircularSlider.interface';
-import { responsiveMedia } from '@/styles/variables';
-import styled from 'styled-components';
-
-export const StyledCircularSlider = styled.div<ICircularSlider>`
-  position: relative;
-  width: 100%;
-  overflow: hidden;
-
-  & > svg{
-    display: none;
-    position:absolute;
-    top:50%;
-    left:0;
-    width:66.666%;
-    height:auto;
-    transform: translate(-50%, -50%);
-    transition: all 0.3s;
-  }
-
-  @media only screen and (min-width: ${responsiveMedia}) {
-    min-height: 100dvh;
-    & > svg{
-      display: block;
-    }
-  }
-`;
-
-export const StyledCircularSliderWrapper = styled.div<ICircularSlider>`
-  position: relative;
-  display: flex;
-  justify-content: center;
-  
-  margin: 0 auto;
-  margin-right: 0;
-  transform: translate(-30%, 0%);
-
-
-  @media only screen and (max-width: ${responsiveMedia}) {
-    transform: translate(-25%, 0%);
-  }
-  @media only screen and (min-width: ${responsiveMedia}) {
-    top: 50%;
-    transform: translate(65%, -50%);
-  }
-`;
-
-export const StyledCircularSliderSlides = styled.div<ICircularSlider>`
-  transform-origin: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-  z-index: 100;
-  transform: rotate(-180deg);
-
-  @media only screen and (min-width: ${responsiveMedia}) {
-    transform: rotate(-90deg);
-  }
-`;
-export const StyledCircularSliderSlide = styled.div<ICircularSlider>`
-  position: absolute;
-  transform-origin: center;
-  transition: .3s linear all;
-  filter: brightness(50%);
-  cursor: pointer;
-
-  @media only screen and (max-width: ${responsiveMedia}) {
-    border-radius:50%;
-    overflow: hidden;
-  }
-
-  & img{
-    height: 100%;
-    object-fit: cover;
-    pointer-events:none;
-    filter: grayscale(100%);
-    transform: rotate(90deg);
-  }
-
-  &.active{
-    filter: brightness(100%);
-    /* @media only screen and (max-width: ${responsiveMedia}) {
-      width: 100px !important;
-      height: 100px !important;
-    } */
-
-  }
-
-  @media only screen and (min-width: ${responsiveMedia}) {
-    & img{
-      transform: none;
-    }
-  }
-`;
-
-export const StyledCircularSliderContent = styled.div<ICircularSlider>`
-
-  width: 50%;
-  text-align: center;
-  margin: auto;
-  @media only screen and (max-width: ${responsiveMedia}) {
-    margin-top: 42px
-  }
-  &>div{
-    opacity: 0;
-    transform: translate(0%, 5%);
-    transition: all 0.3s ease;
-  }
-  &.active{
-    &>div{
-      opacity: 1;
-      transform: translate(0%, 0%);
-    }
-  }
-
-  @media only screen and (min-width: ${responsiveMedia}) {
-    position: absolute;
-    top: 50%;
-    left:50%;
-
-    width: 25%;
-    transform: translate(-50%, -50%);
-  }
-`;
-
+import { ICircularSlider } from './CircularSlider.interface';
+import { responsiveMedia } from '@/styles/variables';
+import styled from 'styled-components';
+
+export const StyledCircularSlider = styled.div<ICircularSlider>`
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+
+  & > svg{
+    display: none;
+    position:absolute;
+    top:50%;
+    left:0;
+    width:66.666%;
+    height:auto;
+    transform: translate(-50%, -50%);
+    transition: all 0.3s;
+  }
+
+  @media only screen and (min-width: ${responsiveMedia}) {
+    min-height: 100dvh;
+    & > svg{
+      display: block;
+    }
+  }
+`;
+
+export const StyledCircularSliderWrapper = styled.div<ICircularSlider>`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  
+  margin: 0 auto;
+  margin-right: 0;
+  transform: translate(-30%, 0%);
+
+
+  @media only screen and (max-width: ${responsiveMedia}) {
+    transform: translate(-25%, 0%);
+  }
+  @media only screen and (min-width: ${responsiveMedia}) {
+    top: 50%;
+    transform: translate(65%, -50%);
+  }
+`;
+
+export const StyledCircularSliderSlides = styled.div<ICircularSlider>`
+  transform-origin: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  z-index: 100;
+  transform: rotate(-180deg);
+
+  @media only screen and (min-width: ${responsiveMedia}) {
+    transform: rotate(-90deg);
+  }
+`;
+export const StyledCircularSliderSlide = styled.div<ICircularSlider>`
+  position: absolute;
+  transform-origin: center;
+  transition: .3s linear all;
+  filter: brightness(50%);
+  cursor: pointer;
+
+  @media only screen and (max-width: ${responsiveMedia}) {
+    border-radius:50%;
+    overflow: hidden;
+  }
+
+  & img{
+    height: 100%;
+    object-fit: cover;
+    pointer-events:none;
+    filter: grayscale(100%);
+    transform: rotate(90deg);
+  }
+
+  &.active{
+    filter: brightness(100%);
+    /* @media only screen and (max-width: ${responsiveMedia}) {
+      width: 100px !important;
+      height: 100px !important;
+    } */
+
+  }
+
+  @media only screen and (min-width: ${responsiveMedia}) {
+    & img{
+      transform: none;
+    }
+  }
+`;
+
+export const StyledCircularSliderContent = styled.div<ICircularSlider>`
+
+  width: 50%;
+  text-align: center;
+  margin: auto;
+  @media only screen and (max-width: ${responsiveMedia}) {
+    margin-top: 42px
+  }
+  &>div{
+    opacity: 0;
+    transform: translate(0%, 5%);
+    transition: all 0.3s ease;
+  }
+  &.active{
+    &>div{
+      opacity: 1;
+      transform: translate(0%, 0%);
+    }
+  }
+
+  @media only screen and (min-width: ${responsiveMedia}) {
+    position: absolute;
+    top: 50%;
+    left:50%;
+
+    width: 25%;
+    transform: translate(-50%, -50%);
+  }
+`;
+

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

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

package/src/components/organisms/Cover/Cover.component.tsx

@@ -1,46 +1,46 @@
-import {
-  StyledCover,
-  StyledCoverContent,
-  StyledCoverOverlay
-} from './Cover.theme'
-import { flexAlign, flexJustify } from '@/components/atoms/Flex/Flex.interface'
-
-import { ICover } from './Cover.interface'
-import React from 'react'
-import cn from 'classnames'
-
-const Cover = ({
-  minHeight,
-  contentPosition,
-  imageElement,
-  overlayOpacity,
-  overlayColor,
-  style,
-  className,
-  children
-}: ICover) => {
-  let alignClass = contentPosition
-    ? contentPosition.split(' ')
-    : ['center', 'center']
-
-  return (
-    <StyledCover
-      className={cn(
-        `align-items-${alignClass[0]}`,
-        `justify-content-${alignClass[0]}`,
-        className
-      )}
-      style={{ ...style, minHeight: minHeight || undefined }}
-    >
-      {imageElement}
-      {overlayColor && overlayOpacity ? (
-        <StyledCoverOverlay
-          style={{ backgroundColor: overlayColor, opacity: overlayOpacity }}
-        ></StyledCoverOverlay>
-      ) : (<></>)}
-      <StyledCoverContent>{children}</StyledCoverContent>
-    </StyledCover>
-  )
-}
-
-export default Cover
+import {
+  StyledCover,
+  StyledCoverContent,
+  StyledCoverOverlay
+} from './Cover.theme'
+import { flexAlign, flexJustify } from '@/components/atoms/Flex/Flex.interface'
+
+import { ICover } from './Cover.interface'
+import React from 'react'
+import cn from 'classnames'
+
+const Cover = ({
+  minHeight,
+  contentPosition,
+  imageElement,
+  overlayOpacity,
+  overlayColor,
+  style,
+  className,
+  children
+}: ICover) => {
+  let alignClass = contentPosition
+    ? contentPosition.split(' ')
+    : ['center', 'center']
+
+  return (
+    <StyledCover
+      className={cn(
+        `align-items-${alignClass[0]}`,
+        `justify-content-${alignClass[0]}`,
+        className
+      )}
+      style={{ ...style, minHeight: minHeight || undefined }}
+    >
+      {imageElement}
+      {overlayColor && overlayOpacity ? (
+        <StyledCoverOverlay
+          style={{ backgroundColor: overlayColor, opacity: overlayOpacity }}
+        ></StyledCoverOverlay>
+      ) : (<></>)}
+      <StyledCoverContent>{children}</StyledCoverContent>
+    </StyledCover>
+  )
+}
+
+export default Cover

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

@@ -1,14 +1,14 @@
-import { CSSProperties } from 'react';
-
-export type ICover = {
-  id?: string;
-  anchor?: string;
-  minHeight?: string;
-  contentPosition?: string;
-  imageElement?: React.ReactElement
-  overlayOpacity?: number;
-  overlayColor?: string;
-  className?: string;
-  style?: CSSProperties;
-  children?: React.ReactNode
-}
+import { CSSProperties } from 'react';
+
+export type ICover = {
+  id?: string;
+  anchor?: string;
+  minHeight?: string;
+  contentPosition?: string;
+  imageElement?: React.ReactElement
+  overlayOpacity?: number;
+  overlayColor?: string;
+  className?: string;
+  style?: CSSProperties;
+  children?: React.ReactNode
+}