oddsgate-ds 1.0.174 → 1.0.176

package/src/components/atoms/Button/Button.stories.tsx

@@ -1,65 +1,65 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import Button from './Button.component'
-import { IButton } from './Button.interface'
-import Icon from '../Icon'
-import React from 'react'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/Button',
-  component: Button,
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {
-    href: { control: 'text' },
-    backgroundColor: { control: 'color' },
-    variant: {
-      options: ['primary', 'secondary']
-    },
-    mode: {
-      options: ['dark', 'light'],
-      control: { type: 'inline-radio' }
-    },
-    disabled: {
-      control: { type: 'boolean' }
-    },
-    removeLabel: {
-      control: { type: 'boolean' }
-    },
-    align: {
-      options: ['left', 'center', 'right']
-    },
-    className: { control: 'text' }
-  },
-  args: {
-    children: 'Button'
-  }
-} as Meta
-
-export const Primary: StoryObj<IButton> = {
-  render: args => <Button {...args} />,
-  args: {
-    mode: 'dark',
-    rightIcon: <Icon icon="icon-arrow-right"></Icon>
-  }
-}
-export const Secondary: StoryObj<IButton> = {
-  args: {
-    ...Primary.args,
-    variant: 'secondary',
-    rightIcon: <Icon icon="icon-arrow-right"></Icon>
-  }
-}
-export const Link: StoryObj<IButton> = {
-  args: {
-    ...Primary.args,
-    variant: 'link'
-  }
-}
-export const Disabled: StoryObj<IButton> = {
-  args: {
-    ...Primary.args,
-    disabled: true
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Button from './Button.component'
+import { IButton } from './Button.interface'
+import Icon from '../Icon'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Button',
+  component: Button,
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    href: { control: 'text' },
+    backgroundColor: { control: 'color' },
+    variant: {
+      options: ['primary', 'secondary']
+    },
+    mode: {
+      options: ['dark', 'light'],
+      control: { type: 'inline-radio' }
+    },
+    disabled: {
+      control: { type: 'boolean' }
+    },
+    removeLabel: {
+      control: { type: 'boolean' }
+    },
+    align: {
+      options: ['left', 'center', 'right']
+    },
+    className: { control: 'text' }
+  },
+  args: {
+    children: 'Button'
+  }
+} as Meta
+
+export const Primary: StoryObj<IButton> = {
+  render: args => <Button {...args} />,
+  args: {
+    mode: 'dark',
+    rightIcon: <Icon icon="icon-arrow-right"></Icon>
+  }
+}
+export const Secondary: StoryObj<IButton> = {
+  args: {
+    ...Primary.args,
+    variant: 'secondary',
+    rightIcon: <Icon icon="icon-arrow-right"></Icon>
+  }
+}
+export const Link: StoryObj<IButton> = {
+  args: {
+    ...Primary.args,
+    variant: 'link'
+  }
+}
+export const Disabled: StoryObj<IButton> = {
+  args: {
+    ...Primary.args,
+    disabled: true
+  }
+}

package/src/components/atoms/Button/Button.theme.ts

@@ -1,180 +1,180 @@
-import { colors, radius, responsiveMedia, spaces, typography } from '@/styles/variables';
-import styled, { css } from 'styled-components';
-
-import { IButtonSC } from './Button.interface';
-import { fontSize } from '@/styles/utilities';
-
-export const StyledButton = styled.a<IButtonSC>`
-  position: relative;
-  display: inline-flex;
-  vertical-align: middle;
-  justify-content: center;
-  align-items: center;
-  gap: ${spaces[2]};
-  border: 0;
-  outline: 0;
-  background-color: transparent;
-  font-weight: 700;
-
-  margin-right: ${spaces[3]};
-
-  transition: all 0.3s ease;
-  cursor: pointer;
-
-  &:only-child,
-  &:only-of-type,
-  &:last-of-type {
-    margin-right: 0;
-  }
-
-  & > i {
-    color: currentColor;
-    transition: all 0.3s ease;
-  }
-
-  @media only screen and (max-width: ${responsiveMedia}) {
-    & i {
-      display: none !important;
-    }
-    span {
-      transform: unset !important;
-    }
-    transform: unset !important;
-  }
-
-  ${props => {
-    switch (props.$variant) {
-      case 'primary':
-      default:
-        return css`
-          ${fontSize('h4')};
-          padding: 0.8rem 1.6rem;
-          border-radius: 100px;
-          text-transform: uppercase;
-
-          ${props.$mode === 'light'
-            ? css`
-                color: ${colors.primary50};
-                background-color: ${colors.secondary50};
-              `
-            : css`
-                color: ${colors.secondary50};
-                background-color: ${colors.primary50};
-              `}
-
-          & span {
-            transition: all 0.3s ease;
-          }
-          & i {
-            position: absolute;
-            top: 50%;
-            right: 1.8rem;
-            opacity: 0;
-            transform: scale(0) translateX(-4px) translateY(-50%);
-          }
-
-          &:hover {
-            & span {
-              transform: translateX(-1rem);
-            }
-            & i {
-              opacity: 1;
-              transform: scale(1) translateX(0) translateY(-50%);
-            }
-          }
-
-          @media only screen and (min-width: ${responsiveMedia}) {
-            padding: 1.5rem 2.6rem;
-          }
-        `
-      case 'secondary':
-        return css`
-          ${fontSize('h5')};
-          padding: 0.8rem 1.6rem;
-          border-radius: 50px;
-          text-transform: uppercase;
-
-          ${props.$mode === 'light'
-            ? css`
-                color: ${colors.primary50};
-                background-color: ${colors.secondary50};
-              `
-            : css`
-                color: ${colors.secondary50};
-                background-color: ${colors.primary50};
-              `}
-
-          & span {
-            transition: all 0.3s ease;
-          }
-          & i {
-            position: absolute;
-            top: 50%;
-            right: 0.6rem;
-            font-size: 16px;
-            opacity: 0;
-            transform: scale(0) translateX(-4px) translateY(-50%);
-          }
-
-          &:hover {
-            & span {
-              transform: translateX(-0.5rem);
-            }
-            & i {
-              opacity: 1;
-              transform: scale(1) translateX(0) translateY(-50%);
-            }
-          }
-        `
-      case 'link':
-        return css`
-          ${fontSize('h5')};
-          text-transform: uppercase;
-          padding: 0;
-
-          ${props.$mode === 'light'
-            ? css`
-                color: ${colors.third50};
-
-                &:hover {
-                  color: ${colors.secondary50};
-                }
-              `
-            : css`
-                color: ${colors.secondary50};
-
-                &:hover {
-                  color: ${colors.primary50};
-                }
-              `}
-        `
-      case 'icon':
-        return css``
-    }
-  }}
-
-  ${({ removeLabel }) =>
-    removeLabel &&
-    css`
-      @media only screen and (max-width: ${responsiveMedia}) {
-        & span {
-          display: none;
-        }
-
-        & * ~ span,
-        & span ~ * {
-          margin-left: 0;
-        }
-      }
-    `}
-
-  ${({ disabled }) =>
-    disabled &&
-    css`
-    color: ${colors.gray50} !important;
-    border: 1px solid transparent;
-
-    pointer-events: none;
-    user-select: none;
-  `}
-`
+import { colors, radius, responsiveMedia, spaces, typography } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { IButtonSC } from './Button.interface';
+import { fontSize } from '@/styles/utilities';
+
+export const StyledButton = styled.a<IButtonSC>`
+  position: relative;
+  display: inline-flex;
+  vertical-align: middle;
+  justify-content: center;
+  align-items: center;
+  gap: ${spaces[2]};
+  border: 0;
+  outline: 0;
+  background-color: transparent;
+  font-weight: 700;
+
+  margin-right: ${spaces[3]};
+
+  transition: all 0.3s ease;
+  cursor: pointer;
+
+  &:only-child,
+  &:only-of-type,
+  &:last-of-type {
+    margin-right: 0;
+  }
+
+  & > i {
+    color: currentColor;
+    transition: all 0.3s ease;
+  }
+
+  @media only screen and (max-width: ${responsiveMedia}) {
+    & i {
+      display: none !important;
+    }
+    span {
+      transform: unset !important;
+    }
+    transform: unset !important;
+  }
+
+  ${props => {
+    switch (props.$variant) {
+      case 'primary':
+      default:
+        return css`
+          ${fontSize('h4')};
+          padding: 0.8rem 1.6rem;
+          border-radius: 100px;
+          text-transform: uppercase;
+
+          ${props.$mode === 'light'
+            ? css`
+                color: ${colors.primary50};
+                background-color: ${colors.secondary50};
+              `
+            : css`
+                color: ${colors.secondary50};
+                background-color: ${colors.primary50};
+              `}
+
+          & span {
+            transition: all 0.3s ease;
+          }
+          & i {
+            position: absolute;
+            top: 50%;
+            right: 1.8rem;
+            opacity: 0;
+            transform: scale(0) translateX(-4px) translateY(-50%);
+          }
+
+          &:hover {
+            & span {
+              transform: translateX(-1rem);
+            }
+            & i {
+              opacity: 1;
+              transform: scale(1) translateX(0) translateY(-50%);
+            }
+          }
+
+          @media only screen and (min-width: ${responsiveMedia}) {
+            padding: 1.5rem 2.6rem;
+          }
+        `
+      case 'secondary':
+        return css`
+          ${fontSize('h5')};
+          padding: 0.8rem 1.6rem;
+          border-radius: 50px;
+          text-transform: uppercase;
+
+          ${props.$mode === 'light'
+            ? css`
+                color: ${colors.primary50};
+                background-color: ${colors.secondary50};
+              `
+            : css`
+                color: ${colors.secondary50};
+                background-color: ${colors.primary50};
+              `}
+
+          & span {
+            transition: all 0.3s ease;
+          }
+          & i {
+            position: absolute;
+            top: 50%;
+            right: 0.6rem;
+            font-size: 16px;
+            opacity: 0;
+            transform: scale(0) translateX(-4px) translateY(-50%);
+          }
+
+          &:hover {
+            & span {
+              transform: translateX(-0.5rem);
+            }
+            & i {
+              opacity: 1;
+              transform: scale(1) translateX(0) translateY(-50%);
+            }
+          }
+        `
+      case 'link':
+        return css`
+          ${fontSize('h5')};
+          text-transform: uppercase;
+          padding: 0;
+
+          ${props.$mode === 'light'
+            ? css`
+                color: ${colors.third50};
+
+                &:hover {
+                  color: ${colors.secondary50};
+                }
+              `
+            : css`
+                color: ${colors.secondary50};
+
+                &:hover {
+                  color: ${colors.primary50};
+                }
+              `}
+        `
+      case 'icon':
+        return css``
+    }
+  }}
+
+  ${({ removeLabel }) =>
+    removeLabel &&
+    css`
+      @media only screen and (max-width: ${responsiveMedia}) {
+        & span {
+          display: none;
+        }
+
+        & * ~ span,
+        & span ~ * {
+          margin-left: 0;
+        }
+      }
+    `}
+
+  ${({ disabled }) =>
+    disabled &&
+    css`
+    color: ${colors.gray50} !important;
+    border: 1px solid transparent;
+
+    pointer-events: none;
+    user-select: none;
+  `}
+`

package/src/components/atoms/Button/index.ts

@@ -1 +1 @@
-export { default } from "./Button.component";
+export { default } from "./Button.component";

package/src/components/atoms/CardMarquee/CardMarquee.component.tsx

@@ -1,24 +1,24 @@
-import { ICardMarquee } from './CardMarquee.interface'
-import React from 'react'
-import { StyledCardMarquee } from './CardMarquee.theme'
-
-const CardMarquee = ({
-  direction = 'left',
-  speed = 20,
-  repeatContent = 5,
-  gap = '0px',
-  children,
-}: ICardMarquee) => {
-  // To ensure continuous flow, duplicate the children multiple times based on the content size and container.
-  const content = Array.from({ length: repeatContent }, () => children);
-
-  return (
-    <StyledCardMarquee direction={direction} duration={speed} gap={gap}>
-      <div>
-        {content}
-      </div>
-    </StyledCardMarquee>
-  )
-}
-
-export default CardMarquee
+import { ICardMarquee } from './CardMarquee.interface'
+import React from 'react'
+import { StyledCardMarquee } from './CardMarquee.theme'
+
+const CardMarquee = ({
+  direction = 'left',
+  speed = 20,
+  repeatContent = 5,
+  gap = '0px',
+  children,
+}: ICardMarquee) => {
+  // To ensure continuous flow, duplicate the children multiple times based on the content size and container.
+  const content = Array.from({ length: repeatContent }, () => children);
+
+  return (
+    <StyledCardMarquee direction={direction} duration={speed} gap={gap}>
+      <div>
+        {content}
+      </div>
+    </StyledCardMarquee>
+  )
+}
+
+export default CardMarquee

package/src/components/atoms/CardMarquee/CardMarquee.interface.ts

@@ -1,15 +1,15 @@
-import { CSSProperties } from "styled-components";
-
-export type Direction = 'left' | 'right' | 'up' | 'down';
-
-export interface ICardMarquee {
-  direction?: Direction;
-  repeatContent?: number;
-  duration?: number;
-  speed?: number;
-  gap?: string;
-  className?: string;
-  style?: CSSProperties
-  children: React.ReactNode;
-}
-
+import { CSSProperties } from "styled-components";
+
+export type Direction = 'left' | 'right' | 'up' | 'down';
+
+export interface ICardMarquee {
+  direction?: Direction;
+  repeatContent?: number;
+  duration?: number;
+  speed?: number;
+  gap?: string;
+  className?: string;
+  style?: CSSProperties
+  children: React.ReactNode;
+}
+

package/src/components/atoms/CardMarquee/CardMarquee.stories.tsx

@@ -1,21 +1,21 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import CardMarquee from './CardMarquee.component'
-import Heading from '@/components/atoms/Heading/Heading.component'
-import { ICardMarquee } from './CardMarquee.interface'
-import React from 'react'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/CardMarquee',
-  component: CardMarquee,
-  argTypes: {}
-} as Meta
-
-export const Simple: StoryObj<ICardMarquee> = {
-  render: args => <CardMarquee {...args} />,
-  args: {
-    gap: "1rem",
-    children: <Heading>People • Sustainability • Efficiency • Innovation</Heading>
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import CardMarquee from './CardMarquee.component'
+import Heading from '@/components/atoms/Heading/Heading.component'
+import { ICardMarquee } from './CardMarquee.interface'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/CardMarquee',
+  component: CardMarquee,
+  argTypes: {}
+} as Meta
+
+export const Simple: StoryObj<ICardMarquee> = {
+  render: args => <CardMarquee {...args} />,
+  args: {
+    gap: "1rem",
+    children: <Heading>People • Sustainability • Efficiency • Innovation</Heading>
+  }
+}