Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
@economist/design-system
Advanced tools
This is the repository for The Economist Design System.
npm install @economist/design-system
src/
- The components for the design system (JavaScript and CSS modules)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.
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.
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.js
to load the Next preset (if using Next.js):module.exports = {
presets: ['next/babel'],
};
transformIgnorePatterns
in jest.react.config.js
:transformIgnorePatterns: [
'/node_modules/(?!@economist/design-system).+\\.js$',
],
To create or modifiy a component, open a pull request following the steps outlined in CONTRIBUTING.md and following the FE-GUIDELINES.md.
See MAINTAINERS.md.
FAQs
Economist Design System
We found that @economist/design-system demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.