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

React components to support the MCP styleguide

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importDefault(require("react"));
const react_components_1 = require("@cimpress/react-components");
const introcode_1 = __importDefault(require("!raw-loader!./introcode"));
const remarks = (react_1.default.createElement("div", null,
    react_1.default.createElement("p", null,
        "Welcome! This page is intended to get you started using",
        ' ',
        react_1.default.createElement("code", null,
            react_1.default.createElement("a", { target: "_new", href: "https://www.npmjs.com/package/@cimpress/react-components" }, "@cimpress/react-components")),
        "."),
    react_1.default.createElement("h5", null, "Golbal Styles"),
    react_1.default.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_1.default.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_1.default.createElement("code", null, "GlobalStyles"),
        " component. Simply include it in your app to get these styles applied."),
    react_1.default.createElement(react_components_1.CodeExample, { code: introcode_1.default }),
    react_1.default.createElement("h3", null, "Helpful Pointers"),
    react_1.default.createElement("h5", null, "Import Patterns"),
    react_1.default.createElement("p", null,
        "In earlier versions, we recommended importing components directly from their respective locations in",
        ' ',
        react_1.default.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_1.default.createElement("h5", null,
        "Rest Syntax for Props (",
        react_1.default.createElement("code", null, "...rest"),
        ")"),
    react_1.default.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_1.default.createElement("code", null, "style"),
        " prop to the ",
        react_1.default.createElement("code", null, "FlexBox"),
        " component will cause your inline styles to be applied to the parent ",
        react_1.default.createElement("code", null, "div"),
        ".")));
exports.default = () => react_1.default.createElement(react_components_1.ComponentDoc, { name: "Introduction", demoName: "Usage", remarks: remarks, includeTabs: false });
//# sourceMappingURL=introduction.js.map