Welcome to Trello Design System

Trello Design System is a reusable component library that helps Fidisys contributors build UIs faster. The goal is to make building durable UIs more productive and satisfying.

How to use

Import components you want into your UI

import { Icon } from '@fidisys-packages/trello-design-system';

and use them like so

  const example = () => (
    <div>
      <Icon text="Default Button" icon={<MessageIcon />} onClick={() => 0} />
    </div>
  )

Style Guide Architecture

These are a collection of architectural styles to follow when building Style Guide by following Atomic Structure principles.

Components

Avatar

Avatar is used to displaying images in the circuler format.

AvatarGroup

AvatarGroup is used to displaying the members count in a multiple image format.

DropDown

By clicking on the dropdown field, you can select an item from dropdown menu.

MenuItem

For displaying menus in the list format.

Icon

Display the icons with or without label.

Card

For displaying info in the card view.

CardGroup

For displaying multiple cards.

CardFooter

For displaying multiple cards.

SearchBar

Sarch and select the datas.

AppHeader

For displaying header details.

NavBar

For displaying the app level header with app logo, profile , etc...

stories.js

Writing stories whenever updating/creating components inorder to have clear documentation about components with the help of knobs, info, docs and actions.

Controls - https://github.com/storybookjs/storybook/tree/master/addons/knobs

info - https://github.com/storybookjs/storybook/tree/master/addons/info

docs - https://github.com/storybookjs/storybook/tree/master/addons/docs

actions - https://github.com/storybookjs/storybook/tree/master/addons/actions

tests.js

Writing test cases for every component to check whether a component renders correctly for given props. And snapshot tests are used to make sure your UI does not change unexpectedly.

styles.js - How to style components

Use less.

index.js

Which contains pages definition. And maintain props definitions and defaults which inreturn reflects in documentation of each component.

Used by

• fidisys