@fidisys-packages/trello-design-system v0.1.2
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.