@adyen/bento-mcp 0.0.0 → 0.1.0

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

@@ -0,0 +1 @@
+<template> <div class="b-loading-indicator" :class="conditionalClasses" aria-hidden="true" data-testid="loading-indicator" /> </template> <script setup lang="ts"> import { computed, onMounted, onUnmounted } from 'vue'; import { BentoLoadingIndicatorEvent, type BentoLoadingIndicatorProps } from './loading-indicator.types'; const props = withDefaults(defineProps<BentoLoadingIndicatorProps>(), { small: false, large: false, inverse: false, }); const emit = defineEmits<{ (e: BentoLoadingIndicatorEvent.START): void; (e: BentoLoadingIndicatorEvent.END): void; }>(); onMounted(() => emit(BentoLoadingIndicatorEvent.START)); onUnmounted(() => emit(BentoLoadingIndicatorEvent.END)); const conditionalClasses = computed(() => ({ 'b-loading-indicator--inverse': props.inverse, 'b-loading-indicator--small': props.small, 'b-loading-indicator--large': props.large, })); </script> <script lang="ts"> /** * A loading indicator component that displays a spinning animation. * * @usage * import { BentoLoadingIndicator } from '@adyen/bento-vue2'; * * export default { * components: { BentoLoadingIndicator }, * template: ` * <bento-loading-indicator :small="true" /> * ` * }; */ export default { name: 'bento-loading-indicator', }; </script> <style lang="scss" scoped src="./loading-indicator.scss" /> 

package/dist/assets/components/menu/components/menu-item/menu-item.vue

@@ -0,0 +1 @@
+<template> <base-button class="b-menu-item" role="menuitem" :class="conditionalClasses" :disabled="disabled" tabindex="-1" @click="onClick" > <template v-if="icon" #iconLeft> <component :is="icon" class="b-menu-item__icon-left" aria-hidden="true" /> </template> <template #default> <bento-typography el="span" variant="body" :stronger="isTitle" class="b-menu-item__primary-text"> {{ text }} </bento-typography> <bento-typography v-if="computedSecondaryText" el="span" variant="body" class="b-menu-item__secondary-text"> {{ computedSecondaryText }} </bento-typography> </template> <template v-if="chevron" #iconRight><chevron-right-icon aria-hidden="true" /></template> </base-button> </template> <script lang="ts"> import { BaseButton, BentoBaseButtonEvent } from '@/components/internal/base-button'; import { BentoTypography } from '@/components/typography'; import { truncate } from '@/utils/ts/truncate'; import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right'; import { computed, defineComponent, type PropType } from 'vue'; import { type BentoMenuItem } from './menu-item.types'; /** * Menu item component to render items in a menu. For internal use only. */ export default defineComponent({ name: 'menu-item', components: { BaseButton, BentoTypography, ChevronRightIcon }, props: { /** * menu-item text that gets displayed as the main label */ text: { type: String, required: true, }, /** * menu-item action that gets executed when the MeniItem is clicked */ handler: { type: Function as PropType<BentoMenuItem['handler']>, required: true, }, /** * menu-item text that gets displayed as the secondary label */ secondaryText: { type: String, default: null, }, /** * Optional chevron icon displayed to the right of the menu-item */ chevron: { type: Boolean, default: false, }, /** * Optional icon displayed to the left of the menu-item */ icon: { // Types for Vue2 (Object) and Vue3 (Function) // TODO: Remove Object when fully migrated to Vue3 type: [Object, Function] as PropType<BentoMenuItem['icon']>, default: null, }, /** * Disables menu-item button functionality */ disabled: { type: Boolean, default: false, }, /** * Displays an indent variant od the menu-item */ indent: { type: Boolean, default: false, }, /** * Displays menu-item button as critical */ critical: { type: Boolean, default: false, }, /** * Renders the text in a bold variant */ isTitle: { type: Boolean, default: false, }, }, emits: [BentoBaseButtonEvent.CLICK], setup(props, { emit }) { const MAX_SECONDARY_TEXT_LENGTH = 10; const conditionalClasses = computed(() => ({ 'b-menu-item--critical': props.critical, 'b-menu-item--indent': props.indent, })); const computedSecondaryText = computed(() => truncate(props.secondaryText, MAX_SECONDARY_TEXT_LENGTH)); const onClick = (e: MouseEvent) => { e.stopPropagation(); props.handler(); emit(BentoBaseButtonEvent.CLICK); }; return { // Values conditionalClasses, computedSecondaryText, // Methods onClick, }; }, }); </script> <style lang="scss" scoped src="./menu-item.scss" /> 

package/dist/assets/components/menu/components/menu-item-list/menu-item-list.vue

@@ -0,0 +1 @@
+<template> <menu-list-container ref="menuItemListWrapperRef" :style="computedStyle"> <ul ref="menuItemListRef" class="b-menu-item-list" role="menu" @keydown.down="focusNext" @keydown.up="focusPrevious" @keydown.esc="closeMenu" @keydown.tab="closeMenu" > <li v-for="(item, index) in computedData" :key="`menu-item-${index}`" ref="menuItemRef" class="b-menu-item-list__item" role="none" @keydown.right="focusRight(item, index)" @keydown.left="focusLeft()" > <menu-item :text="item.text" :handler="!item.items?.length ? item.handler : () => null" :secondary-text="item.secondaryText" :icon="item.icon" :chevron="!!item.items?.length" :disabled="item.disabled" :critical="item.critical" :indent="item.indent" :tabindex="index === subMenuFocusedIndex ? '0' : '-1'" :aria-haspopup="!!item.items?.length" :aria-expanded="showSubMenu && visibleSubMenuIndex === index" @click="menuItemClick(item, index)" /> <bento-divider v-if="item.addDivider" class="b-menu-item-list__divider" /> <sub-menu-item-list v-if="item.items?.length && showSubMenu && visibleSubMenuIndex === index" ref="subMenuItemListRef" :items="item.items" :title="item.text" @back="onBackButton" @close="closeMenu" /> </li> </ul> </menu-list-container> </template> <script lang="ts"> import { computed, defineComponent, nextTick, type PropType, ref, toRef } from 'vue'; import { isVue3 } from 'vue-demi'; import { BentoDivider } from '@/components/divider'; import { type BentoMenuItem, MenuItem } from '../menu-item'; import { BentoMenuEvent } from '../../menu.types'; import MenuListContainer from '../menu-list-container/menu-list-container.vue'; import SubMenuItemList from '../sub-menu-item-list/sub-menu-item-list.vue'; import { useDynamicMenuSize } from '../../composables'; /** * MenuItem list to be used in the Menu component. For internal use only. */ export default defineComponent({ name: 'menu-item-list', components: { BentoDivider, MenuItem, MenuListContainer, SubMenuItemList }, props: { /** * The data to be displayed in the list */ data: { type: Array as PropType<Array<BentoMenuItem>>, required: true, }, /** * Displays the menu-items of the list in the indent variant. Only applies to elements that don't have an icon to their left. */ indentItems: { type: Boolean, default: false, }, /** * If set to true, focuses the last item on the list instead of the first. Used for accessibility purposes when the menu is opened with the 'up' arrow key. */ focusLastElement: { type: Boolean, default: false, }, /** * If set to true, closes the menu when an item is clicked. */ closeMenuOnItemSelect: { type: Boolean, default: true, }, /** * The custom popover width if one has been set */ popoverWidth: { type: Number, default: null, }, }, emits: [BentoMenuEvent.CLOSE, 'menu-item-click'], setup(props, { emit, expose }) { const menuItemRef = ref(null); const menuItemListRef = ref(null); const menuItemListWrapperRef = ref(null); const subMenuItemListRef = ref(null); const showSubMenu = ref(false); const visibleSubMenuIndex = ref(null); const focusedIndex = ref(props.focusLastElement ? props.data.length - 1 : 0); const subMenuFocusedIndex = ref(0); const numberOfItems = ref(props.data.length - 1); const hasMenuItemsWithIcon = computed(() => props.data.some(el => el.icon)); const computedData = computed(() => { if (props.indentItems || hasMenuItemsWithIcon.value) { return props.data.map(el => { let indent = false; if (!el.icon) { indent = true; } return { ...el, indent, }; }); } return props.data; }); const focusItem = async () => { // vue 3 requires nextTick to be called before an item can be focused // this function does not need to be awaited itself if (isVue3) { await nextTick(); } menuItemListRef.value?.children[focusedIndex.value]?.children[0]?.focus(); }; const closeMenu = () => emit(BentoMenuEvent.CLOSE); const menuItemClick = (item: BentoMenuItem, index: number) => { if (item.items) { visibleSubMenuIndex.value = index; showSubMenu.value = true; return; } visibleSubMenuIndex.value = index; showSubMenu.value = false; if (!item.skipClose && props.closeMenuOnItemSelect !== false) { closeMenu(); } emit('menu-item-click'); }; const focusPrevious = () => { if (focusedIndex.value > 0) { focusedIndex.value -= 1; if (computedData.value[focusedIndex.value].disabled) { focusPrevious(); } } else { focusedIndex.value = numberOfItems.value; } focusItem(); }; const focusNext = () => { if (focusedIndex.value < numberOfItems.value) { focusedIndex.value += 1; if (computedData.value[focusedIndex.value].disabled) { focusNext(); } } else { focusedIndex.value = 0; } focusItem(); }; const focusRight = (item, index) => { if (item?.items?.length) { visibleSubMenuIndex.value = index; showSubMenu.value = true; } }; const focusLeft = () => { if (visibleSubMenuIndex.value && showSubMenu.value) { visibleSubMenuIndex.value = null; showSubMenu.value = false; } }; const onBackButton = () => { showSubMenu.value = false; visibleSubMenuIndex.value = null; // Focus the right element focusItem(); }; expose({ focusItem, }); const { computedStyle } = useDynamicMenuSize( subMenuItemListRef, visibleSubMenuIndex, showSubMenu, toRef(props, 'popoverWidth') ); return { // Values menuItemListRef, menuItemListWrapperRef, subMenuItemListRef, menuItemRef, computedData, computedStyle, focusedIndex, subMenuFocusedIndex, showSubMenu, visibleSubMenuIndex, // Methods menuItemClick, closeMenu, focusPrevious, focusNext, focusRight, focusLeft, onBackButton, }; }, }); </script> <style lang="scss" scoped src="./menu-item-list.scss" /> 

package/dist/assets/components/menu/components/menu-list-container/menu-list-container.vue

@@ -0,0 +1 @@
+<template> <div ref="menuListContainerRef" class="b-menu-list-container" data-testid="menu-list-container" v-on="menuListContainerEvents" ><slot></slot ></div> </template> <script setup lang="ts"> import { DATA_GRID_CELL_MENU_REGISTERING_INJECTION_KEY } from '@/components/data-grid/components/data-grid-cell/data-grid-cell.keys'; import { inject, type Ref, ref, type UnwrapRef } from 'vue'; const menuListContainerRef = ref<HTMLDivElement>(); const menuListContainerEvents = ref({}); const registeringAndMousingOut = inject< | { registerMenuContainerElement: (menuContainerElement: Ref<UnwrapRef<HTMLDivElement>>) => void; menuMouseLeave: (e: MouseEvent) => void; } | false >(DATA_GRID_CELL_MENU_REGISTERING_INJECTION_KEY, false); // This is needed by the DataGridCell component in order to keep track of if a teleported menu // is being hovered over in the DataGridCellActions. if (registeringAndMousingOut) { const { registerMenuContainerElement } = registeringAndMousingOut; registerMenuContainerElement(menuListContainerRef); menuListContainerEvents.value = { mouseleave: registeringAndMousingOut?.menuMouseLeave, }; } </script> <script lang="ts"> /** * Menu list container component to set the correct styling in a menu list. For internal use only. */ export default { name: 'bento-menu-list-container', }; </script> <style lang="scss" scoped src="./menu-list-container.scss" /> 

package/dist/assets/components/menu/components/sub-menu-item-list/sub-menu-item-list.vue

@@ -0,0 +1 @@
+<template> <transition name="b-sub-menu-item-list__transition" appear> <menu-list-container class="b-sub-menu-item-list"> <ul ref="subMenuItemListRefLocal" role="menu" class="b-sub-menu-item-list__list" @keydown.down.stop="focusNext" @keydown.up.stop="focusPrevious" @keydown.esc.stop="onBackButton" > <li v-for="(item, index) in computedItems" :key="`sub-menu-item-list-item-${index}`" role="none"> <menu-item :text="item.text" :handler="item.handler" :secondary-text="item.secondaryText" :icon="item.icon" :is-title="item.isTitle" :disabled="item.disabled" :critical="item.critical" :indent="item.indent" :tabindex="index === subMenuFocusedIndex ? '0' : '-1'" @click="item.clickHandler" /> <bento-divider v-if="item.addDivider" class="b-sub-menu-item-list__divider" /> </li> </ul> </menu-list-container> </transition> </template> <script lang="ts"> import { computed, defineComponent, onMounted, type PropType, ref } from 'vue'; import { BentoDivider } from '@/components/divider'; import { type BentoMenuItem, MenuItem } from '../menu-item'; import MenuListContainer from '../menu-list-container/menu-list-container.vue'; import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left'; import { BentoMenuEvent } from '../../menu.types'; import messages from '../../messages.json'; /** * SubMenuItemList component to render a submenu with the sliding transition. For internal use only. */ export default defineComponent({ i18n: { messages }, name: 'sub-menu-item-list', components: { BentoDivider, MenuItem, MenuListContainer }, props: { items: { type: Array as PropType<Array<BentoMenuItem>>, required: true, }, title: { type: String, required: true, }, }, emits: [BentoMenuEvent.CLOSE, BentoMenuEvent.BACK], setup(props, { emit }) { const subMenuItemListRefLocal = ref(null); const subMenuFocusedIndex = ref(0); const numberOfItems = ref(props.items.length); const closeMenu = () => emit(BentoMenuEvent.CLOSE); const onBackButton = () => emit(BentoMenuEvent.BACK); const computedItems = computed(() => { const items = props.items?.map(el => ({ ...el, indent: !el.icon, isTitle: false, clickHandler: closeMenu, })); return [ { text: props.title, secondaryText: null, critical: false, icon: ChevronLeftIcon, isTitle: true, disabled: false, indent: false, handler: onBackButton, clickHandler: onBackButton, addDivider: true, }, ...items, ]; }); const focusItem = async () => { subMenuItemListRefLocal.value?.children?.[subMenuFocusedIndex.value]?.children?.[0]?.focus(); }; onMounted(async () => { // Using setTimeout otherwise the sliding animation doesn't work anymore. The timeout imer is the same as the transition time (0.15s) setTimeout(() => focusItem(), 150); }); const focusPrevious = () => { if (subMenuFocusedIndex.value > 0) { subMenuFocusedIndex.value -= 1; if (computedItems.value[subMenuFocusedIndex.value].disabled) { focusPrevious(); } } else { subMenuFocusedIndex.value = numberOfItems.value; } focusItem(); }; const focusNext = () => { if (subMenuFocusedIndex.value < numberOfItems.value) { subMenuFocusedIndex.value += 1; if (computedItems.value[subMenuFocusedIndex.value].disabled) { focusNext(); } } else { subMenuFocusedIndex.value = 0; } focusItem(); }; return { // Enums BentoMenuEvent, // Values subMenuItemListRefLocal, subMenuFocusedIndex, ChevronLeftIcon, computedItems, // Methods closeMenu, onBackButton, focusPrevious, focusNext, }; }, }); </script> <style lang="scss" scoped src="./sub-menu-item-list.scss" /> 

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

@@ -0,0 +1,121 @@
+import { Canvas, Story, Meta } from '@storybook/blocks';
+import * as MenuStories from './menu.stories';
+
+# Menu
+
+Menu is a floating container displaying a list of actions. It's usually triggered by a menu/more options button.
+
+<Canvas of={MenuStories.Default} />
+
+## Use Cases
+
+Use a menu when you need to display a lot of actions and there is a space constraint. Make sure the trigger is clear and
+user expects the menu to appear.
+
+## Variations
+
+### Button variant
+
+By default, the `bento-menu` renders with a secondary button as a trigger. However, some of the props present in
+`bento-button` - such as `condensed`, `disabled` and `variant` can also be passed to `bento-menu` to customize the
+styling of the menu button trigger.
+
+### Button icon
+
+The `bento-menu` component offers two distinct icon configurations.
+
+- **Icon-Only:** To use this variant, provide an icon directly to the `iconLeft` slot and **omit the default slot**.
+
+- **Menu with Text:** This variant is automatically activated when you provide content to the **default slot**. For this
+  configuration, only the `iconLeft` slot is configurable; the icon on the right is a fixed part of the component's
+  behavior and cannot be changed.
+
+By default the `bento-menu` uses an `options vertical` icon in the button trigger.
+
+<Canvas of={MenuStories.WithIconAndText} />
+
+### Button text
+
+To set the button text use the default slot.
+
+### Menu Item Variations
+
+Menu is built of flexible item components, each allowing a selection of presets to cover all kinds of cases.
+
+#### Icon
+
+Renders a `menu-item` with any icon from the 16x16px Bento icon set. The icon needs to be imported and passed in the
+`MenuItem` prop object.
+
+#### Secondary text
+
+The item also has an optional secondary text. This renders to the right of the primary text in a lighter hue. To enable
+this variation, set the `secondaryText` field in the corresponding `menu-item` object in the data array.
+
+#### Chevron
+
+Renders a chevron to the right of the `menu-item` for multi-level menus. To enable this variation, set the `chevron`
+field to `true` in the corresponding `menu-item` object in the data array.
+
+#### Divider
+
+Renders a divider after the `menu-item` to separate it from other content. To enable this, set `addDivider` to `true` in
+the corresponding `menu-item` object in the data array.
+
+## Modifiers
+
+### Menu Item
+
+#### Critical
+
+There is a critical styling available for each `menu-item`. This renders the item with a critical styling and should be
+used for destructive actions. To enable this variation, set the `critical` field to `true` in the corresponding
+`menu-item` object in the data array.
+
+## Events
+
+- `BentoMenuEvent.OPEN` is emitted when the menu opens
+- `BentoMenuEvent.CLOSE` is emitted when the menu closes
+
+## Accessibility
+
+The `bento-menu` component is accessible and follows the WCAG 2.0 standard.
+
+### Keyboard interaction
+
+The `bento-menu` component is reachable through keyboard navigation. When closed, the button menu is placed in the
+normal page flow and will thus be accessible just by tabbing. The table below lists all the keyboard interactions the
+menu supports.
+
+`Menu button`
+
+| Keyboard interaction           | Output                                                                                       |
+| ------------------------------ | -------------------------------------------------------------------------------------------- |
+| `Tab`                          | Moves focus to the menu button or away from it.                                              |
+| `Down arrow`, `Space`, `Enter` | When focus is on the menu button, it opens the menu and moves focus to the first `menuitem`. |
+| `Up Arrow`                     | When focus is on the menu button, it opens menu and movesmfocus to last `menuitem`.          |
+
+`Menu`
+
+| Keyboard interaction | Output                                                                                                        |
+| -------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `Enter`, `Space`     | When focus is on a `menuitem`, activates said item and closes the menu.                                       |
+| `Escape`             | Closes the menu.                                                                                              |
+| `Down Arrow`         | Moves focus to the next menu item. If focus is on the last menu item, moves focus to the first menu item.     |
+| `Up Arrow`           | Moves focus to the previous menu item. If focus is on the first menu item, moves focus to the last menu item. |
+
+### Roles, states and properties
+
+| ARIA attribute    | is automatic?                                                         | fallback used | manual override |
+| ----------------- | --------------------------------------------------------------------- | ------------- | --------------- |
+| `role="menu"`     | Yes, placed on the actions list representing the menu.                | -             | -               |
+| `role="menuitem"` | Yes, placed on each action item.                                      | -             | -               |
+| `aria-haspopup`   | Yes, automatically set to `true` on the menu button                   | -             | -               |
+| `aria-expanded`   | Yes, set to `true` whenever the menu is open and to `false` otherwise | -             | -               |
+| `aria-controls`   | Yes, automatically set on the button to point at the menu's popover   | -             | -               |
+
+## Resources
+
+- [Figma link](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?m=auto&node-id=25200-2406)
+- [WCAG Menu Pattern Guidelines](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)
+- [WCAG Menu Button Pattern Guidelines](https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/)

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

@@ -0,0 +1 @@
+import { storybookDocsParameter } from '@/utils/ts/storybook'; import { action } from '@storybook/addon-actions'; import { isVue2, ref } from 'vue-demi'; import BentoMenu from './menu.vue'; import CodeIcon from '@adyen/ui-assets-icons-16/vue/code-2'; import PeopleIcon from '@adyen/ui-assets-icons-16/vue/4-people'; import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down'; import PlusIcon from '@adyen/ui-assets-icons-16/vue/plus'; import { BentoMenuEvent } from './menu.types'; import { type Meta, type StoryObj } from '@storybook/vue'; const MENU_DATA = [ { text: 'Menu entry', secondaryText: 'Text', handler: () => { // Your code here action('click')('Menu 1'); }, critical: true, icon: CodeIcon, }, { text: 'Menu entry 2 extra long text', secondaryText: 'Disabled', handler: () => { // Your code here action('click')('Menu 2'); }, disabled: true, addDivider: true, }, { text: 'Menu entry 3', handler: () => { // Your code here action('click')('Menu 3'); }, icon: PeopleIcon, items: [ { text: 'Submenu entry', secondaryText: 'Subtext', handler: () => { // Your code here action('click')('Submenu 1'); }, }, { text: 'Submenu entry 2', handler: () => { // Your code here action('click')('Submenu 2'); }, }, ], }, { text: 'Menu entry 4', secondaryText: 'Text', handler: () => { // Your code here action('click')('Menu 4'); }, }, ]; const meta: Meta = { title: 'Menu', component: BentoMenu, argTypes: { 'menu-item-click': { name: 'menu-item-click', defaultValue: '', description: 'When a menu item that has no submenu is clicked', table: { type: { summary: '($event) => void' }, }, control: { disable: true }, }, }, }; export default meta; const defaultCode = ` <template> <bento-menu :data="menuData" /> </template> <script setup lang="ts"> import CodeIcon from '@adyen/ui-assets-icons-16/vue/code-2'; import PeopleIcon from '@adyen/ui-assets-icons-16/vue/4-people'; const menuData = [ { text: 'Menu entry', secondaryText: 'Text', handler: () => { // Your code here }, critical: true, icon: CodeIcon, }, { text: 'Menu entry 2 extra long text', secondaryText: 'Disabled entry', handler: () => { // Your code here }, disabled: true, }, { text: 'Menu entry 3', handler: () => { // Your code here }, icon: PeopleIcon, }, ]; </script> `; export const Default = { render: (_args, { argTypes }) => ({ components: { BentoMenu }, props: Object.keys(argTypes), template: ` <bento-menu v-bind="args" @open="open" @close="close" /> `, setup(props) { return { args: isVue2 ? props : _args, [BentoMenuEvent.OPEN]: action(BentoMenuEvent.OPEN), [BentoMenuEvent.CLOSE]: action(BentoMenuEvent.CLOSE), }; }, }), args: { data: MENU_DATA, button: { variant: 'secondary', }, }, parameters: storybookDocsParameter(defaultCode), }; const withIconAndTextCode = ` <template> <bento-menu :data="menuData"> <template #iconLeft> <plus-icon /> </template> Open menu </bento-menu> </template> <script setup lang="ts"> import CodeIcon from '@adyen/ui-assets-icons-16/vue/code-2'; import PeopleIcon from '@adyen/ui-assets-icons-16/vue/4-people'; import PlusIcon from '@adyen/ui-assets-icons-16/vue/plus'; const menuData = [ { text: 'Menu entry', secondaryText: 'Text', handler: () => { // Your code here console.log('Menu entry 1 clicked'); }, critical: true, icon: CodeIcon, }, { text: 'Menu entry 2 extra long text', secondaryText: 'Disabled entry', handler: () => { // Your code here }, disabled: true, }, { text: 'Menu entry 3', handler: () => { // Your code here console.log('Menu entry 3 clicked'); }, icon: PeopleIcon, }, ]; </script> `; export const WithIconAndText: StoryObj = { ...Default, render: (_args, { argTypes }) => ({ components: { BentoMenu, CodeIcon, PlusIcon, ChevronDownIcon }, props: Object.keys(argTypes), template: ` <bento-menu v-bind="args" @open="open" @close="close"> <template #iconLeft> <plus-icon /> </template> Open menu </bento-menu> `, setup(props) { const isOpen = ref(false); const toggleMenuOpenText = () => { isOpen.value = !isOpen.value; }; return { // Values args: isVue2 ? props : _args, isOpen, // Methods [BentoMenuEvent.OPEN]: () => { toggleMenuOpenText(); action(BentoMenuEvent.OPEN)(); }, [BentoMenuEvent.CLOSE]: () => { toggleMenuOpenText(); action(BentoMenuEvent.CLOSE)(); }, }; }, }), parameters: storybookDocsParameter(withIconAndTextCode), }; 

package/dist/assets/components/menu/menu.vue

@@ -0,0 +1 @@
+<template> <div :class="computedClasses" class="b-menu" data-testid="menu" @keydown.down="onKeyDown" @keydown.up="onKeyUp" @keydown.esc="closeMenu()" > <bento-toggle-button ref="menuButtonRef" class="b-menu__toggle-button" aria-haspopup="true" v-bind="computedButtonPropsWithDefaults" :aria-controls="showMenu ? menuId : null" :toggled="showMenu" :inverse="isInverseColorSet" @click="toggleShowMenu" > <template v-if="!hasSlot('default') || hasSlot('iconLeft')" #iconLeft> <slot name="iconLeft"> <options-vertical-icon :title="t('menuButton')" /> </slot> </template> <template v-if="hasSlot('default')" #default> <slot /> </template> <template v-if="hasSlot('default')" #iconRight> <chevron-down-icon /> </template> </bento-toggle-button> <bento-teleport v-if="menuButtonRef" :disabled="!teleport"> <bento-popover v-if="menuButtonRef" :id="menuId" ref="popoverRef" :role="null" :open="showMenu" class="b-menu__popover" :style="computedMenuWidth" :target-element="menuButtonRef" :position="menuPosition" :fixed-positioning="menuFixedPositioning" :fallback-position="[ 'bottom-start', 'bottom-end', 'top-start', 'top-end', 'right-start', 'right-end', 'left-start', 'left-end', ]" :teleport="teleport" without-space > <menu-item-list ref="menuItemListRef" :close-menu-on-item-select="closeMenuOnItemSelect" :data="data" :focus-last-element="isLastElementFocused" :popover-width="menuWidth" @close="closeMenu" @menu-item-click="menuItemClick" /> </bento-popover> </bento-teleport> </div> </template> <script setup lang="ts"> import BentoToggleButton from '@/components/button/components/toggle-button/toggle-button.vue'; import { DIVIDER_INVERSE_INJECTION_KEY } from '@/components/divider/divider.keys'; import BentoPopover from '@/components/popover/popover.vue'; import { useClickOutside, useHasSlot } from '@/composables'; import { generateUid } from '@/core/utils/ts'; import { BentoTeleport } from '@/internal/teleport'; import { useI18n } from '@/utils/ts/i18n'; import { printDevelopmentWarning } from '@/utils/ts/print-development-warning'; import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down'; import OptionsVerticalIcon from '@adyen/ui-assets-icons-16/vue/options-vertical'; import { computed, inject, nextTick, onMounted, provide, ref, useSlots } from 'vue'; import MenuItemList from './components/menu-item-list/menu-item-list.vue'; import { MENU_INVERSE_INJECTION_KEY } from './menu.keys'; import { clampMenuWidth } from './composables/use-dynamic-menu-size/use-dynamic-menu-size'; import { type BentoMenuButtonProps, BentoMenuEvent, type BentoMenuProps } from './menu.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<BentoMenuProps>(), { button: () => ({ variant: 'secondary', }) as BentoMenuButtonProps, closeMenuOnItemSelect: true, disableArrowDownOpeningMenu: false, menuPosition: 'bottom-start', menuFixedPositioning: false, menuWidth: null, revertFocusToButton: true, teleport: false, closeOnClickOutsideOptions: undefined, }); const emit = defineEmits<{ (e: BentoMenuEvent.CLOSE): void; (e: BentoMenuEvent.OPEN): void; (e: 'menu-item-click'): void; (e: 'click-outside'): void; }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const menuButtonRef = ref(null); const menuItemListRef = ref(null); const showMenu = ref(false); const isLastElementFocused = ref(false); const popoverRef = ref<HTMLElement>(null); const menuId = generateUid('menu'); const isInverseColorSet = inject(MENU_INVERSE_INJECTION_KEY, ref(false)); provide(DIVIDER_INVERSE_INJECTION_KEY, isInverseColorSet); const computedClasses = computed(() => ({ 'b-menu--inverse': isInverseColorSet.value, })); const computedMenuWidth = computed(() => props.menuWidth ? { width: `${clampMenuWidth(props.menuWidth)}px` } : null ); const computedButtonPropsWithDefaults = computed<BentoMenuButtonProps>(() => { if (!props?.button) { return undefined; } return { variant: 'secondary', ...props.button, }; }); const openMenu = () => { showMenu.value = true; emit(BentoMenuEvent.OPEN); }; const closeMenu = async (revertFocus = props.revertFocusToButton) => { if (!showMenu.value) { return; } showMenu.value = false; if (revertFocus) { // ensure that menu is closed and re-rendering is completed before focusing await nextTick(); menuButtonRef.value?.$el?.focus(); } emit(BentoMenuEvent.CLOSE); }; const toggleShowMenu = (e: MouseEvent) => { e.stopPropagation(); if (!showMenu.value) { openMenu(); } else { closeMenu(); } }; const onKeyDown = (event: KeyboardEvent) => { event.preventDefault(); isLastElementFocused.value = false; if (!props.disableArrowDownOpeningMenu) { openMenu(); } }; const onKeyUp = (event: KeyboardEvent) => { event.preventDefault(); isLastElementFocused.value = true; openMenu(); }; const menuItemClick = () => { emit('menu-item-click'); }; // Ignore the events inside the Button and the Popover useClickOutside( popoverRef, () => { closeMenu(); emit('click-outside'); }, { ...props.closeOnClickOutsideOptions, ignore: [menuButtonRef, ...(props.closeOnClickOutsideOptions?.ignore ?? [])], } ); defineExpose({ /** * Control to enable programmatic closing of the menu */ closeMenu, }); onMounted(() => { if (hasSlot('iconRight')) { printDevelopmentWarning( '"bento-menu" no longer supports the "iconRight" slot. The right-aligned icon is now fixed by design.' ); } }); </script> <script lang="ts"> /** * Menu component to render a series of buttons. Csan render nested submenus. * * @example * import { BentoMenu } from '@adyen/bento-vue2'; * * export default { * components: { BentoMenu }, * template: ` * <bento-menu * :data=[ * { text: 'Menu item text', handler: () => { some code here } }, * { text: 'Another menu item text', handler: () => { some other code here }, critical: true } * ] * /> * } */ export default { i18n: { messages }, name: 'bento-menu', }; </script> <style lang="scss" scoped src="./menu.scss" /> 

package/dist/assets/components/modal/components/base-modal/base-modal.vue

@@ -0,0 +1 @@
+<template> <div class="b-modal-base"> <dialog ref="modal" :role="modalRole" :aria-label="computedAriaLabel" :style="{ height: height }" class="b-modal-base__container" :class="modalConditionalClasses" :open="initiallyOpen" @animationend="closeModalAfterAnimation" @keydown.esc="internalModalActionClose" > <bento-focus-trap v-if="isOpen || initiallyOpen" :id="modalId" v-bento-click-outside-directive="closeModalOnClickOutside" > <bento-button v-if="showCloseButton" class="b-modal-base__close-button" variant="tertiary" type="button" :style="customPaddingStyles" @click="internalModalActionClose" > <cross-icon :svg-title="t('close')" /> </bento-button> <template v-if="props.activePage"> <slot /> </template> <bento-modal-page v-else :with-column-layout="withColumnLayout" :size="size" :custom-padding="customPadding" :columns-size="columnsSize" > <template v-if="hasSlot('default')" #default> <slot></slot> </template> <template v-if="hasSlot('content-col-1')" #content-col-1 ><slot name="content-col-1"></slot ></template> <template v-if="hasSlot('content-col-2')" #content-col-2 ><slot name="content-col-2"></slot ></template> <template v-if="hasSlot('content')" #content><slot name="content"></slot></template> <template v-if="hasSlot('actions')" #actions><slot name="actions"></slot></template> </bento-modal-page> </bento-focus-trap> </dialog> </div> </template> <script setup lang="ts"> import { computed, defineComponent, onMounted, type PropType, provide, ref, toRefs, useAttrs, useSlots, watch, } from 'vue'; import { BentoModalColumnLayoutVariant, type BentoModalConfigData, BentoModalRole, BentoModalSize, } from '@/components/modal/modal.types'; import { BentoButton, type BentoButtonActionsList } from '@/components/button'; import { BentoFocusTrap } from '@/components/focus-trap'; import { useHasSlot } from '@/composables'; import { useI18n } from '@/utils/ts/i18n'; import { MODAL_DIALOG_ID_INJECTION_KEY } from '@/components/modal/components/base-modal/base-modal.keys'; import { generateUid } from '@/core/utils/ts'; import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside'; import messages from './messages.json'; import { BentoModalPage } from '@/components/modal/components/modal-page'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys'; import { BentoDialogPageAnimation, type BentoDialogPageConfigData, type BentoDialogPageRegisterPage, DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, } from '@/internal'; type MessageSchema = (typeof messages)['en-US']; const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const slots = useSlots(); const attrs = useAttrs(); const hasSlot = useHasSlot(slots); const modal = ref<HTMLDialogElement>(null); const isClosing = ref(false); const modalId = generateUid('modal'); const emit = defineEmits<{ /** * Emits update event when page is changed internally */ (e: 'update:active-page', page: string): void; /** * Emitted when the modal is closed. */ (e: 'close-modal'); }>(); const props = 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". * But you may change the color of 1-st action to red with 'critial' key * Not more than 3 action buttons can be provided * Or 2 action buttons and 1 Label for them * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * `title`: Button's text. * * `event`: Event triggered when clicking the Button. * * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`. * * ``` * [{ * title: 'Primary',2 * event: () => { ... }, * icon: FourPeopleIcon * }, { * title: 'Secondary', * event: () => { ... } * }] * ``` */ actions: { type: Array as PropType<BentoButtonActionsList>, default: null, }, /** * The id of the current active page * Should be the same id as the BentoModalPage to be displayed */ activePage: { type: String, default: null, }, /** * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column. */ columnsSize: { type: String as PropType<BentoModalColumnLayoutVariant>, default: BentoModalColumnLayoutVariant.SMALLER, }, /** * If provided, manages the padding of the whole modal container */ customPadding: { type: String, default: null }, /** * If passed - sets first button color to red */ destructiveActions: { type: Boolean, default: false }, /** * Hides a cross icon on the right side of the title */ hideCloseButton: { type: Boolean, required: true }, /** * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility. */ initiallyOpen: { type: Boolean, default: false }, /** * If set to true, it allows the modal to be closed by clicking outside of it */ isDismissible: { type: Boolean, required: true }, /** * Controls the modal's state from the outside. Set it to true to open the modal */ isOpen: { type: Boolean, required: true }, /** * Defines whether the modal will be an alert modal */ modalRole: { type: String, default: BentoModalRole.DIALOG }, /** * Sets the width of the modal */ size: { type: String as PropType<BentoModalSize | `${BentoModalSize}`>, default: BentoModalSize.SMALL, }, /** * If provided, renders the modal's content in a two-column layout an wth dividers separating its content */ withColumnLayout: { type: Boolean, default: false }, }); const showCloseButton = computed(() => props.isDismissible && !props.hideCloseButton); const pageCustomPadding = ref(props.customPadding); const customPaddingStyles = computed(() => { if (!pageCustomPadding.value) { return {}; } return { top: pageCustomPadding.value, right: pageCustomPadding.value }; }); const computedAriaLabel = computed(() => (attrs['aria-label'] as string) ?? (t('ariaLabelFallback') as string)); const hasColumnLayout = computed(() => props.withColumnLayout && props.size === BentoModalSize.LARGE); const openModal = (): void => { modal.value.showModal(); }; const emitCloseEvent = (): void => { emit('close-modal'); }; // Handle closing and closing animation for dialog element const closeModalAfterAnimation = () => { if (isClosing.value) { modal.value.close(); if (previousPages.value[0]) { emit('update:active-page', previousPages.value[0]); } previousPages.value = []; isClosing.value = false; emitCloseEvent(); } }; const startCloseModalAnimation = () => { if (!modal.value.open) { return; } isClosing.value = true; }; /** * If the user has pressed escape, clicked outside or clicked the close icon. * Needs to be called from outside, following the "dialog.close()" pattern, * when the closing event is triggered outside of the "base-modal" * component (e.g. from a closing action). */ const internalModalActionClose = (event?: Event) => { if (event) { event.preventDefault(); } if (!props.isDismissible && props.modalRole === BentoModalRole.DIALOG) { return; } startCloseModalAnimation(); }; const closeModalOnClickOutside = () => { if (props.isDismissible) { internalModalActionClose(); } }; const modalConditionalClasses = computed(() => ({ [`b-modal-base__container--${props.size}`]: props.size, 'b-modal-base__container--hide': isClosing.value, 'b-modal-base__container--column-layout': hasColumnLayout.value, 'b-modal-base__container--animation': isAnimationActive.value, })); watch( () => [props.isOpen, modal.value], ([newIsOpen, newModalValue], [, oldModalValue]): void => { if (!newModalValue) { return; } const isFirstMutation = !oldModalValue; if (newIsOpen) { openModal(); // add the first page to the array when the modal opens if (!previousPages.value.length) { previousPages.value.push(activePage.value); } } else if (!isFirstMutation) { startCloseModalAnimation(); } } ); // If the first button is a loading button then close the modal have 0.5 seconds // if the state is changed to 'success'. watch( () => props.actions, () => { if (props.actions?.[0]?.state === 'success') { setTimeout(startCloseModalAnimation, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME); } }, { deep: true } ); onMounted(() => { if (props.isOpen && modal.value) { openModal(); } }); /** * Expose methods through its 'ref' */ defineExpose({ internalModalActionClose, }); // Let's Children components know they are inside a Modal (dialog element) provide(MODAL_DIALOG_ID_INJECTION_KEY, modalId); // Modal pagination const { activePage, isOpen, size } = toRefs(props); const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER); const pages = ref<Array<string>>([]); const previousPages = ref([]); const updatePage = page => emit('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 => { if (pageId) { pages.value.push(pageId); } return { unregisterPage: unregisterPage(pageId) }; }; const height = ref(''); const isAnimationActive = ref(false); provide<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY, { activePage, height, isAnimationActive, pageCustomPadding, showCloseButton, size, }); provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, { activePage, animation, isOpen, pages, previousPages, updatePage, }); provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage); </script> <script lang="ts"> /** * Dialog container. It creates a dialog HTML element for the modal to use. * * @example * import BaseModal from './components/base-modal/base-modal.vue'; * * export default { * components: { BaseModal }, * template: ` * <base-modal * :hide-close-button="true" * :is-dismissible="false" * :is-open="isOpen" * @close-modal="isOpen = false" * > * <template #content-col-1> * // Content on the left side column * </template> * * <template #content-col-2> * // Content on the right side column * </template> * * <template v-if="actions" #actions> * <footer-actions :actions="actions" /> * </template> * </base-modal> * `, * setup() { * const isOpen = ref(true) * const footerActions = [{ * title: 'Primary action', * event: () => { ... } * }] * } * } */ export default defineComponent({ i18n: { messages }, name: 'base-modal', }); </script> <style lang="scss" scoped src="./base-modal.scss" /> 

package/dist/assets/components/modal/components/modal-default/modal-default.vue

@@ -0,0 +1 @@
+<template> <base-modal class="b-modal-default" v-bind="$attrs" :actions="actions" :active-page="activePage" :size="size" :hide-close-button="hideCloseButton" :columns-size="columnsSize" :custom-padding="customPadding" :is-dismissible="isDismissible" :is-open="isOpen" :with-column-layout="withColumnLayout" :initially-open="initiallyOpen" @update:active-page="emit('update:active-page', $event)" @close-modal="onCloseModal" > <template v-if="hasSlot('default')" #default> <slot></slot> </template> <template v-if="hasSlot('content-col-1')" #content-col-1><slot name="content-col-1"></slot></template> <template v-if="hasSlot('content-col-2')" #content-col-2><slot name="content-col-2"></slot></template> <template v-if="hasSlot('content')" #content><slot name="content"></slot></template> <template v-if="actions && actions.length > 0" #actions> <slot name="actions"> <footer-actions :actions="actions" :actions-label="actionsLabel" :destructive-actions="destructiveActions" /> </slot> </template> </base-modal> </template> <script setup lang="ts"> import { defineComponent, onMounted, type PropType, useSlots } from 'vue'; import { BentoModalColumnLayoutVariant, type BentoModalSize } from '@/components/modal/modal.types'; import { useHasSlot } from '@/composables'; import { type BentoButtonActionsList } from '@/components/button'; import { FooterActions } from '@/components/internal/footer-actions'; import BaseModal from '@/components/modal/components/base-modal/base-modal.vue'; const slots = useSlots(); const hasSlot = useHasSlot(slots); const emit = defineEmits<{ /** * Emits update event when page is changed internally */ (e: 'update:active-page', page: string): void; /** * Emitted when the modal is closed. */ (e: 'close-modal'); }>(); const props = 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". * But you may change the color of 1-st action to red with 'critial' key * Not more than 3 action buttons can be provided * Or 2 action buttons and 1 Label for them * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * `title`: Button's text. * * `event`: Event triggered when clicking the Button. * * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`. * * ``` * [{ * title: 'Primary',2 * 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 }, /** * The id of the current active page * Should be the same id as the BentoModalPage to be displayed */ activePage: { type: String, default: null, }, /** * If provided, manages the padding of the whole modal container */ customPadding: { type: String, default: null }, /** * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column. */ columnsSize: { type: String as PropType<BentoModalColumnLayoutVariant>, default: BentoModalColumnLayoutVariant.SMALLER, }, /** * If passed - sets first button color to red */ destructiveActions: { type: Boolean, default: false }, /** * Hides a cross icon on the right side of the title */ hideCloseButton: { type: Boolean, default: false }, /** * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility. */ initiallyOpen: { type: Boolean, default: false }, /** * If set to true, it allows the modal to be closed by clicking outside of it */ isDismissible: { type: Boolean, required: true }, /** * Controls the modal's state from the outside. Set it to true to open the modal */ isOpen: { type: Boolean, required: true }, /** * Sets the width of the modal */ size: { type: String as PropType<BentoModalSize | `${BentoModalSize}`>, required: true, }, /** * If provided, renders the modal's content in a two-column layout an wth dividers separating its content */ withColumnLayout: { type: Boolean, default: false }, }); const onCloseModal = () => { emit('close-modal'); }; onMounted(() => { if (!(hasSlot('content') || (hasSlot('content-col-1') && hasSlot('content-col-2'))) && !props.activePage) { throw new Error('Bento Modal default variant requires content slot or column slots'); } }); </script> <script lang="ts"> /** * Creates a Modal based off the `base-modal` component. * It allows two column modals as well as content modals. * * @example * import { BentoModalDefault } from '@/components/modal/components'; * * export default { * components: { BentoModalDefault }, * template: ` * <bento-modal-default * :is-dismissible="false" * :is-open="isOpen" * @close-modal="isOpen = false" * > * <template #content-col-1> * // Content on the left side column * </template> * * <template #content-col-2> * // Content on the right side column * </template> * * <template v-if="actions" #actions> * <footer-actions :actions="actions" /> * </template> * </bento-modal-default> * `, * setup() { * const isOpen = ref(true) * const footerActions = [{ * title: 'Primary action', * event: () => { ... } * }] * } * } */ export default defineComponent({ name: 'bento-modal-default', }); </script> 

package/dist/assets/components/modal/components/modal-dialog/modal-dialog.vue

@@ -0,0 +1 @@
+<template> <base-modal ref="modalRef" class="b-modal-dialog" :actions="actions" :active-page="activePage" :class="modalDialogConditionalClasses" :hide-close-button="true" size="small" :is-dismissible="isDismissible" :is-open="isOpen" :modal-role="BentoModalRole.ALERT_DIALOG" :initially-open="initiallyOpen" v-bind="$attrs" @close-modal="onCloseModal" > <template #default> <slot></slot> </template> <template #content> {{ content }} </template> <template #actions> <bento-button-actions v-if="dialogType === 'acknowledgement'" :actions="acknowledgementDialogActions" layout="buttons-end" /> <bento-button-actions v-else :actions="dialogActions" layout="buttons-end" /> </template> </base-modal> </template> <script setup lang="ts"> import { computed, defineComponent, onMounted, type PropType, type Ref, ref, toRefs, useSlots } from 'vue'; import { BentoModalDialogType, BentoModalRole } from '@/components/modal/modal.types'; import { useHasSlot } from '@/composables'; import { type BentoButtonActionObject, BentoButtonActions, type BentoButtonActionsList, BentoButtonVariant, } from '@/components/button'; import { useI18n } from '@/utils/ts/i18n'; import BaseModal from '@/components/modal/components/base-modal/base-modal.vue'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const emit = defineEmits<{ (e: 'close-modal'); }>(); const props = defineProps({ /** * List of actions that will be used to render the buttons. * Only 1 action button is allowed for Modal Dialog * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * `title`: Button's text. * * `event`: Event triggered when clicking the Button. * * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`. * * ``` * [{ * title: 'Primary',2 * event: () => { ... }, * icon: FourPeopleIcon * }] * ``` */ actions: { type: Array as PropType<BentoButtonActionsList>, default: null, }, /** * The id of the current active page * Should be the same id as the BentoModalPage to be displayed */ activePage: { type: String, default: null, }, /** * Text that is displayed in the content section of modal */ content: { type: String, required: true }, /** * Sets different action buttons styling and appearance */ dialogType: { type: String as PropType<BentoModalDialogType | `${BentoModalDialogType}`>, required: true, }, /** * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility. */ initiallyOpen: { type: Boolean, default: false }, /** * If set to true, it allows the modal to be closed by clicking outside of it */ isDismissible: { type: Boolean, required: true }, /** * Controls the modal's state from the outside. Set it to true to open the modal */ isOpen: { type: Boolean, required: true }, }); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const slots = useSlots(); const hasSlot = useHasSlot(slots); const { actions, dialogType } = toRefs(props); const modalRef: Ref<InstanceType<typeof BaseModal>> = ref(null); const onCloseModal = () => { emit('close-modal'); }; const onCloseActionButton = (event: Event) => { // Calls "base-modal" internal function to initialize the // "close" animation and trigger the "close" event. // This follows the same "dialog" pattern of calling "dialog.close()" modalRef.value.internalModalActionClose(event); }; const acknowledgementDialogActions = computed(() => [ { title: t('ok') as string, event: onCloseActionButton, variant: BentoButtonVariant.SECONDARY, }, ]); const dialogActions = computed(() => { const mandatoryCancelActionButton: BentoButtonActionObject = { title: 'Cancel', event: onCloseActionButton, }; const updatedPassedActionsObject: BentoButtonActionObject = actions?.value?.[0]; if (dialogType.value === BentoModalDialogType.DESTRUCTIVE) { updatedPassedActionsObject.critical = true; } else if (dialogType.value === BentoModalDialogType.INFO) { updatedPassedActionsObject.variant = BentoButtonVariant.SECONDARY; } return [updatedPassedActionsObject, mandatoryCancelActionButton]; }); const modalDialogConditionalClasses = computed(() => ({ [`b-modal-dialog--${dialogType.value}`]: dialogType.value, })); onMounted(() => { if (props.activePage) { throw new Error( 'Bento Modal Dialog cannot contain multiple pages. Use Bento Modal default variant instead.' ); } if (!hasSlot('default') || (!props.content && !hasSlot('content'))) { throw new Error('Bento Modal Dialog requires header title and content'); } if (actions?.value?.length > 1) { throw new Error('Not more than 1 action button may be provided to Modal Dialog'); } if (dialogType.value !== BentoModalDialogType.ACKNOWLEDGEMENT && !actions?.value) { throw new Error('Modal Dialog, except ACKNOWLEDGEMENT type, always has to contain one action button'); } if (dialogType.value === BentoModalDialogType.ACKNOWLEDGEMENT && actions?.value?.length) { throw new Error('Acknowledgement Modal Dialog does not accept action buttons'); } }); </script> <script lang="ts"> /** * Creates a "dialog" type of modal. * These are are modals that require a deliberate user action or acknowledgement * (confirmations or destructive actions). * * It’s not customizable and consists of title, description label and one action. * * @example * import { BentoModalDialog } from '@/components/modal/components'; * * export default { * components: { BentoModalDialog }, * template: ` * <bento-modal-dialog * dialog-type="destructive" * :is-dismissible="false" * :is-open="isOpen" * @close-modal="isOpen = false" * > * Dialog content * </bento-modal-dialog> * `, * setup() { * const isOpen = ref(true) * } * } */ export default defineComponent({ i18n: { messages }, name: 'bento-modal-dialog', }); </script> 

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

@@ -0,0 +1 @@
+<template> <dialog-page ref="page" class="b-modal-page" :class="modalPageConditionalClasses" :page-id="pageId" :always-show-border="hasColumnLayout" :back-button-styling="customPaddingStyles?.backButton" :previous-page="previousPage" @animationend="isAnimationActive = false" > <template v-if="hasSlot('default') || showCloseButton" #header> <div class="b-modal-page__header-container" :style="customPaddingStyles.header"> <div class="b-modal-page__header"> <bento-typography class="b-modal-page__title" el="span" variant="title" stronger> <slot v-if="hasSlot('default')" /> </bento-typography> </div> </div> </template> <template #content> <div class="b-modal-page__content" :class="modalContentConditionalClasses" :style="customPaddingStyles.content" > <bento-typography v-if="hasSlot('content') || (hasSlot('content-col-1') && hasSlot('content-col-2'))" el="div" > <grid-layout v-if="hasColumnLayout" :column-width="computedColumnWidth" :container-type="GridLayoutContainerType.NORMAL" no-gap class="b-modal-page__grid" > <template #col-1><slot name="content-col-1"></slot></template> <template #col-2><slot name="content-col-2"></slot></template> </grid-layout> <slot v-else name="content" /> </bento-typography> </div> </template> <template v-if="hasSlot('actions')" #footer> <div class="b-modal-page__actions-container" :style="customPaddingStyles.actions"> <div aria-label="modal actions" class="b-modal-page__actions"> <slot name="actions" /> </div> </div> </template> <template v-else-if="actions && actions.length > 0" #footer> <div class="b-modal-page__actions-container" :style="customPaddingStyles.actions"> <footer-actions :actions="actions" :actions-label="actionsLabel" :destructive-actions="destructiveActions" /> </div> </template> </dialog-page> </template> <script setup lang="ts"> import { computed, defineComponent, inject, nextTick, onUnmounted, ref, useSlots, watch } from 'vue'; import { BentoModalColumnLayoutVariant, type BentoModalConfigData, BentoModalSize, } from '@/components/modal/modal.types'; import { BentoTypography } from '@/components/typography'; import { GridLayout, GridLayoutContainerType } from '@/internal'; import { useHasSlot } from '@/composables'; import { FooterActions } from '@/components/internal/footer-actions'; import DialogPage from '@/internal/dialog-page/dialog-page.vue'; import { MODAL_CONFIG_INJECTION_KEY } from '../../modal.keys'; import { observeSizeOfElement } from '@/utils/ts/resize'; import type { BentoModalPageProps } from './modal-page.types'; const CLOSE_BUTTON_ICON_WIDTH = 26; const slots = useSlots(); const hasSlot = useHasSlot(slots); const page = ref<InstanceType<typeof DialogPage>>(null); const props = withDefaults(defineProps<BentoModalPageProps>(), { actions: null, actionsLabel: null, columnsSize: BentoModalColumnLayoutVariant.SMALLER, customPadding: null, destructiveActions: false, withColumnLayout: false, pageId: undefined, previousPage: undefined, }); const modalPageConditionalClasses = computed(() => ({ 'b-modal-page--custom-padding': props.customPadding, })); const modalContentConditionalClasses = computed(() => ({ 'b-modal-page__content--with-header': hasSlot('default'), 'b-modal-page__content--with-actions': hasSlot('actions') || props.actions?.length, })); // Setting custom padding styles const customPaddingStyles = computed(() => { if (!props.customPadding) { return {}; } const xPadding = { paddingLeft: props.customPadding, paddingRight: props.customPadding, }; const content = { ...xPadding, paddingTop: undefined, paddingBottom: undefined }; if (!hasSlot('default')) { content.paddingTop = props.customPadding; } if (!hasSlot('actions')) { content.paddingBottom = props.customPadding; } return { header: { ...xPadding, paddingTop: props.customPadding, paddingRight: `${parseInt(props.customPadding, 10) + CLOSE_BUTTON_ICON_WIDTH}px`, flex: 1, }, content, actions: { ...xPadding, paddingBottom: props.customPadding }, backButton: { top: props.customPadding, paddingLeft: props.customPadding }, }; }); // Column layout styles const hasColumnLayout = computed(() => props.withColumnLayout && size.value === BentoModalSize.LARGE); const computedColumnWidth = computed(() => { if (props.columnsSize === BentoModalColumnLayoutVariant.SMALLER) { return [ { small: 4, medium: 4, large: 4 }, { small: 8, medium: 8, large: 8 }, ]; } if (props.columnsSize === BentoModalColumnLayoutVariant.BIGGER) { return [ { small: 8, medium: 8, large: 8 }, { small: 4, medium: 4, large: 4 }, ]; } return [ { small: 6, medium: 6, large: 6 }, { small: 6, medium: 6, large: 6 }, ]; }); // Register page to parent component and inject data from parent component const { activePage, height, isAnimationActive, pageCustomPadding, showCloseButton, size } = inject<BentoModalConfigData>(MODAL_CONFIG_INJECTION_KEY); const isCurrentPage = computed(() => activePage.value === props.pageId || !activePage.value); // Animation // Set resize observer on mount of update the height of the dialog on resize let pageElementObserver: ResizeObserver | null = null; // Watching activePage changes to set the height of the page and set isAnimationActive watch( () => activePage.value, async (value, oldValue) => { if (isCurrentPage.value) { await nextTick(); height.value = `${page.value?.$el?.clientHeight}px`; pageCustomPadding.value = props.customPadding; // only set isAnimationActive to true if its going from two different pages and not from null to the first page isAnimationActive.value = oldValue !== undefined; pageElementObserver = observeSizeOfElement(page.value, () => { const pageHeight = `${page.value?.$el?.clientHeight}px`; if (pageHeight && pageHeight !== height.value) { height.value = pageHeight; } }); } }, { immediate: true } ); // Disconnect observer on unmounting the page onUnmounted(() => { pageElementObserver?.disconnect(); }); </script> <script lang="ts"> /** * ModalPage is used to render different pages of the Modal component * * @example * import { BentoModal, BentoModalPage } from '@adyen/bento-vue2'; * * export default { * components: { BentoModal, BentoModalPage }, * template: ` * <bento-modal active-page='page1' :is-open='true'> * <bento-modal-page * pageId='page1' * actions-label='Move to next page' * :actions="[ * { * title: 'Next page', * event: () => { * activePage.value = 'page2'; * }, * }]"> * Page 1 * <template #content> * Page 1 content * </template> * </bento-modal-page> * <bento-modal-page * pageId='page2' * :actions="[ * { * title: 'Save', * event: () => {}, * }]"> * Page 2 * <template #content> * Page 2 content * </template> * </bento-modal-page> * </bento-modal> * ` * } */ export default defineComponent({}); </script> <style lang="scss" scoped src="./modal-page.scss" /> 

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

@@ -0,0 +1,215 @@
+import { Canvas, Story, Meta } from '@storybook/blocks';
+import * as ModalStories from './modal.stories';
+
+<Meta title="Modal" of={ModalStories} />
+
+# Modal
+
+<Canvas sourceState="closed">
+    <Story of={ModalStories.Default} />
+</Canvas>
+
+Modal is a window that appear over any other page content and focus user attention exclusively on one task or piece of
+information at the moment.
+
+It also requires user interaction to return to whatever is underneath.
+
+## Use Cases
+
+`bento-modal` interrupts user workflow by design. User can not go back to previous workflow until they finish modal task
+or dismiss it.
+
+Here are some examples when to use it:
+
+- Providing user critical information and a way to act on it (optionally).
+- Confirming or changing user’s most recent action/decision.
+- Providing user a way to perform a scoped short-term task without losing previous context.
+
+### Do not use
+
+Do not use a `bento-toast` in combination with `bento-modal`, because the modal's overlay always appears above all the
+other content and will obscure the toast's information. When you need to provide feedback on actions taken within a
+modal, use `bento-alert` instead.
+
+## Variations
+
+### Default
+
+Acts as a container that can hold any type of content inside (forms, other components, images, videos, etc) and allow 3
+different sizes (small, medium, large).
+
+Use it when you need:
+
+- Get input from user through forms
+- Provide a complex-layout info consisting from different types of content (image, text, forms, etc)
+
+## Navigation (with multiple pages)
+
+Modal component supports deeper level navigation (user can go deeper in hierarchy and go back). Only for `default`
+variant.
+
+To handle navigation, every `bento-modal-page` should have a `pageId`, which can then be passed to the `activePage` prop
+in `bento-modal` component to handle which page should be shown.
+
+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={ModalStories.MultiplePages} />
+
+## Properties
+
+This is the list of properties applicable to `bento-modal`, when using a single page, or `bento-modal-page`, when using
+multiple pages:
+
+| Property Name        | Description                                                              |
+| -------------------- | ------------------------------------------------------------------------ |
+| `actions`            | List of actions that will be used to render the buttons                  |
+| `actionsLabel`       | Text label that is displayed left to the action buttons                  |
+| `columnsSize`        | Sets the size of the column layout columns, used with `withColumnLayout` |
+| `customPadding`      | If provided, manages the padding of the whole modal container            |
+| `destructiveActions` | If passed - sets first button color to red                               |
+| `withColumnLayout`   | If passed, renders the content in a two-column layout                    |
+
+Some properties can only be applied to `bento-modal`:
+
+| Property Name     | Description                                                                     |
+| ----------------- | ------------------------------------------------------------------------------- |
+| `activePage`      | Used to determine the current page, matches with `bento-modal-page` pageId prop |
+| `hideCloseButton` | Hides a cross icon on the right side of the title                               |
+| `isDismissible`   | If set to true, it allows the modal to be closed without performing an action   |
+| `isOpen`          | Controls the modal's state from the outside. Set it to true to open the modal   |
+| `size`            | Sets the width of the modal                                                     |
+| `variant`         | Choose between default or dialog versions of modal                              |
+
+Additionally, there are also properties applied only to `bento-modal-page`:
+
+| Property Name  | Description                                                                                   |
+| -------------- | --------------------------------------------------------------------------------------------- |
+| `pageId`       | The id of the page, used with `bento-modal` activePage prop to control navigation             |
+| `previousPage` | Can be set to null to hide the back button, or to a `pageId` to override the normal behaviour |
+
+#### Dismissible
+
+`isDismissible` property allows the modal to be closed without performing an action. Setting `isDismissible` to false
+will also hide the close button.
+
+Default value for Modal "Default" variant is set to `true`
+
+#### Close button
+
+`bento-modal` can be dismissed by X button in the header or by clicking outside the modal (optional).
+
+By passing `hideCloseButton` property, the X button is removed from the modal header.
+
+Close button will not show if the modal is not dismissible.
+
+#### Destructive actions
+
+Renders the modal with the main action present in the actions in a destructive variant.
+
+<Canvas sourceState="closed">
+    <Story of={ModalStories.DestructiveActions} />
+</Canvas>
+
+#### Size
+
+Modal default has the following sizes:
+
+- `small`: 480px
+- `medium`: 600px
+- `large`: 800px
+
+### With column layout
+
+Only available for `large` size modals. Renders the modal content in two columns separated by a divider.
+
+<Canvas sourceState="closed">
+    <Story of={ModalStories.ColumnLayout} />
+</Canvas>
+
+#### Column width
+
+The width of the two columns can be customized via the `columnWidth` property. This property sets the width of the
+leftmost column and can take up the following values:
+
+- `'smaller'`: the leftmost column is smaller than the rightmost one
+- `'equal'`: the leftmost column is the same size as the rightmost one
+- `'bigger'`: the leftmost column is bigger than the rightmost one
+
+### Dialog
+
+Modal dialog is intended to focus user on important message that requires deliberate user action.
+
+It does not have an X button in header and can be dismissed by cancel button in the footer.
+
+Modal dialog can not hold any types of content but text content. It also comes in one predefined size.
+
+<Canvas sourceState="closed">
+    <Story of={ModalStories.Dialog} />
+</Canvas>
+
+#### Properties
+
+This is the list of properties, applicable only to `bento-modal` of "Dialog" variant
+
+| Property Name   | Description                                                                   |
+| --------------- | ----------------------------------------------------------------------------- |
+| `variant`       | Choose between default or dialog versions of modal                            |
+| `isDismissible` | If set to true, it allows the modal to be closed without performing an action |
+| `isOpen`        | Controls the modal's state from the outside. Set it to true to open the modal |
+| `actions`       | List of actions that will be used to render the buttons                       |
+| `dialogType`    | Changes the visual styling of action buttons                                  |
+| `content`       | Text that will be displayed in the content section of Modal                   |
+
+#### Sub-variants
+
+The `dialogType` property controls the Modal dialog sub-variants.
+
+Main difference between this sub-variants is button styling.
+
+The possible options for `dialogType` are:
+
+- `'confirmation'` (default)
+- `'destructive'`
+- `'info'`
+- `'acknowledgement'`
+
+#### Dismissible
+
+`isDismissible` property allows the modal to be closed without performing an action.
+
+Default value for Modal "Dialog" variant is set to `false`.
+
+## Accessibility
+
+`bento-modal` uses the native HTML `<dialog>` element.
+
+It means that when `bento-modal` 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
+
+Being an interactive element, the modal is reachable through keyboard navigation, using the advantages of focus-trap
+feature. The following keys trigger the following actions:
+
+| Keyboard interaction | Action                                                         |
+| -------------------- | -------------------------------------------------------------- |
+| `Tab`                | Moves focus to the first interactive element inside modal      |
+| `ESC`                | Closes the modal if its `isDismissible` property set to `true` |
+
+### Roles, States, and Properties
+
+Adhering to the [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/) standard we follow the
+[dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) documentation provided.
+
+| ARIA attribute | is automatic?                                                                              | fallback used                                             | manual override |
+| -------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------- | --------------- |
+| label          | Yes, value from `default` slot                                                             | `modal` value is used in case no `default` slot provided. | -               |
+| role           | Yes, semantic `dialog` element used. `alertdialog` role is used for modal "Dialog" variant | -                                                         | -               |
+
+## Resources
+
+- [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=7423%3A89670&mode=dev)

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

@@ -0,0 +1 @@
+import type { Meta, StoryObj } from '@storybook/vue'; import { action } from '@storybook/addon-actions'; import { ref } from 'vue'; import { isVue2 } from 'vue-demi'; import { BentoButton } from '@/components/button'; import { BentoModalColumnLayoutVariant, BentoModalDialogType, BentoModalSize, BentoModalVariant } from './modal.types'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { BentoModalPage } from '@/components/modal'; import BentoModal from './modal.vue'; import ModalWithMultiplePages from './__tests__/modal-with-multiple-pages.vue?raw'; const meta: Meta<typeof BentoModal> = { title: 'Modal', component: BentoModal, argTypes: { default: { name: 'default', defaultValue: '', description: 'Modal title', table: { type: { summary: 'VNode[]' }, }, control: { type: null }, }, content: { name: 'content', defaultValue: '', description: 'Modal content', table: { type: { summary: 'VNode[]' }, }, control: { type: null }, }, 'content-col-1': { name: 'content-col-1', defaultValue: '', description: 'Modal with column layout - first column content', table: { type: { summary: 'VNode[]' }, }, control: { type: null }, }, 'content-col-2': { name: 'content-col-2', defaultValue: '', description: 'Modal with column layout - second column content', table: { type: { summary: 'VNode[]' }, }, control: { type: null }, }, variant: { options: Object.values(BentoModalVariant), mapping: BentoModalVariant, control: { type: 'select', }, }, size: { options: Object.values(BentoModalSize), mapping: BentoModalSize, control: { type: 'select', }, }, dialogType: { options: Object.values(BentoModalDialogType), mapping: BentoModalDialogType, control: { type: 'select', }, }, columnsSize: { options: Object.values(BentoModalColumnLayoutVariant), mapping: BentoModalColumnLayoutVariant, control: { type: 'select', }, }, isDismissible: { control: { type: 'boolean', }, }, hideCloseButton: { control: { type: 'boolean', }, }, destructiveActions: { control: { type: 'boolean', }, }, isOpen: { control: { type: 'boolean', }, }, // Events 'close-modal': { table: { type: { summary: '() => void' }, }, control: { disable: true }, }, }, }; export default meta; type Story = StoryObj<typeof BentoModal>; const MODAL_TITLE = 'Modal title'; const MODAL_CONTENT = 'Modal content'; const MODAL_ACTIONS_LABEL = 'Label Text'; const MODAL_ACTIONS = [ { title: 'Action', event: () => action('Primary')(), }, { title: 'Action', event: () => action('Secondary')(), }, ]; const SHARED_DEFAULT_PROPS = { default: MODAL_TITLE, content: MODAL_CONTENT, isOpen: false, }; const MODAL_DEFAULT_PROPS = { ...SHARED_DEFAULT_PROPS, variant: 'default', size: 'medium', hideCloseButton: false, actions: MODAL_ACTIONS, destructiveActions: false, }; const MODAL_DIALOG_PROPS = { ...SHARED_DEFAULT_PROPS, variant: 'dialog', actions: [MODAL_ACTIONS[0]], dialogType: 'confirmation', }; const defaultTemplate = ` <div class="b-modal-story--default"> <bento-modal v-bind="args" aria-label="Aria label content" :is-open="isOpen" @close-modal="closeModal"> <template #default v-if='args.default'> {{ args.default }} </template> <template #content v-if='args.content'> {{ args.content }} </template> </bento-modal> <bento-button :aria-expanded="isOpen" @click="openModal" > Open modal </bento-button> </div> `; const defaultCode = ` <template> <bento-modal aria-label="Aria label content" :actions="actionsArray" :is-open="isOpen" @close-modal="closeModal" > Modal Title <template #content> {{ ${MODAL_DIALOG_PROPS.content} }} </template> </bento-modal> <bento-button :aria-expanded="isOpen" @click="openModal" > Open modal </bento-button> </template> <script setup lang="ts"> import { BentoModal, BentoButton, BentoButtonActionsList } from '@adyen/bento-vue2'; const actionsArray: BentoButtonActionsList = [{ title: 'Action 1', event: () => { // Your handler here }, title: 'Action 2', event: () => { // Your handler here }, }]; const isOpen = ref(false); const closeModal = () => { isOpen.value = false; }; const openModal = () => { isOpen.value = true; }; </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoModal, BentoButton }, props: Object.keys(argTypes), template: defaultTemplate, setup(props) { const args = isVue2 ? props : _args; const isOpen = ref(args.isOpen); const closeModal = () => { isOpen.value = false; }; const openModal = () => { isOpen.value = true; }; return { // Values isOpen, args, // Methods openModal, closeModal, }; }, }), parameters: storybookDocsParameter(defaultCode), args: { ...MODAL_DEFAULT_PROPS, }, }; const columnLayoutCode = ` <template> <bento-modal v-bind="args" aria-label="Aria label content" :actions="actionsArray" :is-open="isOpen" @close-modal="closeModal" > <template #default>Modal Title</template> <template #content-col-1> Your modal content here </template> <template #content-col-2> Some other content here </template> </bento-modal> <bento-button :aria-expanded="isOpen" @click="openModal" > Open modal </bento-button> </template> <script setup lang="ts"> import { BentoModal, BentoButton, BentoButtonActionsList } from '@adyen/bento-vue2'; const actionsArray: BentoButtonActionsList = [{ title: 'Action 1', event: () => { // Your handler here }, title: 'Action 2', event: () => { // Your handler here }, }]; const isOpen = ref(false); const closeModal = () => { isOpen.value = false; }; const openModal = () => { isOpen.value = true; }; </script> `; export const ColumnLayout: Story = { render: (_args, { argTypes }) => ({ components: { BentoModal, BentoButton }, props: Object.keys(argTypes), template: ` <div class="b-modal-story--default"> <bento-modal v-bind="args" aria-label="Aria label content" :is-open="isOpen" @close-modal="closeModal" > <template #default v-if='args.default'> {{ args.default }} </template> <template v-if='args.content' #content-col-1> <div>content column 1</div> </template> <template v-if='args.content' #content-col-2> <div>content column 2</div> </template> </bento-modal> <bento-button :aria-expanded="isOpen" @click="openModal" > Open modal </bento-button> </div> `, setup(props) { const args = isVue2 ? props : _args; const isOpen = ref(args.isOpen); const closeModal = () => { isOpen.value = false; }; const openModal = () => { isOpen.value = true; }; return { // Values isOpen, args, // Methods openModal, closeModal, }; }, }), parameters: storybookDocsParameter(columnLayoutCode), args: { ...MODAL_DEFAULT_PROPS, size: 'large', withColumnLayout: true, }, }; const dialogCode = ` <template> <bento-modal aria-label="Aria label content" :content="${MODAL_DIALOG_PROPS.content}" variant="dialog" dialog-type="confirmation" :actions="dialogActions" :is-open="isOpen" @close-modal="closeModal" > Modal Title </bento-modal> <bento-button :aria-expanded="isOpen" @click="openModal" > Open modal </bento-button> </template> <script setup lang="ts"> import { BentoModal, BentoButton, BentoButtonActionsList } from '@adyen/bento-vue2'; const dialogActions: BentoButtonActionsList = [{ title: 'Action', event: () => { //Your handler here }, }] const isOpen = ref(false); const closeModal = () => { isOpen.value = false; }; const openModal = () => { isOpen.value = true; }; </script> `; export const Dialog: Story = { render: (_args, { argTypes }) => ({ components: { BentoModal, BentoButton }, props: Object.keys(argTypes), template: defaultTemplate, setup(props) { const args = isVue2 ? props : _args; const isOpen = ref(args.isOpen); const closeModal = () => { isOpen.value = false; }; const openModal = () => { isOpen.value = true; }; return { // Values isOpen, args, // Methods openModal, closeModal, }; }, }), parameters: storybookDocsParameter(dialogCode), args: { ...MODAL_DIALOG_PROPS, }, }; const ActionsWithLabelCode = ` <template> <bento-modal :actions="actionsArray" :is-open="isOpen" @close-modal="closeModal" > Modal Title <template #content> {{ ${MODAL_DIALOG_PROPS.content} }} </template> </bento-modal> <bento-button :aria-expanded="isOpen" @click="openModal" > Open modal </bento-button> </template> <script setup lang="ts"> import { BentoModal, BentoButton, BentoButtonActionsList } from '@adyen/bento-vue2'; const actionsArray: BentoButtonActionsList = [{ title: 'Action 1', event: () => { // Your handler here }, title: 'Action 2', event: () => { // Your handler here }, }]; const isOpen = ref(false); const closeModal = () => { isOpen.value = false; }; const openModal = () => { isOpen.value = true; }; </script> `; export const ActionsWithLabel: Story = { render: (_args, { argTypes }) => ({ components: { BentoModal, BentoButton }, props: Object.keys(argTypes), template: defaultTemplate, setup(props) { const args = isVue2 ? props : _args; const isOpen = ref(args.isOpen); const closeModal = () => { isOpen.value = false; }; const openModal = () => { isOpen.value = true; }; return { // Values isOpen, args, // Methods openModal, closeModal, }; }, }), parameters: storybookDocsParameter(ActionsWithLabelCode), args: { ...MODAL_DEFAULT_PROPS, actionsLabel: MODAL_ACTIONS_LABEL, }, }; const DestructiveActionsCode = ` <template> <bento-modal destructive-actions :actions="actionsArray" :is-open="isOpen" @close-modal="closeModal" > Modal Title <template #content> {{ ${MODAL_DIALOG_PROPS.content} }} </template> </bento-modal> <bento-button :aria-expanded="isOpen" @click="openModal" > Open modal </bento-button> </template> <script setup lang="ts"> import { BentoModal, BentoButton, BentoButtonActionsList } from '@adyen/bento-vue2'; const actionsArray: BentoButtonActionsList = [{ title: 'Action 1', event: () => { // Your handler here }, title: 'Action 2', event: () => { // Your handler here }, }]; const isOpen = ref(false); const closeModal = () => { isOpen.value = false; }; const openModal = () => { isOpen.value = true; }; </script> `; export const DestructiveActions: Story = { render: (_args, { argTypes }) => ({ components: { BentoModal, BentoButton }, props: Object.keys(argTypes), template: defaultTemplate, setup(props) { const args = isVue2 ? props : _args; const isOpen = ref(args.isOpen); const closeModal = () => { isOpen.value = false; }; const openModal = () => { isOpen.value = true; }; return { // Values isOpen, args, // Methods openModal, closeModal, }; }, }), parameters: storybookDocsParameter(DestructiveActionsCode), args: { ...MODAL_DEFAULT_PROPS, destructiveActions: true, }, }; export const MultiplePages: Story = { render: (_args, { argTypes }) => ({ components: { BentoModal, BentoModalPage, BentoButton }, props: Object.keys(argTypes), template: ` <div class="b-modal-story--default"> <bento-modal v-bind="args" aria-label="Aria label content" :is-open="isOpen" @close-modal="closeModal" :activePage="activePage" @update:active-page="activePage = $event"> <bento-modal-page v-bind="intro"> {{ intro.title }} <template #content> <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> </template> </bento-modal-page> <bento-modal-page v-bind="newProfile" :withColumnLayout='true' > {{ newProfile.title }} <template #content> This page has some info about creating a new profile </template> </bento-modal-page> <bento-modal-page v-bind="editProfile" > {{ editProfile.title }} <template #content> This is where you edit your profile </template> </bento-modal-page> <bento-modal-page v-bind="newProfileForm"> {{ newProfileForm.title }} <template #content> This is where you create a new profile </template> </bento-modal-page> <bento-modal-page v-bind="success"> {{ success.title }} <template #content> Your profile is created </template> </bento-modal-page> </bento-modal> <bento-button :aria-expanded="isOpen" @click="openModal" > Open modal </bento-button> </div> `, setup(props) { const args = isVue2 ? props : _args; const isOpen = ref(args.isOpen); const activePage = ref('intro'); const closeModal = () => { isOpen.value = false; }; const openModal = () => { isOpen.value = true; }; 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: () => action('save')(), }, { title: 'Cancel', event: () => action('cancel')(), }, ], }; const newProfileForm = { pageId: 'newProfileForm', title: 'New profile form', actions: [ { title: 'Save', event: () => { activePage.value = 'success'; }, }, { title: 'Cancel', event: () => action('cancel')(), }, ], }; const success = { pageId: 'success', title: 'Success!', destructiveActions: true, actions: [ { title: 'Delete', event: () => action('delete')(), }, { title: 'Cancel', event: () => action('cancel')(), }, ], previousPage: null, }; return { // Values isOpen, args, activePage, intro, newProfile, newProfileForm, success, editProfile, // Methods openModal, closeModal, }; }, }), parameters: storybookDocsParameter(ModalWithMultiplePages), args: MODAL_DEFAULT_PROPS, }; 

package/dist/assets/components/modal/modal.vue

@@ -0,0 +1 @@
+<template> <component :is="computedVariant" class="b-modal" :is-open="isOpen" :actions="actions" :initially-open="initiallyOpen" v-bind="customProps" @close-modal="onCloseModal" @update:active-page="emit('update:active-page', $event)" > <template v-if="hasSlot('default')" #default> <slot></slot> </template> <template v-if="hasSlot('content-col-1')" #content-col-1><slot name="content-col-1"></slot></template> <template v-if="hasSlot('content-col-2')" #content-col-2><slot name="content-col-2"></slot></template> <template v-if="hasSlot('content')" #content><slot name="content"></slot></template> </component> </template> <script setup lang="ts"> import { computed, defineComponent, type PropType, useAttrs, useSlots, watch } from 'vue'; import { BentoModalColumnLayoutVariant, BentoModalDialogType, BentoModalSize, BentoModalVariant, BentoModalVariantMapping, } from './modal.types'; import { BentoModalDefault, BentoModalDialog } from '@/components/modal/components'; import { useHasSlot } from '@/composables'; import { type BentoButtonActionsList } from '@/components/button'; import { deprecate } from '@/utils/ts/deprecate'; const LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME = 500; type BentoModalVariantProp = BentoModalVariant | `${BentoModalVariant}` | `${BentoModalVariantMapping}`; const slots = useSlots(); const hasSlot = useHasSlot(slots); const attrs = useAttrs(); const emit = defineEmits<{ /** * Emits update event when page is changed internally */ (e: 'update:active-page', page: string): void; /** * Emitted when the modal is closed */ (e: 'close-modal'); }>(); const props = defineProps({ /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * `title`: Button's text. * * `event`: Event triggered when clicking the Button. * * `icon`: Vue Icon from the library `@adyen/ui-assets-icons-16`. * * ``` * [{ * title: 'Primary',2 * event: () => { ... }, * icon: FourPeopleIcon * }, { * title: 'Secondary', * event: () => { ... } * }] * ``` */ actions: { type: Array as PropType<BentoButtonActionsList>, default: null, }, /** * The id of the current active page * Should be the same id as the BentoModalPage to be displayed */ activePage: { type: String, default: null, }, /** * Text label that is displayed left to the action buttons */ actionsLabel: { type: String, default: null }, /** * Text that will be displayed in the content section of Modal */ content: { type: String, default: null }, /** * If a column layout is provided, it renders the respective left column width variant. This can be smaller than the second column, the same size as the second column or bigger than the second column. */ columnsSize: { type: String as PropType<BentoModalColumnLayoutVariant | `${BentoModalColumnLayoutVariant}`>, default: BentoModalColumnLayoutVariant.SMALLER, validator: (value: BentoModalColumnLayoutVariant) => Object.values(BentoModalColumnLayoutVariant).includes(value), }, /** * If provided, manages the padding of the whole modal container */ customPadding: { type: String, default: null }, /** * If passed - sets first button color to red */ destructiveActions: { type: Boolean, default: false }, /** * Changes the visual styling of action buttons */ dialogType: { type: String as PropType<BentoModalDialogType | `${BentoModalDialogType}`>, default: BentoModalDialogType.CONFIRMATION, validator: (value: BentoModalDialogType) => Object.values(BentoModalDialogType).includes(value), }, /** * Hides a cross icon on the right side of the title */ hideCloseButton: { type: Boolean, default: false }, /** * If set to true, it allows the modal to be closed without performing an action */ isDismissible: { type: Boolean, default: null }, /** * Controls the modal's state from the outside. Set it to true to open the modal */ isOpen: { type: Boolean, default: false, }, /** * Sets the open attribute on the dialog element, use isOpen instead to toggle modal visbility. */ initiallyOpen: { type: Boolean, default: false }, /** * Sets the width of the modal */ size: { type: String as PropType<BentoModalSize | `${BentoModalSize}`>, default: BentoModalSize.SMALL, validator: (value: BentoModalSize) => Object.values(BentoModalSize).includes(value), }, /** * Choose between default or dialog versions of modal */ variant: { type: String as PropType<BentoModalVariantProp>, default: 'default', validator: (value: BentoModalVariantProp) => Object.values<BentoModalVariantProp>(BentoModalVariant).includes(value) || Object.values<BentoModalVariantProp>(BentoModalVariantMapping).includes(value), }, /** * If provided, renders the modal's content in a two-column layout an wth dividers separating its content */ withColumnLayout: { type: Boolean, default: false }, }); const computedVariant = computed(() => { if (Object.values<BentoModalVariantProp>(BentoModalVariantMapping).includes(props.variant)) { return props.variant; } return BentoModalVariantMapping[props.variant.toUpperCase()]; }); const customProps = computed(() => computedVariant.value === BentoModalVariantMapping.DEFAULT ? { activePage: props.activePage, hideCloseButton: props.hideCloseButton, size: props.size, customPadding: props.customPadding, actionsLabel: props.actionsLabel, destructiveActions: props.destructiveActions, isDismissible: props.isDismissible ?? true, withColumnLayout: props.withColumnLayout, columnsSize: props.columnsSize, ...attrs, } : { activePage: props.activePage, dialogType: props.dialogType, content: props.content, isDismissible: props.isDismissible ?? false, ...attrs, } ); const onCloseModal = () => { emit('close-modal'); }; // If the first button is a loading button then close the modal have 0.5 seconds // if the state is changed to 'success'. watch( () => props.actions, () => { if (props.actions?.[0]?.state === 'success') { setTimeout(onCloseModal, LOADING_BTN_CLOSE_AFTER_SUCCESS_DELAY_TIME); } } ); if (Object.keys(attrs).includes('overflow-visible')) { deprecate( 'BentoModal "overflow-visible" property', `"overflow-visible" property was made redundant. BentoModal can work correctly without the need to pass the propery. Remove the "overflow-visible" prop from BentoModal to remove this error.`, '2.0.0' ); } </script> <script lang="ts"> /** * Modal is a window that appear over any other page content * and focus user attention exclusively on one task or piece of * information at the moment. * * @example * import { BentoModal } from '@adyen/bento-vue2'; * * export default { * components: { BentoModal }, * template: ` * <bento-modal :isOpen="true"> * Title of the Modal * <template #content> * Mandatory content slot * </template> * </bento-modal> * ` * }; */ export default defineComponent({ components: { BentoModalDefault, BentoModalDialog }, }); </script> 

package/dist/assets/components/modal-fullscreen/components/modal-fullscreen-page.vue

@@ -0,0 +1 @@
+<template> <dialog-page class="b-modal-fullscreen-page" :page-id="pageId" :previous-page="previousPage" always-show-border> <template #header> <div class="b-modal-fullscreen-page__header"> <div class="b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--title"> <bento-typography v-if="title" el="h2" variant="title" class="b-modal-fullscreen-page__title" :title="title" >{{ title }}</bento-typography > </div> <div v-if="hasSlot('header')" class="b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--slot" > <slot name="header" /> </div> <div class="b-modal-fullscreen-page__header-section b-modal-fullscreen-page__header-section--actions"> <bento-typography v-if="contextualLabel" class="b-modal-fullscreen-page__contextual-label" el="span" :title="contextualLabel" >{{ contextualLabel }}</bento-typography > <bento-button-actions v-if="actions" class="b-modal-fullscreen-page__actions" :actions="actions" /> <div class="b-modal-fullscreen-page__separator"></div> </div> </div> </template> <template #content> <div class="b-modal-fullscreen-page__content"> <slot /> </div> </template> </dialog-page> </template> <script setup lang="ts"> import { onMounted, type PropType, useSlots } from 'vue'; import { BentoButtonActions, type BentoButtonActionsList } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import { DialogPage } from '@/internal'; import { useHasSlot } from '@/composables'; const props = defineProps({ /** * List of actions that will be used to render the buttons. * First element in the list will be rendered as "primary". * All elements after the first will be rendered as "secondary". * * Each object in the list should have a `title`, an `event` and * (optional) a Vue `icon` from the library `@adyen/ui-assets-icons-16`. * * @see BentoButton for a list of all the other props supported by each button action. */ actions: { type: Array as PropType<BentoButtonActionsList>, default: null, }, /** * Label shown next to the modal actions */ contextualLabel: { type: String, default: null, }, /** * 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 modal */ title: { type: String, default: null, }, }); const slots = useSlots(); const hasSlot = useHasSlot(slots); onMounted(() => { if (props.actions && props.actions.length > 2) { throw new Error('Not more than 2 action buttons may be provided in Bento Modal Fullscreen'); } }); </script> <script lang="ts"> /** * ModalFullscreenPage is used to render different pages of ModalFullscreen component * * @example * import { BentoModalFullscreen, BentoModalFullscreenPage } from '@adyen/bento-vue2'; * * export default { * components: { BentoModalFullscreen, BentoModalFullscreenPage }, * template: ` * <bento-modal-fullscreen active-page='page1' is-open='true'> * <bento-modal-fullscreen-page * title='Page 1' * pageId='page1' * contextual-label='Move to next page' * :actions="[ * { * title: 'Next page', * event: () => { * activePage.value = 'page2'; * }, * }]"> * Page 1 info * </bento-modal-fullscreen-page> * <bento-modal-fullscreen-page * title='Page 2' * pageId='page2' * :actions="[ * { * title: 'Save', * event: () => {}, * }]"> * Page 2 info * </bento-modal-fullscreen-page> * </bento-modal-fullscreen> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./modal-fullscreen-page.scss" />