@cimpress/react-components
Version:
React components to support the MCP styleguide
133 lines (132 loc) • 5.2 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Padding = exports.MarginVertical = exports.MarginHorizontal = exports.MarginSingleSide = exports.MarginBreakpoints = exports.Margin = void 0;
const React = __importStar(require("react"));
const css_1 = require("@emotion/css");
const __1 = require("..");
const spacing_1 = require("../spacing");
/**
* Experimental spacing utilities.
*
* This is an unstable component, expect breaking changes or complete removal in minor versions.
*
* Available spacing values in pixels: 0, 1, 2, 4, 8, 16, 24, 32, 40, 48, 56, 64, 80, 96.
*
* **Usage**
*
* Wrap the root of your app with the `ScopedSpacingStyles` component (recommended):
*
* ```jsx
* import { unstable_ScopedSpacingStyles as ScopedSpacingStyles } from '@cimpress/react-components';
*
* // ...
*
* <ScopedSpacingStyles>
* <div className="m-16">...</div>
* </ScopedSpacingStyles>
* ```
*
* Or inject styles globally if you need to access them outside of the `ScopedSpacingStyles` component:
*
* ```jsx
* import { unstable_injectGlobalSpacingStyles } from '@cimpress/react-components';
*
* unstable_injectGlobalSpacingStyles();
*
* // ...
*
* <div className="m-16">...</div>
* ```
*/
const meta = {
title: 'Unstable/Spacing Utilities',
decorators: [
Story => (React.createElement(spacing_1.unstable_ScopedSpacingStyles, null,
React.createElement(Story, null))),
],
};
exports.default = meta;
const marginBoxWrapperStyles = (0, css_1.css) `
display: flow-root;
background-image: linear-gradient(
135deg,
${__1.colors.ocean.base} 10%,
#0000 0,
#0000 50%,
${__1.colors.ocean.base} 0,
${__1.colors.ocean.base} 60%,
#0000 0,
#0000
);
background-size: 7.07px 7.07px;
width: max-content;
border-radius: 4px;
> div {
color: #fff;
background: ${__1.colors.ocean.base};
border-radius: 4px;
}
`;
function MarginBoxWrapper({ marginClassName }) {
return (React.createElement("div", { className: marginBoxWrapperStyles },
React.createElement("div", { className: `p-8 ${marginClassName}` }, marginClassName)));
}
/**
* The spacing utilities are available as classes that you can apply to any element.
*/
exports.Margin = {
render: () => (React.createElement("div", { style: { display: 'flex', gap: 8, flexDirection: 'column' } }, spacing_1.spacing.map(size => (React.createElement(MarginBoxWrapper, { key: size, marginClassName: `m-${size}` }))))),
};
/**
* You can use the breakpoint prefix to apply margin utilities at specific breakpoints.
*
*/
exports.MarginBreakpoints = {
render: () => (React.createElement("div", { style: { display: 'flex', gap: 8, flexDirection: 'column' } },
React.createElement(MarginBoxWrapper, { marginClassName: "sm:mt-8" }),
React.createElement(MarginBoxWrapper, { marginClassName: "md:mt-8" }),
React.createElement(MarginBoxWrapper, { marginClassName: "lg:mt-8" }),
React.createElement(MarginBoxWrapper, { marginClassName: "xl:mt-8" }))),
};
exports.MarginSingleSide = {
render: () => (React.createElement("div", { style: { display: 'flex', gap: 8, flexDirection: 'column' } },
React.createElement(MarginBoxWrapper, { marginClassName: "mt-16" }),
React.createElement(MarginBoxWrapper, { marginClassName: "mb-16" }),
React.createElement(MarginBoxWrapper, { marginClassName: "mr-16" }),
React.createElement(MarginBoxWrapper, { marginClassName: "ml-16" }))),
};
exports.MarginHorizontal = {
render: () => React.createElement(MarginBoxWrapper, { marginClassName: "mx-16" }),
};
exports.MarginVertical = {
render: () => React.createElement(MarginBoxWrapper, { marginClassName: "my-16" }),
};
exports.Padding = {
render: () => (React.createElement("div", { style: { display: 'flex', gap: 8, flexDirection: 'column', color: '#ffffff' } }, spacing_1.spacing.map(size => (React.createElement("div", { key: size, className: `p-${size}`, style: { background: __1.colors.ocean.base, width: 'max-content', borderRadius: 4 } },
"p-",
size))))),
};
//# sourceMappingURL=spacing.stories.js.map