@adyen/bento-mcp 0.0.0 → 0.1.0

package/dist/assets/components/search-bar/search-bar.docs.mdx

@@ -0,0 +1,117 @@
+import { Canvas, Story, Meta } from '@storybook/blocks';
+import * as ComponentStories from './search-bar.stories';
+
+<Meta of={ComponentStories} />
+
+# Search bar
+
+Search functionality to help users find the desired data quicker. When a user starts typing, the data is dynamically
+filtered to only show the relevant results.
+
+Clearing the search field displays the entire list again.
+
+<Canvas of={ComponentStories.Default} />
+
+## Use Cases
+
+Use a Search bar if:
+
+-   Filtering a list of elements through a substring is required inside the filters.
+
+### Do not use
+
+Here are some "don't dos":
+
+-   Use it as a replacement of the filters.
+
+### Guidelines
+
+In order to use the component with its full potential, it is recommended to use the `useSearchBarFilter` composable
+which works together with the `bento-search-bar` component by complementing it's functionality.
+
+The `useSearchBarFilter` composible receives the `searchTerm` property which contains the value by which the search will
+be made and a list of items in the `data` property that implements the `BentoSearchBarItem` interface, that is, an array
+of elements of which each item in that list contains a property `label` that will be used to perform the
+search/filtering process.
+
+The `useSearchBarFilter` filters the `data` by the `searchTerm` returning a new instance of the `data` object with only
+the values that match `searchTerm` by containing the term or by fully matching it.
+
+> It is recommended to use the value returned by `useSearchBarFilter` as the object used to display the list of items in
+> the view.
+
+Example:
+
+```typescript
+import {
+    BentoSearchBar,
+    BentoSearchBarData,
+    useSearchBarFilter
+} from '@adyen/bento-vue2';
+
+export default {
+    components: { BentoSearchBar },
+    template: `
+        <bento-search-bar
+            input-field-aria-label="Search bar"
+            v-model="searchTerm"
+            @input="onInput"
+            @clear="onClearSearch"
+        />
+        // Render the filtered data
+        {{ filteredData }}
+    `,
+    setup() {
+        const searchTerm = ref('');
+        const data = ref<BentoSearchBarData>([]);
+        const filteredData = useSearchBarFilter(searchTerm, data);
+
+        consdt onInput = () => {}
+        consdt onClearSearch = () => {}
+
+        return {
+            searchTerm,
+            filteredData,
+            onInput,
+            onClearSearch,
+        };
+    }
+}
+```
+
+## Accessibility
+
+Being an interactive element, the search bar is reachable through keyboard navigation in the logical navigation flow of
+the page.
+
+The following keys trigger the following actions:
+
+### Keyboard interaction
+
+### Search input
+
+| Keyboard interaction | Action                                              |
+| -------------------- | --------------------------------------------------- |
+| `Tab`                | Moves focus to "clear search" button (if available) |
+
+### Clear search button
+
+| Keyboard interaction | Action                                                         |
+| -------------------- | -------------------------------------------------------------- |
+| `Tab`                | Moves focus away from the "clear search" button (if available) |
+| `Space`              | Activates the button, triggering the click event.              |
+| `Enter`              | Activates the button, triggering the click event.              |
+
+### Roles, states and properties
+
+Adhering to the [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/) standard we follow the
+[searchbox role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/searchbox_role) documentation
+provided.
+
+| ARIA attribute | is automatic? | fallback used | manual override |
+| -------------- | ------------- | ------------- | --------------- |
+| label          | No            | -             | -               |
+
+## Resources
+
+-   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?type=design&node-id=2705-57473&t=59PhABPWX0eH9nSi-0)

package/dist/assets/components/search-bar/search-bar.stories.ts

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import { ref } from 'vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import BentoSearchBar from './search-bar.vue'; export default { title: 'Search bar', component: BentoSearchBar, }; export const Default = (_args, { argTypes }) => ({ components: { BentoSearchBar }, props: Object.keys(argTypes), setup(props) { const searchTerm = ref(props.value); const inputAction = inputValue => { action('input')(inputValue); }; const clearAction = () => { searchTerm.value = ''; action('clear')(); }; return { // Values searchTerm, args: isVue2 ? props : _args, // Methods inputAction, clearAction, }; }, // :input-field-aria-label="args.inputFieldAriaLabel" template: ` <bento-search-bar v-bind="args" :debounce-time="args.debounceTime" v-model="searchTerm" @input="inputAction" @clear="clearAction" /> `, }); Default.args = { inputFieldAriaLabel: 'Search bar short description', placeholder: 'Placeholder text', }; const DefaultCode = ` <bento-search-bar input-field-aria-label="Search bar short description" :debounce-time="500" v-model="searchTerm" @input="inputAction" @clear="clearAction" /> `; Default.parameters = storybookDocsParameter(DefaultCode); 

package/dist/assets/components/search-bar/search-bar.vue

@@ -0,0 +1 @@
+<template> <div class="b-search-bar"> <bento-input-field ref="bentoInputField" v-bind="attrs" :model-value="searchTerm" type="search" :condensed="condensed" :aria-label="inputFieldAriaLabel" :aria-hidden="false" :disabled="disabled" :placeholder="placeholder" @update:model-value="onInputEvent" @focus="emit('focus')" @blur="emit('blur')" @escape-pressed="emit(BentoSearchBarInternalEvent.ESCAPE)" > <template #iconBefore> <search-icon :svg-title="t('search')" aria-hidden="true" /> </template> <template v-if="searchTerm" #iconAfter> <div class="b-search-bar__clear-search" tabindex="0" data-testid="b-search-bar-clear-search-button" @click="onClearSearch" @keypress.enter="onClearSearch" @keyup.space="onClearSearch" > <cross-circle-fill-icon :svg-title="t('clearSearch')" /> </div> </template> </bento-input-field> </div> </template> <script setup lang="ts"> import { provide, ref, toRef, useAttrs, watch } from 'vue'; import { debounce } from '@/utils/ts/debounce'; import { BentoSearchBarInternalEvent, type BentoSearchBarProps } from './search-bar.types'; import { useI18n } from '@/utils/ts/i18n'; import { INPUT_FIELD_HINT_INJECTION_KEY } from '@/components/input-field/input-field.keys'; // eslint-disable-next-line @typescript-eslint/consistent-type-imports import BentoInputField from '@/components/input-field/input-field.vue'; import SearchIcon from '@adyen/ui-assets-icons-16/vue/search'; import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<BentoSearchBarProps>(), { condensed: false, debounceTime: 300, disabled: false, hint: '', placeholder: '', value: undefined, }); const emit = defineEmits<{ /** * Emitted when the input value changes by typing a search. Debounced by the `debounceTime` property */ (e: 'input', inputValue: string): void; /** * Emitted when the "clear search" button is clicked */ (e: 'clear'): void; /** * Emitted when the "ESC" key is pressed inside the Search Bar input */ (e: 'escape-pressed'): void; /** * Emitted when the element has lost focus */ (e: 'blur'): void; /** * Emitted when the element has received focus */ (e: 'focus'): void; }>(); provide(INPUT_FIELD_HINT_INJECTION_KEY, toRef(props, 'hint')); const attrs = useAttrs(); const searchTerm = ref(props.value); const bentoInputField = ref<InstanceType<typeof BentoInputField> | null>(); watch( () => props.value, () => { searchTerm.value = props.value; }, { immediate: true } ); const onClearSearch = () => { searchTerm.value = ''; emit('clear'); emit('input', ''); }; const debouncedEmit = debounce(() => { emit('input', searchTerm.value); }, props.debounceTime); const onInputEvent = (value: string) => { searchTerm.value = value; debouncedEmit(); }; const focus = () => { // bentoInputField.value?.focusInput(); bentoInputField.value.focusInput(); }; // Expose method so that it can be used to focus on the input from outside the component defineExpose({ /** * Focus on the input field when called. */ focus, }); </script> <script lang="ts"> /** * Search functionality to help users find the desired data quicker. * When a user starts typing, the data is dynamically filtered to * only show the relevant results. * * Clearing the search field displays the entire list again. * * @example * import { * BentoSearchBar, * BentoSearchBarData, * useSearchBarFilter * } from '@adyen/bento-vue2'; * * export default { * components: { BentoSearchBar }, * template: ` * <bento-search-bar * input-field-aria-label="Search bar" * v-model="searchTerm" * @input="onInput" * @clear="onClearSearch" * /> * // Render the filtered data * {{ filteredData }} * `, * setup() { * const searchTerm = ref(''); * const data = ref<BentoSearchBarData>([]); * const filteredData = useSearchBarFilter(searchTerm, data); * * consdt onInput = () => {} * consdt onClearSearch = () => {} * * return { * searchTerm, * filteredData, * onInput, * onClearSearch, * }; * } * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./search-bar.scss" /> 

package/dist/assets/components/secondary-nav/components/secondary-nav-category/secondary-nav-category.vue

@@ -0,0 +1 @@
+<template> <section class="b-secondary-nav-category" :aria-label="label"> <bento-typography el="h1" class="b-secondary-nav-category__label" variant="caption" stronger>{{ label }}</bento-typography> <ul class="b-secondary-nav__list"> <li v-for="item in items" :key="item.value"> <secondary-nav-item :label="item.label" :value="item.value" /> </li> </ul> </section> </template> <script lang="ts" setup> import { BentoTypography } from '@/components/typography'; import { SecondaryNavItem } from '../secondary-nav-item'; import { type BentoSecondaryNavItemsItem } from '../../secondary-nav.types'; defineProps<{ /** * The display name of the category */ label: string; /** * A list of {@see BentoSecondaryNavItemsItem} that belongs to this category */ items: Array<BentoSecondaryNavItemsItem>; }>(); </script> <script lang="ts"> /** * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav} */ export default {}; </script> <style lang="scss" scoped src="./secondary-nav-category.scss" /> 

package/dist/assets/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue

@@ -0,0 +1 @@
+<template> <button class="b-secondary-nav-item" :class="conditionalClasses" :aria-selected="isItemSelected" @click="onClick"> <bento-typography class="b-secondary-nav-item__title" variant="body" stronger> {{ label }} </bento-typography> </button> </template> <script lang="ts" setup> import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys'; import { BentoTypography } from '@/components/typography'; import { computed, inject } from 'vue'; const { activeItemValue, updateActiveItemValue } = inject(SECONDARY_NAV_STATE); const props = defineProps<{ /** * The display name of the navigation item */ label: string; /** * The value of this item. */ value: string; }>(); const isItemSelected = computed(() => activeItemValue.value === props.value); const conditionalClasses = computed(() => ({ 'b-secondary-nav-item--active': isItemSelected.value, })); const emit = defineEmits<{ /** * Event emitted when this element is clicked */ (e: 'click', clickEvent: MouseEvent): void; }>(); const onClick = (e: MouseEvent) => { emit('click', e); updateActiveItemValue(props.value); }; </script> <script lang="ts"> /** * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav} */ export default {}; </script> <style lang="scss" scoped src="./secondary-nav-item.scss" /> 

package/dist/assets/components/secondary-nav/secondary-nav.docs.mdx

@@ -0,0 +1,40 @@
+import { Canvas, Meta, Story } from '@storybook/blocks';
+import * as SecondaryNavStories from './secondary-nav.stories';
+
+<Meta of={SecondaryNavStories} />
+
+# SecondaryNav
+
+Secondary Nav offers users a structured way to access information. It also provides a clear hierarchy for users to
+understand and navigate through various information.
+
+<Canvas of={SecondaryNavStories.Default} />
+
+## Use Cases
+
+Use a SecondaryNav if:
+
+-   You need to organize information in a way that offers users structural guidance for complex pages like settings.
+
+## Variations
+
+### With categories
+
+<Canvas of={SecondaryNavStories.WithCategories} />
+
+## Accessibility
+
+### Keyboard interaction
+
+Being an interactive element, the button is reachable through keyboard navigation in the logical navigation flow of the
+page. The following keys trigger the following actions:
+
+| Keyboard interaction | Action                                                                           |
+| -------------------- | -------------------------------------------------------------------------------- |
+| `Tab`                | Moves focus to the one of the first item on the nav or the next one if available |
+| `Space`              | Activates the focused item, triggering the change event.                         |
+| `Enter`              | Activates the focused item, triggering the change event.                         |
+
+## Resources
+
+-   [Figma link](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=25227-18624&t=2F6m9PIJUQlVcUJj-0)

package/dist/assets/components/secondary-nav/secondary-nav.stories.ts

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoSecondaryNav from './secondary-nav.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import { type BentoSecondaryNavItems } from '@/components/secondary-nav/secondary-nav.types'; const meta: Meta = { title: 'Secondary Nav', component: BentoSecondaryNav, }; export default meta; type Story = StoryObj<typeof BentoSecondaryNav>; const DEFAULT_ITEMS: BentoSecondaryNavItems = [ { label: 'Option 1', value: 'option_1', }, { label: 'Option 2', value: 'option_2', }, { label: 'Option 3', value: 'option_3', }, ]; const ITEMS_WITH_CATEGORIES: BentoSecondaryNavItems = [ { label: 'Category 1', items: [ { label: 'Option 1', value: 'option_1', }, { label: 'Option 2', value: 'option_2', }, ], }, { label: 'Category 2', items: [ { label: 'Option 3', value: 'option_3', }, { label: 'Option 4', value: 'option_4', }, { label: 'Option 5', value: 'option_5', }, ], }, ]; const DEFAULT_STORY_CODE_SAMPLE = ` <template> <bento-secondary-nav :items="items" :value="activeItem" @change="onChange" /> <template> <script lang="ts" setup> const items = [ { label: 'Option 1', value: 'option_1', }, { label: 'Option 2', value: 'option_2', }, { label: 'Option 3', value: 'option_3', }, ]; const activeItem = ref(items[0].value); const onChange = (newActiveItem: string) => { activeItem.value = newActiveItem; }; </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoSecondaryNav, }, props: Object.keys(argTypes), template: ` <bento-secondary-nav v-bind="args" @change="clickedAction" /> `, setup(props) { const clickedAction = value => action('change')(value); return { // Values args: isVue2 ? props : _args, // Events clickedAction, }; }, }), args: { items: DEFAULT_ITEMS, value: 'option_1', }, parameters: storybookDocsParameter(DEFAULT_STORY_CODE_SAMPLE), }; const WITH_CATEGORIES_STORY_CODE_SAMPLE = ` <template> <bento-secondary-nav :items="items" :value="activeItem" @change="onChange" /> <template> <script lang="ts" setup> const items = [ { label: 'Category 1', items: [ { label: 'Option 1', value: 'option_1', }, { label: 'Option 2', value: 'option_2', }, ], }, { label: 'Category 2', items: [ { label: 'Option 3', value: 'option_3', }, { label: 'Option 4', value: 'option_4', }, { label: 'Option 5', value: 'option_5', }, ], }, ]; const activeItem = ref(items[0].value); const onChange = (newActiveItem: string) => { activeItem.value = newActiveItem; }; </script> `; export const WithCategories: Story = { render: (_args, { argTypes }) => ({ components: { BentoSecondaryNav, }, props: Object.keys(argTypes), template: ` <bento-secondary-nav v-bind="args" @change="clickedAction" /> `, setup(props) { const clickedAction = value => action('change')(value); return { // Values args: isVue2 ? props : _args, // Events clickedAction, }; }, }), args: { items: ITEMS_WITH_CATEGORIES, }, parameters: storybookDocsParameter(WITH_CATEGORIES_STORY_CODE_SAMPLE), }; 

package/dist/assets/components/secondary-nav/secondary-nav.vue

@@ -0,0 +1 @@
+<template> <nav class="b-secondary-nav"> <bento-dropdown v-if="isMobile" :aria-label="t('mobileDropdownAriaLabel')" :items="dropdownItems" :static-categories="hasCategories" :model-value="activeItemValue" @update:model-value="updateActiveItemValue" /> <ul v-else class="b-secondary-nav__list"> <li v-for="item in items" :key="item.label"> <secondary-nav-category v-if="'items' in item" :label="item.label" :items="item.items" /> <secondary-nav-item v-else :label="item.label" :value="item.value" /> </li> </ul> </nav> </template> <script setup lang="ts"> import { computed, provide, readonly, ref, watch } from 'vue'; import { SecondaryNavItem } from './components/secondary-nav-item'; import { SecondaryNavCategory } from './components/secondary-nav-category'; import { SECONDARY_NAV_STATE } from './secondary-nav.keys'; import { type BentoSecondaryNavItems, type BentoSecondaryNavState } from './secondary-nav.types'; import { BentoDropdown } from '@/components/dropdown'; import { useBreakpoints } from '@vueuse/core'; import { useI18n } from '@/utils/ts/i18n'; import { type BentoListboxOptions } from '@/types/listbox'; import { BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const breakpoints = useBreakpoints({ s: BMediaQuerySMax, }); const isMobile = breakpoints.smallerOrEqual('s'); const props = defineProps<{ /** * An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory }, * which is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them. */ items: BentoSecondaryNavItems; /** * The value of the selected item. * If nothing is passed, it defaults to the first item value in items. */ value?: string; }>(); const emit = defineEmits<{ /** * Emmited when the current selected item changes */ (e: 'change', category: string): void; }>(); const hasCategories = computed(() => props.items.some(item => Object.hasOwn(item, 'items'))); const dropdownItems = computed(() => props.items as BentoListboxOptions); const activeItemValueFallback = computed(() => { const firstDropdownItem = (dropdownItems.value as BentoSecondaryNavItems)[0]; if ('items' in firstDropdownItem) { return firstDropdownItem.items[0].value; } else { return firstDropdownItem.value; } }); const activeItemValue = ref(props.value ?? activeItemValueFallback.value); const updateActiveItemValue = (value: string) => { activeItemValue.value = value; emit('change', value); }; // The component's state is inject on `secondary-nav-item` to determine the // current active item and to change its value const state: BentoSecondaryNavState = { activeItemValue: readonly(activeItemValue), updateActiveItemValue, }; watch( () => props.value, value => { activeItemValue.value = value; } ); provide(SECONDARY_NAV_STATE, state); </script> <script lang="ts"> /** * Secondary Nav offers users a structured way to access information. * It also provides a clear hierarchy for users to understand and navigate through various information. * * @example * import { BentoSecondaryNav } from '@adyen/bento-vue2'; * * export default { * components: { BentoSecondaryNav }, * template: ` * <bento-secondary-nav :value="value" :items="items" /> * `, * setup() { * const value = ref(2) // Active item value * const items: BentoSecondaryNavItemInfo[] = [ * { label: 'Option 1', value: 1 }, * { label: 'Option 2', value: 2 }, * ]; * return { items, value }; * } * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./secondary-nav.scss" /> 

package/dist/assets/components/segmented-control/components/segmented-control-button/segmented-control-button.vue

@@ -0,0 +1 @@
+<template> <div class="b-segmented-control-button" :class="conditionalClasses"> <input :id="segmentedControlButtonId" v-bento-tooltip-directive="tooltipText" :aria-checked="isChecked" :aria-label="label" :checked="isChecked" :disabled="disabled" :value="value" type="radio" class="b-segmented-control-button__input" role="radio" @change="onClick" /> <label v-if="label" :for="segmentedControlButtonId" class="b-segmented-control-button__label-container"> <bento-typography ref="segmentedControlButtonLabel" class="b-segmented-control-button__label" el="span" variant="body" stronger > {{ label }} </bento-typography> </label> </div> </template> <script setup lang="ts"> import { computed, type ComputedRef, ref } from 'vue'; import { BentoTypography } from '@/components/typography'; import { generateUid } from '@/core/utils/ts'; import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives'; const props = withDefaults( defineProps<{ /** * Disable the radio button (optional) */ disabled?: boolean; /** * Renders the button with a 100% width */ fullWidth?: boolean; /** * The string the button will showcase */ label: string; /** * This property should not be used directly. * It will be used by v-model directive on the segmented control component */ modelValue?: string | number; /** * Renders tooltip text if provided */ tooltipText?: string; /** * Renders the button with a truncated text if the space is not enough to render the whole content */ truncate?: boolean; /** * Indicates the value of the input that will be returned when it's selected */ value: string | number; /** * Renders the button with centered text in case the text has to wrap multiple lines */ wrap?: boolean; }>(), { disabled: false, fullWidth: false, modelValue: null, truncate: false, wrap: false, tooltipText: undefined, } ); const emit = defineEmits<{ /** * Emitted every time the segmented control internal value is changed */ (e: 'update:model-value', value: string | number); }>(); const segmentedControlButtonLabel = ref(); const segmentedControlButtonId = generateUid('segmented-control-button'); const isChecked: ComputedRef<boolean> = computed(() => props.value === props.modelValue); const conditionalClasses = computed(() => ({ 'b-segmented-control-button--hug-content': !props.fullWidth, 'b-segmented-control-button--full-width': props.fullWidth, 'b-segmented-control-button--truncate': props.truncate, 'b-segmented-control-button--wrap': props.wrap && !props.truncate, })); const onClick = () => { if (!props.disabled) { emit('update:model-value', props.value); } }; </script> <script lang="ts"> /** * Internal component to be used within the BentoSegmentedControl component only */ export default { name: 'bento-segmented-control-button', }; </script> <style lang="scss" scoped src="./segmented-control-button.scss" /> 

package/dist/assets/components/segmented-control/segmented-control.docs.mdx

@@ -0,0 +1,90 @@
+import { Canvas, Story, Meta } from '@storybook/blocks';
+import * as SegmentedControlStories from './segmented-control.stories';
+
+<Meta title="Segmented Control" of={SegmentedControlStories} />
+
+# Segmented Control
+
+A segmented control affects a specific object or area and helps users quickly sort, switch or reformat content. It
+changes the context or view of the affected element.
+
+<Canvas withSource="closed">
+    <Story of={SegmentedControlStories.Default} />
+</Canvas>
+
+## Use Cases
+
+Use a segmented control to provide related choices that affect an object or view, for example:
+
+-   to change dataset displayed within a data grid or graph (changing view)
+-   to switch between all, read and unread notifications (filtering content)
+-   to change page layout from list to grid (reformatting content)
+
+Keep the segment names as short and clear as possible. Consider translations to other languages, where the words may be
+significantly longer. Do not use acronyms, as although they save space, they may not be understood by the users.
+
+When segmented control stops fitting, it collapses into a dropdown with one option always selected.
+
+By default, the first segment is always active. Selecting another segment activates it and changes the view. There can
+be only one active segment at a time.
+
+### Segmented controls or tabs?
+
+Use segmented control to change a view or to filter content within a component/section e.g. change subset of data
+displayed in a graph. Use tabs to slice a page into distinct sub-pages, with different types of content or sets of
+components e.g. show different content in each tab.
+
+### Segmented controls or toggle, radio button and checkbox?
+
+Although segmented control component can be used for binary views, like switching between a grid and list view, it
+shouldn't be used as a binary input control.
+
+For binary actions or choices with immediate effect, such as yes/no or on/off use a toggle instead. If they require user
+confirmation or additional steps, use a radio button or checkbox.
+
+### Do not use
+
+Do not use more than 5 segments at a time. If you need to provide more options, use a dropdown component.
+
+## Variations
+
+Segmented control comes in two variants:
+
+### Hug (default)
+
+The component is as wide as the content inside of it. Each segment is also as wide as the content inside of it, which
+means they can be uneven. This keeps the overall component smaller.
+
+### Full width
+
+The component takes width of the parent container (shape it sits in). This is useful in small spaces where other content
+is also aligned edge to edge. In this variant all segments have equal width. To enable this variant, set the
+`full-width` prop to `true`.
+
+## Modifiers
+
+The segmented control component has no modifiers.
+
+## Accessibility
+
+Since the `bento-segmented-control` 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
+
+| Keyboard interaction        | Output                                                                           |
+| --------------------------- | -------------------------------------------------------------------------------- |
+| `Tab`                       | Moves focus to the segmented control or away from it.                            |
+| `Left arrow`, `right arrow` | When focus is on the segmented control, moves between segments and selects them. |
+
+### Roles, states and properties
+
+| ARIA attribute | is automatic?                                                                                                                                                       | fallback used | manual override                                   |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------------- |
+| `role`         | Yes. In the group, through the semantic `fieldset` element, which groups all its child elements. In the buttons, through the `input` tag with `[role="radio"]` set. | -             | -                                                 |
+| `label`        | Yes. In the group it's set via an internal `aria-label`, whereas in the buttons it's set via the button's content.                                                  | -             | Yes, the consumer is required to set both values. |
+
+## Resources
+
+-   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=6533%3A68008&mode=dev)

package/dist/assets/components/segmented-control/segmented-control.stories.ts

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/vue'; import { ref } from 'vue'; import { isVue2 } from 'vue-demi'; import { BentoSegmentedControlEvent } from './segmented-control.types'; import BentoSegmentedControl from './segmented-control.vue'; import { storybookDocsParameter } from '@/core/utils/ts/storybook'; const ITEMS = [ { label: 'Segment 1', value: 1 }, { label: 'Segment 2', value: 2 }, { label: 'Segment 3', value: 3, disabled: true }, ]; const meta: Meta = { title: 'Segmented Control', component: BentoSegmentedControl, argTypes: { items: { control: { disable: true }, }, modelValue: { control: { disable: true }, }, // Events 'update:model-value': { table: { type: { summary: '(modelValue: string | number) => void' } }, control: { disable: true }, }, input: { table: { type: { summary: '(modelValue: string | number) => void' } }, control: { disable: true }, }, }, }; export default meta; type Story = StoryObj<typeof BentoSegmentedControl>; const defaultCode = ` <template> <bento-segmented-control v-model="selectedValue" :items="${JSON.stringify(ITEMS)}" aria-label="Segmented control example" full-width wrap @update:model-value="updateaction" @input="inputAction" /> </template> <script setup lang="ts"> import { BentoSegmentedControl, BentoSegmentedControlValue } from '@adyen/bento-vue2' import { ref } from 'vue' const selectedValue = ref<BentoSegmentedControlValue>() // Events const updateaction = () => { // Manually control the "@update:model-value" event in Vue3 } const inputAction = () => { // Manually control the "input" event in Vue2 } </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoSegmentedControl }, props: Object.keys(argTypes), template: ` <bento-segmented-control v-bind="args" v-model="selectedValue" :items="items" aria-label="Segmented control example" @update:model-value="updateAction" @input="inputAction" /> `, setup(props) { const selectedValue = ref(ITEMS[0].value); const items = ITEMS; const updateAction = value => { action(BentoSegmentedControlEvent.UPDATE)(value); }; const inputAction = value => { action('input')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, items, // Events updateAction, inputAction, }; }, }), args: {}, parameters: storybookDocsParameter(defaultCode), }; 

package/dist/assets/components/segmented-control/segmented-control.vue

@@ -0,0 +1 @@
+<template> <div ref="segmentedControlRef" role="group" class="b-segmented-control" :class="conditionalClasses"> <segmented-control-button v-for="(item, index) in computedItems" ref="segmentedControlButtonRef" :key="`segmented-control-item-${index}-${item.label}`" class="b-segmented-control__item" :label="item.label" :value="item.value" :disabled="item.disabled" :truncate="truncate" :wrap="wrap" :full-width="fullWidth" :model-value="inputValue" :tooltip-text="item.tooltipText" @update:model-value="onInput" /> </div> </template> <script setup lang="ts"> import { computed, onMounted, ref, toRef, watch } from 'vue'; import SegmentedControlButton from './components/segmented-control-button/segmented-control-button.vue'; import { type BentoSegmentedControlProps, type BentoSegmentedControlValue } from './segmented-control.types'; import { observeSizeOfElement } from '@/utils/ts/resize'; import { printDevelopmentWarning } from '@/utils/ts/print-development-warning'; const emit = defineEmits<{ /** * Emitted every time the segmented control internal value is changed for Vue3 */ (e: 'update:model-value', value: any); /** * Emitted every time the segmented control internal value is changed for Vue2 * */ (e: 'input', value: BentoSegmentedControlValue): void; }>(); const props = withDefaults(defineProps<BentoSegmentedControlProps>(), { ariaLabel: null, fullWidth: false, wrap: false, modelValue: null, }); const inputValue = toRef(props, 'modelValue'); const segmentedControlRef = ref(); const segmentedControlButtonRef = ref(); const hasEllipsis = ref(); const truncate = computed(() => !props.wrap); watch( () => props.items, () => { if (props.items.length > 5) { printDevelopmentWarning( 'Do not use when you need to provide more than 5 segments at a time. If you need to provide more options, use a dropdown component.' ); } }, { immediate: true } ); onMounted(() => { observeSizeOfElement(segmentedControlRef.value, () => { if (segmentedControlRef.value) { hasEllipsis.value = segmentedControlButtonRef?.value?.map( el => el.$refs.segmentedControlButtonLabel.$el.offsetWidth < el.$refs.segmentedControlButtonLabel.$el.scrollWidth ); } }); }); const computedItems = computed(() => props.items.map((el, index) => ({ ...el, tooltipText: truncate.value && hasEllipsis?.value?.[index] ? el.label : undefined, })) ); const onInput = value => { emit('update:model-value', value); emit('input', value); }; const conditionalClasses = computed(() => ({ 'b-segmented-control--hug': !props.fullWidth, 'b-segmented-control--full-width': props.fullWidth, 'b-segmented-control--truncate': truncate.value, 'b-segmented-control--wrap': props.wrap, })); </script> <script lang="ts"> /** * @example * import { BentoSegmentedControl } from '@adyen/bento-vue2'; * * export default { * components: { BentoSegmentedControl }, * template: ` * <bento-segmented-control * :items="[{ label: 'Segment 1', value: 1 }, { label: 'Segment 2', value: 2 }, { label: 'Segment 3', value: 3, disabled: true }]" * :model-value="1" * @update:model-value="yourUpdateHandler" * /> * ` * } */ export default { name: 'bento-segmented-control', model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./segmented-control.scss" /> 

package/dist/assets/components/selection-card/components/selection-card-group/selection-card-group.docs.mdx

@@ -0,0 +1,119 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as SelectionCardGroupStories from './selection-card-group.stories';
+
+<Meta of={SelectionCardGroupStories} />
+
+# Selection Card Group
+
+Selection cards that are related to each other form a group using the `bento-selection-card-group` component, which also
+handles the group's label and error handling logic.
+
+<Canvas of={SelectionCardGroupStories.EverythingBagel} />
+
+## Use Cases
+
+Use a `bento-selection-card-group` if:
+
+-   You need to render related `bento-selection-card`
+-   You need to render `bento-selection-card` with a `radio` input
+
+### Do not use
+
+Use a `bento-selection-card-group` if you only need to render one `bento-selection-card` in its default variant (i.e.
+with a `checkbox` input and without an associated label). In this case, use the `bento-selection-card` component itself.
+
+## Variations
+
+### Variant
+
+Determines what kind of input element and selection logic is applied to the `bento-selection-card`s. The possible
+`variants` supported are:
+
+-   `checkbox`: Renders a group of `bento-selection-card` with checkbox inputs. Multiple values can be selected at the
+    same time. The `modelValue` prop should be an array of values (or an empty array if no card is selected).
+
+    <Canvas of={SelectionCardGroupStories.Default} />
+
+-   `radio`: Renders a group of `bento-selection-card` with radio inputs. Only one value can be selected at a time. The
+    `modelValue` prop should correspond to the `value` of the selected card (or `undefined` if no card has been
+    selected).
+
+    <Canvas of={SelectionCardGroupStories.Radio} />
+
+## Modifiers
+
+### Layout
+
+Items in a `bento-selection-card-group` can be stacked vertically or horizontally by passing the correct value to the
+`layout` prop. In particular:
+
+-   `horizontal`: will render the cards in the group next to each other.
+-   `vertical`: will stack the cards in the group vertically.
+
+### Items per row
+
+Passing the property `itemsPerRow` to a `bento-selection-card-group` enables you to control the number of cards
+displayed per row when the layout is set to `horizontal`.
+
+<Canvas of={SelectionCardGroupStories.ItemsPerRow} />
+
+The `itemsPerRow` props is an object of type `BentoSelectionCardGroupItemsPerRow` and is of the format:
+
+```javascript
+{
+    small: Number,
+    medium: Number,
+    large: Number
+}
+```
+
+Where the values for each key represent the number of cards displayed per row on the specific container size. Note that
+you can pass a maximum of 6 items per row.
+
+### Optional label
+
+Shows the `optional` label next to the main group label when the `optional` prop is set to `true`.
+
+### Required label
+
+Shows the `required` label next to the main group label when the `required` prop is set to `true`.
+
+### Icon slot
+
+Each card in the group can be rendered with an icon rendering on its left. To achieve this, pass the icon slot as
+follows in the code example below.
+
+<Canvas of={SelectionCardGroupStories.WithSlots} />
+
+### Content slot
+
+Each card in the group can be rendered with a content slot rendering when the card is selected. To achieve this, pass
+the icon slot as follows in the code example below.
+
+<Canvas of={SelectionCardGroupStories.WithSlots} />
+
+## Accessibility
+
+### Keyboard interaction
+
+The `bento-selection-card-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/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=25526-44502&node-type=frame&t=vr0mgcsqz2FWuNua-0)
+-   [WAI-ARIA guidelines for grouping controls](https://www.w3.org/WAI/tutorials/forms/grouping/)

package/dist/assets/components/selection-card/components/selection-card-group/selection-card-group.stories.ts

@@ -0,0 +1 @@
+import { ref } from 'vue'; import { isVue2 } from 'vue-demi'; import { action } from '@storybook/addon-actions'; import RetailIcon from '@adyen/ui-assets-icons-16/vue/retail'; import LeafIcon from '@adyen/ui-assets-icons-16/vue/leaf'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoSelectionCardGroup from './selection-card-group.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import SelectCardGroupEverythingBagelExample from './__tests__/selection-card-group-everything-bagel-example.vue?raw'; import SelectCardGroupWithSlotsExample from './__tests__/selection-card-group-with-slots-example.vue?raw'; const meta: Meta = { title: 'Selection Card/Selection Card Group', component: BentoSelectionCardGroup, argTypes: { layout: { control: { type: 'radio' }, }, input: { description: 'Deprecated since version 2.0. Use `v-model` or `update:model-value` instead', table: { category: 'Deprecated', }, control: { disable: true }, }, }, }; export default meta; type Story = StoryObj<typeof BentoSelectionCardGroup>; const ITEMS = [ { title: 'Card 1', value: 'card-1', }, { title: 'Card 2', value: 'card-2', }, { title: 'Card 3', value: 'card-3', }, { title: 'Card 4', value: 'card-4', }, ]; const ITEMS_WITH_CONTENT = [ { title: 'Card 1', value: 'card-1', content: 'Slot content 1', icon: RetailIcon, fullyClickable: true, }, { title: 'Card 2', value: 'card-2', content: 'Slot content 2', icon: LeafIcon, fullyClickable: true, }, ]; const ITEMS_EVERYTHING_BAGEL = [ { title: 'Card 1', value: 'card-1', description: 'Description card 1', subtitle: 'Subtitle card 1', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et tellus at sem finibus posuere. Quisque nec velit sapien. Proin ultrices enim at placerat rhoncus. Ut volutpat nisl non hendrerit laoreet. ', dynamicContent: 'Dynamic content 1', icon: RetailIcon, fullyClickable: true, }, { title: 'Card 2', value: 'card-2', description: 'Description card 2', subtitle: 'Subtitle card 2', content: 'Content slot 2', icon: LeafIcon, fullyClickable: true, }, ]; const defaultCode = ` <template> <bento-selection-card-group label="Your group label" :items="items" v-model="selectedValue" /> </template> <script setup lang="ts"> import { BentoSelectionCardGroup } from '@adyen/bento-vue2'; const items = ref(${JSON.stringify(ITEMS)}); const selectedValue = ref([]); </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCardGroup }, props: Object.keys(argTypes), template: ` <bento-selection-card-group v-bind="args" :model-value="selectedValue" @update:model-value="updateAction" /> `, setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const updateAction = value => { selectedValue.value = value; action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, updateAction, }; }, }), args: { label: 'Label', items: ITEMS, itemsPerRow: {}, modelValue: [], }, parameters: storybookDocsParameter(defaultCode), }; const radioCode = ` <template> <bento-selection-card-group label="Your group label" variant="radio" :items="items" v-model="selectedValue" /> </template> <script setup lang="ts"> import { BentoSelectionCardGroup } from '@adyen/bento-vue2'; const items = ref(${JSON.stringify(ITEMS)}); const selectedValue = ref(undefined); </script> `; export const Radio: Story = { ...Default, args: { label: 'Label', variant: 'radio', items: ITEMS, itemsPerRow: {}, modelValue: undefined, }, parameters: storybookDocsParameter(radioCode), }; export const WithSlots: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCardGroup, LeafIcon, RetailIcon }, props: Object.keys(argTypes), template: ` <bento-selection-card-group v-bind="args" :model-value="selectedValue" @update:model-value="updateAction" > <template #icon="{ icon }"> <component :is="icon"/> </template> <template #content="{ content }"> <div>{{ content }}</div> </template> <template #dynamicContent="{ dynamicContent }"> <div>{{ dynamicContent }}</div> </template> </bento-selection-card-group> `, setup(props) { const selectedValue = ref([]); const updateAction = value => { selectedValue.value = value; action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, updateAction, }; }, }), args: { label: 'Label', items: ITEMS_WITH_CONTENT, }, parameters: storybookDocsParameter(SelectCardGroupWithSlotsExample), }; const itemsPerRowCode = ` <template> <bento-selection-card-group label="Your group label" :items="items" :items-per-row="{ small: 2, medium: 3, large: 4 }" v-model="selectedValue" /> </template> <script setup lang="ts"> import { BentoSelectionCardGroup } from '@adyen/bento-vue2'; const items = ref(${JSON.stringify(ITEMS)}); const selectedValue = ref([]); </script> `; export const ItemsPerRow: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCardGroup }, props: Object.keys(argTypes), template: ` <bento-selection-card-group v-bind="args" :model-value="selectedValue" @update:model-value="updateAction" /> `, setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const updateAction = value => { selectedValue.value = value; action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, updateAction, }; }, }), args: { label: 'With responsive items per row', items: ITEMS, layout: 'horizontal', itemsPerRow: { small: 2, medium: 3, large: 4 }, modelValue: [], }, parameters: storybookDocsParameter(itemsPerRowCode), }; export const EverythingBagel: Story = { ...WithSlots, args: { label: 'Label', items: ITEMS_EVERYTHING_BAGEL, required: true, hideLabel: false, description: 'Supporting text', tooltipText: 'Tooltip text', }, parameters: storybookDocsParameter(SelectCardGroupEverythingBagelExample), }; 

package/dist/assets/components/selection-card/components/selection-card-group/selection-card-group.vue

@@ -0,0 +1 @@
+<template> <controls-group ref="containerRef" :aria-describedby="shouldShowGroupError ? errorMessageId : null" :label="label" :hide-label="hideLabel" :description="description" :disabled="disabled" :tooltip-text="tooltipText" :readonly="readonly" :required="required" :optional="optional" class="b-selection-card-group" component-name="selection-card-group" > <div v-if="!itemsPerRow || layout === 'vertical'" class="b-selection-card-group__items" :class="conditionalItemsClasses" > <bento-selection-card v-for="item in items" :key="`selection-card-${item.value}`" class="b-selection-card-group__item" v-bind="item" :model-value="inputValue" :readonly="readonly || item.readonly" :has-error="shouldShowGroupError" :disabled="disabled || item.disabled" @update:model-value="onInput" > <template v-if="hasSlot('icon') && item.icon" #icon> <slot name="icon" v-bind="item"></slot> </template> <template v-if="hasSlot('content') && item.content" #content> <slot name="content" v-bind="item"></slot> </template> <template v-if="hasSlot('dynamicContent') && item.dynamicContent" #dynamicContent> <slot name="dynamicContent" v-bind="item"></slot> </template> </bento-selection-card> </div> <template v-else> <div :key="`selection-card-group-layout-breakpoint-${currentBreakpoint}`"> <grid-layout v-for="(row, rowIndex) in computedRows" :key="`selection-card-group-row-${rowIndex}-cols-${computedItemsPerRow}`" class="b-selection-card-group__items--wrap" :column-width="computedColumnWidth" > <template v-for="(item, columnIndex) in row" #[`col-${columnIndex+1}`]> <bento-selection-card :key="`selection-card-${item.value}`" class="b-selection-card-group__item b-selection-card-group__item--full-height" v-bind="item" :model-value="inputValue" :readonly="readonly || item.readonly" :has-error="shouldShowGroupError" :disabled="disabled || item.disabled" @update:model-value="onInput" > <template v-if="hasSlot('icon') && item.icon" #icon> <slot name="icon" v-bind="item"></slot> </template> <template v-if="hasSlot('content') && item.content" #content> <slot name="content" v-bind="item"></slot> </template> <template v-if="hasSlot('dynamicContent') && item.dynamicContent" #dynamicContent> <slot name="dynamicContent" v-bind="item"></slot> </template> </bento-selection-card> </template> </grid-layout> </div> </template> <error-message v-if="shouldShowGroupError" :id="errorMessageId" :error-message="errorMessage" class="b-selection-card-group__error-message" /> </controls-group> </template> <script setup lang="ts"> import { computed, onMounted, provide, ref, useSlots, watch } from 'vue'; import { useElementSize } from '@vueuse/core'; import { BMediaQueryMMax, BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6'; import { type BentoSelectionCardGroupEmits, type BentoSelectionCardGroupProps } from './selection-card-group.types'; import BentoSelectionCard from '../../selection-card.vue'; import { ControlsGroup, ErrorMessage, GridLayout } from '../../../internal'; import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from '../../selection-card.keys'; import { generateUid } from '@/core/utils/ts'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; const props = withDefaults(defineProps<BentoSelectionCardGroupProps>(), { description: null, disabled: false, errorMessage: null, formId: null, hideLabel: null, label: null, layout: 'vertical', itemsPerRow: undefined, modelValue: null, optional: false, required: false, tooltipText: null, readonly: false, variant: 'checkbox', }); const emit = defineEmits<BentoSelectionCardGroupEmits>(); const { emitValue } = useFormFieldEmits(emit); const slots = useSlots(); // Slots logic // Temporary, use-has-slots composable doesn't currently work for vue3 named scoped slots // We do the same in bento-checkbox-group const hasSlot = name => !!slots[name]; const conditionalItemsClasses = computed(() => ({ 'b-selection-card-group__items--horizontal': props.layout === 'horizontal', })); const inputValue = ref(props.modelValue); watch( () => props.modelValue, () => { inputValue.value = props.modelValue; } ); // Error message logic const errorMessageId = generateUid('error'); const shouldShowGroupError = computed(() => !props.disabled && !props.readonly && !!props.errorMessage); // itemsPerRow logic const containerRef = ref<HTMLElement | null>(null); const { width } = useElementSize(containerRef); const smallBreakpoint = computed(() => BMediaQuerySMax.split('px')[0]); const mediumBreakpoint = computed(() => BMediaQueryMMax.split('px')[0]); const currentBreakpoint = computed(() => { if (width.value < smallBreakpoint.value) { return 'small'; } if (width.value >= smallBreakpoint.value && width.value < mediumBreakpoint.value) { return 'medium'; } return 'large'; }); const computedItemsPerRow = computed(() => { return (props.itemsPerRow?.[currentBreakpoint?.value] as number) || props.items.length; }); const computedRows = computed(() => { if (!props.itemsPerRow) { return []; } const rows = []; for (let i = 0; i < props.items.length; i += computedItemsPerRow?.value) { rows.push(props.items.slice(i, i + computedItemsPerRow?.value)); } return rows; }); // We need to compute the column width on 12 because we're using a 12-column system for out grid-layout logic const itemColumnWidth = computed(() => 12 / computedItemsPerRow?.value); /** * Filling the columnWidth array with the same parameters per item to pass * to the `grid-layout` layout so the each card can have * the same width according to the screen size. */ const computedColumnWidth = computed(() => { return computedItemsPerRow?.value ? new Array(computedItemsPerRow?.value).fill({ // Instead of passing the actual screen sizes values, passing the same values per each screen size and recomputing it makes sure visually the change is smoother and not laggy small: itemColumnWidth.value, medium: itemColumnWidth.value, large: itemColumnWidth.value, }) : []; }); const onInput = value => { inputValue.value = value; emitValue(value); }; const isRadioVariant = computed(() => props.variant === 'radio'); provide(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, isRadioVariant); onMounted(() => { if (props.itemsPerRow) { Object.values(props.itemsPerRow).forEach(el => { if (el && (el < 2 || el > 6)) { throw new Error( 'itemsPerRow values must have a value between 2 and 6 items per row. Read the documentation for more information.' ); } }); } }); </script> <script lang="ts"> /** * Group of bento-selection-cards. * * @example * import { BentoSelectionCardGroup } from '@adyen/bento-vue2'; * * export default { * components: { BentoSelectionCardGroup }, * template: ` * <bento-selection-card-group * :items="[ * { * title: 'Card 1', * value: 'card-1', * content: 'Slot content 1', * icon: RetailIcon, * }, * { * title: 'Card 2', * value: 'card-2', * content: 'Slot content 2', * icon: LeafIcon, * }, * ]" * > * <template #icon="{ icon }"> * <component :is="icon"/> * </template> * <template #content="{ content }"> * <div>{{ content }}</div> * </template> * </bento-selection-card-group> * `, * } */ export default { model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./selection-card-group.scss" /> 

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

@@ -0,0 +1,108 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as SelectionCardStories from './selection-card.stories';
+
+<Meta of={SelectionCardStories} />
+
+# Selection Card
+
+The `bento-selection-card` component is the equivalent of a checkbox or radio button, used when a more prominent UI is
+needed for those. It can also hold additional content that can be static or revealed upon selection.
+
+<Canvas of={SelectionCardStories.EverythingBagel} />
+
+## Use Cases
+
+Use a `bento-selection-card` when you need a more prominent UI for checkbox or radio button.
+
+### Do not use
+
+Do not use a `bento-selection-card`:
+
+-   In small spaces or cramped layouts;
+-   When the user has to turn an option on or off with immediate effect. In this case, use a toggle instead.
+
+## Variations
+
+### Default
+
+The `bento-selection-card` comes in a default variant which accepts a title and an optional subtite and description.
+
+<Canvas of={SelectionCardStories.Default} />
+
+### With icon
+
+It is possible to render the `bento-selection-card` with an icon by passing the `icon` slot.
+
+<Canvas of={SelectionCardStories.WithIcon} />
+
+### With content slot
+
+It is possible to render the `bento-selection-card` with a custom content slot rendered below the description by passing
+the `content` slot.
+
+<Canvas of={SelectionCardStories.WithContentSlot} />
+
+### With dynamic content slot
+
+It is possible to render the `bento-selection-card` with a custom content slot rendered when the card is in a checked
+state by passing the `dynamicContent` slot.
+
+<Canvas of={SelectionCardStories.WithDynamicContentSlot} />
+
+## Modifiers
+
+### Disabled
+
+Renders the `bento-selection-card` 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 selection card is usable.
+
+### Readonly
+
+Renders the `bento-selection-card` 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
+
+Renders the `bento-selection-card` component in an error state. To enable this, set the `has-error` prop to `true`.
+
+## Accessibility
+
+The `bento-selection-card` follows the same WCAG guidelines for developing accessible checkboxes and radio buttons. Like
+checkboxes and radio buttons, the whole card area is clickable except for the content slot, since this one might be
+interactive.
+
+## Fully clickable
+
+The `bento-selection-card` by default _does not_ select the card when clicking over the content inside the `content` or
+`dynamicContent` slots, this is so that interactive elements (such as `bento-dropdown`, etc) can be added and interacted
+with. The `bento-selection-card` with `fullyClickable` enabled (`true`) can be selected when clicking over the `content`
+and `dynamicContent` slots, for cases when no interactive elements are needed inside these slots.
+
+> Do not place interactive elements inside `content` or `dynamicContent` slots if `fullyClickable` is set to `true`.
+
+### Keyboard interaction
+
+The `bento-selection-card` 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 selection card or away from it.      |
+| `Space`              | When focus is on the selection card, selects the value. |
+
+### Roles, states and properties
+
+| ARIA attribute | is automatic?                                                                            | fallback used | manual override |
+| -------------- | ---------------------------------------------------------------------------------------- | ------------- | --------------- |
+| `aria-label`   | Yes, corresponds to the `title` text.                                                    | -             |
+| `role`         | Yes, through the semantic `input` element with `role="checkbox"` or `role="radio"` set.  | -             | -               |
+| `aria-checked` | Yes, set when the selection card gets selected through the `input`'s `checked` property. | -             | -               |
+
+## Resources
+
+-   [Figma link](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=25526-44502&node-type=frame&t=PhbWh8b862cBYSzF-0)
+-   [WAI-ARIA checkbox guidelines](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/examples/checkbox/)
+-   [WAI-ARIA radio guidelines](https://www.w3.org/WAI/ARIA/apg/patterns/radio/)

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

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import { isVue2 } from 'vue-demi'; import { ref } from 'vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoSelectionCard from './selection-card.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy'; const meta: Meta = { title: 'Selection Card', component: BentoSelectionCard, }; export default meta; type Story = StoryObj<typeof BentoSelectionCard>; const defaultCode = ` <bento-selection-card title="Card title" value="card-value" :model-value.sync="yourModelValueVariable" /> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCard }, props: Object.keys(argTypes), template: ` <bento-selection-card v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction" /> `, setup(props) { const selectedValue = ref(undefined); const clickedAction = value => { selectedValue.value = value; action('input')(value); action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, // Events clickedAction, }; }, }), args: { title: 'Card title', value: 'value', }, parameters: storybookDocsParameter(defaultCode), }; const withIconCode = ` <template> <bento-selection-card title="Card title" value="card-value" :model-value.sync="yourModelValueVariable" > <template #icon> <emoticon-happy-icon /> </template> </bento-selection-card> </template> <script setup lang="ts"> import { BentoSelectionCard } from '@adyen/bento-vue2'; import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy'; </script> `; export const WithIcon: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCard, EmoticonHappyIcon }, props: Object.keys(argTypes), template: ` <bento-selection-card v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction" > <template #icon> <emoticon-happy-icon /> </template> </bento-selection-card> `, setup(props) { const selectedValue = ref(undefined); const clickedAction = value => { selectedValue.value = value; action('input')(value); action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, // Events clickedAction, }; }, }), args: { title: 'Card title', value: 'value', }, parameters: storybookDocsParameter(withIconCode), }; const withContentSlotCode = ` <template> <bento-selection-card title="Card title" value="card-value" :model-value.sync="yourModelValueVariable" > <template #content> I'm a content slot that can be replaced with any content! </template> </bento-selection-card> </template> `; export const WithContentSlot: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCard }, props: Object.keys(argTypes), template: ` <bento-selection-card v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction" > <template #content> I'm a content slot that can be replaced with any content! </template> </bento-selection-card> `, setup(props) { const selectedValue = ref(undefined); const clickedAction = value => { selectedValue.value = value; action('input')(value); action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, // Events clickedAction, }; }, }), args: { title: 'Card title', value: 'value', }, parameters: storybookDocsParameter(withContentSlotCode), }; const withDynamicContentSlotCode = ` <template> <bento-selection-card title="Card title" value="card-value" :model-value.sync="yourModelValueVariable" > <template #dynamicContent> I'm a content slot that will only show when the card is selected! </template> </bento-selection-card> </template> `; export const WithDynamicContentSlot: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCard }, props: Object.keys(argTypes), template: ` <bento-selection-card v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction" > <template #dynamicContent> I'm a content slot that will only show when the card is selected! </template> </bento-selection-card> `, setup(props) { const selectedValue = ref(undefined); const clickedAction = value => { selectedValue.value = value; action('input')(value); action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, // Events clickedAction, }; }, }), args: { title: 'Card title', value: 'value', }, parameters: storybookDocsParameter(withDynamicContentSlotCode), }; const everythingBagelCode = ` <template> <bento-selection-card title="Card title" subtitle="Subtitle" description="Description" value="card-value" :model-value.sync="yourModelValueVariable" > <template #icon> <emoticon-happy-icon /> </template> <template #content> I'm a content slot that can be replaced with any content! </template> <template #dynamicContent> I'm a content slot that will only show when the card is selected! </template> </bento-selection-card> </template> <script setup lang="ts"> import { BentoSelectionCard } from '@adyen/bento-vue2'; import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy'; </script> `; export const EverythingBagel: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCard, EmoticonHappyIcon }, props: Object.keys(argTypes), template: ` <bento-selection-card v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction" > <template #icon> <emoticon-happy-icon /> </template> <template #content> I'm a content slot that can be replaced with any content! </template> <template #dynamicContent> I'm a content slot that will only show when the card is selected! </template> </bento-selection-card> `, setup(props) { const selectedValue = ref(undefined); const clickedAction = value => { selectedValue.value = value; action('input')(value); action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, // Events clickedAction, }; }, }), args: { title: 'Card title', description: 'Description', subtitle: 'Subtitle', value: 'value', }, parameters: storybookDocsParameter(everythingBagelCode), };