@cbpds/web-components
Version:
Web components for the CBP Design System.
70 lines (69 loc) • 2.2 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
export default {
title: 'Components/Notice',
tags: ['beta'],
argTypes: {
title: {
name: 'Title (slotted)',
description: 'The visible text within the notice.',
control: 'text',
},
content: {
name: 'content (slotted)',
description: 'The visible text within the notice.',
control: 'text',
},
color: {
description: 'The color of the notice.',
control: { type: 'select' },
options: ['info', 'success', 'warning', 'danger'],
},
withIcon: {
control: 'boolean',
},
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',
},
},
};
function generateIcon(color) {
switch (color) {
case "info":
return 'circle-info';
case "success":
return 'check-circle';
case "warning":
return 'exclamation-circle';
case "danger":
return 'triangle-exclamation';
}
}
const NoticeTemplate = ({ title, withIcon, content, color, context, sx }) => {
return `
<cbp-notice
${color ? `color=${color}` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
${sx ? `sx=${JSON.stringify(sx)}` : ''}
>
<cbp-typography tag='p' slot="cbp-notice-title" context=${context}>
${withIcon ? `<cbp-icon name=${generateIcon(color)} sx='{"vertical-align":"bottom"}'></cbp-icon>` : ''}
${title}
</cbp-typography>
${content}
</cbp-notice>
`;
};
export const Notice = NoticeTemplate.bind({});
Notice.args = {
title: 'Notice Title',
color: 'info',
content: 'Notice: This is default text',
};
//# sourceMappingURL=cbp-notice.stories.js.map