oddsgate-ds 1.0.171 → 1.0.175

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

@@ -1,12 +1,12 @@
-import styled, { css } from 'styled-components';
-
-import { IFlexSC } from './Flex.interface';
-
-export const StyledFlex = styled.div<IFlexSC>`
-  display: flex;
-  flex-direction: ${props => props.$direction ? props.$direction : "row"};
-  align-items: ${props => props.$align ? props.$align : "center"};
-  justify-content: ${props => props.$justify ? props.$justify : "start"};
-  flex-wrap: ${props => props.$wrap ? props.$wrap : "wrap"};
-  gap: ${props => props.$gap ? props.$gap : ""};
-`;
+import styled, { css } from 'styled-components';
+
+import { IFlexSC } from './Flex.interface';
+
+export const StyledFlex = styled.div<IFlexSC>`
+  display: flex;
+  flex-direction: ${props => props.$direction ? props.$direction : "row"};
+  align-items: ${props => props.$align ? props.$align : "center"};
+  justify-content: ${props => props.$justify ? props.$justify : "start"};
+  flex-wrap: ${props => props.$wrap ? props.$wrap : "wrap"};
+  gap: ${props => props.$gap ? props.$gap : ""};
+`;

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

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

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

@@ -1,62 +1,62 @@
-import { IColumn, IRow } from './FlexGrid.interface'
-import { StyledColumn, StyledContainer, StyledRow } from './FlexGrid.theme'
-
-import React from 'react'
-
-export const Row = ({
-  fluid,
-  direction,
-  align,
-  justify,
-  wrap,
-  mobileSpace,
-  className,
-  style,
-  children,
-  ...props
-}: IRow) => {
-  return (
-    <StyledContainer $fluid={fluid} className={className} style={style}>
-      <StyledRow
-        $fluid={fluid}
-        $direction={direction}
-        $align={align}
-        $justify={justify}
-        $wrap={wrap}
-        $mobileSpace={mobileSpace}
-      >
-        {children}
-      </StyledRow>
-    </StyledContainer>
-  )
-}
-
-export const Column = ({
-  xs,
-  sm,
-  md,
-  lg,
-  align,
-  mobileOrder,
-  children,
-  className,
-  style,
-  ...props
-}: IColumn) => {
-  return (
-    <StyledColumn
-      $xs={xs}
-      $sm={sm}
-      $md={md}
-      $lg={lg}
-      $align={align}
-      $mobileOrder={mobileOrder}
-      className={className}
-      style={style}
-    >
-      {children}
-    </StyledColumn>
-  )
-}
-
-export default Row
+import { IColumn, IRow } from './FlexGrid.interface'
+import { StyledColumn, StyledContainer, StyledRow } from './FlexGrid.theme'
+
+import React from 'react'
+
+export const Row = ({
+  fluid,
+  direction,
+  align,
+  justify,
+  wrap,
+  mobileSpace,
+  className,
+  style,
+  children,
+  ...props
+}: IRow) => {
+  return (
+    <StyledContainer $fluid={fluid} className={className} style={style}>
+      <StyledRow
+        $fluid={fluid}
+        $direction={direction}
+        $align={align}
+        $justify={justify}
+        $wrap={wrap}
+        $mobileSpace={mobileSpace}
+      >
+        {children}
+      </StyledRow>
+    </StyledContainer>
+  )
+}
+
+export const Column = ({
+  xs,
+  sm,
+  md,
+  lg,
+  align,
+  mobileOrder,
+  children,
+  className,
+  style,
+  ...props
+}: IColumn) => {
+  return (
+    <StyledColumn
+      $xs={xs}
+      $sm={sm}
+      $md={md}
+      $lg={lg}
+      $align={align}
+      $mobileOrder={mobileOrder}
+      className={className}
+      style={style}
+    >
+      {children}
+    </StyledColumn>
+  )
+}
+
+export default Row

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

@@ -1,55 +1,55 @@
-import { flexAlign, flexJustify } from '../Flex/Flex.interface';
-
-import { CSSProperties } from 'react';
-
-export interface IRowBase {
-  className?: string,
-  style?: CSSProperties
-  children?: React.ReactNode
-}
-export interface IRow extends IRowBase {
-  fluid?: boolean,
-  direction?: 'row' | 'column',
-  align?: flexAlign,
-  justify?: flexJustify,
-  wrap?: 'wrap' | 'nowrap',
-  mobileSpace?: boolean
-}
-export interface IRowSC extends IRowBase {
-  $fluid?: boolean,
-  $direction?: 'row' | 'column',
-  $align?: flexAlign,
-  $justify?: flexJustify,
-  $wrap?: 'wrap' | 'nowrap',
-  $mobileSpace?: boolean
-}
-
-export type IColumnsSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | number;
-
-export interface IColumnBase {
-  className?: string,
-  style?: CSSProperties
-  children?: React.ReactNode
-}
-
-export interface IColumnSC extends IColumnBase {
-  $align?: flexAlign,
-  $lg?: IColumnsSize
-  $md?: IColumnsSize
-  $sm?: IColumnsSize
-  $xs?: IColumnsSize
-  $mobileOrder?: number
-}
-
-export interface IColumn extends IColumnBase {
-  align?: flexAlign,
-  lg?: IColumnsSize
-  md?: IColumnsSize
-  sm?: IColumnsSize
-  xs?: IColumnsSize
-  mobileOrder?: number
-}
-
-
-export type Flex = IRow
-
+import { flexAlign, flexJustify } from '../Flex/Flex.interface';
+
+import { CSSProperties } from 'react';
+
+export interface IRowBase {
+  className?: string,
+  style?: CSSProperties
+  children?: React.ReactNode
+}
+export interface IRow extends IRowBase {
+  fluid?: boolean,
+  direction?: 'row' | 'column',
+  align?: flexAlign,
+  justify?: flexJustify,
+  wrap?: 'wrap' | 'nowrap',
+  mobileSpace?: boolean
+}
+export interface IRowSC extends IRowBase {
+  $fluid?: boolean,
+  $direction?: 'row' | 'column',
+  $align?: flexAlign,
+  $justify?: flexJustify,
+  $wrap?: 'wrap' | 'nowrap',
+  $mobileSpace?: boolean
+}
+
+export type IColumnsSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | number;
+
+export interface IColumnBase {
+  className?: string,
+  style?: CSSProperties
+  children?: React.ReactNode
+}
+
+export interface IColumnSC extends IColumnBase {
+  $align?: flexAlign,
+  $lg?: IColumnsSize
+  $md?: IColumnsSize
+  $sm?: IColumnsSize
+  $xs?: IColumnsSize
+  $mobileOrder?: number
+}
+
+export interface IColumn extends IColumnBase {
+  align?: flexAlign,
+  lg?: IColumnsSize
+  md?: IColumnsSize
+  sm?: IColumnsSize
+  xs?: IColumnsSize
+  mobileOrder?: number
+}
+
+
+export type Flex = IRow
+

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

@@ -1,59 +1,59 @@
-import { Column, Row } from './FlexGrid.component'
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { IRow } from './FlexGrid.interface'
-import React from 'react'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/FlexGrid',
-  component: Row,
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
-  argTypes: {}
-} as Meta
-
-export const Simple: StoryObj<IRow> = {
-  render: args => (
-    <Row {...args}>
-      <Column md={8} lg={10}>
-        Column sm-6 md-8 lg-10
-      </Column>
-      <Column md={4} lg={2}>
-        Column sm-6 md-4 lg-2
-      </Column>
-    </Row>
-  ),
-  args: {
-    mobileSpace: true,
-  }
-}
-export const Fluid: StoryObj<IRow> = {
-  render: args => (
-    <Row {...args}>
-      <Column md={8}>Column sm-6 md-8 lg-10</Column>
-      <Column md={4}>Column sm-6 md-4 lg-2</Column>
-    </Row>
-  ),
-  args: {
-    mobileSpace: true,
-    fluid: true
-  }
-}
-
-export const Order: StoryObj<IRow> = {
-  render: args => (
-    <Row {...args}>
-      <Column md={8} mobileOrder={2}>
-        mobile order 2
-      </Column>
-      <Column md={4} mobileOrder={1}>
-        mobile order 1
-      </Column>
-    </Row>
-  ),
-  args: {
-    mobileSpace: true,
-    fluid: true
-  }
-}
+import { Column, Row } from './FlexGrid.component'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { IRow } from './FlexGrid.interface'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/FlexGrid',
+  component: Row,
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {}
+} as Meta
+
+export const Simple: StoryObj<IRow> = {
+  render: args => (
+    <Row {...args}>
+      <Column md={8} lg={10}>
+        Column sm-6 md-8 lg-10
+      </Column>
+      <Column md={4} lg={2}>
+        Column sm-6 md-4 lg-2
+      </Column>
+    </Row>
+  ),
+  args: {
+    mobileSpace: true,
+  }
+}
+export const Fluid: StoryObj<IRow> = {
+  render: args => (
+    <Row {...args}>
+      <Column md={8}>Column sm-6 md-8 lg-10</Column>
+      <Column md={4}>Column sm-6 md-4 lg-2</Column>
+    </Row>
+  ),
+  args: {
+    mobileSpace: true,
+    fluid: true
+  }
+}
+
+export const Order: StoryObj<IRow> = {
+  render: args => (
+    <Row {...args}>
+      <Column md={8} mobileOrder={2}>
+        mobile order 2
+      </Column>
+      <Column md={4} mobileOrder={1}>
+        mobile order 1
+      </Column>
+    </Row>
+  ),
+  args: {
+    mobileSpace: true,
+    fluid: true
+  }
+}

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

@@ -1,82 +1,82 @@
-// @ts-nocheck
-/* eslint-disable */
-
-import { IColumnSC, IRowSC } from './FlexGrid.interface';
-import config, { CONTAINER_NAMES, DIMENSION_NAMES } from '@/styles/grid';
-import { grid_conf, gutter, responsiveMedia, responsiveMediaMax, spaces } from '@/styles/variables';
-import styled, { css } from 'styled-components';
-
-export const StyledContainer = styled.div<IRowSC>`
-  position: relative;
-  width: 100%;
-  margin-right: auto;
-  margin-left: auto;
-
-  padding-right: ${props => props.$fluid ? "0" : `1rem`};
-  padding-left: ${props => props.$fluid ? "0" : `1rem`};
-  z-index: 1;
-
-
-  ${props => !props.$fluid && Object.keys(CONTAINER_NAMES)
-    .sort((k1, k2) => CONTAINER_NAMES.indexOf(k1) - CONTAINER_NAMES.indexOf(k2))
-    .map(k => config(CONTAINER_NAMES).mediaContainer[CONTAINER_NAMES[k]]`
-      max-width: ${grid_conf.container[CONTAINER_NAMES[k]]};
-    `)}
-
-`
-
-export const StyledRow = styled.div<IRowSC>`
-  display: flex;
-  flex-direction: ${props => props.$direction ? props.$direction : "row"};
-  align-items: ${props => props.$align ? props.$align : "stretch"};
-  justify-content: ${props => props.$justify ? props.$justify : "flex-start"};
-  flex-wrap: ${props => props.$wrap ? props.$wrap : "wrap"};
-
-  margin-left: ${props => props.$fluid ? "0" : `-${gutter}`};
-  margin-right: ${props => props.$fluid ? "0" : `-${gutter}`};
-
-  @media only screen and (max-width: ${responsiveMediaMax}) {
-     ${({ $mobileSpace }) => $mobileSpace && `
-      gap: 1.6rem 0;
-    `}
-  }
-`;
-
-export const StyledColumn = styled.div<IColumnSC>`
-  width: 100%;
-  padding-right: ${gutter};
-  padding-left: ${gutter};
-
-  ${({ $align }) => $align && `
-    align-self: ${$align};
-  `}
-
-  ${({ $xs }) => $xs && `
-    flex-basis: ${100 / grid_conf.gridSize * $xs}%;
-    max-width: ${100 / grid_conf.gridSize * $xs}%;
-  `}
-
-  ${props => Object.keys(props)
-    .filter(k => ~DIMENSION_NAMES.indexOf(k))
-    .sort((k1, k2) => DIMENSION_NAMES.indexOf(k1) - DIMENSION_NAMES.indexOf(k2))
-    .map(k => config(props).media[k]`${Number.isInteger(props[k])
-
-      // Integer value
-      && `
-        flex-basis: ${100 / config(props).gridSize * props[k]}%;
-        max-width: ${100 / config(props).gridSize * props[k]}%;
-      `}
-    `)
-  }
-
-  @media only screen and (max-width: ${responsiveMediaMax}) {
-    &:empty{
-      display:none
-    }
-    ${({ $mobileOrder }) => $mobileOrder && `
-      order: ${$mobileOrder};
-    `}
-  }
-`;
-
-
+// @ts-nocheck
+/* eslint-disable */
+
+import { IColumnSC, IRowSC } from './FlexGrid.interface';
+import config, { CONTAINER_NAMES, DIMENSION_NAMES } from '@/styles/grid';
+import { grid_conf, gutter, responsiveMedia, responsiveMediaMax, spaces } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+export const StyledContainer = styled.div<IRowSC>`
+  position: relative;
+  width: 100%;
+  margin-right: auto;
+  margin-left: auto;
+
+  padding-right: ${props => props.$fluid ? "0" : `1rem`};
+  padding-left: ${props => props.$fluid ? "0" : `1rem`};
+  z-index: 1;
+
+
+  ${props => !props.$fluid && Object.keys(CONTAINER_NAMES)
+    .sort((k1, k2) => CONTAINER_NAMES.indexOf(k1) - CONTAINER_NAMES.indexOf(k2))
+    .map(k => config(CONTAINER_NAMES).mediaContainer[CONTAINER_NAMES[k]]`
+      max-width: ${grid_conf.container[CONTAINER_NAMES[k]]};
+    `)}
+
+`
+
+export const StyledRow = styled.div<IRowSC>`
+  display: flex;
+  flex-direction: ${props => props.$direction ? props.$direction : "row"};
+  align-items: ${props => props.$align ? props.$align : "stretch"};
+  justify-content: ${props => props.$justify ? props.$justify : "flex-start"};
+  flex-wrap: ${props => props.$wrap ? props.$wrap : "wrap"};
+
+  margin-left: ${props => props.$fluid ? "0" : `-${gutter}`};
+  margin-right: ${props => props.$fluid ? "0" : `-${gutter}`};
+
+  @media only screen and (max-width: ${responsiveMediaMax}) {
+     ${({ $mobileSpace }) => $mobileSpace && `
+      gap: 1.6rem 0;
+    `}
+  }
+`;
+
+export const StyledColumn = styled.div<IColumnSC>`
+  width: 100%;
+  padding-right: ${gutter};
+  padding-left: ${gutter};
+
+  ${({ $align }) => $align && `
+    align-self: ${$align};
+  `}
+
+  ${({ $xs }) => $xs && `
+    flex-basis: ${100 / grid_conf.gridSize * $xs}%;
+    max-width: ${100 / grid_conf.gridSize * $xs}%;
+  `}
+
+  ${props => Object.keys(props)
+    .filter(k => ~DIMENSION_NAMES.indexOf(k))
+    .sort((k1, k2) => DIMENSION_NAMES.indexOf(k1) - DIMENSION_NAMES.indexOf(k2))
+    .map(k => config(props).media[k]`${Number.isInteger(props[k])
+
+      // Integer value
+      && `
+        flex-basis: ${100 / config(props).gridSize * props[k]}%;
+        max-width: ${100 / config(props).gridSize * props[k]}%;
+      `}
+    `)
+  }
+
+  @media only screen and (max-width: ${responsiveMediaMax}) {
+    &:empty{
+      display:none
+    }
+    ${({ $mobileOrder }) => $mobileOrder && `
+      order: ${$mobileOrder};
+    `}
+  }
+`;
+
+

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

@@ -1 +1 @@
-export { Column, Row } from './FlexGrid.component'
+export { Column, Row } from './FlexGrid.component'

package/src/components/atoms/FormField/CheckRadioField/CheckRadioField.component.tsx

@@ -1,24 +1,24 @@
-import React from 'react'
-
-import { ICheckRadioField } from './CheckRadioField.interface'
-import { StyledCheckRadioField } from './CheckRadioField.theme'
-import RichText from '../../RichText/RichText.component'
-
-const CheckRadioField = ({
-  id,
-  label,
-  className,
-  children,
-  ...props
-}: ICheckRadioField) => {
-  return (
-    <StyledCheckRadioField>
-      {children}
-      <label htmlFor={id}>
-        <RichText tag="p">{label}</RichText>
-      </label>
-    </StyledCheckRadioField>
-  )
-}
-
-export default CheckRadioField
+import React from 'react'
+
+import { ICheckRadioField } from './CheckRadioField.interface'
+import { StyledCheckRadioField } from './CheckRadioField.theme'
+import RichText from '../../RichText/RichText.component'
+
+const CheckRadioField = ({
+  id,
+  label,
+  className,
+  children,
+  ...props
+}: ICheckRadioField) => {
+  return (
+    <StyledCheckRadioField>
+      {children}
+      <label htmlFor={id}>
+        <RichText tag="p">{label}</RichText>
+      </label>
+    </StyledCheckRadioField>
+  )
+}
+
+export default CheckRadioField

package/src/components/atoms/FormField/CheckRadioField/CheckRadioField.interface.tsx

@@ -1,6 +1,6 @@
-export type ICheckRadioField = {
-  id?: string
-  label?: string
-  className?: string
-  children?: React.ReactNode
-}
+export type ICheckRadioField = {
+  id?: string
+  label?: string
+  className?: string
+  children?: React.ReactNode
+}