@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

## Building

Run npm run build to run all the build steps.

This will run steps to compile JavaScript and CSS and output importable modules to ./dist.

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

Deploying / Publishing

There are build and deploy commands defined in in package.json but deployment, release and auto-building of documentation and examples is not yet configured. Currently you must have access to the @economist org on NPM to publish modules.

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

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

npm publish