oddsgate-ds 1.0.169 → 1.0.174

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: {}
+}

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

@@ -1,50 +1,50 @@
-import { colors, responsiveMediaMax } from '@/styles/variables';
-import styled, { css } from 'styled-components';
-
-import { IOffCanvas } from './OffCanvas.interface';
-
-export const StyledOffCanvas = styled.div<IOffCanvas>`
-  display: none;
-  @media only screen and (max-width: ${responsiveMediaMax}) {
-    display: block !important;
-    position: fixed;
-    top: 0px;
-    left: 0;
-
-    width: 100%;
-    height: 100vh;
-
-    opacity: 0;
-    visibility: hidden;
-    pointer-events: none;
-    background-color: rgba(0,0,0,0.6);
-    transition: all 0.3s linear;
-    z-index: 10;
-
-    & > div{
-      flex-flow: row wrap;
-      width: 100%;
-      max-width: 90%;
-      background: ${colors.white};
-      padding: 22px;
-      padding-top: 70px;
-
-      transform: translateX(-100%);
-      transition: transform 0.15s ease-in-out;
-      overflow: auto;
-      z-index: 1000;
-    }
-
-    ${({ $isOpen }) =>
-    $isOpen &&
-    css`
-        opacity:1;
-        visibility: visible;
-        pointer-events: all;
-
-        & > div{
-          transform: translateY(0%);
-        }
-    `}
-  }
-`;
+import { colors, responsiveMediaMax } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { IOffCanvas } from './OffCanvas.interface';
+
+export const StyledOffCanvas = styled.div<IOffCanvas>`
+  display: none;
+  @media only screen and (max-width: ${responsiveMediaMax}) {
+    display: block !important;
+    position: fixed;
+    top: 0px;
+    left: 0;
+
+    width: 100%;
+    height: 100vh;
+
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    background-color: rgba(0,0,0,0.6);
+    transition: all 0.3s linear;
+    z-index: 10;
+
+    & > div{
+      flex-flow: row wrap;
+      width: 100%;
+      max-width: 90%;
+      background: ${colors.white};
+      padding: 22px;
+      padding-top: 70px;
+
+      transform: translateX(-100%);
+      transition: transform 0.15s ease-in-out;
+      overflow: auto;
+      z-index: 1000;
+    }
+
+    ${({ $isOpen }) =>
+    $isOpen &&
+    css`
+        opacity:1;
+        visibility: visible;
+        pointer-events: all;
+
+        & > div{
+          transform: translateY(0%);
+        }
+    `}
+  }
+`;

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

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

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

@@ -1,60 +1,60 @@
-import {
-  StyledProductCard,
-  StyledProductCardWrapper
-} from './ProductCard.theme'
-
-import Heading from '@/components/atoms/Heading'
-import { IProductCard } from './ProductCard.interface'
-import ImageWrapper from '@/components/atoms/ImageWrapper'
-import React from 'react'
-import RichText from '@/components/atoms/RichText/RichText.component'
-
-const ProductCard = ({
-  title,
-  imageElement,
-  linkElement,
-  description,
-  className,
-  style,
-  ...props
-}: IProductCard) => {
-  const parts = title ? title.split(' ') : []
-  const half = parts ? parts.length / 2 : 0
-
-  // const firstRowTitle = Array.prototype.join.call({
-  //   ...parts,
-  //   length: half,
-  // }, " ");
-  let firstRowTitle
-  let secondRowTitle
-
-  if (parts.length > 1) {
-    firstRowTitle = parts.slice(0, half).join(' ')
-    secondRowTitle = parts.slice(half, parts?.length).join(' ')
-  } else {
-    firstRowTitle = title
-  }
-
-  return (
-    <StyledProductCard className={className} style={style}>
-      <StyledProductCardWrapper>
-        <Heading tag={'h3'} size={'h3'} className={'fw-bold'}>
-          &nbsp;{firstRowTitle}&nbsp;
-        </Heading>
-        {imageElement}
-        <Heading tag={'h3'} size={'h3'} className={'fw-bold'}>
-          &nbsp;{secondRowTitle}&nbsp;
-        </Heading>
-      </StyledProductCardWrapper>
-      {description && (
-        <RichText tag="p" className="color-secondary50 mt-8">
-          {description}
-        </RichText>
-      )}
-
-      {linkElement}
-    </StyledProductCard>
-  )
-}
-
-export default ProductCard
+import {
+  StyledProductCard,
+  StyledProductCardWrapper
+} from './ProductCard.theme'
+
+import Heading from '@/components/atoms/Heading'
+import { IProductCard } from './ProductCard.interface'
+import ImageWrapper from '@/components/atoms/ImageWrapper'
+import React from 'react'
+import RichText from '@/components/atoms/RichText/RichText.component'
+
+const ProductCard = ({
+  title,
+  imageElement,
+  linkElement,
+  description,
+  className,
+  style,
+  ...props
+}: IProductCard) => {
+  const parts = title ? title.split(' ') : []
+  const half = parts ? parts.length / 2 : 0
+
+  // const firstRowTitle = Array.prototype.join.call({
+  //   ...parts,
+  //   length: half,
+  // }, " ");
+  let firstRowTitle
+  let secondRowTitle
+
+  if (parts.length > 1) {
+    firstRowTitle = parts.slice(0, half).join(' ')
+    secondRowTitle = parts.slice(half, parts?.length).join(' ')
+  } else {
+    firstRowTitle = title
+  }
+
+  return (
+    <StyledProductCard className={className} style={style}>
+      <StyledProductCardWrapper>
+        <Heading tag={'h3'} size={'h3'} className={'fw-bold'}>
+          &nbsp;{firstRowTitle}&nbsp;
+        </Heading>
+        {imageElement}
+        <Heading tag={'h3'} size={'h3'} className={'fw-bold'}>
+          &nbsp;{secondRowTitle}&nbsp;
+        </Heading>
+      </StyledProductCardWrapper>
+      {description && (
+        <RichText tag="p" className="color-secondary50 mt-8">
+          {description}
+        </RichText>
+      )}
+
+      {linkElement}
+    </StyledProductCard>
+  )
+}
+
+export default ProductCard

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

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