@economist/design-system

The Economist Design System

Overview

This is the repository for the Economist Design System.

npm install @economist/design-system --save

Directory structure

• src/ - The components for the design system (JavaScript and CSS modules)
• examples/ - Examples of how to reference the design system in a project

Example usage

React components for the design system are simple to use in your project:

import React, { Component } from 'react'
import { Button } from '@economist/design-system/common'

export default class extends Component {
  render() {
    return (
    <Button>Example Button</Button>
    )
  }
}

If you have a Next.js project (which is recommended if you are using the design system with React) you can let the design system manage your webpack configuration for you, which will also allow you to load CSS and SVG files and take advantage of CSS features.

next.config.js:

const withDesignSystem = require('@economist/design-system/next');
module.exports = withDesignSystem();

postcss.config.js:

const withPostCSS = require('@economist/design-system/postcss');
module.exports = withPostCSS();

Using the ES6 module export is the recommended way to use the design system with React, as it means you will get tree shaking of both JavaScript and CSS.

If this isn't practical in your project, you can also use the components via Universal Module Definition (UMD) module, which should work for any project.

To see how to use the design system in a projects, checkout the example projects in the ./examples/ directory.

Building

Run npm run build to run all the build steps.

This will run steps to compile JavaScript and CSS.

Deploying

There are build and deploy commands defined in package.json.

A build is triggered automatically when publishing.

Publishing

Publishing Canary releases

To publish a canary (preview/testing) release you need to be a member of the @economist organization on NPM.

1. Update the version in package.json to add the suffix -canary. followed by a canary release number - e.g. 0.0.1-canary.0 or 0.0.1-canary.1 (etc).
2. To publish the release, run NPM with the --tag option:npm publish --tag canary.

Publishing a new version to production

@TODO Document how publishing a release to production works with our CD/CI pipeline