@adyen/bento-mcp 0.11.0 → 0.12.1

package/dist/assets/components/button/components/ai-button/ai-button.vue

@@ -1 +1 @@
-<template> <div class="b-ai-button" :class="conditionalClass"> <div class="b-ai-button__animation" /> <bento-button class="b-ai-button__button" :condensed="condensed" :disabled="disabled" :inverse="inverse" variant="secondary" @click.capture.stop="onClick" > <template #iconLeft> <ai-filled-icon aria-hidden="true" class="b-ai-button__icon" /> </template> <slot></slot> </bento-button> </div> </template> <script setup lang="ts"> import { computed, onMounted, useSlots } from 'vue'; import BentoButton from '../../button.vue'; import AiFilledIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled'; import { useHasSlot } from '@/composables/use-has-slot/use-has-slot'; import { printDevelopmentWarning } from '@/utils/ts/print-development-warning'; import { type BentoAiButtonProps } from './ai-button.types'; const props = withDefaults(defineProps<BentoAiButtonProps>(), { link: undefined, type: 'button', condensed: false, disabled: false, inverse: false, }); const emit = defineEmits<{ /** * Click event handler */ (e: 'click', event: MouseEvent): void; }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const conditionalClass = computed(() => ({ 'b-ai-button--disabled': props.disabled, })); const onClick = (e: MouseEvent) => { // Prevent Vue3 from triggering event twice e.stopPropagation(); emit('click', e); }; onMounted(() => { if (!hasSlot('default')) { printDevelopmentWarning('An icon-only button cannot be a AI button'); } }); </script> <script lang="ts"> /** * AI Button component is used for cases where pressing a button starts an AI-related action. * * @example * import { BentoAiButton } from '@adyen/bento-vue2'; * * export default { * components: { BentoAiButton }, * template: ` * <bento-ai-button @click="onClick">Generate with AI</bento-ai-button> * ` * } */ export default { name: 'bento-ai-button', }; </script> <style lang="scss" scoped src="./ai-button.scss" /> 
+<template> <div class="b-ai-button" :class="conditionalClass"> <div class="b-ai-button__animation" /> <bento-button class="b-ai-button__button" :condensed="condensed" :disabled="disabled" :inverse="inverse" variant="secondary" @click.capture.stop="onClick" > <template #iconLeft> <ai-filled-icon aria-hidden="true" class="b-ai-button__icon" /> </template> <slot></slot> </bento-button> </div> </template> <script setup lang="ts"> import { computed, onMounted, useSlots } from 'vue'; import BentoButton from '../../button.vue'; import AiFilledIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled'; import { useHasSlot } from '@/composables/use-has-slot/use-has-slot'; import { printDevelopmentWarning } from '@/utils/ts/print-development-warning'; import { type BentoAiButtonProps } from './ai-button.types'; const props = withDefaults(defineProps<BentoAiButtonProps>(), { link: undefined, type: 'button', condensed: false, disabled: false, inverse: false, }); const emit = defineEmits<{ /** * Click event handler */ (e: 'click', event: MouseEvent): void; }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const conditionalClass = computed(() => ({ 'b-ai-button--disabled': props.disabled, 'b-ai-button--inverse': props.inverse, })); const onClick = (e: MouseEvent) => { // Prevent Vue3 from triggering event twice e.stopPropagation(); emit('click', e); }; onMounted(() => { if (!hasSlot('default')) { printDevelopmentWarning('An icon-only button cannot be a AI button'); } }); </script> <script lang="ts"> /** * AI Button component is used for cases where pressing a button starts an AI-related action. * * @example * import { BentoAiButton } from '@adyen/bento-vue2'; * * export default { * components: { BentoAiButton }, * template: ` * <bento-ai-button @click="onClick">Generate with AI</bento-ai-button> * ` * } */ export default { name: 'bento-ai-button', }; </script> <style lang="scss" scoped src="./ai-button.scss" /> 

package/dist/assets/components/button/components/button-actions/button-actions.docs.mdx

@@ -74,6 +74,9 @@ configured:
 
 }`}/>
 
+> **Icon requirement:** Only components from `@adyen/ui-assets-icons-16` are allowed in icon props and icon slots. Icon
+> fonts, custom SVGs, and external icon libraries are not supported.
+
 - `title`: the button's text.
 - `condensed` (optional): condensed button.
 - `critical` (optional): the button's red border and color.

package/dist/assets/components/button/components/button-actions/button-actions.internal.types.ts

@@ -0,0 +1 @@
+import type { BentoMenuProps } from '@/components/menu/menu.types'; import type { VueNodeElement } from '@/types/elements'; import type { OmitStrict } from '@/types/omit-strict'; import type { VNodeRef } from 'vue/types/vnode'; /** * Base interface for the Button and Menu objects */ export interface BentoButtonActionBase { title: string; icon?: VueNodeElement; iconLeft?: VueNodeElement; iconRight?: VueNodeElement; /** * Provides a template ref to the underlying component instance. */ elementRef?: Exclude<VNodeRef, string>; } /** * Type for the Menus passed as objects to Button Actions */ export type BentoActionMenu = BentoButtonActionBase & OmitStrict<BentoMenuProps, 'button' | 'data'> & Partial<Pick<BentoMenuProps, 'data'>>; 

package/dist/assets/components/button/components/button-actions/button-actions.stories.ts

@@ -1 +1 @@
-import { action } from '@storybook/addon-actions'; import { BentoButtonActionsLayout } from '@/components/button'; import ButtonActionsWithMenu from './__tests__/button-actions-with-menu.vue?raw'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoButtonActions from './button-actions.vue'; import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning'; import type { BentoButtonActionsList } from './button-actions.types'; export default { title: 'Button/Button Actions', component: BentoButtonActions, argTypes: { layout: { options: Object.values(BentoButtonActionsLayout), mapping: BentoButtonActionsLayout, control: { type: 'select', }, }, }, } as Meta; type Story = StoryObj<typeof BentoButtonActions>; const defaultCode = ` <script setup lang="ts"> import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning'; </script> <template> <bento-button-actions :actions="[{ title: 'Primary', event: clickedAction, icon: MachineLearningIcon, }, { title: 'Secondary', event: clickedAction, }, { title: 'Tertiary', event: clickedAction, }]" /> </template> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoButtonActions, MachineLearningIcon }, props: Object.keys(argTypes), template: ` <bento-button-actions v-bind="args" :actions="[{ title: 'Primary', event: clickedAction, icon: icon, }, { title: 'Secondary', event: clickedAction, }, { title: 'Tertiary', event: clickedAction, }]" > </bento-button-actions> `, setup(props) { const icon = MachineLearningIcon; return { args: isVue2 ? props : _args, clickedAction: action('input'), icon, }; }, }), parameters: storybookDocsParameter(defaultCode), }; export const Critical = { render: (_args, { argTypes }) => ({ components: { BentoButtonActions, MachineLearningIcon }, props: Object.keys(argTypes), template: ` <bento-button-actions v-bind="args" :actions="[{ title: 'Primary', critical: true, event: clickedAction, icon: args.icon, }, { title: 'Secondary', event: clickedAction, }]" > </bento-button-actions> `, setup(props) { return { args: isVue2 ? props : _args, clickedAction: action('input'), }; }, }), }; const withLinkCode = ` <script setup lang="ts"> import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning'; </script> <template> <bento-button-actions :actions="[{ title: 'Primary', event: clickedAction, icon: MachineLearningIcon, }, { title: 'Secondary', event: clickedAction, link: { variant: 'default', external: true, to: 'https://www.adyen.com/' }, }, { title: 'Tertiary', event: clickedAction, }]" /> </template> `; export const WithLink: Story = { render: (_args, { argTypes }) => ({ components: { BentoButtonActions, MachineLearningIcon }, props: Object.keys(argTypes), template: ` <bento-button-actions v-bind="args" :actions="[{ title: 'Primary', event: clickedAction, icon: icon, }, { title: 'Secondary (a link)', event: clickedAction, link: { variant: 'default', external: true, to: 'https://www.adyen.com/' }, }, { title: 'Tertiary', event: clickedAction, }]" > </bento-button-actions> `, setup(props) { const icon = MachineLearningIcon; return { args: isVue2 ? props : _args, clickedAction: action('input'), icon, }; }, }), parameters: storybookDocsParameter(withLinkCode), }; const withLoadingButtonCode = ` <template> <bento-button-actions :actions="[ { title: 'Loading Button', event: loadingClickAction, state: 'loading', icon, }, { title: 'Secondary', event: secondaryClickAction, state: 'start', icon, }, ]" /> </template> `; export const WithLoadingButton: Story = { render: (_args, { argTypes }) => ({ components: { BentoButtonActions, MachineLearningIcon }, props: Object.keys(argTypes), template: ` <bento-button-actions v-bind="args" :actions="[ { title: 'Loading Button', event: clickedAction, state: 'loading', icon, }, { title: 'Secondary', event: clickedAction, state: 'start', icon, }, ]" /> `, setup(props) { const icon = MachineLearningIcon; return { args: isVue2 ? props : _args, clickedAction: action('input'), icon, }; }, }), parameters: storybookDocsParameter(withLoadingButtonCode), }; export const WithMenu: Story = { render: (_args, { argTypes }) => ({ components: { BentoButtonActions }, props: Object.keys(argTypes), template: ` <bento-button-actions v-bind="args" /> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { actions: [ { title: 'Primary', event: () => true, }, { title: 'Secondary', event: () => true, }, { title: 'Tertiary', event: () => true, disabled: true, }, { title: 'Menu', data: [ { text: 'Item 1', secondaryText: 'Text', handler: () => true, critical: true, }, { text: 'Item 2', secondaryText: 'Text', handler: () => true, }, ], }, ] satisfies BentoButtonActionsList, }, parameters: storybookDocsParameter(ButtonActionsWithMenu), }; 
+import { action } from '@storybook/addon-actions'; import { BentoButtonActionsLayout } from '@/components/button'; const ButtonActionsWithMenu = "<template>\n <bento-button-actions :actions=\"actions\" />\n</template>\n\n<script setup lang=\"ts\">\n import { BentoButtonActions } from '@adyen/bento-vue2';\n\n const actions = [\n {\n title: 'Primary',\n event: () => true,\n },\n {\n title: 'Secondary',\n event: () => true,\n },\n {\n title: 'Tertiary',\n event: () => true,\n disabled: true,\n },\n {\n title: 'Menu',\n data: [\n {\n text: 'Item 1',\n secondaryText: 'Text',\n handler: () => true,\n critical: true,\n },\n {\n text: 'Item 2',\n secondaryText: 'Text',\n handler: () => true,\n },\n ],\n },\n ];\n</script>\n"; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoButtonActions from './button-actions.vue'; import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning'; import type { BentoButtonActionsList } from './button-actions.types'; const ButtonActionsCritical = "<template>\n <bento-button-actions :actions=\"actions\" />\n</template>\n\n<script setup lang=\"ts\">\n import { BentoButtonActions } from '@adyen/bento-vue2';\n\n const clickedAction = () => true;\n const actions = [\n {\n title: 'Primary',\n critical: true,\n event: clickedAction,\n },\n {\n title: 'Secondary',\n event: clickedAction,\n },\n ];\n</script>\n"; const ButtonActionsDefault = "<template>\n <bento-button-actions :actions=\"actions\" />\n</template>\n\n<script setup lang=\"ts\">\n import { BentoButtonActions } from '@adyen/bento-vue2';\n import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning';\n\n const clickedAction = () => true;\n const actions = [\n {\n title: 'Primary',\n event: clickedAction,\n icon: MachineLearningIcon,\n },\n {\n title: 'Secondary',\n event: clickedAction,\n },\n {\n title: 'Tertiary',\n event: clickedAction,\n },\n ];\n</script>\n"; const ButtonActionsWithLink = "<template>\n <bento-button-actions :actions=\"actions\" />\n</template>\n\n<script setup lang=\"ts\">\n import { BentoButtonActions } from '@adyen/bento-vue2';\n import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning';\n\n const clickedAction = () => true;\n const actions = [\n {\n title: 'Primary',\n event: clickedAction,\n icon: MachineLearningIcon,\n },\n {\n title: 'Secondary (a link)',\n event: clickedAction,\n link: {\n variant: 'default',\n external: true,\n to: 'https://www.adyen.com/',\n },\n },\n {\n title: 'Tertiary',\n event: clickedAction,\n },\n ];\n</script>\n"; const ButtonActionsWithLoadingButton = "<template>\n <bento-button-actions :actions=\"actions\" />\n</template>\n\n<script setup lang=\"ts\">\n import { BentoButtonActions, BentoLoadingButtonState } from '@adyen/bento-vue2';\n import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning';\n\n const clickedAction = () => true;\n const actions = [\n {\n title: 'Loading Button',\n event: clickedAction,\n state: BentoLoadingButtonState.LOADING,\n icon: MachineLearningIcon,\n },\n {\n title: 'Secondary',\n event: clickedAction,\n state: BentoLoadingButtonState.START,\n icon: MachineLearningIcon,\n },\n ];\n</script>\n"; export default { title: 'Button/Button Actions', component: BentoButtonActions, argTypes: { layout: { options: Object.values(BentoButtonActionsLayout), mapping: BentoButtonActionsLayout, control: { type: 'select', }, }, }, } as Meta; type Story = StoryObj<typeof BentoButtonActions>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoButtonActions, MachineLearningIcon }, props: Object.keys(argTypes), template: ` <bento-button-actions v-bind="args" :actions="[{ title: 'Primary', event: clickedAction, icon: icon, }, { title: 'Secondary', event: clickedAction, }, { title: 'Tertiary', event: clickedAction, }]" > </bento-button-actions> `, setup(props) { const icon = MachineLearningIcon; return { args: isVue2 ? props : _args, clickedAction: action('input'), icon, }; }, }), parameters: storybookDocsParameter(ButtonActionsDefault), }; export const Critical = { render: (_args, { argTypes }) => ({ components: { BentoButtonActions, MachineLearningIcon }, props: Object.keys(argTypes), template: ` <bento-button-actions v-bind="args" :actions="[{ title: 'Primary', critical: true, event: clickedAction, icon: args.icon, }, { title: 'Secondary', event: clickedAction, }]" > </bento-button-actions> `, setup(props) { return { args: isVue2 ? props : _args, clickedAction: action('input'), }; }, }), parameters: storybookDocsParameter(ButtonActionsCritical), }; export const WithLink: Story = { render: (_args, { argTypes }) => ({ components: { BentoButtonActions, MachineLearningIcon }, props: Object.keys(argTypes), template: ` <bento-button-actions v-bind="args" :actions="[{ title: 'Primary', event: clickedAction, icon: icon, }, { title: 'Secondary (a link)', event: clickedAction, link: { variant: 'default', external: true, to: 'https://www.adyen.com/' }, }, { title: 'Tertiary', event: clickedAction, }]" > </bento-button-actions> `, setup(props) { const icon = MachineLearningIcon; return { args: isVue2 ? props : _args, clickedAction: action('input'), icon, }; }, }), parameters: storybookDocsParameter(ButtonActionsWithLink), }; export const WithLoadingButton: Story = { render: (_args, { argTypes }) => ({ components: { BentoButtonActions, MachineLearningIcon }, props: Object.keys(argTypes), template: ` <bento-button-actions v-bind="args" :actions="[ { title: 'Loading Button', event: clickedAction, state: 'loading', icon, }, { title: 'Secondary', event: clickedAction, state: 'start', icon, }, ]" /> `, setup(props) { const icon = MachineLearningIcon; return { args: isVue2 ? props : _args, clickedAction: action('input'), icon, }; }, }), parameters: storybookDocsParameter(ButtonActionsWithLoadingButton), }; export const WithMenu: Story = { render: (_args, { argTypes }) => ({ components: { BentoButtonActions }, props: Object.keys(argTypes), template: ` <bento-button-actions v-bind="args" /> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { actions: [ { title: 'Primary', event: () => true, }, { title: 'Secondary', event: () => true, }, { title: 'Tertiary', event: () => true, disabled: true, }, { title: 'Menu', data: [ { text: 'Item 1', secondaryText: 'Text', handler: () => true, critical: true, }, { text: 'Item 2', secondaryText: 'Text', handler: () => true, }, ], }, ] satisfies BentoButtonActionsList, }, parameters: storybookDocsParameter(ButtonActionsWithMenu), }; 

package/dist/assets/components/button/components/button-actions/button-actions.types.ts

@@ -1 +1 @@
-import type { BentoButtonProps } from '../../button.types'; import type { BentoMenuProps } from '@/components/menu/menu.types'; import type { BentoLoadingButtonState } from '../loading-button/loading-button.types'; import type { VueNodeElement } from '@/types/elements'; import type { OmitStrict } from '@/types/omit-strict'; import type { VNodeRef } from 'vue/types/vnode'; export type BentoButtonActionObject = BentoActionButton; // TODO: Update to Array<BentoButtonActionButton | BentoButtonActionMenuObject> in v2.0.0 export type BentoButtonActionsList = Array<BentoActionButton & BentoActionMenu>; export enum BentoButtonActionsLayoutBasic { BUTTONS_END = 'buttons-end', FILL_CONTAINER = 'fill-container', SPACE_BETWEEN = 'space-between', VERTICAL_STACK = 'vertical-stack', } export enum BentoButtonActionsLayoutExtended { BUTTONS_START = 'buttons-start', } /** * @deprecated Since v2.0.0. Use string literal instead. */ export const BentoButtonActionsLayout = { ...BentoButtonActionsLayoutBasic, ...BentoButtonActionsLayoutExtended }; export type BentoButtonActionsLayout = BentoButtonActionsLayoutBasic | BentoButtonActionsLayoutExtended; export interface BentoButtonActionsProps { /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * `title`: Button's text. * * `event`: Event triggered when clicking the Button. * * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`. * * @see BentoButton for a list of all the other props supported by each button action. * * ``` * [{ * title: 'Primary', * event: () => { ... }, * icon: FourPeopleIcon, * link: { * variant: 'default', * external: true, * to: 'https://www.adyen.com/' * }, * }, { * title: 'Secondary', * event: () => { ... } * disabled: true, * variant: 'secondary', * critical: true * }] * ``` */ actions: BentoButtonActionsList; /** * Sets the Button Actions to color scheme inverse */ inverse?: boolean; /** * Defines the layout in which the button actions is presented. * It can be one of: * * @values BUTTONS_START * @values BUTTONS_END * @values FILL_CONTAINER * @values SPACE_BETWEEN * @values VERTICAL_STACK */ layout?: string; } /** * Private */ /** * Base interface for the Button and Menu objects */ export interface BentoButtonActionBase { title: string; icon?: VueNodeElement; iconLeft?: VueNodeElement; iconRight?: VueNodeElement; /** * Provides a template ref to the underlying component instance. */ elementRef?: Exclude<VNodeRef, string>; } /** * Type for the Buttons passed as objects to Button Actions */ export interface BentoActionButton extends BentoButtonActionBase, BentoButtonProps { event?: (event: Event) => void; state?: BentoLoadingButtonState | `${BentoLoadingButtonState}`; iconOnly?: boolean; } /** * Type for the Menus passed as objects to Button Actions */ export type BentoActionMenu = BentoButtonActionBase & OmitStrict<BentoMenuProps, 'button' | 'data'> & Partial<Pick<BentoMenuProps, 'data'>>; 
+import type { BentoButtonProps } from '../../button.types'; import type { BentoLoadingButtonState } from '../loading-button/loading-button.types'; import type { BentoActionMenu, BentoButtonActionBase } from './button-actions.internal.types'; export interface BentoButtonActionObject extends BentoButtonActionBase, BentoButtonProps { event?: (event: Event) => void; state?: BentoLoadingButtonState | `${BentoLoadingButtonState}`; iconOnly?: boolean; } // TODO: Update to Array<BentoButtonActionButton | BentoButtonActionMenuObject> in v2.0.0 export type BentoButtonActionsList = Array<BentoButtonActionObject & BentoActionMenu>; export enum BentoButtonActionsLayoutBasic { BUTTONS_END = 'buttons-end', FILL_CONTAINER = 'fill-container', SPACE_BETWEEN = 'space-between', VERTICAL_STACK = 'vertical-stack', } export enum BentoButtonActionsLayoutExtended { BUTTONS_START = 'buttons-start', } /** * @deprecated Since v3.0.0. Use string literal instead. */ export const BentoButtonActionsLayout = { ...BentoButtonActionsLayoutBasic, ...BentoButtonActionsLayoutExtended }; export type BentoButtonActionsLayout = BentoButtonActionsLayoutBasic | BentoButtonActionsLayoutExtended; export interface BentoButtonActionsProps { /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * `title`: Button's text. * * `event`: Event triggered when clicking the Button. * * `icon` (optional): Vue Icon from the library `@adyen/ui-assets-icons-16`. * * @see BentoButton for a list of all the other props supported by each button action. * * ``` * [{ * title: 'Primary', * event: () => { ... }, * icon: FourPeopleIcon, * link: { * variant: 'default', * external: true, * to: 'https://www.adyen.com/' * }, * }, { * title: 'Secondary', * event: () => { ... } * disabled: true, * variant: 'secondary', * critical: true * }] * ``` */ actions: BentoButtonActionsList; /** * Sets the Button Actions to color scheme inverse */ inverse?: boolean; /** * Defines the layout in which the button actions is presented. * It can be one of: * * @values BUTTONS_START * @values BUTTONS_END * @values FILL_CONTAINER * @values SPACE_BETWEEN * @values VERTICAL_STACK */ layout?: string; } 

package/dist/assets/components/button/components/button-actions/button-actions.vue

@@ -1 +1 @@
-<template> <div ref="buttonActions" class="b-button-actions"> <div class="b-button-actions__container-wrapper" :class="conditionalClasses" role="group"> <div v-for="(button, index) in reversedActionsList" :key="index" ref="buttons" class="b-button-actions__button-wrapper" > <template v-if="button.data"> <bento-menu :ref="button.elementRef" :data="button.data" :close-menu-on-item-select="button.closeMenuOnItemSelect" :close-on-click-outside-options="button.closeOnClickOutsideOptions" :disable-arrow-down-opening-menu="button.disableArrowDownOpeningMenu" :menu-position="button.menuPosition" :menu-fixed-positioning="button.menuFixedPositioning" :menu-width="button.menuWidth" :revert-focus-to-button="button.revertFocusToButton" :teleport="button.teleport" > <template v-if="button.icon || button.iconLeft" #iconLeft> <component :is="button.icon || button.iconLeft" :svg-title="button.title"></component> </template> <template v-if="!isIconOnly(button)" #default> {{ button.title }} </template> </bento-menu> </template> <template v-else> <bento-loading-button v-if="button.state" :ref="button.elementRef" :condensed="button.condensed" :critical="button.critical" :disabled="button.disabled" :inverse="inverse" :state="button.state" :variant="button.variant || generateButtonVariantByIndex(index)" v-on="generateButtonEvents(button)" > <template v-if="button.icon || button.iconLeft" #iconLeft> <component :is="button.icon || button.iconLeft" :svg-title="button.title"></component> </template> <template v-if="!isIconOnly(button)" #default> {{ button.title }} </template> </bento-loading-button> <bento-button v-else :ref="button.elementRef" :condensed="button.condensed" :critical="button.critical" :disabled="button.disabled" :inverse="inverse" :link="button.link" :variant="button.variant || generateButtonVariantByIndex(index)" v-on="generateButtonEvents(button)" > <template v-if="button.icon || button.iconLeft" #iconLeft> <component :is="button.icon || button.iconLeft" :svg-title="button.title"></component> </template> <template v-if="!isIconOnly(button)" #default> {{ button.title }} </template> <template v-if="button.iconRight" #iconRight> <component :is="button.iconRight" :svg-title="button.title"></component> </template> </bento-button> </template> </div> </div> </div> </template> <script setup lang="ts"> import { computed, ref, toRef } from 'vue'; import BentoButton from '../../button.vue'; import type { BentoActionButton, BentoButtonActionsProps } from './button-actions.types'; import BentoLoadingButton from '../loading-button/loading-button.vue'; import BentoMenu from '@/components/menu/menu.vue'; import { useStackButtons } from './composables/use-stack-buttons/use-stack-buttons'; const props = withDefaults(defineProps<BentoButtonActionsProps>(), { inverse: false, layout: 'buttons-end', }); const buttonActions = ref<HTMLDivElement>(null); const buttons = ref<Array<HTMLDivElement>>(null); const stackButtons = useStackButtons(buttonActions, buttons, toRef(props, 'actions')); const reversedActionsList = computed(() => props.actions.slice().reverse()); const generateButtonVariantByIndex = actionIndex => { const lastActionIndex = props.actions.length - 1; return actionIndex === lastActionIndex ? 'primary' : 'secondary'; }; const conditionalClasses = computed(() => ({ [`b-button-actions--${props.layout}`]: true, [`b-button-actions--stacked-buttons`]: stackButtons.value, })); const generateButtonEvents = (button: BentoActionButton) => button?.event !== undefined ? { click: button.event, } : {}; const isIconOnly = (button: BentoActionButton) => button.iconOnly && (button.iconLeft || button.iconRight || button.icon); </script> <script lang="ts"> /** * ButtonActions component manages a set of actions a user can choose from by displaying a group of buttons. * * @example * import { BentoButtonActions } from '@adyen/bento-vue2'; * import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning'; * * const clickedAction = () => { //your action here } * * <template> * <bento-button-actions * :actions="[{ * title: 'Primary', * event: clickedAction, * icon: MachineLearningIcon, * }, { * title: 'Secondary', * event: clickedAction, * }, { * title: 'Tertiary', * event: clickedAction, * }]" * /> * </template> */ export default {}; </script> <style lang="scss" scoped src="./button-actions.scss" /> 
+<template> <div ref="buttonActions" class="b-button-actions"> <div class="b-button-actions__container-wrapper" :class="conditionalClasses" role="group"> <div v-for="(button, index) in reversedActionsList" :key="index" ref="buttons" class="b-button-actions__button-wrapper" > <template v-if="button.data"> <bento-menu :ref="button.elementRef" :data="button.data" :close-menu-on-item-select="button.closeMenuOnItemSelect" :close-on-click-outside-options="button.closeOnClickOutsideOptions" :disable-arrow-down-opening-menu="button.disableArrowDownOpeningMenu" :menu-position="button.menuPosition" :menu-fixed-positioning="button.menuFixedPositioning" :menu-width="button.menuWidth" :revert-focus-to-button="button.revertFocusToButton" :teleport="button.teleport" > <template v-if="button.icon || button.iconLeft" #iconLeft> <component :is="button.icon || button.iconLeft" :svg-title="button.title"></component> </template> <template v-if="!isIconOnly(button)" #default> {{ button.title }} </template> </bento-menu> </template> <template v-else> <bento-loading-button v-if="button.state" :ref="button.elementRef" :condensed="button.condensed" :critical="button.critical" :disabled="button.disabled" :inverse="inverse" :state="button.state" :variant="button.variant || generateButtonVariantByIndex(index)" v-on="generateButtonEvents(button)" > <template v-if="button.icon || button.iconLeft" #iconLeft> <component :is="button.icon || button.iconLeft" :svg-title="button.title"></component> </template> <template v-if="!isIconOnly(button)" #default> {{ button.title }} </template> </bento-loading-button> <bento-button v-else :ref="button.elementRef" :condensed="button.condensed" :critical="button.critical" :disabled="button.disabled" :inverse="inverse" :link="button.link" :variant="button.variant || generateButtonVariantByIndex(index)" v-on="generateButtonEvents(button)" > <template v-if="button.icon || button.iconLeft" #iconLeft> <component :is="button.icon || button.iconLeft" :svg-title="button.title"></component> </template> <template v-if="!isIconOnly(button)" #default> {{ button.title }} </template> <template v-if="button.iconRight" #iconRight> <component :is="button.iconRight" :svg-title="button.title"></component> </template> </bento-button> </template> </div> </div> </div> </template> <script setup lang="ts"> import { computed, ref, toRef } from 'vue'; import BentoButton from '../../button.vue'; import type { BentoButtonActionObject, BentoButtonActionsProps } from './button-actions.types'; import BentoLoadingButton from '../loading-button/loading-button.vue'; import BentoMenu from '@/components/menu/menu.vue'; import { useStackButtons } from './composables/use-stack-buttons/use-stack-buttons'; const props = withDefaults(defineProps<BentoButtonActionsProps>(), { inverse: false, layout: 'buttons-end', }); const buttonActions = ref<HTMLDivElement>(null); const buttons = ref<Array<HTMLDivElement>>(null); const stackButtons = useStackButtons(buttonActions, buttons, toRef(props, 'actions')); const reversedActionsList = computed(() => props.actions.slice().reverse()); const generateButtonVariantByIndex = actionIndex => { const lastActionIndex = props.actions.length - 1; return actionIndex === lastActionIndex ? 'primary' : 'secondary'; }; const conditionalClasses = computed(() => ({ [`b-button-actions--${props.layout}`]: true, [`b-button-actions--stacked-buttons`]: stackButtons.value, })); const generateButtonEvents = (button: BentoButtonActionObject) => button?.event !== undefined ? { click: button.event, } : {}; const isIconOnly = (button: BentoButtonActionObject) => button.iconOnly && (button.iconLeft || button.iconRight || button.icon); </script> <script lang="ts"> /** * ButtonActions component manages a set of actions a user can choose from by displaying a group of buttons. * * @example * import { BentoButtonActions } from '@adyen/bento-vue2'; * import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning'; * * const clickedAction = () => { //your action here } * * <template> * <bento-button-actions * :actions="[{ * title: 'Primary', * event: clickedAction, * icon: MachineLearningIcon, * }, { * title: 'Secondary', * event: clickedAction, * }, { * title: 'Tertiary', * event: clickedAction, * }]" * /> * </template> */ export default {}; </script> <style lang="scss" scoped src="./button-actions.scss" /> 

package/dist/assets/components/button/components/loading-button/loading-button.docs.mdx

@@ -20,17 +20,17 @@ Note that both the states of the button (`start`, `loading`, `success` or `fail`
 manually based on the state of the action you are waiting upon. For example, let's say clicking on this button would
 trigger a `POST` request:
 
--   Before the user clicks on the button, this will be shown initially in a `start` state.
--   Once the user clicks on the button, the `POST` request is triggered and the button's state has to be changed to
-    `loading` and have a matching text of your liking to represent that state. At this point the button will be rendered
-    as disabled and will not trigger any actions on click.
--   Once a response from the request is received, the loading button state has to be updated and its text updated
-    accordingly:
-    -   If the request was successful a `success` state has to be set with a corresponding text that marks success.
-    -   Otherwise a `fail` state needs to be set with a corresponding text that indicates failure and tells the user
-        they can retry the action if the button is clicked again.
--   In these two final states the button will be clickable again, for retrying on `fail` or doing any other action on
-    `success`.
+- Before the user clicks on the button, this will be shown initially in a `start` state.
+- Once the user clicks on the button, the `POST` request is triggered and the button's state has to be changed to
+  `loading` and have a matching text of your liking to represent that state. At this point the button will be rendered
+  as disabled and will not trigger any actions on click.
+- Once a response from the request is received, the loading button state has to be updated and its text updated
+  accordingly:
+    - If the request was successful a `success` state has to be set with a corresponding text that marks success.
+    - Otherwise a `fail` state needs to be set with a corresponding text that indicates failure and tells the user they
+      can retry the action if the button is clicked again.
+- In these two final states the button will be clickable again, for retrying on `fail` or doing any other action on
+  `success`.
 
 ## Variations
 
@@ -39,22 +39,22 @@ trigger a `POST` request:
 This property represents the state of the button and is of type `BentoLoadingButtonState`, which can take up one of the
 following values:
 
--   `BentoLoadingButtonState.START`: the initial state of the button, this state represents a button that has not
-    triggered any action yet.
--   `BentoLoadingButtonState.LOADING`: the state of the button that represents an action in process, during this state
-    the button click events will not be emitted.
--   `BentoLoadingButtonState.SUCCESS`: the state of the button that represents that an action has been completed
-    successfully.
--   `BentoLoadingButtonState.FAIL`: the state of the button that represents that an action has been completed
-    unsuccessfully.
+- `BentoLoadingButtonState.START`: the initial state of the button, this state represents a button that has not
+  triggered any action yet.
+- `BentoLoadingButtonState.LOADING`: the state of the button that represents an action in process, during this state the
+  button click events will not be emitted.
+- `BentoLoadingButtonState.SUCCESS`: the state of the button that represents that an action has been completed
+  successfully.
+- `BentoLoadingButtonState.FAIL`: the state of the button that represents that an action has been completed
+  unsuccessfully.
 
 ### Variant
 
 This property represent the variant referenced in the `bento-button` component. It is one of the following values:
 
--   `'primary'`: renders the `bento-loading-button` in the primary variant.
--   `'secondary'`: renders the `bento-loading-button` in the secondary variant.
--   `'tertiary'`: renders the `bento-loading-button` in the tertiary variant.
+- `'primary'`: renders the `bento-loading-button` in the primary variant.
+- `'secondary'`: renders the `bento-loading-button` in the secondary variant.
+- `'tertiary'`: renders the `bento-loading-button` in the tertiary variant.
 
 ## Slots
 
@@ -64,6 +64,9 @@ You can pass an icon to the `bento-loading-button` the same way you do to `bento
 However, the icon will only show in the `start` state, being replaced by the loading button respective icons in the
 other states.
 
+> **Icon requirement:** Only components from `@adyen/ui-assets-icons-16` are allowed in icon props and icon slots. Icon
+> fonts, custom SVGs, and external icon libraries are not supported.
+
 ## Modifiers
 
 ### Disabled
@@ -103,4 +106,4 @@ this component are as follows:
 
 Resources:
 
--   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=1901-27998&t=NHLd9msx8lGq3NNF-0)
+- [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=1901-27998&t=NHLd9msx8lGq3NNF-0)

package/dist/assets/components/button/components/loading-button/loading-button.stories.ts

@@ -1 +1 @@
-import { ref, watch } from 'vue'; import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { BentoButtonVariant } from '@/components/button'; import { computed, isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoLoadingButton from './loading-button.vue'; import DownloadIcon from '@adyen/ui-assets-icons-16/vue/download'; export default { title: 'Button/Loading Button', component: BentoLoadingButton, argTypes: { condensed: { control: { type: 'boolean', }, table: { type: { summary: 'boolean' }, }, }, critical: { control: { type: 'boolean', }, table: { type: { summary: 'boolean' }, }, }, default: { name: 'default', defaultValue: '', description: 'Button text', table: { type: { summary: 'VNode[]' }, }, control: { disable: true }, }, disabled: { control: { type: 'boolean', }, table: { type: { summary: 'boolean' }, }, }, state: { control: { type: 'select', }, table: { type: { summary: 'BentoLoadingButtonState: start, loading, success, fail', }, }, }, variant: { options: Object.values(BentoButtonVariant), control: { type: 'select', }, table: { type: { summary: `BentoButtonVariant: ${Object.values(BentoButtonVariant)}` }, }, }, }, } as Meta; type Story = StoryObj<typeof BentoLoadingButton>; const BUTTON_TEXT = { start: 'Button', loading: 'Loading', success: 'Success', fail: 'Retry', }; const defaultCode = ` <bento-loading-button state="loading" :variant="primary" @input="() => {}" > Loading </bento-loading-button> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoLoadingButton }, props: Object.keys(argTypes), template: ` <bento-loading-button v-bind="args" @click="clickedButtonAction"> {{ loadingButtonText }} </bento-loading-button> `, setup(props) { const args = isVue2 ? props : _args; const loadingButtonText = computed(() => BUTTON_TEXT[args.state]); return { clickedButtonAction: action('click'), loadingButtonText, args, }; }, }), args: { state: 'loading', variant: 'primary', }, parameters: storybookDocsParameter(defaultCode), }; const withIconCode = ` <bento-loading-button state="start" :variant="primary" @click="() => {}" > <template #iconLeft> <download-icon /> </template> Download </bento-loading-button> `; export const WithIcon: Story = { render: (_args, { argTypes }) => ({ components: { BentoLoadingButton, DownloadIcon }, props: Object.keys(argTypes), template: ` <bento-loading-button v-bind="args" @click="downloadAction" :state="loadingState"> <template #iconLeft> <download-icon /> </template> Download </bento-loading-button> `, setup(props) { const args = isVue2 ? props : _args; const loadingState = ref(args.state); const downloadAction = () => { loadingState.value = 'loading'; setTimeout(() => { loadingState.value = Math.random() < 0.5 ? 'success' : 'fail'; }, 1000); }; watch( () => args.state, () => { loadingState.value = args.state; } ); return { downloadAction, loadingState, args, }; }, }), args: { variant: 'primary', state: 'start', }, parameters: storybookDocsParameter(withIconCode), }; 
+import { ref, watch } from 'vue'; import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { BentoButtonVariant } from '@/components/button'; import { computed, isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoLoadingButton from './loading-button.vue'; import DownloadIcon from '@adyen/ui-assets-icons-16/vue/download'; const LoadingButtonDefault = "<template>\n <bento-loading-button state=\"loading\" variant=\"primary\" @click=\"clickedButtonAction\">\n Loading\n </bento-loading-button>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoLoadingButton } from '@adyen/bento-vue2';\n\n const clickedButtonAction = () => true;\n</script>\n"; const LoadingButtonWithIcon = "<template>\n <bento-loading-button :state=\"loadingState\" variant=\"primary\" @click=\"downloadAction\">\n <template #iconLeft>\n <download-icon />\n </template>\n Download\n </bento-loading-button>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoLoadingButton, BentoLoadingButtonState } from '@adyen/bento-vue2';\n import DownloadIcon from '@adyen/ui-assets-icons-16/vue/download';\n\n const loadingState = ref<BentoLoadingButtonState>(BentoLoadingButtonState.START);\n\n const downloadAction = () => {\n loadingState.value = BentoLoadingButtonState.LOADING;\n\n setTimeout(() => {\n loadingState.value = Math.random() < 0.5 ? BentoLoadingButtonState.SUCCESS : BentoLoadingButtonState.FAIL;\n }, 1000);\n };\n</script>\n"; export default { title: 'Button/Loading Button', component: BentoLoadingButton, argTypes: { condensed: { control: { type: 'boolean', }, table: { type: { summary: 'boolean' }, }, }, critical: { control: { type: 'boolean', }, table: { type: { summary: 'boolean' }, }, }, default: { name: 'default', defaultValue: '', description: 'Button text', table: { type: { summary: 'VNode[]' }, }, control: { disable: true }, }, disabled: { control: { type: 'boolean', }, table: { type: { summary: 'boolean' }, }, }, state: { control: { type: 'select', }, table: { type: { summary: 'BentoLoadingButtonState: start, loading, success, fail', }, }, }, variant: { options: Object.values(BentoButtonVariant), control: { type: 'select', }, table: { type: { summary: `BentoButtonVariant: ${Object.values(BentoButtonVariant)}` }, }, }, }, } as Meta; type Story = StoryObj<typeof BentoLoadingButton>; const BUTTON_TEXT = { start: 'Button', loading: 'Loading', success: 'Success', fail: 'Retry', }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoLoadingButton }, props: Object.keys(argTypes), template: ` <bento-loading-button v-bind="args" @click="clickedButtonAction"> {{ loadingButtonText }} </bento-loading-button> `, setup(props) { const args = isVue2 ? props : _args; const loadingButtonText = computed(() => BUTTON_TEXT[args.state]); return { clickedButtonAction: action('click'), loadingButtonText, args, }; }, }), args: { state: 'loading', variant: 'primary', }, parameters: storybookDocsParameter(LoadingButtonDefault), }; export const WithIcon: Story = { render: (_args, { argTypes }) => ({ components: { BentoLoadingButton, DownloadIcon }, props: Object.keys(argTypes), template: ` <bento-loading-button v-bind="args" @click="downloadAction" :state="loadingState"> <template #iconLeft> <download-icon /> </template> Download </bento-loading-button> `, setup(props) { const args = isVue2 ? props : _args; const loadingState = ref(args.state); const downloadAction = () => { loadingState.value = 'loading'; setTimeout(() => { loadingState.value = Math.random() < 0.5 ? 'success' : 'fail'; }, 1000); }; watch( () => args.state, () => { loadingState.value = args.state; } ); return { downloadAction, loadingState, args, }; }, }), args: { variant: 'primary', state: 'start', }, parameters: storybookDocsParameter(LoadingButtonWithIcon), }; 

package/dist/assets/components/button/components/loading-button/loading-button.vue

@@ -1 +1 @@
-<template> <bento-button :critical="isCritical" :variant="variant" :condensed="condensed" :disabled="disabled" :inverse="inverse" class="b-loading-button" :class="conditionalClasses" @click.capture.stop="onClick" > <slot></slot> <template v-if="state === 'start' && hasSlot('iconLeft')" #iconLeft> <slot name="iconLeft"></slot> </template> <template v-else-if="state !== 'start'" #iconLeft> <span class="b-loading-button__icon" data-testid="loading-button-rotating-icon"> <cross v-if="state === 'fail'" :svg-title="t('failed')" /> <checkmark v-else-if="state === 'success'" :svg-title="t('succeded')" /> <!-- TODO: Replace with new loading-indicator component --> <bento-loading-indicator v-else-if="state === 'loading'" small :inverse="isInverseLoadingIndicator" /> </span> </template> </bento-button> </template> <script setup lang="ts"> import { computed, type PropType, useSlots } from 'vue'; import { BentoLoadingButtonState } from './loading-button.types'; import { BentoLoadingIndicator } from '@/components/loading-indicator'; import BentoButton from '@/components/button/button.vue'; import Cross from '@adyen/ui-assets-icons-16/vue/cross-circle-fill'; import Checkmark from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill'; import { useHasSlot } from '@/composables/use-has-slot/use-has-slot'; import { useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = defineProps({ /** * Reduces sizing of button */ condensed: { type: BentoButton.props.condensed.type, default: false, }, /** * Displays loading-button as critical */ critical: { type: BentoButton.props.critical.type, default: false, }, /** * Disables button functonality */ disabled: { type: BentoButton.props.disabled.type, default: false, }, /** * Sets color set to inverse */ inverse: { type: Boolean, default: false, }, /** * State of the button. * @values start, loading, success, fail */ state: { type: String as PropType<BentoLoadingButtonState | `${BentoLoadingButtonState}`>, default: BentoLoadingButtonState.START, validator: (value: BentoLoadingButtonState) => Object.values(BentoLoadingButtonState).includes(value), }, /** * Types of flavour of Button */ variant: { type: BentoButton.props.variant.type, default: 'primary', validator: BentoButton.props.variant.validator, }, }); const emit = defineEmits<{ /** * Click event handler */ (e: 'click', event: MouseEvent): void; }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const conditionalClasses = computed(() => ({ [`b-loading-button--${props.variant}-${BentoLoadingButtonState.LOADING}`]: props.state === BentoLoadingButtonState.LOADING && !props.disabled, 'b-loading-button--loading': props.state === BentoLoadingButtonState.LOADING && !props.disabled, [`b-loading-button--${props.variant}-${BentoLoadingButtonState.SUCCESS}`]: props.state === BentoLoadingButtonState.SUCCESS, [`b-loading-button--inverse`]: props.inverse, })); const isInverseLoadingIndicator = computed( () => (props.variant === 'primary' && !props.inverse) || (props.variant !== 'primary' && props.inverse) ); const isCritical = computed( () => (props.critical && props.state === BentoLoadingButtonState.START) || props.state === BentoLoadingButtonState.FAIL ); const onClick = (e: MouseEvent) => { // Prevent Vue3 from triggering event twice e.stopPropagation(); if (props.state !== BentoLoadingButtonState.LOADING) { emit('click', e); } }; </script> <script lang="ts"> /** * Loading Button component is used for cases where pressing a button starts an event that requires a loading state, e.g. when you have any sort of asynchronous action and are waiting for a response * * @example * import { BentoLoadingButton } from '@adyen/bento-vue2'; * * export default { * components: { BentoLoadingButton }, * template: ` * <bento-loading-button state="loading" variant="secondary"> * Loading * </bento-loading button> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./loading-button.scss" /> 
+<template> <bento-button :critical="isCritical" :variant="variant" :condensed="condensed" :disabled="disabled" :inverse="inverse" class="b-loading-button" :class="conditionalClasses" @click.capture.stop="onClick" > <slot></slot> <template v-if="state === 'start' && hasSlot('iconLeft')" #iconLeft> <slot name="iconLeft"></slot> </template> <template v-else-if="state !== 'start'" #iconLeft> <span class="b-loading-button__icon" data-testid="loading-button-rotating-icon"> <cross v-if="state === 'fail'" :svg-title="t('failed')" /> <checkmark v-else-if="state === 'success'" :svg-title="t('succeded')" /> <!-- TODO: Replace with new loading-indicator component --> <bento-loading-indicator v-else-if="state === 'loading'" small :inverse="isInverseLoadingIndicator" /> </span> </template> </bento-button> </template> <script setup lang="ts"> import { computed, type PropType, useSlots } from 'vue'; import { BentoLoadingButtonState } from './loading-button.types'; import { BentoLoadingIndicator } from '@/components/loading-indicator'; import BentoButton from '@/components/button/button.vue'; import Cross from '@adyen/ui-assets-icons-16/vue/cross-circle-fill'; import Checkmark from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill'; import { useHasSlot } from '@/composables/use-has-slot/use-has-slot'; import { useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = defineProps({ /** * Reduces sizing of button */ condensed: { type: BentoButton.props.condensed.type, default: false, }, /** * Displays loading-button as critical */ critical: { type: BentoButton.props.critical.type, default: false, }, /** * Disables button functonality */ disabled: { type: BentoButton.props.disabled.type, default: false, }, /** * Sets color set to inverse */ inverse: { type: Boolean, default: false, }, /** * State of the button. * @values start, loading, success, fail */ state: { type: String as PropType<BentoLoadingButtonState | `${BentoLoadingButtonState}`>, default: BentoLoadingButtonState.START, validator: (value: BentoLoadingButtonState) => Object.values(BentoLoadingButtonState).includes(value), }, /** * Types of flavour of Button */ variant: { type: BentoButton.props.variant.type, default: 'primary', validator: BentoButton.props.variant.validator, }, }); const emit = defineEmits<{ /** * Click event handler */ (e: 'click', event: MouseEvent): void; }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const conditionalClasses = computed(() => ({ [`b-loading-button--${props.variant}-${BentoLoadingButtonState.LOADING}`]: props.state === BentoLoadingButtonState.LOADING && !props.disabled, 'b-loading-button--loading': props.state === BentoLoadingButtonState.LOADING && !props.disabled, [`b-loading-button--${props.variant}-${BentoLoadingButtonState.SUCCESS}`]: props.state === BentoLoadingButtonState.SUCCESS, [`b-loading-button--inverse`]: props.inverse, })); const isInverseLoadingIndicator = computed( () => (props.variant === 'primary' && !props.inverse) || (props.variant !== 'primary' && props.inverse) ); const isCritical = computed( () => (props.critical && props.state === BentoLoadingButtonState.START) || props.state === BentoLoadingButtonState.FAIL ); const onClick = (e: MouseEvent) => { // Prevent Vue3 from triggering event twice e.stopPropagation(); if (props.state !== BentoLoadingButtonState.LOADING) { emit('click', e); } }; </script> <script lang="ts"> /** * Loading Button component is used for cases where pressing a button starts an event that requires a loading state, e.g. when you have any sort of asynchronous action and are waiting for a response * * @example * import { BentoLoadingButton } from '@adyen/bento-vue2'; * * export default { * components: { BentoLoadingButton }, * template: ` * <bento-loading-button state="loading" variant="secondary"> * Loading * </bento-loading button> * ` * } */ export default { i18n: { messages }, name: 'bento-loading-button', }; </script> <style lang="scss" scoped src="./loading-button.scss" /> 

package/dist/assets/components/button/components/toggle-button/toggle-button.stories.ts

@@ -1 +1 @@
-import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import { computed, ref, watch } from 'vue'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoToggleButton from './toggle-button.vue'; import OptionsVerticalIcon from '@adyen/ui-assets-icons-16/vue/options-vertical'; import CheckmarkCircleFillIcon from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill'; export default { title: 'Button/Toggle Button', component: BentoToggleButton, argTypes: { condensed: { control: { type: 'boolean', }, table: { type: { summary: 'boolean' }, }, }, default: { name: 'default', defaultValue: '', description: 'Button text', table: { type: { summary: 'VNode[]' }, }, control: { disable: true }, }, disabled: { control: { type: 'boolean', }, table: { type: { summary: 'boolean' }, }, }, variant: { control: { type: 'select', }, table: { type: { summary: 'BentoButtonVariant: primary, secondary, tertiary' }, }, }, }, } as Meta; type Story = StoryObj<typeof BentoToggleButton>; const defaultCode = ` <bento-toggle-button variant="primary" :state="toggleState" @update:state="updateToggleState" > Toggle Button </bento-toggle-button> <script setup lang="ts"> import { BentoToggleButton } from '@adyen/bento-vue2' const toggleState = ref(false); const updateToggleState = (newToggleState: boolean) => { toggleState.value = newToggleState; }; </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoToggleButton }, props: Object.keys(argTypes), template: ` <bento-toggle-button v-bind="args" :toggled="toggleState" @click="clickedButtonAction" @update:toggled="updateToggleState" > {{toggleButtonText}} </bento-toggle-button> `, setup(props) { const args = isVue2 ? props : _args; const toggleState = ref<boolean>(args?.toggled); const toggleButtonText = computed(() => (toggleState.value ? 'Toggled' : 'Un-toggled')); const updateToggleState = (newToggleState: boolean) => { action('update:toggled')(newToggleState); toggleState.value = newToggleState; }; watch( () => args.toggled, () => { toggleState.value = args.toggled; } ); return { // Methods clickedButtonAction: action('click'), updateToggleState, // Values toggleButtonText, toggleState, args, }; }, }), args: { toggled: false, variant: 'primary', disabled: false, inverse: false, condensed: false, }, parameters: storybookDocsParameter(defaultCode), }; const withIconsCode = ` <bento-toggle-button variant="primary" :state="toggleState" @update:state="updateToggleState" > Toggle Button <template #iconLeft> <CheckmarkCircleFillIcon /> </template> <template #iconRight> <CheckmarkCircleFillIcon /> </template> </bento-toggle-button> <script setup lang="ts"> import { BentoToggleButton } from '@adyen/bento-vue2' import CheckmarkCircleFillIcon from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill'; const toggleState = ref(false); const updateToggleState = (newToggleState: boolean) => { toggleState.value = newToggleState; }; </script> `; export const WithIcons: Story = { render: (_args, { argTypes }) => ({ components: { BentoToggleButton, CheckmarkCircleFillIcon }, props: Object.keys(argTypes), template: ` <bento-toggle-button v-bind="args" :toggled="toggleState" @click="clickedButtonAction" @update:toggled="updateToggleState" > {{toggleButtonText}} <template #iconLeft> <CheckmarkCircleFillIcon /> </template> <template #iconRight> <CheckmarkCircleFillIcon /> </template> </bento-toggle-button> `, setup(props) { const args = isVue2 ? props : _args; const toggleState = ref<boolean>(args?.toggled); const toggleButtonText = computed(() => (toggleState.value ? 'Toggled' : 'Un-toggled')); const updateToggleState = (newToggleState: boolean) => { action('update:toggled')(newToggleState); toggleState.value = newToggleState; }; watch( () => args.toggled, () => { toggleState.value = args.toggled; } ); return { // Methods clickedButtonAction: action('click'), updateToggleState, // Values toggleButtonText, toggleState, args, }; }, }), args: { toggled: false, variant: 'primary', disabled: false, inverse: false, condensed: false, }, parameters: storybookDocsParameter(withIconsCode), }; const onlyIconCode = ` <bento-toggle-button variant="primary" :state="toggleState" @update:state="updateToggleState" > <template #iconLeft> <OptionsVerticalIcon /> </template> </bento-toggle-button> <script setup lang="ts"> import { BentoToggleButton } from '@adyen/bento-vue2' import OptionsVerticalIcon from '@adyen/ui-assets-icons-16/vue/options-vertical'; const toggleState = ref(false); const updateToggleState = (newToggleState: boolean) => { toggleState.value = newToggleState; }; </script> `; export const OnlyIcon: Story = { render: (_args, { argTypes }) => ({ components: { BentoToggleButton, OptionsVerticalIcon }, props: Object.keys(argTypes), template: ` <bento-toggle-button v-bind="args" :toggled="toggleState" @click="clickedButtonAction" @update:toggled="updateToggleState" > <template #iconLeft> <OptionsVerticalIcon /> </template> </bento-toggle-button> `, setup(props) { const args = isVue2 ? props : _args; const toggleState = ref<boolean>(args?.toggled); const updateToggleState = (newToggleState: boolean) => { action('update:toggled')(newToggleState); toggleState.value = newToggleState; }; watch( () => args.toggled, () => { toggleState.value = args.toggled; } ); return { // Methods clickedButtonAction: action('click'), updateToggleState, // Values toggleState, args, }; }, }), args: { toggled: false, variant: 'primary', disabled: false, inverse: false, condensed: false, }, parameters: storybookDocsParameter(onlyIconCode), }; 
+import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import { computed, ref, watch } from 'vue'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoToggleButton from './toggle-button.vue'; import OptionsVerticalIcon from '@adyen/ui-assets-icons-16/vue/options-vertical'; import CheckmarkCircleFillIcon from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill'; const ToggleButtonDefault = "<template>\n <bento-toggle-button :toggled=\"toggleState\" variant=\"primary\" @update:toggled=\"updateToggleState\">\n {{ toggleState ? 'Toggled' : 'Un-toggled' }}\n </bento-toggle-button>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoToggleButton } from '@adyen/bento-vue2';\n\n const toggleState = ref(false);\n const updateToggleState = (newToggleState: boolean) => {\n toggleState.value = newToggleState;\n };\n</script>\n"; const ToggleButtonOnlyIcon = "<template>\n <bento-toggle-button :toggled=\"toggleState\" variant=\"primary\" @update:toggled=\"updateToggleState\">\n <template #iconLeft>\n <options-vertical-icon />\n </template>\n </bento-toggle-button>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoToggleButton } from '@adyen/bento-vue2';\n import OptionsVerticalIcon from '@adyen/ui-assets-icons-16/vue/options-vertical';\n\n const toggleState = ref(false);\n const updateToggleState = (newToggleState: boolean) => {\n toggleState.value = newToggleState;\n };\n</script>\n"; const ToggleButtonWithIcons = "<template>\n <bento-toggle-button :toggled=\"toggleState\" variant=\"primary\" @update:toggled=\"updateToggleState\">\n {{ toggleState ? 'Toggled' : 'Un-toggled' }}\n <template #iconLeft>\n <checkmark-circle-fill-icon />\n </template>\n <template #iconRight>\n <checkmark-circle-fill-icon />\n </template>\n </bento-toggle-button>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoToggleButton } from '@adyen/bento-vue2';\n import CheckmarkCircleFillIcon from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n\n const toggleState = ref(false);\n const updateToggleState = (newToggleState: boolean) => {\n toggleState.value = newToggleState;\n };\n</script>\n"; export default { title: 'Button/Toggle Button', component: BentoToggleButton, argTypes: { condensed: { control: { type: 'boolean', }, table: { type: { summary: 'boolean' }, }, }, default: { name: 'default', defaultValue: '', description: 'Button text', table: { type: { summary: 'VNode[]' }, }, control: { disable: true }, }, disabled: { control: { type: 'boolean', }, table: { type: { summary: 'boolean' }, }, }, variant: { control: { type: 'select', }, table: { type: { summary: 'BentoButtonVariant: primary, secondary, tertiary' }, }, }, }, } as Meta; type Story = StoryObj<typeof BentoToggleButton>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoToggleButton }, props: Object.keys(argTypes), template: ` <bento-toggle-button v-bind="args" :toggled="toggleState" @click="clickedButtonAction" @update:toggled="updateToggleState" > {{toggleButtonText}} </bento-toggle-button> `, setup(props) { const args = isVue2 ? props : _args; const toggleState = ref<boolean>(args?.toggled); const toggleButtonText = computed(() => (toggleState.value ? 'Toggled' : 'Un-toggled')); const updateToggleState = (newToggleState: boolean) => { action('update:toggled')(newToggleState); toggleState.value = newToggleState; }; watch( () => args.toggled, () => { toggleState.value = args.toggled; } ); return { // Methods clickedButtonAction: action('click'), updateToggleState, // Values toggleButtonText, toggleState, args, }; }, }), args: { toggled: false, variant: 'primary', disabled: false, inverse: false, condensed: false, }, parameters: storybookDocsParameter(ToggleButtonDefault), }; export const WithIcons: Story = { render: (_args, { argTypes }) => ({ components: { BentoToggleButton, CheckmarkCircleFillIcon }, props: Object.keys(argTypes), template: ` <bento-toggle-button v-bind="args" :toggled="toggleState" @click="clickedButtonAction" @update:toggled="updateToggleState" > {{toggleButtonText}} <template #iconLeft> <CheckmarkCircleFillIcon /> </template> <template #iconRight> <CheckmarkCircleFillIcon /> </template> </bento-toggle-button> `, setup(props) { const args = isVue2 ? props : _args; const toggleState = ref<boolean>(args?.toggled); const toggleButtonText = computed(() => (toggleState.value ? 'Toggled' : 'Un-toggled')); const updateToggleState = (newToggleState: boolean) => { action('update:toggled')(newToggleState); toggleState.value = newToggleState; }; watch( () => args.toggled, () => { toggleState.value = args.toggled; } ); return { // Methods clickedButtonAction: action('click'), updateToggleState, // Values toggleButtonText, toggleState, args, }; }, }), args: { toggled: false, variant: 'primary', disabled: false, inverse: false, condensed: false, }, parameters: storybookDocsParameter(ToggleButtonWithIcons), }; export const OnlyIcon: Story = { render: (_args, { argTypes }) => ({ components: { BentoToggleButton, OptionsVerticalIcon }, props: Object.keys(argTypes), template: ` <bento-toggle-button v-bind="args" :toggled="toggleState" @click="clickedButtonAction" @update:toggled="updateToggleState" > <template #iconLeft> <OptionsVerticalIcon /> </template> </bento-toggle-button> `, setup(props) { const args = isVue2 ? props : _args; const toggleState = ref<boolean>(args?.toggled); const updateToggleState = (newToggleState: boolean) => { action('update:toggled')(newToggleState); toggleState.value = newToggleState; }; watch( () => args.toggled, () => { toggleState.value = args.toggled; } ); return { // Methods clickedButtonAction: action('click'), updateToggleState, // Values toggleState, args, }; }, }), args: { toggled: false, variant: 'primary', disabled: false, inverse: false, condensed: false, }, parameters: storybookDocsParameter(ToggleButtonOnlyIcon), }; 

package/dist/assets/components/card/card.docs.mdx

@@ -49,6 +49,16 @@ title visible.
 
 <Canvas of={CardStories.Expandable} />
 
+### Linked title
+
+Use the `link` property to make the card title a native link. It accepts the same navigation properties as `bento-link`,
+except for `variant`.
+
+Do not combine `link` with the `clickable` or `expandable` property. An interactive card containing a nested link
+creates conflicting interactive targets and a confusing experience for keyboard and assistive-technology users.
+
+<Canvas of={CardStories.WithLink} />
+
 ### Clickable
 
 A clickable `bento-card` is a card container that can be actionable, similar to a button. It becomes interactive, and it
@@ -96,6 +106,13 @@ To configure the actions layout, you can use the different modifier options with
 detailed information on the modifiers check the
 [Button actions documentation](../?path=/docs/components-button-button-actions--docs#modifiers).
 
+## Last updated
+
+Use `lastUpdated` to show when card content was last refreshed. Add the optional `reloadButton` configuration to let
+users refresh the card. Last-updated metadata is available only for regular (non-expandable) cards.
+
+<Canvas of={CardStories.WithTimestamp} />
+
 ### Actions as links
 
 You can use the `event` prop of the `actions` object to link to another page. Here is an example on how to do this:
@@ -105,7 +122,7 @@ You can use the `event` prop of the `actions` object to link to another page. He
 <Source
     dark
     language="html"
-    code={`<bento-card 
+    code={`<bento-card
     actionsLayout="buttons-start"
     :actions="cardButtonActions"
 >

package/dist/assets/components/card/card.stories.ts

@@ -1 +1 @@
-import { action } from '@storybook/addon-actions'; import { BentoButton, BentoButtonActionsLayout } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import { BentoLink } from '@/components/link'; import { BentoImage } from '@/components/image'; import { cardImageSrcStub } from '../../__tests__/img-stub.json'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { BentoCardBackground, BentoCardTitleSize } from '@/components/card/card.types'; import { type Meta, type StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import BentoCard from './card.vue'; import './card.stories.scss?module'; enum CardHeaderSlotType { TEXT = 'text', LINK = 'link', BUTTON = 'button', } export default { components: { BentoTypography, BentoLink }, title: 'Card', component: BentoCard, argTypes: { titleSize: { options: Object.values(BentoCardTitleSize), mapping: BentoCardTitleSize, control: { type: 'select', }, }, default: { name: 'default', defaultValue: '', description: 'Card content', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text' }, }, image: { name: 'image', description: 'Image', table: { type: { summary: 'BentoImage' }, }, control: { disable: true }, }, header: { name: 'header', defaultValue: '', description: 'Header content', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text' }, }, headerSlotExample: { name: 'headerSlotExample', options: Object.values(CardHeaderSlotType), mapping: CardHeaderSlotType, defaultValue: CardHeaderSlotType.TEXT, description: 'Header content', table: { category: 'Storybook controls', }, control: { type: 'select' }, }, click: { name: 'click', defaultValue: '', description: `Click event handler. Transforms the card into a clickable element if there is no content, footer or actions present in the template. `, table: { type: { summary: '($event) => void' }, }, control: { disable: true }, }, description: { name: 'description', defaultValue: '', description: 'Secondary title, below the main one', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text', }, }, actionsLayout: { options: Object.values(BentoButtonActionsLayout), mapping: BentoButtonActionsLayout, control: { type: 'select', }, }, background: { options: Object.values(BentoCardBackground), mapping: BentoCardBackground, control: { type: 'select', }, }, }, } as Meta; type Story = StoryObj<typeof BentoCard>; const CARD_TITLE = 'Card title'; const CARD_HEADER_SLOT = 'Card header slot'; const CARD_DESCRIPTION = 'A little context goes a long way'; const CARD_CONTENT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat, nunc quis aliquam facilisis, ante nulla aliquet tortor, vel feugiat diam turpis ut neque. Sed ut venenatis ante, in iaculis quam. Nulla nisi nisl, semper non tempus vitae, semper vitae nulla. Nam ac nibh eu ipsum lacinia congue. Suspendisse vulputate nisi eu erat venenatis, ac venenatis nisl ullamcorper. Aliquam interdum sem sed leo sodales, vel accumsan purus consequat. Vivamus luctus non tellus vel gravida.'; const CARD_ACTIONS = [ { title: 'Primary', event: () => action('Primary')(), }, { title: 'Secondary', event: () => action('Secondary')(), }, ]; const IMAGE_SRC = cardImageSrcStub; const IMAGE_ALT = 'Example image'; const DEFAULT_CARD_PROPS = { default: CARD_TITLE, description: CARD_DESCRIPTION, content: CARD_CONTENT, background: 'primary', expandable: false, disabled: false, titleSize: 'default', headerSlotExample: CardHeaderSlotType.TEXT, }; const Template: Story = { render: (_args, { argTypes }) => ({ components: { BentoCard, BentoTypography, BentoLink, BentoButton, BentoImage }, props: Object.keys(argTypes), template: ` <bento-card v-bind="args" class="b-card-story" @click='cardClicked'> <template #default v-if='args.default'> {{ args.default }} </template> <template #image v-if='args.image'> <bento-image :src="args.image.src" :alt="args.image.alt" /> </template> <template #header v-if='args.header'> <bento-typography v-if="args.headerSlotExample === CardHeaderSlotType.TEXT"> {{ args.header }} </bento-typography> <bento-link v-if="args.headerSlotExample === CardHeaderSlotType.LINK" to="https://www.adyen.com/" external> <bento-typography> {{ args.header }} </bento-typography> </bento-link> <template v-if="args.headerSlotExample === CardHeaderSlotType.BUTTON"> <bento-button > {{ args.header }} </bento-button> </template> </template> <template #description v-if='args.description'> {{ args.description }} </template> <template #content> <bento-typography el="div">{{ args.content }}</bento-typography> </template> </bento-card> `, setup(props) { return { // Enums CardHeaderSlotType, // Values args: isVue2 ? props : _args, // Events cardClicked: action('onCardClicked'), }; }, }), }; const defaultCode = ` <bento-card> ${CARD_TITLE} <template #header> ${CARD_HEADER_SLOT} </template> <template #description> ${CARD_DESCRIPTION} </template> <template #content> <bento-typography>${CARD_CONTENT}</bento-typography> </template> </bento-card> `; export const Default = { ...Template, parameters: storybookDocsParameter(defaultCode), args: { ...DEFAULT_CARD_PROPS }, }; const secondaryCode = ` <bento-card background="secondary"> ${CARD_TITLE} <template #description> ${CARD_DESCRIPTION} </template> <template #content> <bento-typography>${CARD_CONTENT}</bento-typography> </template> </bento-card> `; export const SecondaryBackground = { ...Template, parameters: storybookDocsParameter(secondaryCode), args: { ...DEFAULT_CARD_PROPS, background: 'secondary', }, }; const expandableCode = ` <bento-card expandable> ${CARD_TITLE} <template #description> ${CARD_DESCRIPTION} </template> <template #content> <bento-typography>${CARD_CONTENT}</bento-typography> </template> </bento-card> `; export const Expandable = { ...Template, parameters: storybookDocsParameter(expandableCode), args: { ...DEFAULT_CARD_PROPS, expandable: true, }, }; const expandableClosedCode = ` <bento-card expandable closed> ${CARD_TITLE} <template #description> ${CARD_DESCRIPTION} </template> <template #content> <bento-typography>${CARD_CONTENT}</bento-typography> </template> </bento-card> `; export const ExpandableClosed = { ...Template, parameters: storybookDocsParameter(expandableClosedCode), args: { ...DEFAULT_CARD_PROPS, expandable: true, closed: true, }, }; const disabledCode = ` <bento-card expandable disabled> ${CARD_TITLE} <template #description> ${CARD_DESCRIPTION} </template> <template #content> <bento-typography>${CARD_CONTENT}</bento-typography> </template> </bento-card> `; export const Disabled = { ...Template, parameters: storybookDocsParameter(disabledCode), args: { ...DEFAULT_CARD_PROPS, expandable: true, disabled: true, }, }; const withActionsCode = ` <bento-card actionsLayout="${BentoButtonActionsLayout.BUTTONS_START}" actions="${JSON.stringify(CARD_ACTIONS)}" > ${CARD_TITLE} <template #description> ${CARD_DESCRIPTION} </template> <template #content> <bento-typography>${CARD_CONTENT}</bento-typography> </template> </bento-card> `; export const WithActions = { ...Template, parameters: storybookDocsParameter(withActionsCode), args: { ...DEFAULT_CARD_PROPS, actionsLayout: 'buttons-start', actions: CARD_ACTIONS, }, }; export const WithHeaderSlot: Story = { render: (_args, { argTypes }) => ({ components: { BentoCard, BentoTypography, BentoLink, BentoButton }, props: Object.keys(argTypes), template: ` <bento-card v-bind="args" class="b-card-story"> <template #default v-if='args.default'> {{ args.default }} </template> <template #header v-if='args.header'> <bento-typography v-if="headerSlotExample === CardHeaderSlotType.TEXT"> {{ args.header }} </bento-typography> <bento-link v-if="headerSlotExample === CardHeaderSlotType.LINK" to="https://www.adyen.com/" external> <bento-typography> {{ args.header }} </bento-typography> </bento-link> <template v-if="headerSlotExample === CardHeaderSlotType.BUTTON"> <bento-button > {{ args.header }} </bento-button> </template> </template> <template #description> {{ args.description }} </template> <template #content> <bento-typography el="div">{{ args.content }}</bento-typography> </template> </bento-card> `, setup(props) { return { // Enums CardHeaderSlotType, // Values args: isVue2 ? props : _args, }; }, }), args: { ...DEFAULT_CARD_PROPS, header: CARD_HEADER_SLOT, expandable: true, }, }; const withImageCode = ` <bento-card> ${CARD_TITLE} <template #image> <bento-image src="${IMAGE_SRC}" alt="${IMAGE_ALT}" /> </template> <template #description> ${CARD_DESCRIPTION} </template> <template #content> <bento-typography>${CARD_CONTENT}</bento-typography> </template> </bento-card> `; export const WithImage = { components: { BentoImage, }, ...Template, parameters: storybookDocsParameter(withImageCode), args: { ...DEFAULT_CARD_PROPS, image: { src: IMAGE_SRC, alt: IMAGE_ALT }, }, }; const clickableCode = ` <bento-card clickable @click="onClick"> ${CARD_TITLE} <template #description> ${CARD_DESCRIPTION} </template> <template #content> <bento-typography>${CARD_CONTENT}</bento-typography> </template> </bento-card> `; export const Clickable = { ...Template, parameters: storybookDocsParameter(clickableCode), args: { ...DEFAULT_CARD_PROPS, clickable: true, }, }; 
+import { action } from '@storybook/addon-actions'; import { BentoButton, BentoButtonActionsLayout } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import { BentoLink } from '@/components/link'; import { BentoImage } from '@/components/image'; import { cardImageSrcStub } from '../../__tests__/img-stub.json'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { BentoCardBackground, BentoCardTitleSize } from '@/components/card/card.types'; import { type Meta, type StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import BentoCard from './card.vue'; const CardWithLinkExample = "<template>\n <bento-card :link=\"{ to: '/' }\">\n Card With Link Title\n\n <template #header>\n <bento-typography>Header slot</bento-typography>\n </template>\n\n <template #description>A little context goes a long way</template>\n\n <template #content>\n <bento-typography el=\"div\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat, nunc quis aliquam facilisis,\n ante nulla aliquet tortor, vel feugiat diam turpis ut neque. Sed ut venenatis ante, in iaculis quam.\n Nulla nisi nisl, semper non tempus vitae, semper vitae nulla. Nam ac nibh eu ipsum lacinia congue.\n Suspendisse vulputate nisi eu erat venenatis, ac venenatis nisl ullamcorper. Aliquam interdum sem sed\n leo sodales, vel accumsan purus consequat. Vivamus luctus non tellus vel gravida.\n </bento-typography>\n </template>\n </bento-card>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoCard, BentoTypography } from '@adyen/bento-vue2';\n</script>\n"; const CardClickable = "<template>\n <bento-card clickable @click=\"onClick\">\n Card title\n <template #description>A little context goes a long way</template>\n <template #content>\n <bento-typography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat, nunc quis aliquam facilisis,\n ante nulla aliquet tortor, vel feugiat diam turpis ut neque. Sed ut venenatis ante, in iaculis quam.\n Nulla nisi nisl, semper non tempus vitae, semper vitae nulla. Nam ac nibh eu ipsum lacinia congue.\n Suspendisse vulputate nisi eu erat venenatis, ac venenatis nisl ullamcorper. Aliquam interdum sem sed\n leo sodales, vel accumsan purus consequat. Vivamus luctus non tellus vel gravida.\n </bento-typography>\n </template>\n </bento-card>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoCard, BentoTypography } from '@adyen/bento-vue2';\n\n const onClick = () => true;\n</script>\n"; const CardDefault = "<template>\n <bento-card>\n Card title\n <template #description>A little context goes a long way</template>\n <template #content>\n <bento-typography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat, nunc quis aliquam facilisis,\n ante nulla aliquet tortor, vel feugiat diam turpis ut neque. Sed ut venenatis ante, in iaculis quam.\n Nulla nisi nisl, semper non tempus vitae, semper vitae nulla. Nam ac nibh eu ipsum lacinia congue.\n Suspendisse vulputate nisi eu erat venenatis, ac venenatis nisl ullamcorper. Aliquam interdum sem sed\n leo sodales, vel accumsan purus consequat. Vivamus luctus non tellus vel gravida.\n </bento-typography>\n </template>\n </bento-card>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoCard, BentoTypography } from '@adyen/bento-vue2';\n</script>\n"; const CardDisabled = "<template>\n <bento-card disabled expandable>\n Card title\n <template #description>A little context goes a long way</template>\n <template #content>\n <bento-typography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat, nunc quis aliquam facilisis,\n ante nulla aliquet tortor, vel feugiat diam turpis ut neque. Sed ut venenatis ante, in iaculis quam.\n Nulla nisi nisl, semper non tempus vitae, semper vitae nulla. Nam ac nibh eu ipsum lacinia congue.\n Suspendisse vulputate nisi eu erat venenatis, ac venenatis nisl ullamcorper. Aliquam interdum sem sed\n leo sodales, vel accumsan purus consequat. Vivamus luctus non tellus vel gravida.\n </bento-typography>\n </template>\n </bento-card>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoCard, BentoTypography } from '@adyen/bento-vue2';\n</script>\n"; const CardExpandable = "<template>\n <bento-card expandable>\n Card title\n <template #description>A little context goes a long way</template>\n <template #content>\n <bento-typography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat, nunc quis aliquam facilisis,\n ante nulla aliquet tortor, vel feugiat diam turpis ut neque. Sed ut venenatis ante, in iaculis quam.\n Nulla nisi nisl, semper non tempus vitae, semper vitae nulla. Nam ac nibh eu ipsum lacinia congue.\n Suspendisse vulputate nisi eu erat venenatis, ac venenatis nisl ullamcorper. Aliquam interdum sem sed\n leo sodales, vel accumsan purus consequat. Vivamus luctus non tellus vel gravida.\n </bento-typography>\n </template>\n </bento-card>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoCard, BentoTypography } from '@adyen/bento-vue2';\n</script>\n"; const CardExpandableClosed = "<template>\n <bento-card closed expandable>\n Card title\n <template #description>A little context goes a long way</template>\n <template #content>\n <bento-typography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat, nunc quis aliquam facilisis,\n ante nulla aliquet tortor, vel feugiat diam turpis ut neque. Sed ut venenatis ante, in iaculis quam.\n Nulla nisi nisl, semper non tempus vitae, semper vitae nulla. Nam ac nibh eu ipsum lacinia congue.\n Suspendisse vulputate nisi eu erat venenatis, ac venenatis nisl ullamcorper. Aliquam interdum sem sed\n leo sodales, vel accumsan purus consequat. Vivamus luctus non tellus vel gravida.\n </bento-typography>\n </template>\n </bento-card>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoCard, BentoTypography } from '@adyen/bento-vue2';\n</script>\n"; const CardSecondaryBackground = "<template>\n <bento-card background=\"secondary\">\n Card title\n <template #description>A little context goes a long way</template>\n <template #content>\n <bento-typography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat, nunc quis aliquam facilisis,\n ante nulla aliquet tortor, vel feugiat diam turpis ut neque. Sed ut venenatis ante, in iaculis quam.\n Nulla nisi nisl, semper non tempus vitae, semper vitae nulla. Nam ac nibh eu ipsum lacinia congue.\n Suspendisse vulputate nisi eu erat venenatis, ac venenatis nisl ullamcorper. Aliquam interdum sem sed\n leo sodales, vel accumsan purus consequat. Vivamus luctus non tellus vel gravida.\n </bento-typography>\n </template>\n </bento-card>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoCard, BentoTypography } from '@adyen/bento-vue2';\n</script>\n"; const CardWithActions = "<template>\n <bento-card :actions=\"actions\" actions-layout=\"buttons-start\">\n Card title\n <template #description>A little context goes a long way</template>\n <template #content>\n <bento-typography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat, nunc quis aliquam facilisis,\n ante nulla aliquet tortor, vel feugiat diam turpis ut neque. Sed ut venenatis ante, in iaculis quam.\n Nulla nisi nisl, semper non tempus vitae, semper vitae nulla. Nam ac nibh eu ipsum lacinia congue.\n Suspendisse vulputate nisi eu erat venenatis, ac venenatis nisl ullamcorper. Aliquam interdum sem sed\n leo sodales, vel accumsan purus consequat. Vivamus luctus non tellus vel gravida.\n </bento-typography>\n </template>\n </bento-card>\n</template>\n\n<script setup lang=\"ts\">\n import { type BentoButtonActionsList, BentoCard, BentoTypography } from '@adyen/bento-vue2';\n\n const actions: BentoButtonActionsList = [\n {\n title: 'Primary',\n event: () => true,\n },\n {\n title: 'Secondary',\n event: () => true,\n },\n ];\n</script>\n"; const CardWithHeaderSlot = "<template>\n <bento-card expandable>\n Card title\n <template #header>\n <bento-typography>Card header slot</bento-typography>\n </template>\n <template #description>A little context goes a long way</template>\n <template #content>\n <bento-typography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat, nunc quis aliquam facilisis,\n ante nulla aliquet tortor, vel feugiat diam turpis ut neque. Sed ut venenatis ante, in iaculis quam.\n Nulla nisi nisl, semper non tempus vitae, semper vitae nulla. Nam ac nibh eu ipsum lacinia congue.\n Suspendisse vulputate nisi eu erat venenatis, ac venenatis nisl ullamcorper. Aliquam interdum sem sed\n leo sodales, vel accumsan purus consequat. Vivamus luctus non tellus vel gravida.\n </bento-typography>\n </template>\n </bento-card>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoCard, BentoTypography } from '@adyen/bento-vue2';\n</script>\n"; const CardWithImage = "<template>\n <bento-card>\n Card title\n <template #image>\n <bento-image alt=\"Example image\" :src=\"cardImageSrcStub\" />\n </template>\n <template #description>A little context goes a long way</template>\n <template #content>\n <bento-typography>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat, nunc quis aliquam facilisis,\n ante nulla aliquet tortor, vel feugiat diam turpis ut neque. Sed ut venenatis ante, in iaculis quam.\n Nulla nisi nisl, semper non tempus vitae, semper vitae nulla. Nam ac nibh eu ipsum lacinia congue.\n Suspendisse vulputate nisi eu erat venenatis, ac venenatis nisl ullamcorper. Aliquam interdum sem sed\n leo sodales, vel accumsan purus consequat. Vivamus luctus non tellus vel gravida.\n </bento-typography>\n </template>\n </bento-card>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoCard, BentoImage, BentoTypography } from '@adyen/bento-vue2';\n import { cardImageSrcStub } from '../../../__tests__/img-stub.json';\n</script>\n"; const CardWithTimestamp = "<template>\n <bento-card :last-updated=\"lastUpdated\" :reload-button=\"reloadButton\">\n Card with timestamp and reload button\n <template #description>A little context goes a long way</template>\n <template #content>\n <bento-typography>Card content</bento-typography>\n </template>\n </bento-card>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoCard, BentoTypography } from '@adyen/bento-vue2';\n\n const lastUpdated = new Date();\n const reloadButton = {\n title: 'Reload',\n event: () => undefined,\n };\n</script>\n"; import './card.stories.scss?module'; enum CardHeaderSlotType { TEXT = 'text', LINK = 'link', BUTTON = 'button', } export default { components: { BentoTypography, BentoLink }, title: 'Card', component: BentoCard, argTypes: { titleSize: { options: Object.values(BentoCardTitleSize), mapping: BentoCardTitleSize, control: { type: 'select', }, }, default: { name: 'default', defaultValue: '', description: 'Card content', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text' }, }, image: { name: 'image', description: 'Image', table: { type: { summary: 'BentoImage' }, }, control: { disable: true }, }, header: { name: 'header', defaultValue: '', description: 'Header content', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text' }, }, headerSlotExample: { name: 'headerSlotExample', options: Object.values(CardHeaderSlotType), mapping: CardHeaderSlotType, defaultValue: CardHeaderSlotType.TEXT, description: 'Header content', table: { category: 'Storybook controls', }, control: { type: 'select' }, }, click: { name: 'click', defaultValue: '', description: `Click event handler. Transforms the card into a clickable element if there is no content, footer or actions present in the template. `, table: { type: { summary: '($event) => void' }, }, control: { disable: true }, }, description: { name: 'description', defaultValue: '', description: 'Secondary title, below the main one', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text', }, }, lastUpdated: { control: { type: 'date', }, }, actionsLayout: { options: Object.values(BentoButtonActionsLayout), mapping: BentoButtonActionsLayout, control: { type: 'select', }, }, background: { options: Object.values(BentoCardBackground), mapping: BentoCardBackground, control: { type: 'select', }, }, }, } as Meta; type Story = StoryObj<typeof BentoCard>; const CARD_TITLE = 'Card title'; const CARD_HEADER_SLOT = 'Card header slot'; const CARD_DESCRIPTION = 'A little context goes a long way'; const CARD_CONTENT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam feugiat, nunc quis aliquam facilisis, ante nulla aliquet tortor, vel feugiat diam turpis ut neque. Sed ut venenatis ante, in iaculis quam. Nulla nisi nisl, semper non tempus vitae, semper vitae nulla. Nam ac nibh eu ipsum lacinia congue. Suspendisse vulputate nisi eu erat venenatis, ac venenatis nisl ullamcorper. Aliquam interdum sem sed leo sodales, vel accumsan purus consequat. Vivamus luctus non tellus vel gravida.'; const CARD_ACTIONS = [ { title: 'Primary', event: () => action('Primary')(), }, { title: 'Secondary', event: () => action('Secondary')(), }, ]; const IMAGE_SRC = cardImageSrcStub; const IMAGE_ALT = 'Example image'; const DEFAULT_CARD_PROPS = { default: CARD_TITLE, description: CARD_DESCRIPTION, content: CARD_CONTENT, background: 'primary', expandable: false, disabled: false, titleSize: 'default', headerSlotExample: CardHeaderSlotType.TEXT, }; const Template: Story = { render: (_args, { argTypes }) => ({ components: { BentoCard, BentoTypography, BentoLink, BentoButton, BentoImage }, props: Object.keys(argTypes), template: ` <bento-card v-bind="args" v-on="args.link ? {} : { click: cardClicked }" class="b-card-story"> <template #default v-if='args.default'> {{ args.default }} </template> <template #image v-if='args.image'> <bento-image :src="args.image.src" :alt="args.image.alt" /> </template> <template #header v-if='args.header'> <bento-typography v-if="args.headerSlotExample === CardHeaderSlotType.TEXT"> {{ args.header }} </bento-typography> <bento-link v-if="args.headerSlotExample === CardHeaderSlotType.LINK" to="https://www.adyen.com/" external> <bento-typography> {{ args.header }} </bento-typography> </bento-link> <template v-if="args.headerSlotExample === CardHeaderSlotType.BUTTON"> <bento-button > {{ args.header }} </bento-button> </template> </template> <template #description v-if='args.description'> {{ args.description }} </template> <template #content> <bento-typography el="div">{{ args.content }}</bento-typography> </template> </bento-card> `, setup(props) { return { // Enums CardHeaderSlotType, // Values args: isVue2 ? props : _args, // Events cardClicked: action('onCardClicked'), }; }, }), }; export const Default = { ...Template, parameters: storybookDocsParameter(CardDefault), args: { ...DEFAULT_CARD_PROPS }, }; export const SecondaryBackground = { ...Template, parameters: storybookDocsParameter(CardSecondaryBackground), args: { ...DEFAULT_CARD_PROPS, background: 'secondary', }, }; export const Expandable = { ...Template, parameters: storybookDocsParameter(CardExpandable), args: { ...DEFAULT_CARD_PROPS, expandable: true, }, }; export const ExpandableClosed = { ...Template, parameters: storybookDocsParameter(CardExpandableClosed), args: { ...DEFAULT_CARD_PROPS, expandable: true, closed: true, }, }; export const Disabled = { ...Template, parameters: storybookDocsParameter(CardDisabled), args: { ...DEFAULT_CARD_PROPS, expandable: true, disabled: true, }, }; export const WithActions = { ...Template, parameters: storybookDocsParameter(CardWithActions), args: { ...DEFAULT_CARD_PROPS, actionsLayout: 'buttons-start', actions: CARD_ACTIONS, }, }; export const WithTimestamp = { ...Template, parameters: storybookDocsParameter(CardWithTimestamp), args: { ...DEFAULT_CARD_PROPS, lastUpdated: new Date(), reloadButton: { title: 'Reload', event: () => action('Reload')(), }, }, }; export const WithHeaderSlot: Story = { render: (_args, { argTypes }) => ({ components: { BentoCard, BentoTypography, BentoLink, BentoButton }, props: Object.keys(argTypes), template: ` <bento-card v-bind="args" class="b-card-story"> <template #default v-if='args.default'> {{ args.default }} </template> <template #header v-if='args.header'> <bento-typography v-if="headerSlotExample === CardHeaderSlotType.TEXT"> {{ args.header }} </bento-typography> <bento-link v-if="headerSlotExample === CardHeaderSlotType.LINK" to="https://www.adyen.com/" external> <bento-typography> {{ args.header }} </bento-typography> </bento-link> <template v-if="headerSlotExample === CardHeaderSlotType.BUTTON"> <bento-button > {{ args.header }} </bento-button> </template> </template> <template #description> {{ args.description }} </template> <template #content> <bento-typography el="div">{{ args.content }}</bento-typography> </template> </bento-card> `, setup(props) { return { // Enums CardHeaderSlotType, // Values args: isVue2 ? props : _args, }; }, }), args: { ...DEFAULT_CARD_PROPS, header: CARD_HEADER_SLOT, expandable: true, }, parameters: storybookDocsParameter(CardWithHeaderSlot), }; export const WithImage = { components: { BentoImage, }, ...Template, parameters: storybookDocsParameter(CardWithImage), args: { ...DEFAULT_CARD_PROPS, image: { src: IMAGE_SRC, alt: IMAGE_ALT }, }, }; export const WithLink = { ...Template, parameters: storybookDocsParameter(CardWithLinkExample), args: { ...DEFAULT_CARD_PROPS, default: 'Card With Link Title', header: 'Header slot', link: { to: '/', }, }, }; export const Clickable = { ...Template, parameters: storybookDocsParameter(CardClickable), args: { ...DEFAULT_CARD_PROPS, clickable: true, }, }; 

package/dist/assets/components/card/card.types.ts

@@ -1 +1 @@
-/** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoCardBackground { PRIMARY = 'primary', SECONDARY = 'secondary', } /** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoCardTitleSize { DEFAULT = 'default', SMALL = 'small', } 
+import { type BentoLinkProps } from '../link'; export { type TitleDetailsReloadButton as BentoCardReloadButton } from '../internal/title-details/title-details.types'; /** * @deprecated Since v3.0.0. Use string literal instead. */ export enum BentoCardBackground { PRIMARY = 'primary', SECONDARY = 'secondary', } /** * @deprecated Since v3.0.0. Use string literal instead. */ export enum BentoCardTitleSize { DEFAULT = 'default', SMALL = 'small', } export type BentoCardLink = Omit<BentoLinkProps, 'variant'>; 

package/dist/assets/components/card/card.vue

@@ -1 +1 @@
-<template> <div class="b-card" :class="cardConditionalClasses" :tabindex="tabIndex" data-testid="card" @click="onClick" @keydown.enter="onKeyDown" @keydown.space="onKeyDown" > <div v-if="hasSlot('image')" class="b-card__image"> <slot name="image"></slot> </div> <div v-if="showHeader" class="b-card__header" :class="cardHeaderConditionalClasses" :tabindex="headerTabIndex" :aria-controls="expandable && showCardBody ? cardId : null" :aria-expanded="expandable ? `${showContent}` : null" :role="expandable ? 'button' : null" @click="toggleExpansion" @keypress.enter="toggleExpansion" @keypress.space="toggleExpansion" > <div class="b-card__header-wrapper"> <div v-if="showTitleWrapper" class="b-card__header-slot-wrapper"> <div class="b-card__title-wrapper" :class="cardTitleWrapperConditionalClasses"> <div v-if="expandable" class="b-card__toggle" :class="cardToggleConditionalClasses"> <chevron-up-icon v-if="showContent" :svg-title="t('hideContent')" aria-hidden="true" /> <chevron-down-icon v-else :svg-title="t('showContent')" aria-hidden="true" /> </div> <bento-typography v-if="hasSlot('default')" class="b-card__title" v-bind="typography"> <slot /> </bento-typography> </div> <template v-if="hasSlot('header')"> <slot name="header"></slot> </template> </div> <bento-typography v-if="hasSlot('description')" class="b-card__description" el="div" variant="body"> <slot name="description" /> </bento-typography> </div> </div> <Transition name="b-card__animation"> <div v-if="showCardBody" class="b-card__wrapper" :style="contentMaxHeight"> <div :id="expandable ? cardId : null" ref="contentDiv" class="b-card__body" :class="cardBodyConditionalClasses" > <div v-if="hasSlot('content')" class="b-card__content" :class="cardContentConditionalClasses"> <slot name="content" /> </div> <div v-if="actions" class="b-card__actions" :class="cardActionsConditionalClasses"> <bento-button-actions :actions="actions" :layout="actionsLayout"></bento-button-actions> </div> </div> </div> </Transition> </div> </template> <script setup lang="ts"> import { computed, ref, useSlots, watch } from 'vue'; // Components import { BentoTypography } from '@/components/typography'; import { BentoButtonActions, BentoButtonActionsLayout, type BentoButtonActionsList } from '@/components/button'; import { BentoCardBackground, BentoCardTitleSize } from '@/components/card/card.types'; import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down'; import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up'; // Composables import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height'; // Utils import { useHasSlot } from '@/composables'; import { generateUid } from '@/core/utils/ts'; import { useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; import { deprecate } from '@/utils/ts/deprecate'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const slots = useSlots(); const hasSlot = useHasSlot(slots); const props = withDefaults( defineProps<{ /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * `title`: Button's text. * * `event`: Event triggered when clicking the Button. * * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`. * * ``` * [{ * title: 'Primary', * event: () => { ... }, * icon: FourPeopleIcon * }, { * title: 'Secondary', * event: () => { ... } * }] * ``` */ actions?: BentoButtonActionsList; /** * Defines the layout in which the button actions is presented. * It can be one of: * * @values BUTTONS_START * @values BUTTONS_END * @values FILL_CONTAINER * @values SPACE_BETWEEN * @values VERTICAL_STACK */ actionsLayout?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`; /** * Defines the color of card background */ background?: BentoCardBackground | `${BentoCardBackground}`; /** * Makes the whole card clickable */ clickable?: boolean; /** * Sets the expandable card in a closed state */ closed?: boolean; /** * Disables the expandable card */ disabled?: boolean; /** * The whole content of the card will be expandable in accordion manner */ expandable?: boolean; /** * Defines the title size of the card header */ titleSize?: BentoCardTitleSize | `${BentoCardTitleSize}`; }>(), { actions: null, actionsLayout: BentoButtonActionsLayout.BUTTONS_END, background: BentoCardBackground.PRIMARY, clickable: false, closed: false, disabled: false, expandable: false, titleSize: BentoCardTitleSize.DEFAULT, } ); const emit = defineEmits<{ (e: 'click'); (e: 'expanded', isExpanded: boolean); }>(); const contentDiv = ref<HTMLDivElement>(null); const cardId = generateUid('card'); const showContent = ref(!props.closed); watch( () => props.closed, value => { showContent.value = !value; } ); const showHeader = computed(() => hasSlot('default') || hasSlot('description') || hasSlot('header')); const showTitleWrapper = computed(() => hasSlot('default') || hasSlot('header')); const showCardBody = computed( () => (hasSlot('content') || props.actions?.length) && (!props.expandable || (props.expandable && showContent.value)) ); const tabIndex = computed(() => (props.clickable && !props.disabled ? 0 : -1)); const headerTabIndex = computed(() => (props.expandable && !props.disabled ? 0 : -1)); const cardConditionalClasses = computed(() => ({ [`b-card--${props.background}`]: props.background, 'b-card--clickable': props.clickable, 'b-card--expandable': props.expandable, 'b-card--disabled': (props.clickable || props.expandable) && props.disabled, })); const cardHeaderConditionalClasses = computed(() => ({ 'b-card__header--expandable': props.expandable, 'b-card__header--without-body': !props.expandable && !showCardBody.value, })); const cardToggleConditionalClasses = computed(() => ({ 'b-card__toggle--small-text': props.titleSize === BentoCardTitleSize.SMALL, })); const cardBodyConditionalClasses = computed(() => ({ 'b-card__body--expandable': props.expandable && hasSlot('content'), 'b-card__body--without-header': !props.expandable && !showHeader.value, })); const cardContentConditionalClasses = computed(() => ({ 'b-card__content--without-header': !props.expandable && !showHeader.value, 'b-card__content--expandable': props.expandable, })); const cardActionsConditionalClasses = computed(() => { const isNotExpandableWithoutContent = !props.expandable && props.actions && !hasSlot('content'); return { 'b-card__actions--without-content': isNotExpandableWithoutContent, 'b-card__actions--without-content-and-with-header': isNotExpandableWithoutContent && showHeader.value, }; }); const cardTitleWrapperConditionalClasses = computed(() => ({ 'b-card__title-wrapper--truncated': hasSlot('header'), })); const typography = computed( () => ({ el: 'div', variant: props.titleSize === BentoCardTitleSize.DEFAULT ? 'title' : 'body', strongest: props.titleSize === BentoCardTitleSize.SMALL, wide: props.titleSize === BentoCardTitleSize.SMALL, }) as InstanceType<typeof BentoTypography>['$props'] ); // Toggle open and close logic and animation const { contentHeight } = useExpandableContentHeight(contentDiv, showContent); const contentMaxHeight = computed(() => props.expandable && contentHeight.value ? { 'max-height': contentHeight.value } : {} ); const toggleExpansion = () => { if (!props.disabled && props.expandable) { showContent.value = !showContent.value; emit('expanded', showContent.value); } }; const onClick = () => { if (!props.disabled) { emit('click'); if (!props.clickable) { deprecate( 'BentoCard "@click" property', `Use the BentoCard "@click" with the "clickable" property to enable accessible styles.`, '2.0.0' ); } } }; const onKeyDown = () => { if (props.clickable && !props.disabled) { emit('click'); } }; </script> <script lang="ts"> /** * A card is a flexible and composable container. * Use cards to represent a single object or to visually group certain content, like legal information within company settings. * * @example * import { BentoCard } from '@adyen/bento-vue2'; * * export default { * components: { BentoCard }, * template: ` * <bento-card> * Title of the Card * </bento-card> * ` * }; */ export default { i18n: { messages }, name: 'bento-card', }; </script> <style lang="scss" scoped src="./card.scss" /> 
+<template> <div class="b-card" :class="cardConditionalClasses" :tabindex="tabIndex" data-testid="card" @click="onClick" @keydown.enter="onKeyDown" @keydown.space="onKeyDown" > <div v-if="hasSlot('image')" class="b-card__image"> <slot name="image"></slot> </div> <div v-if="showHeader" class="b-card__header" :class="cardHeaderConditionalClasses" :tabindex="headerTabIndex" :aria-controls="expandable && showCardBody ? cardId : null" :aria-expanded="expandable ? `${showContent}` : null" :role="expandable ? 'button' : null" @click="toggleExpansion" @keypress.enter="toggleExpansion" @keypress.space="toggleExpansion" > <div class="b-card__header-wrapper"> <div v-if="showTitleWrapper" class="b-card__header-slot-wrapper"> <div class="b-card__title-wrapper" :class="cardTitleWrapperConditionalClasses"> <div v-if="expandable" class="b-card__toggle" :class="cardToggleConditionalClasses"> <chevron-up-icon v-if="showContent" :svg-title="t('hideContent')" aria-hidden="true" /> <chevron-down-icon v-else :svg-title="t('showContent')" aria-hidden="true" /> </div> <template v-if="hasSlot('default')"> <bento-link v-if="link && isRegularCard" class="b-card__link" v-bind="link" variant="quiet" disable-typography > <bento-typography class="b-card__title" v-bind="typography" el="span"> <slot /> </bento-typography> <chevron-right-small-icon class="b-card__link-icon" aria-hidden="true" /> </bento-link> <bento-typography v-else class="b-card__title" v-bind="typography"> <slot /> </bento-typography> </template> </div> <template v-if="hasSlot('header')"> <slot name="header"></slot> </template> </div> <div v-if="hasSlot('description') || showLastUpdated" class="b-card__title-details"> <title-details :last-updated="showLastUpdated ? lastUpdated : null" :reload-button="showLastUpdated ? reloadButton : null" > <template v-if="hasSlot('description')" #description><slot name="description" /></template> </title-details> </div> </div> </div> <Transition name="b-card__animation"> <div v-if="showCardBody" class="b-card__wrapper" :style="contentMaxHeight"> <div :id="expandable ? cardId : null" ref="contentDiv" class="b-card__body" :class="cardBodyConditionalClasses" > <div v-if="hasSlot('content')" class="b-card__content" :class="cardContentConditionalClasses"> <slot name="content" /> </div> <div v-if="actions" class="b-card__actions" :class="cardActionsConditionalClasses"> <bento-button-actions :actions="actions" :layout="actionsLayout"></bento-button-actions> </div> </div> </div> </Transition> </div> </template> <script setup lang="ts"> import { computed, onMounted, ref, useSlots, watch } from 'vue'; // Components import { BentoTypography } from '@/components/typography'; import { BentoLink } from '@/components/link'; import { BentoButtonActions, BentoButtonActionsLayout, type BentoButtonActionsList } from '@/components/button'; import { BentoCardBackground, type BentoCardLink, type BentoCardReloadButton, BentoCardTitleSize, } from '@/components/card/card.types'; import { TitleDetails } from '@/internal/title-details'; import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down'; import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up'; import ChevronRightSmallIcon from '@adyen/ui-assets-icons-16/vue/chevron-right-small'; // Composables import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height'; // Utils import { useHasSlot } from '@/composables'; import { generateUid } from '@/utils/ts/generate-uid'; import { useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; import { deprecate } from '@/utils/ts/deprecate'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const slots = useSlots(); const hasSlot = useHasSlot(slots); const props = withDefaults( defineProps<{ /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * `title`: Button's text. * * `event`: Event triggered when clicking the Button. * * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`. * * ``` * [{ * title: 'Primary', * event: () => { ... }, * icon: FourPeopleIcon * }, { * title: 'Secondary', * event: () => { ... } * }] * ``` */ actions?: BentoButtonActionsList; /** * Defines the layout in which the button actions is presented. * It can be one of: * * @values BUTTONS_START * @values BUTTONS_END * @values FILL_CONTAINER * @values SPACE_BETWEEN * @values VERTICAL_STACK */ actionsLayout?: BentoButtonActionsLayout | `${BentoButtonActionsLayout}`; /** * Defines the color of card background */ background?: BentoCardBackground | `${BentoCardBackground}`; /** * Makes the whole card clickable */ clickable?: boolean; /** * Sets the expandable card in a closed state */ closed?: boolean; /** * Disables the expandable card */ disabled?: boolean; /** * The whole content of the card will be expandable in accordion manner */ expandable?: boolean; /** * JavaScript "Date" object for when the content was last updated * * Only supported by regular (non-expandable) cards. */ lastUpdated?: Date | number; /** * Reload button which shows next to the card's timestamp * * Only supported by regular (non-expandable) cards. */ reloadButton?: BentoCardReloadButton; /** * Link properties to make the card title a navigable link. Can only be used with non-expandable cards. */ link?: BentoCardLink; /** * Defines the title size of the card header */ titleSize?: BentoCardTitleSize | `${BentoCardTitleSize}`; }>(), { actions: null, actionsLayout: BentoButtonActionsLayout.BUTTONS_END, background: BentoCardBackground.PRIMARY, clickable: false, closed: false, disabled: false, expandable: false, lastUpdated: null, reloadButton: null, link: undefined, titleSize: BentoCardTitleSize.DEFAULT, } ); const emit = defineEmits<{ (e: 'click'); (e: 'expanded', isExpanded: boolean); }>(); const contentDiv = ref<HTMLDivElement>(null); const cardId = generateUid('card'); const showContent = ref(!props.closed); watch( () => props.closed, value => { showContent.value = !value; } ); const showLastUpdated = computed(() => !props.expandable && Boolean(props.lastUpdated)); const showHeader = computed( () => hasSlot('default') || hasSlot('description') || hasSlot('header') || showLastUpdated.value ); const showTitleWrapper = computed(() => hasSlot('default') || hasSlot('header')); const showCardBody = computed( () => (hasSlot('content') || props.actions?.length) && (!props.expandable || (props.expandable && showContent.value)) ); const tabIndex = computed(() => (props.clickable && !props.disabled ? 0 : -1)); const headerTabIndex = computed(() => (props.expandable && !props.disabled ? 0 : -1)); const isRegularCard = computed(() => !props.expandable); const cardConditionalClasses = computed(() => ({ [`b-card--${props.background}`]: props.background, 'b-card--clickable': props.clickable, 'b-card--expandable': props.expandable, 'b-card--disabled': (props.clickable || props.expandable) && props.disabled, })); const cardHeaderConditionalClasses = computed(() => ({ 'b-card__header--expandable': props.expandable, 'b-card__header--without-body': !props.expandable && !showCardBody.value, })); const cardToggleConditionalClasses = computed(() => ({ 'b-card__toggle--small-text': props.titleSize === BentoCardTitleSize.SMALL, })); const cardBodyConditionalClasses = computed(() => ({ 'b-card__body--expandable': props.expandable && hasSlot('content'), 'b-card__body--without-header': !props.expandable && !showHeader.value, })); const cardContentConditionalClasses = computed(() => ({ 'b-card__content--without-header': !props.expandable && !showHeader.value, 'b-card__content--expandable': props.expandable, })); const cardActionsConditionalClasses = computed(() => { const isNotExpandableWithoutContent = !props.expandable && props.actions && !hasSlot('content'); return { 'b-card__actions--without-content': isNotExpandableWithoutContent, 'b-card__actions--without-content-and-with-header': isNotExpandableWithoutContent && showHeader.value, }; }); const cardTitleWrapperConditionalClasses = computed(() => ({ 'b-card__title-wrapper--truncated': hasSlot('header'), })); const typography = computed( () => ({ el: 'div', variant: props.titleSize === BentoCardTitleSize.DEFAULT ? 'title' : 'body', strongest: props.titleSize === BentoCardTitleSize.SMALL, wide: props.titleSize === BentoCardTitleSize.SMALL, }) as InstanceType<typeof BentoTypography>['$props'] ); // Toggle open and close logic and animation const { contentHeight } = useExpandableContentHeight(contentDiv, showContent); const contentMaxHeight = computed(() => props.expandable && contentHeight.value ? { 'max-height': contentHeight.value } : {} ); const toggleExpansion = () => { if (!props.disabled && props.expandable) { showContent.value = !showContent.value; emit('expanded', showContent.value); } }; const onClick = () => { if (!props.disabled) { emit('click'); if (!props.clickable) { deprecate( 'BentoCard "@click" property', `Use the BentoCard "@click" with the "clickable" property to enable accessible styles.`, '3.0.0' ); } } }; const onKeyDown = () => { if (props.clickable && !props.disabled) { emit('click'); } }; onMounted(() => { if (props.link && props.clickable) { throw new Error( 'Do not combine the BentoCard "link" property with the "clickable" property. Nested interactive controls create a confusing and inaccessible experience for users of assistive technologies.' ); } }); </script> <script lang="ts"> /** * A card is a flexible and composable container. * Use cards to represent a single object or to visually group certain content, like legal information within company settings. * * @example * import { BentoCard } from '@adyen/bento-vue2'; * * export default { * components: { BentoCard }, * template: ` * <bento-card> * Title of the Card * </bento-card> * ` * }; */ export default { i18n: { messages }, name: 'bento-card', }; </script> <style lang="scss" scoped src="./card.scss" /> 

package/dist/assets/components/checkbox/checkbox.stories.ts

@@ -1 +1 @@
-import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { ref } from 'vue'; import { BentoCheckboxEvent } from './checkbox.types'; import { type Meta, type StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import BentoCheckbox from './checkbox.vue'; const DEFAULT_LABEL = 'Label text'; const DEFAULT_SUB_LABEL = 'Description below label'; const ERROR_MESSAGE = 'Error message text'; export default { title: 'Checkbox', component: BentoCheckbox, argTypes: { default: { name: 'default', defaultValue: '', description: 'Label text slot', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text', }, }, description: { name: 'description', defaultValue: '', description: 'Description text slot', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text', }, }, content: { name: 'content', defaultValue: '', description: 'Content slot available via checkbox group only', table: { type: { summary: 'VNode[]' }, }, }, [BentoCheckboxEvent.UPDATE]: { name: BentoCheckboxEvent.UPDATE, defaultValue: '', description: 'Input event handler.', table: { type: { summary: '(newModelValue: BentoCheckboxType | BentoCheckboxGroupItems) => void' }, }, control: { disable: true }, }, [BentoCheckboxEvent.INPUT]: { name: BentoCheckboxEvent.INPUT, defaultValue: '', description: 'Input event handler.', table: { type: { summary: '(newModelValue: BentoCheckboxType | BentoCheckboxGroupItems) => void' }, }, control: { disable: true }, }, }, } as Meta; type Story = StoryObj<typeof BentoCheckbox>; const defaultCode = ` <template> <!-- With model-value --> <bento-checkbox @update:model-value="clickAction" :model-value="yourModelValueVariable" value="${DEFAULT_LABEL}"> ${DEFAULT_LABEL} <template #description>${DEFAULT_SUB_LABEL}</template> </bento-checkbox> <!-- With v-model Vue2/Vue3 --> <bento-checkbox v-model="yourModelValueVariable" value="${DEFAULT_LABEL}"> ${DEFAULT_LABEL} <template #description>${DEFAULT_SUB_LABEL}</template> </bento-checkbox> </template> <script setup lang="ts"> import { BentoCheckbox } from "@adyen/bento-vue2" import type { BentoCheckboxType } from "@adyen/bento-vue2"; const yourModelValueVariable = ref<BentoCheckboxType>(false); const clickAction = (newValue: BentoCheckboxType) = { yourModelValueVariable.value = newValue; } </script> `; const Basic: Story = { render: (_args, { argTypes }) => ({ components: { BentoCheckbox }, props: Object.keys(argTypes), template: ` <bento-checkbox v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction"> {{ args.default }} <template #description>{{ args.description }}</template> </bento-checkbox> `, setup(props) { const selectedValue = ref(undefined); const clickedAction = value => { selectedValue.value = value; action(BentoCheckboxEvent.UPDATE)(value); }; return { // Values selectedValue, args: isVue2 ? props : _args, // Events clickedAction, }; }, }), }; export const Default: Story = { ...Basic, args: { default: DEFAULT_LABEL, description: DEFAULT_SUB_LABEL, }, parameters: storybookDocsParameter(defaultCode), }; const disabledCode = ` <bento-checkbox @update:model-value="clickedAction" :model-value="yourModelValueVariable" value="${DEFAULT_LABEL}" disabled > ${DEFAULT_LABEL} <template #description>${DEFAULT_SUB_LABEL}</template> </bento-checkbox> `; export const Disabled: Story = { ...Basic, args: { default: 'I am disabled', disabled: true, }, parameters: storybookDocsParameter(disabledCode), }; const indeterminateCode = ` <bento-checkbox @update:modelvalue="clickedAction" :model-value="yourModelValueVariable" value="${DEFAULT_LABEL}" indeterminate > ${DEFAULT_LABEL} <template #description>${DEFAULT_SUB_LABEL}</template> </bento-checkbox> `; export const Indeterminate = { ...Basic, args: { default: 'I am indeterminate', indeterminate: true, }, parameters: storybookDocsParameter(indeterminateCode), }; const errorCode = ` <bento-checkbox @update:modelvalue="clickedAction" :model-value="yourModelValueVariable" value="${DEFAULT_LABEL}" has-error > ${DEFAULT_LABEL} <template #description>${DEFAULT_SUB_LABEL}</template> </bento-checkbox> `; export const Error = { ...Basic, args: { default: 'I am in error state', hasError: true, }, parameters: storybookDocsParameter(errorCode), }; const errorMessageCode = ` <bento-checkbox @update:modelvalue="clickedAction" :model-value="yourModelValueVariable" value="${DEFAULT_LABEL}" :error-message="${ERROR_MESSAGE}" > ${DEFAULT_LABEL} <template #description>${DEFAULT_SUB_LABEL}</template> </bento-checkbox> `; export const ErrorMessage = { ...Basic, args: { default: 'I have an error message', errorMessage: ERROR_MESSAGE, }, parameters: storybookDocsParameter(errorMessageCode), }; 
+import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { ref } from 'vue'; import { BentoCheckboxEvent } from './checkbox.types'; import { type Meta, type StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import BentoCheckbox from './checkbox.vue'; const CheckboxDefault = "<template>\n <div>\n <!-- With model-value -->\n <bento-checkbox :model-value=\"selectedValue\" @update:model-value=\"selectedValue = $event\">\n Label text\n <template #description>Description below label</template>\n </bento-checkbox>\n\n <!-- With v-model in Vue 2 and Vue 3 -->\n <bento-checkbox v-model=\"selectedValue\">\n Label text\n <template #description>Description below label</template>\n </bento-checkbox>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoCheckbox, type BentoCheckboxType } from '@adyen/bento-vue2';\n\n const selectedValue = ref<BentoCheckboxType>(false);\n</script>\n"; const CheckboxDisabled = "<template>\n <bento-checkbox v-model=\"selectedValue\" disabled>I am disabled</bento-checkbox>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoCheckbox, type BentoCheckboxType } from '@adyen/bento-vue2';\n\n const selectedValue = ref<BentoCheckboxType>(false);\n</script>\n"; const CheckboxError = "<template>\n <bento-checkbox v-model=\"selectedValue\" has-error>I am in error state</bento-checkbox>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoCheckbox, type BentoCheckboxType } from '@adyen/bento-vue2';\n\n const selectedValue = ref<BentoCheckboxType>(false);\n</script>\n"; const CheckboxErrorMessage = "<template>\n <bento-checkbox v-model=\"selectedValue\" error-message=\"Error message text\">\n I have an error message\n </bento-checkbox>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoCheckbox, type BentoCheckboxType } from '@adyen/bento-vue2';\n\n const selectedValue = ref<BentoCheckboxType>(false);\n</script>\n"; const CheckboxIndeterminate = "<template>\n <bento-checkbox v-model=\"selectedValue\" indeterminate> I am indeterminate </bento-checkbox>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoCheckbox, type BentoCheckboxType } from '@adyen/bento-vue2';\n\n const selectedValue = ref<BentoCheckboxType>(false);\n</script>\n"; const DEFAULT_LABEL = 'Label text'; const DEFAULT_SUB_LABEL = 'Description below label'; const ERROR_MESSAGE = 'Error message text'; export default { title: 'Checkbox', component: BentoCheckbox, argTypes: { default: { name: 'default', defaultValue: '', description: 'Label text slot', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text', }, }, description: { name: 'description', defaultValue: '', description: 'Description text slot', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text', }, }, content: { name: 'content', defaultValue: '', description: 'Content slot available via checkbox group only', table: { type: { summary: 'VNode[]' }, }, }, [BentoCheckboxEvent.UPDATE]: { name: BentoCheckboxEvent.UPDATE, defaultValue: '', description: 'Input event handler.', table: { type: { summary: '(newModelValue: BentoCheckboxType | BentoCheckboxGroupItems) => void' }, }, control: { disable: true }, }, [BentoCheckboxEvent.INPUT]: { name: BentoCheckboxEvent.INPUT, defaultValue: '', description: 'Input event handler.', table: { type: { summary: '(newModelValue: BentoCheckboxType | BentoCheckboxGroupItems) => void' }, }, control: { disable: true }, }, }, } as Meta; type Story = StoryObj<typeof BentoCheckbox>; const Basic: Story = { render: (_args, { argTypes }) => ({ components: { BentoCheckbox }, props: Object.keys(argTypes), template: ` <bento-checkbox v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction"> {{ args.default }} <template #description>{{ args.description }}</template> </bento-checkbox> `, setup(props) { const selectedValue = ref(undefined); const clickedAction = value => { selectedValue.value = value; action(BentoCheckboxEvent.UPDATE)(value); }; return { // Values selectedValue, args: isVue2 ? props : _args, // Events clickedAction, }; }, }), }; export const Default: Story = { ...Basic, args: { default: DEFAULT_LABEL, description: DEFAULT_SUB_LABEL, }, parameters: storybookDocsParameter(CheckboxDefault), }; export const Disabled: Story = { ...Basic, args: { default: 'I am disabled', disabled: true, }, parameters: storybookDocsParameter(CheckboxDisabled), }; export const Indeterminate = { ...Basic, args: { default: 'I am indeterminate', indeterminate: true, }, parameters: storybookDocsParameter(CheckboxIndeterminate), }; export const Error = { ...Basic, args: { default: 'I am in error state', hasError: true, }, parameters: storybookDocsParameter(CheckboxError), }; export const ErrorMessage = { ...Basic, args: { default: 'I have an error message', errorMessage: ERROR_MESSAGE, }, parameters: storybookDocsParameter(CheckboxErrorMessage), }; 

package/dist/assets/components/checkbox/checkbox.types.ts

@@ -1 +1 @@
-import type { BentoTagProps } from '../tag/tag.types'; import { CheckboxInputState as BentoCheckboxState, type CheckboxInputType as BentoCheckboxType, type MultiCheckboxInputType as BentoMultiCheckboxType, } from '@/internal/checkbox-input/checkbox-input.types'; export { BentoCheckboxState, BentoCheckboxType, BentoMultiCheckboxType }; export enum BentoCheckboxEvent { UPDATE = 'update:model-value', INPUT = 'input', } export type BentoCheckboxTag = BentoTagProps; 
+import type { BentoTagProps } from '../tag/tag.types'; export enum BentoCheckboxEvent { UPDATE = 'update:model-value', INPUT = 'input', } export type BentoCheckboxTag = BentoTagProps; 

package/dist/assets/components/checkbox/checkbox.vue

@@ -1 +1 @@
-<template> <label class="b-checkbox" :class="conditionalClass" v-bind="styleAttrs" :aria-hidden="getAriaHidden($attrs)"> <checkbox-input v-bind="$attrs" ref="input" :aria-label="computedAriaLabel" :aria-describedby="ariaDescribedBy" :aria-required="required" :disabled="disabled" :has-error="shouldShowError" :indeterminate="isIndeterminate" :value="value" :model-value="modelValue" :readonly="readonly" @update:model-value="onChange" /> <span v-if="hasSlot('default') || shouldShowErrorMessage" class="b-checkbox__text"> <bento-typography v-if="hasSlot('default')" class="b-checkbox__label" el="span" variant="body"> <span><slot /></span> <bento-typography v-if="optional" class="b-checkbox__label-requirement" el="span" >({{ t('optional') }})</bento-typography > <bento-typography v-else-if="required" class="b-checkbox__label-requirement" el="span" >*</bento-typography > <bento-tag v-if="tag" class="b-checkbox__label-tag" v-bind="tag" /> </bento-typography> <bento-typography v-if="hasSlot('default') && hasSlot('description')" :id="descriptionId" class="b-checkbox__description" el="span" variant="body" > <slot name="description"></slot> </bento-typography> <error-message v-if="shouldShowErrorMessage" :id="errorId" :error-message="errorMessage" /> <bento-typography v-if="contentSlotAvailable" class="b-checkbox__content" el="span" variant="body"> <slot name="content"></slot> </bento-typography> </span> </label> </template> <script lang="ts"> import { computed, defineComponent, type HTMLAttributes, onMounted, type PropType, ref, toRefs, useAttrs, } from 'vue'; import { BentoCheckboxEvent, BentoCheckboxState, type BentoCheckboxTag, type BentoCheckboxType, type BentoMultiCheckboxType, } from './checkbox.types'; import { BentoTypography } from '@/components/typography'; import { CheckboxInput } from '@/components/internal/checkbox-input'; import { ErrorMessage } from '@/components/internal/error-message'; import { useDefaultSlotValidator, useHasSlot } from '@/composables'; import { generateUid } from '@/core/utils/ts'; import { getSlotText } from '@/utils/ts/get-slot-text'; import { useI18n } from '@/utils/ts/i18n'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { BentoTag } from '@/components/tag'; import { type BentoCheckboxGroupItems } from './components/checkbox-group/checkbox-group.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; /** * Checkboxes are used to make a binary choice about an option. * The label tag area is also clickable. * * @usage * import { BentoCheckbox } from '@adyen/bento-vue2'; * * export default { * components: { BentoCheckbox }, * template: ` * <bento-checkbox> * Label text * <template #description>Sub label text</template> * </bento-checkbox> * `, * } */ export default defineComponent({ name: 'bento-checkbox', i18n: { messages }, components: { BentoTag, BentoTypography, CheckboxInput, ErrorMessage, }, inheritAttrs: false, model: { prop: 'modelValue' }, props: { /** * @deprecated Since v2.0.0. Use `aria-label` instead. * Accessible name for the radio button component. It is strongly recommended to pas this value in case this component is used without a label. */ ariaLabel: { type: String, default: null }, /** * Setting this property to true will disable the checkbox in your form. */ disabled: { type: Boolean, default: false }, /** * Renders the checkbox in an error state with an error message. */ errorMessage: { type: String, default: null }, /** * Setting this property to true will show the checkbox in error state. */ hasError: { type: Boolean, default: false }, /** * The :indeterminate CSS pseudo-class represents any form element * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute * set to true, radio buttons which are members of a group in which all radio buttons are unchecked, * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate * This property lets you control the input.indeterminate native property. */ indeterminate: { type: Boolean, default: false }, /** * When handling a single checkbox with a singular state, use a boolean. * * When handling multiple checkboxes, use an array of keys. * These keys exist as a set "value" prop for each checkbox. */ modelValue: { type: [Boolean, Array] as PropType<BentoCheckboxType | BentoCheckboxGroupItems>, default: false, }, /** * Highlights the checkbox is optional. */ optional: { type: Boolean, default: false }, /** * Setting this property to true will set the checkbox to read only state. */ readonly: { type: Boolean, default: false }, /** * Highlights the checkbox is required. */ required: { type: Boolean, default: false }, /** * Sets the properties of the BentoTag component that is placed next to the label. * {@see BentoTag} */ tag: { type: Object as PropType<BentoCheckboxTag>, default: undefined }, /** * The value of the component. The DOM API casts this to a string. * The browser uses "on" as the default value. * * In the case of multiple checkboxes this value is used as a unique key. */ value: { type: [String, Number], default: null }, }, emits: [BentoCheckboxEvent.UPDATE, BentoCheckboxEvent.INPUT], setup(props, { attrs, emit, slots }) { const { t } = useI18n<{ message: MessageSchema }>({ messages }); const descriptionId = generateUid('description'); const errorId = generateUid('error'); const hasSlot = useHasSlot(slots); const { disabled, indeterminate, modelValue, readonly, value } = toRefs(props); const defaultSlotValue = getSlotText(slots)('default'); const descriptionSlotValue = getSlotText(slots)('description'); useDefaultSlotValidator('bento-checkbox', slots.default, slots.description); const isCheckboxGroup = computed(() => Array.isArray(modelValue.value)); const isChecked = computed(() => { if (!isCheckboxGroup.value) { return modelValue.value as boolean; } return (modelValue.value as BentoMultiCheckboxType).some(item => item === value.value); }); const isIndeterminate = computed(() => indeterminate.value); const shouldShowError = computed( () => !props.disabled && !props.readonly && (props.hasError || !!props.errorMessage) ); const shouldShowErrorMessage = computed(() => !props.disabled && !props.readonly && !!props.errorMessage); // Content slot logic const hasContentSlot = computed(() => hasSlot('content')); const isCheckedOrIntermediate = computed(() => isIndeterminate?.value || isChecked?.value); const contentSlotAvailable = computed( () => hasContentSlot?.value && isCheckboxGroup?.value && isCheckedOrIntermediate?.value ); // ARIA fields const ariaDescribedBy = computed<HTMLAttributes['aria-describedby']>( () => `${shouldShowErrorMessage.value ? errorId : ''} ${ defaultSlotValue && descriptionSlotValue ? descriptionId : '' }`.trim() || null ); const ariaLabelAttribute = ref(attrs['aria-label']); const { ariaLabel } = toRefs(props); const checkboxTranslation = ref(); // Translations used in the script tag need to be inside onMounted otherwise they fail in Vue 3 onMounted(() => { checkboxTranslation.value = t('checkbox'); }); // Only add aria-label if no label slot is present const computedAriaLabel = computed( () => useAriaLabel({ ariaLabel: ariaLabelAttribute.value as string, // TODO: take this line away when the aria-label props is removed label: ariaLabel, defaultFallback: hasSlot('default') ? (getSlotText(slots)('default') as string) : checkboxTranslation.value, }).value ); const getAriaHidden = (attributes: HTMLAttributes) => attributes?.['aria-hidden']; const styleAttrs = computed(() => { const { style, class: cls } = useAttrs(); return { class: cls as HTMLAttributes['class'], style: style as HTMLAttributes['style'], }; }); const conditionalClass = computed(() => ({ [`b-checkbox--${BentoCheckboxState.DISABLED}`]: disabled.value, [`b-checkbox--${BentoCheckboxState.READONLY}`]: readonly.value, })); const onChange = (newValue: BentoCheckboxType | BentoCheckboxGroupItems) => { if (disabled.value) { return; } emit(BentoCheckboxEvent.UPDATE, newValue); emit(BentoCheckboxEvent.INPUT, newValue); }; return { // Values descriptionId, errorId, ariaDescribedBy, computedAriaLabel, conditionalClass, defaultSlotValue, descriptionSlotValue, isIndeterminate, shouldShowError, shouldShowErrorMessage, contentSlotAvailable, hasContentSlot, styleAttrs, // Methods hasSlot, onChange, getAriaHidden, t, }; }, }); </script> <style lang="scss" scoped src="./checkbox.scss" /> 
+<template> <label class="b-checkbox" :class="conditionalClass" v-bind="styleAttrs" :aria-hidden="getAriaHidden($attrs)"> <checkbox-input v-bind="$attrs" ref="input" :aria-label="computedAriaLabel" :aria-describedby="ariaDescribedBy" :aria-required="required" :disabled="disabled" :has-error="shouldShowError" :indeterminate="isIndeterminate" :value="value" :model-value="modelValue" :readonly="readonly" @update:model-value="onChange" /> <span v-if="hasSlot('default') || shouldShowErrorMessage" class="b-checkbox__text"> <bento-typography v-if="hasSlot('default')" class="b-checkbox__label" el="span" variant="body"> <span><slot /></span> <bento-typography v-if="optional" class="b-checkbox__label-requirement" el="span" >({{ t('optional') }})</bento-typography > <bento-typography v-else-if="required" class="b-checkbox__label-requirement" el="span" >*</bento-typography > <bento-tag v-if="tag" class="b-checkbox__label-tag" v-bind="tag" /> </bento-typography> <bento-typography v-if="hasSlot('default') && hasSlot('description')" :id="descriptionId" class="b-checkbox__description" el="span" variant="body" > <slot name="description"></slot> </bento-typography> <error-message v-if="shouldShowErrorMessage" :id="errorId" :error-message="errorMessage" /> <bento-typography v-if="contentSlotAvailable" class="b-checkbox__content" el="span" variant="body"> <slot name="content"></slot> </bento-typography> </span> </label> </template> <script lang="ts"> import { computed, defineComponent, type HTMLAttributes, onMounted, type PropType, ref, toRefs, useAttrs, } from 'vue'; import { BentoCheckboxEvent, type BentoCheckboxTag } from './checkbox.types'; import { BentoTypography } from '@/components/typography'; import { CheckboxInput } from '@/components/internal/checkbox-input'; import { ErrorMessage } from '@/components/internal/error-message'; import { useDefaultSlotValidator, useHasSlot } from '@/composables'; import { generateUid } from '@/utils/ts/generate-uid'; import { getSlotText } from '@/utils/ts/get-slot-text'; import { useI18n } from '@/utils/ts/i18n'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { BentoCheckboxState, type BentoCheckboxType, type BentoMultiCheckboxType } from '@/types/checkbox'; import { BentoTag } from '@/components/tag'; import { type BentoCheckboxGroupItems } from './components/checkbox-group/checkbox-group.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; /** * Checkboxes are used to make a binary choice about an option. * The label tag area is also clickable. * * @usage * import { BentoCheckbox } from '@adyen/bento-vue2'; * * export default { * components: { BentoCheckbox }, * template: ` * <bento-checkbox> * Label text * <template #description>Sub label text</template> * </bento-checkbox> * `, * } */ export default defineComponent({ name: 'bento-checkbox', i18n: { messages }, components: { BentoTag, BentoTypography, CheckboxInput, ErrorMessage, }, inheritAttrs: false, model: { prop: 'modelValue' }, props: { /** * @deprecated Since v3.0.0. Use `aria-label` instead. * Accessible name for the radio button component. It is strongly recommended to pas this value in case this component is used without a label. */ ariaLabel: { type: String, default: null }, /** * Setting this property to true will disable the checkbox in your form. */ disabled: { type: Boolean, default: false }, /** * Renders the checkbox in an error state with an error message. */ errorMessage: { type: String, default: null }, /** * Setting this property to true will show the checkbox in error state. */ hasError: { type: Boolean, default: false }, /** * The :indeterminate CSS pseudo-class represents any form element * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute * set to true, radio buttons which are members of a group in which all radio buttons are unchecked, * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate * This property lets you control the input.indeterminate native property. */ indeterminate: { type: Boolean, default: false }, /** * When handling a single checkbox with a singular state, use a boolean. * * When handling multiple checkboxes, use an array of keys. * These keys exist as a set "value" prop for each checkbox. */ modelValue: { type: [Boolean, Array] as PropType<BentoCheckboxType | BentoCheckboxGroupItems>, default: false, }, /** * Highlights the checkbox is optional. */ optional: { type: Boolean, default: false }, /** * Setting this property to true will set the checkbox to read only state. */ readonly: { type: Boolean, default: false }, /** * Highlights the checkbox is required. */ required: { type: Boolean, default: false }, /** * Sets the properties of the BentoTag component that is placed next to the label. * {@see BentoTag} */ tag: { type: Object as PropType<BentoCheckboxTag>, default: undefined }, /** * The value of the component. The DOM API casts this to a string. * The browser uses "on" as the default value. * * In the case of multiple checkboxes this value is used as a unique key. */ value: { type: [String, Number], default: null }, }, emits: [BentoCheckboxEvent.UPDATE, BentoCheckboxEvent.INPUT], setup(props, { attrs, emit, slots }) { const { t } = useI18n<{ message: MessageSchema }>({ messages }); const descriptionId = generateUid('description'); const errorId = generateUid('error'); const hasSlot = useHasSlot(slots); const { disabled, indeterminate, modelValue, readonly, value } = toRefs(props); const defaultSlotValue = getSlotText(slots)('default'); const descriptionSlotValue = getSlotText(slots)('description'); useDefaultSlotValidator('bento-checkbox', slots.default, slots.description); const isCheckboxGroup = computed(() => Array.isArray(modelValue.value)); const isChecked = computed(() => { if (!isCheckboxGroup.value) { return modelValue.value as boolean; } return (modelValue.value as BentoMultiCheckboxType).some(item => item === value.value); }); const isIndeterminate = computed(() => indeterminate.value); const shouldShowError = computed( () => !props.disabled && !props.readonly && (props.hasError || !!props.errorMessage) ); const shouldShowErrorMessage = computed(() => !props.disabled && !props.readonly && !!props.errorMessage); // Content slot logic const hasContentSlot = computed(() => hasSlot('content')); const isCheckedOrIntermediate = computed(() => isIndeterminate?.value || isChecked?.value); const contentSlotAvailable = computed( () => hasContentSlot?.value && isCheckboxGroup?.value && isCheckedOrIntermediate?.value ); // ARIA fields const ariaDescribedBy = computed<HTMLAttributes['aria-describedby']>( () => `${shouldShowErrorMessage.value ? errorId : ''} ${ defaultSlotValue && descriptionSlotValue ? descriptionId : '' }`.trim() || null ); const ariaLabelAttribute = ref(attrs['aria-label']); const { ariaLabel } = toRefs(props); const checkboxTranslation = ref(); // Translations used in the script tag need to be inside onMounted otherwise they fail in Vue 3 onMounted(() => { checkboxTranslation.value = t('checkbox'); }); // Only add aria-label if no label slot is present const computedAriaLabel = computed( () => useAriaLabel({ ariaLabel: ariaLabelAttribute.value as string, // TODO: take this line away when the aria-label props is removed label: ariaLabel, defaultFallback: hasSlot('default') ? (getSlotText(slots)('default') as string) : checkboxTranslation.value, }).value ); const getAriaHidden = (attributes: HTMLAttributes) => attributes?.['aria-hidden']; const styleAttrs = computed(() => { const { style, class: cls } = useAttrs(); return { class: cls as HTMLAttributes['class'], style: style as HTMLAttributes['style'], }; }); const conditionalClass = computed(() => ({ [`b-checkbox--${BentoCheckboxState.DISABLED}`]: disabled.value, [`b-checkbox--${BentoCheckboxState.READONLY}`]: readonly.value, })); const onChange = (newValue: BentoCheckboxType | BentoCheckboxGroupItems) => { if (disabled.value) { return; } emit(BentoCheckboxEvent.UPDATE, newValue); emit(BentoCheckboxEvent.INPUT, newValue); }; return { // Values descriptionId, errorId, ariaDescribedBy, computedAriaLabel, conditionalClass, defaultSlotValue, descriptionSlotValue, isIndeterminate, shouldShowError, shouldShowErrorMessage, contentSlotAvailable, hasContentSlot, styleAttrs, // Methods hasSlot, onChange, getAriaHidden, t, }; }, }); </script> <style lang="scss" scoped src="./checkbox.scss" />