@ama-pt/agora-design-system

Ágora Design System

Welcome to Ágora Design System, the design and development system created for the evolution of ePortugal, the portal that gathers the public services of the Portuguese Republic.

Vision

---

Standardize, simplify, and make more accessible, through agile and excellent digital public services, the relationship of all citizens with the State. ADS presents a set of rules and guidelines that must be followed in the design and development of digital public services in the Portuguese State.

Goal

---

The construction and evolution of a design system, capable of serving as a reference point, for all digital public services relating to the Portuguese State's relationship with citizens.

Core technologies

• React - https://reactjs.org/
• NextJS - https://nextjs.org/
• TailwindCss - https://tailwindcss.com/docs/installation

Useful Links

• React.dev - https://react.dev/learn/start-a-new-react-project
• StoryBook - https://prd-agora.northeurope.cloudapp.azure.com
• Figma (UX Design) - https://www.figma.com/files/project/60863393/Ágora-Design-System
• ZeroHeight - https://zeroheight.com/1be481dc2/p/2861fa-boas-vindas

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/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.