beaconehi

Beacon

This project is a React implementation of Beacon Design System. It makes design tokens as well as re-usable components available to consuming application. You can see a list of tokens as well components via Storybook (hosted in Chromatic).

Design tokens and themes are located in src/styles/library folder while styles for Storybook components are located in src/styles/storybook.

Re-usable components are located in src/components folder. Components that are used for Storybook are located in src/components/storybook.

Stories are located in src/stories folder.

Requirements

For development, you will only need Node.js installed in your environment.

Jira Board

https://jira.ehi.com/secure/RapidBoard.jspa?rapidView=6448&projectKey=BDS

Installation

$ git clone https://git-int.ehi.com/scm/beac/beacon.git
$ cd beacon
$ npm install

Build Library

npm run build-lib

Note: resulting files will live in /dist folder.

Branching Strategy

We are using Git Flow for our branching strategy (see link below for more info).

Git Flow

Please use feature/BDS-JIRASTORYNUMBER_Story_Title, spike/BDS-JIRASTORYNUMBER_Story_Title, etc to name branches.

Running Storybook locally

$ npm start storybook

Deploying to Chromatic

npm run chromatic

Hosting Beacon Storybook (Chromatic)

Currently, we are hosting Storybook in Chromatic due to restricted support that IT organization is able to provide. In the future, we should consider moving Storybook hosting to AWS S3 bucket or similar technology.

Chromatic Documenation

View Storybook hosted in Chromatic

Note: You need an invite to view Beacon Storybook in Chromatic

Theming

Beacon library makes design tokens avaialble via CSS custom properties. We will define core tokens as well as separate tokens for individual themes:

// core.css  
:root { --button-background-color: #333; }

// theme1.css  
:root {
    --theme-1-color-brand-pink: #fe366a;
    --button-background-color: var(--theme-1-color-brand-pink);  
}

// theme2.css
:root {
    --theme-2-color-white: #fff;  
    --button-background-color: var(--theme-2-color-white);  
}

Applications that consume our Design System library will need to install Beacon as a dependency and import core CSS styles as well as appropriate theme styles (see below):

@import '@ehi/beacon/dist/styles/core.css';  
@import '@ehi/beacon/dist/styles/theme2.css';  

.btn {
    background-color: var(--button-background-color);
}

Note: Styles for Storybook are contained in src/styles/storybook folder while styles/themes for the library are in src/styles/library folder.

Beacon Team

Design Strategy Director: Jared Bridgeman ([e-mail])

Product Design Manager: Patrick Keefe ([e-mail])

Solution Owner: Cait Marshall ([e-mail])

Designer: John Poeschl ([e-mail])

Developer: Gary Barmak ([e-mail])