@frazer.com/design-system v1.1.0

design-system

design-system contains a unified React component library for designing Frazer 4.0 web interfaces. As we experiment with component designs and layouts, they will be integrated into the design system which can then be used to quickly prototype new applications and services while maintaining a consistent look-and-feel across all new projects.

In order to facilitate acceptance testing and development, the design system is compiled using Storybook.js and hosted on Netlify at frazer-design-system.netlify.com.

When developing new frontend UI, you should always refer to the existing design system to see if there is a component that fits your need before creating a bespoke visual component.

If you believe that there is a component that is lacking, you are encouraged to create it and open a pull request. Be sure to stick to the existing aesthetic and design guidelines when doing so.

Install

$ npm install --save @frazer.com/design-system

Table of Contents

• Example
• Contributing
• Deployment

Example

import { Button } from '@frazer.com/design-system'

const MyComponent = () => <Button>Hello</Button>

Contributing

To contribute to this project, first clone the repository and install all of the dependencies using:

$ git clone git@github.com:frazercomputing/design-system.git
$ cd design-system
$ npm i

All components live under the src directory, optionally segregated by parent type in a separate subfolder. When adding a new component, try to put it where it belongs logically, while keeping the overall folder depth to a minimum.

In addition to creating or modifying components, you are also responsible for adding new storybook stories to demonstrate any new components or component states. This makes it easy for future developers to find the component they need and also gives us the ability to do QA and acceptance testing on design system changes before they make it into the deployed package.

To view Storybook during development, you can run

$ npm run storybook

and then visit http://localhost:6060. Here you will be able to see changes to your components and their stories in real-time. This is the same storybook that will also be deployed to Netlify on a push to Github.

Deployment

Deployment of the Storybook frontend is handled automatically by Netlify on pushes to the Github repository.

Once a change has been accepted into the design system, however, the package on NPM will need to be updated to make it available to other projects.

In order to do this, the version number needs to be bumped to the next semantic version according to the following rules:

• Bump the major version if a breaking change is introduced. This should almost never happen as most changes can, and should, be made in a backwards compatible way.
• Bump the minor version when adding new non-breaking features or functionality. This includes new components, as well as new backwards compatible behavior to existing components.
• Bump the patch version when adding fixes to existing functionality.
• Do not bump the version when making changes to stories or documentation as these don't affect the usage of the package itself.

Once a new version number has been chosen, update package.json to reflect this. Additionally, add a Git tag with the same version number and a description of the changes.

Assuming you already have NPM credentials and have logged in, you can now publish the package by running:

$ npm publish

from the root of the directory.

The package is now available, but clients will need to update their own dependencies in order to pull in any changes.