Weir-dls-test NPM

Environment

These should be globally installed

node 10.16.0
yarn 1.16.00
create-react-app 3.1.2

Target browsers

Chrome (latest)
Edge (latest)
Firefox (latest)
Internet Explorer 11
Safari (latest)

Setup

This project was initialized from a blank folder using the init.sh script. Always keep this script up to date with any new node modules added and test that the script can run without errors

Styling guide

Try to put CSS in the following order for consistency

Size / position / padding / alignment
Border
Color
Fonts

Running storybook

yarn storybook

Generating static storybook for public preview

To update the static storybook to allow users to review the components, run yarn export. This will generate the storybook as a static file under the docs folder which can then be published in github

Control sizes

When a control has multiple sizes (sm, md, etc). Always default to sm when size is not specified.

Adding new icons

Common SVG icons can be accessed using the Icon component. The SVG images should be converted to a component and placed in the folder src/assets/svg. For monochrome icons, ensure the color can be changed when the color prop is passed to the component

The icon name will be the same as the filename. It is case sensitive. For example, adding a Cup icon will require the svg file in a file named src/assets/svg/Cup.tsx. This will be accessed using the tag <Icon name="Cup" />

Marking code for workarounds

Sometimes extra code is inserted into the source simply to work around a problem for a particular browser or platform. In this case, please mark such code. For example if extra CSS needs to be inserted to make Internet Explorer work add a comment:

/* IE-FIX */

Similiarly use tags for Chrome, firefox, etc

/* CHROME-FIX */

/* FIREFOX-FIX */

/* SAFARI-FIX */

You may optionally put a version number if fix is specific to a verison:

/* IE-FIX:9 */