gov-gui/dist/collection/components/gov-layout/gov-layout.stories.js

Gov UI Component Library Typscript Build

import { html } from "lit-html";
/**
 * The Layout component organizes content into a responsive design, allowing
 * for effective arrangement and positioning of elements on a page.
 * It can include topbars, sidebars, and various content components,
 * such as tables, to create a consistent layout across devices.
 */
export default {
    title: 'Layouts/Layout',
    tags: ['autodocs'],
    argTypes: {
        topBarItems: {
            control: 'object',
            description: 'Array of navigation links displayed in the topbar.',
            table: {
                type: { summary: 'array' },
                category: 'Attributes',
                defaultValue: { summary: '[]' },
            },
        },
        sidebarItems: {
            control: 'object',
            description: 'Array of navigation links displayed in the sidebar.',
            table: {
                type: { summary: 'array' },
                category: 'Attributes',
                defaultValue: { summary: '[]' },
            },
        },
        sidebarUsername: {
            control: 'text',
            description: 'The username displayed in the sidebar.',
            table: {
                type: { summary: 'string' },
                category: 'Attributes',
                defaultValue: { summary: '' },
            },
        },
        topBarUsername: {
            control: 'object',
            description: 'The username displayed in the topbar along with dropdown infrmation.',
            table: {
                type: { summary: 'array' },
                category: 'Attributes',
                defaultValue: { summary: '' },
            },
        },
        avatarImgUrl: {
            control: 'text',
            description: 'URL of the user profile image displayed in both topbar and sidebar.',
            table: {
                type: { summary: 'string' },
                category: 'Attributes',
                defaultValue: { summary: '' },
            },
        },
        avatarInitials: {
            control: 'text',
            description: 'Initials to display when no avatar image is available.',
            table: {
                type: { summary: 'string' },
                category: 'Attributes',
                defaultValue: { summary: '' },
            },
        },
        showTopBarAvatar: {
            control: 'boolean',
            description: 'Whether to display the user avatar section in the topbar.',
            table: {
                type: { summary: 'boolean' },
                category: 'Attributes',
                defaultValue: { summary: 'true' },
            },
        },
        showSideBarAvatar: {
            control: 'boolean',
            description: 'Whether to display the user avatar section in the sidebar.',
            table: {
                type: { summary: 'boolean' },
                category: 'Attributes',
                defaultValue: { summary: 'true' },
            },
        },
        menuType: {
            control: { type: 'select', options: ['admin', 'site'] },
            description: 'Type of menu to display in the topbar (admin or site).',
            table: {
                type: { summary: 'string' },
                category: 'Attributes',
                defaultValue: { summary: 'admin' },
            },
        },
    },
};
const Template = (args) => html `
<gov-layout
    top-bar-items='${JSON.stringify(args.topBarItems)}'
    sidebar-items='${JSON.stringify(args.sidebarItems)}'
    sidebar-username="${args.sidebarUsername}"
    top-bar-username="${JSON.stringify(args.topBarUsername)}"
    avatar-img-url="${args.avatarImgUrl}"
    avatar-initials="${args.avatarInitials}"
    show-top-bar-avatar=${args.showTopBarAvatar}
    show-side-bar-avatar=${args.showSideBarAvatar}
    menu-type="${args.menuType}"
>

</gov-layout>
`;
export const Layout = Template.bind({});
Layout.args = {
    topBarItems: [
        { "label": "Home", "href": "/" },
        { "label": "Profile", "href": "/profile" },
        { "label": "Settings", "href": "/settings" }
    ],
    sidebarItems: [
        { "label": "Main Dashboard", "link": "/", "icon": "homeOutline" },
        { "label": "Payment", "link": "/Payment", "icon": "cash", "subItems": [
                { "label": "Portal", "link": "/Payment/Portal", "icon": "cash" },
                { "label": "Mobile", "link": "/Payment/Mobile", "icon": "cash" }
            ] },
        { "label": "Manage Sales", "link": "/about", "icon": "annotation" }
    ],
    sidebarUsername: 'Jakida Sam',
    topBarUsername: [
        { "label": "Jakida Sam", "link": "", "icon": "", "subItems": [
                { "label": "Settings", "link": "/settings", "icon": "" },
                { "label": "Logout", "link": "/logout", "icon": "" }
            ]
        }
    ],
    avatarImgUrl: 'https://picsum.photos/400/300',
    avatarInitials: 'JS',
    showTopBarAvatar: true,
    showSideBarAvatar: true,
    menuType: 'admin',
};
Layout.parameters = {
    docs: {
        source: {
            code: `<gov-layout
  top-bar-items='${JSON.stringify(Layout.args.topBarItems)}'
  sidebar-items='${JSON.stringify(Layout.args.sidebarItems)}'
  sidebar-username="${Layout.args.sidebarUsername}"
  top-bar-username="${JSON.stringify(Layout.args.topBarUsername)}"
  avatar-img-url="${Layout.args.avatarImgUrl}"
  avatar-initials="${Layout.args.avatarInitials}"
  show-top-bar-avatar=${Layout.args.showTopBarAvatar}
  show-side-bar-avatar=${Layout.args.showSideBarAvatar}
  menu-type="${Layout.args.menuType}">
  <!-- Content goes here -->
</gov-layout>`,
        },
    },
};
//# sourceMappingURL=gov-layout.stories.js.map