@cimpress/react-components
Version:
React components to support the MCP styleguide
36 lines • 1.55 kB
JavaScript
import * as React from 'react';
import { IconShipmentCheck } from '@cimpress-technology/react-streamline-icons';
import { Label } from '../Label';
const meta = {
title: 'Components/Label',
component: Label,
};
export default meta;
export const Default = {
args: {
text: 'Label',
},
};
export const SizeVariants = {
render: () => (React.createElement("div", { style: { display: 'flex', gap: '1rem', alignItems: 'flex-start' } },
React.createElement(Label, { text: "Small", size: "sm" }),
React.createElement(Label, { text: "Default", size: "default" }),
React.createElement(Label, { text: "Large", size: "lg" }))),
};
export const StatusVariants = {
render: () => (React.createElement("div", { style: { display: 'flex', gap: '1rem', alignItems: 'flex-start' } },
React.createElement(Label, { text: "Default", status: "default" }),
React.createElement(Label, { text: "Danger", status: "danger" }),
React.createElement(Label, { text: "Info", status: "info" }),
React.createElement(Label, { text: "Primary", status: "primary" }),
React.createElement(Label, { text: "Success", status: "success" }),
React.createElement(Label, { text: "Warning", status: "warning" }))),
};
export const WithIcon = {
args: {
text: (React.createElement("span", { style: { display: 'flex', gap: '0.5rem', alignItems: 'center' } },
React.createElement(IconShipmentCheck, null),
" Label")),
},
};
//# sourceMappingURL=Label.stories.js.map