@fidisys-oss/design-system v1.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.jsstories.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.