oddsgate-ds 1.0.174 → 1.0.176

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

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

@@ -1,77 +1,77 @@
-import { colors, radius, responsiveMedia } from '@/styles/variables';
-import styled, { css } from 'styled-components';
-
-import Card from '../Card/Card.component';
-import { INewsCard } from './NewsCard.interface';
-import { StyledChip } from '@/components/atoms/Chip/Chip.theme';
-
-export const StyledNewsCard = styled(Card) <INewsCard>`
-  padding: 1rem;
-  color: ${colors.secondary50};
-  background-color: ${colors.third50};
-  border-radius: ${radius.md};
-  text-align:left;
-
-  ${StyledChip}{
-    position: absolute;
-    top: 2rem;
-    left: 2rem;
-    z-index: 10;
-  }
-
-  & picture{
-    & img{
-      opacity: 1 !important;
-    }
-  }
-
-  & figcaption{
-
-  }
-
-  ${(props) => {
-    switch (props.$variant) {
-      case "primary": default:
-        return css`
-
-
-        `;
-      case "featured":
-        return css`
-          @media only screen and (min-width: ${responsiveMedia}) {
-
-            display: flex;
-            align-items:stretch;
-            justify-content: space-between;
-            flex-flow: row-reverse;
-
-            ${StyledChip}{
-              position: relative;
-              top: 0;
-              left: 0;
-            }
-
-            & picture{
-              width: 45%;
-            }
-            & figcaption{
-              display: flex;
-              flex-flow: column;
-              justify-content: space-between;
-
-              width: 45%;
-              padding:1.6rem;
-            }
-          }
-        `;
-    }
-  }}
-
-
-  &:hover{
-    & figcaption{
-
-    }
-  }
-`;
-
+import { colors, radius, responsiveMedia } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import Card from '../Card/Card.component';
+import { INewsCard } from './NewsCard.interface';
+import { StyledChip } from '@/components/atoms/Chip/Chip.theme';
+
+export const StyledNewsCard = styled(Card) <INewsCard>`
+  padding: 1rem;
+  color: ${colors.secondary50};
+  background-color: ${colors.third50};
+  border-radius: ${radius.md};
+  text-align:left;
+
+  ${StyledChip}{
+    position: absolute;
+    top: 2rem;
+    left: 2rem;
+    z-index: 10;
+  }
+
+  & picture{
+    & img{
+      opacity: 1 !important;
+    }
+  }
+
+  & figcaption{
+
+  }
+
+  ${(props) => {
+    switch (props.$variant) {
+      case "primary": default:
+        return css`
+
+
+        `;
+      case "featured":
+        return css`
+          @media only screen and (min-width: ${responsiveMedia}) {
+
+            display: flex;
+            align-items:stretch;
+            justify-content: space-between;
+            flex-flow: row-reverse;
+
+            ${StyledChip}{
+              position: relative;
+              top: 0;
+              left: 0;
+            }
+
+            & picture{
+              width: 45%;
+            }
+            & figcaption{
+              display: flex;
+              flex-flow: column;
+              justify-content: space-between;
+
+              width: 45%;
+              padding:1.6rem;
+            }
+          }
+        `;
+    }
+  }}
+
+
+  &:hover{
+    & figcaption{
+
+    }
+  }
+`;
+

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

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

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

@@ -1,55 +1,55 @@
-import React, { useMemo } from 'react'
-
-import CloseButton from '@/components/atoms/CloseButton/CloseButton.component'
-import { IOffCanvas } from './OffCanvas.interface'
-import PortalComponent from '../../common/PortalComponent'
-import { StyledOffCanvas } from './OffCanvas.theme'
-import { getId } from '@/helpers/uuid'
-
-const OffCanvas = ({
-  isOpen,
-  title,
-  actions,
-  children,
-  className,
-  onClose
-}: IOffCanvas) => {
-  const wrapperId = useMemo(() => getId(), [])
-
-  return (
-    <PortalComponent wrapperId={wrapperId}>
-      <StyledOffCanvas
-        $isOpen={isOpen}
-        className={className}
-        data-lenis-prevent={true}
-      >
-        <div className="d-flex h-100">
-          <div className="w-100 align-self-start">
-            <div
-              className={
-                'd-flex d-md-none w-100 align-items-center justify-content-between mb-3'
-              }
-            >
-              {title}
-              <CloseButton
-                variant="sm"
-                style={{ position: 'relative', top: 0, left: 0 }}
-                onClick={onClose}
-              ></CloseButton>
-            </div>
-            <div className={'w-100'}>{children}</div>
-          </div>
-          <div
-            className={
-              'd-flex d-md-none w-100 align-self-end align-items-center justify-content-end mt-3'
-            }
-          >
-            {actions}
-          </div>
-        </div>
-      </StyledOffCanvas>
-    </PortalComponent>
-  )
-}
-
-export default OffCanvas
+import React, { useMemo } from 'react'
+
+import CloseButton from '@/components/atoms/CloseButton/CloseButton.component'
+import { IOffCanvas } from './OffCanvas.interface'
+import PortalComponent from '../../common/PortalComponent'
+import { StyledOffCanvas } from './OffCanvas.theme'
+import { getId } from '@/helpers/uuid'
+
+const OffCanvas = ({
+  isOpen,
+  title,
+  actions,
+  children,
+  className,
+  onClose
+}: IOffCanvas) => {
+  const wrapperId = useMemo(() => getId(), [])
+
+  return (
+    <PortalComponent wrapperId={wrapperId}>
+      <StyledOffCanvas
+        $isOpen={isOpen}
+        className={className}
+        data-lenis-prevent={true}
+      >
+        <div className="d-flex h-100">
+          <div className="w-100 align-self-start">
+            <div
+              className={
+                'd-flex d-md-none w-100 align-items-center justify-content-between mb-3'
+              }
+            >
+              {title}
+              <CloseButton
+                variant="sm"
+                style={{ position: 'relative', top: 0, left: 0 }}
+                onClick={onClose}
+              ></CloseButton>
+            </div>
+            <div className={'w-100'}>{children}</div>
+          </div>
+          <div
+            className={
+              'd-flex d-md-none w-100 align-self-end align-items-center justify-content-end mt-3'
+            }
+          >
+            {actions}
+          </div>
+        </div>
+      </StyledOffCanvas>
+    </PortalComponent>
+  )
+}
+
+export default OffCanvas

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

@@ -1,12 +1,12 @@
-import { CSSProperties } from "react";
-
-export interface IOffCanvas {
-  isOpen?: boolean;
-  $isOpen?: boolean;
-  actions?: React.ReactNode;
-  title?: React.ReactNode;
-  className?: string;
-  style?: CSSProperties
-  children?: React.ReactNode;
-  onClose?: () => void;
-};
+import { CSSProperties } from "react";
+
+export interface IOffCanvas {
+  isOpen?: boolean;
+  $isOpen?: boolean;
+  actions?: React.ReactNode;
+  title?: React.ReactNode;
+  className?: string;
+  style?: CSSProperties
+  children?: React.ReactNode;
+  onClose?: () => void;
+};

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

@@ -1,55 +1,55 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import React, { useState } from 'react'
-
-import Button from '../../atoms/Button'
-import Flex from '../../atoms/Flex'
-import { IOffCanvas } from './OffCanvas.interface'
-import OffCanvas from './OffCanvas.component'
-import RichText from '../../atoms/RichText'
-
-export default {
-  title: 'Components/OffCanvas',
-  component: OffCanvas,
-  tags: ['autodocs']
-} as Meta
-
-export const Simple: StoryObj<IOffCanvas> = {
-  render: args => {
-    const [isOpen, setIsOpen] = useState(false)
-    return (
-      <div
-        style={{
-          width: '600px',
-          minHeight: '400px',
-          margin: 'auto'
-        }}
-      >
-        <Button onClick={() => setIsOpen(true)}>Open</Button>
-        <OffCanvas
-          title={'Ainda não está registado?'}
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-        >
-          <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>
-        </OffCanvas>
-      </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 { IOffCanvas } from './OffCanvas.interface'
+import OffCanvas from './OffCanvas.component'
+import RichText from '../../atoms/RichText'
+
+export default {
+  title: 'Components/OffCanvas',
+  component: OffCanvas,
+  tags: ['autodocs']
+} as Meta
+
+export const Simple: StoryObj<IOffCanvas> = {
+  render: args => {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <div
+        style={{
+          width: '600px',
+          minHeight: '400px',
+          margin: 'auto'
+        }}
+      >
+        <Button onClick={() => setIsOpen(true)}>Open</Button>
+        <OffCanvas
+          title={'Ainda não está registado?'}
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
+        >
+          <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>
+        </OffCanvas>
+      </div>
+    )
+  },
+  args: {}
+}