gov-gui
Version:
Gov UI Component Library Typscript Build
81 lines (79 loc) • 2.99 kB
JavaScript
import { html } from "lit-html";
import { unsafeHTML } from "lit-html/directives/unsafe-html.js";
/**
* The page sample serves as a basic page wrapper with only one prop allowing you to test component structures
* and page layouts freely buy passing them in it. Feel free to try any component combination.
*/
export default {
title: 'Sample/Page',
tags: ['autodocs'],
toc: false,
parameters: {
// layout: 'fullscreen', // Makes the story take up the full screen
// backgrounds: {
// default: 'white',
// values: [
// { name: 'white', value: '#ffffff' },
// { name: 'gray', value: '#f5f5f5' },
// ],
// },
},
argTypes: {
content: {
control: 'text',
description: 'Content to be placed in the page slot',
table: {
type: { summary: 'string' },
defaultValue: { summary: '' },
category: 'Content',
},
},
},
};
const Template = (args) => html `
<page-sample>
${args.content ? unsafeHTML(args.content) : ''}
</page-sample>
`;
export const Sample = Template.bind({});
Sample.args = {
content: `<gov-layout
top-Bar-Items='[{"label": "Home", "href": "/"}, {"label": "Profile", "href": "/profile"}, {"label": "Settings", "href": "/settings"}]'
sidebar-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" }
]'
top-Bar-Username='[
{ "label": "User", "link": "/services", "icon": "", "subItems":
[
{ "label": "Development", "link": "/services/web", "icon": "" },
{ "label": "SEO", "link": "/services/seo", "icon": ""}
]
}
]'
show-side-bar-avatar='false'
sidebar-Username='Jakida Sam'
avatar-Img-Url="https://picsum.photos/400/300"
avatar-Initials="AP"
menu-Type="admin"
admin-Username='[
{ "label": "appa", "link": "/services", "icon": "adjustmentsHorizontal", "subItems": [
{ "label": "Development", "link": "/services/web", "icon": "adjustmentsHorizontal" },
{ "label": "SEO", "link": "/services/seo", "icon": "adjustmentsHorizontal", "subSubItems": [
{ "label": "On-Page SEO", "link": "/services/seo/on-page", "icon": "adjustmentsHorizontal" },
{ "label": "Off-Page SEO", "link": "/services/seo/off-page", "icon": "adjustmentsHorizontal" }
]}
]}
]'
>
<div style="width: 100%; height: 100dvh;display:flex;justify-content:center; align-items:center;">
More content here
</div>
</gov-layout>`,
};
//# sourceMappingURL=page-sample.stories.js.map