Design System

Overview

This project contains re-usable React components that can be integrated into a web-app provided it supports React.

Components

This project provides the following re-usable components:

| Name | Purpose | Example | | ---------- | --------------------------------------------------------- | ----------------------------- | | Container | A simple container, which acts like Bootstraps .container | | | | HomePage1 | A template for a standard homepage | | | HomePage2 | A template for a standard homepage | | | HomePage3 | A template for a standard homepage | | | HomePage4 | A template for a standard homepage | | | Navigation | A template for a standard fixed-top navigation | |

Styling

The SCSS files are stored in a 7-1 pattern (7 sub folders and 1 main SCSS file).

The SCSS files are compiled using node-sass.

Adding New Content

Adding a new component

To add a new React component:

1. Add the component to the 'src/components' folder.
2. Import and export your new component inside the index file ('src/components/index.js').
3. Finally run the publish process mentioned below.

To add a new SCSS file:

1. Add your new SCSS file to the 'src/scss' folder.
2. Include your new SCSS file into the 'src/scss/main/scss' file at the end of the previously imported files^^.

^^ Order of your SCSS file matters as it will be compiled into a CSS file which may override your new CSS if not placed towards the end.

Build Process

The components in this project are built using Babel.

All generated artifacts are placed in a dist folder. The dist folder contains:

• components - All transpiled React components that can be re-used.
• scss - Re-usuable common SCSS files that can integrated into a webapp. By default all main pages (such as homepages, contact us, standard layout use pre-defined styles from the generated main.scss).

To publish components and SCSS (assuming you have bumped the version inside package.json):

$ npm publish

Useful Links

https://itnext.io/how-to-package-your-react-component-for-distribution-via-npm-d32d4bf71b4f

https://jasonwatmore.com/post/2018/04/14/react-npm-how-to-publish-a-react-component-to-npm

https://www.pluralsight.com/guides/publish-es6-react-modules-to-npm