gov-gui
Version:
Gov UI Component Library Typscript Build
96 lines (95 loc) • 3.46 kB
JavaScript
import { html } from "lit-html";
/**
* SideBar provides users with access to different sections or pages of an application.
* It can be presented as menus, tabs, or links and helps users navigate through the interface, ensuring clear access to key areas.
*/
export default {
title: 'Layouts/SideBar',
tags: ['autodocs'],
argTypes: {
sidebarUsername: {
control: 'text',
description: 'The username displayed in the sidebar.',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
category: 'Attributes',
},
},
avatarImgUrl: {
control: 'text',
description: 'URL of the user profile image displayed in the sidebar.',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
category: 'Attributes',
},
},
avatarInitials: {
control: 'text',
description: 'Initials to display when no avatar image is available.',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
category: 'Attributes',
},
},
showSideBarAvatar: {
control: 'boolean',
description: 'Whether to display the user avatar section in the sidebar.',
table: {
type: { summary: 'boolean' },
defaultValue: { summary: 'true' },
category: 'Attributes',
},
},
items: {
control: 'object',
description: 'Array of navigation links displayed in the sidebar. Each link should have a name, url, and icon.',
table: {
type: { summary: 'array' },
defaultValue: { summary: '[]' },
category: 'Attributes',
},
},
},
};
const Template = (args) => html `
<gov-sidebar
sidebar-username="${args.sidebarUsername}"
avatar-img-url="${args.avatarImgUrl}"
avatar-initials="${args.avatarInitials}"
show-side-bar-avatar=${args.showSideBarAvatar}
items='${JSON.stringify(args.items)}'
></gov-sidebar>
`;
export const SideBar = Template.bind({});
SideBar.args = {
sidebarUsername: 'Jakida Sam',
avatarImgUrl: 'https://picsum.photos/400/300',
avatarInitials: 'JS',
showSideBarAvatar: true,
items: [
{ "label": "Home", "link": "/", "icon": "homeOutline" },
{ "label": "Services", "link": "/services", "icon": "adjustmentsHorizontal", "subItems": [
{ "label": "Web Development", "link": "/services/web", "icon": "adjustmentsHorizontal" },
{ "label": "SEO", "link": "/services/seo", "icon": "adjustmentsHorizontal" }
] },
{ "label": "About", "link": "/about", "icon": "annotation" },
{ "label": "Contact", "link": "/contact", "icon": "phone" }
],
};
SideBar.parameters = {
docs: {
source: {
code: ` <gov-sidebar
sidebar-username="${SideBar.args.sidebarUsername}"
avatar-img-url="${SideBar.args.avatarImgUrl}"
avatar-initials="${SideBar.args.avatarInitials}"
show-side-bar-avatar=${SideBar.args.showSideBarAvatar}
items='${JSON.stringify(SideBar.args.items)}'>
</gov-sidebar>`,
},
},
};
//# sourceMappingURL=gov-sidebar.stories.js.map