gov-gui
Version:
Gov UI Component Library Typscript Build
64 lines (63 loc) • 2.21 kB
JavaScript
import { fn } from "@storybook/test";
import { html } from "lit-html";
/** Row components can be used to quickly create basic grid layouts or to control your other
* component layouts and override when needed at the column level. Containers help in
* defining the layout structure of your application.
*
* ## Container Size Reference
*
* ### Breakpoints
*
* | Size | Device Category | Min Width | Max Container Width |
* | :--: | :-------------- | :-------: | :----------------: |
* | `sm` | Portrait phones | **576px** | 540px |
* | `md` | Tablets | **768px** | 720px |
* | `lg` | Desktops | **992px** | 960px |
* | `xl` | Large desktops | **1200px** | 1140px |
* | `xxl` | Ultra-wide desktops | **1400px** | 1320px |
*
* > **Note:** Container max widths only apply when the viewport width exceeds the minimum breakpoint.
* */
export default {
title: 'Layouts/Container',
tags: ['autodocs'],
parameters: {
actions: {
handles: { onClick: fn() },
}
},
argTypes: {
size: {
control: "select",
options: ['sm', 'md', 'lg', 'xl', 'xxl'],
description: 'Specifies the size of the container, which affects the width and layout.',
table: {
type: { summary: 'string' },
category: 'Attributes',
defaultValue: { summary: '' },
},
},
fluid: {
control: "boolean",
description: 'Indicates whether the container should be fluid (full width) or fixed width.',
table: {
type: { summary: 'boolean' },
category: 'Attributes',
defaultValue: { summary: 'false' },
},
},
}
};
// Template for the container component
const Template = (args) => html `
<gov-container size="${args.size}" fluid="${args.fluid}">
<gov-alert header="Success!" label="This was successful" variant="success"></gov-alert>
</gov-container>
`;
// Default story for the container
export const Row = Template.bind({});
Row.args = {
size: 'sm',
fluid: false, // Default fluid state
};
//# sourceMappingURL=gov-container.stories.js.map