经济学家设计系统

目录

• 概览
  • 目录结构
  • 示例用途
    • ES6和下一个
    • 通用模块定义
    • 其他配置选项
    • 游戏和 Babel 配置
• 捐款
• 维护者

概览

这是《经济学家》设计系统的存放处.

npm install @economist/design-system

目录结构

• src/ - 设计系统的组件(JavaScript和CSS模块)

示例用途

与 @zeit/css,建议导入设计系统的方法目前正在使用 UMD - 见 约定重播 以实施组成部分为例.

我们知道这让设计系统无法动摇 我们将用新版的设计系统Marber来解决这个问题.

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

您可以通过在您的 Webpack 配置中添加 CSS 加载器和在 React 组件中加载 CSS( 如上例) 来将 CSS 包含进去, 或者简单地在您网站上使用的样式表中 .

其他配置选项

您不需要使用 Next.js 来使用设计系统, 而仅为 Next.js 项目提供了帮助方法 .

如果您有不同的构建系统,你可能会发现参考建议的webpack和postcs配置文件很有帮助,它们与模块一起捆绑:

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

检查 接战回击 我们建议在这个时候实施设计系统.

游戏和 Babel 配置

如果你正在使用流行的 Jest 测试框架,你可能需要在您的项目中做一些额外的配置,因为 Jest 不会自动捡起它们.

1. 配置 babel.config.js 装入下一个预设( 如果使用 Next. js ) :

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

2. 配置 transformIgnorePatterns 内 jest.react.config.js数字 :

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

捐款

要创建或modifiy一个组件,请按照下列步骤打开拉动请求: 捐款额 并遵循 法语-guidelines.md。 。 。 .

维护者

见 安保人员。 。 。 .