The Economist Design System

Table of contents

• Overview
  • Directory structure
  • Example usage
    • ES6 and Next
    • Universal Module Definition
    • Other configuration options
    • Jest and Babel configuration
• Contributing
• Maintainers

Overview

This is the repository for The Economist Design System.

npm install @economist/design-system

Directory structure

• src/ - The components for the design system (JavaScript and CSS modules)

Example usage

Due to issues with @zeit/css, the recommended way to import the Design System currently is using UMD - see the Engagement repo for an example of a component implementation.

We are aware this makes it so the Design System is not tree shakeable. We will be resolving this with Marber, the new version of the Design System.

import React, { Component } from 'react';
import { Button } from '@economist/design-system/dist/umd/common';
import '@economist/design-system/dist/umd/common.css';

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

You can include CSS either by adding a CSS loader to your webpack configuration and loading the CSS in React component (as in the example above) or simply in a stylesheet used on your site.

Other configuration options

You do not need to use Next.js to use the design system, the helper methods for Next.js projects are merely provided for convenience.

If you have a different build system, you may find it helpful to refer to the suggested webpack and postcss configuration files, which are bundled along with the module:

const webpackConfig = require('@economist/design-system/webpack.config.js');
const postcssConfig = require('@economist/design-system/postcss.config.js');

Checkout the Engagement repo for the way we would recommend implementing the Design System at this point in time.

Jest and Babel configuration

If you are using the popular Jest testing framework, you may need to do some additional configuration in your project as Jest won't pick them up automatically.

1. Configure babel.config.js to load the Next preset (if using Next.js):

module.exports = {
  presets: ['next/babel'],
};

2. Configure transformIgnorePatterns in jest.react.config.js:

transformIgnorePatterns: [
  '/node_modules/(?!@economist/design-system).+\\.js$',
],

Contributing

To create or modifiy a component, open a pull request following the steps outlined in CONTRIBUTING.md and following the FE-GUIDELINES.md.

Maintainers

See MAINTAINERS.md.