Ágora Design System

Vision

Goal

Core technologies

• React - https://reactjs.org/
• Storybook - https://storybook.js.org/docs/react/get-started/install
• Tailwindcss - https://tailwindcss.com/docs/installation
• NodeJS- https://nodejs.org/

Useful Links

• StoryBook https://react.agora.gov.pt
• Figma (UX Design) - https://www.figma.com/files/1280803067320724398/project/60863393
• ZeroHeight - https://zeroheight.com/1be481dc2/p/97181d-agora-design-system
• AccessMonitor (Acessibilidade AMA) - https://accessmonitor.acessibilidade.gov.pt/
• W3Validator - https://validator.w3.org/nu/
• Axe DevTools - https://chrome.google.com/webstore/detail/axe-devtools-web-accessib/lhdoppojpmngadmnindnejefpokejbdd?utm_source=deque.com&utm_medium=referral&utm_campaign=axe_hero

Installation

> npm install @ama-pt/agora-design-system

Tailwind configuration

In order to reduce bundle size, we needed do strip some classes from the bundle. As result, some of the tailwind classes may not be available out of the box. To have access to all tailwind AgoraDS themed classes you have to do some additional steps.

• Install and initialize tailwindcss

> npm install -D tailwindcss postcss autoprefixer
> npx tailwindcss init -p

• Add the @tailwind directives for each of Tailwind’s layers to your main CSS file

@tailwind base;
@tailwind components;
@tailwind utilities;

• Open tailwind.config.ts, set AgoraDS configs, and set the content config with the desired glob to allow tailwind to generate all of the corresponding CSS needed for your project:

import { AgoraTailwindConfig } from '@ama-pt/agora-design-system';
import type { Config } from 'tailwindcss';

const TailwindConfig: Config = {
  content: ['src/**/*.{ts,tsx}'],
  theme: AgoraTailwindConfig.theme,
  plugins: AgoraTailwindConfig.plugins,
  safelist: AgoraTailwindConfig.safelist,
  corePlugins: {
    preflight: false
  }
};

export default TailwindConfig;

• import the css style file that exists in node_modules folder into your layout.tsx file (if working with NextJS) or index.tsx (if working with React only)

//  typescript import
import '@ama-pt/agora-design-system/artifacts/dist/index.css';
//  or equivalent for javascript imports

• Run and test the app...

Overriding Tailwind configuration

To override any tailwind config you need to update the tailwind.config.ts file as explained in the following example:

import { AgoraTailwindConfig } from '@ama-pt/agora-design-system';
import type { Config } from 'tailwindcss';

const TailwindConfig: Config = {
  content: ['src/**/*.tsx'],
  theme: {
    ...AgoraTailwindConfig.theme,
    colors: {
      ...AgoraTailwindConfig.theme.colors,
      primary: {
        50: '#FFF000',
        100: '#FFF000',
        200: '#FFF000',
        300: '#FFF000',
        400: '#FFF000',
        500: '#FFF000',
        600: '#FFF000',
        700: '#FFF000',
        800: '#FFF000',
        900: '#FFF000'
      }
    }
  },
  plugins: AgoraTailwindConfig.plugins,
  safelist: AgoraTailwindConfig.safelist,
  corePlugins: { preflight: false }
};

export default TailwindConfig;

With this example we are transforming all primary color shades into yellow.

corePlugins - is used to disable de tailwind resets already done by the AgoraDS library.