oddsgate-ds 1.0.174 → 1.0.175

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

@@ -0,0 +1 @@
+export { default } from './AwardCard.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
+}

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

@@ -1,37 +1,37 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import BlogCard from './BlogCard.component'
-import { IBlogCard } from './BlogCard.interface'
-import React from 'react'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/BlogCard',
-  component: BlogCard,
-  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<IBlogCard> = {
-  render: args => <BlogCard {...args} style={{ maxWidth: '320px' }}></BlogCard>,
-  args: {
-    date: '24 nov 23',
-    category: 'Category name',
-    title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    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.',
-    author: 'Authors name',
-    linkElement: <a href="#" className="linker"></a>
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import BlogCard from './BlogCard.component'
+import { IBlogCard } from './BlogCard.interface'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/BlogCard',
+  component: BlogCard,
+  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<IBlogCard> = {
+  render: args => <BlogCard {...args} style={{ maxWidth: '320px' }}></BlogCard>,
+  args: {
+    date: '24 nov 23',
+    category: 'Category name',
+    title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    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.',
+    author: 'Authors name',
+    linkElement: <a href="#" className="linker"></a>
+  }
+}

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

@@ -1,41 +1,41 @@
-import { colors, radius } from '@/styles/variables';
-import styled, { css } from 'styled-components';
-
-import Card from '../Card/Card.component';
-import { IBlogCard } from './BlogCard.interface';
-import { StyledChip } from '@/components/atoms/Chip/Chip.theme';
-import { variables } from '@/index';
-
-export const StyledBlogCard = styled(Card) <IBlogCard>`
-  padding: 1rem;
-  color: ${colors.secondary50};
-  background-color: ${colors.primary50};
-  border-radius: ${radius.md};
-  text-align:left;
-
-  ${StyledChip}{
-    position: absolute;
-    top: 2rem;
-    left: 2rem;
-    z-index: 10;
-  }
-
-  & picture{
-    & img{
-      opacity: 1 !important;
-    }
-  }
-
-  & figcaption{
-    h3{
-      line-height: 1.1;
-    }
-  }
-
-  &:hover{
-    & figcaption{
-
-    }
-  }
-`;
-
+import { colors, radius } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import Card from '../Card/Card.component';
+import { IBlogCard } from './BlogCard.interface';
+import { StyledChip } from '@/components/atoms/Chip/Chip.theme';
+import { variables } from '@/index';
+
+export const StyledBlogCard = styled(Card) <IBlogCard>`
+  padding: 1rem;
+  color: ${colors.secondary50};
+  background-color: ${colors.primary50};
+  border-radius: ${radius.md};
+  text-align:left;
+
+  ${StyledChip}{
+    position: absolute;
+    top: 2rem;
+    left: 2rem;
+    z-index: 10;
+  }
+
+  & picture{
+    & img{
+      opacity: 1 !important;
+    }
+  }
+
+  & figcaption{
+    h3{
+      line-height: 1.1;
+    }
+  }
+
+  &:hover{
+    & figcaption{
+
+    }
+  }
+`;
+

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

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

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

@@ -1,15 +1,15 @@
-import { StyledFigcaption, StyledFigure } from './Card.theme';
-
-import { ICard } from './Card.interface';
-import React from 'react';
-
-const Card = ({ variant, imageElement, children, className, style, ...props }: ICard) => {
-  return (
-    <StyledFigure $variant={variant} className={className} style={style}>
-      {imageElement}
-      <StyledFigcaption>{children}</StyledFigcaption>
-    </StyledFigure>
-  )
-}
-
-export default Card
+import { StyledFigcaption, StyledFigure } from './Card.theme';
+
+import { ICard } from './Card.interface';
+import React from 'react';
+
+const Card = ({ variant, imageElement, children, className, style, ...props }: ICard) => {
+  return (
+    <StyledFigure $variant={variant} className={className} style={style}>
+      {imageElement}
+      <StyledFigcaption>{children}</StyledFigcaption>
+    </StyledFigure>
+  )
+}
+
+export default Card

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

@@ -1,11 +1,11 @@
-import { CSSProperties } from 'react';
-
-export type ICard = {
-  variant?: string
-  $variant?: string
-  imageElement?: React.ReactElement
-  className?: string
-  style?: CSSProperties
-  children?: React.ReactNode
-  onClick?: (event: React.MouseEvent<HTMLElement>) => void
-}
+import { CSSProperties } from 'react';
+
+export type ICard = {
+  variant?: string
+  $variant?: string
+  imageElement?: React.ReactElement
+  className?: string
+  style?: CSSProperties
+  children?: React.ReactNode
+  onClick?: (event: React.MouseEvent<HTMLElement>) => void
+}

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

@@ -1,54 +1,54 @@
-import styled, { css } from 'styled-components';
-
-import { ICard } from './Card.interface';
-import { radius } from '@/styles/variables';
-
-export const StyledFigure = styled.figure<ICard>`
-  position: relative;
-  overflow: hidden;
-  margin-bottom: 1rem;
-
-  picture{
-    border-radius: ${radius.md};
-    overflow:hidden;
-
-    & img{
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-
-      object-fit: cover;
-
-      transition: opacity 0.6s, transform 0.6s;
-      backface-visibility: hidden;
-    }
-  }
-  figcaption{
-    padding-top: 12px;
-
-    & h3{
-      transform-origin: left center;
-      transition: all 0.6s;
-    }
-  }
-
-  &:hover{
-    & picture{
-      img{
-        opacity: 0.4;
-        transform: scale3d(1.1,1.1,1);
-      }
-    }
-     & figcaption{
-      & h3{
-        transform: scale3d(0.8,0.8,1);
-      }
-     }
-  }
-`;
-
-export const StyledFigcaption = styled.figcaption<ICard>`
-
-`;
+import styled, { css } from 'styled-components';
+
+import { ICard } from './Card.interface';
+import { radius } from '@/styles/variables';
+
+export const StyledFigure = styled.figure<ICard>`
+  position: relative;
+  overflow: hidden;
+  margin-bottom: 1rem;
+
+  picture{
+    border-radius: ${radius.md};
+    overflow:hidden;
+
+    & img{
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+
+      object-fit: cover;
+
+      transition: opacity 0.6s, transform 0.6s;
+      backface-visibility: hidden;
+    }
+  }
+  figcaption{
+    padding-top: 12px;
+
+    & h3{
+      transform-origin: left center;
+      transition: all 0.6s;
+    }
+  }
+
+  &:hover{
+    & picture{
+      img{
+        opacity: 0.4;
+        transform: scale3d(1.1,1.1,1);
+      }
+    }
+     & figcaption{
+      & h3{
+        transform: scale3d(0.8,0.8,1);
+      }
+     }
+  }
+`;
+
+export const StyledFigcaption = styled.figcaption<ICard>`
+
+`;

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

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

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

@@ -1,27 +1,27 @@
-import Heading from '@/components/atoms/Heading'
-import { ICareersCard } from './CareersCard.interface'
-import React from 'react'
-import { StyledCareersCard } from './CareersCard.theme'
-
-const CareersCard = ({
-  title,
-  description,
-  linkElement,
-  className,
-  style,
-  ...props
-}: ICareersCard) => {
-  return (
-    <StyledCareersCard className={className} style={style}>
-      <Heading tag={'h3'} size={'h4'} className={'text-uppercase fw-bold'}>
-        {title}
-      </Heading>
-      <Heading tag={'span'} size={'h5'} className={'mt-4 mb-4'}>
-        {description}
-      </Heading>
-      {linkElement}
-    </StyledCareersCard>
-  )
-}
-
-export default CareersCard
+import Heading from '@/components/atoms/Heading'
+import { ICareersCard } from './CareersCard.interface'
+import React from 'react'
+import { StyledCareersCard } from './CareersCard.theme'
+
+const CareersCard = ({
+  title,
+  description,
+  linkElement,
+  className,
+  style,
+  ...props
+}: ICareersCard) => {
+  return (
+    <StyledCareersCard className={className} style={style}>
+      <Heading tag={'h3'} size={'h4'} className={'text-uppercase fw-bold'}>
+        {title}
+      </Heading>
+      <Heading tag={'span'} size={'h5'} className={'mt-4 mb-4'}>
+        {description}
+      </Heading>
+      {linkElement}
+    </StyledCareersCard>
+  )
+}
+
+export default CareersCard

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

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

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

@@ -1,30 +1,30 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import CareersCard from './CareersCard.component'
-import { ICareersCard } from './CareersCard.interface'
-import React from 'react'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/CareersCard',
-  component: CareersCard,
-  tags: ['autodocs']
-} as Meta
-
-export const Simple: StoryObj<ICareersCard> = {
-  render: args => (
-    <>
-      <CareersCard
-        {...args}
-        title="Lorem"
-        style={{ maxWidth: '320px' }}
-      ></CareersCard>
-      <CareersCard {...args} style={{ maxWidth: '320px' }}></CareersCard>
-    </>
-  ),
-  args: {
-    title: 'Cras vel facilisis tellus',
-    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 CareersCard from './CareersCard.component'
+import { ICareersCard } from './CareersCard.interface'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/CareersCard',
+  component: CareersCard,
+  tags: ['autodocs']
+} as Meta
+
+export const Simple: StoryObj<ICareersCard> = {
+  render: args => (
+    <>
+      <CareersCard
+        {...args}
+        title="Lorem"
+        style={{ maxWidth: '320px' }}
+      ></CareersCard>
+      <CareersCard {...args} style={{ maxWidth: '320px' }}></CareersCard>
+    </>
+  ),
+  args: {
+    title: 'Cras vel facilisis tellus',
+    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/CareersCard/CareersCard.theme.ts

@@ -1,13 +1,13 @@
-import { colors, radius } from '@/styles/variables';
-import styled, { css } from 'styled-components';
-
-import { ICareersCard } from './CareersCard.interface';
-
-export const StyledCareersCard = styled.div <ICareersCard>`
-  color: ${colors.third50};
-  background-color: ${colors.secondary50};
-  padding: 2rem;
-  border-radius: ${radius.md};
-
-`;
-
+import { colors, radius } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { ICareersCard } from './CareersCard.interface';
+
+export const StyledCareersCard = styled.div <ICareersCard>`
+  color: ${colors.third50};
+  background-color: ${colors.secondary50};
+  padding: 2rem;
+  border-radius: ${radius.md};
+
+`;
+

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

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