oddsgate-ds 1.0.2

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

@@ -0,0 +1,50 @@
+import { IDropdown, IDropdownContainer, IDropdownItem, IDropdownTitle } from './Dropdown.interface';
+import { colors, responsiveMedia, shadows } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+export const StyledDropdown = styled.div<IDropdown>`
+  position: relative;
+  display: inline-flex;
+`;
+
+export const StyledDropdownTitle = styled.div<IDropdownTitle>`
+  display: flex;
+  align-items: center;
+  transition: color 0.15s ease-in-out;
+  cursor: pointer;
+
+  ${({ open }) => open && `
+    color: ${colors.primary70} !important;
+    user-select: none
+  `}
+`;
+
+
+export const StyledDropdownContainer = styled.ul<IDropdownContainer>`
+  position: absolute;
+  top: 100%;
+  left: 0;
+
+  margin-top: 12px;
+  padding-bottom: 12px;
+  background: ${colors.white};
+  box-shadow: ${shadows.sm};
+
+  opacity: ${props => props.open ? 1 : 0};
+  pointer-events: ${props => props.open ? "auto" : "none"};
+
+  z-index: 1;
+  transition: opacity 0.15s ease-in-out;
+`;
+export const StyledDropdownItem = styled.li<IDropdownItem>`
+  display:flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  padding: 8px 18px;
+  cursor: pointer;
+
+  &:hover {
+    color: ${colors.primary70}
+  }
+`;

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

@@ -0,0 +1 @@
+export { default, DropdownItem } from './Dropdown.component'

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

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import Heading from '@/components/atoms/Heading/Heading.component';
+import RichText from '@/components/atoms/RichText/RichText.component';
+
+import { IIconBox } from './IconBox.interface';
+import { StyledIconBox } from './IconBox.theme';
+
+const IconBox = ({
+  label,
+  icon,
+  description,
+  className,
+  ...props
+}: IIconBox) => {
+  return (
+    <StyledIconBox className={className} {...props}>
+      {icon}
+      <div>
+        <Heading size="texts" tag="span" style={{ fontWeight: 600 }}>
+          {label}
+        </Heading>
+        <RichText tag='p'>{description}</RichText>
+      </div>
+    </StyledIconBox>
+  )
+}
+
+export default IconBox

package/src/components/molecules/IconBox/IconBox.interface.tsx

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+
+export type IIconBox = {
+  label?: string;
+  icon?: React.ReactElement;
+  description?: string;
+  className?: string;
+  style?: CSSProperties
+  children?: React.ReactNode;
+}

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

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { IIconBox } from './IconBox.interface'
+import Icon from '@/components/atoms/Icon'
+import IconBox from './IconBox.component'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/IconBox',
+  component: IconBox,
+  tags: ['autodocs']
+} as Meta
+
+export const Simple: StoryObj<IIconBox> = {
+  render: args => <IconBox {...args}></IconBox>,
+  args: {
+    icon: <Icon icon="icon-right-chevron" />,
+    label: 'Lorem ipsum',
+    description:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.'
+  }
+}

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

@@ -0,0 +1,25 @@
+import styled, { css } from 'styled-components';
+
+import { IIconBox } from './IconBox.interface';
+import { colors } from '@/styles/variables';
+
+export const StyledIconBox = styled.div<IIconBox>`
+  display: flex;
+
+  & i{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 32px;
+    height: 32px;
+
+    color: ${colors.primary70};
+    background: ${colors.primary10};
+    border-radius: 50px;
+
+    text-align:center;
+
+    margin-right:8px;
+  }
+`;

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

@@ -0,0 +1 @@
+export { default } from "./IconBox.component";

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

@@ -0,0 +1,24 @@
+import Heading from '@/components/atoms/Heading/Heading.component'
+import { IIconTitle } from './IconTitle.interface'
+import React from 'react'
+import { StyledIconTitle } from './IconTitle.theme'
+
+const IconTitle = ({
+  label,
+  icon,
+  imageElement,
+  className,
+  style,
+  children,
+  ...props
+}: IIconTitle) => {
+  return (
+    <StyledIconTitle className={className} style={style}>
+      {icon && icon}
+      {imageElement && imageElement}
+      {children}
+    </StyledIconTitle>
+  )
+}
+
+export default IconTitle

package/src/components/molecules/IconTitle/IconTitle.interface.tsx

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+
+export type IIconTitle = {
+  label?: string;
+  icon?: React.ReactElement;
+  imageElement?: React.ReactElement;
+  className?: string;
+  style?: CSSProperties
+  children?: React.ReactNode;
+}

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

@@ -0,0 +1,49 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Heading from '@/components/atoms/Heading'
+import { IIconTitle } from './IconTitle.interface'
+import Icon from '@/components/atoms/Icon'
+import IconTitle from './IconTitle.component'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/IconTitle',
+  component: IconTitle,
+  tags: ['autodocs']
+} as Meta
+
+export const IconStory: StoryObj<IIconTitle> = {
+  render: args => (
+    <IconTitle {...args}>
+      <Heading size="texts" tag="h4">
+        Lorem ipsum
+      </Heading>
+    </IconTitle>
+  ),
+  args: {
+    icon: <Icon icon="icon-chevron-up" />
+  }
+}
+
+export const Image: StoryObj<IIconTitle> = {
+  render: args => (
+    <IconTitle {...args}>
+      <Heading size="texts" tag="h4">
+        Lorem ipsum
+      </Heading>
+    </IconTitle>
+  ),
+  args: {
+    imageElement: (
+      <img
+        width="100%"
+        height="100%"
+        sizes="100vw"
+        decoding="async"
+        src="/assets/placeholder.png"
+        alt="Empty state"
+      />
+    )
+  }
+}

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

@@ -0,0 +1,10 @@
+import styled, { css } from 'styled-components';
+
+import { IIconTitle } from './IconTitle.interface';
+import { colors } from '@/styles/variables';
+
+export const StyledIconTitle = styled.div<IIconTitle>`
+  display:flex;
+  align-items: center;
+  gap:4px;
+`;

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

@@ -0,0 +1 @@
+export { default } from "./IconTitle.component";

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

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

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

@@ -0,0 +1,11 @@
+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

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

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

@@ -0,0 +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: ${zIndexes['modal']};
+
+  &:focus {
+    outline: none
+  }
+`;
+
+export const StyledTitle = styled.div<IModal>`
+  color: ${colors.white};
+  background-color: ${colors.primary70};
+  padding: ${spaces[3]};
+`;
+
+
+export const StyledContent = styled.div<IModal>`
+  padding: ${spaces[5]};
+  contain: paint;
+`;

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

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

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

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

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

@@ -0,0 +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;
+};

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

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

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

@@ -0,0 +1,50 @@
+import { colors, responsiveMedia } 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: ${responsiveMedia}) {
+    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

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

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

@@ -0,0 +1,45 @@
+import Button from '@/components/atoms/Button/Button.component'
+import Chip from '@/components/atoms/Chip/Chip.component'
+import Heading from '@/components/atoms/Heading'
+import { IProjectCard } from './ProjectCard.interface'
+import Icon from '@/components/atoms/Icon/Icon.component'
+import ImageWrapper from '@/components/atoms/ImageWrapper'
+import React from 'react'
+import Separator from '@/components/atoms/Separator/Separator.component'
+import { StyledProjectCard } from './ProjectCard.theme'
+
+const ProjectCard = ({
+  variant,
+  category,
+  title,
+  imageElement,
+  linkElement,
+  buttonLabel,
+  ...props
+}: IProjectCard) => {
+  return (
+    <StyledProjectCard
+      variant={variant}
+      imageElement={
+        <ImageWrapper aspectRatioHeight={variant === 'featured' ? 40 : 82}>
+          {imageElement}
+        </ImageWrapper>
+      }
+      {...props}
+    >
+      <div className="w-100">
+        <div className="d-flex align-items-center justify-content-between mb-4">
+          <Heading tag={'h3'} size={'h5'} className={'textEllipsis'}>
+            {title}
+          </Heading>
+          <Icon icon="icon-forward-arrow"></Icon>
+        </div>
+
+        <Separator color="#fff" height="1px" />
+        {linkElement}
+      </div>
+    </StyledProjectCard>
+  )
+}
+
+export default ProjectCard

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

@@ -0,0 +1,8 @@
+import { ICard } from '../Card/Card.interface';
+
+export interface IProjectCard extends ICard {
+  category?: string
+  title?: string
+  buttonLabel?: string,
+  linkElement?: React.ReactElement
+}