oddsgate-ds 1.0.168 → 1.0.171

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

@@ -1,26 +1,26 @@
-import { CSSProperties } from 'react';
-
-export type IDropdown = {
-  ref?: React.RefObject<HTMLDivElement>
-  title?: React.ReactElement
-  icon?: React.ReactElement
-  className?: string;
-  style?: CSSProperties
-  children: React.ReactNode
-}
-export type IDropdownTitle = {
-  open: boolean
-  onClick: () => void
-}
-export type IDropdownContainer = {
-  open: boolean
-}
-export type IDropdownItem = {
-  icon?: React.ReactElement
-  disabled?: boolean
-  section?: boolean
-  className?: string;
-  style?: CSSProperties
-  children: React.ReactNode
-  onClick?: () => void
-}
+import { CSSProperties } from 'react';
+
+export type IDropdown = {
+  ref?: React.RefObject<HTMLDivElement>
+  title?: React.ReactElement
+  icon?: React.ReactElement
+  className?: string;
+  style?: CSSProperties
+  children: React.ReactNode
+}
+export type IDropdownTitle = {
+  open: boolean
+  onClick: () => void
+}
+export type IDropdownContainer = {
+  open: boolean
+}
+export type IDropdownItem = {
+  icon?: React.ReactElement
+  disabled?: boolean
+  section?: boolean
+  className?: string;
+  style?: CSSProperties
+  children: React.ReactNode
+  onClick?: () => void
+}

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

@@ -1,54 +1,54 @@
-import Dropdown, { DropdownItem } from './Dropdown.component'
-import type { Meta, StoryObj } from '@storybook/react'
-
-import Heading from '@/components/atoms/Heading'
-import { IDropdown } from '../Dropdown/Dropdown.interface'
-import Icon from '@/components/atoms/Icon'
-import React from 'react'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/Dropdown',
-  component: Dropdown,
-  tags: ['autodocs']
-} as Meta
-
-export const Simple: StoryObj<IDropdown> = {
-  render: args => (
-    <Dropdown {...args}>
-      <DropdownItem>
-        <Heading tag={'span'} size={'texts'}>
-          Item 1
-        </Heading>
-      </DropdownItem>
-      <DropdownItem>
-        <Heading tag={'span'} size={'texts'}>
-          Item 2
-        </Heading>
-      </DropdownItem>
-      <DropdownItem>
-        <Heading tag={'span'} size={'texts'}>
-          Item 3
-        </Heading>
-      </DropdownItem>
-      <DropdownItem icon={<Icon icon="icon-down-chevron" />}>
-        <Heading tag={'span'} size={'texts'}>
-          Item 4
-        </Heading>
-      </DropdownItem>
-      <DropdownItem>
-        <Heading tag={'span'} size={'texts'}>
-          Item 5
-        </Heading>
-      </DropdownItem>
-    </Dropdown>
-  ),
-  args: {
-    title: (
-      <Heading tag={'span'} size={'texts'}>
-        My dropdown title
-      </Heading>
-    ),
-    icon: <Icon icon="icon-down-chevron" />
-  }
-}
+import Dropdown, { DropdownItem } from './Dropdown.component'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Heading from '@/components/atoms/Heading'
+import { IDropdown } from '../Dropdown/Dropdown.interface'
+import Icon from '@/components/atoms/Icon'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Dropdown',
+  component: Dropdown,
+  tags: ['autodocs']
+} as Meta
+
+export const Simple: StoryObj<IDropdown> = {
+  render: args => (
+    <Dropdown {...args}>
+      <DropdownItem>
+        <Heading tag={'span'} size={'texts'}>
+          Item 1
+        </Heading>
+      </DropdownItem>
+      <DropdownItem>
+        <Heading tag={'span'} size={'texts'}>
+          Item 2
+        </Heading>
+      </DropdownItem>
+      <DropdownItem>
+        <Heading tag={'span'} size={'texts'}>
+          Item 3
+        </Heading>
+      </DropdownItem>
+      <DropdownItem icon={<Icon icon="icon-down-chevron" />}>
+        <Heading tag={'span'} size={'texts'}>
+          Item 4
+        </Heading>
+      </DropdownItem>
+      <DropdownItem>
+        <Heading tag={'span'} size={'texts'}>
+          Item 5
+        </Heading>
+      </DropdownItem>
+    </Dropdown>
+  ),
+  args: {
+    title: (
+      <Heading tag={'span'} size={'texts'}>
+        My dropdown title
+      </Heading>
+    ),
+    icon: <Icon icon="icon-down-chevron" />
+  }
+}

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

@@ -1,69 +1,69 @@
-import { IDropdown, IDropdownContainer, IDropdownItem, IDropdownTitle } from './Dropdown.interface';
-import { colors, radius, responsiveMedia, shadows } from '@/styles/variables';
-import styled, { css } from 'styled-components';
-
-import { fontSize } from '@/styles/utilities';
-
-export const StyledDropdown = styled.div<IDropdown>`
-  position: relative;
-  display: inline-flex;
-`;
-
-export const StyledDropdownTitle = styled.div<IDropdownTitle>`
-  display: flex;
-  align-items: center;
-
-  color: ${colors.primary50};
-  background-color: ${colors.secondary50};
-
-  ${fontSize('h5')};
-  padding: 10px 20px;
-  border-radius: 50px;
-  text-transform:uppercase;
-
-  transition: color 0.15s ease-in-out;
-  cursor: pointer;
-
-  &:hover{
-    color: ${colors.secondary50};
-    background-color: ${colors.primary50};
-  }
-
-  ${({ open }) => open && `
-    color: ${colors.secondary50};
-    background-color: ${colors.primary50};
-  `}
-`;
-
-
-export const StyledDropdownContainer = styled.ul<IDropdownContainer>`
-  position: absolute;
-  top: 100%;
-  left: 0;
-
-  margin-top: 12px;
-  padding: 20px;
-  background: ${colors.secondary50};
-  box-shadow: ${shadows.sm};
-  border-radius: ${radius.md};
-
-  min-width: 18rem;
-
-  opacity: ${props => props.open ? 1 : 0};
-  pointer-events: ${props => props.open ? "auto" : "none"};
-
-  transform:  ${props => props.open ? "rotate(0deg) translateY(0)" : "rotate(8deg) translateY(30px)"}; ;
-
-  z-index: 1;
-  transition: all 0.35s ease-in-out;
-`;
-export const StyledDropdownItem = styled.li<IDropdownItem>`
-  display:flex;
-  gap: 8px;
-  align-items: center;
-  cursor: pointer;
-
-  &:hover {
-    color: ${colors.primary50}
-  }
-`;
+import { IDropdown, IDropdownContainer, IDropdownItem, IDropdownTitle } from './Dropdown.interface';
+import { colors, radius, responsiveMedia, shadows } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { fontSize } from '@/styles/utilities';
+
+export const StyledDropdown = styled.div<IDropdown>`
+  position: relative;
+  display: inline-flex;
+`;
+
+export const StyledDropdownTitle = styled.div<IDropdownTitle>`
+  display: flex;
+  align-items: center;
+
+  color: ${colors.primary50};
+  background-color: ${colors.secondary50};
+
+  ${fontSize('h5')};
+  padding: 10px 20px;
+  border-radius: 50px;
+  text-transform:uppercase;
+
+  transition: color 0.15s ease-in-out;
+  cursor: pointer;
+
+  &:hover{
+    color: ${colors.secondary50};
+    background-color: ${colors.primary50};
+  }
+
+  ${({ open }) => open && `
+    color: ${colors.secondary50};
+    background-color: ${colors.primary50};
+  `}
+`;
+
+
+export const StyledDropdownContainer = styled.ul<IDropdownContainer>`
+  position: absolute;
+  top: 100%;
+  left: 0;
+
+  margin-top: 12px;
+  padding: 20px;
+  background: ${colors.secondary50};
+  box-shadow: ${shadows.sm};
+  border-radius: ${radius.md};
+
+  min-width: 18rem;
+
+  opacity: ${props => props.open ? 1 : 0};
+  pointer-events: ${props => props.open ? "auto" : "none"};
+
+  transform:  ${props => props.open ? "rotate(0deg) translateY(0)" : "rotate(8deg) translateY(30px)"}; ;
+
+  z-index: 1;
+  transition: all 0.35s ease-in-out;
+`;
+export const StyledDropdownItem = styled.li<IDropdownItem>`
+  display:flex;
+  gap: 8px;
+  align-items: center;
+  cursor: pointer;
+
+  &:hover {
+    color: ${colors.primary50}
+  }
+`;

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

@@ -1 +1 @@
-export { default, DropdownItem } from './Dropdown.component'
+export { default, DropdownItem } from './Dropdown.component'

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

@@ -1,40 +1,41 @@
-import Chip from '@/components/atoms/Chip/Chip.component'
-import Heading from '@/components/atoms/Heading'
-import { IEventsCard } from './EventsCard.interface'
-import ImageWrapper from '@/components/atoms/ImageWrapper'
-import React from 'react'
-import RichText from '@/components/atoms/RichText/RichText.component'
-import { StyledEventsCard } from './EventsCard.theme'
-
-const EventsCard = ({
-  variant,
-  date,
-  category,
-  title,
-  imageElement,
-  linkElement,
-  description,
-  ...props
-}: IEventsCard) => {
-  return (
-    <StyledEventsCard
-      variant={variant}
-      imageElement={
-        <ImageWrapper aspectRatioHeight={100}>{imageElement}</ImageWrapper>
-      }
-    >
-      <Heading tag={'h3'} size={'h4'} className={'fw-bold textEllipsis'}>
-        {title}
-      </Heading>
-      {date && (
-        <Heading tag={'span'} size={'h5'} className={'mt-3'}>
-          {date}
-        </Heading>
-      )}
-
-      {linkElement}
-    </StyledEventsCard >
-  )
-}
-
-export default EventsCard
+import Chip from '@/components/atoms/Chip/Chip.component'
+import Heading from '@/components/atoms/Heading'
+import { IEventsCard } from './EventsCard.interface'
+import ImageWrapper from '@/components/atoms/ImageWrapper'
+import React from 'react'
+import RichText from '@/components/atoms/RichText/RichText.component'
+import { StyledEventsCard } from './EventsCard.theme'
+
+const EventsCard = ({
+  variant,
+  date,
+  endDate,
+  category,
+  title,
+  imageElement,
+  linkElement,
+  description,
+  ...props
+}: IEventsCard) => {
+  return (
+    <StyledEventsCard
+      variant={variant}
+      imageElement={
+        <ImageWrapper aspectRatioHeight={100}>{imageElement}</ImageWrapper>
+      }
+    >
+      <Heading tag={'h3'} size={'h4'} className={'fw-bold textEllipsis'}>
+        {title}
+      </Heading>
+      {date && (
+        <Heading tag={'span'} size={'h5'} className={'mt-3'}>
+          {date} {endDate && "- " + endDate}
+        </Heading>
+      )}
+
+      {linkElement}
+    </StyledEventsCard >
+  )
+}
+
+export default EventsCard

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

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

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

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

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

@@ -1,33 +1,33 @@
-import { colors, radius, responsiveMedia } from '@/styles/variables';
-import styled, { css } from 'styled-components';
-
-import Card from '../Card/Card.component';
-import { IEventsCard } from './EventsCard.interface';
-
-export const StyledEventsCard = styled(Card) <IEventsCard>`
-  padding: 1rem;
-  border-radius: ${radius.md};
-  text-align: left;
-  transition: all 0.3s;
-
-  picture{
-    border-radius: 100%;
-    & img{
-      opacity: 1 !important;
-    }
-  }
-  & figcaption{
-    color: ${colors.third10};
-    padding:1rem;
-    margin-top: 1rem;
-  }
-
-  &:hover{
-    background-color: ${colors.third10};
-
-    & figcaption{
-      color: ${colors.secondary50};
-    }
-  }
-`;
-
+import { colors, radius, responsiveMedia } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import Card from '../Card/Card.component';
+import { IEventsCard } from './EventsCard.interface';
+
+export const StyledEventsCard = styled(Card) <IEventsCard>`
+  padding: 1rem;
+  border-radius: ${radius.md};
+  text-align: left;
+  transition: all 0.3s;
+
+  picture{
+    border-radius: 100%;
+    & img{
+      opacity: 1 !important;
+    }
+  }
+  & figcaption{
+    color: ${colors.third10};
+    padding:1rem;
+    margin-top: 1rem;
+  }
+
+  &:hover{
+    background-color: ${colors.third10};
+
+    & figcaption{
+      color: ${colors.secondary50};
+    }
+  }
+`;
+

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

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

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

@@ -1,29 +1,29 @@
-import React from 'react';
-
-import Heading from '@/components/atoms/Heading/Heading.component';
-import RichText from '@/components/atoms/RichText/RichText.component';
-
-import { IIconBox } from './IconBox.interface';
-import { StyledIconBox } from './IconBox.theme';
-
-const IconBox = ({
-  label,
-  icon,
-  description,
-  className,
-  ...props
-}: IIconBox) => {
-  return (
-    <StyledIconBox className={className} {...props}>
-      {icon}
-      <div>
-        <Heading size="texts" tag="span" style={{ fontWeight: 600 }}>
-          {label}
-        </Heading>
-        <RichText tag='p'>{description}</RichText>
-      </div>
-    </StyledIconBox>
-  )
-}
-
-export default IconBox
+import React from 'react';
+
+import Heading from '@/components/atoms/Heading/Heading.component';
+import RichText from '@/components/atoms/RichText/RichText.component';
+
+import { IIconBox } from './IconBox.interface';
+import { StyledIconBox } from './IconBox.theme';
+
+const IconBox = ({
+  label,
+  icon,
+  description,
+  className,
+  ...props
+}: IIconBox) => {
+  return (
+    <StyledIconBox className={className} {...props}>
+      {icon}
+      <div>
+        <Heading size="texts" tag="span" style={{ fontWeight: 600 }}>
+          {label}
+        </Heading>
+        <RichText tag='p'>{description}</RichText>
+      </div>
+    </StyledIconBox>
+  )
+}
+
+export default IconBox

package/src/components/molecules/IconBox/IconBox.interface.tsx

@@ -1,10 +1,10 @@
-import { CSSProperties } from 'react';
-
-export type IIconBox = {
-  label?: string;
-  icon?: React.ReactElement;
-  description?: string;
-  className?: string;
-  style?: CSSProperties
-  children?: React.ReactNode;
-}
+import { CSSProperties } from 'react';
+
+export type IIconBox = {
+  label?: string;
+  icon?: React.ReactElement;
+  description?: string;
+  className?: string;
+  style?: CSSProperties
+  children?: React.ReactNode;
+}