Form Design System

A design system by CB Insights.

Getting started

Installation

The design system is comprised of a number of modules published as a single npm package.

yarn add form-design-system

Importing

// JS constants like FDS.COLOR_MINT
import FDS from '@cbinsights/fds/lib/js/styleConstants';

// React components
import FDS from '@cbinsights/fds/lib/components/layout/Flex';

// Icons
import CloudIcon from '@cbinsights/fds/lib/react/CloudIcon';

Use this unpkg link to see all files published to the npm package.

Documentation

https://cbinsights.github.io/form-design-system/

Versions

This project uses semantic versioning. Refer to the Changelog for details on each major and minor release.

Development

clone this repo
run yarn && yarn build:full

Modules

Commands

Incomplete list of yarn targets.

Building

Some modules rely on others to be built first. It's a good idea to start with a yarn build:full before running focused builds.

Command	Description
`clean`	Cleans build artifacts in `lib`
`build:dictionary`	Builds dictionary docs and `lib`
`build:styles`	Builds base styles docs and `lib`
`build:icons`	Builds icons docs and `lib`
`build:comp`	Builds React component docs and `lib`
`build:mui`	Builds material-ui theme `lib`
`build:full`	Cleans all, then builds docs and `lib` for everything
`build:distCSS`	Creates CSS rollup in `lib/assets/`

Icons

Command	Description
`icons:export`	Runs export script

Storybook

Command	Description
`storybook`	Runs local dev storybook server

Other

Command	Description
`yarn test`	Runs tests for all relevant packages
`yarn snapshot-update`	Updates snapshots
`yarn lint`	Runs `eslint` on all js files
`yarn precommit`	Runs `lint-staged` to verify precommit hook will pass

Docs

Documentation is published to Github Pages from the docs/ directory in master. Every time the build command is run, docs are regenerated to the root docs/ directory.

Versioning/Publishing

form-design-system is published as a single NPM package.

Please update the minor or major version as appropriate when making changes in a branch

Updating version number

We commit the major and minor version in Jenkinsfile. Jenkins populates the patch version based on branch.

String VERSION = "1.19"

To update the version of the design system in your branch...

Update the minor and/or major version in Jenkinsfile
Update CHANGELOG.md with a note about your changes
Submit your PR.

Beta versions

Jenkins will publish all fds packages to npm on any push to origin. Non-master branches publish with a "beta" tag followed by the short sha1 hash for the commit. Pushes to master will publish a "latest" version.

Branch	version
`master`	`X.X.X` (npm "latest" tag)
`feature/my-cool-feature`	`X.X.0-beta.d270ad1` (npm "beta" tag)

ryanhanwu / form-design-system