oddsgate-ds 1.0.174 → 1.0.176

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/AwardCard/AwardCard.component.tsx

@@ -0,0 +1,51 @@
+import {
+  StyledAwardCard,
+  StyledAwardCardAwardBadgeWrapper,
+  StyledAwardCardImageAndBadgeWrapper,
+  StyledAwardCardWrapper
+} from './AwardCard.theme'
+
+import Heading from '@/components/atoms/Heading'
+import { IAwardCard } from './AwardCard.interface'
+import React from 'react'
+import AwardBadge from '@/components/atoms/AwardBadge'
+
+/**
+ * Renders an award card component displaying a title, an image, and an optional badge (chip).
+ *
+ * @param {IAwardCard} props - The props for the AwardCard component.
+ * @param {string} props.title - The title to display on the card.
+ * @param {React.ReactNode} props.imageElement - The image or element to display in the card.
+ * @param {string} [props.className] - Optional additional class name(s) for the card.
+ * @param {React.CSSProperties} [props.style] - Optional inline styles for the card.
+ * @param {{ variant: string; label: string }} [props.chip] - Optional chip object to display a badge, with variant and label.
+ * @returns {JSX.Element} The rendered AwardCard component.
+ */
+const AwardCard = ({
+  title,
+  imageElement,
+  className,
+  style,
+  chip,
+  ...props
+}: IAwardCard) => {
+  return (
+    <StyledAwardCard className={className} style={style}>
+      <StyledAwardCardWrapper>
+        <Heading tag={'h5'} size={'h5'} className={'fw-bold'}>
+          {title}
+        </Heading>
+        <StyledAwardCardImageAndBadgeWrapper>
+          {imageElement}
+          {chip && (
+            <StyledAwardCardAwardBadgeWrapper>
+              <AwardBadge variant={chip?.variant} label={chip?.label} />
+            </StyledAwardCardAwardBadgeWrapper>
+          )}
+        </StyledAwardCardImageAndBadgeWrapper>
+      </StyledAwardCardWrapper>
+    </StyledAwardCard>
+  )
+}
+
+export default AwardCard

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

@@ -0,0 +1,10 @@
+import { ICard } from '../Card/Card.interface'
+
+export interface IAwardCard extends ICard {
+  title?: string
+  imageElement?: React.ReactElement
+  chip?: {
+    label: string
+    variant: 'primary' | 'secondary'
+  }
+}

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

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { IAwardCard } from './AwardCard.interface'
+import AwardCard from './AwardCard.component'
+import React from 'react'
+
+export default {
+  title: 'Components/AwardCard',
+  component: AwardCard,
+  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<IAwardCard> = {
+  render: args => <AwardCard {...args} style={{ maxWidth: '302px' }} />,
+  args: {
+    title: 'Cras vel facilisis tellus',
+    imageElement: image,
+    chip: {
+      label: 'New',
+      variant: 'primary'
+    }
+  }
+}

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

@@ -0,0 +1,33 @@
+import styled from 'styled-components'
+import { colors } from '@/styles/variables'
+import { IAwardCard } from './AwardCard.interface'
+
+export const StyledAwardCard = styled.div<IAwardCard>`
+  & img {
+    width: 100%;
+    object-fit: contain;
+    aspect-ratio: 2.74 / 1;
+  }
+`
+
+export const StyledAwardCardWrapper = styled.div<IAwardCard>`
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 1.125rem;
+  background-color: ${colors.third10};
+  padding: 0.75rem 1rem 1rem 0.75rem;
+  border-radius: 0 60px;
+  height: 100%;
+`
+
+export const StyledAwardCardImageAndBadgeWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1.125rem;
+`
+
+export const StyledAwardCardAwardBadgeWrapper = styled.div`
+  margin-left: auto;
+`