open-index/open-npm huggingface dataset:
npm package: @fidisys-packages/trello-design-system
Description: 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.
Latest version: 0.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.

## Used by

- [fidisys](https://www.fidisys.com/)