AREA 17 + React + Styled Components - Design System

Design System setup to be used with Styled Components. The project was bootstrapped with Next 13.

Storybook

npm run storybook to launch the storybook locally.

npm run build-storybook to build the storybook as a static website.

Design System

Config

• Main Design System tokens are defined in the config file : src/frontend.config.ts
• Typography styles are defined in a separated file : src/typography.config.ts
• Utilities are defined in src/frontend.utilities.ts
• Mixins are in src/frontend.mixins.ts

Main available utilities are :

• bp(fromKey: BreakpointRuleName | 'hover', hover?: boolean, extra?: string) : Media Queries
• pxtorem(px: number | string, base = 16) : spacings
• colspan(nb: number, bump?: number | string, maxCols?: number) : size aligned on the grid
• typeset(name: TypesetsName) : typographic style
• cText(key: ColorNameText) : text color
• cBg(key: ColorNameBackground) : background color
• cBorder(key: ColorNameBorder) : border color
• cOutline(key: ColorNameOutline) : outline color

And also advanced utilities to handle values per breakpoints or colspan per breakpoints...

Usage

In Styled Components :

import styled from 'styled-components';
import { typeset, pxtorem } from '@/frontend.utilities';

export const StyledSubHeading = styled.h3`
  ${typeset('heading-1')}
  margin: ${pxtorem(60)} 0 ${pxtorem(20)} 0;
`;

This Styled Component will output an H3 with heading-1 style and with top/bottom margins in rem.

With Media Queries :

import styled from 'styled-components';
import { typeset, pxtorem, bp } from '@/frontend.utilities';

export const StyledSubHeading = styled.h3`
  ${typeset('heading-1')}
  margin: ${pxtorem(60)} 0 ${pxtorem(20)} 0;
  opacity: 0;

  @media ${bp('hover')} {
    &:hover {
      opacity: 1;
    }
  }

  @media ${bp('lg+')} {
    margin: ${pxtorem(40)} 0 ${pxtorem(10)} 0;
  }
`;

Generic Atoms

You can use generic atoms : Container, ColContainer and Grid Styled Components to build layouts/structure in your components.

ColContainer and Container :

    <ColContainer
      $marginTop={60}
      $marginBottom={spacer('block-bottom')}
      $flex
      $justifyContent="center"
    >
      <Container $colspan={{ sm: 8, md: 4 }}>
        ...
      </Container>
    </ColContainer>

Full Width Grid :

<Grid $cols={{ sm: 3, lg: 6 }}>
  {items.map((i) => (
    <div key={i}>
      <span>Grid item {i}</span>
    </div>
  ))}
</Grid>