@cimpress/react-components
Version:
React components to support the MCP styleguide
52 lines • 2.23 kB
JavaScript
import * as React from 'react';
import { Unstyled } from '@storybook/blocks';
import { SmallIcon, MediumIcon, LargeIcon } from './icons';
import * as colors from '../../../../colors';
import styles from './SpacingTable.module.css';
const spacingValues = [
{ value: 8, sizeCategory: 'small' },
{ value: 16, sizeCategory: 'small' },
{ value: 24, sizeCategory: 'medium' },
{ value: 32, sizeCategory: 'medium' },
{ value: 40, sizeCategory: 'medium' },
{ value: 48, sizeCategory: 'large' },
{ value: 56, sizeCategory: 'large' },
{ value: 64, sizeCategory: 'large' },
{ value: 80, sizeCategory: 'large' },
{ value: 96, sizeCategory: 'large' },
];
export function SpacingTable() {
return (React.createElement(Unstyled, null,
React.createElement("table", { className: styles.table },
React.createElement("thead", null,
React.createElement("tr", null,
React.createElement("th", null, "Example"),
React.createElement("th", null, "Value"),
React.createElement("th", null, "Size"))),
React.createElement("tbody", null, spacingValues.map(({ value, sizeCategory }) => (React.createElement(SpacingTableRow, { key: value, value: value, sizeCategory: sizeCategory })))))));
}
const iconMapping = {
small: SmallIcon,
medium: MediumIcon,
large: LargeIcon,
};
const sizeCategoryLabels = {
small: 'Small',
medium: 'Medium',
large: 'Large',
};
function SpacingTableRow({ value, sizeCategory }) {
const Icon = iconMapping[sizeCategory];
return (React.createElement("tr", null,
React.createElement("td", null,
React.createElement("div", { style: { background: colors.ocean.base, width: '100%', height: value } })),
React.createElement("td", null,
value,
"px"),
React.createElement("td", null,
React.createElement("div", { style: { display: 'flex', alignItems: 'center', gap: 4 } },
React.createElement(Icon, { fill: colors.ocean.base, width: 16, height: 16 }),
" ",
sizeCategoryLabels[sizeCategory]))));
}
//# sourceMappingURL=SpacingTable.js.map