(window.webpackJsonp=window.webpackJsonp||[]).push([[101],{"./src/getting-started.docz.mdx":function(e,t,n){"use strict";n.r(t),n.d(t,"default",(function(){return c}));var o=n("./node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/extends.js"),s=n("./node_modules/babel-preset-react-app/node_modules/@babel/runtime/helpers/esm/objectWithoutProperties.js"),a=(n("./node_modules/react/index.js"),n("./node_modules/@mdx-js/react/dist/esm.js")),i={};function c(e){var t=e.components,n=Object(s.a)(e,["components"]);return Object(a.b)("wrapper",Object(o.a)({},i,n,{components:t,mdxType:"MDXLayout"}),Object(a.b)("h1",{id:"the-economist-design-system"},"The Economist Design System"),Object(a.b)("ul",null,Object(a.b)("li",{parentName:"ul"},"NPM module: ",Object(a.b)("a",Object(o.a)({parentName:"li"},{href:"https://www.npmjs.com/package/@economist/design-system"}),"@economist/design-system")),Object(a.b)("li",{parentName:"ul"},"GitHub repository: ",Object(a.b)("a",Object(o.a)({parentName:"li"},{href:"https://github.com/EconomistDigitalSolutions/design-system"}),"EconomistDigitalSolutions/design-system"))),Object(a.b)("h2",{id:"about-the-documentation"},"About the documentation"),Object(a.b)("p",null,"The Economist Design System uses ",Object(a.b)("a",Object(o.a)({parentName:"p"},{href:"https://www.docz.site/"}),"docz")," to generate interactive documentation."),Object(a.b)("p",null,"This documentation is automatically updated as part of the design system release process."),Object(a.b)("h2",{id:"getting-started"},"Getting Started"),Object(a.b)("p",null,"Run ",Object(a.b)("inlineCode",{parentName:"p"},"npm run docs")," to run the interactive documentation and to preview when developing components in the design system."),Object(a.b)("p",null,"Every component should have a ",Object(a.b)("a",Object(o.a)({parentName:"p"},{href:"https://mdxjs.com/"}),"MDX")," file which imports the component, lists defined properties and can be used to describe how and when to use the component."),Object(a.b)("pre",null,Object(a.b)("code",Object(o.a)({parentName:"pre"},{}),"---\nname: Button\nroute: /components-button\nedit: false\n---\n\nimport { Playground, Props } from 'docz'\nimport Button from './button'\n\n# Button\n<Playground>\n  <Button type='button'>Click</Button>\n</Playground>\n\n## Properties\n<Props of={Button} />\n")))}c.isMDXComponent=!0}}]);
//# sourceMappingURL=getting-started-docz.ae83510452dd9d2163a9.js.map