npm package: @fidisys-oss/design-system
Description: Storybook design system
Latest version: 1.0.2

# Fidisys Design System (`Working Title`)

Fidisys 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.

## Live design system link

https://design-system-poc.fidisys.com/

## **How to use**

Import components you want into your UI

`import { DefaultButton } from '@fidisys-oss/design-system';`

and use them like so

```
  const example = () => (
    <div>
      <DefaultButton btnName="Default Button" clickEvent={() => 0} />
    </div>
  )
```

## Style Guide Architecture

These are a collection of architectural styles to follow when building Style Guide by following Atomic Structure principles.

### Atoms -> Molecules -> Organisms -> Templates -> Pages

### Atoms

Atoms are the basic building blocks like form labels, inputs, buttons etc.,

#### Buttons

```
Buttons express what action will occur when the user clicks or touches it. Buttons are used to initialize an action, either in the background or foreground of an experience.
```

#### Checkbox

```
A checkbox is an input option that represents a setting or value with an on, off, or mixed choice. A check mark within the checkbox indicates that the setting is selected or checked. Used for selecting multiple values from several options.
```

#### DatePicker

```
By clicking the input box, you can select a date from a popup calendar.
```

#### Heading

```
Display heading in different level.
```

#### Icons

```
For app level icons.
```

#### Images

```
For displaying images and avatar.
```

#### Input

```
A basic widget for getting the user input.
```

#### Links

```
For displaying hyperlinks.
```

#### Pagination

```
A long list can be divided into several pages using Pagination, and only one page will be loaded at a time.
```

#### Rate

```
Show evaluation and a quick rating operation on something.
```

#### Select

```
Select component to select value from options.
```

#### Switch

```
Switching Selector. Used to quickly switch between two possible states.
```

#### Tags

```
Tags for categorizing or markup.
```

#### Text

```
Display text in different level.
```

#### TimePicker


```
By clicking the input box, you can select a time from a popup panel.
```

### Molecules

Molecules are relatively simple groups of UI elements functioning together as a unit. For example, a form label, search input, and button can join together to create a search form molecule.

#### Info

```
Used to display info for resume and user.
```

#### InputWithLabel

```
Used to show form field with label.
```

#### Logo

```
Logos are the single biggest representation of a brand.
```

#### RateGroup

```
Used to display read only rate with text, label and heading.
```

#### TextGroup

```
Used to display group of texts.
```

### Organisms

Organisms are relatively complex UI components composed of groups of molecules and/or atoms and/or other organisms. Like cards, header, footer etc.,

#### Card

```
Used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes.
```

#### CheckboxGroup

```
Generate a group of checkboxes from an array.
```

#### Header

```
Header is used to identify content that precedes the primary content of the web page.
```

#### RatingList

```
Used to display the list of rating with label.
```

#### Resume

```
Resume contains Professional statement, Education & Fellowships, Certifications.
```

#### Reviews

```
A review displays user feedback.
```

#### Tabs

```
Tabs make it easy to switch between different views.
```

#### UserDetails

```
Used to display the user details such as name, photo, address, contact, etc...
```

### Templates

Templates are page-level objects that place components into a layout and articulate the design’s underlying content structure. Like grid-layouts etc.,

#### Banner

```
Banner presents an overview of the site's important content. It consists of image and text.
```

#### BookAppointment

```
Request an appointment with name, phone number, date, time and purpose of visit.
```

#### FilterResults

```
Used to filter the results by Location, ZIP code, Provider Category, Speciality by Provider Category, Type of Patient Served, Gender of Healthcare Provider.
```

#### Layout

```
For page layouts.
```

#### CardList

```
A list can be used to display content related to a single subject.
```

#### ReviewList

```
Used to display the list of reviews.
```

#### Overview

```
Used to display overview of physician and patient satisfaction reviews.
```

#### ResultsList

```
Used to display the list of physicians with pagination and sort options.
```

#### ReviewsTemplate

```
To display reviews and user can write a review.
```

#### SearchByState

```
To search and find physicians by state.
```

#### SearchOptions

```
To search and find physicians using options such as Dentists, Physicians, Healthcare Providers, Hospital name, City or State, ZIP code, Types of patient served, Gender of Healthcare Provider.
```

### Pages

Pages apply real content to templates and articulate variations to demonstrate the final UI and test the resilience of the design system.

#### InfoPage

```
Info page with Header, Overview, Reviews and Book appointment.
```

#### SearchPage

```
Search page with Header, Banner, Search options, Search by state.
```

#### SearchResult

```
Search result page with Header, Filter Results and Physicians list with sort and pagination.
```

### Components File and Folder Structure

Should follow this basic file and folder structure:

```
src/components/atoms:

.
├── stories.js
├── tests.js
├── styles.less
└── index.js
```

## stories.js

Writing stories whenever updating/creating components inorder to have clear documentation about components with the help of knobs, info, docs and actions.

#### Knobs - 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

#### Module `stories` should be like `Atoms/Buttons` , `Molecules/Search`, `Organisms/Cards` and `Templates/Layouts`

## 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 atoms/molecules/organisms/templates/pages definition. And maintain props definitions and defaults which inreturn reflects in documentation of each component.

## Used by

- [fidisys](https://www.fidisys.com/)