@cbpds/web-components
Version:
Web components for the CBP Design System.
463 lines (452 loc) • 16.1 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
export default {
title: 'Components/Card',
tags: ['beta'],
argTypes: {
title: {
name: 'Title (slotted)',
description: 'Set the title in the banner area of the card',
control: 'text',
},
bodyText: {
name: 'Body Text (slotted)',
description: 'Set the body text of the card',
control: 'text',
},
stretch: {
control: 'boolean',
},
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',
},
},
};
const renderActions = (layout, fill, color, context, withIcon, { btn1, btn2, btn3 }) => {
if (layout === 'double') {
return `
<div slot="cbp-card-actions">
<cbp-button tag="${btn2.tag}" ${btn2.tag == 'a' ? `href="#"` : ''} fill=${fill} color="${btn2.color}" context="${context}" aria-describedby="card-heading-1">
${withIcon ? `<cbp-icon name="arrow-right"></cbp-icon>` : ''}
${btn2.label}
</cbp-button>
<cbp-button tag="${btn1.tag}" ${btn1.tag == 'a' ? `href="#"` : ''} fill=${fill} color="${color == 'danger' ? 'danger' : btn1.color}" context="${context}" aria-describedby="card-heading-1">
${withIcon ? `<cbp-icon name="check"></cbp-icon>` : ''}
${btn1.label}
</cbp-button>
</div>
`;
}
else if (layout === 'triple') {
return `
<div slot="cbp-card-actions">
<cbp-button tag="${btn3.tag}" ${btn3.tag == 'a' ? `href="#"` : ''} fill=${fill} color="${btn3.color}" context="${context}" aria-describedby="card-heading-1">
${withIcon ? `<cbp-icon name="eye"></cbp-icon>` : ''}
${btn3.label}
</cbp-button>
<cbp-button tag="${btn2.tag}" ${btn2.tag == 'a' ? `href="#"` : ''} fill=${fill} color="${btn2.color}" context="${context}" aria-describedby="card-heading-1">
${withIcon ? `<cbp-icon name="arrow-right"></cbp-icon>` : ''}
${btn2.label}
</cbp-button>
<cbp-button tag="${btn1.tag}" ${btn1.tag == 'a' ? `href="#"` : ''} fill=${fill} color="${color == 'danger' ? 'danger' : btn1.color}" context="${context}" aria-describedby="card-heading-1">
${withIcon ? `<cbp-icon name="check"></cbp-icon>` : ''}
${btn1.label}
</cbp-button>
</div>
`;
}
else {
return `
<div slot="cbp-card-actions">
<cbp-button tag="${btn1.tag}" ${btn1.tag == 'a' ? `href="#"` : ''} fill=${fill} color="${color == 'danger' ? 'danger' : btn1.color}" context="${context}" aria-describedby="card-heading-1">
${withIcon ? `<cbp-icon name="check"></cbp-icon>` : ''}
${btn1.label}
</cbp-button>
</div>
`;
}
};
const GeneralTemplate = ({ color, title, bodyText, withIcon, context, sx }) => {
return `
<cbp-card
${color ? `color=${color}` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
${sx ? `sx='${JSON.stringify(sx)}'` : ''}
>
<cbp-typography tag="h4" slot="cbp-card-title">
${withIcon ? `<cbp-icon name="triangle-exclamation" size="1.25rem"></cbp-icon>` : ''}
${title}
</cbp-typography>
<p>${bodyText}</p>
</cbp-card>
`;
};
const DecisionTemplate = ({ title, color, bodyText, actionsLayout, actionsFill, actionsConfig, withIcon, context, sx }) => {
return `
<cbp-card
variant="decision"
${color ? `color=${color}` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
${sx ? `sx='${JSON.stringify(sx)}'` : ''}
>
<cbp-typography tag="h4" slot="cbp-card-title" id="card-heading-1">
${withIcon ? `<cbp-icon name="triangle-exclamation" size="1.25rem"></cbp-icon>` : ''}
${title}
</cbp-typography>
<p>${bodyText}</p>
${renderActions(actionsLayout, actionsFill, color, context, withIcon, actionsConfig)}
</cbp-card>
`;
};
const BannerTemplate = ({ title, color, bodyText, withIcon, context, sx }) => {
return `
<cbp-card
variant="banner"
${color ? `color=${color}` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
${sx ? `sx='${JSON.stringify(sx)}'` : ''}
>
<cbp-typography tag="h4" slot="cbp-card-title">
${withIcon ? `<cbp-icon name="triangle-exclamation" size="1.25rem"></cbp-icon>` : ''}
${title}
</cbp-typography>
<p>${bodyText}</p>
</cbp-card>
`;
};
const FlagTemplate = ({ title, color, bodyText, withIcon, context, sx }) => {
return `
<cbp-card
variant="flag"
${color ? `color=${color}` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
${sx ? 'sx=' + JSON.stringify(sx) : ''}
>
<div slot="cbp-card-flag">
<img src="https://api.dicebear.com/9.x/personas/svg" />
</div>
<cbp-typography tag="h4" slot="cbp-card-title">
${withIcon ? `<cbp-icon name="triangle-exclamation" size="1.25rem"></cbp-icon>` : ''}
${title}
</cbp-typography>
<p>${bodyText}</p>
</cbp-card>
`;
};
const InteractiveTemplate = ({ title, color, disabled, bodyText, withIcon, interactive, href, variant, context, sx }) => {
setTimeout(() => {
let anchors = document.querySelectorAll('cbp-card a');
anchors.forEach(anchor => {
anchor.addEventListener('click', function (e) { e.preventDefault(); });
});
}, 500);
return `
<cbp-card
${variant !== 'default' ? `variant="${variant}"` : ''}
${interactive ? `interactive=${interactive}` : ''}
${href ? `href="${href}"` : ''}
${disabled ? `disabled` : ''}
${color ? `color=${color}` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
${sx ? `sx='${JSON.stringify(sx)}'` : ''}
>
${variant === 'flag' ? `<div slot="cbp-card-flag"><img src="https://api.dicebear.com/9.x/personas/svg" /></div>` : ''}
${interactive === 'selectable' ? `
<cbp-checkbox value="1" slot="cbp-card-title">
<cbp-typography tag="h4" sx='{"color":"var(--cbp-card-color-title)"}'>
${withIcon ? `<cbp-icon name="triangle-exclamation" size="1.25rem"></cbp-icon>` : ''}
${title}
</cbp-typography>
<input
type="checkbox"
name="multiCard"
value="1"
style="margin-left: auto"
/>
</cbp-checkbox>
`
: (interactive === 'radio' ?
`<cbp-radio value="1" slot="cbp-card-title">
<cbp-typography tag="h4" sx='{"color":"var(--cbp-card-color-title)"}'>
${withIcon ? `<cbp-icon name="triangle-exclamation" size="1.25rem"></cbp-icon>` : ''}
${title}
</cbp-typography>
<input
type= "radio"
name= "radio"
value= "1"
/>
</cbp-radio>`
:
`<cbp-typography tag="h4" slot="cbp-card-title">
${withIcon ? `<cbp-icon name="triangle-exclamation" size="1.25rem"></cbp-icon>` : ''}
${title}
</cbp-typography>`)}
<p>${bodyText}</p>
</cbp-card>
`;
};
export const GeneralCard = GeneralTemplate.bind({});
GeneralCard.args = {
title: "Card Title",
bodyText: "Here is an example of some body text for this purely informational card",
};
GeneralCard.argTypes = {};
export const DecisionCard = DecisionTemplate.bind({});
DecisionCard.args = {
title: "Card Title",
bodyText: "Here is an example of some body text for this decision card.",
actionsLayout: "single",
actionsFill: "solid",
actionsConfig: {
btn1: {
label: "Action 1",
tag: "button",
color: "primary",
},
btn2: {
label: "Action 2",
tag: "button",
color: "secondary",
},
btn3: {
label: "Action 3",
tag: "button",
color: "tertiary",
},
},
};
DecisionCard.argTypes = {
color: {
name: "Color",
description: "Set the color of the card",
control: "select",
options: ["default", "danger"],
},
actionsLayout: {
name: "Actions Layout",
description: "Choose actions layout of the card component",
control: "radio",
options: ["single", "double", "triple"],
},
actionsFill: {
name: "Actions Fill",
description: "Choose the fill of the actions in the card component",
control: "radio",
options: ["solid", "outline", "ghost"]
},
actionsConfig: {
name: "Decision Card Actions",
description: "Configure card button labels and colors. Available button colors: `primary`, `secondary`, `tertiary` and `danger`",
control: "object",
},
};
export const BannerCard = BannerTemplate.bind({});
BannerCard.args = {
title: "Banner Card Title",
bodyText: "Here is an example of some supplementary text for this purely informational card",
};
export const FlagCard = FlagTemplate.bind({});
FlagCard.args = {
title: "Card Title",
bodyText: "Here is an example of some body text for this purely informational card",
};
FlagCard.argTypes = {
color: {
name: "Color",
description: "Set the color of the card",
control: "select",
options: ["default", "info", "success", "warning", "danger"],
},
};
export const InteractiveCard = InteractiveTemplate.bind({});
InteractiveCard.args = {
title: "Banner Card Title",
bodyText: "Here is an example of some supplementary text for this purely informational card",
interactive: "clickable",
variant: "default",
href: "https://us-cbp.github.io/design-system/?path=/story/introduction--introduction"
};
InteractiveCard.argTypes = {
interactive: {
name: "Interactive",
description: "Set the interactivity of the card",
control: "select",
options: ["clickable", "selectable", "radio"],
},
href: {
control: "text"
},
disabled: {
control: "boolean",
},
color: {
control: "select",
options: ["default", "danger"],
},
variant: {
name: "Variant",
description: "set Variant of the card",
control: "select",
options: ["default", "flag"]
},
};
const BannerAndDecisionTemplate = ({ title, color, bodyText, actionsLayout, actionsConfig, withIcon, context, sx }) => {
return `
<cbp-card
variant="banner"
${color ? `color=${color}` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
${sx ? `sx='${JSON.stringify(sx)}'` : ''}
>
<cbp-typography tag="h4" slot="cbp-card-title">
${withIcon ? `<cbp-icon name="triangle-exclamation" size="1.25rem"></cbp-icon>` : ''}
${title}
</cbp-typography>
<p>${bodyText}</p>
${renderActions(actionsLayout, "solid", color, context, withIcon, actionsConfig)}
</cbp-card>
`;
};
export const BannerAndDecisionCard = BannerAndDecisionTemplate.bind({});
BannerAndDecisionCard.args = {
title: "Banner Card Title",
bodyText: "Here is an example of some supplementary text for this purely informational card",
actionsLayout: "single",
actionsConfig: {
btn1: {
label: "Action 1",
tag: "button",
color: "primary",
},
btn2: {
label: "Action 2",
tag: "button",
color: "secondary",
},
btn3: {
label: "Action 3",
tag: "button",
color: "tertiary",
},
},
};
const InteractiveRadioListTemplate = ({ title, color, disabled, bodyText, withIcon, href, variant, context, sx }) => {
return `
<cbp-form-field group
label="Interactive Card Radio List"
description="Example of a radio list using the interactive card component"
field-id="cardRadioGroup"
>
<cbp-card
${variant !== 'default' ? `variant="${variant}"` : ''}
interactive= 'radio'
${href ? `href="${href}"` : ''}
${disabled ? `disabled` : ''}
${color ? `color=${color}` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
${sx ? `sx='${JSON.stringify(sx)}'` : ''}
>
<cbp-radio value="1" slot="cbp-card-title">
<cbp-typography tag="h4" sx='{"color":"var(--cbp-card-color-title)"}'>
${withIcon ? `<cbp-icon name="triangle-exclamation" size="1.25rem"></cbp-icon>` : ''}
${title}
</cbp-typography>
<input
type= "radio"
name= "radio"
value= "1"
/>
</cbp-radio>
<p>${bodyText}</p>
</cbp-card>
<cbp-card
${variant !== 'default' ? `variant="${variant}"` : ''}
interactive= 'radio'
${href ? `href="${href}"` : ''}
${disabled ? `disabled` : ''}
${color ? `color=${color}` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
${sx ? `sx='${JSON.stringify(sx)}'` : ''}
>
<cbp-radio value="1" slot="cbp-card-title">
<cbp-typography tag="h4" sx='{"color":"var(--cbp-card-color-title)"}'>
${withIcon ? `<cbp-icon name="triangle-exclamation" size="1.25rem"></cbp-icon>` : ''}
${title}
</cbp-typography>
<input
type= "radio"
name= "radio"
value= "1"
/>
</cbp-radio>
<p>${bodyText}</p>
</cbp-card>
<cbp-card
${variant !== 'default' ? `variant="${variant}"` : ''}
interactive= 'radio'
${href ? `href="${href}"` : ''}
${disabled ? `disabled` : ''}
${color ? `color=${color}` : ''}
${context && context != 'light-inverts' ? `context=${context}` : ''}
${sx ? `sx='${JSON.stringify(sx)}'` : ''}
>
<cbp-radio value="1" slot="cbp-card-title">
<cbp-typography tag="h4" sx='{"color":"var(--cbp-card-color-title)"}'>
${withIcon ? `<cbp-icon name="triangle-exclamation" size="1.25rem"></cbp-icon>` : ''}
${title}
</cbp-typography>
<input
type= "radio"
name= "radio"
value= "1"
/>
</cbp-radio>
<p>${bodyText}</p>
</cbp-card>
</cbp-form-field>
`;
};
export const InteractiveRadioList = InteractiveRadioListTemplate.bind({});
InteractiveRadioList.args = {
title: "Banner Card Title",
bodyText: "Here is an example of some supplementary text for this purely informational card",
interactive: "clickable",
variant: "default",
href: "https://us-cbp.github.io/design-system/?path=/story/introduction--introduction",
sx: { "margin-bottom": "var(--cbp-space-1x)" }
};
InteractiveRadioList.argTypes = {
interactive: {
name: "Interactive",
description: "Set the interactivity of the card",
control: "select",
options: ["clickable", "selectable"],
},
href: {
control: "text"
},
disabled: {
control: "boolean",
},
color: {
control: "select",
options: ["default", "danger"],
},
variant: {
name: "Variant",
description: "set Variant of the card",
control: "select",
options: ["default", "flag"]
}
};
//# sourceMappingURL=cbp-card.stories.js.map