oddsgate-ds 1.0.169 → 1.0.174

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

@@ -1,43 +1,43 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { ILegalLinks } from './LegalLinks.interface'
-import React from 'react'
-import LegalLinks from './LegalLinks.component'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/LegalLinks',
-  component: LegalLinks,
-  tags: ['autodocs'],
-  argTypes: {}
-} as Meta
-
-export const Example: StoryObj<ILegalLinks> = {
-  args: {
-    links: [
-      {
-        'label': 'Terms of Service',
-        'url': 'https://www.miew.com/terms-of-service'
-      },
-      {
-        'label': 'Privacy Policy',
-        'url': 'https://www.miew.com/privacy-policy'
-      },
-      {
-        'label': 'Cookie Policy',
-        'url': 'https://www.miew.com/cookie-policy'
-      },
-      {
-        'label': 'Accessibility Statement',
-        'url': 'https://www.miew.com/accessibility-statement'
-      }
-    ]
-  },
-  decorators: [
-    (Story) => (
-      <div style={{ background: 'black', padding: '2rem' }}>
-        {Story()}
-      </div>
-    )
-  ]
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ILegalLinks } from './LegalLinks.interface'
+import React from 'react'
+import LegalLinks from './LegalLinks.component'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/LegalLinks',
+  component: LegalLinks,
+  tags: ['autodocs'],
+  argTypes: {}
+} as Meta
+
+export const Example: StoryObj<ILegalLinks> = {
+  args: {
+    links: [
+      {
+        'label': 'Terms of Service',
+        'url': 'https://www.miew.com/terms-of-service'
+      },
+      {
+        'label': 'Privacy Policy',
+        'url': 'https://www.miew.com/privacy-policy'
+      },
+      {
+        'label': 'Cookie Policy',
+        'url': 'https://www.miew.com/cookie-policy'
+      },
+      {
+        'label': 'Accessibility Statement',
+        'url': 'https://www.miew.com/accessibility-statement'
+      }
+    ]
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ background: 'black', padding: '2rem' }}>
+        {Story()}
+      </div>
+    )
+  ]
+}

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

@@ -1,34 +1,34 @@
-import { responsiveMedia } from '@/styles/variables'
-import styled from 'styled-components'
-
-import { ILegalLinks } from './LegalLinks.interface'
-
-export const StyledLegalLinks = styled.ul<ILegalLinks>`
-  font-family: var(--alternative-fontFamily);
-  text-align: center;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  font-size: 12px;
-  
-  a {
-    text-decoration: underline;
-    font-weight: 400;
-    transition: opacity 0.3s linear;
-    
-    &:hover {
-      opacity: 0.6;
-    }
-  }
-
-  @media only screen and (min-width: ${responsiveMedia}) {
-    display: inline-flex;
-    flex-flow: row wrap;
-    align-items: center;
-    gap: 32px;
-    
-    a {
-      font-size: 15px;
-    }
-  }
+import { responsiveMedia } from '@/styles/variables'
+import styled from 'styled-components'
+
+import { ILegalLinks } from './LegalLinks.interface'
+
+export const StyledLegalLinks = styled.ul<ILegalLinks>`
+  font-family: var(--alternative-fontFamily);
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  font-size: 12px;
+  
+  a {
+    text-decoration: underline;
+    font-weight: 400;
+    transition: opacity 0.3s linear;
+    
+    &:hover {
+      opacity: 0.6;
+    }
+  }
+
+  @media only screen and (min-width: ${responsiveMedia}) {
+    display: inline-flex;
+    flex-flow: row wrap;
+    align-items: center;
+    gap: 32px;
+    
+    a {
+      font-size: 15px;
+    }
+  }
 `

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

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

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

@@ -1,26 +1,26 @@
-import { ILoader } from './Loader.interface'
-import React from 'react'
-import RichText from '../RichText/RichText.component'
-import { StyledLoader } from '@/components/atoms/Loader/Loader.theme'
-
-const Loader = ({
-  variant,
-  label,
-  children,
-  className,
-  style,
-  ...props
-}: ILoader) => {
-  return (
-    <StyledLoader $variant={variant} className={className} style={style}>
-      <div></div>
-      {label && (
-        <RichText tag="p" className="mt-3">
-          {label}
-        </RichText>
-      )}
-    </StyledLoader>
-  )
-}
-
-export default Loader
+import { ILoader } from './Loader.interface'
+import React from 'react'
+import RichText from '../RichText/RichText.component'
+import { StyledLoader } from '@/components/atoms/Loader/Loader.theme'
+
+const Loader = ({
+  variant,
+  label,
+  children,
+  className,
+  style,
+  ...props
+}: ILoader) => {
+  return (
+    <StyledLoader $variant={variant} className={className} style={style}>
+      <div></div>
+      {label && (
+        <RichText tag="p" className="mt-3">
+          {label}
+        </RichText>
+      )}
+    </StyledLoader>
+  )
+}
+
+export default Loader

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

@@ -1,10 +1,10 @@
-import { CSSProperties } from 'react';
-
-export interface ILoader {
-  variant?: string,
-  $variant?: string,
-  label?: string,
-  className?: string,
-  style?: CSSProperties
-  children?: React.ReactNode
-}
+import { CSSProperties } from 'react';
+
+export interface ILoader {
+  variant?: string,
+  $variant?: string,
+  label?: string,
+  className?: string,
+  style?: CSSProperties
+  children?: React.ReactNode
+}

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

@@ -1,33 +1,33 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { ILoader } from './Loader.interface'
-import Loader from './Loader.component'
-import React from 'react'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/Loader',
-  component: Loader,
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {}
-} as Meta
-
-export const Light: StoryObj<ILoader> = {
-  render: args => <Loader {...args}></Loader>,
-  args: {
-    variant: 'light',
-    label: 'Loading...'
-  }
-}
-export const Dark: StoryObj<ILoader> = {
-  render: args => (
-    <div className="bg-primary50 color-white p-8">
-      <Loader {...args}></Loader>
-    </div>
-  ),
-  args: {
-    variant: 'dark',
-    label: 'Loading...'
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ILoader } from './Loader.interface'
+import Loader from './Loader.component'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Loader',
+  component: Loader,
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {}
+} as Meta
+
+export const Light: StoryObj<ILoader> = {
+  render: args => <Loader {...args}></Loader>,
+  args: {
+    variant: 'light',
+    label: 'Loading...'
+  }
+}
+export const Dark: StoryObj<ILoader> = {
+  render: args => (
+    <div className="bg-primary50 color-white p-8">
+      <Loader {...args}></Loader>
+    </div>
+  ),
+  args: {
+    variant: 'dark',
+    label: 'Loading...'
+  }
+}

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

@@ -1,51 +1,51 @@
-import styled, { css } from 'styled-components';
-
-import { ILoader } from './Loader.interface';
-import { colors } from '@/styles/variables';
-
-export const StyledLoader = styled.div<ILoader>`
-  display: inline-block;
-  text-align: center;
-
-  & > div {
-    position: relative;
-    width: 15rem;
-    height: 5rem;
-
-    &::before,
-    &::after {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-
-      width: 5rem;
-      height: 5rem;
-
-      border-radius: 50%;
-      transform:translate(-50%,-50%);
-    }
-    &::before{
-      left:20%;
-      background:${colors.primary50};
-      animation:osc-l 2.5s ease infinite;
-    }
-    &::after {
-      left:80%;
-      background:${colors.third10};
-      animation:osc-r 2.5s ease infinite;
-    }
-  }
-
-
-  @keyframes osc-l{
-    0%{left:20%;}
-    50%{left:50%;}
-    100%{left:20%;}
-  }
-  @keyframes osc-r{
-    0%{left:80%;}
-    50%{left:50%;}
-    100%{left:80%;}
-  }
-`;
+import styled, { css } from 'styled-components';
+
+import { ILoader } from './Loader.interface';
+import { colors } from '@/styles/variables';
+
+export const StyledLoader = styled.div<ILoader>`
+  display: inline-block;
+  text-align: center;
+
+  & > div {
+    position: relative;
+    width: 15rem;
+    height: 5rem;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+
+      width: 5rem;
+      height: 5rem;
+
+      border-radius: 50%;
+      transform:translate(-50%,-50%);
+    }
+    &::before{
+      left:20%;
+      background:${colors.primary50};
+      animation:osc-l 2.5s ease infinite;
+    }
+    &::after {
+      left:80%;
+      background:${colors.third10};
+      animation:osc-r 2.5s ease infinite;
+    }
+  }
+
+
+  @keyframes osc-l{
+    0%{left:20%;}
+    50%{left:50%;}
+    100%{left:20%;}
+  }
+  @keyframes osc-r{
+    0%{left:80%;}
+    50%{left:50%;}
+    100%{left:80%;}
+  }
+`;

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

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

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

@@ -1,32 +1,32 @@
-import Heading from '../Heading/Heading.component'
-import { IMarquee } from './Marquee.interface'
-import React from 'react'
-import { StyledMarquee } from './Marquee.theme'
-import cn from 'classnames'
-
-const Marquee = ({
-  text,
-  className,
-  onClick,
-  repeat = 5,
-  duration = 15,
-  ...props
-}: IMarquee) => {
-  return (
-    <StyledMarquee
-      duration={duration}
-      repeat={repeat}
-      className={cn(className)}
-      onClick={onClick}
-      {...props}
-    >
-      <div>
-        <Heading size="display" tag="span" className="fw-bold">
-          {Array.from({ length: repeat }, () => text).join(' ')}
-        </Heading>
-      </div>
-    </StyledMarquee>
-  )
-}
-
-export default Marquee
+import Heading from '../Heading/Heading.component'
+import { IMarquee } from './Marquee.interface'
+import React from 'react'
+import { StyledMarquee } from './Marquee.theme'
+import cn from 'classnames'
+
+const Marquee = ({
+  text,
+  className,
+  onClick,
+  repeat = 5,
+  duration = 15,
+  ...props
+}: IMarquee) => {
+  return (
+    <StyledMarquee
+      duration={duration}
+      repeat={repeat}
+      className={cn(className)}
+      onClick={onClick}
+      {...props}
+    >
+      <div>
+        <Heading size="display" tag="span" className="fw-bold">
+          {Array.from({ length: repeat }, () => text).join(' ')}
+        </Heading>
+      </div>
+    </StyledMarquee>
+  )
+}
+
+export default Marquee

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

@@ -1,10 +1,10 @@
-import { CSSProperties } from 'react';
-
-export type IMarquee = {
-  text?: string
-  repeat?: number
-  duration: number
-  className?: string
-  style?: CSSProperties
-  onClick?: () => void
-}
+import { CSSProperties } from 'react';
+
+export type IMarquee = {
+  text?: string
+  repeat?: number
+  duration: number
+  className?: string
+  style?: CSSProperties
+  onClick?: () => void
+}

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

@@ -1,20 +1,20 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { IMarquee } from './Marquee.interface'
-import Marquee from './Marquee.component'
-import React from 'react'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/Marquee',
-  component: Marquee,
-  tags: ['autodocs'],
-  argTypes: {}
-} as Meta
-
-export const Simple: StoryObj<IMarquee> = {
-  render: args => <Marquee {...args} />,
-  args: {
-    text: 'People • Sustainability • Efficiency • Innovation'
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { IMarquee } from './Marquee.interface'
+import Marquee from './Marquee.component'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Marquee',
+  component: Marquee,
+  tags: ['autodocs'],
+  argTypes: {}
+} as Meta
+
+export const Simple: StoryObj<IMarquee> = {
+  render: args => <Marquee {...args} />,
+  args: {
+    text: 'People • Sustainability • Efficiency • Innovation'
+  }
+}

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

@@ -1,40 +1,40 @@
-import { colors, radius } from '@/styles/variables';
-import styled, { css } from 'styled-components';
-
-import { IMarquee } from './Marquee.interface';
-
-export const StyledMarquee = styled.div<IMarquee>`
-  position: relative;
-  top: 0;
-  left: 0;
-  width: 100%;
-  contain: paint;
-  pointer-events: none;
-
-  --offset: 20vw;
-  --move-initial: calc(-25% + var(--offset));
-  --move-final: calc(-50% + var(--offset));
-
-  color: ${colors.primary50};
-
-  padding: 8px 0;
-
-  & > div{
-    position: relative;
-    display: flex;
-    width: fit-content;
-    white-space: nowrap;
-    transform: translate3d(var(--move-initial), 0, 0);
-    animation: marquee ${({ duration = 15 }) => duration}s linear infinite;
-  }
-
-  @keyframes marquee {
-    0% {
-      transform: translate3d(var(--move-initial), 0, 0);
-    }
-
-    100% {
-      transform: translate3d(var(--move-final), 0, 0);
-    }
-  }
-`;
+import { colors, radius } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { IMarquee } from './Marquee.interface';
+
+export const StyledMarquee = styled.div<IMarquee>`
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  contain: paint;
+  pointer-events: none;
+
+  --offset: 20vw;
+  --move-initial: calc(-25% + var(--offset));
+  --move-final: calc(-50% + var(--offset));
+
+  color: ${colors.primary50};
+
+  padding: 8px 0;
+
+  & > div{
+    position: relative;
+    display: flex;
+    width: fit-content;
+    white-space: nowrap;
+    transform: translate3d(var(--move-initial), 0, 0);
+    animation: marquee ${({ duration = 15 }) => duration}s linear infinite;
+  }
+
+  @keyframes marquee {
+    0% {
+      transform: translate3d(var(--move-initial), 0, 0);
+    }
+
+    100% {
+      transform: translate3d(var(--move-final), 0, 0);
+    }
+  }
+`;

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

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