oddsgate-ds 1.0.168 → 1.0.171

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

@@ -1,58 +1,58 @@
-import styled, { css } from 'styled-components';
-
-import { IScrollingNav } from './ScrollingNav.interface';
-import { colors } from '@/styles/variables';
-
-export const StyledScrollingNav = styled.div<IScrollingNav>`
-  position: relative;
-  display: flex;
-  align-items: center;
-  max-width: 100%;
-  gap: 1rem;
-  padding-bottom: 12px;
-
-  -webkit-overflow-scrolling: touch;
-  overflow-x: auto;
-  overflow-y: visible;
-  text-align: center;
-  white-space: nowrap;
-
-  -webkit-backface-visibility: hidden;
-  backface-visibility: hidden;
-
-  -ms-overflow-style: auto;
-
-  & > div {
-    &:first-child {
-      margin-left: auto !important;
-    }
-
-    &:last-child {
-      margin-right: auto !important;
-    }
-  }
-
-  ${(props) => {
-    switch (props.align) {
-      case "left":
-        return css`
-          & > div {
-            &:first-child {
-              margin-left: 0 !important;
-            }
-            &:last-child {
-              margin-right: 0 !important;
-            }
-          }
-        `;
-      case "right":
-        return css`
-          & > div {
-            &:last-child {
-              margin-right: 0 !important;
-            }
-          }
-        `;
-    }
-  }}
-`;
+import styled, { css } from 'styled-components';
+
+import { IScrollingNav } from './ScrollingNav.interface';
+import { colors } from '@/styles/variables';
+
+export const StyledScrollingNav = styled.div<IScrollingNav>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+  gap: 1rem;
+  padding-bottom: 12px;
+
+  -webkit-overflow-scrolling: touch;
+  overflow-x: auto;
+  overflow-y: visible;
+  text-align: center;
+  white-space: nowrap;
+
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+
+  -ms-overflow-style: auto;
+
+  & > div {
+    &:first-child {
+      margin-left: auto !important;
+    }
+
+    &:last-child {
+      margin-right: auto !important;
+    }
+  }
+
+  ${(props) => {
+    switch (props.align) {
+      case "left":
+        return css`
+          & > div {
+            &:first-child {
+              margin-left: 0 !important;
+            }
+            &:last-child {
+              margin-right: 0 !important;
+            }
+          }
+        `;
+      case "right":
+        return css`
+          & > div {
+            &:last-child {
+              margin-right: 0 !important;
+            }
+          }
+        `;
+    }
+  }}
+`;

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

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

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

@@ -1,19 +1,19 @@
-import { ISeparator } from './Separator.interface';
-import React from 'react';
-import { StyledSeparator } from './Separator.theme';
-
-const Separator = ({ type, color, height, margin, ...props }: ISeparator) => {
-  return (
-    <StyledSeparator
-      style={{
-        borderColor: color ? color : ``,
-        borderTopWidth: height,
-        borderStyle: type,
-        margin: margin ? margin : ''
-      }}
-      {...props}
-    />
-  )
-}
-
-export default Separator
+import { ISeparator } from './Separator.interface';
+import React from 'react';
+import { StyledSeparator } from './Separator.theme';
+
+const Separator = ({ type, color, height, margin, ...props }: ISeparator) => {
+  return (
+    <StyledSeparator
+      style={{
+        borderColor: color ? color : ``,
+        borderTopWidth: height,
+        borderStyle: type,
+        margin: margin ? margin : ''
+      }}
+      {...props}
+    />
+  )
+}
+
+export default Separator

package/src/components/atoms/Separator/Separator.interface.tsx

@@ -1,10 +1,10 @@
-import { CSSProperties } from 'react';
-
-export type ISeparator = {
-  color?: string
-  type?: string
-  margin?: string,
-  height?: string
-  className?: string;
-  style?: CSSProperties
-};
+import { CSSProperties } from 'react';
+
+export type ISeparator = {
+  color?: string
+  type?: string
+  margin?: string,
+  height?: string
+  className?: string;
+  style?: CSSProperties
+};

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

@@ -1,29 +1,29 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { ISeparator } from '../Separator/Separator.interface'
-import React from 'react'
-import Separator from '../Separator/Separator.component'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/Separator',
-  component: Separator,
-  tags: ['autodocs'],
-  argTypes: {
-    height: {
-      control: 'text'
-    },
-    color: {
-      control: 'color'
-    }
-  }
-} as Meta
-
-export const Simple: StoryObj<ISeparator> = {
-  render: args => <Separator {...args} />,
-  args: {
-    height: '5px',
-    color: '#000',
-    type: 'solid'
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ISeparator } from '../Separator/Separator.interface'
+import React from 'react'
+import Separator from '../Separator/Separator.component'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Separator',
+  component: Separator,
+  tags: ['autodocs'],
+  argTypes: {
+    height: {
+      control: 'text'
+    },
+    color: {
+      control: 'color'
+    }
+  }
+} as Meta
+
+export const Simple: StoryObj<ISeparator> = {
+  render: args => <Separator {...args} />,
+  args: {
+    height: '5px',
+    color: '#000',
+    type: 'solid'
+  }
+}

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

@@ -1,9 +1,9 @@
-import styled, { css } from 'styled-components';
-
-import { ISeparator } from './Separator.interface';
-
-export const StyledSeparator = styled.div<ISeparator>`
-  display: block;
-  width: 100%;
-`;
-
+import styled, { css } from 'styled-components';
+
+import { ISeparator } from './Separator.interface';
+
+export const StyledSeparator = styled.div<ISeparator>`
+  display: block;
+  width: 100%;
+`;
+

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

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

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

@@ -1,42 +1,42 @@
-import Button from '../Button/Button.component'
-import { ISocialLinks } from './SocialLinks.interface'
-import Icon from '../Icon/Icon.component'
-import React from 'react'
-import { StyledSocialLinks } from './SocialLinks.theme'
-
-const SocialLinks = ({
-  variant,
-  socials,
-  className,
-  style,
-  ...props
-}: ISocialLinks) => {
-  if (!socials) return <></>
-
-  return (
-    <StyledSocialLinks variant={variant} className={className} style={style}>
-      {Object.keys(socials).map((social: string, index:number) => {
-        if (!social) return <></>
-
-        return (
-          <li key={`social-${index}`}>
-            <a
-              href={socials[social]}
-              target="_blank"
-              aria-label={social}
-              rel="noreferrer"
-            >
-              {variant === "text" ? (
-                <Button variant='link'>{social}</Button>
-              ): (
-                <Icon icon={`icon-${social}`}></Icon>
-              )}
-            </a>
-          </li>
-        )
-      })}
-    </StyledSocialLinks>
-  )
-}
-
-export default SocialLinks
+import Button from '../Button/Button.component'
+import { ISocialLinks } from './SocialLinks.interface'
+import Icon from '../Icon/Icon.component'
+import React from 'react'
+import { StyledSocialLinks } from './SocialLinks.theme'
+
+const SocialLinks = ({
+  variant,
+  socials,
+  className,
+  style,
+  ...props
+}: ISocialLinks) => {
+  if (!socials) return <></>
+
+  return (
+    <StyledSocialLinks variant={variant} className={className} style={style}>
+      {Object.keys(socials).map((social: string, index:number) => {
+        if (!social) return <></>
+
+        return (
+          <li key={`social-${index}`}>
+            <a
+              href={socials[social]}
+              target="_blank"
+              aria-label={social}
+              rel="noreferrer"
+            >
+              {variant === "text" ? (
+                <Button variant='link'>{social}</Button>
+              ): (
+                <Icon icon={`icon-${social}`}></Icon>
+              )}
+            </a>
+          </li>
+        )
+      })}
+    </StyledSocialLinks>
+  )
+}
+
+export default SocialLinks

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

@@ -1,8 +1,8 @@
-import { CSSProperties } from 'react';
-
-export type ISocialLinks = {
-  variant?: string
-  socials?: Record<string, string>
-  className?: string,
-  style?: CSSProperties
-}
+import { CSSProperties } from 'react';
+
+export type ISocialLinks = {
+  variant?: string
+  socials?: Record<string, string>
+  className?: string,
+  style?: CSSProperties
+}

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

@@ -1,48 +1,48 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { ISocialLinks } from './SocialLinks.interface'
-import React from 'react'
-import SocialLinks from './SocialLinks.component'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/SocialLinks',
-  component: SocialLinks,
-  tags: ['autodocs'],
-  argTypes: {}
-} as Meta
-
-export const Example: StoryObj<ISocialLinks> = {
-  args: {
-    variant: 'text',
-    socials: {
-      facebook: 'https://www.facebook.com/wearemiew',
-      instagram: 'https://www.instagram.com/wearemiew/',
-      youtube: 'https://www.youtube.com/user/miewshapes',
-      linkedIn: 'https://www.linkedin.com/company/2470068/admin/'
-    }
-  }
-}
-
-export const Light: StoryObj<ISocialLinks> = {
-  render: args => <SocialLinks {...args} />,
-  args: {
-    variant: 'light',
-    socials: {
-      facebook: 'https://www.facebook.com/wearemiew',
-      instagram: 'https://www.instagram.com/wearemiew/',
-      youtube: 'https://www.youtube.com/user/miewshapes',
-      linkedIn: 'https://www.linkedin.com/company/2470068/admin/',
-      dribble: 'https://dribbble.com/wearemiew',
-      behance: 'https://www.behance.net/miew/',
-      medium: 'https://medium.com/@wearemiew'
-    }
-  }
-}
-
-export const Dark: StoryObj<ISocialLinks> = {
-  args: {
-    ...Light.args,
-    variant: 'dark'
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ISocialLinks } from './SocialLinks.interface'
+import React from 'react'
+import SocialLinks from './SocialLinks.component'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/SocialLinks',
+  component: SocialLinks,
+  tags: ['autodocs'],
+  argTypes: {}
+} as Meta
+
+export const Example: StoryObj<ISocialLinks> = {
+  args: {
+    variant: 'text',
+    socials: {
+      facebook: 'https://www.facebook.com/wearemiew',
+      instagram: 'https://www.instagram.com/wearemiew/',
+      youtube: 'https://www.youtube.com/user/miewshapes',
+      linkedIn: 'https://www.linkedin.com/company/2470068/admin/'
+    }
+  }
+}
+
+export const Light: StoryObj<ISocialLinks> = {
+  render: args => <SocialLinks {...args} />,
+  args: {
+    variant: 'light',
+    socials: {
+      facebook: 'https://www.facebook.com/wearemiew',
+      instagram: 'https://www.instagram.com/wearemiew/',
+      youtube: 'https://www.youtube.com/user/miewshapes',
+      linkedIn: 'https://www.linkedin.com/company/2470068/admin/',
+      dribble: 'https://dribbble.com/wearemiew',
+      behance: 'https://www.behance.net/miew/',
+      medium: 'https://medium.com/@wearemiew'
+    }
+  }
+}
+
+export const Dark: StoryObj<ISocialLinks> = {
+  args: {
+    ...Light.args,
+    variant: 'dark'
+  }
+}

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

@@ -1,80 +1,80 @@
-import { colors, responsiveMedia } from '@/styles/variables';
-import styled, { css } from 'styled-components';
-
-import { ISocialLinks } from './SocialLinks.interface';
-
-export const StyledSocialLinks = styled.ul<ISocialLinks>`
-  display: inline-flex;
-  align-items: center;
-  flex-flow: row wrap;
-  gap: 12px;
-
-  & li{
-    & a{
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      width: 4rem;
-      height: 4rem;
-      border-radius: 50%;
-      text-align: center;
-
-      transition: all 0.3s linear;
-
-      &:hover{
-        opacity: 0.6;
-      }
-    }
-
-    & i{
-      font-size: 1.6rem;
-    }
-  }
-
-  @media only screen and (min-width: ${responsiveMedia}) {
-    & li{
-      & a{
-        width: 6rem;
-        height: 6rem;
-      }
-
-      & i{
-        font-size: 2.4rem;
-      }
-    }
-  }
-
-  ${(props) => {
-    switch (props.variant) {
-      case "light": default:
-        return css`
-          & li a{
-            color: ${colors.secondary50};
-            background-color: ${colors.primary50};
-          }
-        `;
-
-      case "dark":
-        return css`
-          & li a{
-            color: ${colors.primary50};
-            background-color: ${colors.secondary50};
-          }
-        `;
-
-      case "text":
-        return css`
-          & li a{
-            width: auto;
-            height: auto;
-            border-radius: 0%;
-
-            & span{
-              font-weight: 700;
-            }
-          }
-        `;
-    }
-  }}
-`;
+import { colors, responsiveMedia } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { ISocialLinks } from './SocialLinks.interface';
+
+export const StyledSocialLinks = styled.ul<ISocialLinks>`
+  display: inline-flex;
+  align-items: center;
+  flex-flow: row wrap;
+  gap: 12px;
+
+  & li{
+    & a{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      width: 4rem;
+      height: 4rem;
+      border-radius: 50%;
+      text-align: center;
+
+      transition: all 0.3s linear;
+
+      &:hover{
+        opacity: 0.6;
+      }
+    }
+
+    & i{
+      font-size: 1.6rem;
+    }
+  }
+
+  @media only screen and (min-width: ${responsiveMedia}) {
+    & li{
+      & a{
+        width: 6rem;
+        height: 6rem;
+      }
+
+      & i{
+        font-size: 2.4rem;
+      }
+    }
+  }
+
+  ${(props) => {
+    switch (props.variant) {
+      case "light": default:
+        return css`
+          & li a{
+            color: ${colors.secondary50};
+            background-color: ${colors.primary50};
+          }
+        `;
+
+      case "dark":
+        return css`
+          & li a{
+            color: ${colors.primary50};
+            background-color: ${colors.secondary50};
+          }
+        `;
+
+      case "text":
+        return css`
+          & li a{
+            width: auto;
+            height: auto;
+            border-radius: 0%;
+
+            & span{
+              font-weight: 700;
+            }
+          }
+        `;
+    }
+  }}
+`;

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

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