@cbpds/web-components
Version:
Web components for the CBP Design System.
85 lines (84 loc) • 2.48 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
export default {
title: 'Components/Breadcrumb',
tags: ['beta'],
argTypes: {
divider: {
control: 'text',
},
context: {
control: 'select',
options: ["light-inverts", "light-always", "dark-inverts", "dark-always"]
},
sx: {
description: 'Supports adding inline styles as an object of key-value pairs comprised of CSS properties and values. Values should reference design tokens when possible.',
control: 'object',
},
},
args: {},
};
function generateBreadcrumbs(breadcrumbs, context) {
const html = breadcrumbs.map(({ text, href }) => {
return `<cbp-link href=${generateUnvisitedLink(href)} ${context && context != 'light-inverts' ? `context=${context}` : ''}>${text}</cbp-link>`;
});
return html.join('');
}
function generateUnvisitedLink(href) {
if (href == '#')
return '?' + (Math.random() + 1).toString(26).slice(2, 7);
else
return href;
}
const Template = ({ breadcrumbs, home, divider, context, sx }) => {
setTimeout(() => {
let anchors = document.querySelectorAll('cbp-breadcrumb a');
anchors.forEach(anchor => {
anchor.addEventListener('click', function (e) { e.preventDefault(); });
});
}, 1000);
return `
<cbp-breadcrumb
${divider ? `divider="${divider}"` : ''}
${context && context != 'light-inverts' ? `context="${context}"` : ''}
${sx ? `sx=${JSON.stringify(sx)}` : ''}
>
<cbp-button
tag="a"
fill="ghost"
color="primary"
variant="square"
${context && context != 'light-inverts' ? `context="${context}"` : ''}
href="${home}"
accessibility-text="Home"
>
<cbp-icon name="home"></cbp-icon>
</cbp-button>
${generateBreadcrumbs(breadcrumbs, context)}
</cbp-breadcrumb>
`;
};
export const Breadcrumb = Template.bind({});
Breadcrumb.args = {
breadcrumbs: [
{
text: 'Page Title Level A',
href: '#'
},
{
text: 'Page Title Level B',
href: '#'
},
{
text: 'Page Title Level C',
href: '#'
},
{
text: 'Page Title Level D',
href: '#'
},
],
home: '#'
};
//# sourceMappingURL=cbp-breadcrumb.stories.js.map