oddsgate-ds 1.0.174 → 1.0.175

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

@@ -1,67 +1,67 @@
-import { IDropdown, IDropdownItem } from './Dropdown.interface'
-import React, { createRef, useState } from 'react'
-import {
-  StyledDropdown,
-  StyledDropdownContainer,
-  StyledDropdownItem,
-  StyledDropdownTitle
-} from './Dropdown.theme'
-
-import clickOutSideToClose from '../../../helpers/clickOutsideToClose'
-
-const Dropdown = ({
-  children,
-  title,
-  icon,
-  className,
-  style,
-  ...props
-}: IDropdown) => {
-  const [isOpen, setIsOpen] = useState(false)
-
-  const itemsContainerRef = createRef<HTMLDivElement>()
-  clickOutSideToClose(itemsContainerRef, () => setIsOpen(false))
-
-  return (
-    <StyledDropdown ref={itemsContainerRef} className={className} style={style}>
-      <StyledDropdownTitle open={isOpen} onClick={() => setIsOpen(!isOpen)}>
-        {title}
-        {icon && <span style={{ marginLeft: '4px' }}>{icon}</span>}
-      </StyledDropdownTitle>
-      <StyledDropdownContainer open={isOpen}>
-        {children}
-      </StyledDropdownContainer>
-    </StyledDropdown>
-  )
-}
-
-export default Dropdown
-
-export const DropdownItem = ({
-  icon,
-  disabled,
-  section,
-  className,
-  style,
-  children,
-  onClick,
-  ...props
-}: IDropdownItem) => {
-
-  const itemClickHandler = () => {
-    if (onClick && !disabled) onClick()
-  }
-
-  return (
-    <StyledDropdownItem
-      disabled={disabled}
-      section={section}
-      className={className}
-      style={style}
-      onClick={itemClickHandler}
-    >
-      {children}
-      {icon && <span style={{ marginLeft: '4px' }}>{icon}</span>}
-    </StyledDropdownItem>
-  )
-}
+import { IDropdown, IDropdownItem } from './Dropdown.interface'
+import React, { createRef, useState } from 'react'
+import {
+  StyledDropdown,
+  StyledDropdownContainer,
+  StyledDropdownItem,
+  StyledDropdownTitle
+} from './Dropdown.theme'
+
+import clickOutSideToClose from '../../../helpers/clickOutsideToClose'
+
+const Dropdown = ({
+  children,
+  title,
+  icon,
+  className,
+  style,
+  ...props
+}: IDropdown) => {
+  const [isOpen, setIsOpen] = useState(false)
+
+  const itemsContainerRef = createRef<HTMLDivElement>()
+  clickOutSideToClose(itemsContainerRef, () => setIsOpen(false))
+
+  return (
+    <StyledDropdown ref={itemsContainerRef} className={className} style={style}>
+      <StyledDropdownTitle open={isOpen} onClick={() => setIsOpen(!isOpen)}>
+        {title}
+        {icon && <span style={{ marginLeft: '4px' }}>{icon}</span>}
+      </StyledDropdownTitle>
+      <StyledDropdownContainer open={isOpen}>
+        {children}
+      </StyledDropdownContainer>
+    </StyledDropdown>
+  )
+}
+
+export default Dropdown
+
+export const DropdownItem = ({
+  icon,
+  disabled,
+  section,
+  className,
+  style,
+  children,
+  onClick,
+  ...props
+}: IDropdownItem) => {
+
+  const itemClickHandler = () => {
+    if (onClick && !disabled) onClick()
+  }
+
+  return (
+    <StyledDropdownItem
+      disabled={disabled}
+      section={section}
+      className={className}
+      style={style}
+      onClick={itemClickHandler}
+    >
+      {children}
+      {icon && <span style={{ marginLeft: '4px' }}>{icon}</span>}
+    </StyledDropdownItem>
+  )
+}

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,40 @@
-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,
+  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

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

@@ -1,9 +1,9 @@
-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,
+  category?: string
+  title?: string
+  description?: string | React.ReactElement
+  linkElement?: React.ReactElement
+}

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

@@ -1,37 +1,37 @@
-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',
-    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',
+    category: 'Category name',
+    title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    imageElement: image,
+    linkElement: <a href="#" className="linker"></a>
+  }
+}
+