@cimpress/react-components
Version:
React components to support the MCP styleguide
107 lines (106 loc) • 3.94 kB
JavaScript
import * as React from 'react';
import { css } from '@emotion/css';
import { colors } from '..';
import { spacing, unstable_ScopedSpacingStyles as ScopedSpacingStyles } from '../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(ScopedSpacingStyles, null,
React.createElement(Story, null))),
],
};
export default meta;
const marginBoxWrapperStyles = css `
display: flow-root;
background-image: linear-gradient(
135deg,
${colors.ocean.base} 10%,
#0000 0,
#0000 50%,
${colors.ocean.base} 0,
${colors.ocean.base} 60%,
#0000 0,
#0000
);
background-size: 7.07px 7.07px;
width: max-content;
border-radius: 4px;
> div {
color: #fff;
background: ${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.
*/
export const Margin = {
render: () => (React.createElement("div", { style: { display: 'flex', gap: 8, flexDirection: 'column' } }, spacing.map(size => (React.createElement(MarginBoxWrapper, { key: size, marginClassName: `m-${size}` }))))),
};
/**
* You can use the breakpoint prefix to apply margin utilities at specific breakpoints.
*
*/
export const 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" }))),
};
export const 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" }))),
};
export const MarginHorizontal = {
render: () => React.createElement(MarginBoxWrapper, { marginClassName: "mx-16" }),
};
export const MarginVertical = {
render: () => React.createElement(MarginBoxWrapper, { marginClassName: "my-16" }),
};
export const Padding = {
render: () => (React.createElement("div", { style: { display: 'flex', gap: 8, flexDirection: 'column', color: '#ffffff' } }, spacing.map(size => (React.createElement("div", { key: size, className: `p-${size}`, style: { background: colors.ocean.base, width: 'max-content', borderRadius: 4 } },
"p-",
size))))),
};
//# sourceMappingURL=spacing.stories.js.map