@adyen/bento-mcp 0.0.0 → 0.1.1

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

@@ -0,0 +1 @@
+<template> <div class="b-selection-card" :class="conditionalClasses" @click="handleCardClick"> <div class="b-selection-card__container" :class="containerConditionalClasses"> <div class="b-selection-card__checkbox-container" :class="checkboxContainerConditionalClasses"> <div class="b-selection-card__checkbox-container-text" :class="checkboxContainerTextConditionalClasses"> <div v-if="hasSlot('icon')" class="b-selection-card__icon" role="presentation" aria-hidden="true"> <slot name="icon" /> </div> <label :for="inputId" class="b-selection-card__text" @click.stop.prevent="handleCardClick"> <bento-typography v-if="subtitle" class="b-selection-card__description" el="span" variant="caption" > {{ subtitle }} </bento-typography> <bento-typography el="span" variant="title">{{ title }}</bento-typography> <bento-typography v-if="description" id="descriptionId" class="b-selection-card__description" el="span" variant="body" > {{ description }} </bento-typography> </label> </div> <radio-input v-if="isRadioInput" :id="inputId" ref="inputRef" :aria-label="ariaLabel" :aria-describedby="description ? descriptionId : undefined" :disabled="disabled" :has-error="hasError" :aria-readonly="readonly ?? undefined" :value="value" :readonly="readonly" :model-value="computedRadioInputModelValue" /> <checkbox-input v-else :id="inputId" ref="inputRef" :aria-label="ariaLabel" :aria-describedby="description ? descriptionId : undefined" :disabled="disabled" :has-error="hasError" :aria-readonly="readonly ?? undefined" :value="value" :readonly="readonly" :model-value="computedCheckboxInputModelValue" /> </div> <bento-typography v-if="hasSlot('content')" ref="slotRef" el="div" class="b-selection-card__slot" :class="slotConditionalClasses" > <slot name="content" /> </bento-typography> <bento-typography v-if="hasSlot('dynamicContent') && isChecked" ref="dynamicSlotRef" el="div" class="b-selection-card__slot" :class="slotConditionalClasses" > <slot name="dynamicContent" /> </bento-typography> </div> </div> </template> <script setup lang="ts"> import { BentoTypography } from '@/components/typography'; import { type BentoCheckboxType, type BentoMultiCheckboxType, CheckboxInput } from '../internal/checkbox-input'; import { RadioInput, type RadioInputValue } from '../internal/radio-input'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { generateUid } from '@/core/utils/ts'; import { computed, type ComputedRef, inject, type PropType, type Ref, ref, useSlots } from 'vue'; import { useHasSlot } from '@/composables'; import type { BentoSelectionCardModelValue, BentoSelectionCardValue } from './selection-card.types'; import { BentoSelectionCardState } from './selection-card.types'; import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from './selection-card.keys'; const props = defineProps({ /** * The description of the selection card */ description: { type: String, default: undefined, }, /** * Disables the selection card */ disabled: { type: Boolean, default: false }, /** * Makes the entire selection card clickable. Clicking over interactive elements inside the card with this prop enabled will not be possible. */ fullyClickable: { type: Boolean, default: false }, /** * Shows the selection card in error state */ hasError: { type: Boolean, default: false }, /** * This property should not be used directly. * It will be used by v-model directive on selection card component. * * When handling a single input, use a string or a number. * * When handling multiple inputs, use an array of keys. * These keys exist as a set "value" prop for each input. */ modelValue: { type: [Boolean, String, Array] as PropType<BentoSelectionCardModelValue>, default: null, }, /** * Sets the selection card to readonly */ readonly: { type: Boolean, default: false }, /** * The subtitle of the selection card */ subtitle: { type: String, default: undefined, }, /** * The title of the selection card */ title: { type: String, required: true, }, /** * Indicates the value of the input that will be returned when it's checked. */ value: { type: [String, Number] as PropType<BentoSelectionCardValue>, required: true, }, }); const emit = defineEmits<{ /** * Emitted when the selection card is clicked. Enables Vue2 "v-model" */ (e: 'input', value: BentoSelectionCardValue); /** * Emitted when the selection card is clicked. Enables Vue3 "v-model" */ (e: 'update:model-value', value: BentoSelectionCardValue); }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const inputId = generateUid('selection-card-input-id'); const descriptionId = generateUid('selection-card-description'); const computedRadioInputModelValue: ComputedRef<RadioInputValue> = computed( () => props.modelValue as RadioInputValue ); const computedCheckboxInputModelValue: ComputedRef<BentoCheckboxType> = computed( () => props.modelValue as BentoCheckboxType ); const conditionalClasses = computed(() => ({ 'b-selection-card--checked': isChecked.value, 'b-selection-card--fully-clickable': props.fullyClickable, })); const containerConditionalClasses = computed(() => ({ [`b-selection-card--${BentoSelectionCardState.DISABLED}`]: props.disabled, [`b-selection-card--${BentoSelectionCardState.ERROR}`]: props.hasError, [`b-selection-card--${BentoSelectionCardState.READONLY}`]: props.readonly, 'b-selection-card--center-aligned': isTitleOnly.value, })); const checkboxContainerConditionalClasses = computed(() => ({ 'b-selection-card__checkbox-container--center-aligned': isTitleOnly.value, })); const checkboxContainerTextConditionalClasses = computed(() => ({ 'b-selection-card__checkbox-container-text--center-aligned': isTitleOnly.value, })); const slotConditionalClasses = computed(() => ({ 'b-selection-card__slot--with-icon': hasSlot('icon'), })); const ariaLabel = useAriaLabel({ ariaLabel: props.title, label: props.value as string, }); const isCheckboxGroup = computed(() => Array.isArray(props.modelValue)); const isChecked: ComputedRef<boolean> = computed(() => { if (isRadioInput.value) { return props.value === props.modelValue; } if (!isCheckboxGroup.value) { return props.modelValue as boolean; } return (props.modelValue as BentoMultiCheckboxType).some(item => item === props.value); }); const isRadioInput: Ref<boolean> = inject(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, ref(false)); const isTitleOnly = computed(() => !props.subtitle && !props.description); const inputRef = ref<InstanceType<typeof RadioInput> | InstanceType<typeof CheckboxInput>>(null); const slotRef = ref(null); const dynamicSlotRef = ref(null); // Handle click on the whole card area const handleCardClick = (event: Event) => { if (inputRef.value.$refs.inputRef === event.target) { const newValue = toggleInput(); onChange(newValue); return; } // Do nothing if disabled or readonly if (props.disabled && props.readonly) { return; } // If it's not fully clickable prevent selecting the card if the click // originated in a slot if (!props.fullyClickable) { // Check if the click originated from the slot - in that case, do nothng if (slotRef.value && slotRef.value?.$el?.contains(event.target)) { return; } // Check if the click originated from the dynamic slot - in that case, do nothng if (dynamicSlotRef.value && dynamicSlotRef.value?.$el?.contains(event.target)) { return; } // Check if the click originated from the input - in that case do nothing, as the input will emit the event already if (inputRef.value && inputRef.value?.$el?.contains(event.target as Node)) { return; } } // If the click originated outside of these two areas, emit the change event const newValue = toggleInput(); onChange(newValue); }; const toggleInput = (): BentoSelectionCardModelValue => { const currentValue: boolean = (inputRef.value?.$refs.inputRef as HTMLInputElement).checked; if (isCheckboxGroup.value) { const newCheckedList = [...(props.modelValue as BentoMultiCheckboxType)]; const index = newCheckedList.indexOf(props.value); if (index === -1) { newCheckedList.push(props.value); } else { newCheckedList.splice(index, 1); } return newCheckedList; } if (isRadioInput.value) { return props.value; } return currentValue; }; const onChange = newValue => { if (!props.disabled && !props.readonly) { emit('update:model-value', newValue); emit('input', newValue); } }; </script> <script lang="ts"> /** * Selection card component. If used standalone, only the checkbox variant can be used. If the checkbox variant is needed, please use the bento-selection-card-group component. * * @example * import { BentoSelectionCard } from '@adyen/bento-vue2'; * import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy'; * * export default { * components: { BentoSelectionCard, EmoticonHappyIcon }, * template: ` * <bento-selection-card title="Card title" :model-value.sync="yourModelValue"> * <template #icon> * <emoticon-happy-icon /> * </template> * </bento-selection-card> * ` * } */ export default { name: 'bento-selection-card', }; </script> <style lang="scss" scoped src="./selection-card.scss" /> 

package/dist/assets/components/sidepanel/components/sidepanel-page.stories.ts

@@ -0,0 +1 @@
+import BentoSidepanel from '../sidepanel.vue'; import BentoSidepanelPage from './sidepanel-page.vue'; import { BentoButton } from '@/components/button'; import type { Meta, StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import { ref, watch } from 'vue'; import { action } from '@storybook/addon-actions'; const meta: Meta = { title: 'Sidepanel/Sidepanel Page', component: BentoSidepanelPage, argTypes: { default: { name: 'default', type: { name: 'string', required: false }, description: 'Content of the sidepanel page', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, }, }; export default meta; type Story = StoryObj<typeof BentoSidepanelPage>; const BUTTON_ACTIONS = [ { title: 'Save', event: () => action('save')(), }, { title: 'Cancel', event: () => action('cancel')(), }, ]; const DEFAULT_PROPS = { title: 'Intro', actions: BUTTON_ACTIONS, actionsLabel: 'Label', default: 'This is the content', destructiveActions: false, }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoSidepanel, BentoSidepanelPage }, props: Object.keys(argTypes), template: ` <div> <bento-button :aria-expanded="isOpen" @click="isOpen = true" > Open sidepanel </bento-button> <bento-sidepanel @update:active-page="updatePage" :is-open="isOpen" @update:is-open='isOpen = $event'> <bento-sidepanel-page v-bind="args">{{ args.default }}</bento-sidepanel-page> </bento-sidepanel> </div> `, setup(props) { const isOpen = ref(false); const args = isVue2 ? props : _args; const updatePage = page => action('update:active-page')(page); watch( () => args.isOpen, () => { isOpen.value = args.isOpen; }, { immediate: true } ); return { args, isOpen, updatePage, }; }, }), args: { ...DEFAULT_PROPS }, }; 

package/dist/assets/components/sidepanel/components/sidepanel-page.vue

@@ -0,0 +1 @@
+<template> <dialog-page class="b-sidepanel-page" :page-id="pageId" :previous-page="previousPage"> <template #header> <div class="b-sidepanel-page__header"> <bento-typography class="b-sidepanel-page__title" el="h2" variant="title"> {{ title }} </bento-typography> </div> </template> <template #content> <div class="b-sidepanel-page__content"> <bento-typography el="div" variant="body"> <slot /> </bento-typography> </div> </template> <template v-if="actions && actions.length > 0" #footer> <div class="b-sidepanel-page__actions"> <footer-actions :actions="actions" :actions-label="actionsLabel" :destructive-actions="destructiveActions" /> </div> </template> </dialog-page> </template> <script setup lang="ts"> import { type PropType } from 'vue'; import { type BentoButtonActionsList } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import { FooterActions } from '@/components/internal/footer-actions'; import { DialogPage } from '@/internal'; 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". * * ``` * [{ * title: 'Primary', * event: () => { ... }, * icon: FourPeopleIcon * }, { * title: 'Secondary', * event: () => { ... } * }] * ``` */ actions: { type: Array as PropType<BentoButtonActionsList>, default: null, }, /** * Text label that is displayed left to the action buttons */ actionsLabel: { type: String, default: null, }, /** * If passed - sets first button color to red */ destructiveActions: { type: Boolean, default: false, }, /** * Identifier of the page, used with activePage prop to handle sidepanel navigation */ pageId: { type: String, default: undefined, }, /** * ID of the page for the back button to navigate to. Only use it to overwrite the default back behavior * Used when the back button should not take the user to the natural previous page * Set to `null` to hide back button in the page */ previousPage: { type: String, default: undefined, }, /** * Title of the sidepanel page */ title: { type: String, default: null, }, }); </script> <script lang="ts"> /** * SidepanelPage is used to render different pages of Sidepanel component * * @example * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2'; * * export default { * components: { BentoSidepanel, BentoSidepanelPage }, * template: ` * <bento-sidepanel active-page='step1' is-open='true'> * <bento-sidepanel-page * title='Step 1' * pageId='step1' * :actions="[ * { * title: 'Next step', * event: () => { * activePage.value = 'step2'; * }, * }]"> * Step 1 info * </bento-sidepanel-page> * <bento-sidepanel-page * title='Step 2' * pageId='step2' * :actions="[ * { * title: 'Save', * event: () => {}, * }]"> * Step 2 info * </bento-sidepanel-page> * </bento-sidepanel> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./sidepanel-page.scss" /> 

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

@@ -0,0 +1,129 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as SidepanelStories from './sidepanel.stories';
+
+<Meta of={SidepanelStories} />
+
+# Sidepanel
+
+Sidepanel component is a slide-in panel that should be used for presenting actions, settings or features that are
+directly associated with a specific task or interaction on the main screen.
+
+It should always be triggered by button or icon-only button.
+
+<Canvas of={SidepanelStories.OnePage} />
+
+## Use Cases
+
+Use Sidepanel component for presenting actions or settings of small to medium complexity that are directly associated
+with the main screen.
+
+Examples:
+
+- Create new object
+- Edit existing object
+- Settings/Configuration
+- Context related learning article
+- Other similar use cases
+
+### Do not use
+
+For a small complexity tasks
+
+- Rename
+- Changing of only one setting
+
+In those cases, use Modal component instead.
+
+## Navigation
+
+Sidepanel component supports deeper level navigation (user can go deeper in hierarchy and go back).
+
+To handle navigation, every `sidepanel-page` should have a `pageId`, which can then be passed to the `activePage` prop
+in `sidepanel` component to handle which page should be shown next.
+
+The back button by default, will send the user to the previous page. If there is a use case where we don't want the user
+to navigate to the previous page, we can set the `previousPage` to null, in order to hide the button, or to a different
+`pageId`, to send the user to a different previous page.
+
+<Canvas of={SidepanelStories.MultiplePages} />
+
+## Anatomy
+
+Each `sidepanel-page` component has three different sections:
+
+### Header
+
+The header sections can contain three different elements:
+
+- Title (optional), this can be passed with the `title` prop.
+- Back button (optional), if the user has navigated deeper in the hierarchy and `previousPage` is not set to null.
+- Close button (optional), shows on the right top corner of the page if `isDismissible` is set to `true`.
+
+### Content area
+
+This is a slot and can be anything. Look up the [Use Cases](#use-cases) section to better understand the content that
+should be present in this section.
+
+### Footer
+
+The footer will only show if `actions` prop is passed. Additionally, it can also contain a `actionLabel` and the actions
+can be set to destructive (in case, there's, for example, a `Delete` button) with the `destructiveActions` prop.
+
+## Properties
+
+This is the list of properties, applicable to `bento-sidepanel`
+
+| Property Name     | Description                                                                            |
+| ----------------- | -------------------------------------------------------------------------------------- |
+| `isOpen`          | Property that controls if the sidepanel is open or closed                              |
+| `activePage`      | The id of the current active page, the `bento-sidepanel-page` the user wants displayed |
+| `isDismissible`   | If passed - makes it possible to close the sidepanel by clicking outside               |
+| `hideCloseButton` | Controls the visibility of close button on the sidepanel.                              |
+
+This is the list of properties, applicable to `bento-sidepanel-page`
+
+| Property Name        | Description                                                                                  |
+| -------------------- | -------------------------------------------------------------------------------------------- |
+| `pageId`             | The id of the page, used to control navigation                                               |
+| `previousPage`       | Can be set to null to hide the back button, or to a `pageId` to override the normal behavior |
+| `title`              | Title of the page                                                                            |
+| `actions`            | List of actions that will be used to render the buttons                                      |
+| `actionsLabel`       | Text label that is displayed left to the action buttons                                      |
+| `destructiveActions` | If passed - sets first button color to red                                                   |
+
+### isDismissible vs hideCloseButton
+
+The `isDismissible` property determines whether the sidepanel can be closed by clicking outside of the panel.
+
+- When `isDismissible=true`, a close button is displayed by default.
+- When `isDismissible=false`, a close button is hidden by default.
+
+To independently control the visibility of the close button while `isDismissible` is set, use the `hideCloseButton`
+property.
+
+**Upcoming in v2.0.0:** The appearance of the close button will no longer depend on the `isDismissible` property.
+Instead, you will have full control over its visibility using the `hideCloseButton` property. By default,
+`hideCloseButton` will be set to `false`, meaning the close button will be shown regardless of the value of
+`isDismissible`.
+
+## Accessibility
+
+Sidepanel uses the native HTML `<dialog>` element.
+
+It means that when Sidepanel is opened, then everything other than the `<dialog>` and its contents is rendered inert
+using the `inert` attribute.
+
+It indicates the browser to ignore all the elements with `inert` attribute applied.
+
+### Keyboard interaction
+
+- User can use `Tab` key to move focus to the trigger and use `Spacebar`/`Enter` to activate the sidepanel.
+- The `Tab` should change focus between interactive elements in Sidepanel (if there are few). This behavior should only
+  exist when Sidepanel is open and should not extend outside of the Sidepanel window (focus trap).
+- When user uses `Esc` button, Sidepanel should close and return focus to the trigger.
+    - _OR_ when user use tab key to move focus to the dismiss/close button and then use Spacebar/Enter key -> we close
+      the sidepanel and return focus to the trigger
+
+## Resources
+
+- [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?type=design&node-id=16389-6643&mode=design&t=2CFK9xp3h3zaSfYF-0)

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

@@ -0,0 +1 @@
+import { ref, watch } from 'vue'; import { BentoButton } from '@/components/button'; import BentoSidepanel from './sidepanel.vue'; import BentoSidepanelPage from './components/sidepanel-page.vue'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { action } from '@storybook/addon-actions'; import { type Meta, type StoryObj } from '@storybook/vue'; export default { title: 'Sidepanel', component: BentoSidepanel, argTypes: { default: { name: 'default', type: { name: 'string', required: false }, description: 'BentoSidepanelPage components', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, }, } as Meta; type Story = StoryObj<typeof BentoSidepanel>; const DEFAULT_PROPS = { isOpen: false, isDismissible: true, }; const onePageCode = ` <bento-sidepanel :is-open="isOpen" @update:is-open="isOpen = $event"> <bento-sidepanel-page title="One page" :actions="actionsArray"> This is the content of the sidepanel. </bento-sidepanel-page> </bento-sidepanel> `; export const OnePage: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoSidepanel, BentoSidepanelPage }, props: Object.keys(argTypes), template: ` <div> <bento-button :aria-expanded="isOpen" @click="isOpen = true" > Open sidepanel </bento-button> <bento-sidepanel v-bind="args" :is-open="isOpen" @update:is-open='isOpen = false'> <bento-sidepanel-page title="Intro">This is my only page</bento-sidepanel-page> </bento-sidepanel> </div> `, setup(props) { const isOpen = ref(false); const args = isVue2 ? props : _args; watch( () => args.isOpen, () => { isOpen.value = args.isOpen; } ); return { args, isOpen, }; }, }), args: { ...DEFAULT_PROPS }, parameters: storybookDocsParameter(onePageCode), }; const multiplePagesCode = ` <bento-sidepanel :is-open="isOpen" :active-page="activePage" @update:is-open="isOpen = $event" @update:active-page="activePage = $event" > <bento-sidepanel-page pageId="step1" title="Step 1" :actions="actionsArray" actions-label="Label"> This is the content of step 1 of the sidepanel. With an label next to the actions. </bento-sidepanel-page> <bento-sidepanel-page pageId="step2" title="Step 2" :actions="actionsArray"> This is the content of step 2 of the sidepanel. </bento-sidepanel-page> <bento-sidepanel-page pageId="step3" title="Step 3" :actions="actionsArray" destructive-actions> This is the content of step 3 of the sidepanel. With the primary action as a destructive action. </bento-sidepanel-page> <bento-sidepanel-page pageId="step4" title="Step 4" :actions="actionsArray" :previous-page="null"> This is the content of step 4 of the sidepanel. With no back arrow showing. </bento-sidepanel-page> </bento-sidepanel> `; export const MultiplePages: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoSidepanel, BentoSidepanelPage }, props: Object.keys(argTypes), template: ` <div> <bento-button :aria-expanded="isOpen" @click="isOpen = true" > Open sidepanel </bento-button> <bento-sidepanel v-bind="args" :is-open="isOpen" :active-page="activePage" @update:active-page="activePage = $event" @update:is-open='isOpen = $event'> <bento-sidepanel-page v-bind="intro"> <p style="margin-top: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </bento-sidepanel-page> <bento-sidepanel-page v-bind="newProfile" > This page has some info about creating a new profile </bento-sidepanel-page> <bento-sidepanel-page v-bind="editProfile" > This is where you edit your profile </bento-sidepanel-page> <bento-sidepanel-page v-bind="newProfileForm"> This is where you create a new profile </bento-sidepanel-page> <bento-sidepanel-page v-bind="success"> Your profile is created </bento-sidepanel-page> </bento-sidepanel> </div> `, setup(props) { const isOpen = ref(false); const activePage = ref('intro'); const args = isVue2 ? props : _args; watch( () => args.isOpen, () => { isOpen.value = args.isOpen; } ); watch( () => args.activePage, () => { activePage.value = args.activePage; } ); const intro = { pageId: 'intro', title: 'Intro', actions: [ { title: 'New profile', event: () => { activePage.value = 'newProfile'; }, }, { title: 'Edit profile', event: () => { activePage.value = 'editProfile'; }, }, ], actionsLabel: 'What do you wanna do?', }; const newProfile = { pageId: 'newProfile', title: 'New profile', actions: [ { title: 'Go to form', event: () => { activePage.value = 'newProfileForm'; }, }, ], }; const editProfile = { pageId: 'editProfile', title: 'Edit profile', actions: [ { title: 'Save', event: () => { activePage.value = 'success'; }, }, { title: 'Cancel', event: () => { isOpen.value = false; action('cancel')(); }, }, ], }; const newProfileForm = { pageId: 'newProfileForm', title: 'New profile form', actions: [ { title: 'Save', event: () => { activePage.value = 'success'; }, }, { title: 'Cancel', event: () => { isOpen.value = false; action('cancel')(); }, }, ], }; const success = { pageId: 'success', title: 'Success!', destructiveActions: true, actions: [ { title: 'Delete', event: () => { isOpen.value = false; action('delete')(); }, }, { title: 'Cancel', event: () => { isOpen.value = false; action('cancel')(); }, }, ], previousPage: null, }; return { args, activePage, intro, newProfile, newProfileForm, success, editProfile, isOpen, }; }, }), args: { ...DEFAULT_PROPS, activePage: 'intro' }, parameters: storybookDocsParameter(multiplePagesCode), }; 

package/dist/assets/components/sidepanel/sidepanel.vue

@@ -0,0 +1 @@
+<template> <dialog ref="sidepanel" class="b-sidepanel" :class="conditionalClasses" @animationend="closeSidepanelAfterAnimation" @keydown.esc.prevent="isDismissible && startCloseSidepanelAnimation" > <bento-focus-trap :id="sidepanelId" v-bento-click-outside-directive="closeSidepanelOnClickOutside"> <div v-if="!computedHideCloseButton" class="b-sidepanel__close-button"> <bento-button variant="tertiary" @click="startCloseSidepanelAnimation"> <cross-icon :svg-title="t('close')" /> </bento-button> </div> <slot /> </bento-focus-trap> </dialog> </template> <script setup lang="ts"> import { computed, nextTick, provide, ref, toRefs, watch } from 'vue'; import { BentoButton } from '@/components/button'; import { BentoFocusTrap } from '@/components/focus-trap'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import { BentoSidepanelEvent } from './sidepanel.types'; import { BentoDialogPageAnimation, type BentoDialogPageConfigData, type BentoDialogPageRegisterPage, DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, } from '@/internal'; import { SIDEPANEL_DIALOG_ID_INJECTION_KEY } from './sidepanel.keys'; import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside'; import { useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; import { generateUid } from '@/core/utils/ts'; import { deprecate } from '@/utils/ts/deprecate'; type MessageSchema = (typeof messages)['en-US']; const props = defineProps({ /** * The id of the current active page * Should be the same id as the BentoSidepanelPage to be displayed * If the component only has one page, it can be left null/undefined. */ activePage: { type: String, default: null, }, /** * If set to true, it allows the sidepanel to be closed. * Shows close button when `true` and hides close button when `false`. * * _Note: This property will not set the visibility of the close button in v2.0.0_ */ isDismissible: { type: Boolean, default: false, }, /** * Controls the sidepanel's state from the outside. Set it to true to open the sidepanel. */ isOpen: { type: Boolean, default: null, }, /** * Controls the visibility of close button on the sidepanel. * Defaults to `true` when `isDismissible=false`, and `true` when `isDimissible=true`. * * _Note: This property will be set to `false` by default, independent of `isDismissible` in v2.0.0_ */ hideCloseButton: { type: Boolean, default: null, }, }); const emit = defineEmits<{ /** * Emits update event when page is changed internally */ (e: BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page: string): void; /** * Emits close-sidepanel event when the sidepanel is closed */ (e: BentoSidepanelEvent.UPDATE_IS_OPEN, isOpen: boolean): void; }>(); // Refs const { activePage, isOpen } = toRefs(props); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const sidepanel = ref(null); const pages = ref<Array<string>>([]); const previousPages = ref([]); const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER); const isClosing = ref(false); const sidepanelId = generateUid('sidepanel'); const internalIsOpen = ref(false); const isAnimationActive = ref(false); // Animation styling const conditionalClasses = computed(() => ({ 'b-sidepanel--hide': isClosing.value, 'b-sidepanel--animation': isAnimationActive.value, })); // Handle closing and closing animation for dialog element const closeSidepanelAfterAnimation = () => { if (isClosing.value) { sidepanel.value.close(); if (previousPages.value[0]) { emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, previousPages.value[0]); } previousPages.value = []; isClosing.value = false; internalIsOpen.value = false; emit(BentoSidepanelEvent.UPDATE_IS_OPEN, false); } }; const startCloseSidepanelAnimation = () => { if (!sidepanel.value.open) { return; } isClosing.value = true; }; const closeSidepanelOnClickOutside = () => { if (props.isDismissible) { startCloseSidepanelAnimation(); } }; // TODO: Remove in upcoming major. See properties `hideCloseButton` and `isDismissible`. const computedHideCloseButton = computed(() => { if (props.hideCloseButton !== null) { return props.hideCloseButton; } return !props.isDismissible; }); // Watching isOpen prop to toggle open/close the dialog element watch( () => isOpen.value, async () => { // Wait for sidepanel ref to be created await nextTick(); if (!sidepanel.value) { return; } if (isOpen.value) { internalIsOpen.value = true; sidepanel.value.showModal(); if (!previousPages.value.length) { previousPages.value.push(activePage.value); } } else if (sidepanel.value.open) { startCloseSidepanelAnimation(); } }, { immediate: true } ); // Pages const updatePage = page => emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page); // unregister page if removed / destroyed const unregisterPage = (pageIdToRemove: string) => () => { pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove); }; // Provide data and function to register page to subcomponent const registerPage: BentoDialogPageRegisterPage = pageId => { pages.value.push(pageId); return { unregisterPage: unregisterPage(pageId) }; }; provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, { activePage, animation, isAnimationActive, isOpen: internalIsOpen, pages, previousPages, updatePage, }); provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage); // Let's Children components know they are inside a SidePanel (dialog element) provide(SIDEPANEL_DIALOG_ID_INJECTION_KEY, sidepanelId); if (!props.isDismissible && props.hideCloseButton === null) { deprecate( 'BentoSidepanel "isDismissible" property’s behavior', 'BentoSidepanel "isDismissible" will no longer hide the close button. Use "hideCloseButton=true" instead.', '2.0.0' ); } </script> <script lang="ts"> /** * Sidepanel component is a slide-in panel that should be used for presenting actions, settings or features that are directly associated with a specific task or interaction on the main screen. * * @example * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2'; * * export default { * components: { BentoSidepanel, BentoSidepanelPage }, * template: ` * <bento-sidepanel active-page='step1' is-open='true'> * <bento-sidepanel-page * title='Step 1' * pageId='step1' * :actions="[ * { * title: 'Next step', * event: () => { * activePage.value = 'step2'; * }, * }]"> * Step 1 info * </bento-sidepanel-page> * <bento-sidepanel-page * title='Step 2' * pageId='step2' * :actions="[ * { * title: 'Save', * event: () => {}, * }]"> * Step 2 info * </bento-sidepanel-page> * </bento-sidepanel> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./sidepanel.scss" /> 

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

@@ -0,0 +1,62 @@
+import { Canvas, Story, Meta } from '@storybook/blocks';
+import * as ComponentStories from './status.stories';
+
+<Meta of={ComponentStories} />
+
+# Status
+
+<Canvas of={ComponentStories.Default} />
+
+A status component is used to indicate a passage of time or a particular step of a process.
+
+## Use Cases
+
+Use the status component to indicate progression and when you need to label things such as:
+
+-   Payment processing steps (successful, refused, in progress...).
+-   How long ago a terminal has been used (1 day ago, 1 week ago, 1 month ago...).
+
+### Do not use
+
+It is strongly advised to not rely on the icon color only to mark progress, as users with color blindness may struggle
+with discerning them. Instead, opt fot text conveying such progress so everyone can understand its meaning (e.g.
+`Active today` instead of `Activity` paired with a green icon).
+
+## Variations
+
+### Variant
+
+Defines the color of the component's icon and it can take up six different values:
+
+-   `'grey'`: renders the icon in the color grey.
+-   `'blue'`: renders the icon in the color blue.
+-   `'green'`: renders the icon in the color green.
+-   `'yellow'`: renders the icon in the color yellow.
+-   `'orange'`: renders the icon in the color orange.
+-   `'red'`: renders the icon in the color red.
+
+## Modifiers
+
+There are no available modifiers for this component.
+
+## Accessibility
+
+This component is marked with a
+[`status` ARIA role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/status_role) so as to make
+its purpose clear to assistive technology.
+
+### Keyboard interaction
+
+The status component is not reachable through keyboard navigation as it's a non-interactive element. A detailed list of
+keyboard interactions is provided in the table below.
+
+### Roles, states and properties
+
+| ARIA attribute | is automatic?                             | fallback used | manual override |
+| -------------- | ----------------------------------------- | ------------- | --------------- |
+| `role`         | Yes, `role="status"` set on the root div. | -             | -               |
+
+## Resources
+
+-   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=791-9659&t=668CkphganKdxlyp-0)
+-   [WAI-ARIA guidelines](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22)

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

@@ -0,0 +1 @@
+import { BentoStatusVariant } from './status.types'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { type Meta, type StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import BentoStatus from './status.vue'; const meta: Meta = { title: 'Status', component: BentoStatus, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'Default slot content', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, // Enum props variant: { options: Object.values(BentoStatusVariant), mapping: BentoStatusVariant, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoStatus>; const DEFAULT_TEXT = 'Status'; const defaultCode = ` <bento-status variant="grey"> ${DEFAULT_TEXT} </bento-status> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoStatus }, props: Object.keys(argTypes), template: ` <bento-status v-bind="args"> {{args.default}} </bento-status> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { default: DEFAULT_TEXT, variant: 'grey', }, parameters: storybookDocsParameter(defaultCode), }; 

package/dist/assets/components/status/status.vue

@@ -0,0 +1 @@
+<template> <div class="b-status" role="status"> <div class="b-status__indicator-wrapper"> <span class="b-status__indicator" :class="conditionalClass" role="presentation"></span> </div> <bento-typography class="b-status__label" el="span" variant="body"> <slot></slot> </bento-typography> </div> </template> <script setup lang="ts"> import { computed } from 'vue'; import { BentoTypography } from '@/components/typography'; import { type BentoStatusProps } from './status.types'; const props = defineProps<BentoStatusProps>(); const conditionalClass = computed(() => ({ [`b-status__indicator--${props.variant}`]: true, })); </script> <script lang="ts"> /** * A Status component is used to indicate a * passage of time or a particular step of a process. * * @example * import { BentoStatus } from '@adyen/bento-vue2'; * * export default { * components: { BentoStatus }, * template: ` * <bento-status variant="red"> * 1 week ago * </bento-status> * ` * } */ export default { name: 'bento-status', }; </script> <style lang="scss" scoped src="./status.scss" /> 

package/dist/assets/components/stepper/components/step/step.stories.ts

@@ -0,0 +1 @@
+import BentoStep from './step.vue'; import BentoStepper from '../../stepper.vue'; import { isVue2 } from 'vue-demi'; import type { Meta, StoryObj } from '@storybook/vue'; const meta: Meta = { title: 'Stepper/Step', component: BentoStep, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'Default slot content', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, substeps: { name: 'substeps', type: { name: 'string', required: false }, description: 'Substeps slot', control: 'text', table: { type: { summary: 'BentoStep[]' }, }, }, }, }; export default meta; type Story = StoryObj<typeof BentoStepper>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoStep, BentoStepper }, props: Object.keys(argTypes), template: ` <bento-stepper type="non-linear"> <bento-step v-bind="args">Step 1</bento-step> </bento-stepper> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: {}, }; 

package/dist/assets/components/stepper/components/step/step.vue

@@ -0,0 +1 @@
+<template> <li :class="conditionalClasses" class="b-step"> <base-button ref="buttonComponent" :aria-current="ariaCurrentValue" :aria-disabled="ariaDisabledValue" class="b-step__button" type="button" :tabindex="tabIndexValue" :disabled="isDisabled" @click="navigateToStep" @focus="isFocused = true" @blur="isFocused = false" > <template #iconLeft> <bento-typography el="span" variant="body" stronger class="b-step__index" aria-hidden="true"> <checkmark-small-icon v-if="isCompleted" /> <template v-else-if="!isSubstep">{{ index + 1 }}</template> <dot-icon v-else /> </bento-typography> </template> <bento-typography ref="stepContent" el="span" variant="body" :stronger="isActive" class="b-step__content"> <slot></slot> </bento-typography> </base-button> <ul v-show="isSubstepsVisible" ref="substepList" class="b-step__substep-list"> <slot name="substeps"></slot> </ul> </li> </template> <script setup lang="ts"> import { computed, inject, onBeforeUnmount, onMounted, provide, ref, useSlots, watch } from 'vue'; import { BaseButton } from '@/components/internal/base-button'; import { BentoTypography } from '@/components/typography'; import CheckmarkSmallIcon from '@adyen/ui-assets-icons-16/vue/checkmark-small'; import DotIcon from '@adyen/ui-assets-icons-16/vue/dot'; import { useStepRegister } from '../../composables'; import { STEPPER_STATE } from '../../stepper.keys'; import { type BentoStepperState, type BentoStepperStepExposeState, BentoStepperTypeOption, BentoStepperVariantOption, } from '../../stepper.types'; import { type Booleanish } from '@/types/prop-types'; const slots = useSlots(); const props = defineProps({ /** * Completed status. Used on non-linear steppers to indicate if the step is completed. */ completed: { type: Boolean, default: false, }, /** * Active substep index */ substepIndex: { type: Number, default: 0, }, }); const emit = defineEmits<{ /** * Event triggered when substep is updated by the parent step */ (e: 'update:substep-index', index: number): void; }>(); // Element refs const buttonComponent = ref<InstanceType<typeof BaseButton> | null>(null); const stepContent = ref<InstanceType<typeof BentoTypography> | null>(null); const substeps = ref<Array<BentoStepperStepExposeState>>([]); // Injects parent BentoStepper state data const stepper = inject<BentoStepperState>(STEPPER_STATE); const buttonElement = computed(() => buttonComponent.value?.$el as HTMLButtonElement); const index = computed(() => stepper?.value.steps.indexOf(buttonElement.value)); const stepContentValue = computed(() => stepContent.value?.$el.textContent); // Substep logic const substepsButtonElements = computed(() => substeps.value.map(({ buttonElement }) => buttonElement)); const activeSubStepIndex = ref(props.substepIndex); const latestActiveSubStepIndex = ref(activeSubStepIndex.value); const navigateToSubstep = (value: number) => { if (value > latestActiveSubStepIndex.value) { latestActiveSubStepIndex.value = value; } activeSubStepIndex.value = value; }; const { registerStep, removeStep } = useStepRegister(substeps); const stepState: BentoStepperState = ref({ activeStepIndex: activeSubStepIndex, latestActiveStep: latestActiveSubStepIndex, type: stepper.value.type, variant: stepper.value.variant, steps: substepsButtonElements, isParentStep: true, navigateToStep: navigateToSubstep, registerStep, removeStep, }); provide(STEPPER_STATE, stepState); watch(() => props.substepIndex, navigateToSubstep); watch(activeSubStepIndex, value => { emit('update:substep-index', value); }); onMounted(() => { if (!stepper) { throw new Error( 'BentoStep components should only be used inside BentoStepper or other BentoStep components.' ); } stepper.value.registerStep({ buttonElement, stepContent: stepContentValue, substeps, }); }); onBeforeUnmount(() => { stepper.value.removeStep({ buttonElement, stepContent: stepContentValue, substeps, }); }); // Step states const isSubstep = computed(() => stepper.value.isParentStep); const isFocused = ref(false); const isActive = computed(() => stepper?.value.activeStepIndex === index.value); const isSubstepsVisible = computed( () => isActive.value && stepper.value.variant !== BentoStepperVariantOption.HORIZONTAL && !isSubstep.value && slots.substeps ); const isCompleted = computed(() => { if (stepper?.value.type === BentoStepperTypeOption.NON_LINEAR) { return props.completed; } return stepper?.value.latestActiveStep > index.value; }); const isDisabled = computed( () => stepper?.value.type === BentoStepperTypeOption.LINEAR && index.value > stepper?.value.latestActiveStep ); const navigateToStep = () => { if (isDisabled.value) { return; } stepper.value.navigateToStep(index.value); }; // Styling and a11y const ariaCurrentValue = computed(() => (isActive.value ? 'step' : ('false' as Booleanish))); const ariaDisabledValue = computed(() => isDisabled.value.toString() as Booleanish); const tabIndexValue = computed(() => (isFocused.value || (index.value === 0 && !isSubstep.value) ? '0' : '-1')); const conditionalClasses = computed(() => ({ 'b-step--active': isActive.value, 'b-step--completed': isCompleted.value, 'b-step--substep': isSubstep.value, })); </script> <script lang="ts"> /** * Steps are components placed inside BentoSteppers to break down complex processes * * @example * import { BentoStep } from '@adyen/bento-vue2'; * * export default { * components: { BentoStep }, * template: ` * <bento-stepper> * <bento-step>Step 1</bento-step> * <bento-step> * Step 2 * <template #substeps> * <bento-step>Substep 1</bento-step> * <bento-step>Substep 2</bento-step> * </template> * </bento-step> * </bento-stepper> * ` * } */ export default { name: 'step', }; </script> <style lang="scss" scoped src="./step.scss" /> 

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

@@ -0,0 +1,127 @@
+import { Canvas, Meta, Story, Source } from '@storybook/blocks';
+import * as StepperStories from './stepper.stories';
+import ResetStepperExample from './__tests__/reset-stepper-example.vue?raw';
+
+<Meta of={StepperStories} />
+
+# Stepper
+
+Steppers break down complex processes into manageable steps to guide users through a sequential or multi-step process.
+
+<Canvas withSource="closed">
+    <Story of={StepperStories.Default} />
+</Canvas>
+
+## Use Cases
+
+Use steppers when:
+
+- You need to simplify the experience in lengthy forms into manageable steps.
+- Users need to track progress through a process so that they understand where they are and what steps remain.
+
+### Do not use
+
+- Don’t use steppers to manage page navigation. Consider using `BentoTabs`.
+
+- Don’t use steppers if users needs to read through all the content to fully understand a process or flow, or if they
+  need to compare information between them.
+
+## Modifiers
+
+### Type
+
+There are two ways you can use your stepper:
+
+1. Linear steppers
+
+This stepper requires users to complete one step in order to move on to the next. Steps always follow a specific order
+and users cannot skip a step.
+
+2. Non-linear steppers
+
+This stepper allow users to complete steps in random order. Users can navigate to any step they wish.
+
+#### Using stepper with a loop
+
+If you want to build your stepper from an array of navigation options, you can do so:
+
+<Canvas withSource="open">
+    <Story of={StepperStories.ConditionalSteps} />
+</Canvas>
+
+This also also allows for conditional steps - simply update your array of steps, and the stepper component will update
+accordingly.
+
+#### Set the stepper programatically
+
+If you need to set your stepper, you just need to add a `key` attribute to it and increase it.
+
+<Source
+    dark
+    language="html"
+    code={`
+<bento-stepper :key="stepKey">
+...
+</bento-stepper>
+<div role="status">
+    A dynamic content such as computed(() => steps[activeIndex]) is needed here in order for the section to be announced by the screen reader on step change
+</div>
+`}
+/>
+
+#### Resetting stepper
+
+In some cases, you may need to reset the stepper to its initial state (e.g., when a user wants to start a process over).
+The `BentoStepper` component exposes a `reset()` method that sets both the active step and the maximum progress reached
+back to zero.
+
+<Source dark language="html" code={ResetStepperExample} />
+
+## Accessibility
+
+### Keyboard interaction
+
+| Keyboard interaction | Action                                                                                                   |
+| -------------------- | -------------------------------------------------------------------------------------------------------- |
+| `Tab`                | Sets focus on the first step                                                                             |
+| `ArrowLeft`          | Moves the focus to the previous step (to the left on horizontal stepper and upwards on vertical stepper) |
+| `ArrowRight`         | Moves the focus to the next step (to the right on horizontal stepper and down on vertical stepper)       |
+| `ArrowUp`            | Moves the focus to the previous step (to the left on horizontal stepper and upwards on vertical stepper) |
+| `ArrowDown`          | Moves the focus to the next step (to the right on horizontal stepper and down on vertical stepper)       |
+| `Enter`              | Activates the step.                                                                                      |
+
+### Roles, states and properties
+
+| Role         | Attribute               | Element  | Usage                                                                                                                                                   |
+| ------------ | ----------------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `navigation` |                         | `nav`    | Indicates that the element contains a collection of navigational elements for navigating the document.                                                  |
+| `button`     |                         | `button` | Indicates that the element serves as a stepper control.                                                                                                 |
+|              | `aria-disabled="true"`  | `button` | <ul> <li> Indicates that the step control can't be selected.</li> <li>On a linear stepper, is set when the previous steps are not completed. </li></ul> |
+|              | `aria-disabled="false"` | `button` | Indicates that the step control can be selected.                                                                                                        |
+|              | `tabindex="-1"`         | `button` | <ul> <li> Removes the element from the page <kbd>Tab</kbd> sequence. </li> <li> Set on every step control, except the first one. </li> </ul>            |
+|              | `aria-current="step"`   | `button` | Indicates that the current step is active.                                                                                                              |
+|              | `aria-current="false"`  | `button` | Indicates that the current step is not active.                                                                                                          |
+
+### Screen reader
+
+To ensure that the content of each step is announced by screen readers when the user navigates between steps, the
+content should be rendered within an element with the `role` attribute set to `status`.
+
+<Source
+    dark
+    language="html"
+    code={`
+<template>
+    <div>
+        <bento-stepper :index="index" @update:index="index = $event">
+            <bento-step v-for="step in steps" :key="step">{{ step }}</bento-step>
+        </bento-stepper>
+        <div role="status">
+            A dynamic content such as computed(() => steps[activeIndex]) is needed here in order for the section to be announced by the screen reader on step change
+        </div>
+    </div>
+</template>
+`}
+/>
+
+- [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?type=design&node-id=17186-91237&mode=design&t=d0AYyM2iVqBMrOI4-0)

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

@@ -0,0 +1 @@
+import BentoStepper from './stepper.vue'; import BentoStep from './components/step/step.vue'; import { BentoButton } from '@/components/button'; import { action } from '@storybook/addon-actions'; import { computed, isVue2, ref } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import { BentoStepperTypeOption, BentoStepperVariantOption } from './stepper.types'; import './stepper.stories.scss?module'; const meta: Meta = { title: 'Stepper', component: BentoStepper, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'BentoStep components', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, // Enum props type: { options: Object.values(BentoStepperTypeOption), mapping: BentoStepperTypeOption, control: { type: 'select', }, }, variant: { options: Object.values(BentoStepperVariantOption), mapping: BentoStepperVariantOption, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoStepper>; export const Default: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep }, props: Object.keys(argTypes), template: ` <bento-stepper v-bind="args" :key="JSON.stringify(args)" @update:index="updateIndex"> <bento-step>Step 1</bento-step> <bento-step>Step 2</bento-step> <bento-step>Step 3</bento-step> <bento-step>Step 4</bento-step> </bento-stepper> `, setup(props) { const updateIndex = (index: number) => action('update:index')(index); return { updateIndex, args: isVue2 ? props : _args, }; }, }; }, args: { index: 2, }, }; Default.parameters = storybookDocsParameter(` <bento-stepper :index="index" @update:index="index = $event"> <bento-step>Step 1</bento-step> <bento-step>Step 2</bento-step> <bento-step>Step 3</bento-step> <bento-step>Step 4</bento-step> </bento-stepper> <div role="status"> A dynamic content such as computed(() => steps[activeIndex]) is needed here in order for the section to be announced by the screen reader on step change </div> `); export const Substeps: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep }, props: Object.keys(argTypes), template: ` <bento-stepper :index="index" @update:index="index = $event"> <bento-step>Step 1</bento-step> <bento-step :substep-index="args.substepIndex" @update:substep-index="substepAction"> Step 2 <template #substeps> <bento-step>Substep 1</bento-step> <bento-step>Substep 2</bento-step> <bento-step>Substep 3</bento-step> </template> </bento-step> <bento-step>Step 3</bento-step> </bento-stepper> `, setup(props) { const updateIndex = (index: number) => action('update:index')(index); const substepAction = (index: number) => action('update:substep-index')(index); return { updateIndex, substepAction, args: isVue2 ? props : _args, }; }, }; }, args: { index: 1, substepIndex: 1, }, }; Substeps.parameters = storybookDocsParameter(` <bento-stepper :index="index" @update:index="index = $event"> <bento-step>Step 1</bento-step> <bento-step :substep-index="args.substepIndex" @update:substep-index="substepAction"> Step 2 <template #substeps> <bento-step>Substep 1</bento-step> <bento-step>Substep 2</bento-step> <bento-step>Substep 3</bento-step> </template> </bento-step> <bento-step>Step 3</bento-step> </bento-stepper> <div role="status"> A dynamic content such as computed(() => steps[activeIndex]) is needed here in order for the section to be announced by the screen reader on step change </div> `); export const ConditionalSteps: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep, BentoButton }, props: Object.keys(argTypes), template: ` <div class="b-stepper-story" :class="args.variant === 'horizontal' && 'b-stepper-story--horizontal'"> <bento-stepper v-bind="args" :key="JSON.stringify(args)" :style="stepperStyle" @update:index="updateIndex"> <bento-step v-for="(step, index) in steps" :key="step">{{ step }}</bento-step> </bento-stepper> <bento-button @click="toggleSteps">Toggle extra steps</bento-button> </div> `, setup(props) { const updateIndex = (index: number) => action('update:index')(index); const withMiddleSteps = ref(true); const steps = computed(() => [ 'General config', withMiddleSteps.value && 'Online settings', withMiddleSteps.value && 'Offline settings', 'Summary', withMiddleSteps.value && 'Extra: post config', ].filter(Boolean) ); const toggleSteps = () => { withMiddleSteps.value = !withMiddleSteps.value; }; const stepperStyle = computed(() => ({ width: props.variant === 'horizontal' ? 'unset' : '200px' })); return { updateIndex, args: isVue2 ? props : _args, withMiddleSteps, steps, toggleSteps, stepperStyle, }; }, }; }, args: { index: 1, }, }; ConditionalSteps.parameters = storybookDocsParameter(` <bento-stepper :index="index" @update:index="index = $event"> <bento-step v-for="step in steps" :key="step">{{ step }}</bento-step> </bento-stepper> <div role="status"> A dynamic content such as computed(() => steps[activeIndex]) is needed here in order for the section to be announced by the screen reader on step change </div> `); 

package/dist/assets/components/stepper/stepper.vue

@@ -0,0 +1 @@
+<template> <nav class="b-stepper"> <ol v-bento-keyboard-navigation-directive class="b-stepper__list" :class="conditionalClasses" v-on="keyboardNavigationListeners" > <slot></slot> </ol> <bento-typography el="span" variant="body" stronger class="b-stepper__text-stepper" >{{ t('step', { currentIndex: n(activeStepIndex + 1), totalSteps: n(stepsAmount), content: currentStepContent, }) }} </bento-typography> </nav> </template> <script setup lang="ts"> import { BentoTypography } from '@/components/typography'; import { computed, type DeepReadonly, type PropType, provide, readonly, ref, watch } from 'vue'; import { BentoKeyboardNavigationDirective as vBentoKeyboardNavigationDirective } from '@/directives'; import { useKeyboardNavigation, useStepRegister } from './composables'; import { useI18n } from '@/utils/ts/i18n'; import { STEPPER_STATE } from './stepper.keys'; import { type BentoStepperState, type BentoStepperStepExposeState, type BentoStepperTypeOption, BentoStepperVariantOption, } from './stepper.types'; import messages from './messages.json'; const props = defineProps({ /** * Type of stepper; defines how the stepper should behave. Default: linear * @values linear, non-linear */ type: { type: String as PropType<`${BentoStepperTypeOption}`>, default: 'linear', }, /** * Stepper variant; defines how the stepper should be displayed. Default: vertical * @values vertical, horizontal */ variant: { type: String as PropType<`${BentoStepperVariantOption}`>, default: 'vertical', }, /** * Active step index */ index: { type: Number, default: 0, }, }); const emit = defineEmits<{ /** * Event triggered when step is updated by the stepper */ (e: 'update:index', index: number): void; }>(); type MessageSchema = (typeof messages)['en-US']; const { t, n } = useI18n<{ message: MessageSchema }>({ messages }); const childrenSteps = ref<Array<BentoStepperStepExposeState>>([]); const activeStepIndex = ref(props.index); const latestActiveStep = ref(activeStepIndex.value); const navigateToStep = (index: number) => { // Stores latest active step index so users can navigate backwards and forwards on linear stepper if (index > latestActiveStep.value) { latestActiveStep.value = index; } activeStepIndex.value = index; }; const currentStepContent = computed(() => childrenSteps.value[activeStepIndex.value]?.stepContent); const stepsAmount = computed(() => childrenSteps.value.length); const childrenStepsElements = computed(() => childrenSteps.value.map(({ buttonElement }) => buttonElement)); const isHorizontalVariant = computed(() => props.variant === BentoStepperVariantOption.HORIZONTAL); // List of all visible steps nested on the stepper, including the substeps of the children steps // Flattening the steps on a single list makes the keyboard navigation easier to be handled const allVisibleStepsElements = computed(() => childrenSteps.value .map(({ buttonElement, substeps }, index) => { const isStepActive = activeStepIndex.value === index; const isSubstepsVisible = !isHorizontalVariant.value && isStepActive; if (!isSubstepsVisible) { return [buttonElement]; } return [buttonElement].concat(substeps.map(step => step.buttonElement)); }) .flat() ); const { registerStep, removeStep } = useStepRegister(childrenSteps); const stepperState: BentoStepperState = ref({ activeStepIndex, latestActiveStep, steps: childrenStepsElements, type: props.type, variant: props.variant, navigateToStep, registerStep, removeStep, }); const conditionalClasses = computed(() => ({ 'b-stepper__list--horizontal': isHorizontalVariant.value, })); watch(() => props.index, navigateToStep); watch(activeStepIndex, index => { emit('update:index', index); }); const keyboardNavigationListeners = useKeyboardNavigation(allVisibleStepsElements); // Provides stepper state to BentoStep children components provide<DeepReadonly<BentoStepperState>>(STEPPER_STATE, readonly(stepperState)); const reset = () => { activeStepIndex.value = 0; latestActiveStep.value = 0; }; defineExpose({ reset, }); </script> <script lang="ts"> /** * Steppers break down complex processes into manageable steps to guide users through a sequential or multi-step process. * * @example * import { BentoStep, BentoStepper } from '@adyen/bento-vue2'; * * export default { * components: { BentoStep, BentoStepper }, * template: ` * <bento-stepper :index="1"> * <bento-step>Step 1</bento-step> * <bento-step>Step 2</bento-step> * <bento-step>Step 3</bento-step> * </bento-stepper> * ` * } */ export default { i18n: { messages }, name: 'stepper', }; </script> <style scoped src="./stepper.scss" /> 

package/dist/assets/components/structured-list/components/structered-list-item/structured-list-item.stories.ts

@@ -0,0 +1 @@
+import BentoStructuredList from '../../structured-list.vue'; import BentoStructuredListItem from './structured-list-item.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import { BentoTypography } from '@/components/typography'; import { isVue2 } from 'vue-demi'; const meta: Meta = { title: 'Structured list/Structured list item', component: BentoStructuredListItem, argTypes: { search: { table: { type: { summary: '($event) => void' }, }, }, default: { description: 'Value of the item', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, }, } as Meta; export default meta; type Story = StoryObj<typeof BentoStructuredList>; const DEFAULT_PROPS = { default: 'Value', label: 'Label', copy: 'Text to copy', labelInfo: 'Extra info about the item', searchTooltip: 'Perform this search', truncate: false, }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoStructuredList, BentoStructuredListItem, BentoTypography, }, props: Object.keys(argTypes), template: ` <bento-structured-list> <bento-structured-list-item v-bind="args"> <bento-typography>{{ args.default }} </bento-typography> </bento-structured-list-item> </bento-structured-list> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: DEFAULT_PROPS, }; 

package/dist/assets/components/structured-list/components/structered-list-item/structured-list-item.vue

@@ -0,0 +1 @@
+<template> <div class="b-structured-list-item" :class="conditionalClasses"> <dt class="b-structured-list-item__label" :style="computedLabelStyle"> <bento-typography :variant="labelTypographyVariant">{{ label }}</bento-typography> <bento-info-icon v-if="labelInfo" class="b-structured-list-item__icon" :tooltip-text="labelInfo" /> </dt> <dd class="b-structured-list-item__value" :class="valueConditionalClasses"> <slot /> <copy v-if="copy" class="b-structured-list-item__icon" :text="copy" @click="emitCopy" /> <bento-button v-if="search" v-bento-tooltip-directive:top="searchTooltip ? searchTooltip : t('search')" class="b-structured-list-item__icon" variant="tertiary" @click="search" > <template #iconLeft> <search-icon :svg-title="t('search')" /> </template> </bento-button> </dd> </div> </template> <script setup lang="ts"> import { computed, inject, ref, type Ref } from 'vue'; // Components import { BentoButton } from '@/components/button'; import { BentoInfoIcon } from '@/components/info-icon'; import { BentoTypography } from '@/components/typography'; import Copy from '@/components/internal/copy/copy.vue'; import SearchIcon from '@adyen/ui-assets-icons-16/vue/search'; // Utils import { useI18n } from '@/utils/ts/i18n'; // Directives import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives'; // Keys import { STRUCTURED_LIST_CONDENSED_INJECTION_KEY, STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, } from '../../structured-list.keys'; import messages from '../../messages.json'; type MessageSchema = (typeof messages)['en-US']; const DEFAULT_LABELS_WIDTH = '33%'; const props = defineProps<{ /** * Label to display for the value */ label: string; /** * Text to display in info icon tooltip in the label to display for the value */ labelInfo?: string; /** * Text to copy when the user clicks `Copy` icon */ copy?: string; /** * Function to trigger when user clicks `Search` icon */ search?: (event: Event) => void; /** * Text to display when the user hovers over `Search` icon */ searchTooltip?: string; /** * Truncates the value of the item */ truncate?: boolean; }>(); const emit = defineEmits<{ /** * Emits copy event and value when copy button is clicked */ (e: 'copy', value: string): void; }>(); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false); const labelsWidth = inject<Ref<string>>(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, ref(DEFAULT_LABELS_WIDTH)); const computedLabelStyle = computed(() => `flex-basis:${labelsWidth.value}`); const conditionalClasses = computed(() => ({ 'b-structured-list-item--condensed': isCondensed, })); const valueConditionalClasses = computed(() => ({ 'b-structured-list-item__value--truncate': props.truncate, })); const emitCopy = () => { emit('copy', props.copy); }; const labelTypographyVariant = computed(() => (isCondensed ? 'caption' : 'body')); </script> <script lang="ts"> /** * This is an item of the `BentoStructuredList` meant to be used only with that component. * It consists of a label/value pair, and also the optional copy and search modifiers. * * @example * import { BentoCurrencyISOCode, BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2'; * * export default { * components: { BentoStructuredListItem, BentoStructuredListItem }, * template: ` * <bento-structured-list> * <bento-structured-list-item label="Shopper" search='searchShopper' search-tooltip='Find shopper'> * <bento-typography> * 143442642 * </bento-status> * </bento-structured-list-item> * <bento-structured-list-item label="Amount" copy='123456'> * <bento-currency :currency="BentoCurrencyISOCode.USD" :value="123456" /> * </bento-structured-list-item> * </bento-structured-list> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./structured-list-item.scss" /> 

package/dist/assets/components/structured-list/structured-list.docs.mdx

@@ -0,0 +1,68 @@
+import { Canvas, Meta, Story } from '@storybook/blocks';
+import * as StructuredListStories from './structured-list.stories';
+
+<Meta of={StructuredListStories} />
+
+# Structured List
+
+This is a list used to display pairs of information in a clear and organized manner. It consists of labels and their
+corresponding values.
+
+`StructuredList` should always be used in combination with `StructuredListItem` to correctly render the label/value
+pairs.
+
+<Canvas withSource="closed">
+    <Story of={StructuredListStories.EverythingBagel} />
+</Canvas>
+
+## Use Cases
+
+Use a structured list when there is crucial details to display. They are often used to display details of an account,
+payments, profiles or even summaries of information. They usually sit in cards, modals and side panels.
+
+## Flexible width
+
+To help with visual consistency, we provide four presets for the structured list layout, which can be applied by passing
+the following values to the `layout` prop:
+
+-   `25-75`
+-   `33-66` (default)
+-   `42-58`
+-   `50-50`
+
+These presets can also be overridden with any static pixel value to match your content needs, by passing a number to the
+`labelsWidth` prop.
+
+## Structured List Item
+
+Structure List Item is the subcomponent used to display each line of the Structured List.
+
+### Variants
+
+There are 7 recommended variants for structured lists. Each variant is accompanied by a label.
+
+-   `Text`: Used to display text only
+-   `Payment method`: Used to display payment methods accompanied by their logos.
+-   `Links`: Used to display links internally and externally.
+-   `Countries`: Used to display countries.
+-   `Status`: Used to display different statuses accompanied by an indicator.
+-   `Amount`: Used to display financial data, such as currency values and monetary amounts.
+-   `Date`: Used to display date and time information.
+
+It is also possible to pass other values into the slot if necessary.
+
+### Modifiers
+
+-   `Copy`: This allows users to copy a the value to clipboard
+-   `Search`: This automatically searches the value within the payment list
+
+## Accessibility
+
+### Keyboard interaction
+
+User can use `Tab` key to move focus within the component and use Spacebar/Enter to activate the any interactive
+elements such as links, copy or search elements. Using Spacebar/Enter triggers the interactive element that is in focus.
+
+## Resources
+
+-   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?type=design&node-id=9935-30026&mode=design&t=QDQzlQDdZV9Gi1Vu-0)

package/dist/assets/components/structured-list/structured-list.stories.ts

@@ -0,0 +1 @@
+import { BentoPaymentMethod } from '@/components/payment-method'; import { BentoStatus } from '@/components/status'; import { BentoCurrency, BentoCurrencyISOCode } from '@/components/currency'; import { BentoCountry, BentoCountryCode } from '@/components/country'; import { BentoTypography } from '@/components/typography'; import { BentoDate, BentoDateFormat } from '@/components/date'; import { BentoLink } from '@/components/link'; import BentoStructuredList from './structured-list.vue'; import BentoStructuredListItem from './components/structered-list-item/structured-list-item.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import { BentoStructuredListLayoutOptions } from './structured-list.types'; import BentoStructuredListDefault from './__tests__/structured-list-default.vue?raw'; const meta: Meta = { title: 'Structured list', component: BentoStructuredList, argTypes: { layout: { options: Object.values(BentoStructuredListLayoutOptions), mapping: BentoStructuredListLayoutOptions, control: { type: 'select', }, }, default: { control: false, table: { type: { summary: 'BentoStructuredListItem[]' }, }, }, }, } as Meta; export default meta; type Story = StoryObj<typeof BentoStructuredList>; export const EverythingBagel: Story = { render: (_args, { argTypes }) => ({ components: { BentoStructuredList, BentoStructuredListItem, BentoPaymentMethod, BentoCurrency, BentoLink, BentoTypography, BentoDate, BentoStatus, BentoCountry, }, props: Object.keys(argTypes), template: ` <bento-structured-list v-bind="args"> <bento-structured-list-item label="Status"> <bento-status variant="green">Approved</bento-status> </bento-structured-list-item> <bento-structured-list-item label="Linked"> <bento-link to="router/path">This is a link</bento-link> </bento-structured-list-item> <bento-structured-list-item label="Amount"> <bento-currency currency="USD" :value="123456" /> </bento-structured-list-item> <bento-structured-list-item label="Funding source"> <bento-typography>Credit</bento-typography> </bento-structured-list-item> <bento-structured-list-item label="Date" label-info="Payment date"> <bento-date :date="new Date('2017-09-25')" :format="BentoDateFormat.SHORT_DATE" /> </bento-structured-list-item> <bento-structured-list-item label="Country/Region"> <bento-country :code="BentoCountryCode.NL" /> </bento-structured-list-item> <bento-structured-list-item label="PSP reference" copy="P1234DBE2435" @copy="copyAction"> <bento-typography>P1234DBE2435</bento-typography> </bento-structured-list-item> <bento-structured-list-item label="Payment method"> <bento-payment-method type="Klarna" label="Klarna" /> </bento-structured-list-item> <bento-structured-list-item label="Shopper" :search="search" search-tooltip="Search in payments list" > <bento-typography>143442642</bento-typography> </bento-structured-list-item> </bento-structured-list> `, setup(props) { const copyAction = value => action('copy')(value); return { BentoCurrencyISOCode, BentoDateFormat, BentoCountryCode, // eslint-disable-next-line @typescript-eslint/no-empty-function search: () => {}, copyAction, dateObject: new Date('2017-09-25'), args: isVue2 ? props : _args, }; }, }), args: { layout: '33-66' }, parameters: storybookDocsParameter(BentoStructuredListDefault), }; 

package/dist/assets/components/structured-list/structured-list.vue

@@ -0,0 +1 @@
+<template> <dl class="b-structured-list"> <slot /> </dl> </template> <script setup lang="ts"> import { computed, inject, provide } from 'vue'; import { STRUCTURED_LIST_CONDENSED_INJECTION_KEY, STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, } from '@/components/structured-list/structured-list.keys'; import { BentoStructuredListLayoutOptions } from './structured-list.types'; const props = withDefaults( defineProps<{ /** * Width of the labels container, in pixels. Overrides layout prop. */ labelsWidth?: number; /** * The layout of the label value pair in percentage. * If labelsWidth is set, layout will be overriden by the static pixel value. * * If the value entered is not listed in the example * list below '33-66' will be applied * @example * '25-75' * '33-66' * '42-58' * '50-50' * '75-25' * '66-33' * '58-42' */ layout?: BentoStructuredListLayoutOptions; }>(), { labelsWidth: null, layout: '33-66', } ); const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false); const computedLayout = computed(() => BentoStructuredListLayoutOptions.includes(props.layout) ? props.layout : '33-66' ); const computedLabelsWidth = computed(() => { if (isCondensed) { return '130px'; } if (props.labelsWidth) { return `${props.labelsWidth}px`; } return `${computedLayout.value.split('-')[0]}%`; }); provide(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, computedLabelsWidth); </script> <script lang="ts"> /** * This is a list used to display pairs of information in a clear and organized manner. * `BentoStructureListItem` should be used to pass the label/value pairs to the list. * * @example * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2'; * * export default { * components: { BentoStructuredList, BentoStructuredListItem }, * template: ` * <bento-structured-list> * <bento-structured-list-item label="Payment"> * <bento-payment-method label="Klarna" type="Klarna" /> * </bento-structured-list-item> * <bento-structured-list-item label="Amount"> * <bento-currency :currency="BentoCurrencyISOCode.USD" :value="123456" /> * </bento-structured-list-item> * </bento-structured-list> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./structured-list.scss" /> 

package/dist/assets/components/summary-grid/components/summary-grid-item/summary-grid-item.vue

@@ -0,0 +1 @@
+<template> <div class="b-summary-grid-item" :class="conditionalClasses" :style="computedStyles"> <div class="b-summary-grid-item__header"> <bento-typography class="b-summary-grid-item__title" el="span" variant="body"> <bento-dashed-underline v-if="withUnderline" :tooltip-text="underlineTooltipText" :popover-size="underlinePopoverSize" > {{ title }} <template v-if="hasSlot('dashed-underline')" #popover-content> <slot name="dashed-underline"></slot> </template> </bento-dashed-underline> <template v-else> {{ title }} </template> </bento-typography> <div class="b-summary-grid-item__title-icons"> <copy v-if="copy" class="b-structured-list__icon" :text="copy" @click="$emit('copy-click', $event)" /> <bento-info-icon v-if="infoIconTooltipText" :tooltip-text="infoIconTooltipText" tooltip-position="top" class="b-summary-grid-item__title-tooltip" @mouseenter="$emit('info-icon-mouseenter', $event)" /> </div> </div> <bento-typography data-testid="summary-grid-item-content-typography" class="b-summary-grid-item__title" v-bind="typographyProps" el="span" > <slot /> <bento-tag v-if="trend && itemType !== 'text'" :variant="trendVariant" :label="trend" class="b-summary-grid-item__content-trend" /> </bento-typography> <bento-typography v-if="hasSlot('secondary')" class="b-summary-grid-item__title" data-testid="summary-grid-item-secondary-metric-typography" el="span" variant="caption" stronger > <slot name="secondary" /> <bento-tag v-if="secondaryTrend" :variant="secondaryTrendVariant" :label="secondaryTrend" class="b-summary-grid-item__content-trend" /> </bento-typography> </div> </template> <script setup lang="ts"> import { computed, inject, ref, toRefs, useSlots } from 'vue'; // Components import { BentoDashedUnderline } from '@/components/dashed-underline'; import { BentoInfoIcon } from '@/components/info-icon'; import { BentoTypography, type BentoTypographyVariant } from '@/components/typography'; import { BentoTag, type BentoTagVariant } from '@/components/tag'; import { Copy } from '@/internal'; // Utils import { useHasSlot } from '@/composables'; // Types import { SUMMARY_GRID_SLASHED_ZERO } from '@/components/summary-grid/summary-grid.keys'; import type { BentoSummaryGridItemTrendDirection } from '@/components/summary-grid/summary-grid.types'; import type { BentoSummaryGridItemProps } from './summary-grid-item.types'; defineEmits<{ /** * Emitted when the copy button is clicked. */ (e: 'copy-click', event: MouseEvent): void; /** * Emitted when the mouse pointer enters the info icon component. */ (e: 'info-icon-mouseenter', event: MouseEvent): void; }>(); const props = withDefaults(defineProps<BentoSummaryGridItemProps>(), { copy: undefined, fitContent: false, infoIconTooltipText: null, itemType: 'custom', secondaryTrend: null, secondaryTrendDirection: 'positive', size: 'small', trend: null, trendDirection: 'positive', underlinePopoverSize: 'fit-content', underlineTooltipText: null, }); const { trendDirection, secondaryTrendDirection, itemType, size } = toRefs(props); const hasSlashedZero = inject(SUMMARY_GRID_SLASHED_ZERO, ref(false)); const tagVariantColor = (direction: `${BentoSummaryGridItemTrendDirection}`): `${BentoTagVariant}` => { switch (direction) { case 'positive': return 'green'; case 'negative': return 'red'; default: return 'blue'; } }; // TODO implement plus or minus symbol logic const trendVariant = computed(() => tagVariantColor(trendDirection.value)); const secondaryTrendVariant = computed(() => tagVariantColor(secondaryTrendDirection.value)); const typographyContentElement = computed<`${BentoTypographyVariant}`>(() => { if (size.value === 'small') { return 'body'; } if (itemType.value !== 'text') { return 'title'; } return null; }); const typographyProps = computed(() => ({ medium: size.value === 'large', strongest: size.value === 'small', wide: size.value === 'small', variant: typographyContentElement.value, })); const computedStyles = computed(() => (props.fitContent ? { width: 'fit-content' } : {})); const conditionalClasses = computed(() => ({ 'b-summary-grid-item--slashed-zero': hasSlashedZero.value })); const slots = useSlots(); const hasSlot = useHasSlot(slots); const withUnderline = computed(() => props.underlineTooltipText || hasSlot('dashed-underline')); </script> <script lang="ts"> /** * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component * * @example * import { SummaryBarItem } from '@adyen/bento-vue2'; * * export default { * components: { SummaryBarItem }, * template: ` * <summary-grid-item :title="textVariable"> * Content of the item * </summary-grid-item> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./summary-grid-item.scss" /> 

package/dist/assets/components/summary-grid/components/summary-grid-item-amount/summary-grid-item-amount.stories.ts

@@ -0,0 +1 @@
+import { type Meta, type StoryObj } from '@storybook/vue'; import BentoSummaryGridItemAmount from './summary-grid-item-amount.vue'; import { BentoSummaryGridItemSize, BentoSummaryGridItemTrendDirection } from '@/components/summary-grid'; import { isVue2 } from 'vue-demi'; import { action } from '@storybook/addon-actions'; const meta: Meta = { title: 'Summary Grid/Summary Grid Item/Summary Grid Item Amount', component: BentoSummaryGridItemAmount, argTypes: { size: { options: Object.values(BentoSummaryGridItemSize), mapping: BentoSummaryGridItemSize, control: { type: 'select', }, }, trendDirection: { options: Object.values(BentoSummaryGridItemTrendDirection), mapping: BentoSummaryGridItemTrendDirection, control: { type: 'select', }, }, secondaryTrendDirection: { options: Object.values(BentoSummaryGridItemTrendDirection), mapping: BentoSummaryGridItemTrendDirection, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoSummaryGridItemAmount>; const SUMMARY_BAR_ITEM_TITLE = 'Summary grid item amount'; const SUMMARY_BAR_ITEM_LABEL = '200.00 EUR'; const SUMMARY_BAR_ITEM_SECONDARY_LABEL = '/ day'; const SUMMARY_BAR_INFO_ICON_TOOLTIP = 'Text for icon tooltip'; const SUMMARY_BAR_ITEM_TREND = '+12%'; const SUMMARY_BAR_ITEM_SECONDARY_METRIC = '220.00 USD / day'; const SUMMARY_BAR_ITEM_SECONDARY_TREND = '+12%'; const SUMMARY_BAR_ITEM_DEFAULT_PROPS = { title: SUMMARY_BAR_ITEM_TITLE, label: SUMMARY_BAR_ITEM_LABEL, secondaryLabel: SUMMARY_BAR_ITEM_SECONDARY_LABEL, size: 'small', infoIconTooltipText: SUMMARY_BAR_INFO_ICON_TOOLTIP, copy: 'copy this', trend: SUMMARY_BAR_ITEM_TREND, }; const SUMMARY_BAR_ITEM_WITH_SECONDARY_METRIC_PROPS = { ...SUMMARY_BAR_ITEM_DEFAULT_PROPS, secondaryMetric: SUMMARY_BAR_ITEM_SECONDARY_METRIC, secondaryTrend: SUMMARY_BAR_ITEM_SECONDARY_TREND, secondaryTrendDirection: 'positive', }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoSummaryGridItemAmount }, props: Object.keys(argTypes), template: ` <bento-summary-grid-item-amount v-bind="args" @copy-click="copyClicked" @info-icon-mouseenter="infoIconMouseEnter" /> `, setup(props) { const copyClicked = (event: PointerEvent) => action('copy-click')(event); const infoIconMouseEnter = (event: PointerEvent) => action('info-icon-mouseenter')(event); return { args: isVue2 ? props : _args, copyClicked, infoIconMouseEnter, }; }, }), args: { ...SUMMARY_BAR_ITEM_DEFAULT_PROPS, }, }; export const WithSecondaryMetric: Story = { render: (_args, { argTypes }) => ({ components: { BentoSummaryGridItemAmount }, props: Object.keys(argTypes), template: `<bento-summary-grid-item-amount v-bind="args" />`, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { ...SUMMARY_BAR_ITEM_WITH_SECONDARY_METRIC_PROPS, }, }; 

package/dist/assets/components/summary-grid/components/summary-grid-item-amount/summary-grid-item-amount.vue

@@ -0,0 +1 @@
+<template> <summary-grid-item item-type="amount" :info-icon-tooltip-text="infoIconTooltipText" :title="title" :copy="copy" :fit-content="fitContent" :size="size" :trend="trend" :trend-direction="trendDirection" :secondary-trend="secondaryTrend" :secondary-trend-direction="secondaryTrendDirection" :underline-popover-size="underlinePopoverSize" :underline-tooltip-text="underlineTooltipText" class="b-summary-grid-item-amount" @copy-click="$emit('copy-click', $event)" @info-icon-mouseenter="$emit('info-icon-mouseenter', $event)" > <template v-if="hasSlot('dashed-underline')" #dashed-underline> <slot name="dashed-underline" /> </template> <div class="b-summary-grid-item-amount__content"> <div>{{ label }}</div> <bento-typography v-if="secondaryLabel" variant="caption" class="b-summary-grid-item-amount__secondary-label" >{{ secondaryLabel }}</bento-typography > </div> <template v-if="secondaryMetric" #secondary> {{ secondaryMetric }} </template> </summary-grid-item> </template> <script setup lang="ts"> import { useSlots } from 'vue'; import { BentoTypography } from '@/components/typography'; import { SummaryGridItem } from '../summary-grid-item'; import { useHasSlot } from '@/composables'; import type { BentoSummaryGridItemAmountProps } from './summary-grid-item-amount.types'; defineEmits<{ /** * Emitted when the copy button is clicked. */ (e: 'copy-click', event: MouseEvent): void; /** * Emitted when the mouse pointer enters the info icon component. */ (e: 'info-icon-mouseenter', event: MouseEvent): void; }>(); withDefaults(defineProps<BentoSummaryGridItemAmountProps>(), { copy: undefined, fitContent: false, infoIconTooltipText: null, secondaryLabel: null, secondaryMetric: null, secondaryTrend: null, secondaryTrendDirection: 'positive', size: 'small', trend: null, trendDirection: 'positive', underlinePopoverSize: 'fit-content', underlineTooltipText: null, }); const slots = useSlots(); const hasSlot = useHasSlot(slots); </script> <script lang="ts"> /** * Summary grid item component used to display financial data, such as currency values and monetary amounts * * @example * import { BentoSummaryGridItemAmount } from '@adyen/bento-vue2'; * * export default { * components: { BentoSummaryGridItemAmount }, * template: ` * <bento-summary-grid-item-amount * title="Your title" * label="200.00 EUR" * secondary-label="/ day" * info-icon-tooltip-text="Your tooltip text here will be toggled by the info icon" * trend="+12%" * trend-direction="neutral" * size="medium" * /> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./summary-grid-item-amount.scss" />