gov-gui
Version:
Gov UI Component Library Typscript Build
166 lines (165 loc) • 5.01 kB
JavaScript
import { html } from "lit-html";
/** GovBox is used to control the layout of elements across various screen sizes, allowing for customizable column sizes, gaps, and alignment. */
export default {
title: 'Layouts/Box',
component: 'gov-box',
tags: ['autodocs'],
argTypes: {
size: {
control: 'number',
description: 'Column size for the box (1 to 12)',
table: {
type: { summary: 'number' },
defaultValue: { summary: 12 },
category: 'Attributes',
},
},
xs: {
control: 'number',
description: 'Column size for extra small screens',
table: {
type: { summary: 'number' },
defaultValue: { summary: 0 },
category: 'Layout Sizes',
},
},
sm: {
control: 'number',
description: 'Column size for small screens',
table: {
type: { summary: 'number' },
defaultValue: { summary: 0 },
category: 'Layout Sizes',
},
},
md: {
control: 'number',
description: 'Column size for medium screens',
table: {
type: { summary: 'number' },
defaultValue: { summary: 0 },
category: 'Layout Sizes',
},
},
lg: {
control: 'number',
description: 'Column size for large screens',
table: {
type: { summary: 'number' },
defaultValue: { summary: 0 },
category: 'Layout Sizes',
},
},
xl: {
control: 'number',
description: 'Column size for extra large screens',
table: {
type: { summary: 'number' },
defaultValue: { summary: 0 },
category: 'Layout Sizes',
},
},
align: {
control: 'select',
options: ['start', 'center', 'end'],
description: 'Vertical alignment of the box content',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'start' },
category: 'Attributes',
},
},
justify: {
control: 'select',
options: ['start', 'center', 'end', 'between', 'around', 'evenly'],
description: 'Horizontal alignment of the box content',
table: {
type: { summary: 'string' },
defaultValue: { summary: 'start' },
category: 'Attributes',
},
},
gap: {
control: 'text',
description: 'Gap between elements inside the box',
table: {
type: { summary: 'string' },
defaultValue: { summary: '0' },
category: 'Attributes',
},
},
auto: {
control: 'boolean',
description: 'Sets the box to auto width',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false },
category: 'Attributes',
},
},
isFlexBox: {
control: 'boolean',
description: 'Sets box component to a flexbox',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: false },
category: 'Attributes',
},
},
classes: {
control: 'text',
description: 'Custom CSS classes to apply to the box',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
category: 'Attributes',
},
},
styles: {
control: 'object',
description: 'Custom inline styles to apply to the box',
table: {
type: { summary: 'object' },
defaultValue: { summary: '{}' },
category: 'Attributes',
},
},
}
};
const Template = (args) => html `
<gov-box
size="${args.size}"
xs="${args.xs}"
sm="${args.sm}"
md="${args.md}"
lg="${args.lg}"
xl="${args.xl}"
align="${args.align}"
justify="${args.justify}"
gap="${args.gap}"
?auto="${args.auto}"
is-flex-box="${args.isFlexBox}"
classes="${args.classes}"
.styles="${args.styles}"
>
<gov-chip label="UI/UX Design"></gov-chip>
<gov-chip label="UI/UX Design"></gov-chip>
</gov-box>
`;
export const Box = Template.bind({});
Box.args = {
size: 12,
xs: 0,
sm: 0,
md: 0,
lg: 0,
xl: 0,
align: 'start',
justify: 'start',
gap: '10px',
auto: false,
isFlexBox: false,
classes: '',
styles: {},
};
//# sourceMappingURL=gov-box.stories.js.map