Contributing

Quick start guide

• Ensure you have yarn and the latest Node LTS version installed
• Clone the repository
• Branch from master branch
• Run yarn install

Building components

Currently, all components are in the packages directory.

To quickly create a new component, run yarn g component to run the generator, and follow the prompts.

This generator creates a folder in packages/{package-name} with the following:

• src/index.ts - export relevant component modules
• src/ComponentName.tsx - primary component file
• src/ComponentName.stories.tsx - storybook file
• package.json - relevant scripts and default dependencies
• README.md - empty stub

The generator also creates an alias in package.json for the component: yarn {package-name} instead of yarn workspace @wpmedia/arc-ui-{package-name}. This will make it easier to run yarn commands for the component package. For example, most components rely on @wpmedia/arc-ui-system, so after running the generator you can run yarn {package-name} add @wpmedia/arc-ui-system@x.x.x (installing local packages requires you specify a version).

Storybook

To start work on the component, start the Storybook by running yarn sb.

Intro to styling

All design tokens for the Arc UI can be found in packages/theme/src/index.ts. These values are consumed in the components via CSS object styles in the sx prop.

Example theme:

{
  colors: {
    primary: '#123456'
  },
  space: {
    xsmall: '0.25rem',
    small: '0.5rem'
  }
}

Example component using theme values:

/** @jsx jsx */
import { jsx } from '@wpmedia/arc-ui-system'
export default (props) => (
  <div
    {...props}
    sx={{
      // values referencing named values defined in the theme
      color: 'primary',
      padding: 'small',
    }}
  />
)

For more information on the mapping of values, see the Theme UI documentation.

Pull request process

See the PR template at .github/pull_request_template.md