oddsgate-ds 1.0.169 → 1.0.174

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

@@ -1,19 +1,19 @@
-import { colors, radius, shadows, spaces } from '@/styles/variables';
-import styled, { css } from 'styled-components';
-
-import { ILogosCard } from './LogosCard.interface';
-
-export const StyledLogosCard = styled.div<ILogosCard>`
-  display: inline-flex;
-  vertical-align: middle;
-  width: 100%;
-  max-width: 140px;
-
-  overflow: hidden;
-  margin: ${spaces[2]} 1.5rem;
-
-  & img{
-    object-fit: contain;
-    aspect-ratio: 16/8;
-  }
-`;
+import { colors, radius, shadows, spaces } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { ILogosCard } from './LogosCard.interface';
+
+export const StyledLogosCard = styled.div<ILogosCard>`
+  display: inline-flex;
+  vertical-align: middle;
+  width: 100%;
+  max-width: 140px;
+
+  overflow: hidden;
+  margin: ${spaces[2]} 1.5rem;
+
+  & img{
+    object-fit: contain;
+    aspect-ratio: 16/8;
+  }
+`;

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

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

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

@@ -1,70 +1,70 @@
-import React, { useEffect, useMemo } from 'react'
-import {
-  StyledContent,
-  StyledOverlay,
-  StyledTitle,
-  StyledWrapper
-} from './Modal.theme'
-
-import Heading from '../../atoms/Heading'
-import { IModal } from './Modal.interface'
-import Icon from '../../atoms/Icon'
-import IconTitle from '../IconTitle/IconTitle.component'
-import PortalComponent from '../../common/PortalComponent'
-import { getId } from '@/helpers/uuid'
-
-const Modal = ({
-  title,
-  open = false,
-  onClose,
-  hideCloseIcon = false,
-  children,
-  ...props
-}: IModal) => {
-  const wrapperId = useMemo(() => getId(), [])
-
-  const handleCloseClick = (e: any) => {
-    e.preventDefault()
-
-    if (typeof onClose == 'function') onClose()
-  }
-
-  if (!open) return null
-
-  return (
-    <PortalComponent wrapperId={wrapperId}>
-      <StyledOverlay onClick={(e: any) => handleCloseClick(e)} />
-      <StyledWrapper {...props}>
-        <StyledTitle className="d-flex align-items-center">
-          {title && (
-            <div className="flex-grow-1">
-              <IconTitle
-                icon={
-                  <Icon
-                    icon="icon-product"
-                    style={{ color: 'white', fontSize: '3.6rem' }}
-                  />
-                }
-                className="color-white"
-              >
-                <Heading tag="span" size="texts" className="fw-semibold">
-                  {title}
-                </Heading>
-              </IconTitle>
-            </div>
-          )}
-          {!hideCloseIcon && (
-            <Icon
-              icon="icon-close"
-              className="color-white flex-shrink-1"
-              onClick={() => onClose && onClose()}
-            />
-          )}
-        </StyledTitle>
-        <StyledContent>{children}</StyledContent>
-      </StyledWrapper>
-    </PortalComponent>
-  )
-}
-
-export default Modal
+import React, { useEffect, useMemo } from 'react'
+import {
+  StyledContent,
+  StyledOverlay,
+  StyledTitle,
+  StyledWrapper
+} from './Modal.theme'
+
+import Heading from '../../atoms/Heading'
+import { IModal } from './Modal.interface'
+import Icon from '../../atoms/Icon'
+import IconTitle from '../IconTitle/IconTitle.component'
+import PortalComponent from '../../common/PortalComponent'
+import { getId } from '@/helpers/uuid'
+
+const Modal = ({
+  title,
+  open = false,
+  onClose,
+  hideCloseIcon = false,
+  children,
+  ...props
+}: IModal) => {
+  const wrapperId = useMemo(() => getId(), [])
+
+  const handleCloseClick = (e: any) => {
+    e.preventDefault()
+
+    if (typeof onClose == 'function') onClose()
+  }
+
+  if (!open) return null
+
+  return (
+    <PortalComponent wrapperId={wrapperId}>
+      <StyledOverlay onClick={(e: any) => handleCloseClick(e)} />
+      <StyledWrapper {...props}>
+        <StyledTitle className="d-flex align-items-center">
+          {title && (
+            <div className="flex-grow-1">
+              <IconTitle
+                icon={
+                  <Icon
+                    icon="icon-product"
+                    style={{ color: 'white', fontSize: '3.6rem' }}
+                  />
+                }
+                className="color-white"
+              >
+                <Heading tag="span" size="texts" className="fw-semibold">
+                  {title}
+                </Heading>
+              </IconTitle>
+            </div>
+          )}
+          {!hideCloseIcon && (
+            <Icon
+              icon="icon-close"
+              className="color-white flex-shrink-1"
+              onClick={() => onClose && onClose()}
+            />
+          )}
+        </StyledTitle>
+        <StyledContent>{children}</StyledContent>
+      </StyledWrapper>
+    </PortalComponent>
+  )
+}
+
+export default Modal

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

@@ -1,11 +1,11 @@
-import { CSSProperties } from 'react';
-
-export type IModal = {
-  title?: string
-  open?: boolean
-  onClose?: () => void
-  hideCloseIcon?: boolean
-  className?: string
-  style?: CSSProperties
-  children?: React.ReactNode;
-}
+import { CSSProperties } from 'react';
+
+export type IModal = {
+  title?: string
+  open?: boolean
+  onClose?: () => void
+  hideCloseIcon?: boolean
+  className?: string
+  style?: CSSProperties
+  children?: React.ReactNode;
+}

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

@@ -1,57 +1,57 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import React, { useState } from 'react'
-
-import Button from '../../atoms/Button'
-import Flex from '../../atoms/Flex'
-import { IModal } from './Modal.interface'
-import Modal from './Modal.component'
-import RichText from '../../atoms/RichText'
-
-export default {
-  title: 'Components/Modal',
-  component: Modal,
-  tags: ['autodocs']
-} as Meta
-
-export const Simple: StoryObj<IModal> = {
-  render: args => {
-    const [isOpen, setIsOpen] = useState(false)
-    return (
-      <div
-        style={{
-          width: '600px',
-          minHeight: '400px',
-          margin: 'auto'
-        }}
-      >
-        <Button onClick={() => setIsOpen(true)}>Open</Button>
-        <Modal
-          title={'Ainda não está registado?'}
-          open={isOpen}
-          onClose={() => setIsOpen(false)}
-          style={{ width: '90vw' }}
-          {...args}
-        >
-          <RichText style={{ color: '$gray400' }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
-            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-            aliquip ex ea commodo consequat. Duis aute irure dolor in
-            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-            culpa qui officia deserunt mollit anim id est laborum.
-          </RichText>
-
-          <Flex style={{ marginTop: '$8' }} align={'center'}>
-            <Button variant={'primary'}>Lorem ipsum</Button>
-            <RichText style={{ fontWeight: '600' }}>ou</RichText>
-            <Button outlined={true} variant={'primary'}>
-              dolor sit amet
-            </Button>
-          </Flex>
-        </Modal>
-      </div>
-    )
-  },
-  args: {}
-}
+import type { Meta, StoryObj } from '@storybook/react'
+import React, { useState } from 'react'
+
+import Button from '../../atoms/Button'
+import Flex from '../../atoms/Flex'
+import { IModal } from './Modal.interface'
+import Modal from './Modal.component'
+import RichText from '../../atoms/RichText'
+
+export default {
+  title: 'Components/Modal',
+  component: Modal,
+  tags: ['autodocs']
+} as Meta
+
+export const Simple: StoryObj<IModal> = {
+  render: args => {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <div
+        style={{
+          width: '600px',
+          minHeight: '400px',
+          margin: 'auto'
+        }}
+      >
+        <Button onClick={() => setIsOpen(true)}>Open</Button>
+        <Modal
+          title={'Ainda não está registado?'}
+          open={isOpen}
+          onClose={() => setIsOpen(false)}
+          style={{ width: '90vw' }}
+          {...args}
+        >
+          <RichText style={{ color: '$gray400' }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
+            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat. Duis aute irure dolor in
+            reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+            pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+            culpa qui officia deserunt mollit anim id est laborum.
+          </RichText>
+
+          <Flex style={{ marginTop: '$8' }} align={'center'}>
+            <Button variant={'primary'}>Lorem ipsum</Button>
+            <RichText style={{ fontWeight: '600' }}>ou</RichText>
+            <Button outlined={true} variant={'primary'}>
+              dolor sit amet
+            </Button>
+          </Flex>
+        </Modal>
+      </div>
+    )
+  },
+  args: {}
+}

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

@@ -1,55 +1,55 @@
-import { colors, radius, spaces, zIndexes } from '@/styles/variables';
-import styled, { css } from 'styled-components';
-
-import { IModal } from './Modal.interface';
-
-export const StyledOverlay = styled.div<IModal>`
-  position: fixed;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: rgba(0, 0, 0, .30);
-  z-index: 100;
-`;
-
-export const StyledWrapper = styled.div<IModal>`
-  position: fixed;
-  top: 50%;
-  left: 50%;
-
-  width: 30rem;
-  max-height: 85vh;
-  max-width: 90%;
-
-  margin-top: -5vh;
-
-  border-radius: ${radius.md};
-  background-color: ${colors.gray10};
-  box-shadow: 0px 4px 25px rgba(45, 46, 69, 0.1);
-  animation: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
-
-  // among other things, prevents text alignment inconsistencies when dialog cant be centered in the viewport evenly.
-  // affects animated and non-animated dialogs alike.
-  transform: translate(-50%, -50%);
-  will-change: transform;
-  overflow: hidden;
-  overflow-y: auto;
-  z-index: 101;
-
-  &:focus {
-    outline: none
-  }
-`;
-
-export const StyledTitle = styled.div<IModal>`
-  color: ${colors.secondary50};
-  background-color: ${colors.third50};
-  padding: ${spaces[3]};
-`;
-
-
-export const StyledContent = styled.div<IModal>`
-  padding: ${spaces[5]};
-  contain: paint;
-`;
+import { colors, radius, spaces, zIndexes } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { IModal } from './Modal.interface';
+
+export const StyledOverlay = styled.div<IModal>`
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(0, 0, 0, .30);
+  z-index: 100;
+`;
+
+export const StyledWrapper = styled.div<IModal>`
+  position: fixed;
+  top: 50%;
+  left: 50%;
+
+  width: 30rem;
+  max-height: 85vh;
+  max-width: 90%;
+
+  margin-top: -5vh;
+
+  border-radius: ${radius.md};
+  background-color: ${colors.gray10};
+  box-shadow: 0px 4px 25px rgba(45, 46, 69, 0.1);
+  animation: all 0.3s cubic-bezier(0.22, 1, 0.36, 1);
+
+  // among other things, prevents text alignment inconsistencies when dialog cant be centered in the viewport evenly.
+  // affects animated and non-animated dialogs alike.
+  transform: translate(-50%, -50%);
+  will-change: transform;
+  overflow: hidden;
+  overflow-y: auto;
+  z-index: 101;
+
+  &:focus {
+    outline: none
+  }
+`;
+
+export const StyledTitle = styled.div<IModal>`
+  color: ${colors.secondary50};
+  background-color: ${colors.third50};
+  padding: ${spaces[3]};
+`;
+
+
+export const StyledContent = styled.div<IModal>`
+  padding: ${spaces[5]};
+  contain: paint;
+`;

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

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

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

@@ -1,55 +1,55 @@
-import Chip from '@/components/atoms/Chip/Chip.component'
-import Heading from '@/components/atoms/Heading'
-import { INewsCard } from './NewsCard.interface'
-import ImageWrapper from '@/components/atoms/ImageWrapper'
-import React from 'react'
-
-import { StyledNewsCard } from './NewsCard.theme'
-
-const NewsCard = ({
-  variant,
-  date,
-  category,
-  title,
-  imageElement,
-  linkElement,
-  description,
-  ...props
-}: INewsCard) => {
-  return (
-    <StyledNewsCard
-      $variant={variant}
-      imageElement={
-        <>
-          <ImageWrapper aspectRatioHeight={63}>{imageElement}</ImageWrapper>
-        </>
-      }
-    >
-      <div>
-        <Heading
-          tag={'h3'}
-          size={variant === 'featured' ? 'h3' : 'h4'}
-          className={'fw-bold textEllipsis'}
-        >
-          {title}
-        </Heading>
-        <Heading tag={'span'} size={'captions'} className={'textEllipsis mt-3'}>
-          {description}
-        </Heading>
-      </div>
-      {date && (
-        <Heading
-          tag={'span'}
-          size={variant === 'featured' ? 'h5' : 'texts'}
-          className={'fw-bold mt-4'}
-        >
-          {date}
-        </Heading>
-      )}
-
-      {linkElement}
-    </StyledNewsCard>
-  )
-}
-
-export default NewsCard
+import Chip from '@/components/atoms/Chip/Chip.component'
+import Heading from '@/components/atoms/Heading'
+import { INewsCard } from './NewsCard.interface'
+import ImageWrapper from '@/components/atoms/ImageWrapper'
+import React from 'react'
+
+import { StyledNewsCard } from './NewsCard.theme'
+
+const NewsCard = ({
+  variant,
+  date,
+  category,
+  title,
+  imageElement,
+  linkElement,
+  description,
+  ...props
+}: INewsCard) => {
+  return (
+    <StyledNewsCard
+      $variant={variant}
+      imageElement={
+        <>
+          <ImageWrapper aspectRatioHeight={63}>{imageElement}</ImageWrapper>
+        </>
+      }
+    >
+      <div>
+        <Heading
+          tag={'h3'}
+          size={variant === 'featured' ? 'h3' : 'h4'}
+          className={'fw-bold textEllipsis'}
+        >
+          {title}
+        </Heading>
+        <Heading tag={'span'} size={'captions'} className={'textEllipsis mt-3'}>
+          {description}
+        </Heading>
+      </div>
+      {date && (
+        <Heading
+          tag={'span'}
+          size={variant === 'featured' ? 'h5' : 'texts'}
+          className={'fw-bold mt-4'}
+        >
+          {date}
+        </Heading>
+      )}
+
+      {linkElement}
+    </StyledNewsCard>
+  )
+}
+
+export default NewsCard

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

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

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

@@ -1,44 +1,44 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { INewsCard } from './NewsCard.interface'
-import NewsCard from './NewsCard.component'
-import React from 'react'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/NewsCard',
-  component: NewsCard,
-  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<INewsCard> = {
-  render: args => <NewsCard {...args} style={{ maxWidth: '320px' }}></NewsCard>,
-  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>
-  }
-}
-
-export const Featured: StoryObj<INewsCard> = {
-  render: args => (
-    <NewsCard {...args} style={{ maxWidth: '620px' }}></NewsCard>
-  ),
-  args: {
-    ...Simple.args,
-    variant: "featured"
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { INewsCard } from './NewsCard.interface'
+import NewsCard from './NewsCard.component'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/NewsCard',
+  component: NewsCard,
+  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<INewsCard> = {
+  render: args => <NewsCard {...args} style={{ maxWidth: '320px' }}></NewsCard>,
+  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>
+  }
+}
+
+export const Featured: StoryObj<INewsCard> = {
+  render: args => (
+    <NewsCard {...args} style={{ maxWidth: '620px' }}></NewsCard>
+  ),
+  args: {
+    ...Simple.args,
+    variant: "featured"
+  }
+}