@adyen/bento-mcp 0.0.0 → 0.1.0

package/dist/assets/components/input-field-phone-number/input-field-phone-number.vue

@@ -0,0 +1 @@
+<template> <bento-input-field v-bind="computedProps" ref="inputField" variant="dropdown" :dropdown="dropdown" class="b-input-field-phone-number" :model-value="displayValue" :placeholder="computedPlaceholder" type="tel" @blur="onBlur" @update:model-value="onUpdateModelValue" @keydown="onKeydown" @dropdown-input="onCountryChange" > <template v-if="label">{{ label }}</template> <template v-else><slot /></template> <template #description> <slot name="description">{{ description }}</slot> </template> </bento-input-field> </template> <script setup lang="ts"> import { computed, nextTick, provide, ref, watch } from 'vue'; import { type BentoInputDropdownProps, BentoInputField } from '@/components/input-field'; import { AsYouType, type CountryCode } from 'libphonenumber-js'; import { useI18n } from '@/utils/ts/i18n'; import { appendRegionCode, BentoInputFieldPhoneNumberCountries, getCountriesDropdownItems, getFormattedPhoneCode, getPhoneNumberPlaceholder, handleInputCursor, hasDefaultRegionCode, parsePhoneAndCountry, preventRegionCodeRepetition, stripRegionCode, } from './utils'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; import { deprecate } from '@/utils/ts/deprecate'; import type { BentoInputFieldPhoneNumberProps } from './input-field-phone-number.types'; import messages from './messages.json'; import { INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY } from '@/components/input-field/input-field.keys'; type MessageSchema = (typeof messages)['en-US']; const { t, locale } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<BentoInputFieldPhoneNumberProps>(), { countries: () => BentoInputFieldPhoneNumberCountries, description: undefined, dynamicFiltering: true, }); /** * Avoid passing `value` to `bento-input-field`. * This component uses `displayValue` instead. */ const computedProps = computed(() => { const { value, ...allProps } = props; return allProps; }); const emit = defineEmits<{ /** * Emitted when the element has lost focus */ (e: 'blur'): void; /** * Emitted when the value changes. The value is the unformatted phone number in E.164 format. * @deprecated from version 2.0.0. Use `v-model` or `update:model-value` instead. */ (e: 'input', value: string): void; /** * Emitted when the value changes. The value is the unformatted phone number in E.164 format. */ (e: 'update:model-value', value: string): void; /** * Emitted when the selected country is updated. */ (e: 'update:selected-country', country: CountryCode): void; /** * Emitted when the phone number's validity changes. * The payload is a boolean indicating whether the number is valid. */ (e: 'input:valid', value: boolean): void; }>(); const inputField = ref(null); const displayValue = ref(''); const internalValue = ref(''); const insertedChar = ref(''); const { emitValue } = useFormFieldEmits<string>(emit); provide(INPUT_FIELD_PARENT_COMPONENT_INJECTION_KEY, 'bento-input-field-phone-number'); const computedPlaceholder = computed(() => { if (props.placeholder) { return props.placeholder; } if (props.selectedCountry) { return getPhoneNumberPlaceholder(props.selectedCountry); } return ''; }); const isDropdownReadonly = computed(() => props.dropdown?.readonly); const countryItems = computed(() => getCountriesDropdownItems(props.countries, locale.value)); const dropdown = computed<BentoInputDropdownProps>(() => ({ items: countryItems.value, modelValue: props.selectedCountry, readonly: isDropdownReadonly.value, dynamicFiltering: props.dynamicFiltering, 'aria-label': t('countrySelectorDropdown'), })); const onBlur = () => emit('blur'); const onUpdateModelValue = async (value: string) => { const inputEl = inputField.value.$refs.inputFieldElement; let formatter: AsYouType; // Check if the input value starts with '+' or '00', indicating it includes a country code. if (value.startsWith('+') || value.startsWith('00')) { // Reset displayValue to ensure changes are always reflected. // For example, if you paste '+1 264 123 4567' multiple times, the display value should always be '1234567'. // Without this, the displayValue will be '1234567' the first time but subsequently stay as '+1 264 123 4567'. displayValue.value = ''; // Normalize the value by replacing '00' with '+'. const normalizedValue = value.startsWith('00') ? `+${value.slice(2)}` : value; // Create a new AsYouType formatter to format the number as it's typed. formatter = new AsYouType(); formatter.input(normalizedValue); // Get the country code from the formatted number. const country = formatter.getCountry(); // Check if the extracted country code is valid and included in the allowed countries. const isValidCountry = country && props.countries.includes(country); // If the dropdown is readonly, determine whether to strip the region code based on the selected country. if (isDropdownReadonly.value) { displayValue.value = props.selectedCountry === country ? stripRegionCode(formatter.getNationalNumber(), country) : value; } else { // Emit an event to update the selected country, if valid. Otherwise, set it to null. emit('update:selected-country', isValidCountry ? country : null); // Strip the region code from the formatted number if the country is valid. displayValue.value = isValidCountry ? stripRegionCode(formatter.getNationalNumber(), country) : value; } const numberValue = formatter.getNumberValue() ?? ''; const formattedPhoneCode = getFormattedPhoneCode(country); const shouldClearInput = isValidCountry && numberValue.startsWith(formattedPhoneCode) && numberValue.length <= formattedPhoneCode.length; internalValue.value = shouldClearInput ? '' : numberValue; emitValue(internalValue.value); } else { // If the input doesn't start with a country code, format the number based on the selected country. formatter = new AsYouType(props.selectedCountry); const formatted = formatter.input(appendRegionCode(value, props.selectedCountry)); // Prevent repetition of the region code and get the unformatted number. const unformattedNumber = preventRegionCodeRepetition(value, formatter.getNumberValue(), props.selectedCountry) ?? ''; // Emit the unformatted number value and update the display value with the stripped region code. internalValue.value = unformattedNumber; emitValue(internalValue.value); displayValue.value = stripRegionCode(formatted, props.selectedCountry); } await nextTick(); // Re-parse the number to ensure correct formatting, e.g., adding a leading '0' for NL numbers if valid and `hasDefaultRegionCode` returns false. if (formatter.isValid() && props.selectedCountry && !hasDefaultRegionCode(props.selectedCountry)) { const { displayNumber, isValid } = parsePhoneAndCountry( displayValue.value?.toString(), props.selectedCountry, props.countries ); displayValue.value = displayNumber; emitValidation(isValid); } else { emitValidation(formatter.isValid()); } handleInputCursor(inputEl, displayValue.value.toString(), insertedChar.value); }; const emitValidation = (isValid: boolean) => { // Numbers shorter than 5 digits are never valid phone numbers. // `libphonenumber-js` rejects numbers under 5 digits (`TOO_SHORT`). // We don’t call that check directly here, but use the same value for consistency. const MIN_PHONE_NUMBER_LENGTH_FOR_VALIDATION = 5; const numberLength = displayValue.value?.toString().replace(/\D/g, '')?.length ?? 0; const isValidNumberLength = numberLength >= MIN_PHONE_NUMBER_LENGTH_FOR_VALIDATION; emit('input:valid', isValidNumberLength && isValid); }; const onKeydown = event => { if (/^[a-zA-Z]$/.test(event.key) && !event.metaKey && !event.ctrlKey) { event.preventDefault(); return; } insertedChar.value = event.key; }; const onCountryChange = (country: CountryCode) => { emit('update:selected-country', country); const isUnformatted = displayValue.value?.toString().startsWith('+'); if (hasDefaultRegionCode(country) && !isUnformatted) { let formatter = new AsYouType(country); const formatted = formatter.input(appendRegionCode(displayValue.value?.toString(), country)); const unformattedNumber = preventRegionCodeRepetition(displayValue.value?.toString(), formatter.getNumberValue(), country) ?? ''; internalValue.value = unformattedNumber; emitValue(internalValue.value); displayValue.value = stripRegionCode(formatted, country); emitValidation(formatter.isValid()); } else { const { displayNumber, unformattedNumber, isValid } = parsePhoneAndCountry( displayValue.value?.toString(), country, props.countries ); internalValue.value = unformattedNumber ?? ''; emitValue(internalValue.value); displayValue.value = displayNumber; emitValidation(isValid); } }; watch( () => [props.value, props.modelValue], () => { const newValue = props.modelValue ?? props.value; if (newValue === internalValue.value) { return; } const { displayNumber, country, isValid } = parsePhoneAndCountry( newValue?.toString(), props.selectedCountry, props.countries ); if (country && country !== props.selectedCountry && !isDropdownReadonly.value) { emit('update:selected-country', country); } displayValue.value = stripRegionCode(displayNumber, country); emitValidation(isValid); }, { immediate: true } ); if (props.value) { deprecate( 'BentoInputFieldPhoneNumber "value" property', `The use of "value" prop in "BentoInputFieldPhoneNumber" is no longer supported. Use the "v-model" or "model-value" property instead.`, '2.0.0' ); } </script> <script lang="ts"> /** * Input field phone number can be used to display phone numbers that come with a country code. * * @example * import { BentoInputFieldPhoneNumber } from '@adyen/bento-vue2'; * * export default { * components: { BentoInputFieldPhoneNumber }, * template: ` * <bento-input-field-phone-number * label="Phone number" * :countries="['NL', 'BE']" * model-value="0612345678" * selected-country="NL" * /> * ` * } */ export default { i18n: { messages }, model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./input-field-phone-number.scss" /> 

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

@@ -0,0 +1,118 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as InspectorStories from './inspector.stories';
+
+<Meta of={InspectorStories} />
+
+# Inspector
+
+Inspector allows users to access additional information or details of an object/item. Typically, the Inspector opens
+adjacent to the main content, pushing it aside to maintain visibility and accessibility to both the main content and
+inspector.
+
+<Canvas of={InspectorStories.Default} />
+
+## Use Cases
+
+Use a Inspector if:
+
+- If your users need to view additional data related to an item without navigating away from the main content.
+- When users need persistent interaction between both the main content and the Inspector.
+
+### Do not use
+
+- Don't use an inspector when the user has a focussed task and does not need to interact with the main content at the
+  same time.
+
+## Best practices
+
+- Keep the content within the inspector concise and relevant to the selected object.
+- Avoid Primary actions in the inspector if there is a primary action in the main content!
+- Avoid main footer actions. By nature, the inspector holds detailed information that can have multiple actions related
+  to specific content.
+
+### Inspector vs Sidepanel
+
+We use Inspectors to displays detailed, contextual information about a specific item or object without navigating away
+from the main content.
+
+We use Sidepanel for a focused view to perform actions, change settings or edit features that support the main content
+but do not need the context of the main content.
+
+## Variations
+
+### Size
+
+Use `small` (420px) inspectors:
+
+- In compact layouts where screen space is limited.
+- To display essential details in a condensed format.
+
+Use `large` (595px) inspectors:
+
+- To provide a more expansive layout for detailed information.
+- To accommodate rich content such as images and charts.
+
+## Modifiers
+
+### Title
+
+The Inspector must have a title. This can be passed using the `title` prop.
+
+### Loading
+
+The Inspector should remain open when a user navigates between different items in the main content. The content in the
+inspector will dynamically update based on the selected item. Quick loading is dependent on the backend on the teams
+implementing the inpector.
+
+In the event that content takes too long to fetch, we use a spinner to indicate that the content is still loading, which
+can be enabled with the `loading` prop.
+
+### Closing
+
+The Inspector can only be collapsed by using the close button.
+
+It's important to keep the `is-open` prop in sync, by updating it when `update:is-open` is fired.
+
+### Active page
+
+Set an ID for the current active page in the Inspector, by passing `active-page` prop. This could be the same as the
+title for the page, though it needs to be unique per page.
+
+`active-page` needs to be updated every time the Inspector window changes and must be kept in sync with
+`update:active-page`.
+
+**Important:** this feature is necessary for the correct accessibility behaviour and will be a required prop in
+`Bento 2.0`
+
+## Accessibility
+
+Inspector uses the native HTML `<aside>` element, which identifies supplementary content. Aside is labeled by the
+section name and the title of the page, ('Inspector, page title').
+
+### Implementation requirements
+
+There are some implementation requirements to make sure that the component's accessibility works:
+
+- `active-page` prop must be set and kept in sync with `update:active-page`.
+- Trigger button that opens the inspector must be a stable element on the page that does not disappear while the
+  Inspector is open
+- Trigger button must have text or an `aria-label` that states 'Open inspector', and once the Inspector is opened the
+  copy should change to 'Move to inspector'
+
+Check the inspector's code example for a guideline on how to implement this.
+
+### Keyboard interaction
+
+- User can use `Tab` key to move focus to the trigger and use `Spacebar`/`Enter` to open the inspector.
+- Focus moves to the Inspector first interactive element when Inspector is opened.
+- Inspector first interactive element is `Return to main content` button, which allows the user to immediately leave the
+  Inspector and return to the main page.
+- The `Tab` should change focus between interactive elements. This behaviour should only exist when the Inspector is
+  open.
+- User can use `Ctrl + Shift + S` to move between main page and inspector.
+- When user tabs through all elements of the Inspector, focus returns to the trigger.
+- When user closes the Inspector, focus should return to the trigger and return focus to the trigger.
+
+## Resources
+
+- [Figma link](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=28692-143589&node-type=instance&m=dev)

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

@@ -0,0 +1 @@
+import { isVue2 } from 'vue-demi'; import { computed, ref, watch } from 'vue'; import { BentoButton } from '@/components/button'; import { BentoDataGrid } from '@/components/data-grid'; import { BentoStructuredList, BentoStructuredListItem } from '@/components/structured-list'; import { BentoTypography } from '@/components/typography'; import { BentoHeader } from '@/components/header'; import PlusIcon from '@adyen/ui-assets-icons-16/vue/plus'; import SearchIcon from '@adyen/ui-assets-icons-16/vue/search'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoInspector from './inspector.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import { BentoInspectorSizeOptions } from './inspector.types'; import './inspector.stories.scss?module'; const meta: Meta = { title: 'Inspector', component: BentoInspector, parameters: { layout: 'fullscreen', }, argTypes: { size: { options: BentoInspectorSizeOptions, control: { type: 'select', }, }, relativeLayout: { options: ['push-content', 'overlay-content'], control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoInspector>; const DEFAULT_PROPS = { title: 'Title', size: 'large', isOpen: false, activePage: '', relativeLayout: 'push-content', }; const defaultCode = ` <template> <bento-inspector :is-open="isOpen" @update:is-open="isOpen = $event" :active-page="activePage" @update:active-page="activePage = $event" title="Inspector title" expandable > <template #page> // Your page content <bento-button :aria-expanded="isOpen" @click="openInspector">{{ inspectorButtonTitle }}</bento-button> </template> <template #content> // Your inspector content </template> </bento-inspector> </template> <script setup lang="ts"> import { ref } from 'vue'; import { BentoButton, BentoInspector } from '@adyen/bento-vue2'; const isOpen = ref(false); const activePage = ref('') const inspectorButtonTitle = computed(() => (isOpen.value ? 'Move to inspector' : 'Open inspector')); const openInspector = () => { isOpen.value = true; activePage.value = 'PageId1234'; }; </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoDataGrid, BentoHeader, BentoInspector, BentoStructuredList, BentoStructuredListItem, BentoTypography, SearchIcon, }, props: Object.keys(argTypes), template: ` <bento-inspector v-bind="args" :is-open="isOpen" :title="title" :active-page="activePage" @update:is-open="isOpen = $event" @update:active-page="activePage = $event" expandable > <template #page> <div style="padding:16px"> <bento-header v-bind="headerProps"></bento-header> <bento-data-grid v-bind="gridArgs"> <template #item-paymentMethods="{item}"> <div> {{ item.paymentMethods }} <bento-button variant="tertiary" @click="openInspector(item)" style="float:right" > <template #iconLeft> <search-icon :svg-title="inspectorButtonTitle" /> </template> </bento-button> </div> </template> </bento-data-grid> </div> </template> <template #content> <div style="display: flex; flex-direction: column; height: 100%"> <bento-structured-list style="flex-grow: 1"> <bento-structured-list-item label="Amount"> <bento-typography>1,234 USD</bento-typography> </bento-structured-list-item> <bento-structured-list-item label="Amount"> <bento-typography>1,234 USD</bento-typography> </bento-structured-list-item> <bento-structured-list-item label="Amount"> <bento-typography>1,234 USD</bento-typography> </bento-structured-list-item> <bento-structured-list-item label="Amount"> <bento-typography>1,234 USD</bento-typography> </bento-structured-list-item> <bento-structured-list-item label="Amount"> <bento-typography>1,234 USD</bento-typography> </bento-structured-list-item> </bento-structured-list> <div> <bento-button style="float: right">Action</bento-button> </div> </div> </template> </bento-inspector> `, setup(props) { const args = isVue2 ? props : _args; const isOpen = ref(args.isOpen); const title = ref(args.title); const activePage = ref(''); const inspectorButtonTitle = computed(() => (isOpen.value ? 'Move to inspector' : 'Open inspector')); const gridData = [ { id: 1, paymentMethods: 'Visa', amount: '1,234 USD', numeric: '54,213' }, { id: 2, paymentMethods: 'MasterCard', amount: '1,234 USD', numeric: '54,213' }, { id: 3, paymentMethods: 'iDeal', amount: '1,234 USD', numeric: '54,213' }, { id: 4, paymentMethods: 'Klarna', amount: '1,234 USD', numeric: '54,213' }, { id: 5, paymentMethods: 'Apple Pay', amount: '1,234 USD', numeric: '54,213' }, ]; const openInspector = value => { title.value = value.paymentMethods; isOpen.value = true; activePage.value = value.paymentMethods; }; const gridColumns = [ { field: 'paymentMethods', label: 'Payment methods', minWidth: 200, mandatory: true, }, { field: 'amount', label: 'Amount', numeric: true, minWidth: 300 }, { field: 'numeric', label: 'Numeric', numeric: true, minWidth: 300 }, ]; const gridArgs = { data: gridData, columns: gridColumns, pagination: {}, }; const headerProps = { title: 'Payment methods list', actions: [ { title: 'Primary action', event: () => undefined }, { title: 'Secondary action', icon: PlusIcon, event: () => undefined }, { title: 'Tertiary action', icon: PlusIcon, event: () => undefined }, { title: 'Another action', event: () => undefined }, ], lastUpdated: new Date(), }; watch( () => args.isOpen, () => { isOpen.value = args.isOpen; } ); watch( () => args.title, () => { title.value = args.title; } ); watch( () => args.activePage, () => { activePage.value = args.activePage; } ); return { args, isOpen, gridArgs, title, headerProps, activePage, openInspector, inspectorButtonTitle, }; }, }), args: DEFAULT_PROPS, parameters: storybookDocsParameter(defaultCode), }; 

package/dist/assets/components/inspector/inspector.vue

@@ -0,0 +1 @@
+<template> <div ref="wrapper" class="b-inspector" :class="conditionalClass" @keydown="handleSectionFocus"> <div ref="page" class="b-inspector__page-wrapper"> <div class="b-inspector__page"> <slot name="page" /> </div> </div> <Transition name="b-inspector__animation" mode="out-in" @before-enter="setFocus" @after-leave="setFocus"> <aside v-if="isOpen" ref="inspector" class="b-inspector__container-wrapper" :aria-label="inspectorAriaLabel" @keydown.tab="handleTabNavigation" > <bento-focus-trap :disabled="!isCompact"> <div class="b-inspector__container"> <div class="b-inspector__header"> <template v-if="!isCompact"> <bento-button class="b-inspector__return-content" variant="secondary" condensed :aria-describedby="returnToMainContentDescriptionId" @click="moveFocusBetweenSections" > {{ t('returnToMainContent') }} </bento-button> <span :id="returnToMainContentDescriptionId" class="b-inspector__return-content-description" >{{ t('returnToMainContentDescription') }}</span > </template> <bento-typography el="h2" variant="title" class="b-inspector__title"> {{ title }} </bento-typography> <div class="b-inspector__icons"> <bento-button v-if="expandable" variant="tertiary" @click="emit('expand')"> <template #iconLeft><expand-icon :svg-title="t('expand')"></expand-icon></template> </bento-button> <bento-button variant="tertiary" @click="emit('update:is-open', false)"> <template #iconLeft><cross-icon :svg-title="t('close')"></cross-icon></template> </bento-button> </div> </div> <div class="b-inspector__content"> <bento-loading-indicator v-if="loading" large class="b-inspector__loading-indicator" /> <slot v-else name="content" /> </div> </div> </bento-focus-trap> </aside> </Transition> </div> </template> <script setup lang="ts"> import { computed, nextTick, ref, watch } from 'vue'; import { BentoTypography } from '@/components/typography'; import { BentoButton } from '@/components/button'; import { BentoLoadingIndicator } from '@/components/loading-indicator'; import { BentoFocusTrap } from '@/components/focus-trap'; import ExpandIcon from '@adyen/ui-assets-icons-16/vue/expand'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import { generateUid } from '@/core/utils/ts'; import { useI18n } from '@/utils/ts/i18n'; import { deprecate } from '@/utils/ts/deprecate'; import { getNextFocusableElement } from '@/utils/ts/focus-trap.utils'; import { useElementSize } from '@vueuse/core'; import moveFocusInside, { focusInside, getActiveElement } from 'focus-lock'; import { type BentoInspectorProps } from './inspector.types'; import { useFocusHistory } from './composables/use-focus-history/use-focus-history'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<BentoInspectorProps>(), { activePage: '', expandable: false, isOpen: false, loading: false, size: 'small', relativeLayout: 'push-content', pageFocusAnchor: null, }); const emit = defineEmits<{ /** * Emits update to keep isOpen prop in sync */ (e: 'update:is-open', value: boolean): void; /** * Emits update to keep activePage prop in sync */ (e: 'update:active-page', value: string): void; /** * Emits event when user click expand button */ (e: 'expand'): void; }>(); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const returnToMainContentDescriptionId = generateUid('returnToMainContentDescription'); const wrapper = ref<HTMLElement>(null); const inspector = ref<HTMLElement>(null); const page = ref<HTMLElement>(null); const inspectorLastFocusedElement = ref<HTMLElement>(null); const { width: wrapperWidth } = useElementSize(wrapper); const isCompact = computed(() => { const COMPACT_THRESHOLD_SMALL = 740; const COMPACT_THRESHOLD_LARGE = 915; // small inspector to occupy full screen if < 740px // large inspector to occupy full screen if < 915px const threshold = props.size === 'small' ? COMPACT_THRESHOLD_SMALL : COMPACT_THRESHOLD_LARGE; return wrapperWidth.value > 0 && wrapperWidth.value < threshold; }); const computedPageLastFocusedElement = computed(() => props.pageFocusAnchor); const conditionalClass = computed(() => ({ [`b-inspector--${props.size}`]: true, [`b-inspector--${props.relativeLayout}`]: true, [`b-inspector--is-compact`]: isCompact.value, })); const inspectorAriaLabel = computed(() => `${t('inspector')}, ${props.title}`); const { findValidFocusFallback } = useFocusHistory(page); const setFocus = async () => { if (props.isOpen) { await nextTick(); moveFocusInside(inspector.value, computedPageLastFocusedElement.value); } else { // This doesn't work with data grid cell actions, as the button gets destroyed once is not being hovered. // To be reviewed after LevelAccess revision focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback()); } }; const handleTabNavigation = event => { if (isCompact.value) { return; } const direction = event.shiftKey ? -1 : 1; const focusableEl = getNextFocusableElement(direction, inspector.value); // If the nextfocusableEl is the same as the activeElement that means it's the last focusable element // inside the inspector, so the focus is moved back to the last focused element on the page if (getActiveElement() === focusableEl) { event.preventDefault(); inspectorLastFocusedElement.value = document.activeElement as HTMLElement; focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback()); // Set active-page as undefined when focus is not on page emit('update:active-page', undefined); } }; const handleSectionFocus = event => { const sectionShortcut = event.shiftKey && event.ctrlKey && event.key === 'S'; if (props.isOpen && !isCompact.value && sectionShortcut) { moveFocusBetweenSections(); } }; const moveFocusBetweenSections = () => { if (focusInside(inspector.value)) { inspectorLastFocusedElement.value = document.activeElement as HTMLElement; focusElement(computedPageLastFocusedElement.value ?? findValidFocusFallback()); // Set active-page as undefined when focus is not on page emit('update:active-page', undefined); } else { focusElement(inspectorLastFocusedElement.value); } }; const focusElement = (element: HTMLElement) => { if (!element) { return; } element?.focus(); if (document.activeElement !== element) { focusElement(element.parentElement); } }; watch( () => props.activePage, () => { if (props.activePage) { setFocus(); } } ); if (!props.activePage) { deprecate( 'BentoInspector "active-page" as optional', `Make sure to set the "active-page" prop and keep it in sync with "update:active-page". "active-page" prop will be required in the next version`, '2.0.0' ); } </script> <script lang="ts"> /** * Inspector allows users to access additional information or details of an object/item. The inspector opens adjacent to the main content, pushing it aside to maintain visibility and accessibility to both the main content and inspector. * * @example * import { BentoInspector } from '@adyen/bento-vue2'; * * export default { * components: { BentoInspector }, * template: ` * <bento-inspector * title="Inspector" * size="large" * :is-open="isOpen" * :active-page="activePage" * expandable * @update:is-open="isOpen = $event" * @update:active-page="activePage = $event" * > * <template #page>Content of the page</template> * <template #content>Content of the inspector</template> * </bento-inspector> * ` * } */ export default { i18n: { messages } }; </script> <style lang="scss" scoped src="./inspector.scss" /> 

package/dist/assets/components/internal/base-button/base-button.vue

@@ -0,0 +1 @@
+<template> <button ref="bentoBaseButtonRef" v-bind="$attrs" class="b-base-button" :class="conditionalClasses" :disabled="disabled" :type="type" :aria-expanded="ariaAttributes['aria-expanded']" @click="onClickButton" @focus="onFocusButton" @blur="onBlurButton" > <span v-if="hasSlot('iconLeft')" class="b-base-button__icon-left" data-testid="icon-button-left"> <slot name="iconLeft" /> </span> <bento-typography v-if="hasSlot('default')" el="span" variant="body" stronger class="b-base-button__label"> <slot /> </bento-typography> <span v-if="hasSlot('iconRight')" class="b-base-button__icon-right" data-testid="icon-button-right"> <slot name="iconRight" /> </span> </button> </template> <script lang="ts"> import { computed, defineComponent, type PropType, ref } from 'vue'; import { BentoBaseButtonEvent, BentoBaseButtonPropClass } from './base-button.types'; import type { ButtonHTMLAttributes } from 'vue/types/jsx.d.ts'; import { BentoTypography } from '@/components/typography'; import { useHasSlot } from '@/composables'; import { type Booleanish } from '@/types/prop-types'; /** * Base button component to use as a base for all the various types of bento buttons. For internal use only. * * * @example * import { BaseButton, BaseButtonEvent } from '@/components/internal/base-button'; * import YourImportedIcon from @adyen/ui-assets-icons-16/example-icon'; * * export default { * components: { BaseButton, YourImportedIcon }, * props: { * text: * }, * template: ` * <base-button class="your-custom-button-styles" @click="onClick"> * <template #iconLeft><your-imported-icon></template> * Button text * <template #iconRight><your-imported-icon></template> * </base-button> * `, * emits: [BentoButtonEvent.CLICK], * setup: (prps, { emit }) => { * const onClick = value => emit(BaseButtonEvent.CLICK, value); * * return { * onClick, * }; * } * } */ export default defineComponent({ name: 'base-button', components: { BentoTypography }, props: { /** * Disables button functionality */ disabled: { type: Boolean, default: false, }, /** * Displays button as critical */ critical: { type: Boolean, default: false, }, /** * The default behavior of the button. * Possible values are: 'button', 'reset', 'submit' */ type: { type: String as PropType<ButtonHTMLAttributes['type']>, default: 'button', }, }, emits: [ BentoBaseButtonEvent.CLICK, BentoBaseButtonEvent.FOCUS, BentoBaseButtonEvent.BLUR, BentoBaseButtonEvent.KEYDOWN_ESC, ], setup(props, { slots, emit, attrs }) { const ariaAttributes = computed(() => ({ 'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish, })); const bentoBaseButtonRef = ref(null); const conditionalClasses = computed(() => ({ [`b-base-button--${BentoBaseButtonPropClass.DESTRUCTIVE}`]: props.critical, [`b-base-button--${BentoBaseButtonPropClass.ICON_ONLY}`]: !slots.default, })); const onClickButton = (e: MouseEvent) => { if (!props.disabled) { emit(BentoBaseButtonEvent.CLICK, e); } else { e.preventDefault(); e.stopPropagation(); } }; const onFocusButton = (e: FocusEvent) => { emit(BentoBaseButtonEvent.FOCUS, e); }; const onBlurButton = (e: FocusEvent) => { emit(BentoBaseButtonEvent.BLUR, e); }; return { // Values ariaAttributes, conditionalClasses, // Methods onClickButton, onFocusButton, onBlurButton, hasSlot: useHasSlot(slots), // Refs bentoBaseButtonRef, }; }, }); </script> <style lang="scss" scoped src="./base-button.scss" /> 

package/dist/assets/components/internal/button-actions-with-menu/button-actions-with-menu.stories.ts

@@ -0,0 +1 @@
+import { BentoButtonActionsLayout } from '@/components/button'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { type Meta, type StoryObj } from '@storybook/vue'; import ButtonActionsWithMenu from './button-actions-with-menu.vue'; import ButtonActionsWithMenuDefault from './__tests__/button-actions-with-menu-default.vue?raw'; import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning'; export default { title: 'Button Actions with Menu', component: ButtonActionsWithMenu, argTypes: { layout: { options: Object.values(BentoButtonActionsLayout), mapping: BentoButtonActionsLayout, control: { type: 'select', }, }, }, } as Meta; type Story = StoryObj<typeof ButtonActionsWithMenu>; const DEFAULT_ACTIONS = [ { title: 'Primary', event: () => true, icon: MachineLearningIcon, }, { title: 'Secondary', icon: MachineLearningIcon, data: [ { text: 'Item 1', secondaryText: 'Text', handler: () => true, critical: true, icon: MachineLearningIcon, }, { text: 'Item 2', secondaryText: 'Text', handler: () => true, }, ], }, { title: 'Tertiary', event: () => true, data: [ { text: 'Item 1', secondaryText: 'Text', handler: () => true, critical: true, }, { text: 'Item 2', secondaryText: 'Text', handler: () => true, }, ], }, { title: 'Quarternary', event: () => true, }, ]; const DEFAULT_PROPS = { actions: DEFAULT_ACTIONS, displayedActions: 2, }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { ButtonActionsWithMenu, MachineLearningIcon }, props: Object.keys(argTypes), template: ` <button-actions-with-menu v-bind="args" /> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { ...DEFAULT_PROPS }, parameters: storybookDocsParameter(ButtonActionsWithMenuDefault), }; 

package/dist/assets/components/internal/button-actions-with-menu/button-actions-with-menu.vue

@@ -0,0 +1 @@
+<template> <div class="b-button-actions-with-menu"> <div ref="buttonActionsWithMenu" role="group" class="b-button-actions-with-menu__container-wrapper" :class="conditionalClasses" > <bento-button-actions :actions="computedActions" :inverse="inverse" :layout="actionsLayout" /> <bento-menu v-if="computedMenuActions.length" ref="menu" :data="computedMenuActions" :menu-position="menuPosition" /> </div> </div> </template> <script setup lang="ts"> import { BentoButtonActions } from '@/components/button'; import { type BentoMenuItem } from '@/components/menu/components/menu-item/menu-item.types'; import { MENU_INVERSE_INJECTION_KEY } from '@/components/menu/menu.keys'; import BentoMenu from '@/components/menu/menu.vue'; import { computed, provide, ref, toRef } from 'vue'; import { BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY } from './button-actions-with-menu.keys'; import { type ButtonActionsWithMenuProps } from './button-actions-with-menu.types'; import { useResponsiveActions } from './composables/use-responsive-actions'; const props = withDefaults(defineProps<ButtonActionsWithMenuProps>(), { actionsLayout: 'buttons-end', disableResponsiveBehavior: false, displayedActions: undefined, inverse: false, hideDisplayedActionsBreakpoint: 0, menuPosition: 'bottom-start', }); const inverseRef = toRef(props, 'inverse'); const buttonActionsWithMenu = ref<HTMLDivElement>(null); const menu = ref(null); const stackButtons = ref(false); const computedActions = computed(() => { const displayedActionsLimit = props.hideDisplayedActionsBreakpoint ? displayedActionsCount.value : props.displayedActions; return props.actions.slice(0, displayedActionsLimit); }); const computedMenuRef = computed(() => menu?.value?.$el); const { displayedActionsCount } = useResponsiveActions({ breakpoint: props.hideDisplayedActionsBreakpoint, container: buttonActionsWithMenu, defaultActionsCount: toRef(props, 'displayedActions'), offset: computedMenuRef, }); provide(MENU_INVERSE_INJECTION_KEY, inverseRef); if (!props.disableResponsiveBehavior) { provide(BUTTON_ACTIONS_WITH_MENU_CONTAINER_INJECTION_KEY, { buttonActionsWithMenu, menu, stackButtons }); } const conditionalClasses = computed(() => ({ [`b-button-actions-with-menu__container-wrapper--buttons-end`]: props.actionsLayout === 'buttons-end', [`b-button-actions-with-menu__container-wrapper--buttons-start`]: props.actionsLayout === 'buttons-start', [`b-button-actions-with-menu__container-wrapper--stacked-buttons`]: stackButtons.value, })); const computedMenuActions = computed(() => { if (displayedActionsCount.value === undefined || displayedActionsCount.value >= props.actions.length) { return []; } const actionsToProcess = props.actions.slice(displayedActionsCount.value, props.actions.length); return actionsToProcess.flatMap<BentoMenuItem>(action => { if (!action.data) { return { text: action.title, handler: () => action.event?.({} as Event), icon: action.icon, critical: action.critical, disabled: action.disabled, }; } return action.data; }); }); </script> <script lang="ts"> /** * An internal button actions component with the option to display some of the actions in a menu. * * @example * <button-actions-with-menu * :actions="[ * { * title: 'Primary', * event: () => { ... }, * icon: FourPeopleIcon, * link: { * variant: 'default', * external: true, * to: 'https://www.adyen.com/' * }, * }, * { * title: 'Secondary', * event: () => { ... } * disabled: true, * variant: BentoButtonVariant.PRIMARY, * critical: true * }]" * :displayedActions="2" * /> */ export default {}; </script> <style lang="scss" scoped src="./button-actions-with-menu.scss" /> 

package/dist/assets/components/internal/calendar/calendar.stories.ts

@@ -0,0 +1 @@
+import { type Meta, type StoryObj } from '@storybook/vue'; import { action } from '@storybook/addon-actions'; import { computed, reactive, ref } from 'vue'; import { CalendarEvent } from './calendar.types'; import { isVue2 } from 'vue-demi'; import Calendar from './calendar.vue'; import { subDays } from 'date-fns/subDays'; import { subMonths } from 'date-fns/subMonths'; import { addMonths } from 'date-fns/addMonths'; const meta: Meta = { title: 'Calendar', component: Calendar, argTypes: { // Props month: { name: 'month', defaultValue: undefined, description: 'Month of the year to be displayed in the calendar', control: 'date', }, value: { name: 'value', defaultValue: undefined, description: 'Date selected', control: { disable: true, }, }, // Funcs isDateDisabled: { name: 'isDateDisabled', defaultValue: '', description: 'Disables the dates that meet the criteria defined in the function.', table: { type: { summary: '(currentDate: Date) => boolean' } }, control: { disable: true }, }, // Events input: { name: 'input', defaultValue: '', description: 'Triggered when a date is selected', table: { type: { summary: '(selectedDate: Date) => void' } }, control: { disable: true }, }, }, }; export default meta; type Story = StoryObj<typeof Calendar>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { Calendar }, props: Object.keys(argTypes), template: ` <calendar v-bind="args" :value="currentValue" @input="onInputEvent" /> `, setup(props) { const args = isVue2 ? props : _args; const currentMonth = computed(() => new Date(args.month)); const currentValue = ref(new Date(args.value)); const onInputEvent = value => { action('input')(value); currentValue.value = value; }; return { // Values args, currentMonth, currentValue, // Events onInputEvent, }; }, }), args: { isRange: false, month: new Date(), value: (() => { const date = new Date(); date.setDate(date.getDate() + 1); return date; })(), numberOfMonths: 1, }, }; export const MonthVariant: Story = { render: (_args, { argTypes }) => ({ components: { Calendar }, props: Object.keys(argTypes), template: ` <calendar v-bind="args" variant="month" :value="currentValue" @input="onInputEvent" /> `, setup(props) { const args = isVue2 ? props : _args; const currentValue = ref(new Date(args.value)); const onInputEvent = value => { action('input')(value); currentValue.value = value; }; return { // Values args, currentValue, // Events onInputEvent, }; }, }), args: { isRange: false, year: new Date(), value: subMonths(new Date(), 1), max: addMonths(new Date(), 1), numberOfMonths: 1, }, }; export const Range: Story = { render: (_args, { argTypes }) => ({ components: { Calendar }, props: Object.keys(argTypes), template: ` <calendar v-bind="args" :value="currentValue" @input="onInputEvent" /> `, setup(props) { const args = isVue2 ? props : _args; const currentMonth = computed(() => new Date(args.month)); const currentValue = reactive({ startDate: null, endDate: null }); const onInputEvent = value => { action(CalendarEvent.INPUT)(value); currentValue.startDate = value.startDate; currentValue.endDate = value.endDate; }; return { // Values args, currentMonth, currentValue, // Events onInputEvent, }; }, }), args: { isRange: true, month: new Date(), min: subDays(new Date(), 8), max: new Date(), value: { startDate: undefined, endDate: undefined, }, }, }; 

package/dist/assets/components/internal/calendar/calendar.vue

@@ -0,0 +1 @@
+<template> <div class="b-calendar" :class="conditionalClasses"> <component :is="calendarComponent" v-for="(_, index) in numberOfMonths" :ref="numberOfMonths === 1 ? 'calendarRef' : null" :key="`calendar-${index}`" :first-day-of-week="firstDayOfWeek" :is-date-disabled="isDateDisabled" :month="calculateOffsetMonth(index)" :year="calculateOffsetYear(index)" :position="calendarPosition(index)" :min="min" :max="max" :is-range="isRange" :start-date="internalValue.startDate" :end-date="internalValue.endDate" :granularity="granularity" @input="onDateInput" @mouseover="onMouseOver" @changeDay="onMouseOver" @nextMonth="calculateNextMonths" @previousMonth="calculatePreviousMonths" /> </div> </template> <script lang="ts"> import { computed, defineComponent, type PropType, ref, toRef, watch } from 'vue'; import CalendarMonth from './components/calendar-month/calendar-month.vue'; import CalendarYear from './components/calendar-year/calendar-year.vue'; import { CalendarMonthFirstDayOfWeek } from './components/calendar-month'; import type { CalendarMonthIsDateDisabled } from './components/calendar-month'; import { CalendarEvent, type CalendarGranularityConfig, CalendarPosition, type CalendarRangeDateValue, type CalendarValue, CalendarVariant, } from './calendar.types'; import { useSinglePane } from './composables/use-single-pane'; import { useRangePane } from './composables/use-range-pane'; import { addMonths } from 'date-fns/addMonths'; import { subMonths } from 'date-fns/subMonths'; import { addYears } from 'date-fns/addYears'; import { subYears } from 'date-fns/subYears'; /** * Handles the calendar logic to change visible months for Single calendar * and Range calendar, as well as the selection logic for range. * All the processing necessary for the calendar to select dates * * @example * import { Calendar } from '@/internal/bento-vue2'; * * export default { * components: { Calendar }, * template: ` * <calendar * :value="value" * :first-day-of-week="CalendarFirstDayOfWeek.Monday" * :is-date-disabled="(day: Date) => boolean" * :number-of-months="2" * is-range * @input="(selectedDate) => void" * @start-date-selected="(startDate: Date) => void" * @end-date-selected="(endDate: Date) => void" * /> * ` * } */ export default defineComponent({ name: 'calendar', components: { CalendarMonth, CalendarYear }, props: { /** * Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday */ firstDayOfWeek: { type: Number as PropType<CalendarMonthFirstDayOfWeek>, default: CalendarMonthFirstDayOfWeek.MONDAY, validator: (value: CalendarMonthFirstDayOfWeek) => Object.values(CalendarMonthFirstDayOfWeek).includes(value), }, /** * The selected granularity configuration */ granularity: { type: Object as PropType<CalendarGranularityConfig>, default: null, }, /** * Indicate if a date should be disabled or not */ isDateDisabled: { type: Function as PropType<CalendarMonthIsDateDisabled>, default: undefined }, /** * Enables the Date Range calendar */ isRange: { type: Boolean, default: false }, /** * Set a maximum number of dates to be selectable by the range. */ maxRange: { type: Number, default: null, validator: (value: number) => !value || value > 0 }, /** * Sets a minimum limit for selectable dates - dates before `min` will not be selectable */ min: { type: Date, default: null }, /** * Sets a maximum limit for selectable dates - dates after `max` will not be selectable */ max: { type: Date, default: null }, /** * Number of months rendered on pane */ numberOfMonths: { type: Number, default: 3, validator: (n: number) => n >= 1, }, /** * Upon opening date range picker, end date's month will be pre-selected. */ showEndDateOnOpen: { type: Boolean, default: false }, /** * Selected date. Can be a single Date or a CalendarRangeDate * instance that contains startDate and endDate attributes. */ value: { type: [Date, Object] as PropType<CalendarValue>, default: undefined }, /** * Default start date for the calendar pane */ defaultDisplayMonth: { type: String, default: null, validator: (value: string) => { // Checks for YYYY-MM-DD format const dateRegex = /^\d{4}-(0?[1-9]|1[012])(-(0?[1-9]|[12][0-9]|3[01]))?$/; const isValidDate = dateRegex.test(value); return isValidDate; }, }, /** * The type of calendar to display. Defaults to showing days. */ variant: { type: String as PropType<`${CalendarVariant}`>, default: 'day', validator: (value: string) => Object.values(CalendarVariant).includes(value as CalendarVariant), }, }, emit: [CalendarEvent.INPUT, CalendarEvent.START_DATE_SELECTED, CalendarEvent.END_DATE_SELECTED], setup(props, { emit }) { // Single date calendar ref const calendarRef = ref(null); // Use a duplicate of "month" to move back and // forth with the arrows. Maintained in sync with the prop "value" const baseDate = ref(); watch( () => props.value, () => { if (props.isRange) { baseDate.value = props?.showEndDateOnOpen && (props.value as CalendarRangeDateValue)?.endDate ? (props.value as CalendarRangeDateValue)?.endDate : (props.value as CalendarRangeDateValue)?.startDate || new Date(); } else { const defaultDate = props.defaultDisplayMonth && new Date(props.defaultDisplayMonth).getTime() ? new Date(props.defaultDisplayMonth) : new Date(); baseDate.value = (props.value as Date) || defaultDate; } }, { immediate: true, deep: true } ); const calendarComponent = computed(() => props.variant === CalendarVariant.MONTH ? CalendarYear : CalendarMonth ); const conditionalClasses = computed(() => ({ 'b-calendar__range': props.isRange, })); const { internalValue, onDateInput, onMouseOver } = props.isRange ? useRangePane( { selectedDate: toRef(props, 'value'), isDateDisabled: props.isDateDisabled as (date: Date) => boolean, maxRange: toRef(props, 'maxRange'), granularity: toRef(props, 'granularity'), firstDayOfWeek: props.firstDayOfWeek, min: toRef(props, 'min'), max: toRef(props, 'max'), }, emit ) : useSinglePane( { selectedDate: toRef(props, 'value'), firstDayOfWeek: props.firstDayOfWeek, }, emit ); /** * Calculate the current month calendar. * This is used to render/hide the Previous & Next buttons on each calendar. * @param {number} calendarIndex - Number to offset the calendar position */ const calendarPosition = (calendarIndex: number): `${CalendarPosition}` => { if (props.numberOfMonths === 1) { return CalendarPosition.UNIQUE; } if (calendarIndex === 0) { return CalendarPosition.FIRST; } return calendarIndex === props.numberOfMonths - 1 ? CalendarPosition.LAST : CalendarPosition.MIDDLE; }; /** * Calculates in relation to the amount of months defined in "numberOfMonths" * which calendar month should be render starting from the first (leftmost) * rendered calendar. * If showEndDateOnOpen is set to true, the last pane should be the baseDate month i.e. the end date * @param offsetMonth - Amount of months to add after the first month was rendered */ const calculateOffsetMonth = computed(() => (offsetMonth: number) => { const monthOffset = props?.showEndDateOnOpen && props.isRange ? subMonths(baseDate.value, props.numberOfMonths - 1) : baseDate.value; return addMonths(monthOffset, offsetMonth); }); const calculateOffsetYear = computed(() => (offsetYear: number) => { const yearOffset = props?.showEndDateOnOpen ? subYears(baseDate.value, props.numberOfMonths - 1) : baseDate.value; return addYears(yearOffset, offsetYear); }); /** * By default shows the following month * Can skip multiple months by passing an additional param * Used for keyboard nav to be able to skip a year */ const calculateNextMonths = (amountOfMonths = 1) => { baseDate.value = addMonths(baseDate.value, amountOfMonths); }; /** * By default shows the previous month * Can skip multiple months by passing an additional param * Used for keyboard nav to be able to go back a year */ const calculatePreviousMonths = (amountOfMonths = 1) => { baseDate.value = subMonths(baseDate.value, amountOfMonths); }; return { // Refs calendarRef, // Values baseDate, calendarComponent, conditionalClasses, internalValue, // Methods calculateOffsetMonth, calculateOffsetYear, calendarPosition, // Events onDateInput, onMouseOver, calculateNextMonths, calculatePreviousMonths, }; }, }); </script> <style lang="scss" scoped src="./calendar.scss" /> 

package/dist/assets/components/internal/calendar/components/calendar-month/calendar-month.stories.ts

@@ -0,0 +1 @@
+import { type Meta, type StoryObj } from '@storybook/vue'; import { action } from '@storybook/addon-actions'; import { computed, ref } from 'vue'; import { CalendarMonthFirstDayOfWeek } from './calendar-month.types'; import CalendarMonth from './calendar-month.vue'; import { isVue2 } from 'vue-demi'; const meta: Meta = { title: 'Calendar/Month', component: CalendarMonth, argTypes: { // Props month: { name: 'month', defaultValue: undefined, description: 'Month of the year to be displayed in the calendar', control: 'date', }, value: { name: 'value', defaultValue: undefined, description: 'Date selected', control: { disable: true, }, }, // Funcs isDateDisabled: { name: 'isDateDisabled', defaultValue: '', description: 'Disables the dates that meet the criteria defined in the function.', table: { type: { summary: '(currentDate: Date) => boolean' } }, control: { disable: true }, }, // Enum props firstDayOfWeek: { options: Object.keys(CalendarMonthFirstDayOfWeek) .map(key => CalendarMonthFirstDayOfWeek[key]) .filter(value => typeof value !== 'string') as Array<number>, control: { type: 'select', }, }, // Events input: { name: 'input', defaultValue: '', description: 'Triggered when a date is selected', table: { type: { summary: '(selectedDate: Date) => void' } }, control: { disable: true }, }, }, }; export default meta; type Story = StoryObj<typeof CalendarMonth>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { CalendarMonth }, props: Object.keys(argTypes), template: ` <calendar-month v-bind="args" /> `, setup(props) { const currentMonth = computed(() => new Date(props.month)); const currentValue = ref(new Date(props.value)); const onInputEvent = value => { action('input')(value); currentValue.value = value; }; return { args: isVue2 ? props : _args, // Values currentMonth, currentValue, // Events onInputEvent, }; }, }), args: { isRange: true, month: new Date(), startDate: (() => { const date = new Date(); date.setDate(date.getDate() - 6); return date; })(), endDate: (() => { const date = new Date(); date.setDate(date.getDate()); return date; })(), }, }; 

package/dist/assets/components/internal/calendar/components/calendar-month/calendar-month.vue

@@ -0,0 +1 @@
+<template> <div v-bento-keyboard-navigation-directive class="b-calendar-month" v-on="listeners"> <div class="b-calendar-month__month-selector"> <!-- go to previous month --> <div class="b-calendar-month__previous"> <bento-button v-if="shouldShowPreviousMonthButton" variant="tertiary" @click="moveToPreviousMonth($event, true)" > <template #iconLeft> <chevron-left-icon :svg-title="t('previousMonth')" /> </template> </bento-button> </div> <!-- month's name --> <bento-typography :id="monthLabelId" el="h2" variant="title" aria-live="polite"> {{ formattedMonthDate }} </bento-typography> <!-- go to next month --> <div class="b-calendar-month__next"> <bento-button v-if="shouldShowNextMonthButton" variant="tertiary" @click="moveToNextMonth($event, true)" > <template #iconLeft> <chevron-right-icon :svg-title="t('nextMonth')" /> </template> </bento-button> </div> </div> <table class="b-calendar-month__month-container" role="grid" :aria-labelledby="monthLabelId"> <thead> <tr class="b-calendar-month__week-header"> <th v-for="(dayOfWeekFormatted, index) in daysOfWeek" :key="index" class="b-calendar-month__day-of-week" scope="col" > <bento-typography class="b-calendar-month__day-of-week-font" el="span" variant="caption"> {{ dayOfWeekFormatted }} </bento-typography> </th> </tr> </thead> <tbody> <tr v-for="(week, index) in weeksOfMonth" :key="index"> <td v-if="index === 0 && week.length < 7" :colspan="7 - week.length"> </td> <calendar-month-day v-for="(day, dayIndex) in week" :ref="addDayRef(day)" :key="`calendar-day-${dayIndex}`" :day="day" :disabled="computedIsDateDisabled(day)" :selected="isSelectedDate(day)" :variant="dayVariant(day)" @click="onDayClicked" @mouseover="$emit(CalendarMonthEvent.MOUSE_OVER, day)" @keyup.up.native="$emit(CalendarMonthEvent.CHANGE_DAY, day)" @keyup.down.native="$emit(CalendarMonthEvent.CHANGE_DAY, day)" @keyup.left.native="$emit(CalendarMonthEvent.CHANGE_DAY, day)" @keyup.right.native="$emit(CalendarMonthEvent.CHANGE_DAY, day)" /> </tr> <template v-if="weeksOfMonth?.length < 6"> <tr v-for="n in 6 - weeksOfMonth?.length" :key="`calendar month filler row ${n}`"> <td aria-hidden="true" class="b-calendar-month__empty-cell-filler" :colspan="7"></td> </tr> </template> </tbody> </table> </div> </template> <script lang="ts"> import { computed, defineComponent, type PropType, toRef } from 'vue'; import BentoButton from '@/components/button/button.vue'; import { CalendarMonthDay, CalendarMonthDayVariant } from './components/calendar-month-day'; import { BentoTypography } from '@/components/typography'; import { useI18n } from '@/utils/ts/i18n'; import { CalendarMonthEvent, CalendarMonthFirstDayOfWeek, type CalendarMonthIsDateDisabled, } from './calendar-month.types'; import { CalendarPosition } from '@/internal/calendar/calendar.types'; import { generateUid } from '@/core/utils/ts'; import { BentoKeyboardNavigationDirective } from '@/directives'; import { useMoveCalendarDate } from './composables/move-calendar-date'; import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left'; import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right'; import { setDay } from 'date-fns/setDay'; import { startOfMonth } from 'date-fns/startOfMonth'; import { startOfDay } from 'date-fns/startOfDay'; import { isSameDay } from 'date-fns/isSameDay'; import { isWithinInterval } from 'date-fns/isWithinInterval'; import { getDateTimeFormatter } from '@/utils/ts/format-date'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; /** * CalendarMonth that displays all the days of a given month and allows * to move back and forth the visible month with the Next and Previous buttons * * @example * import { CalendarMonthMonth, CalendarMonthFirstDayOfWeek, CalendarPosition } from '@/internal/calendar'; * * export default { * components: { CalendarMonthMonth }, * template: ` * <calendar * :first-day-of-week="CalendarMonthFirstDayOfWeek.SUNDAY" * :is-date-disabled="(date: Date) => boolean" * :month="new Date()" * :position="CalendarPosition.LAST" * is-range * :start-date="new Date()" * :end-date="new Date()" * @input="(selectedDate: Date) => void" * @mouseover="(event: Event) => void" * @nextMonth="() => void" * @previousMonth="() => void" * /> * ` * } */ export default defineComponent({ i18n: { messages }, name: 'calendar-month', components: { BentoButton, BentoTypography, CalendarMonthDay, ChevronLeftIcon, ChevronRightIcon, }, directives: { BentoKeyboardNavigationDirective }, props: { /** * end of the selected range */ endDate: { type: Date, default: null }, /** * Allows you to set the first day of the week. 0 is sunday, 1 is monday, 6 is saturday */ firstDayOfWeek: { type: Number as PropType<CalendarMonthFirstDayOfWeek>, default: CalendarMonthFirstDayOfWeek.MONDAY, validator: (value: CalendarMonthFirstDayOfWeek) => Object.values(CalendarMonthFirstDayOfWeek).includes(value), }, /** * Indicate if a date should be disabled or not */ isDateDisabled: { type: Function as PropType<CalendarMonthIsDateDisabled>, default: undefined }, /** * Indicates if the calendar is part of a range date picker or a sigle date picker */ isRange: { type: Boolean, default: false }, /** * Sets a minimum limit for selectable dates - dates before `min` will not be selectable */ min: { type: Date, default: null }, /** * Sets a maximum limit for selectable dates - dates after `max` will not be selectable */ max: { type: Date, default: null }, /** * Month of the year to be displayed in the calendar */ month: { type: Date, required: true }, /** * When rendering multiple calendars, this property allows to render the * Next and Previous calendar buttons to the right, left or not at all * depending on the position: Unique (only 1), First, Middle or Last */ position: { type: String as PropType<`${CalendarPosition}`>, default: 'unique', validator: (value: CalendarPosition) => Object.values(CalendarPosition).includes(value), }, /** * start of the selected range */ startDate: { type: Date, default: null }, // can be undefined, eslint complains without default }, emits: [ CalendarMonthEvent.CHANGE_DAY, CalendarMonthEvent.INPUT, CalendarMonthEvent.NEXT_MONTH, CalendarMonthEvent.PREVIOUS_MONTH, CalendarMonthEvent.MOUSE_OVER, ], setup(props, { emit }) { // Date formatter locale options const { locale, t } = useI18n<{ message: MessageSchema }>({ messages }); const monthLabelId = generateUid('bento-date-picker-month-label'); const computedIsDateDisabled = computed( () => (date: Date) => (props.min && date < props.min) || (props.max && date > props.max) || props.isDateDisabled?.(date) ); const { internalDate, baseDate, // Calendar refs addDayRef, // Month navigation showNextMonth, showPreviousMonth, // Day navigation moveToNextDay, moveToPreviousDay, moveToPreviousWeek, moveToNextWeek, moveToFirstDayOfWeek, moveToLastDayOfWeek, moveToPreviousMonth, moveToPreviousYear, moveToNextMonth, moveToNextYear, focusOnDate, } = useMoveCalendarDate( { currentSelectedDate: toRef(props, 'startDate'), month: toRef(props, 'month'), isDateDisabled: computedIsDateDisabled.value, firstDayOfWeek: props.firstDayOfWeek, }, emit ); /** * Default to Monday if the value passed in is not part of the defined Enum */ const fallbackFirstDayOfWeek = computed(() => Object.values(CalendarMonthFirstDayOfWeek).includes(props.firstDayOfWeek) ? props.firstDayOfWeek : CalendarMonthFirstDayOfWeek.MONDAY ); /** * Renders the previous month button if it's Unique or First calendar */ const shouldShowPreviousMonthButton = computed(() => ['first', 'unique'].includes(props.position)); /** * Renders the next month button if it's Unique or Last calendar */ const shouldShowNextMonthButton = computed(() => ['last', 'unique'].includes(props.position)); /** * Formats the month date to the name of the month and the year */ const formattedMonthDate = computed(() => getDateTimeFormatter(locale.value, { month: 'long', year: 'numeric' }).format(baseDate.value) ); /** * Formats all the days of the week to their day name */ const daysOfWeek = computed(() => new Array(7).fill(new Date()).map((date, index) => { const dayOfWeekDate = setDay(date, fallbackFirstDayOfWeek.value + index); return getDateTimeFormatter(locale.value, { weekday: 'short' }).format(dayOfWeekDate); }) ); /** * Calculates all the weeks of the current "props.month" * and adds the respective day number to each column and week */ const weeksOfMonth = computed(() => { const weeks = []; const date = startOfMonth(props.month); let week = weeks[weeks.push([]) - 1]; while (date.getMonth() === props.month.getMonth()) { if (date.getDay() - fallbackFirstDayOfWeek.value === 0 && week.length > 0) { week = weeks[weeks.push([]) - 1]; } week.push(startOfDay(date)); date.setDate(date.getDate() + 1); } return weeks; }); const onDayClicked = (selectedDate: Date) => { emit(CalendarMonthEvent.INPUT, selectedDate); }; /** * Calculates the variation of the days selected. * For single select it's always SINGLE * For ranges: * - Start & End is the same: SINGLE * - Start: BEGINNING * - End: END * - Within the range: MIDDLE * @param {Date} day Current day */ // eslint-disable-next-line consistent-return const dayVariant = (day: Date) => { if (!props.isRange || isSameDay(props.startDate, props.endDate)) { return CalendarMonthDayVariant.SINGLE; } if (props.startDate && isSameDay(props.startDate, day)) { return CalendarMonthDayVariant.BEGINNING; } if (props.endDate && isSameDay(props.endDate, day)) { return CalendarMonthDayVariant.END; } if ( props.startDate && props.endDate && isWithinInterval(day, { start: props.startDate, end: props.endDate }) ) { return CalendarMonthDayVariant.MIDDLE; } }; /** * Checks every date in the calendar to see if it's selected. * @param day Current day in the calendar */ const isSelectedDate = (day: Date) => { // Single selection if (internalDate.value && isSameDay(internalDate.value, day) && !props.endDate) { return true; } // Range return ( props.startDate && props.endDate && isWithinInterval(day, { start: props.startDate, end: props.endDate }) ); }; const confirmNavigationDate = () => { emit(CalendarMonthEvent.INPUT, internalDate); }; const listeners = { 'keydown:arrow-right': moveToNextDay, 'keydown:arrow-left': moveToPreviousDay, 'keydown:arrow-up': moveToPreviousWeek, 'keydown:arrow-down': moveToNextWeek, 'keydown:home': moveToFirstDayOfWeek, 'keydown:end': moveToLastDayOfWeek, 'keydown:page-up': moveToPreviousMonth, 'keydown:shift-page-up': moveToPreviousYear, 'keydown:page-down': moveToNextMonth, 'keydown:shift-page-down': moveToNextYear, }; return { // Refs addDayRef, // Values computedIsDateDisabled, daysOfWeek, weeksOfMonth, formattedMonthDate, shouldShowNextMonthButton, shouldShowPreviousMonthButton, monthLabelId, // Enums CalendarMonthEvent, // Functions isSelectedDate, showNextMonth, showPreviousMonth, dayVariant, confirmNavigationDate, // Events onDayClicked, listeners, // Exposed methods focusOnDate, moveToNextDay, moveToPreviousDay, moveToPreviousWeek, moveToNextWeek, moveToFirstDayOfWeek, moveToLastDayOfWeek, moveToPreviousMonth, moveToPreviousYear, moveToNextMonth, moveToNextYear, // Translations t, }; }, }); </script> <style lang="scss" scoped src="./calendar-month.scss" /> 

package/dist/assets/components/internal/calendar/components/calendar-month/components/calendar-month-day/__test__/calendar-month-day-stub.vue

@@ -0,0 +1 @@
+<template> <table role="grid"> <tbody> <tr> <calendar-month-day v-bind="$props" :day="day" @click="day => $emit(CalendarMonthDayEvent.CLICK, day)" /> </tr> </tbody> </table> </template> <script lang="ts"> import { defineComponent } from 'vue'; import { CalendarMonthDayEvent } from '../calendar-month-day.types'; import CalendarMonthDay from '../calendar-month-day.vue'; import { CalendarMonthDateProps } from '../calendar-month-day.props'; export default defineComponent({ components: { CalendarMonthDay }, props: CalendarMonthDateProps, setup() { return { // Enums CalendarMonthDayEvent, }; }, }); </script> 

package/dist/assets/components/internal/calendar/components/calendar-month/components/calendar-month-day/calendar-month-day.stories.ts

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import { CalendarMonthDayVariant } from './calendar-month-day.types'; import CalendarMonthDay from './calendar-month-day.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; const meta: Meta = { title: 'Calendar/Month/Day', component: CalendarMonthDay, argTypes: { // Funcs isDateDisabled: { name: 'isDateDisabled', defaultValue: '', description: 'Disables the dates that meet the criteria defined in the function.', table: { type: { summary: '(currentDate: Date) => boolean' } }, control: { disable: true }, }, // Events click: { name: 'click', defaultValue: '', description: 'Triggered when the day is clicked, allowing to detect what day was chosen', table: { type: { summary: '(selectedDay: Date) => void' } }, control: { disable: true }, }, // Enum props variant: { options: Object.values(CalendarMonthDayVariant), mapping: CalendarMonthDayVariant, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof CalendarMonthDay>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { CalendarMonthDay }, props: Object.keys(argTypes), template: ` <table> <tbody> <tr> <calendar-month-day v-bind="args" @click="clickedAction"/> </tr> </tbody> </table> `, setup(props) { const clickedAction = value => action('click')(value); return { args: isVue2 ? props : _args, // Events clickedAction, }; }, }), args: { selected: false, day: (() => { const date = new Date(); date.setDate(date.getDate() - 1); return date; })(), }, }; export const CurrentDay: Story = { ...Default, args: { day: new Date(), selected: false, }, }; 

package/dist/assets/components/internal/calendar/components/calendar-month/components/calendar-month-day/calendar-month-day.vue

@@ -0,0 +1 @@
+<template> <td class="b-calendar-month-day" :class="conditionalClasses" :tabindex="selected ? '0' : '-1'" :aria-selected="selected ? selected : undefined" :aria-disabled="disabled" :aria-current="isCurrentDay ? 'date' : undefined" :data-date="day.toDateString()" @click="e => onClick(e, day)" @mouseover="$emit(CalendarMonthDayEvent.MOUSE_OVER)" @keydown.space.enter="e => onClick(e, day)" > <div class="b-calendar-month-day__wrapper"> <bento-typography class="b-calendar-month-day__label" el="span" variant="body" strong> {{ formattedDate }} </bento-typography> </div> </td> </template> <script lang="ts"> import { computed, defineComponent } from 'vue'; import { BentoTypography } from '../../../../../../typography'; import { CalendarMonthDayClass, CalendarMonthDayEvent, CalendarMonthDayVariant } from './calendar-month-day.types'; import { CalendarMonthDateProps } from './calendar-month-day.props'; import { getDateTimeFormatter } from '@/utils/ts/format-date'; import { useI18n } from '@/utils/ts/i18n'; /** * Handles the styles and states of the individual dates of the calendar. * * @example * import { CalendarMonthDay, CalendarMonthDayVariant } from './calendar-day'; * * export default { * components: { CalendarMonthDay }, * template: ` * <table> * <tbody> * <tr> * <calendar-day * :day="new Date()" * disabled * selected * :variant="CalendarMonthDayVariant.MIDDLE" * /> * </tr> * </tbody> * </table> * ` * } */ export default defineComponent({ name: 'calendar-month-day', components: { BentoTypography }, inheritAttrs: true, props: CalendarMonthDateProps, emits: [CalendarMonthDayEvent.CLICK, CalendarMonthDayEvent.MOUSE_OVER], setup(props, { emit }) { const { locale } = useI18n(undefined, true); const isCurrentDay = computed(() => { const today = new Date(); return ( props.day.getDate() === today.getDate() && props.day.getMonth() === today.getMonth() && props.day.getFullYear() === today.getFullYear() ); }); /** * Only get translated day part of the date */ const formattedDate = computed(() => { const formatter = getDateTimeFormatter(locale.value, { day: 'numeric' }); const parts = formatter.formatToParts(props.day); const dayPart = parts.find(part => part.type === 'day'); return dayPart?.value ?? ''; }); const conditionalClasses = computed(() => ({ // Variants [`b-calendar-month-day--${CalendarMonthDayClass.BEGINNING}`]: props.variant === CalendarMonthDayVariant.BEGINNING, [`b-calendar-month-day--${CalendarMonthDayClass.MIDDLE}`]: props.variant === CalendarMonthDayVariant.MIDDLE, [`b-calendar-month-day--${CalendarMonthDayClass.END}`]: props.variant === CalendarMonthDayVariant.END, [`b-calendar-month-day--${CalendarMonthDayClass.SINGLE}`]: props.variant === CalendarMonthDayVariant.SINGLE, // Selected [`b-calendar-month-day--${CalendarMonthDayClass.UNSELECTED}`]: !props.selected, [`b-calendar-month-day--${CalendarMonthDayClass.SELECTED}`]: props.selected, // Current Day [`b-calendar-month-day--${CalendarMonthDayClass.CURRENT_DAY}`]: isCurrentDay.value, // Disabled [`b-calendar-month-day--${CalendarMonthDayClass.DISABLED}`]: props.disabled, })); const onClick = (e: MouseEvent | KeyboardEvent, selectedDay: Date) => { if (!props.disabled) { emit(CalendarMonthDayEvent.CLICK, selectedDay, props.day); } else { e.preventDefault(); e.stopPropagation(); } }; return { // Values conditionalClasses, isCurrentDay, formattedDate, // Enums CalendarMonthDayEvent, // Events onClick, }; }, }); </script> <style lang="scss" scoped src="./calendar-month-day.scss" /> 

package/dist/assets/components/internal/calendar/components/calendar-year/calendar-year.vue

@@ -0,0 +1 @@
+<template> <div v-bento-keyboard-navigation-directive class="b-calendar-year" v-on="listeners"> <div class="b-calendar-year__year-selector"> <!-- go to previous year --> <div class="b-calendar-year__previous"> <bento-button v-if="shouldShowPreviousYearButton" variant="tertiary" @click="moveToPreviousYear($event, true)" > <template #iconLeft> <chevron-left-icon :svg-title="t('previousYear')" /> </template> </bento-button> </div> <!-- year --> <bento-typography :id="yearLabelId" el="h2" variant="title" aria-live="polite"> {{ year.getFullYear() }} </bento-typography> <!-- go to next year --> <div class="b-calendar-year__next"> <bento-button v-if="shouldShowNextYearButton" variant="tertiary" @click="moveToNextYear($event, true)"> <template #iconLeft> <chevron-right-icon :svg-title="t('nextYear')" /> </template> </bento-button> </div> </div> <table class="b-calendar-year__year-container" role="grid" :aria-labelledby="yearLabelId"> <tbody> <tr v-for="(row, index) in monthRows" :key="index"> <calendar-year-month v-for="(month, monthIndex) in row" :ref="addDayRef(month)" :key="`calendar-month-${monthIndex}`" :month="month" :disabled="isDateDisabled(month)" :selected="isSelectedDate(month)" :variant="monthVariant(month)" @click="onMonthClicked" @mouseover="emit('mouseover', month)" /> </tr> </tbody> </table> </div> </template> <script setup lang="ts"> import { computed, toRef } from 'vue'; import { isSameMonth } from 'date-fns/isSameMonth'; import { isWithinInterval } from 'date-fns/isWithinInterval'; import BentoButton from '@/components/button/button.vue'; import { BentoTypography } from '@/components/typography'; import CalendarYearMonth from './components/calendar-year-month/calendar-year-month.vue'; import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left'; import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right'; import { BentoKeyboardNavigationDirective as vBentoKeyboardNavigationDirective } from '@/directives'; import { generateUid } from '@/core/utils/ts'; import { useI18n } from '@/utils/ts/i18n'; import { useMoveCalendarDate } from '@/internal/calendar/components/calendar-month/composables/move-calendar-date'; import { type CalendarYearProps } from './calendar-year.types'; import { CalendarYearMonthVariant } from './components/calendar-year-month/calendar-year-month.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const yearLabelId = generateUid('bento-date-picker-year-label'); const props = withDefaults(defineProps<CalendarYearProps>(), { endDate: null, isDateDisabled: undefined, isRange: false, min: null, max: null, position: 'unique', startDate: null, }); const emit = defineEmits<{ (e: 'input', d: Date); (e: 'mouseover', d: Date); (e: 'nextMonth' | 'previousMonth', a: number); }>(); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const isDateDisabled = (date: Date) => (props.min && date < props.min) || (props.max && date > props.max) || props.isDateDisabled?.(date); /** * Renders the previous year button if it's Unique or First calendar */ const shouldShowPreviousYearButton = computed(() => ['first', 'unique'].includes(props.position)); /** * Renders the next year button if it's Unique or Last calendar */ const shouldShowNextYearButton = computed(() => ['last', 'unique'].includes(props.position)); const { internalDate, // Calendar refs addDayRef, // Day navigation moveToPreviousMonth, moveToPreviousYear, moveToNextMonth, moveToNextYear, moveToFirstMonthOfYear, moveToLastMonthOfYear, focusOnDate, } = useMoveCalendarDate( { currentSelectedDate: toRef(props, 'startDate'), month: toRef(props, 'year'), isDateDisabled, }, emit ); defineExpose({ focusOnDate }); /** * Calculates all the months of the current "props.month" * and adds the respective day number to each column and week */ const monthRows = computed(() => { const rows = []; let count = 0; for (let i = 0; i < 3; i++) { const innerArray = []; for (let j = 0; j < 4; j++) { innerArray.push(new Date(props.year.getFullYear(), count++, 1)); } rows.push(innerArray); } return rows; }); /** * Calculates the variation of the days selected. * For single select it's always SINGLE * For ranges: * - Start & End is the same: SINGLE * - Start: BEGINNING * - End: END * - Within the range: MIDDLE * @param {Date} day Current day */ const monthVariant = (day: Date) => { if (!props.isRange || isSameMonth(props.startDate, props.endDate)) { return CalendarYearMonthVariant.SINGLE; } if (props.startDate && isSameMonth(props.startDate, day)) { return CalendarYearMonthVariant.BEGINNING; } if (props.endDate && isSameMonth(props.endDate, day)) { return CalendarYearMonthVariant.END; } if (props.startDate && props.endDate && isWithinInterval(day, { start: props.startDate, end: props.endDate })) { return CalendarYearMonthVariant.MIDDLE; } return null; }; /** * Checks every date in the calendar to see if it's selected. * @param date Current date in the calendar */ const isSelectedDate = (date: Date) => { // Single selection if (internalDate.value && isSameMonth(internalDate.value, date)) { return true; } // Range return ( props.startDate && props.endDate && isWithinInterval(date, { start: props.startDate, end: props.endDate }) ); }; const onMonthClicked = (selectedDate: Date) => { emit('input', selectedDate); }; const listeners = !props.isRange ? { 'keydown:arrow-right': moveToNextMonth, 'keydown:arrow-left': moveToPreviousMonth, 'keydown:arrow-up': (ev: Event) => moveToPreviousMonth(ev, false, 4), 'keydown:arrow-down': (ev: Event) => moveToNextMonth(ev, false, 4), 'keydown:home': moveToFirstMonthOfYear, 'keydown:end': moveToLastMonthOfYear, 'keydown:page-up': moveToPreviousYear, 'keydown:page-down': moveToNextYear, } : {}; </script> <script lang="ts"> /** * CalendarYear that displays all the months of a given year and allows * to move back and forth the visible year with the Next and Previous buttons * * @example * import { CalendarYear } from '@/internal/calendar'; * * export default { * components: { CalendarYear }, * template: ` * <calendar-year * :is-date-disabled="(date: Date) => boolean" * :year="new Date()" * is-range * :start-date="new Date()" * :end-date="new Date()" * @input="(selectedDate: Date) => void" * @mouseover="(event: Event) => void" * @nextMonth="() => void" * @previousMonth="() => void" * /> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./calendar-year.scss" /> 

package/dist/assets/components/internal/calendar/components/calendar-year/components/calendar-year-month/__test__/calendar-year-month-stub.vue

@@ -0,0 +1 @@
+<template> <table> <tbody> <tr> <calendar-year-month :month="month" :disabled="disabled" :selected="selected" :variant="variant" @click="date => $emit(CalendarYearMonthEvent.CLICK, date)" /> </tr> </tbody> </table> </template> <script setup lang="ts"> import { CalendarYearMonthEvent, type CalendarYearMonthProps } from '../calendar-year-month.types'; import CalendarYearMonth from '../calendar-year-month.vue'; defineProps<CalendarYearMonthProps>(); </script> 

package/dist/assets/components/internal/calendar/components/calendar-year/components/calendar-year-month/calendar-year-month.vue

@@ -0,0 +1 @@
+<template> <td class="b-calendar-year-month" :class="conditionalClasses" :tabindex="selected ? '0' : '-1'" :aria-selected="selected ? selected : undefined" @click="e => onClick(e, month)" @mouseover="emit(CalendarYearMonthEvent.MOUSE_OVER)" @keydown.space.enter="e => onClick(e, month)" > <div class="b-calendar-year-month__wrapper"> <bento-date class="b-calendar-year-month__label" :date="month" :format="BentoDateFormat.SHORT_MONTH" /> </div> </td> </template> <script setup lang="ts"> import { computed } from 'vue'; import { BentoDate, BentoDateFormat } from '@/components/date'; import { CalendarYearMonthClass, CalendarYearMonthEvent, type CalendarYearMonthProps, CalendarYearMonthVariant, } from './calendar-year-month.types'; const props = withDefaults(defineProps<CalendarYearMonthProps>(), { disabled: false, selected: false, variant: CalendarYearMonthVariant.SINGLE, }); const emit = defineEmits<{ (e: 'click', s: Date, d: Date); (e: 'mouseover'); }>(); const isCurrentMonth = computed(() => { const today = new Date(); return props.month.getMonth() === today.getMonth() && props.month.getFullYear() === today.getFullYear(); }); const conditionalClasses = computed(() => ({ // Variants [`b-calendar-year-month--${CalendarYearMonthClass.BEGINNING}`]: props.variant === CalendarYearMonthVariant.BEGINNING, [`b-calendar-year-month--${CalendarYearMonthClass.MIDDLE}`]: props.variant === CalendarYearMonthVariant.MIDDLE, [`b-calendar-year-month--${CalendarYearMonthClass.END}`]: props.variant === CalendarYearMonthVariant.END, [`b-calendar-year-month--${CalendarYearMonthClass.SINGLE}`]: props.variant === CalendarYearMonthVariant.SINGLE, // Selected [`b-calendar-year-month--${CalendarYearMonthClass.UNSELECTED}`]: !props.selected, [`b-calendar-year-month--${CalendarYearMonthClass.SELECTED}`]: props.selected, // Current month [`b-calendar-year-month--${CalendarYearMonthClass.CURRENT_MONTH}`]: isCurrentMonth.value, // Disabled [`b-calendar-year-month--${CalendarYearMonthClass.DISABLED}`]: props.disabled, })); const onClick = (e: MouseEvent | KeyboardEvent, selectedDay: Date) => { if (!props.disabled) { emit(CalendarYearMonthEvent.CLICK, selectedDay, props.month); } else { e.preventDefault(); e.stopPropagation(); } }; </script> <script lang="ts"> /** * Handles the styles and states of the individual months of the calendar. * * @example * import { CalendarYearMonth, CalendarYearMonthVariant } from './calendar-year-month'; * * export default { * components: { CalendarYearMonth }, * template: ` * <table> * <tbody> * <tr> * <calendar-year-month * :month="new Date()" * disabled * selected * :variant="CalendarYearMonthVariant.MIDDLE" * /> * </tr> * </tbody> * </table> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./calendar-year-month.scss" /> 

package/dist/assets/components/internal/checkbox-input/checkbox-input.stories.ts

@@ -0,0 +1 @@
+import { ref } from 'vue'; import { isVue2 } from 'vue-demi'; import BentoCheckboxInput from './checkbox-input.vue'; import type { Meta, StoryObj } from '@storybook/vue'; const meta: Meta = { title: 'Checkbox input', component: BentoCheckboxInput, }; export default meta; type Story = StoryObj<typeof BentoCheckboxInput>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoCheckboxInput }, props: Object.keys(argTypes), template: ` <bento-checkbox-input v-bind="args" :model-value.sync="selectedValue"/> `, setup(props) { const selectedValue = ref(undefined); return { // Values args: isVue2 ? props : _args, selectedValue, }; }, }), args: { value: 'checkbox-input-value', }, }; 

package/dist/assets/components/internal/checkbox-input/checkbox-input.vue

@@ -0,0 +1 @@
+<template> <div class="b-checkbox-input" :class="conditionalClasses"> <!-- Don't change order because it matters for CSS. Icons first --> <minus-small-icon v-if="indeterminate" class="b-checkbox-input__icon" svg-title="" aria-hidden="true" /> <checkmark-small-icon v-else-if="isChecked" class="b-checkbox-input__icon" svg-title="" aria-hidden="true" /> <input :id="id" ref="inputRef" v-bind="computedAttrs" type="checkbox" class="b-checkbox-input__outline" :class="outlineConditionalClasses" :aria-label="ariaLabel" :aria-checked="ariaChecked" :aria-describedby="ariaDescribedby" :aria-invalid="ariaInvalid" :checked="isChecked" :disabled="disabled" :indeterminate.prop="indeterminate" :value="value" :aria-readonly="readonly" @click="onClick" @change="onChange" @keydown.space.prevent="inputRef?.click()" @keydown.enter.prevent="inputRef?.click()" /> </div> </template> <script setup lang="ts"> import { computed, type HTMLAttributes, type PropType, ref, toRefs, useAttrs } from 'vue'; import { CheckboxInputEvent, type CheckboxInputGroupItems, CheckboxInputState, type CheckboxInputType, type MultiCheckboxInputType, } from '@/internal/checkbox-input/checkbox-input.types'; import CheckmarkSmallIcon from '@adyen/ui-assets-icons-16/vue/checkmark-small'; import MinusSmallIcon from '@adyen/ui-assets-icons-16/vue/minus-small'; import { isVue3 } from 'vue-demi'; const attrs = useAttrs(); const props = defineProps({ /** * The aria label associated to the input checkbox. */ ariaLabel: { type: String, default: '' }, /** * An additional string that serves as description for the input checkbox (useful if the component shows a description). */ ariaDescribedby: { type: String, default: '' }, /** * Setting this property to true will disable the checkbox in your form. */ disabled: { type: Boolean, default: false }, /** * Setting this property to true will show the checkbox in error state. */ hasError: { type: Boolean, default: false }, /** * Sets the id of the checkbox. Required for accessibility purposes */ id: { type: String, default: null }, /** * The :indeterminate CSS pseudo-class represents any form element * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute * set to true, radio buttons which are members of a group in which all radio buttons are unchecked, * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate * This property lets you control the input.indeterminate native property. */ indeterminate: { type: Boolean, default: false }, /** * When handling a single checkbox with a singular state, use a boolean. * * When handling multiple checkboxes, use an array of keys. * These keys exist as a set "value" prop for each checkbox. */ modelValue: { type: [Boolean, Array] as PropType<CheckboxInputType | CheckboxInputGroupItems>, default: false, }, /** * Setting this property to true will set the checkbox to read only state. */ readonly: { type: Boolean, default: false }, /** * The value of the component. The DOM API casts this to a string. * The browser uses "on" as the default value. * * In the case of multiple checkboxes this value is used as a unique key. */ value: { type: [String, Number], default: null }, }); const emit = defineEmits<{ /** * Emit that emits the input value */ (e: 'update:model-value', value: boolean | Array<string | number>): void; }>(); const inputRef = ref<HTMLInputElement | null>(null); // filter out style classes because in vue3 they are also part of attrs const computedAttrs = computed(() => { if (isVue3) { const { class: _class, style: _style, ...rest } = attrs; return rest; } else { return attrs; } }); const { disabled, indeterminate, modelValue, readonly, value } = toRefs(props); const conditionalClasses = computed(() => { // Append classes set from parent to first element const inheritClasses = (attrs.class as string)?.split(' ').reduce((acc, className) => { acc[className] = true; return acc; }, {}); return { [`b-checkbox-input--${CheckboxInputState.DISABLED}`]: props.disabled, [`b-checkbox-input--${CheckboxInputState.READONLY}`]: props.readonly, ...inheritClasses, }; }); const outlineConditionalClasses = computed(() => ({ [`b-checkbox-input__outline--${CheckboxInputState.UNCHECKED}`]: !isChecked.value && !props.indeterminate, [`b-checkbox-input__outline--${CheckboxInputState.ERROR}`]: props.hasError, [`b-checkbox-input__outline--${CheckboxInputState.READONLY}`]: props.readonly, })); const isCheckboxGroup = computed(() => Array.isArray(modelValue.value)); const isChecked = computed(() => { if (!isCheckboxGroup.value) { return modelValue.value as boolean; } return (modelValue.value as MultiCheckboxInputType).some(item => item === value.value); }); // ARIA fields const ariaChecked = computed<HTMLAttributes['aria-checked']>(() => props.indeterminate ? 'mixed' : `${!!isChecked.value}` ); const ariaInvalid = computed<HTMLAttributes['aria-invalid']>( () => props.hasError && !props.disabled && !props.readonly ); // readonly attr doesn't work with checkbox, so we need to manually ignore the click instead const onClick = (event: Event) => { if (readonly.value) { event.preventDefault(); return; } }; const onChange = (event: Event) => { if (disabled.value) { return; } const newValue: boolean = (event.target as HTMLInputElement).checked; if (isCheckboxGroup.value) { const newCheckedList = [...(modelValue.value as MultiCheckboxInputType)]; const index = newCheckedList.indexOf(value.value); if (index === -1) { newCheckedList.push(value.value); } else { newCheckedList.splice(index, 1); } emit(CheckboxInputEvent.UPDATE, newCheckedList); } else { emit(CheckboxInputEvent.UPDATE, newValue); } }; </script> <script lang="ts"> /** * Internal component that renders a checkbox input (without label) * * @example * import { BentoCheckboxInput } from '@adyen/bento-vue2'; * * export default { * components: { BentoCheckboxInput }, * template: ` * <label for="checkbox-id">Your label</label> * <span id="description-id">Description</span> * <bento-checkbox-input id="checkbox-id" aria=label="Your label" aria-describedby="description-id" /> * ` * } */ export default { name: 'checkbox-input', inheritAttrs: false, }; </script> <style lang="scss" scoped src="./checkbox-input.scss" /> 

package/dist/assets/components/internal/controls-group/controls-group.vue

@@ -0,0 +1 @@
+<template> <fieldset class="b-controls-group" :class="conditionalClasses" :form="form" :disabled="disabled" :aria-describedby="ariaAttributes['aria-describedby']" > <legend class="b-controls-group__label-container" :class="legendConditionalClasses"> <field-label v-if="label" class="b-controls-group__label" :label="label" :tooltip-text="tooltipText" :optional="optional" :required="required" /> <bento-typography v-if="description || hasSlot('description')" class="b-controls-group__description" el="span" > <slot name="description"> {{ description }} </slot> </bento-typography> </legend> <slot /> </fieldset> </template> <script setup lang="ts"> import { computed, useAttrs, useSlots } from 'vue'; import { BentoTypography } from '@/components/typography'; import { FieldLabel } from '@/components/internal/field-label'; import { deprecate } from '@/utils/ts/deprecate'; import { useHasSlot } from '@/composables'; const attrs = useAttrs(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const props = defineProps({ /** * Descriptive supporting text visbile underneath the label. */ description: { type: String, default: null }, /** * The name of the component to cite when throwing a depreacte error. */ componentName: { type: String, required: true }, /** * Sets all child controls of the <fieldset> as disabled. */ disabled: { type: Boolean, default: false }, /** * The value of the id attribute of a <form> element the <fieldset> is to part of, even if it is not inside the form itself. */ form: { type: String, default: null }, /** * Shows/hides the group label. */ hideLabel: { type: Boolean, default: null }, /** * The name associated with the group. Required for accessibility purposes. * The label is shown when `hideLabel` is set to `true` or if `description` is passed */ label: { type: String, required: true }, /** * Indicates the field is optional. */ optional: { type: Boolean, default: false }, /** * Indicates the field is required. */ required: { type: Boolean, default: false }, /** * Tooltip message. */ tooltipText: { type: String, default: null }, }); const ariaAttributes = computed(() => ({ 'aria-describedby': attrs['aria-describedby']?.toString() as string, })); const conditionalClasses = computed(() => ({ 'b-controls-group--disabled': props.disabled, })); const legendConditionalClasses = computed(() => { const isLabelAndDescriptionPresent = props.label && (props.description || hasSlot('description')); const shouldShowLabel = isLabelAndDescriptionPresent || props.hideLabel === false; return { 'b-controls-group__label-container--hidden': !shouldShowLabel, }; }); // eslint-disable-next-line eqeqeq -- Needs to show deprecate message when hideLabel is not set and no description available const hasNoPropsDefined = !(props.description || hasSlot('description')) && props.hideLabel == undefined; if (hasNoPropsDefined) { deprecate( `${props.componentName}: The property \`label\` will always be rendered by default.`, `After version 2.0.0, the label will be shown by default. To continue hiding the label set \`:hide-label="true"\`. Up until version 2.0.0, to display the label set \`hide-label="false"\`. \`label\` will always be rendered when \`description\` is passed alongside with \`label\``, `2.0.0` ); } </script> <script lang="ts"> /** * A controls group components should be used whenever it is necessary to group a set of controls (i.e. radio buttons or checkboxes) * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/ * * NOTE: This component should not be used by itself but more implemented by other exported components * @example * import { ControlsGroup, BentoCheckbox, BentoRadioButton } from '@adyen/bento-vue2/'; * * export default { * components: { ControlsGroup, BentoRadioButton }, * template: ` * <controls-group * label="Your group label" * description="Description" * > * <bento-radio-button * disabled * value="inputRadio" * > * Label text * </bento-radio-button> * <bento-radio-button * value="inputRadio" * > * Another label text * </bento-radio-button> * </controls-group> * ` * }; */ export default {}; </script> <style lang="scss" scoped src="./controls-group.scss" /> 

package/dist/assets/components/internal/copy/copy.docs.mdx

@@ -0,0 +1,43 @@
+import { Canvas, Meta, Story } from '@storybook/blocks';
+import * as CopyStories from './copy.stories';
+
+<Meta of={CopyStories} />
+
+# Copy
+
+`Copy` should be used to help the user more easily copy relevant information to the clipboard. When the user clicks the
+component, text should automatically be copied to their clipboard.
+
+<Canvas withSource="closed">
+    <Story of={CopyStories.Default} />
+</Canvas>
+
+## Variations
+
+The component will be rendered by default as a copy icon, but a slot can also be passed to render something else that
+when the user clicks on will copy the content to the clipboard. Useful, for example, with inline copy examples.
+
+{/* TODO: change the slot example to inline code when that component is available */}
+
+<Canvas withSource="closed">
+    <Story of={CopyStories.WithSlot} />
+</Canvas>
+
+## Button customisation
+
+The copy button variation can be customised using the `buttonText` and `button` properties.
+
+<Canvas withSource="closed">
+    <Story of={CopyStories.WithCustomButton} />
+</Canvas>
+
+## Accessibility
+
+Assistive technology should notify the user once a text has been copied to the clipboard (i.e. once the content of the
+tooltip changes)
+
+### Keyboard interaction
+
+The button/content to be copied should be reached via keyboard navigation and the screen reader should announce the
+content of the tooltip (copy to clipboard) The content should be copied when the button is pressed (enter/space key is
+pressed)

package/dist/assets/components/internal/copy/copy.stories.ts

@@ -0,0 +1 @@
+import Copy from './copy.vue'; import { BentoTypography } from '@/components/typography'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import './copy.stories.scss?modules'; import { isVue2 } from 'vue-demi'; const meta: Meta = { title: 'Copy', component: Copy, }; const DEFAULT_PROPS = { text: 'Copy this', }; export default meta; type Story = StoryObj<typeof Copy>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { Copy }, props: Object.keys(argTypes), setup: props => ({ args: isVue2 ? props : _args }), template: ` <copy v-bind="args" /> `, }), args: { ...DEFAULT_PROPS, }, }; export const WithSlot: Story = { render: (_args, { argTypes }) => ({ components: { Copy, BentoTypography }, props: Object.keys(argTypes), setup: props => ({ args: isVue2 ? props : _args }), template: ` <copy v-bind="args"> <bento-typography el="span">Click me to copy</bento-typography> </copy> `, }), args: { ...DEFAULT_PROPS, }, }; const WithCustomButtonCode = ` <copy buttonText="Copy text" :button="{condensed: true, variant: 'secondary' }" /> `; export const WithCustomButton: Story = { render: (_args, { argTypes }) => ({ components: { Copy, BentoTypography }, props: Object.keys(argTypes), setup: props => ({ args: isVue2 ? props : _args }), template: ` <copy v-bind="args" /> `, }), args: { ...DEFAULT_PROPS, buttonText: 'Copy text', button: { condensed: true, variant: 'secondary' }, }, parameters: storybookDocsParameter(WithCustomButtonCode), }; 

package/dist/assets/components/internal/copy/copy.vue

@@ -0,0 +1 @@
+<template> <div class="b-copy" @mouseleave="resetText" @focusout="resetText"> <span v-if="$slots.default" v-bento-tooltip-directive:[tooltipPosition]="copyText" @click="onClickCopy"> <slot /> </span> <bento-button v-else v-bento-tooltip-directive:[tooltipPosition]="copyText" v-bind="button" @click="onClickCopy" > <template #iconLeft> <copy-icon :svg-title="svgTitle" /> </template> <template v-if="buttonText" #default> {{ buttonText }} </template> </bento-button> <div v-if="showScreenReaderAlert" role="alert" class="b-copy__screen-reader-alert">{{ t('copied') }}</div> </div> </template> <script setup lang="ts"> import { computed, ref } from 'vue'; import { BentoButton } from '@/components/button'; import { PopperContainerPosition } from '@/components/popper-container'; import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives'; import { useI18n } from '@/utils/ts/i18n'; import { type BentoCopyButtonProps, type BentoCopyProps, CopyTooltipState } from './copy.types'; import CopyIcon from '@adyen/ui-assets-icons-16/vue/copy'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const emit = defineEmits<{ /** * Emitted when the copy button is clicked. */ (e: 'click', event: MouseEvent): void; }>(); const props = withDefaults(defineProps<BentoCopyProps>(), { button: () => ({ variant: 'tertiary' }) as BentoCopyButtonProps, buttonText: undefined, tooltipPosition: PopperContainerPosition.TOP, }); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const copyState = ref<CopyTooltipState>(CopyTooltipState.DEFAULT); const showScreenReaderAlert = ref(false); const onClickCopy = async (event: MouseEvent) => { try { await navigator.clipboard.writeText(props.text); copyState.value = CopyTooltipState.COPYING; showScreenReaderAlert.value = true; } catch { copyState.value = CopyTooltipState.ERROR; } emit('click', event); }; const resetText = () => { copyState.value = CopyTooltipState.DEFAULT; showScreenReaderAlert.value = false; }; const copyText = computed(() => { switch (copyState.value) { case CopyTooltipState.COPYING: return t('copied'); case CopyTooltipState.ERROR: return t('copyFailed'); default: return t('copy'); } }); const svgTitle = computed(() => (props.buttonText ? undefined : t('copy'))); </script> <script lang="ts"> /** * An internal button component that copies text to the user's clipboard. * * @example * import { Copy } from '@adyen/bento-vue2'; * * export default { * components: { Copy }, * template: ` * <copy :text="textToCopy" /> * ` * } */ export default { i18n: { messages }, name: 'copy', }; </script> <style lang="scss" scoped src="./copy.scss" /> 

package/dist/assets/components/internal/decorative-checkbox/decorative-checkbox.vue

@@ -0,0 +1 @@
+<template> <div class="b-checkbox-input" :class="conditionalClasses" role="presentation"> <!-- Don't change order because it matters for CSS. Icons first --> <minus-small-icon v-if="indeterminate" class="b-checkbox-input__icon" svg-title="" aria-hidden="true" /> <double-checkmark-small-icon v-else-if="allSelected" class="b-checkbox-input__icon" svg-title="" aria-hidden="true" data-testid="decorative-checkbox-double-checkmark-icon" /> <checkmark-small-icon v-else-if="checked" class="b-checkbox-input__icon" svg-title="" aria-hidden="true" /> <div class="b-checkbox-input__outline" :class="outlineConditionalClasses" /> </div> </template> <script setup lang="ts"> import { computed } from 'vue'; import { CheckboxInputState } from '@/internal/checkbox-input/checkbox-input.types'; import CheckmarkSmallIcon from '@adyen/ui-assets-icons-16/vue/checkmark-small'; import MinusSmallIcon from '@adyen/ui-assets-icons-16/vue/minus-small'; import DoubleCheckmarkSmallIcon from '@adyen/ui-assets-icons-16/vue/double-checkmark-small'; const props = withDefaults( defineProps<{ /** * Setting this property to true will disable the checkbox in your form. */ disabled?: boolean; /** * The :indeterminate CSS pseudo-class represents any form element * whose state is indeterminate, such as checkboxes which have their HTML indeterminate attribute * set to true, radio buttons which are members of a group in which all radio buttons are unchecked, * and indeterminate <progress> elements. https://developer.mozilla.org/en-US/docs/Web/CSS/:indeterminate * This property lets you control the input.indeterminate native property. */ indeterminate?: boolean; /** * Setting this to true will show the checkbox as checked */ checked?: boolean; /** * Setting this to true will show the checkbox as having all items selected, which shows the double checkmark icon */ allSelected?: boolean; }>(), { disabled: false, indeterminate: false, checked: false, allSelected: false, } ); const conditionalClasses = computed(() => ({ [`b-checkbox-input--${CheckboxInputState.DISABLED}`]: props.disabled, })); const outlineConditionalClasses = computed(() => ({ [`b-checkbox-input__outline--${CheckboxInputState.UNCHECKED}`]: !props.checked && !props.indeterminate && !props.allSelected, [`b-checkbox-input__outline--${CheckboxInputState.CHECKED}`]: (props.checked || props.allSelected) && !props.indeterminate, [`b-checkbox-input__outline--${CheckboxInputState.INDETERMINATE}`]: props.indeterminate, })); </script> <script lang="ts"> export default {}; </script> <style lang="scss" scoped src="@/internal/checkbox-input/checkbox-input.scss" /> 

package/dist/assets/components/internal/dialog-page/dialog-page.vue

@@ -0,0 +1 @@
+<template> <Transition :name="animation" mode="out-in" @after-leave="updateAnimation" @leave="startAnimation"> <div v-if="isOpen && showPage" class="b-dialog-page"> <div v-if="hasSlot('header')" class="b-dialog-page__header" :class="headerConditionalClasses"> <div v-if="showBackButton" class="b-dialog-page__back-button" :style="backButtonStyling" data-testid="back-button" > <bento-button variant="tertiary" @click="goToPreviousPage(previousPage)"> <arrow-left-icon :svg-title="t('goToPreviousPage')" /> </bento-button> </div> <slot name="header"></slot> </div> <div v-if="hasSlot('content')" ref="contentElement" class="b-dialog-page__content" :tabindex="isScrollable ? 0 : null" @scroll="onScroll" > <slot name="content" /> </div> <div v-if="hasSlot('footer')" class="b-dialog-page__footer" :class="footerConditionalClasses"> <slot name="footer" /> </div> </div> </Transition> </template> <script setup lang="ts"> import { computed, inject, nextTick, onUnmounted, type PropType, ref, useSlots, watch } from 'vue'; import { BentoButton } from '@/components/button'; import ArrowLeftIcon from '@adyen/ui-assets-icons-16/vue/arrow-left'; import { useHasSlot } from '@/composables/use-has-slot/use-has-slot'; import { useI18n } from '@/utils/ts/i18n'; import { isDevelopmentEnviroment } from '@/utils/ts/dev-environment'; import { BentoDialogPageAnimation, type BentoDialogPageConfigData, type BentoDialogPageRegisterPage, } from './dialog-page.types'; import type { CSSProperties } from 'vue/types/jsx.d.ts'; import { DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY } from './dialog-page.keys'; import messages from './messages.json'; import { useScroll } from '@vueuse/core'; type MessageSchema = (typeof messages)['en-US']; const props = defineProps({ /** * Identifier of the page, used with activePage prop to handle navigation */ pageId: { type: String, default: undefined, }, /** * Show header and actions border */ alwaysShowBorder: { type: Boolean, default: false, }, /** * Pass custom styling to the back button to position it correctly with the header slot */ backButtonStyling: { type: Object as PropType<CSSProperties>, default: null }, /** * 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, }, }); const emit = defineEmits<{ /** * Fires when the animation ends */ (e: 'animationend'): void; }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const { t } = useI18n<{ message: MessageSchema }>({ messages }); // Refs const contentElement = ref<HTMLDivElement>(null); const hasScroll = ref(false); const { arrivedState } = useScroll(contentElement); // Logic to choose which page is active/shown const showPage = computed(() => (activePage.value ? activePage.value === props.pageId : true)); // Scrolling styling logic const headerConditionalClasses = computed(() => ({ 'b-dialog-page__header--with-border': props.alwaysShowBorder || (hasScroll.value && !arrivedState.top), })); const footerConditionalClasses = computed(() => ({ 'b-dialog-page__footer--with-border': props.alwaysShowBorder || (hasScroll.value && !arrivedState.bottom), })); const isScrollable = computed(() => !(arrivedState.bottom && arrivedState.top)); const onScroll = () => { if (!contentElement.value) { return; } }; const calculateScroll = async watchedValue => { if (!watchedValue) { return; } // Wait for content to be rendered to be able to calculate the height await nextTick(); hasScroll.value = contentElement.value && contentElement.value.scrollHeight > contentElement.value.clientHeight; }; const { activePage, animation, isAnimationActive, isOpen, pages, previousPages, updatePage } = inject<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY); watch(() => isOpen.value, calculateScroll, { immediate: true }); watch(() => showPage.value, calculateScroll, { immediate: true }); // Logic to determine whether the back button should be shown on the page const showBackButton = computed(() => { if (props.previousPage) { return true; } if (props.previousPage === null) { return false; } return hasPreviousPages.value && showPage.value; }); // Animation const updateAnimation = () => { animation.value = BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER; if (isAnimationActive) { isAnimationActive.value = false; } emit('animationend'); }; const startAnimation = () => { if (isAnimationActive) { isAnimationActive.value = true; } }; // Previous page logic const hasPreviousPages = computed(() => previousPages.value.length > 1); const lastPage = computed(() => previousPages.value[previousPages.value.length - 1]); const isActivePageValid = computed(() => pages.value.some(page => page === activePage.value)); const goToPreviousPage = async (page: string) => { if (page) { const index = previousPages.value.indexOf(page); if (index !== -1) { previousPages.value = previousPages.value.slice(0, index + 1); } else { previousPages.value = [page]; } } else { previousPages.value.pop(); } animation.value = BentoDialogPageAnimation.TRANSITION_LEVEL_UPPER; await nextTick(); updatePage(lastPage.value); }; // Add new page to the previousPage array to keep track of user navigation watch( () => activePage.value, async () => { await nextTick(); if (!isOpen.value) { return; } if (!!activePage.value && !isActivePageValid.value) { if (isDevelopmentEnviroment) { // eslint-disable-next-line no-console console.error( `The activePage passed "${activePage.value}" does not match the id of any of the pages` ); return; } } if (activePage.value !== lastPage.value) { previousPages.value.push(activePage.value); } }, { immediate: true } ); // Register page to parent component and inject data from parent component const registerPage = inject<BentoDialogPageRegisterPage>(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY); const { unregisterPage } = registerPage(props.pageId); // Unregister page on unmounting the page onUnmounted(() => unregisterPage()); </script> <script lang="ts"> /** * DialogPage is an internal component used to render different pages of dialog components (Modal, ModalFullscreen and Sidepanel) * * @example * import { DialogPage } from '@/internal'; * * export default { * components: { DialogPage }, * template: ` * <dialog-page pageId='step1' always-show-border> * <template #header>Header</template> * <template #content>Content</template> * <template #footer>Footer</template> * </dialog-page> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./dialog-page.scss" /> 

package/dist/assets/components/internal/error-message/error-message.vue

@@ -0,0 +1 @@
+<template> <bento-typography :id="$attrs.id" class="b-error-message" el="span" aria-live="polite"> <div class="b-error-message__icon"> <cross-circle-icon :svg-title="t('error')" /> </div> {{ errorMessage }} </bento-typography> </template> <script setup lang="ts"> import { BentoTypography } from '@/components/typography'; import CrossCircleIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill'; import { useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; /** * An error message component should be used whenever it is necessary to add an error message to a component. * If adding to a form component, the proper accessibility measures should be taken when necessary * (ex. associating an element with this one using aria-describedby). * @example * import { ErrorMessage } from '@/components/internal/error-message'; * * export default { * components: { ErrorMessage }, * template: ` * <error-message :error-message="errorMessage" /> * ` * } */ defineProps({ /** * The rendered error message */ errorMessage: { type: String, required: true, }, }); const { t } = useI18n<{ message: MessageSchema }>({ messages }); </script> <script lang="ts"> export default { i18n: { messages }, name: 'error-message', }; </script> <style lang="scss" scoped src="./error-message.scss" /> 

package/dist/assets/components/internal/field-label/field-label.vue

@@ -0,0 +1 @@
+<template> <label class="b-field-label" :class="conditionalClasses"> <bento-typography el="span" stronger> <template v-if="label">{{ label }}</template> <template v-else><slot></slot></template> </bento-typography> <bento-typography v-if="!!tooltipText" el="span" class="b-field-label__tooltip-wrapper"> <bento-info-icon :tooltip-text="tooltipText" class="b-field-label__tooltip" /> </bento-typography> <bento-typography v-if="required" class="b-field-label__requirement" el="span" >({{ t('required') }})</bento-typography > <bento-typography v-else-if="optional" class="b-field-label__requirement" el="span" >({{ t('optional') }})</bento-typography > </label> </template> <script setup lang="ts"> import { BentoInfoIcon } from '@/components/info-icon'; import { BentoTypography } from '@/components/typography'; import { useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; import { computed } from 'vue'; type MessageSchema = (typeof messages)['en-US']; const props = defineProps({ /** * Renders the dropdown with a condensed style. */ condensed: { type: Boolean, default: false }, /** * Field label */ label: { type: String, default: null, }, /** * Sets the field as optional */ optional: { type: Boolean, default: false, }, /** * Sets the field as required */ required: { type: Boolean, default: false, }, /** * Adds a info icon next to the label to display the passed tooltip message. */ tooltipText: { type: String, default: null, }, }); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const conditionalClasses = computed(() => ({ 'b-field-label--condensed': props.condensed })); </script> <script lang="ts"> /** * Internal component to handle the labels for all field components * @example * import { FieldLabel } from '@/components/internal/field-label'; * * export default { * components: { FieldLabel }, * template: ` * <field-label label="Label" tooltip-text="Tooltip info" required /> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./field-label.scss" /> 

package/dist/assets/components/internal/fixed-scroller/fixed-scroller.docs.mdx

@@ -0,0 +1,21 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as FixedScrollerStories from './fixed-scroller.stories';
+
+<Meta of={FixedScrollerStories} />
+
+# FixedScroller
+
+The fixed scroller component allows to scroll the content by one view on each click. If the final scroll is shorter than
+a whole view, the last element stops at the end of the scrollable area, so that no additional gap is created.
+
+<Canvas of={FixedScrollerStories.Default} />
+
+## Use Cases
+
+Use a FixedScroller if:
+
+-   The content needs to be scrolled horizontally by one view at a time
+
+## Resources
+
+-   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/branch/pouQdMaQzLTixntp0khsCy/Bento---Components?node-id=9742%3A9601&mode=dev)

package/dist/assets/components/internal/fixed-scroller/fixed-scroller.stories.ts

@@ -0,0 +1 @@
+import { storybookDocsParameter } from '@/utils/ts/storybook'; import { BentoButton } from '@/components/button'; import type { Meta, StoryObj } from '@storybook/vue'; import { FixedScroller } from './index'; import { isVue2 } from 'vue-demi'; const meta: Meta = { title: 'Fixed scroller', component: FixedScroller, }; export default meta; type Story = StoryObj<typeof FixedScroller>; const defaultCode = ` <template> <fixed-scroller> <div style="display: flex; gap: 8px;"> {{ Content here }} </div> </fixed-scroller> </template> <script setup lang="ts"> import { FixedScroller } from '@/internal' </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { FixedScroller, BentoButton }, props: Object.keys(argTypes), template: ` <div style="width: 500px;"> <fixed-scroller v-bind="args"> <div style="display: flex; gap: 8px;"> <bento-button v-for="(x, index) in 13" :key="index" variant="secondary" :condensed="args.condensed"> Index: {{x}} </bento-button> </div> </fixed-scroller> </div> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), parameters: storybookDocsParameter(defaultCode), }; 

package/dist/assets/components/internal/fixed-scroller/fixed-scroller.vue

@@ -0,0 +1 @@
+<template> <div ref="fixedScrollerRef" class="b-fixed-scroller"> <div class="b-fixed-scroller__container"> <div ref="contentRef" class="b-fixed-scroller__content" :style="{ transform: `translateX(${offset}px)`, paddingTop: shouldShowLeftButton || shouldShowRightButton ? `${extraPaddingTop}px` : null, }" > <slot></slot> </div> </div> <div v-if="shouldShowLeftButton" ref="leftButtonRef" class="b-fixed-scroller__left"> <bento-button variant="secondary" :aria-label="t('scrollLeft')" :condensed="condensed" @click="scrollLeft"> <template #iconLeft> <chevron-left-icon svg-title="checked" aria-hidden="true" /> </template> </bento-button> </div> <div v-if="shouldShowRightButton" ref="rightButtonRef" class="b-fixed-scroller__right"> <bento-button variant="secondary" :aria-label="t('scrollRight')" :condensed="condensed" @click="scrollRight" > <template #iconLeft> <chevron-right-icon svg-title="checked" aria-hidden="true" /> </template> </bento-button> </div> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import { BentoButton } from '@/components/button'; import { useFixedScroller } from './composables'; import { useI18n } from '@/utils/ts/i18n'; import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left'; import ChevronRightIcon from '@adyen/ui-assets-icons-16/vue/chevron-right'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const contentRef = ref(null); const fixedScrollerRef = ref(null); const leftButtonRef = ref(null); const rightButtonRef = ref(null); defineProps({ /** * Applies the condensed style to the buttons */ condensed: { type: Boolean, default: false }, /** * Padding to be applied to the top of the scroller container */ extraPaddingTop: { type: Number, default: 0 }, }); const { offset, shouldShowLeftButton, shouldShowRightButton, scrollLeft, scrollRight } = useFixedScroller({ contentRef, containerRef: fixedScrollerRef, leftButtonRef, rightButtonRef, }); </script> <script lang="ts"> /** * Allows to horizontally scroll content by one view at a time. * * @example * import { FixedScroller } from '@/internal'; * * export default { * components: { FixedScroller }, * template: ` * <fixed-scroller> * <div style="display: flex; gap: 8px;"> * {{ Content here }} * </div> * </fixed-scroller> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./fixed-scroller.scss" /> 

package/dist/assets/components/internal/footer-actions/footer-actions.vue

@@ -0,0 +1 @@
+<template> <div class="b-footer-actions"> <div class="b-footer-actions__wrapper"> <bento-typography v-if="actionsLabel" class="b-footer-actions__label" el="span" variant="body" stronger> {{ actionsLabel }} </bento-typography> <bento-button-actions v-if="alignedActions.leftAligned" class="b-footer-actions__left-group" :actions="alignedActions.leftAligned" layout="buttons-start" ></bento-button-actions> <bento-button-actions class="b-footer-actions__right-group" :actions="alignedActions.rightAligned" layout="buttons-end" ></bento-button-actions> </div> </div> </template> <script setup lang="ts"> import { BentoTypography } from '@/components/typography'; import { computed, onMounted, type PropType, toRefs } from 'vue'; import { BentoButtonActions, type BentoButtonActionsList, BentoButtonVariant } from '@/components/button'; 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>, required: true, }, /** * Text label that is displayed left to the action buttons */ actionsLabel: { type: String, default: null, }, /** * If passed - sets first button color to red */ destructiveActions: { type: Boolean, default: false, }, }); const { actions, destructiveActions } = toRefs(props); const alignedActions = computed(() => { const rightAlignedButtons = actions.value.length < 3 ? actions.value : actions.value.slice(0, actions.value.length - 1); // Add red color to the 1-st Action button rightAlignedButtons[0].critical = destructiveActions.value || rightAlignedButtons[0].critical; return { leftAligned: actions.value.length === 3 ? [ { ...actions.value[actions.value.length - 1], variant: BentoButtonVariant.SECONDARY, }, ] : null, rightAligned: [...rightAlignedButtons], }; }); onMounted(() => { if (props.actions && props.actions.length > 3) { throw new Error('Not more than 3 action buttons may be provided to Bento Modal default variant'); } if (props.actionsLabel && props.actions && props.actions.length > 2) { throw new Error( 'Not more than 2 action buttons may be provided with actions label to Bento Modal default variant' ); } }); </script> <script lang="ts"> /** * Internal component to handle the logic of displaying actions in default Modal and Sidepanel * @example * import { FooterActions } from '@/components/internal/footer-actions'; * * export default { * components: { FooterActions }, * template: ` * <footer-actions :actions="BentoButtonActionsList" actions-label="Label" :destructive-actions="true" /> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./footer-actions.scss" /> 

package/dist/assets/components/internal/grid-layout/grid-layout.vue

@@ -0,0 +1 @@
+<template> <div class="b-grid-layout" :class="computedClasses" data-testid="grid-layout"> <div v-if="hasSlot('col-1')" class="b-grid-layout__column" :class="computeColumnSize(0)" data-testid="grid-layout-col-1" > <slot name="col-1"></slot> </div> <div v-if="hasSlot('col-2')" class="b-grid-layout__column" :class="computeColumnSize(1)" data-testid="grid-layout-col-2" > <slot name="col-2"></slot> </div> <div v-if="hasSlot('col-3')" class="b-grid-layout__column" :class="computeColumnSize(2)" data-testid="grid-layout-col-3" > <slot name="col-3"></slot> </div> <div v-if="hasSlot('col-4')" class="b-grid-layout__column" :class="computeColumnSize(3)" data-testid="grid-layout-col-4" > <slot name="col-4"></slot> </div> <div v-if="hasSlot('col-5')" class="b-grid-layout__column" :class="computeColumnSize(4)" data-testid="grid-layout-col-5" > <slot name="col-5"></slot> </div> <div v-if="hasSlot('col-6')" class="b-grid-layout__column" :class="computeColumnSize(5)" data-testid="grid-layout-col-6" > <slot name="col-6"></slot> </div> </div> </template> <script lang="ts"> import { computed, defineComponent, type PropType } from 'vue'; import { useHasSlot } from '@/composables'; import { type GridLayoutColumnWidth, type GridLayoutColumnWidths, GridLayoutContainerType } from './grid-layout.types'; /** * Component used to render the grid layout in the bento-summary-grid. For internal use only */ export default defineComponent({ name: 'grid-layout', props: { /** * Sets the responsive columns widths for the grid. */ columnWidth: { type: Array as PropType<GridLayoutColumnWidths>, default: null, validator: (array: GridLayoutColumnWidths) => array && array.length <= 6, }, /** * Set the type of CSS container the grid layout has * @values inline-size, size, normal */ containerType: { type: String as PropType<GridLayoutContainerType>, default: GridLayoutContainerType.INLINE, }, /** * Sets the gap in the grid to 0. */ noGap: { type: Boolean, default: false, }, }, setup(props, { slots }) { const hasSlot = useHasSlot(slots); // TODO: add a computedItems computed here that only returns the slots that are presents so as to be able to render the divs in the template via a v-for const computeColumnSize = index => { if (props.columnWidth?.[index] && props.columnWidth?.[index] !== 'auto') { const columnWidth = props.columnWidth[index] as GridLayoutColumnWidth; return [ `b-grid-layout__column--${columnWidth.small}`, `b-grid-layout-m__column--${columnWidth.medium}`, `b-grid-layout-l__column--${columnWidth.large}`, ]; } return null; }; const computedClasses = computed(() => ({ 'b-grid-layout--container-type-normal': props.containerType === GridLayoutContainerType.NORMAL, 'b-grid-layout--container-type-size': props.containerType === GridLayoutContainerType.SIZE, 'b-grid-layout--all-auto': props.columnWidth === null || props.columnWidth.every(width => width === 'auto'), 'b-grid-layout--no-gap': props.noGap, })); return { // Values computeColumnSize, computedClasses, // Methods hasSlot, }; }, }); </script> <style lang="scss" scoped src="./grid-layout.scss" /> 

package/dist/assets/components/internal/header-meta/header-meta.vue

@@ -0,0 +1 @@
+<template> <div class="b-header-meta__container"> <bento-typography v-if="description || hasSlot('description')" class="b-header-meta__description" el="div"> <slot name="description">{{ description }}</slot> </bento-typography> <div v-if="lastUpdated" class="b-header-meta__timestamp-section"> <bento-typography class="b-header-meta__timestamp" el="div"> {{ timestamp }} </bento-typography> <bento-loading-button v-if="reloadButton" variant="tertiary" :state="reloadButton.state" @click="reloadButton.event" ><template #iconLeft><reload-icon aria-hidden="true" /></template >{{ reloadButton.title }}</bento-loading-button > </div> </div> </template> <script setup lang="ts"> import { computed, useSlots } from 'vue'; import { useDynamicDateFnsLocale, useHasSlot } from '@/composables'; import { formatDistanceToNow } from 'date-fns/formatDistanceToNow'; import { BentoTypography } from '@/components/typography'; import { BentoLoadingButton } from '@/components/button'; import ReloadIcon from '@adyen/ui-assets-icons-16/vue/refresh'; import { useI18n } from '@/utils/ts/i18n'; import type { HeaderMetaProps } from './header-meta.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t, locale } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<HeaderMetaProps>(), { description: null, lastUpdated: null, reloadButton: null, }); const activeLocale = computed(() => (props.lastUpdated ? locale.value : '')); const dateLocale = useDynamicDateFnsLocale(activeLocale); const timestamp = computed(() => props.lastUpdated ? t('lastUpdated', { date: formatDistanceToNow(props.lastUpdated, { locale: dateLocale.value, addSuffix: true, }), }) : null ); const slots = useSlots(); const hasSlot = useHasSlot(slots); </script> <script lang="ts"> /** * An internal component used by the BentoHeader and BentoHeaderWithViews components. * * @example * import { HeaderMeta } from '@/internal'; * * export default { * components: { HeaderMeta }, * template: ` * <header-meta description="header description" :last-updated="new Date()" /> * ` * } * @slot description - The description content. Overrides the `description` prop. * @property description - Text showed under the title. * @property lastUpdated - JavaScript "Date" object for when the content was last updated. * @property reloadButton - Reload button which shows next to the header's timestamp. */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./header-meta.scss" /> 

package/dist/assets/components/internal/info-icon-with-popover/info-icon-with-popover.vue

@@ -0,0 +1 @@
+<template> <div ref="infoIconRef" class="b-info-icon-with-popover" tabindex="0" data-testid="info-icon-with-popover" @mouseenter="openPopover" @mouseleave="closePopover" @focus="infoIconOnFocus" @focusout="infoIconOnFocusOut" > <info-icon ref="targetElement" class="b-info-icon-with-popover__svg" :aria-expanded="isOpen" :aria-describedby="popoverId" :svg-title="t('moreInformation')" /> <bento-popover v-if="targetElement" :open="isOpen" :target-element="targetElement" :position="popoverPosition" role="tooltip" fit-content disable-focus-trap > <bento-typography> <slot> <div v-if="popoverText"> {{ popoverText }} </div> </slot> </bento-typography> </bento-popover> </div> </template> <script setup lang="ts"> import { BentoPopover, BentoPopoverPositions } from '@/components/popover'; import { BentoTypography } from '@/components/typography'; import { generateUid } from '@/core/utils/ts'; import { useI18n } from '@/utils/ts/i18n'; import InfoIcon from '@adyen/ui-assets-icons-16/vue/info'; import { type PropType, ref } from 'vue'; import type { BentoPopoverProps } from '../../popover/popover.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const CLOSING_POPOVER_DELAY_MS = 200; defineProps({ /** * Text showed in the popover on hover */ popoverText: { type: String, default: null }, /** * Position the popover should take if space is available */ popoverPosition: { type: String as PropType<BentoPopoverProps['position']>, default: 'bottom-start', validator: (value: BentoPopoverPositions) => Object.values(BentoPopoverPositions).includes(value), }, }); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const infoIconRef = ref<HTMLDivElement>(); const targetElement = ref(null); const popoverId = generateUid('bento-info-icon-with-popover'); const isOpen = ref(); const closingTimeOutId = ref(); const openPopover = () => { isOpen.value = true; if (closingTimeOutId.value) { clearTimeout(closingTimeOutId.value); } }; const closePopover = () => { // We want to delay closing for a couple of seconds so // it doesn't flicker if a user hovers over the icon and then inside the popover. const timeOutId = setTimeout(() => { isOpen.value = false; }, CLOSING_POPOVER_DELAY_MS); closingTimeOutId.value = timeOutId; }; const infoIconOnFocus = () => { openPopover(); }; /** * Only close popover on blur if the newly focus element is not a child of this element * @param e - the event that contains the newly focused element */ const infoIconOnFocusOut = (e: FocusEvent) => { if ( !infoIconRef.value || !(e?.relatedTarget instanceof Element) || !infoIconRef.value.contains(e.relatedTarget) ) { closePopover(); } }; </script> <script lang="ts"> /** * Internal component to be used whenever an info icon needs to be rendered with a popover instead of a tooltip. * * @example * import { BentoInfoIconWithPopover } from '@adyen/bento-vue2'; * * export default { * components: { BentoInfoIconWithPopover }, * template: ` * <info-icon-with-popover popover-text="Content can be passed as a string like" :popover-position="position"> * Content can also be rendered as a slot * </info-icon-with-popover> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./info-icon-with-popover.scss" />