Skip to content
Snippets Groups Projects
Select Git revision
  • daa99f66a5da9cda1c7b3ce9a06a9a2739fe8a0b
  • main default protected
  • fix-textinput-label-styling
  • feature/add_tabs
  • v2.9.0
  • v2.8.0
  • v2.7.0
  • v2.6.0
  • v2.5.0
  • v2.4.0
  • v2.3.0
  • v2.2.0
  • v2.1.1
  • v2.1.0
  • v2.0.0
  • v1.10.0
  • v1.9.1
  • v1.9.0
  • v1.8.4
  • v1.8.3
  • v1.8.2
  • v1.8.1
  • v1.8.0
  • v1.7.0
24 results

design-system

  • Clone with SSH
  • Clone with HTTPS
  • Alissa Cheng's avatar
    Merge branch 'SDC-1158/form-components-usability' into 'main'
    Alissa Cheng authored
    form components
    
    Closes SDC-1158
    
    See merge request !17
    daa99f66
    History

    Design system

    This is the code implementation of the design system as according to the Figma designs.

    Installation of the package in client application is done by creating a .npmrc file in the repo with the following content:

    @astron-sdc:registry=https://git.astron.nl/api/v4/packages/npm/

    and running:

    npm i @astron-sdc/design-system

    The project is based on React, Typescript and Vite. It uses Tailwind for styling, and Storybook as documentation.

    Aside from hosting the documentation at Astron, there is also an idea to publish this repository as a component library for other Astron apps to use:

    Deployment

    Deployment is automated via Gitlab CI/CD.

    Test environment: https://sdc-dev.astron.nl/design-system/ Production environment: https://sdc.astron.nl/design-system/

    Contact

    This repository is maintained by Team Rainbow. Feel free to contact us on Slack!

    Contributing

    Install nodejs, clone the repository, then run

    npm install
    npm run storybook

    to see the Storybook at http://localhost:6006/.

    General documentation that is not related to any component in particular are written as .mdx files in the src/docs/ directory, and can be viewed at http://localhost:6006/?path=/docs/.

    Each component is paired with a story file, which is responsible for showcasing said component on the Storybook. The story file for src/components/ComponentName shall be found at src/stories/ComponentName.stories.ts.

    How to

    Icons

    Download or copy the SVG code from Figma. Save it into src/assets/icons/your-file-name.svg. In the file, change the stroke color to currentColor. This is to enable dynamic stroke colors. Add an entry to the intex.ts where you import the svg file, since this allows the bundler to pick-up the file correctly. Add "your-file-name" to iconNameOptions array and the iconMap dict of Icon.tsx. Then, you can use your icon like this:

    <Icon name="your-file-name" color="secondary" />

    Colors

    Since Tailwind does not support dynamic class names, there are some functions in src/components/colors.ts to help reduce boilerplate code. They also convert the semantic color names in NextUI to the color names that we use in Figma. Please use them (or add new ones there) as much as possible instead of supplying colors via another manner. So we can keep the styling code consistent and organized.

    Linting

    The command npm run lint-staged-add lints staged files and stages the changes. It is configured as a pre-commit hook so in principle does not need to be manually run. There is also npm run lint-changed to lint changed but not added files.

    Imports are sorted and absolute, but relative imports are allowed for siblings.

    Please use semantic commit messages when committing, this is to enable automatic releases and changelogs.

    Adding dependencies

    All additional dependencies should be in the devDependencies category. There should be nothing in dependencies.

    Testing

    Run the following command when you run tests for the first time or when playwright is updated:

    npx playwright install

    Also make sure you have a running instance of storybook on your localhost (see above).

    npm run test-storybook

    checks that all stories render without error. In each rendered story, there is also the Accessibility tab which shows whether the component complies with accessibility rules.

    License

    Apache License 2.0