oddsgate-ds 1.0.169 → 1.0.174

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

@@ -1,58 +1,58 @@
-import { IAccordion, IAccordionItem } from './Accordion.interface'
-import React, { useRef, useState } from 'react'
-import {
-  StyledAccordion,
-  StyledAccordionContent,
-  StyledAccordionItem,
-  StyledAccordionTitle
-} from './Accordion.theme'
-
-import Icon from '@/components/atoms/Icon/Icon.component'
-import Separator from '@/components/atoms/Separator/Separator.component'
-
-export const Accordion = ({ className, style, children }: IAccordion) => {
-  return (
-    <StyledAccordion className={className} style={style}>
-      {children}
-    </StyledAccordion>
-  )
-}
-
-export const AccordionItem = ({
-  title,
-  className,
-  style,
-  children
-}: IAccordionItem) => {
-  const [active, setActive] = useState(false)
-  const contentEl = useRef<HTMLInputElement>(null)
-
-  return (
-    <StyledAccordionItem
-      active={active ? true : undefined}
-      className={className}
-      style={style}
-    >
-      <StyledAccordionTitle
-        className={`h4 fw-bold`}
-        onClick={() => {
-          setActive(!active)
-        }}
-      >
-        <span>{title}</span>
-        <Icon className={active ? 'icon-arrowDown' : 'icon-arrowUp'} />
-      </StyledAccordionTitle>
-      <StyledAccordionContent
-        ref={contentEl}
-        style={
-          active
-            ? { height: contentEl?.current?.scrollHeight }
-            : { height: '0px' }
-        }
-      >
-        <Separator height="1rem"></Separator>
-        {children}
-      </StyledAccordionContent>
-    </StyledAccordionItem>
-  )
-}
+import { IAccordion, IAccordionItem } from './Accordion.interface'
+import React, { useRef, useState } from 'react'
+import {
+  StyledAccordion,
+  StyledAccordionContent,
+  StyledAccordionItem,
+  StyledAccordionTitle
+} from './Accordion.theme'
+
+import Icon from '@/components/atoms/Icon/Icon.component'
+import Separator from '@/components/atoms/Separator/Separator.component'
+
+export const Accordion = ({ className, style, children }: IAccordion) => {
+  return (
+    <StyledAccordion className={className} style={style}>
+      {children}
+    </StyledAccordion>
+  )
+}
+
+export const AccordionItem = ({
+  title,
+  className,
+  style,
+  children
+}: IAccordionItem) => {
+  const [active, setActive] = useState(false)
+  const contentEl = useRef<HTMLInputElement>(null)
+
+  return (
+    <StyledAccordionItem
+      active={active ? true : undefined}
+      className={className}
+      style={style}
+    >
+      <StyledAccordionTitle
+        className={`h4 fw-bold`}
+        onClick={() => {
+          setActive(!active)
+        }}
+      >
+        <span>{title}</span>
+        <Icon className={active ? 'icon-arrowDown' : 'icon-arrowUp'} />
+      </StyledAccordionTitle>
+      <StyledAccordionContent
+        ref={contentEl}
+        style={
+          active
+            ? { height: contentEl?.current?.scrollHeight }
+            : { height: '0px' }
+        }
+      >
+        <Separator height="1rem"></Separator>
+        {children}
+      </StyledAccordionContent>
+    </StyledAccordionItem>
+  )
+}

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

@@ -1,15 +1,15 @@
-import { CSSProperties } from 'react';
-
-export interface IAccordion {
-  className?: string
-  style?: CSSProperties
-  children?: React.ReactNode;
-}
-
-export interface IAccordionItem {
-  active?: boolean
-  title?: string
-  className?: string
-  style?: CSSProperties
-  children?: React.ReactNode;
-}
+import { CSSProperties } from 'react';
+
+export interface IAccordion {
+  className?: string
+  style?: CSSProperties
+  children?: React.ReactNode;
+}
+
+export interface IAccordionItem {
+  active?: boolean
+  title?: string
+  className?: string
+  style?: CSSProperties
+  children?: React.ReactNode;
+}

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

@@ -1,100 +1,100 @@
-import { Accordion, AccordionItem } from './Accordion.component'
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { IAccordion } from './Accordion.interface'
-import React from 'react'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/Accordion',
-  component: Accordion,
-  tags: ['autodocs']
-} as Meta
-
-export const Simple: StoryObj<IAccordion> = {
-  render: args => (
-    <Accordion {...args}>
-      <AccordionItem title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-        <p>
-          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
-        </p>
-      </AccordionItem>
-      <AccordionItem title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-        <p>
-          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
-        </p>
-      </AccordionItem>
-      <AccordionItem title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-        <p>
-          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
-        </p>
-      </AccordionItem>
-      <AccordionItem title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-        <p>
-          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
-        </p>
-      </AccordionItem>
-      <AccordionItem title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-        <p>
-          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
-        </p>
-      </AccordionItem>
-      <AccordionItem title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-        <p>
-          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
-        </p>
-      </AccordionItem>
-      <AccordionItem title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-        <p>
-          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
-        </p>
-      </AccordionItem>
-      <AccordionItem title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-        <p>
-          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
-        </p>
-      </AccordionItem>
-      <AccordionItem title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-        <p>
-          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
-        </p>
-      </AccordionItem>
-      <AccordionItem title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-        <p>
-          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
-        </p>
-      </AccordionItem>
-    </Accordion>
-  ),
-  args: {}
-}
+import { Accordion, AccordionItem } from './Accordion.component'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { IAccordion } from './Accordion.interface'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Accordion',
+  component: Accordion,
+  tags: ['autodocs']
+} as Meta
+
+export const Simple: StoryObj<IAccordion> = {
+  render: args => (
+    <Accordion {...args}>
+      <AccordionItem title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+        <p>
+          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
+        </p>
+      </AccordionItem>
+      <AccordionItem title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+        <p>
+          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
+        </p>
+      </AccordionItem>
+      <AccordionItem title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+        <p>
+          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
+        </p>
+      </AccordionItem>
+      <AccordionItem title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+        <p>
+          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
+        </p>
+      </AccordionItem>
+      <AccordionItem title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+        <p>
+          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
+        </p>
+      </AccordionItem>
+      <AccordionItem title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+        <p>
+          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
+        </p>
+      </AccordionItem>
+      <AccordionItem title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+        <p>
+          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
+        </p>
+      </AccordionItem>
+      <AccordionItem title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+        <p>
+          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
+        </p>
+      </AccordionItem>
+      <AccordionItem title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+        <p>
+          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
+        </p>
+      </AccordionItem>
+      <AccordionItem title="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+        <p>
+          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
+        </p>
+      </AccordionItem>
+    </Accordion>
+  ),
+  args: {}
+}

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

@@ -1,93 +1,93 @@
-import { IAccordion, IAccordionItem } from './Accordion.interface';
-import { colors, easeOutExpo, responsiveMedia, responsiveMediaMax } from '@/styles/variables';
-import styled, { css } from 'styled-components';
-
-export const StyledAccordionTitle = styled.span<IAccordionItem>`
-  display: block;
-  position: relative;
-
-  padding-right: 6rem;
-
-  cursor: pointer;
-  transition: font-weight .4s ease-in-out;
-
-  & i {
-    position: absolute;
-    top: 50%;
-    right: 8px;
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    width: 4rem;
-    height: 4rem;
-    border-radius: 100%;
-
-
-    font-size: 1.2rem;
-    color: ${colors.secondary50};
-    background: ${colors.third10};
-
-    transform: translateY(-50%);
-    transform-origin: center;
-
-    transition: all 0.6s ${easeOutExpo};
-  }
-
-`
-
-export const StyledAccordionContent = styled.div<IAccordionItem>`
-  position: relative;
-  display: grid;
-  grid-template-rows: 0fr;
-  overflow: hidden;
-  transition: all 0.5s linear;
-
-  ${({ active }) => active && `
-    grid-template-rows: 1fr;
-  `}
-
-  @media only screen and (max-width: ${responsiveMediaMax}) {
-    padding-right: 6rem;
-  }
-`
-
-export const StyledAccordionItem = styled.li<IAccordionItem>`
-  position: relative;
-  width: 100%;
-  padding: 2rem 2.4rem;
-  border-radius: 50px;
-  color: ${colors.third50};
-  background-color: ${colors.secondary50};
-  margin-bottom: 1rem;
-  transition: all 0.6s ${easeOutExpo};
-
-  &:hover{
-    color: ${colors.primary50};
-    & ${StyledAccordionTitle} {
-      i{
-        background: ${colors.primary50};
-      }
-    }
-  }
-
-  ${({ active }) => active && `
-    color: ${colors.third10};
-    & ${StyledAccordionTitle} {
-      i{
-        background: ${colors.third10};
-      }
-    }
-  `}
-
-`
-
-export const StyledAccordion = styled.ul<IAccordion>`
-  display: block;
-	text-align: left;
-	margin: auto;
-	list-style: none;
-	padding: 0;
-`;
-
+import { IAccordion, IAccordionItem } from './Accordion.interface';
+import { colors, easeOutExpo, responsiveMedia, responsiveMediaMax } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+export const StyledAccordionTitle = styled.span<IAccordionItem>`
+  display: block;
+  position: relative;
+
+  padding-right: 6rem;
+
+  cursor: pointer;
+  transition: font-weight .4s ease-in-out;
+
+  & i {
+    position: absolute;
+    top: 50%;
+    right: 8px;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 4rem;
+    height: 4rem;
+    border-radius: 100%;
+
+
+    font-size: 1.2rem;
+    color: ${colors.secondary50};
+    background: ${colors.third10};
+
+    transform: translateY(-50%);
+    transform-origin: center;
+
+    transition: all 0.6s ${easeOutExpo};
+  }
+
+`
+
+export const StyledAccordionContent = styled.div<IAccordionItem>`
+  position: relative;
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  transition: all 0.5s linear;
+
+  ${({ active }) => active && `
+    grid-template-rows: 1fr;
+  `}
+
+  @media only screen and (max-width: ${responsiveMediaMax}) {
+    padding-right: 6rem;
+  }
+`
+
+export const StyledAccordionItem = styled.li<IAccordionItem>`
+  position: relative;
+  width: 100%;
+  padding: 2rem 2.4rem;
+  border-radius: 50px;
+  color: ${colors.third50};
+  background-color: ${colors.secondary50};
+  margin-bottom: 1rem;
+  transition: all 0.6s ${easeOutExpo};
+
+  &:hover{
+    color: ${colors.primary50};
+    & ${StyledAccordionTitle} {
+      i{
+        background: ${colors.primary50};
+      }
+    }
+  }
+
+  ${({ active }) => active && `
+    color: ${colors.third10};
+    & ${StyledAccordionTitle} {
+      i{
+        background: ${colors.third10};
+      }
+    }
+  `}
+
+`
+
+export const StyledAccordion = styled.ul<IAccordion>`
+  display: block;
+	text-align: left;
+	margin: auto;
+	list-style: none;
+	padding: 0;
+`;
+

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

@@ -1 +1 @@
-export { Accordion, AccordionItem } from './Accordion.component'
+export { Accordion, AccordionItem } from './Accordion.component'

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

@@ -1,48 +1,48 @@
-import Chip from '@/components/atoms/Chip/Chip.component'
-import Heading from '@/components/atoms/Heading'
-import { IBlogCard } from './BlogCard.interface'
-import Icon from '@/components/atoms/Icon/Icon.component'
-import ImageWrapper from '@/components/atoms/ImageWrapper'
-import React from 'react'
-import RichText from '@/components/atoms/RichText/RichText.component'
-import { StyledBlogCard } from './BlogCard.theme'
-
-const BlogCard = ({
-  variant,
-  date,
-  category,
-  title,
-  imageElement,
-  linkElement,
-  description,
-  author,
-  ...props
-}: IBlogCard) => {
-  return (
-    <StyledBlogCard
-      variant={variant}
-      imageElement={
-        <>
-          {category && <Chip variant='light' className='font-epilogue'>{category}</Chip>}
-          <ImageWrapper aspectRatioHeight={63}>{imageElement}</ImageWrapper>
-        </>
-      }
-    >
-      <Heading tag={'h3'} size={'h4'} className={'fw-bold textEllipsis'}>
-        {title}
-      </Heading>
-      <Heading tag={'span'} size={'captions'} className={'textEllipsis mt-3'}>
-        {description}
-      </Heading>
-      {date && (
-        <RichText tag={'span'} className="d-block fw-bold mt-4">
-          {date}
-        </RichText>
-      )}
-
-      {linkElement}
-    </StyledBlogCard>
-  )
-}
-
-export default BlogCard
+import Chip from '@/components/atoms/Chip/Chip.component'
+import Heading from '@/components/atoms/Heading'
+import { IBlogCard } from './BlogCard.interface'
+import Icon from '@/components/atoms/Icon/Icon.component'
+import ImageWrapper from '@/components/atoms/ImageWrapper'
+import React from 'react'
+import RichText from '@/components/atoms/RichText/RichText.component'
+import { StyledBlogCard } from './BlogCard.theme'
+
+const BlogCard = ({
+  variant,
+  date,
+  category,
+  title,
+  imageElement,
+  linkElement,
+  description,
+  author,
+  ...props
+}: IBlogCard) => {
+  return (
+    <StyledBlogCard
+      variant={variant}
+      imageElement={
+        <>
+          {category && <Chip variant='light' className='font-epilogue'>{category}</Chip>}
+          <ImageWrapper aspectRatioHeight={63}>{imageElement}</ImageWrapper>
+        </>
+      }
+    >
+      <Heading tag={'h3'} size={'h4'} className={'fw-bold textEllipsis'}>
+        {title}
+      </Heading>
+      <Heading tag={'span'} size={'captions'} className={'textEllipsis mt-3'}>
+        {description}
+      </Heading>
+      {date && (
+        <RichText tag={'span'} className="d-block fw-bold mt-4">
+          {date}
+        </RichText>
+      )}
+
+      {linkElement}
+    </StyledBlogCard>
+  )
+}
+
+export default BlogCard

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

@@ -1,10 +1,10 @@
-import { ICard } from '../Card/Card.interface';
-
-export interface IBlogCard extends ICard {
-  date?: string,
-  category?: string
-  title?: string
-  description?: string | React.ReactElement
-  author?: string,
-  linkElement?: React.ReactElement
-}
+import { ICard } from '../Card/Card.interface';
+
+export interface IBlogCard extends ICard {
+  date?: string,
+  category?: string
+  title?: string
+  description?: string | React.ReactElement
+  author?: string,
+  linkElement?: React.ReactElement
+}