@cbpds/web-components
Version:
Web components for the CBP Design System.
55 lines (54 loc) • 1.66 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
export default {
title: 'Components/Action Bar',
tags: ['beta'],
argTypes: {
variant: {
control: 'select',
options: ['inline', 'floating'],
},
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: {},
};
const Template = ({ actionBarInfo, variant, context }) => {
return `
<cbp-action-bar
${variant ? `variant=${variant}` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
>
<cbp-typography
slot='cbp-action-bar-info'
tag='div'
>
${actionBarInfo}
</cbp-typography>
<cbp-button
${context && context != 'light-inverts' ? `context=${context}` : ''}
fill="ghost"
>
Action 1
</cbp-button>
<cbp-button
${context && context != 'light-inverts' ? `context=${context}` : ''}
fill="ghost"
>
Action 2
</cbp-button>
</cbp-action-bar>
`;
};
export const ActionBar = Template.bind({});
ActionBar.args = {
actionBarInfo: `0 items selected.`,
};
//# sourceMappingURL=cbp-action-bar.stories.js.map