oddsgate-ds 1.0.169 → 1.0.174

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";

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>
+  )
+}