oddsgate-ds 1.0.174 → 1.0.176

package/src/components/molecules/OffCanvas/OffCanvas.theme.ts

@@ -1,50 +1,50 @@
-import { colors, responsiveMediaMax } from '@/styles/variables';
-import styled, { css } from 'styled-components';
-
-import { IOffCanvas } from './OffCanvas.interface';
-
-export const StyledOffCanvas = styled.div<IOffCanvas>`
-  display: none;
-  @media only screen and (max-width: ${responsiveMediaMax}) {
-    display: block !important;
-    position: fixed;
-    top: 0px;
-    left: 0;
-
-    width: 100%;
-    height: 100vh;
-
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-    background-color: rgba(0,0,0,0.6);
-    transition: all 0.3s linear;
-    z-index: 10;
-
-    & > div{
-      flex-flow: row wrap;
-      width: 100%;
-      max-width: 90%;
-      background: ${colors.white};
-      padding: 22px;
-      padding-top: 70px;
-
-      transform: translateX(-100%);
-      transition: transform 0.15s ease-in-out;
-      overflow: auto;
-      z-index: 1000;
-    }
-
-    ${({ $isOpen }) =>
-    $isOpen &&
-    css`
-        opacity:1;
-        visibility: visible;
-        pointer-events: all;
-
-        & > div{
-          transform: translateY(0%);
-        }
-    `}
-  }
-`;
+import { colors, responsiveMediaMax } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { IOffCanvas } from './OffCanvas.interface';
+
+export const StyledOffCanvas = styled.div<IOffCanvas>`
+  display: none;
+  @media only screen and (max-width: ${responsiveMediaMax}) {
+    display: block !important;
+    position: fixed;
+    top: 0px;
+    left: 0;
+
+    width: 100%;
+    height: 100vh;
+
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    background-color: rgba(0,0,0,0.6);
+    transition: all 0.3s linear;
+    z-index: 10;
+
+    & > div{
+      flex-flow: row wrap;
+      width: 100%;
+      max-width: 90%;
+      background: ${colors.white};
+      padding: 22px;
+      padding-top: 70px;
+
+      transform: translateX(-100%);
+      transition: transform 0.15s ease-in-out;
+      overflow: auto;
+      z-index: 1000;
+    }
+
+    ${({ $isOpen }) =>
+    $isOpen &&
+    css`
+        opacity:1;
+        visibility: visible;
+        pointer-events: all;
+
+        & > div{
+          transform: translateY(0%);
+        }
+    `}
+  }
+`;

package/src/components/molecules/OffCanvas/index.ts

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

package/src/components/molecules/ProductCard/ProductCard.component.tsx

@@ -1,60 +1,60 @@
-import {
-  StyledProductCard,
-  StyledProductCardWrapper
-} from './ProductCard.theme'
-
-import Heading from '@/components/atoms/Heading'
-import { IProductCard } from './ProductCard.interface'
-import ImageWrapper from '@/components/atoms/ImageWrapper'
-import React from 'react'
-import RichText from '@/components/atoms/RichText/RichText.component'
-
-const ProductCard = ({
-  title,
-  imageElement,
-  linkElement,
-  description,
-  className,
-  style,
-  ...props
-}: IProductCard) => {
-  const parts = title ? title.split(' ') : []
-  const half = parts ? parts.length / 2 : 0
-
-  // const firstRowTitle = Array.prototype.join.call({
-  //   ...parts,
-  //   length: half,
-  // }, " ");
-  let firstRowTitle
-  let secondRowTitle
-
-  if (parts.length > 1) {
-    firstRowTitle = parts.slice(0, half).join(' ')
-    secondRowTitle = parts.slice(half, parts?.length).join(' ')
-  } else {
-    firstRowTitle = title
-  }
-
-  return (
-    <StyledProductCard className={className} style={style}>
-      <StyledProductCardWrapper>
-        <Heading tag={'h3'} size={'h3'} className={'fw-bold'}>
-          &nbsp;{firstRowTitle}&nbsp;
-        </Heading>
-        {imageElement}
-        <Heading tag={'h3'} size={'h3'} className={'fw-bold'}>
-          &nbsp;{secondRowTitle}&nbsp;
-        </Heading>
-      </StyledProductCardWrapper>
-      {description && (
-        <RichText tag="p" className="color-secondary50 mt-8">
-          {description}
-        </RichText>
-      )}
-
-      {linkElement}
-    </StyledProductCard>
-  )
-}
-
-export default ProductCard
+import {
+  StyledProductCard,
+  StyledProductCardWrapper
+} from './ProductCard.theme'
+
+import Heading from '@/components/atoms/Heading'
+import { IProductCard } from './ProductCard.interface'
+import ImageWrapper from '@/components/atoms/ImageWrapper'
+import React from 'react'
+import RichText from '@/components/atoms/RichText/RichText.component'
+
+const ProductCard = ({
+  title,
+  imageElement,
+  linkElement,
+  description,
+  className,
+  style,
+  ...props
+}: IProductCard) => {
+  const parts = title ? title.split(' ') : []
+  const half = parts ? parts.length / 2 : 0
+
+  // const firstRowTitle = Array.prototype.join.call({
+  //   ...parts,
+  //   length: half,
+  // }, " ");
+  let firstRowTitle
+  let secondRowTitle
+
+  if (parts.length > 1) {
+    firstRowTitle = parts.slice(0, half).join(' ')
+    secondRowTitle = parts.slice(half, parts?.length).join(' ')
+  } else {
+    firstRowTitle = title
+  }
+
+  return (
+    <StyledProductCard className={className} style={style}>
+      <StyledProductCardWrapper>
+        <Heading tag={'h3'} size={'h3'} className={'fw-bold'}>
+          &nbsp;{firstRowTitle}&nbsp;
+        </Heading>
+        {imageElement}
+        <Heading tag={'h3'} size={'h3'} className={'fw-bold'}>
+          &nbsp;{secondRowTitle}&nbsp;
+        </Heading>
+      </StyledProductCardWrapper>
+      {description && (
+        <RichText tag="p" className="color-secondary50 mt-8">
+          {description}
+        </RichText>
+      )}
+
+      {linkElement}
+    </StyledProductCard>
+  )
+}
+
+export default ProductCard

package/src/components/molecules/ProductCard/ProductCard.interface.ts

@@ -1,7 +1,7 @@
-import { ICard } from '../Card/Card.interface';
-
-export interface IProductCard extends ICard {
-  title?: string
-  description?: string | React.ReactElement
-  linkElement?: React.ReactElement
-}
+import { ICard } from '../Card/Card.interface';
+
+export interface IProductCard extends ICard {
+  title?: string
+  description?: string | React.ReactElement
+  linkElement?: React.ReactElement
+}

package/src/components/molecules/ProductCard/ProductCard.stories.tsx

@@ -1,42 +1,42 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { IProductCard } from './ProductCard.interface'
-import ProductCard from './ProductCard.component'
-import React from 'react'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/ProductCard',
-  component: ProductCard,
-  tags: ['autodocs']
-} as Meta
-
-const image = (
-  <img
-    width="100%"
-    height="100%"
-    sizes="100vw"
-    decoding="async"
-    src="/assets/placeholder.png"
-    alt="Empty state"
-  />
-)
-
-export const Simple: StoryObj<IProductCard> = {
-  render: args => (
-    <>
-      <ProductCard
-        {...args}
-        title="Lorem"
-        style={{ maxWidth: '320px' }}
-      ></ProductCard>
-      <ProductCard {...args} style={{ maxWidth: '320px' }}></ProductCard>
-    </>
-  ),
-  args: {
-    title: 'Cras vel facilisis tellus',
-    imageElement: image,
-    description:
-      'Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique. Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique.'
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { IProductCard } from './ProductCard.interface'
+import ProductCard from './ProductCard.component'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/ProductCard',
+  component: ProductCard,
+  tags: ['autodocs']
+} as Meta
+
+const image = (
+  <img
+    width="100%"
+    height="100%"
+    sizes="100vw"
+    decoding="async"
+    src="/assets/placeholder.png"
+    alt="Empty state"
+  />
+)
+
+export const Simple: StoryObj<IProductCard> = {
+  render: args => (
+    <>
+      <ProductCard
+        {...args}
+        title="Lorem"
+        style={{ maxWidth: '320px' }}
+      ></ProductCard>
+      <ProductCard {...args} style={{ maxWidth: '320px' }}></ProductCard>
+    </>
+  ),
+  args: {
+    title: 'Cras vel facilisis tellus',
+    imageElement: image,
+    description:
+      'Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique. Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique.'
+  }
+}

package/src/components/molecules/ProductCard/ProductCard.theme.ts

@@ -1,26 +1,26 @@
-import { colors, radius } from '@/styles/variables';
-import styled, { css } from 'styled-components';
-
-import { IProductCard } from './ProductCard.interface';
-
-export const StyledProductCard = styled.div <IProductCard>`
-  text-align:center;
-
-  & img{
-    width: 100%;
-    max-width: 8rem;
-    object-fit: contain;
-  }
-`;
-
-export const StyledProductCardWrapper = styled.div<IProductCard>`
-  display:flex;
-  flex-flow:column;
-  align-items: center;
-  justify-content: center;
-  gap: 1.5rem;
-  background-color: ${colors.primary50};
-  padding: 3rem 2rem;
-  border-radius: 0 ${radius.lg};
-  aspect-ratio: 0.89/1;
-`;
+import { colors, radius } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { IProductCard } from './ProductCard.interface';
+
+export const StyledProductCard = styled.div <IProductCard>`
+  text-align:center;
+
+  & img{
+    width: 100%;
+    max-width: 8rem;
+    object-fit: contain;
+  }
+`;
+
+export const StyledProductCardWrapper = styled.div<IProductCard>`
+  display:flex;
+  flex-flow:column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  background-color: ${colors.primary50};
+  padding: 3rem 2rem;
+  border-radius: 0 ${radius.lg};
+  aspect-ratio: 0.89/1;
+`;

package/src/components/molecules/ProductCard/index.ts

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