Metlife React Components

A list of React Components based on the MetLife ux design guidelines.

MetLife us team has created a set of self contained web elements (button, dropdown, table, icons...) using html and css. So here we will create React component versions of the web elements.

Each component will be tested and documented using the storybook development environment.

Each completed component should be listed below with a link to its storybook documentation.

Running Locally

• Clone repo https://github.com/metlife-mars/metlife-react-components.git

git clone <repo>

• Install dependencies

npm i

• Start storybook server

npm run storybook

React Components

Form Elements

Button

• Works Storybook
• Linted
• Unit Tested
• WCAG 2.0 Level AA Compliant

Checkbox

• Works Storybook
• Linted
• Unit Tested
• WCAG 2.0 Level AA Compliant

Radio Group

• Works Storybook
• Linted
• Unit Tested
• WCAG 2.0 Level AA Compliant

Select

• Works Storybook
• Linted
• Unit Tested
• WCAG 2.0 Level AA Compliant

Dropdown

• Works Storybook
• Linted
• Unit Tested
• WCAG 2.0 Level AA Compliant

DatePicker

• SinglePicker Works Storybook
• RangePicker Works
• Linted
• Unit Tested
• WCAG 2.0 Level AA Compliant

Tables

DataTable

• Works Storybook
• Linted
• Unit Tested
• WCAG 2.0 Level AA Compliant

ExpandableDataTable

• Works
• Linted
• Unit Tested
• WCAG 2.0 Level AA Compliant