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

Gov UI Component Library Typscript Build

import { html } from "lit-html";
/** The TopBar, also known as a navigation bar, provides a consistent area for primary navigation and actions. It typically contains elements like menus, buttons, and search bars.*/
export default {
    title: 'Layouts/TopBar',
    tags: ['autodocs'],
    argTypes: {
        logo: {
            control: 'text',
            description: 'Logo image displayed in the topbar.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '../../assets/images/Logo (1).png' },
                category: 'Attributes',
            },
        },
        avatarInitials: {
            control: 'text',
            description: 'Initials to display when no avatar image is available.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Attributes',
            },
        },
        avatarImgUrl: {
            control: 'text',
            description: 'URL of the user profile image displayed in the topbar.',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: '' },
                category: 'Attributes',
            },
        },
        topBarUsername: {
            control: 'object',
            description: 'The username displayed in the topbar along with dropdown infrmation.',
            table: {
                type: { summary: 'array' },
                defaultValue: { summary: '' },
                category: 'Attributes',
            },
        },
        siteMenuItems: {
            control: 'object',
            description: 'Array of site navigation links displayed in the topbar.',
            table: {
                type: { summary: 'array' },
                defaultValue: { summary: '[]' },
                category: 'Attributes',
            },
        },
        menuType: {
            control: 'select',
            options: ['admin', 'site'],
            description: 'Type of menu to display (admin or site).',
            table: {
                type: { summary: 'string' },
                defaultValue: { summary: 'admin' },
                category: 'Attributes',
            },
        },
        showTopBarAvatar: {
            control: 'boolean',
            description: 'Whether to display the user avatar section in the topbar.',
            table: {
                type: { summary: 'boolean' },
                defaultValue: { summary: 'true' },
                category: 'Attributes',
            },
        },
    }
};
const Template = (args) => html `
<gov-topbar 
    logo="${args.logo}"
    avatar-initials="${args.avatarInitials}"
    avatar-img-url="${args.avatarImgUrl}"
    top-bar-username="${JSON.stringify(args.topBarUsername)}"
    site-menu-items='${JSON.stringify(args.siteMenuItems)}'
    menu-type="${args.menuType}"
    show-top-bar-avatar=${args.showTopBarAvatar}> 
</gov-topbar>
`;
export const TopBar = Template.bind({});
TopBar.args = {
    logo: '../../assets/images/Logo (1).png',
    avatarInitials: 'JS',
    avatarImgUrl: 'https://picsum.photos/400/300',
    topBarUsername: [
        { "label": "Jakida Sam", "link": "", "icon": "", "subItems": [
                { "label": "Settings", "link": "/settings", "icon": "" },
                { "label": "Logout", "link": "/logout", "icon": "" }
            ]
        }
    ],
    siteMenuItems: [
        { "label": "Home", "href": "/" },
        { "label": "Profile", "href": "/profile" },
        { "label": "Settings", "href": "/settings" }
    ],
    menuType: 'admin',
    showTopBarAvatar: true,
};
//# sourceMappingURL=gov-topbar.stories.js.map