@automattic/components

Components

A library of React components designed for use in Automattic products.

Installation

Install the components and the color schemes they depend on.

yarn add @automattic/components @automattic/calypso-color-schemes

Usage

// import the color variables - you only need to do this once in your entire application
import '@automattic/calypso-color-schemes';

// import the component you wish to use
import { Button } from '@automattic/components';

const CallToAction = () => (
	<>
		<Button primary onClick={ () => alert( 'Thank you for taking action!' ) }>
			Take action now!
		</Button>
	</>
);

Development Workflow

This package is developed as part of the Calypso monorepo. Run yarn in the root of the repository to get the required devDependencies.

Tests

yarn run test-packages

yarn run test-packages:watch

Using Storybook

To see stories within this package, run yarn workspace @automattic/components run start-storybook.

To see all stories within this repository, run yarn storybook:start at the root of the repository.