oddsgate-ds 1.0.2

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

@@ -0,0 +1,72 @@
+import { Column, Row } from './../../atoms/FlexGrid'
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { IProjectCard } from './ProjectCard.interface'
+import ProjectCard from './ProjectCard.component'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/ProjectCard',
+  component: ProjectCard,
+  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<IProjectCard> = {
+  render: args => (
+    <Row>
+      <Column md={4}>
+        <ProjectCard {...args}></ProjectCard>
+      </Column>
+      <Column md={4}>
+        <ProjectCard {...args}></ProjectCard>
+      </Column>
+      <Column md={4}>
+        <ProjectCard {...args}></ProjectCard>
+      </Column>
+
+      <Column md={6}>
+        <ProjectCard variant="featured" {...args}></ProjectCard>
+      </Column>
+      <Column md={6}>
+        <ProjectCard variant="featured" {...args}></ProjectCard>
+      </Column>
+
+      <Column md={4}>
+        <ProjectCard {...args}></ProjectCard>
+      </Column>
+      <Column md={4}>
+        <ProjectCard {...args}></ProjectCard>
+      </Column>
+      <Column md={4}>
+        <ProjectCard {...args}></ProjectCard>
+      </Column>
+
+      <Column md={8}>
+        <ProjectCard variant="featured" {...args}></ProjectCard>
+      </Column>
+
+      <Column md={4}>
+        <ProjectCard {...args}></ProjectCard>
+      </Column>
+    </Row>
+  ),
+  args: {
+    category: 'Document type',
+    title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+    imageElement: image,
+    buttonLabel: 'Download',
+    linkElement: <a href="#" className="linker"></a>
+  }
+}

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

@@ -0,0 +1,61 @@
+import styled, { css } from 'styled-components';
+
+import Card from '../Card/Card.component';
+import { IProjectCard } from './ProjectCard.interface';
+import { colors } from '@/styles/variables';
+
+export const StyledProjectCard = styled(Card) <IProjectCard>`
+  & picture{
+    &:before{
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0,0,0,0.5);
+      z-index: 1;
+    }
+  }
+
+  & figcaption{
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: flex-end;
+    padding: 1rem;
+    color: ${colors.white};
+    z-index: 2;
+
+    & i{
+      min-width: 3rem;
+      height: 3rem;
+      line-height: 3rem;
+      font-size: 2.6rem;
+
+      border-radius: 50px;
+      color: ${colors.primary10};
+      background-color: ${colors.primary30};
+
+      transition: all 0.3s linear;
+      transform: rotateZ(-45deg);
+      transform-origin: center center;
+      text-align: center;
+
+      &::before{
+        line-height: inherit;
+      }
+    }
+  }
+
+  &:hover{
+    & figcaption{
+      & i{
+        transform: rotateZ(0);
+      }
+    }
+  }
+`;

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

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

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

@@ -0,0 +1,166 @@
+import React, { useEffect, useState } from 'react'
+import { StyledInput, StyledMessage, StyledModal } from './ShareModal.theme'
+
+import Flex from '../../atoms/Flex'
+import Heading from '../../atoms/Heading'
+import { IShareModal } from './ShareModal.interface'
+import Icon from '../../atoms/Icon'
+import Modal from '../Modal'
+
+type mapTypes = {
+  [key: string]: string
+}
+
+const ShareModal = ({
+  siteTitle,
+  title,
+  label,
+  url,
+  copyText,
+  open,
+  onClose,
+  ...props
+}: IShareModal) => {
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    const timeOut = setTimeout(() => {
+      setCopied(false)
+    }, 1500)
+
+    return () => clearTimeout(timeOut)
+  }, [copied])
+
+  const escapeHtml = (text: string) => {
+    if (!text) return ''
+
+    const map: mapTypes = {
+      '&': '&',
+      '<': '&lt;',
+      '>': '&gt;',
+      '"': '&quot;',
+      "'": '&#039;'
+    }
+
+    return text?.replace(/[&<>"']/g, function (m: string) {
+      return map[m]
+    })
+  }
+
+  const copyToClipboard = (text?: string) => {
+    text && navigator.clipboard.writeText(text)
+  }
+
+  if (!url) return <></>
+
+  url = url.replace(/([^:]\/)\/+/g, '$1')
+
+  const shareTitle = title && encodeURIComponent(escapeHtml(title))
+  const shareUrl = url && encodeURIComponent(url)
+
+  const facebookURL = `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}&t=${shareTitle}`
+  const twitterURL = `https://twitter.com/intent/tweet?text=${shareTitle}&url=${shareUrl}`
+  const linkedInURL = `https://www.linkedin.com/shareArticle?mini=true&url=${shareUrl}&title=${shareTitle}`
+  const whatsappURL = `https://api.whatsapp.com/send?text=${shareUrl}`
+  const emailURL = `mailto:?subject=${siteTitle} - ${shareTitle}&body=${shareUrl}`
+
+  return (
+    <Modal title={label} open={open} onClose={onClose}>
+      <StyledModal {...props}>
+        <Flex align={'center'} justify={'space-between'} wrap={'wrap'}>
+          <a
+            className="social-link"
+            aria-label="Facebook"
+            href={facebookURL}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <div>
+              <Icon icon="icon-facebook" />
+            </div>
+            <Heading
+              size={'captions'}
+              tag={'span'}
+              style={{ marginTop: 'var(--space-3)' }}
+            >
+              Facebook
+            </Heading>
+          </a>
+          <a
+            className="social-link"
+            href={twitterURL}
+            target="_blank"
+            aria-label="Twitter"
+            rel="noreferrer"
+          >
+            <div>
+              <Icon icon="icon-twitter" />
+            </div>
+            <Heading
+              size={'captions'}
+              tag={'span'}
+              style={{ marginTop: 'var(--space-3)' }}
+            >
+              Twitter
+            </Heading>
+          </a>
+          <a
+            className="social-link"
+            href={linkedInURL}
+            target="_blank"
+            aria-label="Linked In"
+            rel="noreferrer"
+          >
+            <div>
+              <Icon icon="icon-linkedin" />
+            </div>
+            <Heading
+              size={'captions'}
+              tag={'span'}
+              style={{ marginTop: 'var(--space-3)' }}
+            >
+              LinkedIn
+            </Heading>
+          </a>
+          <a
+            className="social-link"
+            href={whatsappURL}
+            target="_blank"
+            aria-label="WhatsApp"
+            rel="noreferrer"
+          >
+            <div>
+              <Icon icon="icon-whatsapp" />
+            </div>
+            <Heading
+              size={'captions'}
+              tag={'span'}
+              style={{ marginTop: 'var(--space-3)' }}
+            >
+              WhatsApp
+            </Heading>
+          </a>
+        </Flex>
+        <div style={{ marginTop: 'var(--space-5)' }}>
+          <StyledInput
+            onClick={() => {
+              copyToClipboard(url)
+              setCopied(true)
+            }}
+          >
+            <span>{url}</span>
+            <Icon icon="icon-link" />
+          </StyledInput>
+          <StyledMessage
+            className={copied ? 'active' : ''}
+            style={{ textAlign: 'center' }}
+          >
+            {copyText}
+          </StyledMessage>
+        </div>
+      </StyledModal>
+    </Modal>
+  )
+}
+
+export default ShareModal

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

@@ -0,0 +1,9 @@
+export type IShareModal = {
+  siteTitle?: string
+  title?: string
+  url?: string
+  label?: string
+  copyText?: string
+  open?: boolean
+  onClose?: () => void
+}

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import React, { useState } from 'react'
+
+import Button from '../../atoms/Button/Button.component'
+import { IShareModal } from './ShareModal.interface'
+import ShareModal from './ShareModal.component'
+
+export default {
+  title: 'Components/ShareModal',
+  component: ShareModal,
+  tags: ['autodocs']
+} as Meta
+
+export const Simple: StoryObj<IShareModal> = {
+  render: args => {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <>
+        <Button variant="primary" onClick={() => setIsOpen(true)}>
+          Open
+        </Button>
+        <ShareModal {...args} open={isOpen} onClose={() => setIsOpen(false)} />
+      </>
+    )
+  },
+  args: {
+    siteTitle: 'Miewtheme DS',
+    title: 'Design system',
+    url: 'https://miew.pt/',
+    label: 'Share',
+    copyText: 'Copied to clipboard!'
+  }
+}

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

@@ -0,0 +1,101 @@
+import { colors, radius, responsiveMedia, spaces, typography } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { IShareModal } from './ShareModal.interface';
+import { fontSize } from '@/styles/utilities';
+
+export const StyledModal = styled.div<IShareModal>`
+  & a {
+    display: inline-block;
+    width: 50%;
+
+    text-decoration: none;
+    text-align: center;
+    padding: ${spaces[3]};
+
+    & > div {
+      display: flex;
+      width: 3.2rem;
+      height: 3.2rem;
+      line-height: 3.2rem;
+      border-radius: 50%;
+      color: ${colors.white};
+      background: ${colors.primary70};
+      margin: auto;
+      transition: all 0.3s ease;
+
+      & i {
+        color: currentColor;
+        font-size: 1.6rem;
+        margin: auto;
+      }
+    };
+
+    &:hover {
+      & > div {
+        background: ${colors.primary10}
+      }
+    };
+
+    @media only screen and (min-width: ${responsiveMedia}) {
+      width: 25%;
+    }
+  }
+`;
+
+export const StyledInput = styled.div<IShareModal>`
+  position: relative;
+  background: ${colors.white};
+  border: 1px solid ${colors.primary20};
+  border-radius: 6px;
+  padding: ${spaces[2]} ${spaces[3]};
+  cursor: pointer;
+
+  & span {
+    color: ${colors.gray90};
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 90%;
+  };
+
+  & i {
+    position: absolute;
+    top: 50%;
+    right: ${spaces[2]};
+    color: ${colors.black};
+    font-size: 18px;
+    transform: translateY(-50%)
+  }
+`;
+
+export const StyledMessage = styled.div<IShareModal>`
+  position: absolute;
+  bottom: 1.5rem;
+  left: 50%;
+
+  display: inline-block;
+  vertical-align: top;
+
+  color: ${colors.white};
+  background-color: ${colors.primary70};
+
+  cursor: pointer;
+  padding: ${spaces[2]} ${spaces[4]};
+  ${fontSize('texts')};
+
+  border-radius: ${radius.lg};
+
+  opacity: 0;
+  visibility: hidden;
+  transform: translate(-50%, 3rem);
+  transition: all 0.3s ease;
+
+  &.active {
+    opacity: 1;
+    visibility: visible;
+    transform: translate(-50%, 0)
+  }
+`;
+

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

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

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

@@ -0,0 +1,31 @@
+import Heading from '@/components/atoms/Heading'
+import { ITeamCard } from './TeamCard.interface'
+import ImageWrapper from '@/components/atoms/ImageWrapper'
+import React from 'react'
+import SocialLinks from '@/components/atoms/SocialLinks/SocialLinks.component'
+import { StyledTeamCard } from './TeamCard.theme'
+
+const TeamCard = ({
+  title,
+  imageElement,
+  role,
+  description,
+  ...props
+}: ITeamCard) => {
+  return (
+    <StyledTeamCard
+      imageElement={
+        <ImageWrapper aspectRatioHeight={78}>{imageElement}</ImageWrapper>
+      }
+    >
+      <Heading tag={'span'} size={'captions'} className={'text-uppercase mt-4'}>
+        {role}
+      </Heading>
+      <Heading tag={'span'} size={'h6'} className={'fw-light mt-2'}>
+        {title}
+      </Heading>
+    </StyledTeamCard>
+  )
+}
+
+export default TeamCard

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

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

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ITeamCard } from './TeamCard.interface'
+import React from 'react'
+import TeamCard from './TeamCard.component'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/TeamCard',
+  component: TeamCard,
+  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<ITeamCard> = {
+  render: args => <TeamCard {...args} style={{ maxWidth: '220px' }}></TeamCard>,
+  args: {
+    role: 'Lorem ipsum',
+    title: 'Lorem ipsum',
+    imageElement: image,
+    description: 'Cras vel facilisis tellus'
+  }
+}

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

@@ -0,0 +1,12 @@
+import styled, { css } from 'styled-components';
+
+import Card from '../Card/Card.component';
+import { ITeamCard } from './TeamCard.interface';
+import { colors } from '@/styles/variables';
+
+export const StyledTeamCard = styled(Card) <ITeamCard>`
+  overflow: hidden;
+  margin-bottom: 24px;
+  pointer-events: none;
+`;
+

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

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

package/src/components/organisms/Cover/Cover.component.tsx

@@ -0,0 +1,46 @@
+import {
+  StyledCover,
+  StyledCoverContent,
+  StyledCoverOverlay
+} from './Cover.theme'
+import { flexAlign, flexJustify } from '@/components/atoms/Flex/Flex.interface'
+
+import { ICover } from './Cover.interface'
+import React from 'react'
+import cn from 'classnames'
+
+const Cover = ({
+  minHeight,
+  contentPosition,
+  imageElement,
+  overlayOpacity,
+  overlayColor,
+  style,
+  className,
+  children
+}: ICover) => {
+  let alignClass = contentPosition
+    ? contentPosition.split(' ')
+    : ['center', 'center']
+
+  return (
+    <StyledCover
+      className={cn(
+        `align-items-${alignClass[0]}`,
+        `justify-content-${alignClass[0]}`,
+        className
+      )}
+      style={{ ...style, minHeight: minHeight || undefined }}
+    >
+      {imageElement}
+      {overlayColor && overlayOpacity && (
+        <StyledCoverOverlay
+          style={{ backgroundColor: overlayColor, opacity: overlayOpacity }}
+        ></StyledCoverOverlay>
+      )}
+      <StyledCoverContent>{children}</StyledCoverContent>
+    </StyledCover>
+  )
+}
+
+export default Cover

package/src/components/organisms/Cover/Cover.interface.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from 'react';
+
+export type ICover = {
+  id?: string;
+  anchor?: string;
+  minHeight?: string;
+  contentPosition?: string;
+  imageElement?: React.ReactElement
+  overlayOpacity?: number;
+  overlayColor?: string;
+  className?: string;
+  style?: CSSProperties;
+  children?: React.ReactNode
+}