oddsgate-ds 1.0.169 → 1.0.174

package/src/components/atoms/FormField/FormField.theme.tsx

@@ -1,136 +1,136 @@
-import { IFormField } from './FormField.interface'
-import { colors } from '@/styles/variables'
-import { fontSize } from '@/styles/utilities'
-import styled, { css } from 'styled-components'
-
-export const StyledField = styled.input``
-
-export const StyledFieldContainer = styled.div<IFormField>`
-  position: relative;
-  width: 100%;
-  margin-bottom: 2rem;
-
-  ${({ $isCheckRadio }) =>
-    !$isCheckRadio
-      ? css`
-          & > div {
-            position: relative;
-          }
-
-          i {
-            position: absolute;
-            top: 50%;
-            left: 12px;
-            margin-top: -10px;
-
-            color: currentColor;
-
-            & + input,
-            & + select {
-              padding-left: 2.6rem;
-            }
-          }
-
-          label {
-            display: block;
-          }
-
-          &:has(select) {
-            & > div {
-              &::after {
-                content: '';
-                display: block;
-                position: absolute;
-                top: 50%;
-                right: 12px;
-                width: 16px;
-                height: 16px;
-                margin: 0 4px;
-                margin-top: -8px;
-                background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.33333 9.24435L11.016 5.33398L12 6.3788L7.33333 11.334L2.66667 6.3788L3.65065 5.33398L7.33333 9.24435Z' fill='%233C3B39'/%3E%3C/svg%3E%0A");
-              }
-              & input,
-              & select {
-                padding-right: 2.6rem;
-              }
-            }
-          }
-
-          input,
-          textarea,
-          select {
-            ${fontSize('h5')};
-
-            border-radius: 50px;
-            border: 0;
-
-            padding: 1rem 4rem 1rem 1rem;
-            color: ${colors.third10};
-            background: ${colors.secondary50};
-            outline: none;
-            width: 100%;
-
-            border: 0;
-          }
-
-          input[type='text'] {
-            padding-right: 4rem;
-          }
-
-          input::file-selector-button {
-            font-family: inherit;
-            color: ${colors.secondary50};
-            background-color: ${colors.primary50};
-            ${fontSize('h5')};
-            padding: 0.8rem 1.6rem;
-            border-radius: 50px;
-            text-transform: uppercase;
-
-            border: 0;
-            outline: 0;
-            cursor: pointer;
-            transition: all 0.3s ease;
-
-            &:hover {
-              opacity: 0.6;
-            }
-          }
-
-          textarea {
-            border-radius: 32px;
-            height: 11.5rem;
-          }
-
-          select {
-            option {
-              color: ${colors.primary50};
-            }
-          }
-
-          //Clear search X
-          input[type='search']::-webkit-search-decoration,
-          input[type='search']::-webkit-search-cancel-button,
-          input[type='search']::-webkit-search-results-button,
-          input[type='search']::-webkit-search-results-decoration {
-            -webkit-appearance: none;
-          }
-        `
-      : `
-      & > div{
-        display: flex;
-        flex-flow: row wrap;
-        gap: 1rem;
-      }
-  `}
-
-  ::placeholder {
-    color: rbga(${colors.third10}, 0.2);
-    font-weight: 700;
-  }
-
-  ::-ms-input-placeholder {
-    /* Edge 12 -18 */
-    color: rbga(${colors.third10}, 0.2);
-    font-weight: 700;
-  }
-`
+import { IFormField } from './FormField.interface'
+import { colors } from '@/styles/variables'
+import { fontSize } from '@/styles/utilities'
+import styled, { css } from 'styled-components'
+
+export const StyledField = styled.input``
+
+export const StyledFieldContainer = styled.div<IFormField>`
+  position: relative;
+  width: 100%;
+  margin-bottom: 2rem;
+
+  ${({ $isCheckRadio }) =>
+    !$isCheckRadio
+      ? css`
+          & > div {
+            position: relative;
+          }
+
+          i {
+            position: absolute;
+            top: 50%;
+            left: 12px;
+            margin-top: -10px;
+
+            color: currentColor;
+
+            & + input,
+            & + select {
+              padding-left: 2.6rem;
+            }
+          }
+
+          label {
+            display: block;
+          }
+
+          &:has(select) {
+            & > div {
+              &::after {
+                content: '';
+                display: block;
+                position: absolute;
+                top: 50%;
+                right: 12px;
+                width: 16px;
+                height: 16px;
+                margin: 0 4px;
+                margin-top: -8px;
+                background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.33333 9.24435L11.016 5.33398L12 6.3788L7.33333 11.334L2.66667 6.3788L3.65065 5.33398L7.33333 9.24435Z' fill='%233C3B39'/%3E%3C/svg%3E%0A");
+              }
+              & input,
+              & select {
+                padding-right: 2.6rem;
+              }
+            }
+          }
+
+          input,
+          textarea,
+          select {
+            ${fontSize('h5')};
+
+            border-radius: 50px;
+            border: 0;
+
+            padding: 1rem 4rem 1rem 1rem;
+            color: ${colors.third10};
+            background: ${colors.secondary50};
+            outline: none;
+            width: 100%;
+
+            border: 0;
+          }
+
+          input[type='text'] {
+            padding-right: 4rem;
+          }
+
+          input::file-selector-button {
+            font-family: inherit;
+            color: ${colors.secondary50};
+            background-color: ${colors.primary50};
+            ${fontSize('h5')};
+            padding: 0.8rem 1.6rem;
+            border-radius: 50px;
+            text-transform: uppercase;
+
+            border: 0;
+            outline: 0;
+            cursor: pointer;
+            transition: all 0.3s ease;
+
+            &:hover {
+              opacity: 0.6;
+            }
+          }
+
+          textarea {
+            border-radius: 32px;
+            height: 11.5rem;
+          }
+
+          select {
+            option {
+              color: ${colors.primary50};
+            }
+          }
+
+          //Clear search X
+          input[type='search']::-webkit-search-decoration,
+          input[type='search']::-webkit-search-cancel-button,
+          input[type='search']::-webkit-search-results-button,
+          input[type='search']::-webkit-search-results-decoration {
+            -webkit-appearance: none;
+          }
+        `
+      : `
+      & > div{
+        display: flex;
+        flex-flow: row wrap;
+        gap: 1rem;
+      }
+  `}
+
+  ::placeholder {
+    color: rbga(${colors.third10}, 0.2);
+    font-weight: 700;
+  }
+
+  ::-ms-input-placeholder {
+    /* Edge 12 -18 */
+    color: rbga(${colors.third10}, 0.2);
+    font-weight: 700;
+  }
+`

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

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

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

@@ -1,18 +1,18 @@
-import React from 'react';
-
-import { IHeading } from './Heading.interface';
-import { StyledHeading } from './Heading.theme';
-
-const Heading = ({ tag = "h3", size, className, ...props }: IHeading) => {
-  return (
-    <StyledHeading
-      as={tag}
-      size={size}
-      className={className}
-      {...props}
-    />
-  );
-};
-
-
-export default Heading;
+import React from 'react';
+
+import { IHeading } from './Heading.interface';
+import { StyledHeading } from './Heading.theme';
+
+const Heading = ({ tag = "h3", size, className, ...props }: IHeading) => {
+  return (
+    <StyledHeading
+      as={tag}
+      size={size}
+      className={className}
+      {...props}
+    />
+  );
+};
+
+
+export default Heading;

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

@@ -1,21 +1,21 @@
-import { CSSProperties } from 'react'
-
-export enum typographyTags {
-  div = 'div',
-  span = 'span',
-  p = 'p',
-  h1 = 'h1',
-  h2 = 'h2',
-  h3 = 'h3',
-  h4 = 'h4',
-  h5 = 'h5',
-  h6 = 'h6'
-}
-
-export type IHeading = React.HTMLAttributes<HTMLElement> & {
-  tag?: keyof typeof typographyTags | string
-  size?: string
-  className?: string
-  style?: React.CSSProperties
-  children?: React.ReactNode
-}
+import { CSSProperties } from 'react'
+
+export enum typographyTags {
+  div = 'div',
+  span = 'span',
+  p = 'p',
+  h1 = 'h1',
+  h2 = 'h2',
+  h3 = 'h3',
+  h4 = 'h4',
+  h5 = 'h5',
+  h6 = 'h6'
+}
+
+export type IHeading = React.HTMLAttributes<HTMLElement> & {
+  tag?: keyof typeof typographyTags | string
+  size?: string
+  className?: string
+  style?: React.CSSProperties
+  children?: React.ReactNode
+}

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

@@ -1,17 +1,17 @@
-import styled, { css } from 'styled-components';
-
-import { fontSize } from '@/styles/utilities';
-
-import { IHeading } from './Heading.interface';
-
-export const StyledHeading = styled.div<IHeading>`
-  display: block;
-
-  ${({ size }) => size && `
-    ${fontSize(size)}
-  `}
-
-  & a {
-    color: inherit
-  }
-`;
+import styled, { css } from 'styled-components';
+
+import { fontSize } from '@/styles/utilities';
+
+import { IHeading } from './Heading.interface';
+
+export const StyledHeading = styled.div<IHeading>`
+  display: block;
+
+  ${({ size }) => size && `
+    ${fontSize(size)}
+  `}
+
+  & a {
+    color: inherit
+  }
+`;

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

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

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

@@ -1,19 +1,19 @@
-import { IIcon } from './Icon.interface';
-import React from 'react';
-import { StyledIcon } from './Icon.theme';
-import cn from 'classnames';
-
-const Icon = ({ icon, className, onClick, ...props }: IIcon) => {
-  return (
-    <StyledIcon
-      className={cn(
-        icon,
-        className
-      )}
-      onClick={onClick}
-      {...props}
-    />
-  );
-};
-
-export default Icon
+import { IIcon } from './Icon.interface';
+import React from 'react';
+import { StyledIcon } from './Icon.theme';
+import cn from 'classnames';
+
+const Icon = ({ icon, className, onClick, ...props }: IIcon) => {
+  return (
+    <StyledIcon
+      className={cn(
+        icon,
+        className
+      )}
+      onClick={onClick}
+      {...props}
+    />
+  );
+};
+
+export default Icon

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

@@ -1,8 +1,8 @@
-import { CSSProperties } from 'react';
-
-export type IIcon = {
-  icon?: string,
-  className?: string,
-  style?: CSSProperties
-  onClick?: () => void
-}
+import { CSSProperties } from 'react';
+
+export type IIcon = {
+  icon?: string,
+  className?: string,
+  style?: CSSProperties
+  onClick?: () => void
+}

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

@@ -1,26 +1,26 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { IIcon } from './Icon.interface'
-import Icon from './Icon.component'
-import React from 'react'
-import { iconsList } from '@/helpers/getIcons'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/Icon',
-  component: Icon,
-  tags: ['autodocs'],
-  argTypes: {
-    icon: {
-      options: Object.values(iconsList),
-      control: 'select'
-    }
-  }
-} as Meta
-
-export const Simple: StoryObj<IIcon> = {
-  render: args => <Icon {...args} />,
-  args: {
-    icon: iconsList[0]
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { IIcon } from './Icon.interface'
+import Icon from './Icon.component'
+import React from 'react'
+import { iconsList } from '@/helpers/getIcons'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Icon',
+  component: Icon,
+  tags: ['autodocs'],
+  argTypes: {
+    icon: {
+      options: Object.values(iconsList),
+      control: 'select'
+    }
+  }
+} as Meta
+
+export const Simple: StoryObj<IIcon> = {
+  render: args => <Icon {...args} />,
+  args: {
+    icon: iconsList[0]
+  }
+}