@adyen/bento-mcp 0.0.0 → 0.1.0

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

@@ -0,0 +1,217 @@
+import { Canvas, Meta, Source } from '@storybook/blocks';
+import * as ModalFullscreenStories from './modal-fullscreen.stories';
+
+<Meta of={ModalFullscreenStories} />
+
+# Modal Fullscreen
+
+Fullscreen modal is another type of modal window that appears over any other page content, takes the full available
+space (any content underneath is not visible) and focuses user's attention exclusively on one complex task or piece of
+complex information at the moment.
+
+<Canvas of={ModalFullscreenStories.Default} />
+
+## Use Cases
+
+Modals interrupt user workflow by design. Users can not go back to previous workflow until they finish the modal task or
+dismiss it.
+
+- **Complex multi-step processes or forms**  
+  Fullscreen modal can help maintain focus and guide the user through each step without distractions.
+
+- **Space-heavy content or interactions**  
+  This component is great for content or interactions that require a larger canvas for optimal presentation (data with
+  complex legend and controls, interactive maps, etc).
+
+- **To present complex contextual, secondary or temporary information**  
+  The modal provides clear separation from the main interface making it suitable for presenting secondary, contextual or
+  temporary content without cluttering primary view (detailed previews, configurations, etc).
+
+- **To gather user feedback**  
+  Getting user feedback or conducting surveys can be done more effectively using a fullscreen modal allowing user to
+  focus on providing responses without distractions
+
+### Do not use
+
+- For repeating primary/main user workflows or pages that are permanent and are accessed by its own link - use full page
+  layout instead.
+
+- For small confirmations or displaying non-critical information
+
+- For context-specific actions that require users to reference information or interact with other parts of interface
+  simultaneously
+
+## Best practices
+
+- Keep title and contextual label short and clear
+- If the title is long or needs to have a bigger size consider placing it inside of the content container instead
+- If you use header slot ensure that it works in different resolutions
+
+- **Do not** use more than 2 actions in the header
+- **Do not** use more than 1 primary action in the header
+
+## Navigation
+
+Modal fullscreen component supports deeper level navigation (user can go deeper in hierarchy and go back).
+
+To handle navigation, every `bento-modal-fullscreen-page` should have a `pageId`, which can then be passed to the
+`activePage` prop in `bento-modal-fullscreen` 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={ModalFullscreenStories.MultiplePages} />
+
+## Properties
+
+This is the list of properties applicable to `bento-modal-fullscreen`, when using a single page, or
+`bento-modal-fullscreen-page`, when using multiple pages:
+
+| Property Name     | Description                                             |
+| ----------------- | ------------------------------------------------------- |
+| `actions`         | List of actions that will be used to render the buttons |
+| `contextualLabel` | Text label that is displayed left to the action buttons |
+| `title`           | Title of the page                                       |
+
+Some properties can only be applied to `bento-modal-fullscreen`:
+
+| Property Name | Description                                                                                |
+| ------------- | ------------------------------------------------------------------------------------------ |
+| `activePage`  | Used to determine the current page, matches with `bento-modal-fullscreen-page` pageId prop |
+| `isOpen`      | Property that controls if the fullscreen modal is open or closed                           |
+
+Additionally, there are also properties applied only to `bento-modal-fullscreen-page`:
+
+| Property Name  | Description                                                                                   |
+| -------------- | --------------------------------------------------------------------------------------------- |
+| `pageId`       | The id of the page, used with `bento-modal-fullscreen` 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 |
+
+### Title
+
+Title will appear on the left of the modal header. This property is **optional**, but it is recommended to always show a
+title. Title should be short and clear.
+
+### Contextual Label
+
+Contextual label will appear on the right side of the header, to the left of the actions. This could be used to display
+the number of items selected, when it was last saved or anything that has contextual relevancy to the modal and/or
+actions. Contextual label should be short and clear.
+
+### Actions
+
+Actions will appear on the right side of the header. It is not allowed to pass more than two actions and there should
+only be one primary action. Be mindful of the space the actions will take and keep the label on the buttons short and
+concise.
+
+## Handling the Close Event
+
+The modal offers two ways to handle being closed, giving developers either simplicity or greater control. The behavior
+depends on whether a listener for the `before-close` event is present.
+
+### Default Behavior (No `before-close` listener)
+
+By default, when the close button is clicked or `Esc` is pressed, the modal will play its closing animation and then
+automatically emit the `update:is-open` event. This is the simplest approach and works seamlessly with `v-model` or the
+`.sync` modifier.
+
+**Example:**
+
+<Source
+    dark
+    language="html"
+    code={`<template>
+    <div>
+        <bento-button @click="isOpen = true">Open Modal</bento-button>
+        <bento-modal-fullscreen :is-open.sync="isOpen" title="Default Behavior">
+            <p>The modal will close itself automatically.</p>
+        </bento-modal-fullscreen>
+    </div>
+</template>
+<script setup lang="ts">
+    import { ref } from 'vue';
+    import { BentoButton, BentoModalFullscreen } from '@adyen/bento-vue2';
+    const isOpen = ref(false);
+</script>`}
+/>
+
+### Advanced Control (With `before-close` listener)
+
+For cases where an action needs to be performed _before_ the modal starts its closing animation (e.g., to show a
+confirmation or save data), you can listen for the `before-close` event.
+
+When a `@before-close` listener is attached:
+
+1. The component emits `before-close` immediately.
+2. The closing animation is **not** played automatically.
+3. The parent component is now responsible for setting the `:is-open` prop to `false` to close the modal and trigger the
+   animation.
+
+This gives you a window to perform asynchronous actions before the modal visually closes.
+
+**Example:**
+
+<Source
+    dark
+    language="html"
+    code={`<template>
+    <div>
+        <bento-button @click="isOpen = true">Open Modal with Confirmation</bento-button>
+        <bento-modal-fullscreen :is-open="isOpen" title="Advanced Control" @before-close="handleClose">
+            <p>This modal will ask for confirmation before closing.</p>
+        </bento-modal-fullscreen>
+    </div>
+</template>
+<script setup lang="ts">
+    import { ref } from 'vue';
+    import { BentoButton, BentoModalFullscreen } from '@adyen/bento-vue2';
+    const isOpen = ref(false);
+    function handleClose() {
+        if (window.confirm('Are you sure you want to close the modal?')) {
+            // Now we tell the modal to close
+            isOpen.value = false;
+        }
+    }
+</script>`}
+/>
+
+## Slots
+
+These are the slots applicable to `bento-modal-fullscreen`, when using a single page, or `bento-modal-fullscreen-page`,
+when using multiple pages.
+
+### Header slot
+
+Header slot will be rendered in the center of the header. As with other elements, be mindful of the space the elements
+inside the slot will take on the header.
+
+This slot is meant to be used with control or status awareness components, like `bento-segmented-control` or
+`bento-stepper`.
+
+### Content/Default slot
+
+The default slot is where the content of your modal is passed. Refer to the [use cases](#use-cases) section for examples
+of the type of content that should be passed into a fullscreen modal.
+
+## Accessibility
+
+Fullscreen Modal uses the native HTML `<dialog>` element.
+
+It means that when Fullscreen 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
+
+- User can use `Tab` key to move focus to the trigger and use `Spacebar`/`Enter` to activate the sidepanel.
+- The `Tab` should change focus between interactive elements in Fullscreen Modal (if there are few). This behaviour
+  should only exist when Fullscreen Modal is open and should not extend outside of the dialog (focus trap).
+- When user uses `Esc` button, Fullscreen Modal should close and return focus to the trigger.
+    - _OR_ when user use tab key to move focus to the dismiss/close button and then use Spacebar/Enter key -> we close
+      the Fullscreen Modal and return focus to the trigger
+
+## Resources
+
+- [Figma link](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=20806-5484&m=dev)

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

@@ -0,0 +1 @@
+import { ref, watch } from 'vue'; import { isVue2 } from 'vue-demi'; import { BentoSegmentedControl } from '@/components/segmented-control'; import { BentoTypography } from '@/components/typography'; import { BentoButton, type BentoButtonActionsList } from '@/components/button'; import BentoModalFullscreen from './modal-fullscreen.vue'; import BentoModalFullscreenPage from './components/modal-fullscreen-page.vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/vue'; import BentoModal from '../modal/modal.vue'; const meta: Meta = { title: 'Modal fullscreen', component: BentoModalFullscreen, argTypes: { // Slots default: { name: 'default', description: 'Content of the fullscreen modal', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, header: { name: 'header', description: 'Header slot in the middle of the modal header', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, }, }; export default meta; type Story = StoryObj<typeof BentoModalFullscreen>; const DEFAULT_PROPS = { title: 'Fullscreen modal title', contextualLabel: 'Aditional contextual label', isOpen: false, actions: [ { title: 'Primary', event: () => true, }, { title: 'Secondary', event: () => true, }, ], }; const SEGMENTED_CONTROL_ITEMS = [ { label: 'Segment 1', value: 1 }, { label: 'Segment 2', value: 2 }, { label: 'Segment 3', value: 3 }, ]; const LONG_CONTENT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum molestie gravida velit id fermentum. Sed posuere dapibus odio vel consectetur. Vivamus sapien erat, vulputate ut porttitor sit amet, congue vel enim. Nullam laoreet nulla elit, in elementum mauris hendrerit sit amet. Fusce a magna lobortis, fermentum sapien vel, hendrerit ex. Nam vel lectus quam. Ut non vulputate est. In hac habitasse platea dictumst. Integer at lectus vestibulum, pulvinar ante in, efficitur neque. Duis sodales libero a dui scelerisque, in auctor enim malesuada. Aenean vitae velit aliquet, viverra velit et, consectetur nulla. Nulla sagittis, enim nec lacinia sagittis, quam tortor dictum arcu, consequat sodales nisi turpis sit amet diam. Etiam varius porta pharetra. Curabitur vestibulum placerat purus. Aliquam erat volutpat.'; const defaultCode = ` <template> <bento-button :aria-expanded="isOpen" @click="isOpen = !isOpen" > Open modal fullscreen </bento-button> <bento-modal-fullscreen title="Fullscreen modal title" contextual-label="Aditional contextual label" :is-open="isOpen" @update:is-open="isOpen = $event" :actions="actions" > <template #header> <!-- Put content/component you want in the header slot here, for example, a Segmented Control --> <bento-segmented-control :items="SEGMENTED_CONTROL_ITEMS" :model-value="selectedValue" @update:model-value="selectedValue = $event"/> </template> <div> <!-- Put the content of your modal here --> </div> </bento-modal-fullscreen> </template> <script setup lang="ts"> import { ref } from 'vue'; import { BentoModalFullscreen, BentoButton } from '@adyen/bento-vue2'; const isOpen = ref(false); const actions = [ { title: 'Primary', event: () => true, }, { title: 'Secondary', event: () => true, }, ]; // Segmented control props const SEGMENTED_CONTROL_ITEMS = [ { label: 'Segment 1', value: 1 }, { label: 'Segment 2', value: 2 }, { label: 'Segment 3', value: 3 }, ]; const selectedValue = ref(SEGMENTED_CONTROL_ITEMS[0].value); </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoModalFullscreen, BentoButton, BentoSegmentedControl, BentoTypography }, props: Object.keys(argTypes), template: ` <div> <bento-button :aria-expanded="isOpen" @click="isOpen = true" > Open modal fullscreen </bento-button> <bento-modal-fullscreen v-bind="args" :is-open="isOpen" @update:is-open="isOpen = $event"> <template #header> <template v-if='args.header'>{{ args.header }}</template> <bento-segmented-control v-else :items="SEGMENTED_CONTROL_ITEMS" :model-value="selectedValue" @update:model-value="selectedValue = $event"/> </template> <template v-if='args.default'>{{ args.default }}</template> <div v-else style="display: flex; height: 100%"> <div style="border-right: 1px solid #dbdee2; padding: 2em; min-height: 100%; height: max-content"> <bento-typography> <p>{{LONG_CONTENT}}</p> <p>{{LONG_CONTENT}}</p> <p>{{LONG_CONTENT}}</p> <p>{{LONG_CONTENT}}</p> </bento-typography> </div> <div style="padding: 2em"> <bento-typography> <p>{{LONG_CONTENT}}</p> <p>{{LONG_CONTENT}}</p> <p>{{LONG_CONTENT}}</p> <p>{{LONG_CONTENT}}</p> </bento-typography> </div> </div> </bento-modal-fullscreen> </div> `, setup(props) { const isOpen = ref(false); const args = isVue2 ? props : _args; const selectedValue = ref(SEGMENTED_CONTROL_ITEMS[0].value); watch( () => args.isOpen, () => { isOpen.value = args.isOpen; } ); return { args, isOpen, selectedValue, LONG_CONTENT, SEGMENTED_CONTROL_ITEMS, }; }, }), args: DEFAULT_PROPS, parameters: storybookDocsParameter(defaultCode), }; const multiplePagesCode = ` <template> <bento-button :aria-expanded="isOpen" @click="isOpen = !isOpen" > Open modal fullscreen </bento-button> <bento-modal-fullscreen :is-open="isOpen" :active-page="activePage" @update:active-page="activePage = $event" @update:is-open='isOpen = $event' > <bento-modal-fullscreen-page v-bind="page1"> <bento-typography> <!-- Put the content of your page here --> </bento-typography> </bento-modal-fullscreen-page> <bento-modal-fullscreen-page v-bind="page2" > <bento-typography> <!-- Put the content of your page here --> </bento-typography> </bento-modal-fullscreen-page> <bento-modal-fullscreen-page v-bind="page3" > <bento-typography> <!-- Put the content of your page here --> </bento-typography> </bento-modal-fullscreen-page> <bento-modal-fullscreen-page v-bind="page4"> <bento-typography> <!-- Put the content of your page here --> </bento-typography> </bento-modal-fullscreen> </template> <script setup lang="ts"> import { ref } from 'vue'; import { BentoModalFullscreen, BentoModalFullscreenPage, BentoButton, BentoTypography } from '@adyen/bento-vue2'; const isOpen = ref(false); const activePage = ref('intro'); const page1 = { pageId: 'page1', title: 'Page 1', actions: [ { title: 'Go to next page', event: () => { activePage.value = 'page2'; }, } ] }; const page2 = { pageId: 'page2', title: 'Page 2', actions: [ { title: 'Go to next page', event: () => { activePage.value = 'page3'; }, } ] }; const page3 = { pageId: 'page3', title: 'Page 3', actions: [ { title: 'Go to next page', event: () => { activePage.value = 'page4'; }, } ] }; const page4 = { pageId: 'page4', title: 'Page 4', actions: [ { title: 'Finish', event: () => { isOpen.value = false; }, } ], previousPage: null, }; </script> `; export const MultiplePages: Story = { render: (_args, { argTypes }) => ({ components: { BentoModalFullscreen, BentoModalFullscreenPage, BentoButton, BentoTypography }, props: Object.keys(argTypes), template: ` <div> <bento-button :aria-expanded="isOpen" @click="isOpen = true" > Open modal fullscreen </bento-button> <bento-modal-fullscreen v-bind="args" :is-open="isOpen" :active-page="activePage" @update:active-page="activePage = $event" @update:is-open='isOpen = $event'> <bento-modal-fullscreen-page v-bind="intro"> <bento-typography style="padding: 24px"> {{ LONG_CONTENT }} <p>{{LONG_CONTENT}}</p> <p>{{LONG_CONTENT}}</p> <p>{{LONG_CONTENT}}</p> <p>{{LONG_CONTENT}}</p> </bento-typography> </bento-modal-fullscreen-page> <bento-modal-fullscreen-page v-bind="newProfile" > <bento-typography style="padding: 24px"> This page has some info about creating a new profile </bento-typography> </bento-modal-fullscreen-page> <bento-modal-fullscreen-page v-bind="editProfile" > <bento-typography style="padding: 24px"> This is where you edit your profile </bento-typography> </bento-modal-fullscreen-page> <bento-modal-fullscreen-page v-bind="newProfileForm"> <bento-typography style="padding: 24px"> This is where you create a new profile </bento-typography> </bento-modal-fullscreen-page> <bento-modal-fullscreen-page v-bind="success"> <bento-typography style="padding: 24px"> Your profile is created </bento-typography> </bento-modal-fullscreen-page> </bento-modal-fullscreen> </div> `, setup(props) { const isOpen = ref(false); const activePage = ref('intro'); const args = isVue2 ? props : _args; watch( () => args.isOpen, () => { isOpen.value = args.isOpen; } ); watch( () => args.activePage, () => { activePage.value = args.activePage; } ); const intro = { pageId: 'intro', title: 'Intro', actions: [ { title: 'New profile', event: () => { activePage.value = 'newProfile'; }, }, { title: 'Edit profile', event: () => { activePage.value = 'editProfile'; }, }, ], contextualLabel: 'What do you wanna do?', }; const newProfile = { pageId: 'newProfile', title: 'New profile', actions: [ { title: 'Go to form', event: () => { activePage.value = 'newProfileForm'; }, }, ], }; const editProfile = { pageId: 'editProfile', title: 'Edit profile', actions: [ { title: 'Save', event: () => { activePage.value = 'success'; }, }, { title: 'Cancel', event: () => { isOpen.value = false; }, }, ], }; const newProfileForm = { pageId: 'newProfileForm', title: 'New profile form', actions: [ { title: 'Save', event: () => { activePage.value = 'success'; }, }, { title: 'Cancel', event: () => { isOpen.value = false; }, }, ], }; const success = { pageId: 'success', title: 'Success!', actions: [ { title: 'Delete', critical: true, event: () => { isOpen.value = false; action('delete')(); }, }, { title: 'Cancel', event: () => { isOpen.value = false; }, }, ], previousPage: null, }; return { args, activePage, intro, newProfile, newProfileForm, success, editProfile, isOpen, LONG_CONTENT, }; }, }), args: { ...DEFAULT_PROPS, activePage: 'intro' }, parameters: storybookDocsParameter(multiplePagesCode), }; export const withBeforeClose: Story = { render: (_args, { argTypes }) => ({ components: { BentoModalFullscreen, BentoModalFullscreenPage, BentoButton, BentoTypography, BentoModal, BentoSegmentedControl, }, props: Object.keys(argTypes), template: ` <div> <bento-button :aria-expanded="isOpen" @click="isOpen = !isOpen"> Open modal fullscreen </bento-button> <bento-modal-fullscreen title="Fullscreen modal title" contextual-label="Click on the 'X' to get the confirmation modal" :is-open="isOpen" @before-close="onClose" @click="onClose" @update:is-open="isOpen = $event" > <div> <!-- Put the content of your modal here --> <p>This is the content of the fullscreen modal.</p> <p>Click on the "X" (close) button to get the confirmation modal.</p> </div> </bento-modal-fullscreen> <bento-modal content="Are you sure you want to proceed with this action?" variant="dialog" dialog-type="confirmation" :actions="dialogActions" :is-open="isConfirmationOpened" @close-modal="closeModal" > Modal Title </bento-modal> </div> `, setup() { const isOpen = ref(false); const isConfirmationOpened = ref(false); const onClose = () => { openModal(); }; const dialogActions: BentoButtonActionsList = [ { title: 'Confirm', event: () => { isOpen.value = false; closeModal(); }, }, ]; const closeModal = () => { isConfirmationOpened.value = false; }; const openModal = () => { isConfirmationOpened.value = true; }; return { dialogActions, isConfirmationOpened, isOpen, onClose, closeModal, openModal, }; }, }), }; 

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

@@ -0,0 +1 @@
+<template> <dialog :id="modalFullscreenId" ref="modal" class="b-modal-fullscreen" :class="conditionalClasses" data-dialog-element="modal-fullscreen" @animationend="closeModalAfterAnimation" @keydown.esc.prevent="closeModal" > <bento-focus-trap v-if="internalIsOpen" class="b-modal-fullscreen__wrapper"> <template v-if="props.activePage"> <slot /> </template> <bento-modal-fullscreen-page v-else :actions="actions" :contextual-label="contextualLabel" :title="title"> <template v-if="hasSlot('default')" #default> <slot name="default"></slot> </template> <template v-if="hasSlot('header')" #header> <slot name="header"></slot> </template> </bento-modal-fullscreen-page> <div class="b-modal-fullscreen__close-button"> <bento-button variant="tertiary" :aria-label="t('close')" @click="closeModal"> <template #iconLeft><cross-icon :aria-hidden="true" /></template> </bento-button> </div> </bento-focus-trap> <!-- Enable the toast inside the fullscreen-modal --> <template v-if="isOpen"> <bento-toast /> </template> </dialog> </template> <script setup lang="ts"> import { computed, nextTick, type PropType, provide, ref, toRefs, useSlots, watch } from 'vue'; import { isVue2 } from 'vue-demi'; import { BentoToast } from '@/components/toast'; import { BentoButton, type BentoButtonActionsList } from '@/components/button'; import { BentoFocusTrap } from '@/components/focus-trap'; import BentoModalFullscreenPage from './components/modal-fullscreen-page.vue'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import { useI18n } from '@/utils/ts/i18n'; import { generateUid } from '@/core/utils/ts'; import { useHasSlot } from '@/composables'; import { useListeners } from '@/composables/use-listeners'; import { MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY } from '@/components/modal-fullscreen/modal-fullscreen.keys'; import messages from './messages.json'; 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 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, }, /** * The id of the current active page * Should be the same as the pageId of the BentoModalFullscreenPage to be displayed */ activePage: { type: String, default: null, }, /** * Label shown next to the modal actions */ contextualLabel: { type: String, default: null, }, /** * Controls the modal's state from the outside. Set it to true to open the modal */ isOpen: { type: Boolean, default: null, }, /** * Title of the modal */ title: { type: String, default: null, }, }); const emit = defineEmits<{ /** * Handles closing the modal. The behavior changes depending on whether a `before-close` event listener is present. * * - **When listening for the `before-close` event:** * The `before-close` event is emitted immediately, skipping the animation. This allows for logic to run before the modal closes. * The `isOpen` prop must then be set to `false` to trigger the closing animation. * * - **When not listening for the `before-close` event:** * The closing animation plays, then `update:is-open` is emitted with `false`. * This is the default behavior, compatible with `v-model` or `.sync` on the `isOpen` prop. */ (e: 'before-close'): void; /** * Emits update event when page is changed internally */ (e: 'update:active-page', page: string): void; /** * Emits 'update:is-open' event when the modal is closed */ (e: 'update:is-open', isOpen: boolean): void; }>(); // Refs const { activePage, isOpen } = toRefs(props); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const modal = ref(null); const isClosing = ref(false); const modalFullscreenId = generateUid('modal-fullscreen'); const internalIsOpen = ref(false); const listeners = useListeners(); const slots = useSlots(); const hasSlot = useHasSlot(slots); // Animation styling const conditionalClasses = computed(() => ({ 'b-modal-fullscreen--hide': isClosing.value, })); // 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; internalIsOpen.value = false; emit('update:is-open', false); } }; /** * Emits the `beforeClose` event, if it is being listened to, * before closing the modal and omits the closing animation. * The animation will be triggered by the change of the `isOpen` prop instead. * * If no listener for the `before-close`, then the animation will be triggered, * which will close the modal and emit the `update:is-open` event instead, after it was closed. */ function closeModal() { /** * Vue3 appends the prefix "on" and changes to camelCase */ const eventName = isVue2 ? 'before-close' : 'onBeforeClose'; if (listeners[eventName]) { emit('before-close'); return; } startCloseModalAnimation(); } const startCloseModalAnimation = () => { if (!modal.value.open) { return; } isClosing.value = true; }; // Watching isOpen prop to toggle open/close the dialog element watch( () => isOpen.value, async () => { // Wait for modal ref to be created await nextTick(); if (!modal.value) { return; } if (isOpen.value) { internalIsOpen.value = true; modal.value.showModal(); if (!previousPages.value.length) { previousPages.value.push(activePage.value); } } else if (modal.value.open) { startCloseModalAnimation(); } }, { immediate: true } ); // lets children components know they are inside a Modal (dialog element) provide(MODAL_FULLSCREEN_DIALOG_ID_INJECTION_KEY, modalFullscreenId); // Pages const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER); const pages = ref<Array<string>>([]); const previousPages = ref([]); const updatePage = page => emit('update:active-page', page); provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, { activePage, animation, isOpen: internalIsOpen, pages, previousPages, updatePage, }); // 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) }; }; provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage); </script> <script lang="ts"> /** * Fullscreen modal takes full available space (no content underneath is visible) and focuses the user's attention exclusively on one complex task or piece of complex information. * * @example * import { BentoModalFullscreen } from '@adyen/bento-vue2'; * * export default { * components: { BentoModalFullscreen }, * template: ` * <bento-modal-fullscreen * :is-open="isOpen" * @update:is-open="isOpen = $event" * title='Fullscreen modal title' * contextual-label='Contextual label' * :actions="[{ title: 'Action', event: () => {}]" * > * <template #header>{{ header slot }}</template> * {{ content }} * </bento-modal-fullscreen> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./modal-fullscreen.scss" /> 

package/dist/assets/components/pagination/components/pagination-context/pagination-context.vue

@@ -0,0 +1 @@
+<template> <div class="b-pagination-context"> <bento-typography v-if="totalPages > 1" el="div"> <component :is="i18nComponent" v-bind="getI18nProps('pageNumber')" tag="div"> <template #page> <bento-dropdown :id="dropdownId" :aria-label="t('pageNumber', { page: n(page) })" class="b-pagination-context__dropdown" condensed :items="listOfAvailablePages" :model-value="page" :virtual-scroll="virtualScroll" @update:model-value="onPageSelectChange" /> </template> </component> </bento-typography> <bento-typography v-else-if="totalPages === 1" el="span"> {{ t('pageOneOfOne') }} </bento-typography> <bento-typography v-else el="span"> {{ t('pageNumber', { page: n(page) }) }} </bento-typography> </div> </template> <script setup lang="ts"> import { computed } from 'vue'; import { BentoTypography } from '@/components/typography'; import { BentoDropdown } from '@/components/dropdown'; import { type BentoListboxOptionItem } from '@/types/listbox'; import { generateUid } from '@/core/utils/ts'; import messages from './messages.json'; import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults( defineProps<{ /** * The current page number of the pager. */ page?: number; /** * The total number of items the pager is paging through. */ totalPages?: number; /** * Enables virtual scrolling on all dropdowns if set to true. */ virtualScroll?: boolean; }>(), { page: 1, totalPages: null, virtualScroll: false, } ); const emit = defineEmits<{ (e: 'page-selected', value: string | number); }>(); const { t, n } = useI18n<{ message: MessageSchema }>({ messages }); const dropdownId = generateUid('bento-pagination-context-current-page'); const onPageSelectChange = (selectedPage: string | number) => emit('page-selected', selectedPage); const i18nComponent = getI18nComponent(); // Generate a list of pages from 1 to "totalPages" const transformIntoOption = (value: number): BentoListboxOptionItem => ({ label: n(value), value, }); const transformToPageNumber = (_, index) => index + 1; const listOfAvailablePages = computed(() => Array.from(new Array(props.totalPages), transformToPageNumber).map(transformIntoOption) ); </script> <script lang="ts"> export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./pagination-context.scss" /> 

package/dist/assets/components/pagination/components/pagination-controls/pagination-controls.vue

@@ -0,0 +1 @@
+<template> <ul class="b-pagination-controls"> <li class="b-pagination-controls__item"> <!-- Navigate to the first page --> <bento-button :disabled="isCurrentPageFirst" variant="tertiary" condensed @click="navigate(1)"> <template #iconLeft> <skip-left :svg-title="t('navigateToTheFirstPage')" /> </template> </bento-button> </li> <li class="b-pagination-controls__item"> <!-- Navigate to the previous page --> <bento-button :disabled="isCurrentPageFirst" variant="tertiary" condensed @click="navigate(page - 1)"> <template #iconLeft> <chevron-left :svg-title="t('navigateToThePreviousPage')" /> </template> </bento-button> </li> <li class="b-pagination-controls__item"> <!-- Navigate to the next page --> <bento-button :disabled="isNextButtonDisabled" variant="tertiary" condensed @click="navigate(page + 1)"> <template #iconLeft> <chevron-right :svg-title="t('navigateToTheNextPage')" /> </template> </bento-button> </li> <li class="b-pagination-controls__item"> <!-- Navigate to the last page --> <bento-button :disabled="isLastPageButtonDisabled" variant="tertiary" condensed @click="navigate(totalPages)" > <template #iconLeft> <skip-right :svg-title="t('navigateToTheLastPage')" /> </template> </bento-button> </li> </ul> </template> <script setup lang="ts"> import { computed } from 'vue'; import { BentoButton } from '@/components/button'; import { useI18n } from '@/utils/ts/i18n'; import SkipLeft from '@adyen/ui-assets-icons-16/vue/skip-left'; import SkipRight from '@adyen/ui-assets-icons-16/vue/skip-right'; import ChevronLeft from '@adyen/ui-assets-icons-16/vue/chevron-left-small'; import ChevronRight from '@adyen/ui-assets-icons-16/vue/chevron-right-small'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults( defineProps<{ /** * Use to determine if the pager has a "next page". */ hasNext?: boolean; /** * The current page number of the pager. */ page: number; /** * The current page number of the pager. */ totalPages?: number; }>(), { hasNext: null, totalPages: null, } ); const emit = defineEmits<{ (e: 'navigate', value: number); }>(); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const isCurrentPageFirst = computed(() => props.page === 1); const isCurrentPageLast = computed(() => props.page === props.totalPages); const isNextButtonDisabled = computed(() => { const hasNoNextPage = !props.hasNext; return hasNoNextPage || isCurrentPageLast.value; }); const isLastPageButtonDisabled = computed(() => { const hasNoNextPage = !props.hasNext; const hasNoTotalPagesNumber = !props.totalPages; return hasNoNextPage || isCurrentPageLast.value || hasNoTotalPagesNumber; }); const navigate = (pageArg: number) => { emit('navigate', pageArg); }; </script> <script lang="ts"> export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./pagination-controls.scss" /> 

package/dist/assets/components/pagination/components/pagination-results-per-page/pagination-results-per-page.vue

@@ -0,0 +1 @@
+<template> <div class="b-pagination-results-per-page"> <bento-typography el="div"> <component :is="i18nComponent" v-bind="getI18nProps(translationPathKey)" class="b-pagination-results-per-page__dropdown-container" tag="div" :plural="totalCount" > <template #itemCount> <bento-dropdown :id="dropdownId" :aria-label="t(translationPathKey, { itemCount: itemsPerPage, totalCount })" class="b-pagination-results-per-page__dropdown" condensed :items="predefinedDropdownOptions" :model-value="itemsPerPage" @update:model-value="onSelectChange" /> </template> <template v-if="!!totalCount" #totalCount>{{ totalCount }}</template> </component> </bento-typography> </div> </template> <script setup lang="ts"> import { computed } from 'vue'; import { BentoTypography } from '@/components/typography'; import { BentoDropdown } from '@/components/dropdown'; import { generateUid } from '@/core/utils/ts'; import { getI18nComponent, getI18nProps, useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t, n } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults( defineProps<{ /** * The amount of items the pager is paging through. */ itemsPerPage?: number; /** * The total number of items the pager is paging through. */ totalCount?: number; }>(), { itemsPerPage: 50, totalCount: null, } ); const emit = defineEmits<{ (e: 'select', value: number); }>(); const dropdownId = generateUid('b-pagination-context-number-elements'); const predefinedDropdownOptions = computed(() => [ { label: n(10), value: 10 }, { label: n(20), value: 20 }, { label: n(50), value: 50 }, { label: n(75), value: 75 }, { label: n(100), value: 100 }, ]); const i18nComponent = getI18nComponent(); const onSelectChange = (selectedNumberOfResults: number) => { emit('select', selectedNumberOfResults); }; const translationPathKey = computed(() => (props.totalCount ? 'showingItemsWithTotal' : 'showingItems')); </script> <script lang="ts"> export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./pagination-results-per-page.scss" /> 

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

@@ -0,0 +1,116 @@
+import { Canvas, Story, Meta } from '@storybook/blocks';
+import * as ComponentStories from './pagination.stories';
+
+<Meta of={ComponentStories} />
+
+# Pagination
+
+The pagination component is used to navigate between a set of results, as well as to select how many to display per
+page. It is also internally used in the data grid component.
+
+<Canvas of={ComponentStories.Default} />
+
+## Use Cases
+
+Use a pagination component when there are too many results to show on one page. What constitutes “too many results”
+varies case by case and can be influenced by:
+
+-   System load times
+-   Amount of data in each entry
+-   Screen space So speak to your product designer and decide accordingly based on your use case.
+
+### Customize your pagination
+
+We provide a series of customizations for the pagination component that can better accommodate your use cases. These
+are:
+
+#### Number of elements per page
+
+You can decide how many elements to show per page by passing a value to the `size` dropdown (`Showing .. of .. items`).
+This dropdown comes with a predefined set of values, namely 10, 20, 50, 75 and 100 - with the default value being 20. On
+smaller screens thisdropdown is not shown anymore. In this case, the number of results (`Page .. of ..`) is displayed.
+
+##### Hide Page Size
+
+You can hide this element with this modifier property set to true.
+
+#### Slot
+
+You can use the default slot to add more content to the pagination on the left side. The slot will only be visible if
+`hidePageSize` is true, as the slot takes up the same space in the component.
+
+#### Total count dropdown
+
+You can display a dedicated dropdown showing the total number of pages (`Page .. of ..`) by passing the `totalCount`
+property in order to make the navigation for the user more easy.
+
+<Canvas of={ComponentStories.Advanced} />
+
+#### Navigating pages
+
+You can navigate to a specific page either by using the dedicated dropdown (`Page .. of ..`), or by going page by page
+using the arrows. There is also the possibility to go to the first and the last page with the dedicated arrows. When
+it’s not possible to go further back or forth, the respective arrows get disabled. In case there is only one page to
+display, all arrows are disabled and there is no dropdown shown.
+
+#### Setting the current visible page
+
+You can set the page to display when the component is mounted by passing an appropriate `page` value. Note that you need
+to set this value accordingly given the range of valid values you have based on your total number of items.
+
+### Do not use
+
+When using the pagination component, do not:
+
+-   Set it with a `hasNext` property if there is only one page, as this will display an active forward arrow which won't
+    do anything when clicked upon.
+-   Set it with a current page value which is not equal or greater than one and is greater than the maximum value
+    allowed for your use case.
+
+## Variations
+
+### Total count
+
+if set, displays the pagination with a dropdown displaying the pages total count (`Page .. of ..`). It should be equal
+to the total number of items the pager is paging through.
+
+## Modifiers
+
+### Has next
+
+The `hasNext` property tells the pagination component that there is a next page and that the user can navigate forward.
+You need to set this value yourself accordingly.
+
+## Accessibility 🚧
+
+The full accessibility implementation for this component is still under development, so changes to this section are to
+be expected. However, as for all the other `bento` components we are adhering to
+[WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/) standard and plan on implementing a standard
+[pagination pattern](https://design-system.w3.org/components/pagination.html) paired with a
+[menubar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/).
+
+### Keyboard interaction
+
+Since the pagination component is built using a `nav` tag and its basic building blocks are made up by `bento-buttons`,
+the pagination is reachable via keyboard navigation and is placed in the normal flow of the page.
+
+Note that the `bento-dropdown` component is still a work in progress and thus accessibility support is not provided for
+it yet.
+
+| Keyboard interaction | Output                                                                                         |
+| -------------------- | ---------------------------------------------------------------------------------------------- |
+| `Tab`                | Moves focus to the pagination component and its children or away from it.                      |
+| `Space`              | When focus is on any child element within the pagination component, it activates said element. |
+
+### Roles, states and properties
+
+| ARIA attribute | is automatic?                                                                                                                                        | fallback used | manual override                                                    |
+| -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | ------------------------------------------------------------------ |
+| `aria-label`   | No, for now you need to pass in a value through the dedicated prop. In the future, it will have an automatic value in the appropriate locale.        | -             | The `aria-label` prop can be passed to provide an accessible name. |
+| `role`         | Yes, through the semantic `nav` element. However, this will be revised in the near future given the official guidelines to make it fully accessible. | -             | -                                                                  |
+
+## Resources
+
+-   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=1951-30261&t=NHLd9msx8lGq3NNF-0)
+-   [WAI-ARIA menubar pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/)
+-   [W3C accessible pagination](https://design-system.w3.org/components/pagination.html)

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

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import { BentoPagination } from '@/components/pagination'; import { reactive, watch } from 'vue'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import './pagination.stories.scss?module'; // Override viewports const INITIAL_VIEWPORTS = { cellphone: { name: 'Cellphone', styles: { height: '812px', width: '375px', }, type: 'mobile', }, tablet: { name: 'Tablet', styles: { height: '360px', width: '640px', }, type: 'tablet', }, }; const meta: Meta = { title: 'Pagination', component: BentoPagination, parameters: { viewport: { viewports: INITIAL_VIEWPORTS, }, }, argTypes: { // Enum size: { control: { disable: true } }, page: { control: { disable: true } }, // Event 'items-page': { table: { type: { summary: '(itemsPerPage: number) => void' }, }, control: { disable: true }, }, navigate: { table: { type: { summary: '(pageNumber: number, size?: number) => void' }, }, control: { disable: true }, }, 'update:page': { table: { type: { summary: '(pageNumber: number) => void' }, }, control: { disable: true }, }, 'update:size': { table: { type: { summary: '(itemsPerPage: number) => void' }, }, control: { disable: true }, }, // Slots default: { control: { type: 'text' }, }, }, }; export default meta; type Story = StoryObj<typeof BentoPagination>; const defaultCode = ` <template> <bento-pagination :size="itemsPerPage" :page="currentPage" @navigate="clickNavigate" /> </template> <script lang="ts" setup> const pageData = reactive({ page: 2, size: 20 }); const clickNavigate = (page: number, size: number) => { pageData.page = page; pageData.size = size; }; watch([() => pageData.page, () => pageData.size], () => { makeAPICall(pageData); }); </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoPagination }, props: Object.keys(argTypes), setup(props) { const pageData = reactive({ page: 2, size: 20 }); const clickNavigate = (page: number, size: number) => { action('navigate')(page, size); pageData.page = page; pageData.size = size; }; const updateItemsPerPage = (size: number) => { action('items-page')(size); }; watch([() => pageData.page, () => pageData.size], () => { action('watch-make-api-call')(pageData); }); return { // Values args: isVue2 ? props : _args, pageData, // Methods clickNavigate, updateItemsPerPage, }; }, template: ` <div class="b-pagination-story"> <bento-pagination v-bind="args" :size="pageData.size" :page="pageData.page" @navigate="clickNavigate" @items-page="updateItemsPerPage" > <template v-if="args.default">{{ args.default }}</template> </bento-pagination> </div> `, }), args: { hasNext: true, }, parameters: storybookDocsParameter(defaultCode), }; const advancedCode = ` <bento-pagination :size="itemsPerPage" :page="currentPage" :totalCount="100" @navigate="clickNavigate" /> `; export const Advanced: Story = { ...Default, args: { hasNext: true, size: 20, totalCount: 100, }, parameters: storybookDocsParameter(advancedCode), }; 

package/dist/assets/components/pagination/pagination.vue

@@ -0,0 +1 @@
+<template> <div class="b-pagination"> <nav :aria-label="computedAriaLabel" class="b-pagination__navigation" :class="navigationConditionalClasses()"> <bento-pagination-results-per-page v-if="!hidePageSize" class="b-pagination__results-per-page" :items-per-page="size" :total-count="totalCount" @select="onItemsPerPageChange" /> <bento-typography v-else-if="hasSlot('default')"><slot /></bento-typography> <div class="b-pagination__page-navigator"> <bento-pagination-context class="b-pagination__context" :total-pages="totalPages" :page="page" :total-count="totalCount" :virtual-scroll="virtualScroll" @page-selected="onPageSelected" /> <div class="b-pagination__divider"></div> <bento-pagination-controls class="b-pagination__controls" :has-next="hasNext" :page="page" :total-pages="totalPages" @navigate="navigate" /> </div> </nav> </div> </template> <script setup lang="ts"> import { computed, ref, toRefs, useAttrs, useSlots } from 'vue'; import { BentoTypography } from '@/components/typography'; import BentoPaginationResultsPerPage from './components/pagination-results-per-page/pagination-results-per-page.vue'; import BentoPaginationContext from './components/pagination-context/pagination-context.vue'; import BentoPaginationControls from './components/pagination-controls/pagination-controls.vue'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { useHasSlot } from '@/composables'; import type { BentoPaginationProps } from './pagination.types'; const props = withDefaults(defineProps<BentoPaginationProps>(), { ariaLabel: null, hasNext: null, hidePageSize: false, page: 1, size: 20, totalCount: null, virtualScroll: false, }); const emit = defineEmits<{ /** * Triggered when the navigation controls are clicked or the items per page is changed (i.e. when the arrow buttons to the * rightmost of the screen or either dropdown is updated). It indicates to which page it should go next and also the page size. */ (e: 'navigate', page: number, items?: number): void; /** * Triggered when the number of items per page is changed from the left hand dropdown. * It indicates the new number of items that will be displayed. */ (e: 'items-page', size: number): void; /** * Triggered when the navigation controls are clicked, whether the arrow buttons to the * right most of the screen or the dropdown on the right hand is updated. * It indicates to which page it should go next * (easily achieved using the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier)) * e.g. `:page.sync="currentPage"` */ (e: 'update:page', page: number): void; /** * Triggered when the number of items per page is changed from the left hand dropdown. * It indicates the new number of items that will be displayed. * (easily achieved using the [sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier)) * e.g. `:size.sync="itemsPerPage"` */ (e: 'update:size', size: number): void; }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const attrs = useAttrs(); const ariaLabelAttribute = ref(attrs['aria-label']); const { ariaLabel } = toRefs(props); const computedAriaLabel = useAriaLabel({ ariaLabel: ariaLabelAttribute.value as string, // TODO: take this line away when the aria-label props is removed label: ariaLabel, }); const totalPages = computed(() => !props.totalCount || !props.size ? null : Math.ceil(props.totalCount / props.size) ); const navigate = (pageArg: number, itemsPerPage?: number) => { if (props.hidePageSize) { emit('navigate', pageArg); } else { emit('navigate', pageArg, itemsPerPage ?? props?.size); } emit('update:page', pageArg); }; const onPageSelected = (pageNumber: number) => { navigate(pageNumber); }; const onItemsPerPageChange = (elements: number) => { emit('items-page', elements); emit('update:size', elements); // Always go to first page when the // number of items page changes navigate(1, elements); }; const navigationConditionalClasses = () => ({ 'b-pagination__navigation--only-page-navigator': !hasSlot('default') && props.hidePageSize, }); </script> <script lang="ts"> /** * Paginiation component to help users page through data sets. * * There are two ways of doing navigation in this component: * 1. (Basic) You tell the component if there is a next page (hasNext) * 2. (Enhanced) You tell the component: * - How many total items exist (totalCount) * - The max number of items that you show/fetch per page (size) * - In this case you should not set the hasNext props * * If you have the data available and opt to use the Enhanced way you get extra controls: * - Page dropdown selector * - Last page button * - "Showing 10 of 200 items" text * * @usage * import { BentoPagination } from '@adyen/bento-vue2'; * * export default { * components: { BentoPagination }, * template: ` * <bento-pagination :has-next="isNextPage" /> * `, * } */ export default {}; </script> <style lang="scss" scoped src="./pagination.scss" /> 

package/dist/assets/components/payment-method/payment-method.docs.mdx

@@ -0,0 +1,34 @@
+import { Canvas, Story, Meta } from '@storybook/blocks';
+import * as ComponentStories from './payment-method.stories';
+
+<Meta of={ComponentStories} />
+
+# PaymentMethod
+
+A payment method component that displays payment method types including an icon and a label.
+
+<Canvas of={ComponentStories.Default} />
+
+## Use Cases
+
+Use a PaymentMethod if:
+
+-   Displaying a list of available paymenet method types for a user to pick from.
+-   Display payment method types in a table cell.
+
+### Do not use
+
+-   Use to display just the payment icon, instead the UI Assets library's
+    [payment icons](https://adyen-ui-assets.netlify.app/?path=/story/packages-ui-assets-payment-method-icons--icons) for
+    this.
+
+## Types
+
+To determine which payment method icon and label to display the component accepts any string but you can use the
+exported `IconsEnum` enum from the `@adyen/ui-assets-payment-method-icons`.
+
+<Canvas of={ComponentStories.Default} />
+
+## Resources
+
+-   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?type=design&node-id=1938%3A28450&t=hf2vOPqcagtdibwS-1)

package/dist/assets/components/payment-method/payment-method.stories.ts

@@ -0,0 +1 @@
+import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoPaymentMethod from './payment-method.vue'; const meta: Meta = { title: 'Payment method', component: BentoPaymentMethod, }; export default meta; type Story = StoryObj<typeof BentoPaymentMethod>; const defaultCode = ` <bento-payment-method type="ideal" label="iDeal" /> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoPaymentMethod }, props: Object.keys(argTypes), template: ` <bento-payment-method v-bind="args"/> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { type: 'ideal', label: 'iDEAL', }, parameters: storybookDocsParameter(defaultCode), }; 

package/dist/assets/components/payment-method/payment-method.vue

@@ -0,0 +1 @@
+<template> <div class="b-payment-method"> <div class="b-payment-method__icon-container"> <img v-if="type !== 'Unknowncard' && !hasErroredOnImage" aria-hidden="true" class="b-payment-method__icon" :class="conditionalIconClasses" :alt="label" :src="paymentMethodIconSrc" @error="onSrcError" /> <unknown-card-icon v-else :svg-title="label" aria-hidden="true" /> </div> <div v-if="label" class="b-payment-method__label"> <span v-if="isSummaryGridLayout">{{ label }}</span> <bento-typography v-else el="span">{{ label }}</bento-typography> </div> </div> </template> <script setup lang="ts"> import { computed, defineComponent, inject, ref, toRef, watch } from 'vue'; import { BentoTypography } from '@/components/typography'; import { SUMMARY_GRID_LAYOUT_INJECTION_KEY } from '@/components/summary-grid/summary-grid.keys'; import { type BentoSummaryGridLayout } from '@/components/summary-grid'; import { usePaymentIcon } from './composables/use-payment-icon/use-payment-icon'; import type { BentoPaymentMethodProps } from './payment-method.types'; import UnknownCardIcon from '@adyen/ui-assets-payment-method-icons/vue/unknowncard'; const props = withDefaults(defineProps<BentoPaymentMethodProps>(), { label: null, small: false, type: 'Unknowncard', }); const type = toRef(props, 'type'); const hasErroredOnImage = ref(false); const paymentMethodIconSrc = usePaymentIcon(type); const conditionalIconClasses = computed(() => ({ 'b-payment-method__icon--small': props.small, })); /* == Summary-grid styles == */ const registerPaymentMethodInSummaryGrid: BentoSummaryGridLayout = inject( SUMMARY_GRID_LAYOUT_INJECTION_KEY, () => ({ isSummaryGridLayout: false, }) ); const { isSummaryGridLayout } = registerPaymentMethodInSummaryGrid(); /** * This funciton is fired if the payment image source is not valid and has thrown an error. */ const onSrcError = () => { hasErroredOnImage.value = true; }; // Reset the image error to be able to load the new payment type watch( () => type.value, (newType, oldType) => { if (newType !== oldType) { hasErroredOnImage.value = false; } } ); </script> <script lang="ts"> /** * A payment method type component to display the type's icon and label. * * @example * import { BentoPaymentMethod} from '@adyen/bento-vue2'; * * export default { * components: { BentoPaymentMethod }, * template: ` * <bento-payment-method type="ideal" /> * ` * } */ export default defineComponent({ name: 'bento-payment-method', }); </script> <style lang="scss" scoped src="./payment-method.scss" /> 

package/dist/assets/components/popover/components/popover-dismiss-button/popover-dismiss-button.vue

@@ -0,0 +1 @@
+<template> <bento-button :class="conditionalClass" variant="tertiary" @click="$emit('click')"> <template #iconLeft> <cross-icon svg-title="dismiss" /> </template> </bento-button> </template> <script lang="ts"> import { computed, defineComponent } from 'vue'; import BentoButton from '@/components/button/button.vue'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; export default defineComponent({ name: 'bento-popover-dismiss-button', components: { BentoButton, CrossIcon }, props: { onImage: { type: Boolean, default: false, }, }, setup(props) { const conditionalClass = computed(() => ({ 'b-popover-dismiss-button--on-image': props.onImage })); return { // Values conditionalClass, }; }, }); </script> <style lang="scss" scoped src="./popover-dismiss-button.scss" /> 

package/dist/assets/components/popover/components/popover-image/popover-image.vue

@@ -0,0 +1 @@
+<template> <img class="b-popover-image" :src="src" :alt="alt" /> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'bento-popover-image', props: { /** * URL to image. * For more details, see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-src */ src: { type: String, required: true }, /** * Explanatory text for the image */ alt: { type: String, required: true }, }, }); </script> <style lang="scss" scoped> .b-popover-image { height: 100%; object-fit: cover; width: 100%; } </style> 

package/dist/assets/components/popover/components/popover-title/popover-title.vue

@@ -0,0 +1 @@
+<template> <bento-typography :strongest="isStrongest" :variant="titleVariant" el="span"> {{ title }} </bento-typography> </template> <script lang="ts"> import { computed, defineComponent } from 'vue'; import { BentoTypography, BentoTypographyVariant } from '@/components/typography'; export default defineComponent({ components: { BentoTypography }, props: { /** * Indicates if the popover contains an image. */ isImageTitle: { type: Boolean, default: false }, /** * Indicates the title you want to give the popover. */ title: { type: String, default: null }, }, setup(props) { // Use strongest only when it has no image const isStrongest = computed(() => !props.isImageTitle); // If an image is present, change the variant from BODY to SUBTITLE and remove the "strongest" property of the title const titleVariant = computed(() => props.isImageTitle ? BentoTypographyVariant.SUBTITLE : BentoTypographyVariant.BODY ); return { // Values isStrongest, titleVariant, }; }, }); </script> 

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

@@ -0,0 +1,89 @@
+import { Canvas, Story, Meta } from '@storybook/blocks';
+import * as ComponentStories from './popover.stories';
+
+<Meta of={ComponentStories} />
+
+# Popover
+
+Popover is a contextual overlay container that is shown above other content and is triggered by user’s interaction with
+control or interactive area.
+
+<Canvas of={ComponentStories.Default} />
+
+## Use Cases
+
+Use popover when you need:
+
+-   Provide a piece of non-critical extra information (informative, educative).
+-   Provide contextual to trigger functionality.
+
+### Do not use
+
+If you need to display simple, concise and static text information, use a tooltip instead.
+
+## Modifiers
+
+### Title with icon
+
+<Canvas of={ComponentStories.WithHeader} />
+
+Using the `title` prop and `headerIcon` slot we can create a header for the Popover.
+
+### Actions
+
+<Canvas of={ComponentStories.WithActions} />
+
+Using the `actions` prop we can provide an array of action objects (see the Button Actions story). The `actionsLayout`
+prop can be used to define the layout of buttons and can take up one of the following values:
+
+-   `'buttons-end'`
+-   `'fill-container'`
+-   `'space-between'`
+-   `'vertical-stack'`
+-   `'buttons-start'`
+
+### Image
+
+<Canvas of={ComponentStories.WithImage} />
+
+Using the `image` slot you can set a header image.
+
+## Accessibility 🚧
+
+NOTE: The focus trap within the popover does not function as it should right now, this issue is currently being worked
+on.
+
+### Keyboard Interaction
+
+Being an interactive element, the button (that toggles the visibility of the Popover) is reachable through keyboard
+navigation in the logical navigation flow of the page. The following keys trigger the following actions:
+
+| Keyboard interaction | Action                                                                                 |
+| -------------------- | -------------------------------------------------------------------------------------- |
+| `Space`              | Activates the disclosure control and toggles the visibility of the disclosure content. |
+| `Enter`              | Activates the disclosure control and toggles the visibility of the disclosure content. |
+
+### Roles, States, and Properties
+
+Adhering to the [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/) standard we follow the
+[disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/#wai-ariaroles,states,andproperties)
+documentation provided.
+
+#### Please note that:
+
+-   The element that shows and hides the content has role button, e.g. use the `BentoButton` component.
+-   When the Popover is visible, the element with role button has `aria-expanded` set to `true`. When the content area
+    is hidden, it is set to `false`.
+-   When the Popover is visible, the popover needs to be identified by an `id` and the trigger element with role button
+    needs to have `aria-controls` set to the popover `id`. When the popover is hidden, the `aria-controls` attribute
+    needs to be set to `null`.
+
+| ARIA attribute  | is automatic?                                                            | fallback used | manual override |
+| --------------- | ------------------------------------------------------------------------ | ------------- | --------------- |
+| `role`          | Yes, `dialog` role is set                                                | -             | -               |
+| `id`            | No, needs to be set manually on the `bento-popover`                      | -             | -               |
+| `aria-controls` | No, needs to be set on the trigger and equal the `id` set on the popover | -             | -               |
+
+## Resources
+
+-   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/branch/xxUamzpDM5NlukATVD9JFT/Bento---Components?type=design&node-id=1913%3A27764&mode=design&t=cY18II3hTxXGJeoI-1)

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

@@ -0,0 +1 @@
+import { onMounted, ref, watch } from 'vue'; import { isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; import { storybookDocsParameter } from '../../utils/ts/storybook'; import { action } from '@storybook/addon-actions'; import { BentoButton, BentoButtonActionsLayoutBasic } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import { BentoPopoverImage } from './components/popover-image'; import BentoPopover from './popover.vue'; import InfoFilledIcon from '@adyen/ui-assets-icons-16/vue/info-filled'; import { BentoPopoverPositions } from './popover.types'; import { popoverImageSrcStub } from '../../__tests__/img-stub.json'; import './popover.stories.scss?module'; const DEFAULT_TEXT = 'Add your text here'; const TITLE_TEXT = 'Title'; const IMAGE_SRC = popoverImageSrcStub; const IMAGE_ALT = 'Example image'; const ID = 'popover-id'; const ACTIONS = [ { title: 'Primary', event: () => action('Primary')(), }, { title: 'Secondary', event: () => action('Secondary')(), }, ]; const DEFAULT_PROPS = { position: 'bottom-start', disableFocusTrap: true, default: DEFAULT_TEXT, }; export default { title: 'Popover', component: BentoPopover, parameters: { layout: 'centered', }, argTypes: { // Slots default: { defaultValue: '', description: 'Popover content', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text' }, }, headerIcon: { defaultValue: '', description: 'Vue Icon from the library @adyen/ui-assets-icons-16.', table: { type: { summary: 'VNode[]' }, }, control: { disable: true }, }, image: { defaultValue: '', description: 'Popover image container', table: { type: { summary: 'BentoPopoverImage' }, }, control: { disable: true }, }, // Enum props actionsLayout: { options: Object.values(BentoButtonActionsLayoutBasic), mapping: BentoButtonActionsLayoutBasic, control: { type: 'select', }, }, position: { options: Object.values(BentoPopoverPositions), mapping: BentoPopoverPositions, control: { type: 'select', }, }, }, } as Meta; type Story = StoryObj<typeof BentoPopover>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoPopover, BentoTypography, }, props: Object.keys(argTypes), template: ` <div class="b-popover-story--default"> <bento-popover v-if="targetElement" :open="isOpen" v-bind="args" :targetElement="targetElement" @placement="onPlacementUpdate" > <bento-typography el="span"> {{args.default}} </bento-typography> </bento-popover> <bento-button ref="targetElement" @click="togglePopover" :aria-expanded="isOpen" aria-controls="${ID}" > Open popover </bento-button> </div> `, setup(props) { const args = isVue2 ? props : _args; const isOpen = ref(false); const targetElement = ref(null); const togglePopover = () => { isOpen.value = !isOpen.value; }; watch( () => args.open, (val: boolean) => { isOpen.value = val; } ); const show = () => action('input'); onMounted(() => (isOpen.value = args.open === undefined ? true : args.open)); const onPlacementUpdate = action('placement'); return { // Values args, isOpen, targetElement, // Methods onPlacementUpdate, show, togglePopover, }; }, }), args: { ...DEFAULT_PROPS, id: ID }, parameters: storybookDocsParameter(` <div> <bento-popover v-if="targetElement" id="${ID}" :open="isOpen" position="bottom-start" :targetElement="targetElement" > <bento-typography el="span"> ${DEFAULT_TEXT} </bento-typography> </bento-popover> <bento-button ref="targetElement" :aria-expanded="isOpen" @click="togglePopover" aria-controls="${ID}" > Open popover </bento-button> </div> `), }; export const WithHeader: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoPopover, BentoTypography, InfoFilledIcon, }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const isOpen = ref(false); const targetElement = ref(null); const togglePopover = () => { isOpen.value = !isOpen.value; }; watch( () => args.open, (val: boolean) => { isOpen.value = val; } ); const show = () => action('input'); const dismissPopover = () => { action('dismiss')(); isOpen.value = false; }; onMounted(() => (isOpen.value = args.open === undefined ? true : args.open)); return { // Values args, isOpen, targetElement, // Methods togglePopover, show, dismissPopover, }; }, template: ` <div class="b-popover-story--with-header"> <bento-popover v-if="targetElement" :open="isOpen" v-bind="args" :targetElement="targetElement" @dismiss="dismissPopover" > <template #headerIcon> <info-filled-icon /> </template> <bento-typography el="span"> {{args.default}} </bento-typography> </bento-popover> <bento-button ref="targetElement" @click="togglePopover" :aria-expanded="isOpen" aria-controls="${ID}" > Open popover </bento-button> </div> `, }), args: { ...DEFAULT_PROPS, title: TITLE_TEXT, id: ID }, parameters: storybookDocsParameter(` <div> <bento-popover v-if="targetElement" id="${ID}" :open="isOpen" title="${TITLE_TEXT}" position="bottom-start" :targetElement="targetElement" @dismiss="dismissPopover" > <template #headerIcon> <info-filled-icon /> </template> <bento-typography el="span"> ${DEFAULT_TEXT} </bento-typography> </bento-popover> <bento-button ref="targetElement" :aria-expanded="isOpen" @click="togglePopover" aria-controls="${ID}" > Open popover </bento-button> </div> `), }; export const WithActions: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoPopover, BentoTypography, InfoFilledIcon, }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const isOpen = ref(false); const targetElement = ref(null); const togglePopover = () => { isOpen.value = !isOpen.value; }; watch( () => args.open, (val: boolean) => { isOpen.value = val; } ); const show = () => action('input'); const dismissPopover = () => { action('dismiss')(); isOpen.value = false; }; onMounted(() => (isOpen.value = args.open === undefined ? true : args.open)); return { // Values args, isOpen, targetElement, // Methods togglePopover, show, dismissPopover, }; }, template: ` <div class="b-popover-story--with-actions"> <bento-popover v-if="targetElement" :open="isOpen" v-bind="args" :targetElement="targetElement" @dismiss="dismissPopover" > <bento-typography el="span"> {{args.default}} </bento-typography> </bento-popover> <bento-button ref="targetElement" @click="togglePopover" :aria-expanded="isOpen" aria-controls="${ID}" > Open popover </bento-button> </div> `, }), args: { ...DEFAULT_PROPS, title: TITLE_TEXT, actions: ACTIONS, id: ID, }, parameters: storybookDocsParameter(` <div> <bento-popover v-if="targetElement" id="${ID}" :open="isOpen" title="${TITLE_TEXT}" :actions="[ { title: 'Primary', event: () => action('Primary')(), }, { title: 'Secondary', event: () => action('Secondary')(), }, ]" position="bottom-start" :targetElement="targetElement" @dismiss="dismissPopover" > <template #headerIcon> <info-filled-icon /> </template> <bento-typography el="span"> ${DEFAULT_TEXT} </bento-typography> </bento-popover> <bento-button ref="targetElement" :aria-expanded="isOpen" @click="togglePopover" aria-controls="${ID}" > Open popover </bento-button> </div> `), }; export const WithImage: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoPopover, BentoPopoverImage, BentoTypography, InfoFilledIcon, }, props: Object.keys(argTypes), setup(props) { const args = isVue2 ? props : _args; const isOpen = ref(false); const targetElement = ref(null); const togglePopover = () => { isOpen.value = !isOpen.value; }; watch( () => args.open, (val: boolean) => { isOpen.value = val; } ); const show = () => action('input'); const dismissPopover = () => { action('dismiss')(); isOpen.value = false; }; onMounted(() => (isOpen.value = args.open === undefined ? true : args.open)); return { // Values args, isOpen, targetElement, // Methods togglePopover, show, dismissPopover, }; }, template: ` <div class="b-popover-story--with-image"> <bento-popover v-if="targetElement" :open="isOpen" v-bind="args" :targetElement="targetElement" @dismiss="dismissPopover" > <template #image> <bento-popover-image src="${IMAGE_SRC}" alt="${IMAGE_ALT}" /> </template> <bento-typography el="span"> {{args.default}} </bento-typography> </bento-popover> <bento-button ref="targetElement" @click="togglePopover" :aria-expanded="isOpen" aria-controls="${ID}" > Open popover </bento-button> </div> `, }), args: { ...DEFAULT_PROPS, title: TITLE_TEXT, actions: ACTIONS, id: ID, }, parameters: storybookDocsParameter(` <div> <bento-popover v-if="targetElement" id="${ID}" :open="isOpen" title="${TITLE_TEXT}" :actions="[ { title: 'Primary', event: () => action('Primary')(), }, { title: 'Secondary', event: () => action('Secondary')(), }, ]" position="bottom-start" :targetElement="targetElement" @dismiss="dismissPopover" > <template #image> <bento-popover-image src="${IMAGE_SRC}" alt="${IMAGE_ALT}" /> </template> <bento-typography el="span"> ${DEFAULT_TEXT} </bento-typography> </bento-popover> <bento-button ref="targetElement" :aria-expanded="isOpen" @click="togglePopover" aria-controls="${ID}" > Open popover </bento-button> </div> `), };