@cimpress/react-components/dist/esm/docs/components/introduction.js

React components to support the MCP styleguide

import React from 'react';
import { ComponentDoc, CodeExample } from '@cimpress/react-components';
import IntroCode from '!raw-loader!./introcode';
const remarks = (React.createElement("div", null,
    React.createElement("p", null,
        "Welcome! This page is intended to get you started using",
        ' ',
        React.createElement("code", null,
            React.createElement("a", { target: "_new", href: "https://www.npmjs.com/package/@cimpress/react-components" }, "@cimpress/react-components")),
        "."),
    React.createElement("h5", null, "Golbal Styles"),
    React.createElement("p", null, "In version 16, we removed the CSS Loader and external stylesheets in favor of a CSS-in-JS approach. If you are upgrading from an earlier version, please make sure you remove any old Cimpress stylesheets and the CSS Loader."),
    React.createElement("p", null,
        "To handle the few style globals that are not baked in to individual components (ie font size and color, page background color) there is now a ",
        React.createElement("code", null, "GlobalStyles"),
        " component. Simply include it in your app to get these styles applied."),
    React.createElement(CodeExample, { code: IntroCode }),
    React.createElement("h3", null, "Helpful Pointers"),
    React.createElement("h5", null, "Import Patterns"),
    React.createElement("p", null,
        "In earlier versions, we recommended importing components directly from their respective locations in",
        ' ',
        React.createElement("code", null, "@cimpress/react-components/lib"),
        " to minimize bundle size. Tree-shaking has come a long way since then, and we now recommend using the standard import pattern and letting your bundler take care of the rest."),
    React.createElement("h5", null,
        "Rest Syntax for Props (",
        React.createElement("code", null, "...rest"),
        ")"),
    React.createElement("p", null,
        "Many components will forward any additional props that are not explicitly defined in the component's documentation along to the surrounding DOM element of the rendered content. For example, passing a ",
        React.createElement("code", null, "style"),
        " prop to the ",
        React.createElement("code", null, "FlexBox"),
        " component will cause your inline styles to be applied to the parent ",
        React.createElement("code", null, "div"),
        ".")));
export default () => React.createElement(ComponentDoc, { name: "Introduction", demoName: "Usage", remarks: remarks, includeTabs: false });
//# sourceMappingURL=introduction.js.map