The Economist Design System
Table of contents
This is the repository for The Economist Design System.
npm install @economist/design-system
examples/- Examples of how to reference the design system in a project
Using the ES6 module export is the recommended way to use the design system with React.
ES6 and Next
Example of how use a component from the design system:
If you have a Next.js project for your React app (recommended) you can let the design system manage your webpack and babel configuration for you, which will also allow you to load and optimize CSS and SVG files without additional configuration in your application.
No additional dependencies need to be specified when using the design system with a Next.js project. The only dependencies you need are Next, React and The Economist Design System.
next.config.js (to configure webpack) you can use a helper function:
const withDesignSystem = ;moduleexports = ;
postcss.config.js (to configure PostCSS) you can also use a helper function:
const withPostCSS = ;moduleexports = ;
Both of these helper functions take custom options which override the default values.
Note: You don't need to use these helper methods (or use Next.js to use ES6 modules) but you may find it's easier than maintaining these configuration files yourself. If you need to add custom configuration directives or override the default settings, you can pass options to both of these helper methods.
Universal Module Definition
If using ES6 and/or Next.js modules isn't practical in your project you can also use the components via UMD module, which should work for any React project.
Using the UMD module is similar to using the ES6 module, the import path will be different and you will also need to include the CSS (as the UMD module can't load the CSS itself):
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 =const postcssConfig =
Checkout the projects in the
./examples/ directory for examples of how to configure a project to use the design system.
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.
babel.config.jsto load the Next preset (if using Next.js):
moduleexports =presets: 'next/babel';