@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
• www - The website for economistdesignsystem.com

Examples

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>
    )
  }
}

Using the ES6 module export is the recommended way to use the design system with React, but you can also use the components as UMD modules.

To see how to use the design system in your own project, checkout the examples in ./examples/.

cd examples/es6-next
npm install
npm run dev

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.

Publish manually

Deployment, release and auto-building of documentation and examples is not yet configured and the steps for deployment will change with automation (deployment of both assets to the CDN and the design system will likely be coupled).

Canary test releases

To publish a canary (preview) release, update the 'version' in package.json to add the suffix -canary. followed by a version number (e.g. so it looks like "version": "0.0.1-canary.0") and run NPM with the --tag option:

npm publish --tag canary

Production releases

To publish a 'production' release, just run NPM publish:

npm publish