@adyen/bento-mcp 0.0.0 → 0.1.0

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

@@ -0,0 +1 @@
+<template> <bento-button class="b-toggle-button" v-bind="$attrs" :aria-expanded="`${toggled}`" :aria-pressed="`${toggled}`" :condensed="condensed" :class="conditionalClasses" :disabled="disabled" :inverse="inverse" :variant="computedVariant" @click.capture.stop="onClick" > <template v-for="(_, innerSlot) of slots" #[innerSlot]> <slot :name="innerSlot" v-bind="getSlotKeyIfVue3(innerSlot)" /> </template> </bento-button> </template> <script setup lang="ts"> import { computed, useSlots } from 'vue'; import BentoButton from '@/components/button/button.vue'; import { type BentoButtonVariant } from '../../button.types'; import { isVue3 } from 'vue-demi'; const props = defineProps({ /** * Reduces sizing of button */ condensed: { type: BentoButton.props.condensed.type, default: false, }, /** * Disables button functonality */ disabled: { type: BentoButton.props.disabled.type, default: false, }, /** * Sets color set to inverse */ inverse: { type: Boolean, default: false, }, /** * Types of flavour of Button * @values primary, secondary, tertiary */ variant: { type: BentoButton.props.variant.type, default: 'primary', validator: BentoButton.props.variant.validator, }, /** * The state of the button whether it is toggled or not. */ toggled: { type: Boolean, default: false, }, }); const emit = defineEmits<{ /** * Click event handler */ (e: 'click', event: MouseEvent): void; /** * Update the toggle state when the button has been clicked. */ (e: 'update:toggled', newToggleState: boolean): void; }>(); const computedVariant = computed( () => (props.variant === 'tertiary' ? 'tertiary-with-background' : props.variant) as BentoButtonVariant ); const conditionalClasses = computed(() => ({ [`b-toggle-button--condensed`]: props?.condensed, [`b-toggle-button--${computedVariant.value}-toggled`]: props.toggled, [`b-toggle-button--inverse`]: props.inverse, })); const onClick = (e: MouseEvent) => { // Prevent Vue3 from triggering event twice e.stopPropagation(); if (!props?.disabled) { emit('click', e); emit('update:toggled', !props.toggled); } }; const slots = useSlots(); // If we don't provide a key to `slot` in vue 3, we will get type errors const getSlotKeyIfVue3 = (slotName: string | number) => (isVue3 ? { key: slotName } : {}); </script> <script lang="ts"> /** * Toggle button is used to switch between two states (example: menu shown, menu hidden). * It functions as a regular button but retains its state to indicate whether the associated menu or element is active or inactive. * * @example * import { BentoToggleButton } from '@adyen/bento-vue2'; * * export default { * components: { BentoToggleButton }, * template: ` * <bento-toggle-button state="toggled" variant="secondary"> * Button that can be toggled * </bento-toggle-button> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./toggle-button.scss" /> 

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

@@ -0,0 +1,166 @@
+import { Canvas, Meta, Source } from '@storybook/blocks';
+import * as CardStories from './card.stories';
+
+<Meta of={CardStories} />
+
+# Card
+
+Card is a simple container that should be used to display related information that is associated with one subject or
+destination.
+
+<Canvas of={CardStories.Default} />
+
+## Use Cases
+
+Use `bento-card` component when you need to display content related to a single subject.
+
+Here are some examples:
+
+- Information Display: to display information in a well-organized manner.
+- User Profiles: to display user profile information. This could include a user's picture, name, and other pertinent
+  details.
+
+## Guidelines
+
+It's okay to use multiple cards on the page when necessary.
+
+## Variations
+
+### Regular
+
+It's a default variation of `bento-card` component. It's simple container coming with rounded corners, container fill
+and container outline.
+
+It's non-interactive component, that may contain default title, descriptive subtitle, content sections and actions.
+
+<Canvas of={CardStories.WithActions} />
+
+### Expandable
+
+Expandable `bento-card` is a container that can show small amount of information and reveal more information when
+clicked.
+
+It's an interactive component, that can be in one of 2 states: either expanded or not.
+
+If card is in collapsed state > Click on Card title area will expand the card and expose hidden content.
+
+If card is in expanded state > Click on Card title area will collapse the card and hide extra content leaving just card
+title visible.
+
+<Canvas of={CardStories.Expandable} />
+
+### Clickable
+
+A clickable `bento-card` is a card container that can be actionable, similar to a button. It becomes interactive, and it
+can have a click event handler attached to it.
+
+It also becomes focusable and can be triggerd by "Enter" or "Space" key press.
+
+**Note: Do not make an entire card clickable if the card contains other interactive elements, such as buttons or links.
+This creates a confusing and inaccessible experience for users of assistive technologies.**
+
+<Canvas of={CardStories.Clickable} />
+
+#### Closed
+
+When expandable `bento-card` is used, then it's rendered by default with opened state.
+
+You can control the opened/closed behaviour of expandable `bento-card` with 'closed' property.
+
+<Canvas of={CardStories.ExpandableClosed} />
+
+## Modifiers
+
+### Disabled
+
+The disabled property is only applied to `clickable` or `expandable` card
+
+It renders the `bento-card` in a disabled state. In practice this makes the component non-interactive and renders a
+`not-allowed` cursor on hover.
+
+<Canvas of={CardStories.Disabled} />
+
+## Actions
+
+The `bento-card` actions follow the pattern defined for all actions in Bento which is also described in detail in the
+[Button actions docs](../?path=/docs/components-button-button-actions--docs#button-actions). To use them, use the prop
+`:actions` and provide a list of actions where each is an object with `title`, `event` and `icon` (optional). Each item
+in the list will be rendered as a button. The first element in the list will be rendered as "primary". Every other
+element after the first will be rendered as "secondary".
+
+<Canvas of={CardStories.WithActions} />
+
+### Actions layout
+
+To configure the actions layout, you can use the different modifier options with the `:actions-layout` property. For
+detailed information on the modifiers check the
+[Button actions documentation](../?path=/docs/components-button-button-actions--docs#modifiers).
+
+### 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:
+
+- Provide a reference to actions array from the template
+
+<Source
+    dark
+    language="html"
+    code={`<bento-card 
+    actionsLayout="buttons-start"
+    :actions="cardButtonActions"
+>
+    Card title
+    <template #description>
+        A little context goes a long way
+    </template>
+    <template #content>
+        <bento-typography>Card content</bento-typography>
+    </template>
+</bento-card>`}
+/>
+
+- In the `event` prop, reference a function that will execute the `router.push`
+
+<Source
+    dark
+    language="typescript"
+    code={`const navigateToPage = () => router.push({ name: 'routeName' });
+const cardButtonActions = [{
+    title: 'Primary',
+    event: navigateToPage,
+}, {
+    title: 'Secondary',
+    event: clickedAction,
+}];
+`}
+/>
+
+> **Important note:** Actions as links will still be rendered as buttons meaning that native link behaviour like right
+> clicking to open in new tab won't work. The Bento team is currently working on a solution to provide native link
+> behaviour to the actions.
+
+## Accessibility
+
+On top of already using the correct semantic elements for the buttons, the `bento-card` component used the ARIA
+`article` role.
+
+### Keyboard interaction
+
+The `expandable` card header and action buttons are reachable through keyboard navigation and follows logical navigation
+flow of the page. A detailed list of keyboard interactions for `expandable` card is provided in the table below.
+
+| Keyboard interaction | Output                                                                        |
+| -------------------- | ----------------------------------------------------------------------------- |
+| `Tab`                | Moves focus to the card, header or action buttons in card content.            |
+| `Enter`              | Activates the card, header or action button, where the focus is currently on. |
+| `Space`              | Activates the card or button, where the focus is currently on.                |
+
+### Roles, states and properties
+
+| ARIA attribute | is automatic?                 | fallback used | manual override |
+| -------------- | ----------------------------- | ------------- | --------------- |
+| `role`         | Yes, has the `article` value. | -             | -               |
+
+## Resources
+
+- [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?type=design&node-id=3672-75024&t=t0vz2EC0tMDFOarD-0)

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

@@ -0,0 +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, }, }; 

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

@@ -0,0 +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 { observeSizeOfElement } from '@/utils/ts/resize'; 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 { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, showContent); const contentMaxHeight = computed(() => props.expandable && contentHeight.value ? { 'max-height': contentHeight.value } : {} ); watch( () => contentDiv.value, () => { let observer: ResizeObserver | null = null; if (!observer && contentDiv.value) { observer = observeSizeOfElement(contentDiv.value, () => { if (contentDiv.value) { updateContentHeight(); } }); } } ); const toggleExpansion = () => { if (!props.disabled && props.expandable) { showContent.value = !showContent.value; emit('expanded', showContent.value); updateContentHeight(); } }; 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" /> 

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

@@ -0,0 +1,116 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as CheckboxStories from './checkbox.stories';
+import * as CheckboxGroupStories from './components/checkbox-group/checkbox-group.stories';
+
+<Meta of={CheckboxStories} />
+
+# Checkbox
+
+A checkbox allows the user to make a binary choice about an option. Checkboxes can be used by themselves or in a list
+when more than one option (or none of them) can be selected at the same time. A checkbox usually requires the choice to
+be confirmed with some sort of action, e.g. a `Save` or an `Apply` button.
+
+<Canvas of={CheckboxStories.Default} />
+
+## Use Cases
+
+Use a checkbox to:
+
+-   Accept terms and conditions.
+-   Select multiple items from a list, such as selecting items to add to a shopping cart or choosing multiple interests
+    in a user's profile.
+-   Select features in applications, allowing users to enable or disable specific preferences or settings.
+-   Make a todo list.
+
+### Do not use
+
+Don't use a checkbox if you need to:
+
+-   Turn an option on or off without requiring confirmation. In that case, use a toggle.
+-   Select only one option from a list of mutually exclusive choices. Consider using the `input-radio` component
+    instead.
+
+### Guidelines
+
+-   Checkboxes labels should be short, descriptive and clearly convey what the user is opting in for or out of (e.g.
+    `Accept the terms and conditions`).
+-   Checkboxes work best when stacked vertically, so it’s easier to scan the options. If you need to display them
+    horizontally, make sure you have enough space between the options so that it’s clear which checkbox goes with which
+    label.
+-   If needed, an additional description label can also be used.
+-   Leave the checkbox blank by default so users must actively click it to opt in for their choice.
+
+## Variations
+
+### Indeterminate state
+
+A checkbox can have an `indeterminate` state. This state is used to indicate that only some of that item’s child
+elements have been selected.
+
+<Canvas of={CheckboxStories.Indeterminate} />
+
+## Modifiers
+
+### Disabled option
+
+Renders the `checkbox` component in a disabled state. In practice this makes the component non-interactive and renders a
+not-allowed cursor on hover.
+
+Use this checkbox when another action has to be completed before the checkbox is usable.
+
+<Canvas of={CheckboxStories.Disabled} />
+
+### Readonly option
+
+Renders the `checkbox` component in a readonly state. In terms of functionality, read only states are focusable and
+submittable in a form. They're considered to be 'active' from an application's point of view. User can highlight and
+copy the data in them.
+
+### Error message option
+
+Renders the `checkbox` component in an error state with an error message.
+
+<Canvas of={CheckboxStories.ErrorMessage} />
+
+### Error option
+
+Renders the `checkbox` component in an error state.
+
+<Canvas of={CheckboxStories.Error} />
+
+### Adding tags to items
+
+If you would like to grab a user's attention or guide them in their choice on which item to select then you may want to
+use `tag` property. This property accepts all properties a `BentoTag` accepts.
+
+<Canvas of={CheckboxGroupStories.WithTag} />
+
+## Accessibility
+
+The `label` and `description` areas are clickable. A click on these elements selects the checkbox input value.
+
+Screen readers convey the state of the checkbox automatically given this component is built semantically and has the
+right ARIA `role` set.
+
+### Keyboard interaction
+
+The `checkbox` is reachable through keyboard navigation and follows the logical navigation flow of the page. A detailed
+list of keyboard interactions is provided in the table below.
+
+| Keyboard interaction | Output                                            |
+| -------------------- | ------------------------------------------------- |
+| `Tab`                | Moves focus to the checkbox or away from it.      |
+| `Space`              | When focus is on the checkbox, selects the value. |
+
+### Roles, states and properties
+
+| ARIA attribute | is automatic?                                                                                      | fallback used                                                                         | manual override |
+| -------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | --------------- |
+| `aria-label`   | Yes, corresponds to the `default` slot text or the `description` slot when the `default` is empty. | If no text is passed to either of the slots, then the 'checkbox' string will be used. | -               |
+| `role`         | Yes, through the semantic `input[type="checkbox"]` element with `role="checkbox"` set.             | -                                                                                     | -               |
+| `aria-checked` | Yes, set when the checkbox gets selected through the `input`'s `checked` property.                 | -                                                                                     | -               |
+
+## Resources
+
+-   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=211-1394&t=1QyqMagNIghSFOGT-0)
+-   [WAI-ARIA guidelines](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox/)

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

@@ -0,0 +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), }; 

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

@@ -0,0 +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" :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" >({{ t('required') }})</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 from version 2.0.0. Use the aria-label attribute 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" /> 

package/dist/assets/components/checkbox/components/checkbox-group/checkbox-group.docs.mdx

@@ -0,0 +1,134 @@
+import { Canvas, Meta, Source } from '@storybook/blocks';
+import * as CheckboxGroupStories from './checkbox-group.stories';
+
+<Meta of={CheckboxGroupStories} />
+
+# Checkbox Group
+
+A checkbox group component allows to group together checkboxes that are related to each other.
+
+<Canvas of={CheckboxGroupStories.Default} />
+
+> IMPORTANT
+>
+> Labels without a description are hidden by default. You must set a `label` and a `description` to display both. If
+> only a `label` (without `description`) is meant to be displayed, then set `hideLabel` to `false`. See more details in
+> [hide label](#hide-label).
+
+## Use Cases
+
+Use a checkbox group to:
+
+-   Group checkboxes related to each other.
+
+### Do not use
+
+Don't use a checkbox group if:
+
+-   You only have one checkbox. In that case, use the `checkbox` component instead.
+-   The checkboxes in the group are not related to each other - use singular checkboxes instead.
+
+### Guidelines
+
+Checkboxes work best when stacked vertically, so it’s easier to scan the options. If you need to display them
+horizontally, make sure you have enough space to display them on one line so that it’s clear that they are all related.
+If there is not enough space, the checkboxes that overflow the available space will go on a new line.
+
+## Variations
+
+### Variant
+
+It can take up the following values:
+
+-   `'vertical'`: displays the checkboxes in the group with a vertical layout. It's the default option.
+-   `'horizontal'`: displays the checkboxes in the group with a horizontal layout. If not enough space is available, the
+    corresponding checkboxes will go on a new line.
+
+## Modifiers
+
+### Disabled
+
+Renders the `checkbox-group` component with all the `checkbox`s in a disabled state. In practice this makes the
+component non-interactive and renders a not-allowed cursor on hover.
+
+### Readonly
+
+Renders the `checkbox-group` component with all the `checkbox`s in a readonly state. In terms of functionality, read
+only states are focusable and submittable in a form. They're considered to be 'active' from an application's point of
+view. User can highlight and copy the data in them.
+
+### Tooltip
+
+A tooltip with extra information for the field can be rendered by passing the desired information to the `tooltipText`
+prop.
+
+### Error
+
+There are two properties that control the error state of `checkbox`s within `checkbox-group`:
+
+-   `errorMessage`: renders all checkboxes with an error state and displays an error message below
+-   `hasError`: renders all checkboxes with an error state
+
+`hasError` is deprecated and will be removed in the near future, so please use `errorMessage`.
+
+### Hide Label
+
+The `label` is not displayed by default in Bento `1.x` if passed without a `description` property set at the same time.
+
+To display a `label` without a `description` set, the property `hideLabel` must be set to `false` (`true` by default).
+
+Displaying a `label` (without a `description`) will be the default in Bento `2.x` and the property `hideLabel` will be
+removed.
+
+<Source
+    dark
+    language="html"
+    code={`<bento-checkbox-group
+    :items="[
+        { value: 1, label: 'Label text' },
+        { value: 2, label: 'Label text 2', description: 'Description text' },
+    ]"
+    label="Group label"
+    hide-label="false"
+/>`}
+/>
+
+### Slots
+
+The `content` slot is available to the vertical layout of checkbox group, and will only display the content for the
+selected checked or intermediately checked options.
+
+<Canvas of={CheckboxGroupStories.Slots} />
+
+## Adding tags to items
+
+If you would like to grab a user's attention or guide them in their choice on which item to select then you may want to
+use `tag` property on each `BentoCheckboxGroupItem`. This property accepts all properties a `BentoTag` accepts.
+
+<Canvas of={CheckboxGroupStories.WithTag} />
+
+## Accessibility
+
+### Keyboard interaction
+
+The `bento-checkbox-group` has been implemented using WAI-ARIA's pattern for grouping controls. Since the component is
+implemented via a `fieldset` tag, it is reachable through keyboard navigation and follows the logical navigation flow of
+the page. A detailed list of keyboard interactions is provided in the table below.
+
+| Keyboard interaction | Output                                                        |
+| -------------------- | ------------------------------------------------------------- |
+| `Tab`                | Moves focus to each checkbox in the group or away from it.    |
+| `Space`              | When focus is on one of the checkboxes, it selects the value. |
+
+### Roles, states and properties
+
+| ARIA attribute | is automatic?                                                                      | fallback used | manual override                                                                                                                                                                                   |
+| -------------- | ---------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `role`         | Yes, through the semantic `fieldset` element, which groups all its child elements. | -             | -                                                                                                                                                                                                 |
+| `form`         | No, it needs to be manually set via the `form` property.                           | -             | The user can pass the form id with which the group needs to be associated with. This allows to use such component also externally from the form and have the value submitted along with the form. |
+| `disabled`     | No, it needs to be set by setting the `disabled` prop to `true`.                   | -             | If set to reu, it disables all the elements contained in the group.                                                                                                                               |
+
+## Resources
+
+-   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=1934-27878&t=ir5bsJdP6TgVgXy0-0)
+-   [WAI-ARIA guidelines for grouping controls](https://www.w3.org/WAI/tutorials/forms/grouping/)

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

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { ref } from 'vue'; import { BentoCheckboxGroupVariant } from '@/components/checkbox/components/checkbox-group/checkbox-group.types'; import { BentoCheckboxEvent } from '@/components/checkbox/checkbox.types'; import { isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoCheckboxGroup from './checkbox-group.vue'; import { BentoTag } from '@/components/tag'; const GROUP_LABEL = 'Group label'; const DESCRIPTION = 'Optional description'; const CHECKBOX_DEFAULT_LABEL = 'Label text'; const CHECKBOX_DEFAULT_SUB_LABEL = 'Sub label text'; const ERROR_MESSAGE = 'Error message text'; const ITEMS = [ { value: 1, label: CHECKBOX_DEFAULT_LABEL }, { value: 2, label: `${CHECKBOX_DEFAULT_LABEL} 2`, description: CHECKBOX_DEFAULT_SUB_LABEL }, { value: 3, label: 'Readonly checkbox', readonly: true }, { value: 4, label: 'Error message checkbox', errorMessage: ERROR_MESSAGE }, ]; export default { title: 'Checkbox/Checkbox Group', component: BentoCheckboxGroup, argTypes: { variant: { options: Object.values(BentoCheckboxGroupVariant), mapping: BentoCheckboxGroupVariant, control: { type: 'select', }, }, items: { table: { type: { summary: 'BentoCheckboxGroupItems' }, }, }, disabled: { control: { type: 'boolean', }, }, hasError: { control: { type: 'boolean' }, table: { category: 'Deprecated' }, }, [BentoCheckboxEvent.UPDATE]: { name: BentoCheckboxEvent.UPDATE, defaultValue: '', description: 'Input event handler.', table: { type: { summary: '(newGroupValue: Array<number | string | null>) => void' }, }, control: { disable: true }, }, [BentoCheckboxEvent.INPUT]: { name: BentoCheckboxEvent.INPUT, defaultValue: '', description: 'Deprecated since version 2.0. Use `v-model` or `update:model-value` instead', table: { category: 'Deprecated', type: { summary: '(newGroupValue: Array<number | string | null>) => void' }, }, control: { disable: true }, }, }, } as Meta; type Story = StoryObj<typeof BentoCheckboxGroup>; const defaultCode = ` <template> <!-- With model-value --> <bento-checkbox-group :items="[ { value: 1, label: 'Label text' }, { value: 2, label: 'Label text 2', description: 'Sub label text' }, ]" :model-value="yourModelValueVariable" label="Group label" description="Optional description" @update:model-value="yourUpdateHandler" /> <!-- With v-model Vue2/Vue3 --> <bento-checkbox-group :items="[ { value: 1, label: 'Label text' }, { value: 2, label: 'Label text 2', description: 'Sub label text' }, ]" v-model="yourModelValueVariable" label="Group label" description="Optional description" /> </template> <script setup lang="ts"> import { BentoCheckboxGroup } from '@adyen/bento-vue2' const yourModelValueVariable = ref<Array<number>>([1]); const yourUpdateHandler = (newGroupValue: Array<number>) => { yourModelValueVariable.value = newGroupValue; } </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoCheckboxGroup }, props: Object.keys(argTypes), template: ` <div> <bento-checkbox-group v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction" /> </div> `, 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, }; }, }), args: { items: ITEMS, variant: 'vertical', label: GROUP_LABEL, description: DESCRIPTION, }, parameters: storybookDocsParameter(defaultCode), }; export const Slots: Story = { render: (_args, { argTypes }) => ({ components: { BentoCheckboxGroup, BentoTag }, props: Object.keys(argTypes), template: ` <div> <bento-checkbox-group v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction" > <template #content="{ value }"> <bento-tag :label="contentString(value)"/> </template> </bento-checkbox-group> </div> `, setup(props) { const selectedValue = ref([ITEMS[1].value]); const clickedAction = value => { selectedValue.value = value; action(BentoCheckboxEvent.UPDATE)(value); }; const contentString = value => `Slot for value ${value}`; return { // Values selectedValue, args: isVue2 ? props : _args, // Methods contentString, // Events clickedAction, }; }, }), args: { items: ITEMS, variant: 'vertical', label: GROUP_LABEL, description: DESCRIPTION, }, parameters: storybookDocsParameter(` <template> <!-- With model-value --> <bento-checkbox-group :items="[ { value: 1, label: 'Label text' }, { value: 2, label: 'Label text 2', description: 'Sub label text' }, ]" :model-value="yourModelValueVariable" label="Group label" description="Optional description" @update:model-value="yourUpdateHandler" > <template #content="{ value }"> <bento-tag :label="value" /> </template> </bento-checkbox-group> <!-- With v-model Vue2/Vue3 --> <bento-checkbox-group :items="[ { value: 1, label: 'Label text' }, { value: 2, label: 'Label text 2', description: 'Sub label text' }, ]" v-model="yourModelValueVariable" label="Group label" description="Optional description" > <template #content="{ value }"> <bento-tag :label="value" /> </template> </bento-checkbox-group> </template> <script setup lang="ts"> import { BentoCheckboxGroup } from '@adyen/bento-vue2' const yourModelValueVariable = ref<Array<number>>([1]); const yourUpdateHandler = (newGroupValue: Array<number>) => { yourModelValueVariable.value = newGroupValue; } </script> `), }; const withTagCode = ` <template> <!-- With model-value --> <bento-checkbox-group :items="[ { value: 1, label: 'Label text', tag: { label: 'Recommended' } }, { value: 2, label: 'Label text 2', description: 'Sub label text' }, ]" :model-value="yourModelValueVariable" label="Group label" description="Optional description" @update:model-value="yourUpdateHandler" /> <!-- With v-model Vue2/Vue3 --> <bento-checkbox-group :items="[ { value: 1, label: 'Label text', tag: { label: 'Recommended' }, { value: 2, label: 'Label text 2', description: 'Sub label text' }, ]" v-model="yourModelValueVariable" label="Group label" description="Optional description" /> </template> <script setup lang="ts"> import { BentoCheckboxGroup } from '@adyen/bento-vue2' const yourModelValueVariable = ref<Array<number>>([1]); const yourUpdateHandler = (newGroupValue: Array<number>) => { yourModelValueVariable.value = newGroupValue; } </script> `; export const WithTag: Story = { ...Default, args: { ...Default.args, items: [ { value: 1, label: CHECKBOX_DEFAULT_LABEL, tag: { label: 'Recommended' } }, { value: 2, label: `${CHECKBOX_DEFAULT_LABEL} 2`, description: CHECKBOX_DEFAULT_SUB_LABEL }, { value: 3, label: 'Readonly checkbox', readonly: true }, { value: 4, label: 'Error message checkbox', errorMessage: ERROR_MESSAGE }, ], }, parameters: storybookDocsParameter(withTagCode), }; 

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

@@ -0,0 +1 @@
+<template> <div class="b-checkbox-group"> <controls-group class="b-checkbox-group__checkboxes" :aria-describedby="shouldShowGroupErrorMessage ? errorId : ''" component-name="bento-checkbox-group" :class="conditionalClasses" :description="description" :disabled="disabled" :form="formId" :hide-label="hideLabel" :label="label" :optional="optional" :required="required" :tooltip-text="tooltipText" > <bento-checkbox v-for="item in items" :key="item.value" :model-value="inputValue" :value="item.value" :disabled="disabled || item.disabled" :has-error="shouldShowGroupError || item.hasError" :error-message="shouldShowGroupError ? null : item.errorMessage" :readonly="isReadOnly || item.readonly" :tag="item.tag" @update:model-value="onModelValueUpdate" > <template #default>{{ item.label }}</template> <template v-if="item.description" #description>{{ item.description }}</template> <template v-if="hasContentSlot('content')" #content> <slot name="content" v-bind="item"></slot> </template> </bento-checkbox> </controls-group> <error-message v-if="shouldShowGroupErrorMessage" :id="errorId" :error-message="errorMessage" class="b-checkbox-group__error-message" /> </div> </template> <script setup lang="ts"> import { computed, onMounted, type PropType, ref, toRef, useSlots, watch } from 'vue'; import { ControlsGroup } from '@/components/internal/controls-group'; import { ErrorMessage } from '@/components/internal/error-message'; import { type BentoCheckboxGroupEmits, type BentoCheckboxGroupItems, BentoCheckboxGroupVariant, } from './checkbox-group.types'; import BentoCheckbox from '@/components/checkbox/checkbox.vue'; import { generateUid } from '@/core/utils/ts'; import { deprecate } from '@/utils/ts/deprecate'; import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; const props = defineProps({ /** * Descriptive supporting text visbile underneath the label. */ description: { type: String, default: null }, /** * If set to true, renders all checkboxes in the group in a disabled state. */ disabled: { type: Boolean, default: false }, /** * Renders all checkboxes in an error state with an error message. */ errorMessage: { type: String, default: null }, /** * The form id the checkbox group is associated with. Defaults to null, as a checkbox group can also be used standalone. */ formId: { type: String, default: null }, /** * If set to true, renders all checkboxes in the group in an error state. * * @deprecated Use "errorMessage" prop instead */ hasError: { type: Boolean, default: false }, /** * Shows/hides the group label. */ hideLabel: { type: Boolean, default: null }, /** * The checkbox group's items. */ items: { type: Array as PropType<BentoCheckboxGroupItems>, required: true }, /** * The name associated with the group. Required for accessibility purposes. */ label: { type: String, required: true }, /** * Determines the initially selected value of the group. Corresponds to the BentoCheckboxButtonItem's value. * Defaults to no value selected. */ modelValue: { type: Array as PropType<Array<number | string | null>>, default: () => [] }, /** * Indicates the field is optional. */ optional: { type: Boolean, default: false }, /** * If set to true, renders all checkboxes in the group in a readonly state. */ readonly: { type: Boolean, default: false }, /** * Indicates the field is required. */ required: { type: Boolean, default: false }, /** * Tooltip message. */ tooltipText: { type: String, default: null }, /** * The checkbox group's layout. It can be vertical or horizontal. Defaults to vertical. */ variant: { type: String as PropType<BentoCheckboxGroupVariant | `${BentoCheckboxGroupVariant}`>, default: BentoCheckboxGroupVariant.VERTICAL, validator: (value: BentoCheckboxGroupVariant) => Object.values(BentoCheckboxGroupVariant).includes(value), }, }); const emit = defineEmits<BentoCheckboxGroupEmits>(); const slots = useSlots(); const errorId = generateUid('error'); const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly')); const { emitValue } = useFormFieldEmits(emit); const shouldShowGroupError = computed( () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.hasError) ); const shouldShowGroupErrorMessage = computed(() => !props.disabled && !isReadOnly.value && !!props.errorMessage); const conditionalClasses = computed(() => ({ 'b-checkbox-group__checkboxes--horizontal': props.variant === BentoCheckboxGroupVariant.HORIZONTAL, })); // Slots logic // Temporary, use-has-slots composable doesn't currently work for // vue3 named scoped slots const hasContentSlot = (name: string) => !!slots[name]; const shouldShowSlotsError = computed(() => hasContentSlot('content') && props.variant !== 'vertical'); watch( shouldShowSlotsError, newValue => { if (newValue) { throw new Error('The content slot is only available for the vertical checkbox group layout'); } }, { immediate: true } ); const inputValue = ref(props.modelValue); watch( () => props.modelValue, () => { inputValue.value = props.modelValue; } ); const onModelValueUpdate = (value: any) => { inputValue.value = value; emitValue(value); }; onMounted(() => { if (props.hasError) { deprecate( 'BentoCheckboxGroup "hasError" property', `Use the BentoCheckboxGroup "errorMessage" property instead to indicate that there is a modifier error. Having the field as "undefined" will hide/remove the error. <bento-checkbox-group errorMessage="Error message text" />`, '2.0.0' ); } }); </script> <script lang="ts"> const COMPONENT_NAME = 'bento-checkbox-group'; /** * A checkbox group component should be used whenever it is necessary to group a set of checkboxes that are related together * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/ * * import { BentoCheckboxGroup } from '@adyen/bento-vue2/'; * * export default { * components: { BentoCheckboxGroup }, * template: ` * <bento-checkbox-group * label="Your group label" * :items="[ * { value: 1, label: 'Your label' }, * { value: 2, label: 'Another label', description: 'Your sub label' }, * ]" * /> * ` * }; */ export default { name: COMPONENT_NAME, model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./checkbox-group.scss" /> 

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

@@ -0,0 +1,51 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as ChipStories from './chip.stories';
+
+<Meta of={ChipStories} />
+
+# Chip
+
+Chip is a dismissible tag-like component that can be used to display selected items, which may need to be removed by the
+user.
+
+<Canvas of={ChipStories.Default} />
+
+## Use Cases
+
+Use a Chip if:
+
+- you need to show a selected item that can be removed by the user
+
+### Do not use
+
+- for static tags - use [tag](https://adyen-bento.netlify.app/?path=/docs/components-tag--docs) component instead
+
+## Modifiers
+
+### Condensed
+
+You can render `bento-chip` in a smaller size by passing the `condensed` prop.
+
+- use `condensed` for small, cramped spaces, for example inside of a dropdown
+- use default size for larger spaces
+- do not mix different them in one layout or in close proximity
+
+### Character limit
+
+You can limit the number of characters displayed in the chip by passing `characterLimit` prop. Additional characters
+will be truncated.
+
+## Accessibility
+
+### Keyboard interaction
+
+- User can use `Tab` key to move focus to the chip
+- User can use `Spacebar`/`Enter` to trigger the chip's action
+
+### Roles, states and properties
+
+Chip uses `BaseButton` as a base as it acts like a button. It uses a `button` tag.
+
+## Resources
+
+- [Figma link](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=41484-71284&p=f&m=dev)

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

@@ -0,0 +1 @@
+import { isVue2 } from 'vue-demi'; import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoChip from './chip.vue'; import type { Meta, StoryObj } from '@storybook/vue'; const meta: Meta = { title: 'Chip', component: BentoChip, }; export default meta; type Story = StoryObj<typeof BentoChip>; const defaultCode = ` <bento-chip label="Chip label" :character-limit="20" @click="removeChip" /> <script setup> const removeChip = () => { // whatever action you want to trigger when the user clicks the chip // should remove the chip } </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoChip }, props: Object.keys(argTypes), template: ` <bento-chip v-bind="args" @click="clickAction" /> `, setup(props) { return { // Values args: isVue2 ? props : _args, clickAction: action('click'), }; }, }), args: { label: 'Chip label', characterLimit: 20, condensed: false, disabled: false, readonly: false, error: false, }, parameters: storybookDocsParameter(defaultCode), }; 

package/dist/assets/components/chip/chip.vue

@@ -0,0 +1 @@
+<template> <base-button class="b-chip" :disabled="disabled" :class="conditionalClasses" @click="emit('click')"> <bento-typography el="span" :variant="computedTypographyVariant" class="b-chip__text"> {{ computedLabel }} </bento-typography> <template #iconRight><cross-small-icon :svg-title="t('remove')" class="b-chip__icon" /></template> </base-button> </template> <script setup lang="ts"> import { BaseButton } from '@/components/internal/base-button'; import { BentoTypography, type BentoTypographyVariant } from '@/components/typography'; import CrossSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-small'; import { useI18n } from '@/utils/ts/i18n'; import { truncate } from '@/utils/ts/truncate'; import type { BentoChipProps } from './chip.types'; import messages from './messages.json'; import { computed } from 'vue'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<BentoChipProps>(), { disabled: false, readonly: false, error: false, condensed: false, characterLimit: null, }); const emit = defineEmits<{ /** * Emits when chip is clicked */ (e: 'click'): void; }>(); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const computedLabel = computed(() => props.characterLimit ? truncate(props.label, props.characterLimit) : props.label ); const computedTypographyVariant = computed<`${BentoTypographyVariant}`>(() => props.condensed ? 'caption' : 'body' ); const conditionalClasses = computed(() => ({ 'b-chip--condensed': props.condensed, 'b-chip--readonly': props.readonly && !props.disabled, 'b-chip--error': props.error, })); </script> <script lang="ts"> /** * Chip is a dismissible tag-like component that can be used to display selected items, which may need to be removed by the user. * * @example * import { BentoChip } from '@adyen/bento-vue2'; * * export default { * components: { BentoChip }, * template: ` * <bento-chip * label="Label" * :character-limit="20" * condensed * @click="removeChip()" * * /> * ` * } */ export default { i18n: { messages } }; </script> <style lang="scss" scoped src="./chip.scss" />