Generation Component Library

This component library is being developed for Generation for use in the employability portal.

Table of Contents

• Setup
• Development
• Components
• Icons
• Design Fundamentals
• Linting
• Testing
• Technology Used
• Contributers

Setup

1. Make sure to have your Github SSH key set up. Follow these instructions for setting up your SSH key.
2. To clone this repository, change into your local directory and run

git clone [email protected]:digital-generation/seema.git

3. To install dependencies, run:

npm i

4. To test the components in isolation in the browser with Storybook, run

npm run storybook

Development

Development standards are as follows:

1. To begin with new code development, create a new branch off develop by running

git checkout develop
git checkout -b <branch-name>

2. Name the branch according to the Jira ticket number: <type: feat/fix/bug/chore/etc>(<scope>): [<issue-number>] <description>
3. To create a new component, run the following command in the terminal. This will create a new directory under components and create four files with the basic starting templates for the component, styles, tests, and stories:

npm run gc <ComponentName>

4. Develop the component. Make small, regular commits with useful commit messages. Be sure to write unit tests in the *.spec.js file. Make sure the component is 100% covered by unit tests.
5. Update documentation in Readme. Link the component to the component's directory in the Readme.
6. Push the branch to Github and create a PR. Make sure to fill out all sections of the PR template. The PR should be set to merge develop. Make sure to tag appropriate reviewers in Github.
7. PRs should not be merged unless at least one approval is given. Once merged, delete the branch.
8. The develop branch will be merged to main once leadership has given approval.

Components

• Avatar
• Badge
• Button
• Button Group
• Dropdown
• Grid
• Icons
• Input
• Selector
• Text
• Loader
• Line

Icons

To update icons, add/remove svg files from src/assets/icons and run npm run build-icons For more details, see the Icons Readme.

Design Fundamentals

Colors, Grid, Icons, Spacing and Typography rules are defined here.

Contents

1. Colors
   • Brand
   • Neutrals
   • Feedback
   • Future-Brand-Color-Exploratory
2. Grid
   • Desktop-1440px
   • Tablet-1024px
   • Small-Tablet-768px
   • Mobile-320px
3. Breakpoints
4. Icons
5. Typography

Colors

Brand

• Blue00: #006AEB
• Gray00: #303135
• White: #FFFFFF

Neutrals

• Gray01: #737373
• Gray02: #DDDDDD
• Gray03: #F3F3F3
• Gray04: #FAFAFA

Feedback

• Green00: #01836B
• Orange00: #E95400
• Red00: #D91222
• Red01: #C40000
• Red02: #F2ABB1
• Blue01: #005CC4
• Blue02: #004DA3

Future Brand Color Exploratory

• Color00: #6E5AED

Grid

Desktop 1440px

• Margin: 96px
• Column: 82px
• Gutter: 24px

Tablet 1024px

• Margin: 32px
• Column: 58px
• Gutter: 24px

Small Tablet 768px

• Margin: 24px
• Column: 69px
• Gutter: 24px

Mobile 320px

• Margin: 24px
• Column: 50px
• Gutter: 24px

Breakpoints

• Mobile: 320px - 479px
• Large Mobile: 480px - 767px
• Tablet: 768px - 991px
• Large Tablet: 992px - 1023px
• Desktop: 1024px - 1272px

Icons

Sizes

• Large: 24px x 24px
• Medium: 20px x 20px (default)
• Small: 16px x 16px

Typography

Azo Sans is the primary typeface

Fallback typefaces (in order):

• Helvetica
• Arial
• Sans-serif

Font-weights:

• 400 (regular)
• 500 (medium)
• 700 (bold)

Linting

Linting rules are set in the .prettierrc file. Commit hooks are set to run prettier on each commit. To run the linter without making a commit, run

npm run lint

Testing

This repository uses the jest testing library. We are aiming for as close to 100% coverage as possible. Test files should be placed in the same directory as the component. To test a specific component, run:

npm run test <relative-path-to-test-file>

To run all tests, run:

npm run test

To run all tests with a test coverage report, run:

npm run test -- --coverage .

To view the code coverage report in the browser, run

open coverage/lcov-report/index.html

Deployment

Before deploying Storybook, please ensure the correct badges are set for each Story. This ensures that the published Storybook communicates effectively the status of each story.

Badges are defined in .storybook/preview.js and the status of each badge is:

• development (default)
• review
• approved

Inside the *.stories.js file for each component, either add a status parameter to the default export:

export default {
  title: 'Button',
  component: Button,
  tags: ['autodocs'],
  parameters: {
    status: 'development',
  },
};

... and/or apply a status to an individual Story:

export const PrimaryDark = {
  parameters: {
    backgrounds: { default: 'dark' },
    status: 'approved',
  },
  args: {
    child: label,
    onClick: () => {},
    theme: 'dark',
  },
};

Technology Used

• React
• Storybook
• Styled Components
• Jest
• ESLint
• Prettier
• Husky

Contributors

Generation Team