@adyen/bento-mcp 0.0.0 → 0.1.0

package/dist/assets/components/form-layout/form-layout.stories.ts

@@ -0,0 +1 @@
+import { computed, ref } from 'vue'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import { BentoButton, BentoLoadingButton, BentoLoadingButtonState } from '@/components/button'; import { BentoInputField } from '@/components/input-field'; import { BentoDropdown } from '@/components/dropdown'; import { BentoDatePicker } from '@/components/date-picker'; import { BentoTextarea } from '@/components/textarea'; import { BentoCheckboxGroup } from '@/components/checkbox'; import { type BentoCheckboxGroupItems } from '@/components/checkbox/components/checkbox-group/checkbox-group.types'; import { type BentoListboxOptions } from '@/types/listbox'; import { BentoRadioGroup } from '@/components/radio-group'; import { BentoSelectionCardGroup } from '@/components/selection-card/components/selection-card-group'; import { BentoFileUploader } from '@/components/file-uploader'; import { type BentoRadioGroupItems } from '@/components/radio-group/radio-group.types'; import { BentoFormLayoutFieldTip, BentoFormLayoutGroup, BentoFormLayoutTitle } from './components'; import { toTypedSchema, useForm } from '@/composables/use-form-validate/use-form'; import { BentoAlert } from '@/components/alert'; import { BentoLink } from '@/components/link'; import BentoFormLayout from './form-layout.vue'; import ChevronLeftIcon from '@adyen/ui-assets-icons-16/vue/chevron-left'; import SaveIcon from '@adyen/ui-assets-icons-16/vue/save'; import { BentoFormLayoutFieldTipTypeOptions } from './components/form-layout-field-tip/form-layout-tip.types'; import * as z from 'zod'; import BentoFormLayoutFieldTipExample from './__tests__/form-layout-field-tip-example.vue?raw'; import BentoFormLayoutDefaultExample from './__tests__/form-layout-default-example.vue?raw'; export default { title: 'Form layout', component: BentoFormLayout, argTypes: { default: { name: 'default', defaultValue: '', description: 'Can include various common form components: `bento-input-field`, `bento-dropdown`, `bento-date-picker`, `bento-checkbox-group`, etc.', table: { type: { summary: 'VNode[]' }, }, control: { disable: true, }, }, 'error-message': { name: 'error-message', defaultValue: '', description: 'Can include any HTMLElement', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text', }, }, }, } as Meta<typeof BentoFormLayout>; type Story = StoryObj<typeof BentoFormLayout>; const DROPDOWN_ITEMS: BentoListboxOptions = [ { label: 'Cat', value: 'cat' }, { label: 'Dog', value: 'dog' }, ]; const CHECKBOX_GROUP_ITEMS: BentoCheckboxGroupItems = [ { value: 1, label: 'Label' }, { value: 2, label: 'Label' }, { value: 3, label: 'Label' }, ]; const RADIO_GROUP_ITEMS: BentoRadioGroupItems = [ { value: 1, label: 'Label' }, { value: 2, label: 'Label' }, { value: 3, label: 'Label' }, ]; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdown, BentoCheckboxGroup, BentoButton, BentoLoadingButton, BentoDatePicker, BentoInputField, BentoFileUploader, BentoFormLayout, BentoFormLayoutFieldTip, BentoFormLayoutGroup, BentoFormLayoutTitle, BentoRadioGroup, BentoTextarea, BentoSelectionCardGroup, }, props: Object.keys(argTypes), template: ` <bento-form-layout v-bind="args"> <template #error-message>{{ errorMessage }}</template> <bento-form-layout-title el="h1"> Section title <template #description> Optional section description </template> </bento-form-layout-title> <bento-input-field>Input field</bento-input-field> <bento-dropdown label="Dropdown" :items="dropdownItems" placeholder="Select an animal" /> <bento-date-picker label="Date picker" /> <bento-textarea label="Textarea" :character-limit="400" /> <bento-checkbox-group label="Checkbox group" :items="checkboxGroupItems" :hide-label="false" /> <bento-radio-group label="Radio group" :items="radioGroupItems" :hide-label="false" /> <bento-selection-card-group label="Selection card group" :items="selectionCardGroupItems" :hide-label="false" variant="radio" /> <bento-file-uploader label="File upload" description="Custom suppporting text" accept=".png,.jpeg,.pdf" :max-size="5242880" /> <bento-form-layout-field-tip> <bento-dropdown label="Dropdown" :items="dropdownItems" placeholder="Select an animal" /> <template #message>This is a small tip that can be used in small spaces</template> </bento-form-layout-field-tip> <bento-form-layout-title el="h2" subsection> Subsection title </bento-form-layout-title> <bento-form-layout-group> <bento-input-field>Input field (100%)</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="33-33-33"> <bento-input-field>Input field (33%)</bento-input-field> <bento-input-field>Input field (33%)</bento-input-field> <bento-input-field>Input field (33%)</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="50-50"> <bento-input-field>Input field (50%)</bento-input-field> <bento-input-field>Input field (50%)</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="25-75"> <bento-input-field>Input field (25%)</bento-input-field> <bento-input-field>Input field (75%)</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="75-25"> <bento-input-field>Input field (75%)</bento-input-field> <bento-input-field>Input field (25%)</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="33-66"> <bento-input-field>Input field (33%)</bento-input-field> <bento-input-field>Input field (66%)</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="66-33"> <bento-input-field>Input field (66%)</bento-input-field> <bento-input-field>Input field (33%)</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="25"> <bento-input-field>Input field (25%)</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="33"> <bento-input-field>Input field (33%)</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="50"> <bento-input-field>Input field (50%)</bento-input-field> </bento-form-layout-group> <template #actions-left> <bento-button variant="secondary"> Action </bento-button> <bento-button variant="secondary"> Action </bento-button> </template> <template #actions-right> <bento-button variant="secondary"> Action </bento-button> <bento-loading-button> Action </bento-loading-button> </template> </bento-form-layout> `, setup(props) { return { args: isVue2 ? props : _args, errorMessage: 'There is an error. Correct the highlighted field.', dropdownItems: [...DROPDOWN_ITEMS], checkboxGroupItems: [...CHECKBOX_GROUP_ITEMS], radioGroupItems: [...RADIO_GROUP_ITEMS], selectionCardGroupItems: [ { title: 'Card title', value: '1', description: 'Description', }, { title: 'Card title', value: '2', description: 'Description', }, { title: 'Card title', value: '3', description: 'Description', }, { title: 'Card title', value: '4', description: 'Description', }, ], }; }, }), parameters: storybookDocsParameter(BentoFormLayoutDefaultExample), }; export const WithTip: Story = { render: (_args, { argTypes }) => ({ components: { BentoDropdown, BentoFormLayout, BentoFormLayoutFieldTip, }, props: Object.keys(argTypes), template: ` <bento-form-layout v-bind="args"> <bento-form-layout-field-tip :type="args.type" :id="args.id ? args.id : undefined"> <bento-dropdown label="Dropdown" :items="dropdownItems" placeholder="Select an animal" :aria-describedby="args.id" /> <template #message>This is a small tip that can be used in small spaces</template> </bento-form-layout-field-tip> </bento-form-layout> `, setup(props) { return { args: isVue2 ? props : _args, dropdownItems: [...DROPDOWN_ITEMS], }; }, }), argTypes: { type: { options: BentoFormLayoutFieldTipTypeOptions, description: 'Type of a alert; set a distinctive icon and color. Defaults to highlight.', control: { type: 'select', }, table: { category: 'Form Layout Field Tip props', type: { summary: 'string' } }, }, id: { description: 'Unique identifier to the form field. Used for accessibility.', table: { category: 'Form Layout Field Tip props', type: { summary: 'string' } }, }, }, args: { id: 'dropdown_field_with_tip', type: 'highlight' }, parameters: storybookDocsParameter(BentoFormLayoutFieldTipExample), }; const groupCode = ` <bento-form-layout> <bento-form-layout-group> <bento-input-field>Input field</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="50-50"> <bento-input-field>Input field</bento-input-field> <bento-input-field>Input field</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="25-75"> <bento-input-field>Input field</bento-input-field> <bento-input-field>Input field</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="75-25"> <bento-input-field>Input field</bento-input-field> <bento-input-field>Input field</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="33-66"> <bento-input-field>Input field</bento-input-field> <bento-input-field>Input field</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="66-33"> <bento-input-field>Input field</bento-input-field> <bento-input-field>Input field</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="25"> <bento-input-field>Input field</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="33"> <bento-input-field>Input field</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="50"> <bento-input-field>Input field</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="33-33-33"> <bento-input-field>Input field</bento-input-field> <bento-input-field>Input field</bento-input-field> <bento-input-field>Input field</bento-input-field> </bento-form-layout-group> </bento-form-layout> `; export const Group: Story = { render: (_args, { argTypes }) => ({ components: { BentoAlert, BentoInputField, BentoFormLayout, BentoFormLayoutGroup, }, props: Object.keys(argTypes), template: ` <div> <bento-alert style="margin-bottom: 20px"> <template #description> The <code>bento-form-layout-group</code> <i>is not</i> a dynamic component and does not support changing it's content/default slot. If this functionality is needed, set the <code>v-if</code> statement <b>on</b> the component itself or around/outside it. </template> </bento-alert> <bento-form-layout v-bind="args"> <bento-form-layout-group> <bento-input-field>Input field</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="50"> <bento-input-field>Input field</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="50-50"> <bento-input-field>Input field</bento-input-field> <bento-input-field>Input field</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="25"> <bento-input-field>Input field</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="25-75"> <bento-input-field>Input field</bento-input-field> <bento-input-field>Input field</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="75-25"> <bento-input-field>Input field</bento-input-field> <bento-input-field>Input field</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="33"> <bento-input-field>Input field</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="33-66"> <bento-input-field>Input field</bento-input-field> <bento-input-field>Input field</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="66-33"> <bento-input-field>Input field</bento-input-field> <bento-input-field>Input field</bento-input-field> </bento-form-layout-group> <bento-form-layout-group layout="33-33-33"> <bento-input-field>Input field</bento-input-field> <bento-input-field>Input field</bento-input-field> <bento-input-field>Input field</bento-input-field> </bento-form-layout-group> </bento-form-layout> </div> `, setup(props) { return { args: isVue2 ? props : _args, dropdownItems: [...DROPDOWN_ITEMS], }; }, }), parameters: storybookDocsParameter(groupCode), }; const loadingFormCode = ` <bento-form-layout loading> <bento-form-layout-title el="h1"> Form request loading time <template #description> Form fields state while waiting for request to be processed </template> </bento-form-layout-title> <bento-input-field required model-value="Input field">Input field</bento-input-field> <template #actions-right> <bento-loading-button state="loading">Loading</bento-loading-button> </template> </bento-form-layout> `; export const LoadingForm: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoCheckboxGroup, BentoDatePicker, BentoDropdown, BentoFormLayout, BentoFormLayoutGroup, BentoFormLayoutTitle, BentoInputField, BentoLoadingButton, BentoRadioGroup, BentoTextarea, ChevronLeftIcon, SaveIcon, }, props: Object.keys(argTypes), template: ` <bento-form-layout loading> <bento-form-layout-title el="h1"> Form request loading time <template #description> Form fields state while waiting for request to be processed </template> </bento-form-layout-title> <bento-date-picker label="Date picker" optional /> <bento-textarea label="Textarea" :characterLimit="400" model-value="Text area value..." required /> <bento-form-layout-group layout="25-75"> <bento-input-field model-value="Input value" required>Input field</bento-input-field> <bento-dropdown label="Dropdown" :items="[{ label: 'Dropdown value', value: 1 }]" :model-value="1" optional /> </bento-form-layout-group> <bento-radio-group label="Radio group" modelValue="no" optional :items="[ { label: 'No', value: 'no' }, { label: 'Yes', value: 'yes' }, ]" /> <bento-checkbox-group label="Checkbox group" optional :modelValue="['one', 'two']" :items="[ { label: 'One', value: 'one' }, { label: 'Two', value: 'two' }, ]" /> <template v-slot:actions-left> <bento-button variant="secondary"> Back <template v-slot:iconLeft> <chevron-left-icon /> </template> </bento-button> <bento-button variant="secondary"> Save for later <template v-slot:iconLeft> <save-icon /> </template> </bento-button> </template> <template v-slot:actions-right> <bento-loading-button state="loading">Validating</bento-loading-button> </template> </bento-form-layout> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), parameters: storybookDocsParameter(loadingFormCode), }; const validateCode = ` <template> <bento-form-layout :loading="isLoading"> <template #error-message v-if="errors"> There is an error. Correct the highlighted field. <ul v-if="errorArray.length"> <li v-for="(error, index) in errorArray" :key="index"> <bento-link to="#input-field-name" is-not-routing>{{ error }}</bento-link> </li> </ul> </template> <bento-form-layout-title el="h1"> Form validation <template #description> Form validation using useForm </template> </bento-form-layout-title> <bento-input-field id="input-field-name" :model-value="values.name" :error-message="errors?.name" @update:model-value="name => values.name = name" > Name </bento-input-field> <template #actions-right> <bento-loading-button :state="loadingButtonState" @click="handleSubmit"> Submit form </bento-loading-button> </template> </bento-form-layout> </template> <script setup lang="ts"> import { ref } from 'vue' import { // Components BentoFormLayout, BentoInputField, BentoLoadingButton, // Composables useForm, toTypedSchema, } from '@adyen/bento-vue2' import { z } from 'zod' const isLoading = ref(false); const loadingButtonState = ref<\`${BentoLoadingButtonState}\`>('start'); const { values, errors, submitForm } = useForm({ validationSchema: toTypedSchema( z.object({ name: z .string() .min(3, { message: 'Name is required' }) .startsWith('Jane') .max(4, { message: 'Name cannot be longer than 4 characters' }) .default('Joe'), }) ) }); const errorArray = computed(() => Object.values(errors.value)); const handleSubmit = submitForm(() => { isLoading.value = true; loadingButtonState.value = 'loading'; // Fake request time setTimeout(() => { isLoading.value = false; loadingButtonState.value = 'success'; }, 2000); }); </script> `; export const Validate: Story = { render: (_args, { argTypes }) => ({ components: { BentoInputField, BentoFormLayout, BentoFormLayoutGroup, BentoFormLayoutTitle, BentoLoadingButton, BentoLink, }, props: Object.keys(argTypes), template: ` <bento-form-layout v-bind="args" :loading="isLoading"> <template #error-message v-if="errors"> There is an error. Correct the highlighted field. <ul v-if="errorArray.length"> <li v-for="(error, index) in errorArray" :key="index"> <bento-link to="#input-field-name" is-not-routing>{{ error }}</bento-link> </li> </ul> </template> <bento-form-layout-title el="h1"> Form validation <template #description> Form validation using useForm </template> </bento-form-layout-title> <bento-input-field id="input-field-name" :model-value="values.name" :error-message="errors?.name" @update:model-value="name => values.name = name" > Name </bento-input-field> <template #actions-right> <bento-loading-button :state="loadingButtonState" @click="handleSubmit"> Submit form </bento-loading-button> </template> </bento-form-layout> `, setup(props) { const isLoading = ref(false); const loadingButtonState = ref<`${BentoLoadingButtonState}`>('start'); const validationSchema = toTypedSchema( z.object({ name: z .string() .min(3, { message: 'Name is required' }) .startsWith('Jane') .max(4, { message: 'Name cannot be longer than 4 characters' }) .default('Joe'), }) ); const { values, errors, submitForm } = useForm({ validationSchema, }); const handleSubmit = submitForm(() => { isLoading.value = true; loadingButtonState.value = 'loading'; // Fake request time setTimeout(() => { isLoading.value = false; loadingButtonState.value = 'success'; }, 2000); }); const errorArray = computed(() => Object.values(errors.value)); return { args: isVue2 ? props : _args, values, errors, errorArray, loadingButtonState, isLoading, // Methods handleSubmit, }; }, }), parameters: storybookDocsParameter(validateCode), }; 

package/dist/assets/components/form-layout/form-layout.vue

@@ -0,0 +1 @@
+<template> <component :is="formLayoutElement" class="b-form-layout" role="form" @submit="emit('submit', $event)"> <bento-alert v-if="hasSlot('error-message')" class="b-form-layout__error-message" type="critical"> <template #description> <slot name="error-message" /> </template> </bento-alert> <slot /> <div v-if="hasActions" class="b-form-layout__actions-container"> <div class="b-form-layout__actions"> <slot name="actions-left" /> </div> <div class="b-form-layout__actions"> <slot name="actions-right" /> </div> </div> </component> </template> <script setup lang="ts"> import { computed, provide, toRef, useSlots } from 'vue'; import { BentoAlert } from '@/components/alert'; import { useHasSlot } from '@/composables'; import { FORM_LAYOUT_LOADING_INJECTION_KEY } from './form-layout.types'; const slots = useSlots(); const hasSlot = useHasSlot(slots); const emit = defineEmits<{ /** * Emits the submit event from the form */ (e: 'submit', event: SubmitEvent): void; }>(); const props = defineProps({ /** * Renders the form layout as an HTML `form` */ form: { type: Boolean, default: false }, /** * Sets the state of the form and its fields to * a read only status. */ loading: { type: Boolean, default: false }, }); const formLayoutElement = computed(() => (props.form ? 'form' : 'div')); const hasActions = computed(() => hasSlot('actions-left') || hasSlot('actions-right')); provide(FORM_LAYOUT_LOADING_INJECTION_KEY, toRef(props, 'loading')); </script> <script lang="ts"> /** * Form layout component is a pre-designed layout that serves * as a starting point for creating a form. * * It can include various common form components: * input field, dropdown, date picker, checkbox group, radio group, * textarea, etc. * * Form layout is context agnostic and can be dropped in different * places, for example in modals, side panels or pages. * * @example * import { BentoFormLayout, BentoFormLayoutFieldTip } from '@adyen/bento-vue2'; * * export default { * components: { BentoFormLayout, BentoFormLayoutFieldTip }, * template: ` * <bento-form-layout> * <template #error-message>There is an error. Correct the highlighted field.</template> * * <bento-input-field>Input field</bento-input-field> * * <bento-form-layout-field-tip> * <bento-dropdown label="Dropdown" :items="dropdownItems" placeholder="Select an animal" /> * <template #message>This is a small tip that can be used in small spaces</template> * </bento-form-layout-field-tip> * * <bento-form-layout-title subsection> * Section title * <template #description>Optional section description</template> * </bento-form-layout-title> * </bento-form-layout> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./form-layout.scss" /> 

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

@@ -0,0 +1,85 @@
+import { Canvas, Story, Meta } from '@storybook/blocks';
+import * as HeaderStories from './header.stories';
+
+# Header
+
+Header sits either on top of a page or above another component, contains title, description hidden in a tooltip, an
+optional description, a set of actions and a timestamp.
+
+- Use for displaying the main page or component title
+- `header` can only be used once on a page or once per component, when using the component variant.
+- ⚠️ Don't change the `font-weight`, `font-size` or `color`.
+- ⚠️ Avoid the usage of unpredictable content like user names or account names.
+- Use tooltip to describe the page or the component
+
+<Meta title="Header" of={HeaderStories} />
+
+<Canvas withSource="closed">
+    <Story of={HeaderStories.EverythingBagel} />
+</Canvas>
+
+## Variants
+
+There are two variants of the component, a page header and a component header.
+
+### Page header
+
+Page header should always be the first content component on a page. Together with the top bar (if exists within the
+specific application), they help users orientate themselves.
+
+### Component header
+
+Component header should be used in cases where a page header already exists, but there is a component somewhere on the
+page that needs its own header. A common case is a mini data grid sitting in-between other components. Then the
+component variant can be added to it.
+
+The only compulsory element of a header is title. Everything else can be turned off.
+
+### Actions
+
+Buttons section should contain one primary and one secondary button, and a more options menu for any potential
+additional actions. These are all passed as a `BentoButtonActionsList` to the component.
+
+### Info icon content
+
+If a page or component description and link exists, it’s displayed inside of a popover next to the title. Users can
+either choose to use the `infoIconTooltipText` property or `infoIconTooltipContent` slot to set the info icon content.
+
+<Canvas withSource="closed">
+    <Story of={HeaderStories.WithInfoIconSlot} />
+</Canvas>
+
+### Description
+
+The `description` prop can be used to add a short description under the header's title.
+
+### Last updated
+
+The `lastUpdated` props can be passed to tell user when the data on a page/component was last updated. This will show as
+a timestamp under the header's title.
+
+### Reload button
+
+An optional button rendering next to the timestamp that receives a custom `BentoHeaderReloadButton` object:
+
+- `title`: the button label;
+- `state`: marks the state of the button, a string that can take up one of the values listed in
+  `BentoLoadingButtonState`;
+- `event`: a custom event handler to be executed whenever the button is clicked.
+
+This button only renders if the timestamp is shown.
+
+## Accessibility
+
+**Keyboard**
+
+- User can use Tab key to move focus to different interactive elements of the header in a logical order.
+- For more information about the individual subcomponents making up the header, please consult their documentation:
+  tooltip, button, menu.
+
+**Screenreader**
+
+- User can use Tab key to move focus to different interactive elements of the header in a logical order.
+- User hears each element identify itself and describe its purpose
+- For more information about the individual subcomponents making up the header, please consult their documentation:
+  tooltip, button, menu.

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

@@ -0,0 +1 @@
+import { BentoButtonActions } from '@/components/button'; import { BentoHeaderVariant } from './header.types'; import { reactive, ref, watch } from 'vue'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { BentoLink } from '@/components/link'; import type { Meta, StoryObj } from '@storybook/vue'; import BentoHeader from './header.vue'; import PlusIcon from '@adyen/ui-assets-icons-16/vue/plus'; const meta: Meta = { title: 'Header', component: BentoHeader, argTypes: { variant: { options: Object.values(BentoHeaderVariant), mapping: BentoHeaderVariant, defaultValue: BentoHeaderVariant.PAGE, control: { type: 'radio', }, }, lastUpdated: { control: { type: 'date', }, }, withReloadButton: { control: { type: 'boolean', }, }, unsetDate: { table: { category: 'Storybook controls', }, description: 'Control to hide date, because date control cannot be unset in Storybook. Not a prop.', control: { type: 'boolean', }, }, // Slots description: { control: { disable: true }, description: 'Slot for the description, displayed below the title. Use this slot for rich content like links or formatted text.', table: { type: { summary: 'VNode[]' }, }, }, }, }; const HEADER_DESCRIPTION = "This page shows how Adyen's AI boosts your payment performance and revenue. Monitor your authorization rate uplift and discover data-driven opportunities for further optimization."; const DEFAULT_HEADER_PROPS = { title: 'Title', variant: 'page', }; const EVERYTHING_HEADER_PROPS = { ...DEFAULT_HEADER_PROPS, description: HEADER_DESCRIPTION, 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(), infoIconTooltipText: 'Title Tooltip Text', }; export default meta; type Story = StoryObj<typeof BentoHeader>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoHeader, BentoButtonActions }, props: Object.keys(argTypes), setup(props) { const date = ref(null); const reloadButtonText = ref('Reload'); const reloadButtonState = ref('start'); const reloadButton = reactive({ title: reloadButtonText, state: reloadButtonState, event: async () => { if (reloadButtonState.value === 'start') { reloadButtonText.value = 'Loading'; reloadButtonState.value = 'loading'; setTimeout(() => { reloadButtonText.value = 'Reload'; reloadButtonState.value = 'start'; }, 2000); } }, }); watch( () => props.unsetDate, (val: boolean) => { date.value = val ? null : props.lastUpdated; }, { immediate: true } ); watch( () => props.lastUpdated, val => { date.value = props.unsetDate !== true && val; }, { immediate: true } ); return { args: isVue2 ? props : _args, date, reloadButton, }; }, template: ` <bento-header v-bind="args" :reloadButton="reloadButton" :last-updated="date" /> `, }), args: DEFAULT_HEADER_PROPS, argTypes: { icon: { table: { disable: true } } }, }; const everythingBagelCode = ` <bento-header title="Title" variant="page" :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 }, ]" description="${HEADER_DESCRIPTION}" :lastUpdated="new Date()" infoIconTooltipText="Title Tooltip Text" :reloadButton="{ title: 'Reload', state: 'start', event: async () => { // Your loading button logic }, }" /> `; export const EverythingBagel: Story = { ...Default, args: EVERYTHING_HEADER_PROPS, parameters: storybookDocsParameter(everythingBagelCode), }; const withInfoIconSlotCode = ` <bento-header> <template #infoIconTooltipContent> Description and/or <bento-link to="/">link</bento-link> </template> </bento-header> `; export const WithInfoIconSlot: Story = { ...Default, render: (_args, { argTypes }) => ({ components: { BentoHeader, BentoButtonActions, BentoLink }, props: Object.keys(argTypes), setup(props) { const date = new Date(); return { args: isVue2 ? props : _args, date, }; }, template: ` <bento-header v-bind="args" :last-updated="date"> <template #infoIconTooltipContent> Description and/or <bento-link to="/">link</bento-link> </template> </bento-header> `, }), args: { ...Default.args, }, parameters: storybookDocsParameter(withInfoIconSlotCode), }; 

package/dist/assets/components/header/header.vue

@@ -0,0 +1 @@
+<template> <header class="b-header" :class="conditionalClasses"> <div class="b-header__wrapper"> <div class="b-header__title"> <div> <bento-typography v-bind="typography" class="b-header__text">{{ title }}</bento-typography> <info-icon-with-popover v-if="infoIconTooltipText || hasSlot('infoIconTooltipContent')" class="b-header__tooltip" :popover-text="infoIconTooltipText" > <template v-if="hasSlot('infoIconTooltipContent')" #default ><slot name="infoIconTooltipContent" /></template> </info-icon-with-popover> </div> </div> <header-meta v-if="description || hasSlot('description') || lastUpdated" class="b-header__meta-container" :description="description" :last-updated="lastUpdated" :reload-button="reloadButton" > <template v-if="hasSlot('description')" #description><slot name="description" /></template> </header-meta> <button-actions-with-menu v-if="actions" :actions="actions" :displayed-actions="2" class="b-header__actions" /> </div> </header> </template> <script lang="ts"> import { computed, defineComponent, type PropType } from 'vue'; import { InfoIconWithPopover } from '@/internal'; import { type BentoButtonActionsList } from '@/components/button'; import { useHasSlot } from '@/composables'; import { type BentoHeaderReloadButton, BentoHeaderVariant } from './header.types'; import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography'; import { HeaderMeta } from '@/internal/header-meta'; import ButtonActionsWithMenu from '../internal/button-actions-with-menu/button-actions-with-menu.vue'; export default defineComponent({ name: 'bento-header', components: { BentoTypography, ButtonActionsWithMenu, InfoIconWithPopover, HeaderMeta, }, props: { /** * Array of BentoButtonActionsList to show to the right of the title */ actions: { type: Array as PropType<BentoButtonActionsList>, default: null, }, /** * Text showed under the title */ description: { type: String, default: null }, /** * Text showed in the info-icon tooltip on hover */ infoIconTooltipText: { type: InfoIconWithPopover.props.popoverText.type, default: null }, /** * Popover position of the info icon text. */ infoIconPopoverPosition: { type: InfoIconWithPopover.props.popoverPosition.type, default: InfoIconWithPopover.props.popoverPosition.default, validator: InfoIconWithPopover.props.popoverPosition.validator, }, /** * JavaScript "Date" object for when the content was last updated */ lastUpdated: { type: [Date, Number], default: null }, /** * Variant represents type of Header * @values page, component */ variant: { type: String as PropType<BentoHeaderVariant | `${BentoHeaderVariant}`>, default: BentoHeaderVariant.PAGE, validator: (value: BentoHeaderVariant) => Object.values(BentoHeaderVariant).includes(value), }, /** * Text used as a title */ title: { type: String, required: true }, /** * Reload button which shows next to the header's timestamp * {@see BentoHeaderReloadButton} */ reloadButton: { type: Object as PropType<BentoHeaderReloadButton>, default: null, }, }, emits: ['reload'], setup(props, { slots }) { const conditionalClasses = computed(() => ({ 'b-header--component': props.variant === BentoHeaderVariant.COMPONENT, })); const typography = computed(() => ({ el: props.variant === BentoHeaderVariant.PAGE ? BentoTypographyElement.H1 : BentoTypographyElement.H2, variant: BentoTypographyVariant.TITLE, medium: props.variant === BentoHeaderVariant.COMPONENT, large: props.variant === BentoHeaderVariant.PAGE, })); return { hasSlot: useHasSlot(slots), conditionalClasses, typography, }; }, }); </script> <style lang="scss" scoped src="./header.scss" /> 

package/dist/assets/components/header-with-views/components/header-with-views-all-views/header-with-views-all-views.vue

@@ -0,0 +1 @@
+<template> <div ref="allViewsRef" class="b-header-with-views-all-views" data-testid="header-with-views-all-views" @keydown.esc.stop.prevent="closeMenu" > <bento-toggle-button ref="allViewsMenuToggleRef" aria-haspopup="true" :aria-expanded="showMenu" :aria-controls="showMenu ? menuPopoverId : null" variant="tertiary" :toggled="showMenu" @click="toggleShowMenu" > <template #iconLeft> <menu-icon :svg-title="t('toggleAllViews')" /> </template> </bento-toggle-button> <bento-popover v-if="allViewsMenuToggleRef" :id="menuPopoverId" ref="allViewsMenuPopoverRef" class="b-header-with-views-all-views__popover" :open="showMenu" :target-element="allViewsMenuToggleRef" :fixed-positioning="true" :overflow-visible="true" position="bottom-end" without-space > <output v-if="draggedViewIndex !== null && draggingOverViewIndex !== null" class="b-header-with-views-all-views__popover-status" > {{ t('movingDraggedToPosition', { dragged: menuItems[draggedViewIndex].label, draggingOver: menuItems[draggingOverViewIndex].label, }) }} </output> <ul ref="menuRef" class="b-header-with-views-all-views__popover-menu"> <li v-for="(item, index) in menuItems" ref="menuItemRefs" :key="index" data-drag-item class="b-header-with-views-all-views__popover-menu-item" :class="conditionalDraggableItemClass(index)" @pointerdown="handleDragStart(index, $event)" > <div class="b-header-with-views-all-views__popover-menu-item-content"> <bento-button data-drag-trigger class="b-header-with-views-all-views__popover-menu-item-button b-header-with-views-all-views__popover-menu-item-button-reorder" variant="tertiary" :aria-pressed="isItemDragged(index)" @keydown.enter.native="handleDragKeyboardToggle(index, $event)" @keydown.space.native="handleDragKeyboardToggle(index, $event)" @keydown.down.native="handleDragKeyboardMove(UseDragAndDropViewsDirectionEnum.DOWN, $event)" @keydown.up.native="handleDragKeyboardMove(UseDragAndDropViewsDirectionEnum.UP, $event)" @keydown.esc.native="handleDragStop" > <template #iconLeft> <grab-icon :svg-title="t('reorderView', { label: item.label })" /> </template> </bento-button> <bento-button data-view-select class="b-header-with-views-all-views__popover-menu-item-button b-header-with-views-all-views__popover-menu-item-button-select" variant="tertiary" @click="emit('select:view', index)" > <template #iconLeft> <span class="b-header-with-views-all-views__popover-menu-item-button-icon" :class="`b-header-with-views-all-views__popover-menu-item-button-icon--${item.iconColor}`" aria-hidden="true" > <component :is="BentoHeaderWithViewsItemIconElement[item.icon]" /> </span> </template> <bento-typography el="span" variant="body" class="b-header-with-views-all-views__popover-menu-item-button-text" > {{ item.label }} </bento-typography> </bento-button> <bento-menu ref="editViewMenuRefs" data-view-menu class="b-header-with-views-all-views__popover-menu-item-button" :button="{ variant: 'tertiary', condensed: true }" :close-on-click-outside-options="menuCloseOnClickOutsideOptions" :data="menuItemsActions" menu-position="right-start" @open="emit('open:view-menu', index)" @close="emit('close:view-menu', index)" @keydown.tab.native.capture="closeViewMenuNatively(index)" > <template #iconLeft> <options-horizontal-icon :svg-title="t('openViewOptions', { label: item.label })" /> </template> </bento-menu> </div> </li> </ul> </bento-popover> </div> </template> <script setup lang="ts"> import { BentoButton, BentoToggleButton } from '@/components/button'; import { BentoHeaderWithViewsItemIconElement } from '@/components/header-with-views/header-with-views.types'; import { BentoMenu } from '@/components/menu'; import { BentoPopover } from '@/components/popover'; import { BentoTypography } from '@/components/typography'; import { useClickOutside } from '@/composables'; import { generateUid } from '@/core/utils/ts'; import { useI18n } from '@/utils/ts/i18n'; import GrabIcon from '@adyen/ui-assets-icons-16/vue/grab'; import MenuIcon from '@adyen/ui-assets-icons-16/vue/menu'; import OptionsHorizontalIcon from '@adyen/ui-assets-icons-16/vue/options-horizontal'; import { nextTick, ref, toRef } from 'vue'; import { useDragAndDropViews, UseDragAndDropViewsDirectionEnum } from '../../composables'; import { type HeaderWithViewsAllViewsProps } from './header-with-views-all-views.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<HeaderWithViewsAllViewsProps>(), {}); const emit = defineEmits<{ /** * Emitted when the "all views" menu is requested to be closed. */ (e: 'close:all-views'): void; /** * Emitted when a specific view's action menu is requested to be closed. */ (e: 'close:view-menu', index: number): void; /** * Emitted when the "all views" menu is requested to be opened. */ (e: 'open:all-views'): void; /** * Emitted when a specific view's action menu is requested to be opened. */ (e: 'open:view-menu', index: number): void; /** * Emitted when a view item is selected from the "all views" menu. */ (e: 'select:view', index: number): void; /** * Emitted when the order of views has been changed due to drag and drop. */ (e: 'reorder:view', newViews: HeaderWithViewsAllViewsProps['menuItems']): void; }>(); const showMenu = ref(false); const allViewsMenuToggleRef = ref(null); const allViewsMenuPopoverRef = ref(null); const allViewsRef = ref(null); const menuRef = ref(null); const menuItemRefs = ref<Array<HTMLElement>>(null); const editViewMenuRefs = ref(null); const menuPopoverId = generateUid('menu-popover'); const { t } = useI18n<{ message: MessageSchema }>({ messages }); useClickOutside(allViewsMenuPopoverRef, () => closeMenu(), { ignore: [allViewsMenuToggleRef, ...(props.menuCloseOnClickOutsideOptions?.ignore ?? [])], }); const openMenu = () => { showMenu.value = true; emit('open:all-views'); }; const closeMenu = async () => { if (!showMenu.value) { return; } showMenu.value = false; emit('close:all-views'); await nextTick(); allViewsMenuToggleRef.value.$el.focus(); }; const toggleShowMenu = (e: MouseEvent) => { e.stopPropagation(); if (!showMenu.value) { openMenu(); } else { closeMenu(); } }; const { draggedViewIndex, draggingOverViewIndex, isItemDragged, handleDragKeyboardMove, handleDragKeyboardToggle, handleDragStart, handleDragStop, } = useDragAndDropViews({ items: toRef(props, 'menuItems'), itemRefs: menuItemRefs, onDrop: value => emit('reorder:view', value), }); const conditionalDraggableItemClass = (index: number) => ({ ['b-header-with-views-all-views__popover-menu-item--dragging']: isItemDragged(index), }); const closeViewMenuNatively = (index: number) => { // skip built-in refocus on the menu button when menu is closed // enables tab to flow as intended by HTML spec editViewMenuRefs.value[index].closeMenu(false); }; </script> <script lang="ts"> /** * Internal component to handle the logic for the list of all views available. */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./header-with-views-all-views.scss" /> 

package/dist/assets/components/header-with-views/components/header-with-views-item-edit-form/header-with-views-edit-form.vue

@@ -0,0 +1 @@
+<template> <form class="b-header-with-views-edit-form"> <field-label>{{ t('title') }}</field-label> <div class="b-header-with-views-edit-form__icon-choice-alert" role="alert">{{ computedAlert }}</div> <div class="b-header-with-views-edit-form__icon-selector"> <bento-toggle-button ref="iconSelectorButtonRef" variant="secondary" :aria-expanded="showIconSelectorPopover" :aria-controls="showIconSelectorPopover ? iconPopoverId : null" :disabled="props.disableCustomization" :toggled="showIconSelectorPopover" @click="showIconSelectorPopover = !showIconSelectorPopover" > <template #iconLeft> <component :is="BentoHeaderWithViewsItemIconElement[iconValue]" :class="conditionalIconClass" :svg-title="t('viewIcons')" /> </template> </bento-toggle-button> <bento-popover v-if="iconSelectorButtonRef && !props.disableCustomization" :id="iconPopoverId" ref="iconPopoverRef" class="b-header-with-views-edit-form__icon-selector-popover" :target-element="iconSelectorButtonRef" :open="showIconSelectorPopover" :fallback-position="['bottom-end']" :fixed-positioning="true" :overflow-visible="true" position="bottom-end" @dismiss="showIconSelectorPopover = false" @keydown.escape.native.capture.stop.prevent="showIconSelectorPopover = false" > <div class="b-header-with-views-edit-form__icon-panel"> <div class="b-header-with-views-edit-form__icon-color-options"> <div v-for="(color, index) in iconColorOptions" :key="index" class="b-header-with-views-edit-form__icon-options-wrapper" > <bento-button class="b-header-with-views-edit-form__icon-color-options-button" :class="`b-header-with-views-edit-form__icon-color--${color}`" :aria-selected="iconColorValue === color" variant="tertiary" @click="iconColorValue = color" > <template #iconLeft> <circle-filled-icon :svg-title="t('selectIconColor', { color })" ></circle-filled-icon> </template> </bento-button> </div> </div> <bento-divider /> <div class="b-header-with-views-edit-form__icon-options"> <bento-button v-for="(icon, index) in iconOptions" :key="index" class="b-header-with-views-edit-form__icon-options-button" :aria-selected="iconValue === icon" variant="tertiary" @click="iconValue = icon" > <template #iconLeft> <component :is="BentoHeaderWithViewsItemIconElement[icon]" :svg-title="t('selectIcon', { icon })" /> </template> </bento-button> </div> </div> </bento-popover> <bento-input-field ref="inputFieldRef" class="b-header-with-views-edit-form__icon-selector-input" :aria-label="t('viewLabel')" :error-message="errors.label" :model-value="labelValue" @keydown.enter.prevent="emit('keydown:enter', computedFormValues)" @update:model-value="handleInput" @blur="emit('blur:label', labelValue)" ></bento-input-field> </div> <bento-checkbox v-if="additionalFormItem" :model-value="additionalFormItemValue" class="b-header-with-views-edit-form__additional-config" @update:model-value="handleAdditionalFormItemChange" > {{ additionalFormItem.label }} </bento-checkbox> <bento-button-actions class="b-header-with-views-edit-form__actions" :actions="computedActions" layout="buttons-end" /> </form> </template> <script setup lang="ts"> import { BentoButton, BentoButtonActions, type BentoButtonActionsList, BentoToggleButton, } from '@/components/button'; import { BentoCheckbox } from '@/components/checkbox'; import { BentoDivider } from '@/components/divider'; import { BentoInputField } from '@/components/input-field'; import { BentoPopover } from '@/components/popover'; import { useClickOutside } from '@/composables'; import { generateUid } from '@/core/utils/ts'; import { FieldLabel } from '@/internal'; import { debounce } from '@/utils/ts/debounce'; import { useI18n } from '@/utils/ts/i18n'; import CircleFilledIcon from '@adyen/ui-assets-icons-16/vue/circle-filled'; import { onKeyStroke } from '@vueuse/core'; import { computed, nextTick, onMounted, ref, watch } from 'vue'; import { type BentoHeaderWithViewsItem, BentoHeaderWithViewsItemIconColorEnum, BentoHeaderWithViewsItemIconElement, BentoHeaderWithViewsItemIconEnum, } from '../../header-with-views.types'; import { HeaderWithViewsEditFormContextEnum, type HeaderWithViewsEditFormProps, } from './header-with-views-edit-form.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<HeaderWithViewsEditFormProps>(), { additionalFormItem: null, context: HeaderWithViewsEditFormContextEnum.CREATE, disableCustomization: false, errors: null, label: '', icon: BentoHeaderWithViewsItemIconEnum.STACK, iconColor: BentoHeaderWithViewsItemIconColorEnum.PRIMARY, }); const emit = defineEmits<{ /** * Emitted when form is canceled. */ (e: 'cancel'): void; /** * Emitted when the item is updated. * Typically used to sync changes to the parent component. */ (e: 'update', value: BentoHeaderWithViewsItem): void; /** * Emitted when the item is requested to be deleted. */ (e: 'delete', value: BentoHeaderWithViewsItem): void; /** * Emitted when the label of the item is modified via input. */ (e: 'input:label', value: BentoHeaderWithViewsItem['label']): void; /** * Emitted when the label input loses focus (blur event). */ (e: 'blur:label', value: BentoHeaderWithViewsItem['label']): void; /** * Emitted when the Enter key is pressed while interacting with the item. */ (e: 'keydown:enter', value: BentoHeaderWithViewsItem): void; }>(); // form inputs const labelValue = ref(props.label); const iconValue = ref(props.icon); const iconColorValue = ref(props.iconColor); const additionalFormItemValue = ref<boolean>(props.additionalFormItem?.value ?? false); const isFormDirty = ref(false); // refs const iconSelectorButtonRef = ref(null); const iconPopoverRef = ref(null); const inputFieldRef = ref(null); const iconPopoverId = generateUid('iconPopover'); // view controls const showIconSelectorPopover = ref(false); const iconOptions = computed(() => Object.values(BentoHeaderWithViewsItemIconEnum)); const iconColorOptions = computed(() => Object.values(BentoHeaderWithViewsItemIconColorEnum)); const hasErrors = computed(() => Object.values(props.errors).some(error => error.length > 0)); const computedAlert = computed( () => `${t('selected')}: ${iconValue.value} ${t('icon')}, ${t('color')} ${iconColorValue.value}` ); const computedActions = computed<BentoButtonActionsList>(() => [ ...(props.context === HeaderWithViewsEditFormContextEnum.EDIT ? // edit mode [ { title: t('save'), type: 'submit', event: () => { if (hasErrors.value) { return; } updateView(); }, }, ] : // create mode [ { title: t('create'), type: 'submit', event: () => { if (!isFormDirty.value || hasErrors.value) { return; } updateView(); }, }, ]), { title: t('cancel'), event: resetView, }, ]); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const computedFormValues = computed(() => ({ iconColor: iconColorValue.value, icon: iconValue.value, label: labelValue.value, ...(props.additionalFormItem ? { additionalViewSetting: { label: props.additionalFormItem.label, value: additionalFormItemValue.value, }, } : []), })); const conditionalIconClass = computed(() => props.disableCustomization ? '' : `b-header-with-views-edit-form__icon-color--${iconColorValue.value}` ); const hideIconSelectorPopover = () => { showIconSelectorPopover.value = false; }; const updateView = () => { emit('update', computedFormValues.value); }; const resetView = () => { iconValue.value = props.icon; iconColorValue.value = props.iconColor; labelValue.value = props.label; emit('cancel'); }; const handleInput = debounce((value: string) => { labelValue.value = value; isFormDirty.value = true; }, 200); const handleAdditionalFormItemChange = (value: boolean) => { additionalFormItemValue.value = value; isFormDirty.value = true; }; useClickOutside(iconPopoverRef, hideIconSelectorPopover, { ignore: [iconSelectorButtonRef], }); onKeyStroke('Escape', hideIconSelectorPopover, { target: iconPopoverRef, eventName: 'keydown', }); watch(labelValue, value => emit('input:label', value)); onMounted(async () => { // force focus to start from the input field await nextTick(); inputFieldRef.value.$refs.inputFieldElement.focus(); }); </script> <script lang="ts"> /** * Internal component to which presents a form for handling the logic of editing and creating a view. */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./header-with-views-edit-form.scss" /> 

package/dist/assets/components/header-with-views/header-with-views.docs.mdx

@@ -0,0 +1,103 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as HeaderWithViewsStories from './header-with-views.stories';
+
+<Meta of={HeaderWithViewsStories} />
+
+# HeaderWithViews
+
+HeaderWithViews displays tabs which allow users to save and quickly retrieve configurations tailored to specific tasks.
+Eg: managing daily transactions, auditing, or analyzing specific data sets. User may define the columns, filters, and
+search queries they need and manage these views with the provided tabs.
+
+<Canvas of={HeaderWithViewsStories.Default} />
+
+## Use Cases
+
+Use a HeaderWithViews if:
+
+- Use when your users use a single page or dashboard for multiple tasks
+- Use when your users need to save configurations for quick and easy access.
+
+## Variations
+
+### Without views
+
+When there are no views provided in the `views` property, it renders an empty state with only the `Create view` button.
+
+The user can provide an empty state or a "default" view.
+
+1. Listen to the emit `add:view`.
+2. On `add:view`, add the emitted value as a view config onto your locally stores view.
+
+### With views
+
+1. Listen to the emit `select:view`.
+2. On `select:view`, update your view to the emitted label. Each label should be unique.
+3. Listen to `add:view`, `delete:view`, `duplicate:view`, `update:view`.
+4. On emission of any of the above events, update your locally stored views. The component performs an optimistic update
+   whereby, it updates itself first before emission. The idea should be similar to a `v-model` of an input.
+5. Listen to `reorder:view`.
+6. On emission, update the order of your views that you have passed into the prop.
+
+## Modifiers
+
+### Controlled Active View
+
+The `activeViewIndex` prop supports two-way binding, allowing you to control and track the currently active view from
+outside the component.
+
+- **Vue 3**: Use `v-model:active-view-index="activeViewIndex"`
+- **Vue 2**: Use `:active-view-index.sync="activeViewIndex"` or
+  `:active-view-index="activeViewIndex" @update:active-view-index="activeViewIndex = $event"`
+
+This is useful when you need to:
+
+- Programmatically switch views (e.g., via external buttons or navigation)
+- Persist the active view state (e.g., in URL query params or local storage)
+- Synchronize the active view with other parts of your application
+
+<Canvas of={HeaderWithViewsStories.ControlledActiveView} />
+
+### With Unsaved changes
+
+When a user updates the view with new changes such as filters, columns changes etc. The view will get a blue dot to
+indicate that there are unsaved changes.
+
+To save the view a user will hover the view, select the more button to reveal the option to save the changes.
+
+1. To enable this feature, set `hasChanges: true`.
+2. With this enabled, a modal may be displayed (with the option to disable the mdoal as long as the browser is opened)
+   whenever the user switches view, warning users that their changes could be reverted if the decide to proceed without
+   saving their changes.
+3. Listen for the `update:skip-unsaved-changes` event. This event is emitted when the user decides to skip the unsaved
+   changes notification. The emission happens _only_ if the `skipUnsavedChangesText` property receives a string value.
+   Its purpose is to ensure that the user's preference regarding continuous prompts for saving changes when switching
+   view tabs is consistently honored.
+4. Listen to `restore:view` and `save:view`.
+5. On emission of either event, either revert the view or update it.
+6. Set the property `hasChanges` to `false` so that it no longer prompts the modal. This not controlled by
+   `BentoHeaderWithViews`.
+7. _Important_: When an active view with unsaved changes is deleted, listen to the `delete:view` event and set
+   `hasChanges: false` when the active view is the deleted view. This has to be done from the user side as there is no
+   additional event emitted for `hasChanges` changes.
+
+## Accessibility
+
+### Keyboard interaction
+
+| Keyboard interaction | Output                                                                                                              |
+| -------------------- | ------------------------------------------------------------------------------------------------------------------- |
+| `Tab`                | Focus moves to next navigatable element, either the next tab in the view bar or the next item in the all views menu |
+| `Arrow Up/Down`      | Focus moves to next item in the view menu or reorder an item during drag-and-drop                                   |
+| `Enter/Space`        | Select a view, open the view menu, select a menu option or initiate keyboard drag-and-drop                          |
+| `Escape`             | Closes the topmost popver or exit drag-and-drop                                                                     |
+
+### Roles, states and properties
+
+| ARIA attribute | is automatic?                                                              | fallback used | manual override |
+| -------------- | -------------------------------------------------------------------------- | ------------- | --------------- |
+| group          | Yes. This is inferred as the view container consists of a group of buttons | -             | -               |
+
+## Resources
+
+- [Figma link](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=38116-133408&m=dev)

package/dist/assets/components/header-with-views/header-with-views.stories.ts

@@ -0,0 +1 @@
+import { storybookDocsParameter, withToastDecorator } from '@/utils/ts/storybook'; import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import { ref, watch } from 'vue'; import { BentoHeaderWithViewsItemIconColorEnum } from './header-with-views.types'; import BentoHeaderWithViews from './header-with-views.vue'; import { BentoInputField } from '@/components/input-field'; import HeaderWithViewsControlledActiveViewExample from './__tests__/header-with-views-controlled-active-view-example.vue?raw'; const meta: Meta = { title: 'Header with views', component: BentoHeaderWithViews, decorators: [withToastDecorator], argTypes: { // Events 'add:view': { table: { type: { summary: '(value: BentoHeaderWithViewsItemUpdate) => void' }, }, control: { disable: true }, }, 'delete:view': { table: { type: { summary: '(value: BentoHeaderWithViewsItemUpdate) => void' }, }, control: { disable: true }, }, 'duplicate:view': { table: { type: { summary: '(value: BentoHeaderWithViewsItemUpdate) => void' }, }, control: { disable: true }, }, 'reorder:view': { table: { type: { summary: '(value: Omit<BentoHeaderWithViewsItemUpdate, "targetViewLabel">) => void' }, }, control: { disable: true }, }, 'restore:view': { table: { type: { summary: '(value: string) => void' }, }, control: { disable: true }, }, 'save:view': { table: { type: { summary: '(value: string) => void' }, }, control: { disable: true }, }, 'select:view': { table: { type: { summary: '(value: string) => void' }, }, control: { disable: true }, }, 'update:view': { table: { type: { summary: '(value: BentoHeaderWithViewsItemUpdate) => void' }, }, control: { disable: true }, }, 'update:active-view-index': { table: { type: { summary: '(value: number | null) => void' }, }, control: { disable: true }, }, // Slots infoIconTooltipContent: { description: 'Content to be displayed as a tooltip next to the header. This replaces the description property if present', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, }, }; export default meta; type Story = StoryObj<typeof BentoHeaderWithViews>; const defaultCode = ` <template> <bento-header-with-views :actions="actions" description="Description" title="Page Title" :views="views" :additionalViewSetting='{ "label":"Include date filter (relative)", "value":false }' hasChanges skipUnsavedChangesText="Don’t show this message again" @add:view="handleViews" @delete:view="handleViews" @duplicate:view="handleViews" @reorder:view="handleViews" @restore:view="handleView" @save:view="handleView" @select:view="handleView" @update:view="handleViews" @update:skip-unsaved-changes="handleSkipUnsavedChanges" @update:active-view-index="handleActiveViewIndex" /> </template> <script setup lang="ts"> import { BentoHeaderWithViews } from '@adyen/bento-vue2' const handleViews = ({ newViews }) => void; const handleView = (label) => void; const handleSkipUnsavedChanges = (value) => void; const handleActiveViewIndex = (index) => void; const views = [ { icon: 'stack', iconColor: 'primary', label: 'A very long value' }, { icon: 'stack', iconColor: 'primary', label: 'Fixed view', isFixed: true, }, { icon: 'stack', iconColor: 'primary', label: 'View', } ]; const actions = [ {"title":"Primary action"}, {"title":"Secondary action"}, {"title":"Tertiary action"}, {"title":"Another action"} ] </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoHeaderWithViews }, props: Object.keys(argTypes), template: ` <bento-header-with-views v-bind="args" @add:view="addView" @delete:view="deleteView" @duplicate:view="duplicateView" @reorder:view="reorderView" @restore:view="restoreView" @save:view="saveView" @select:view="selectView" @update:view="updateView" @update:skip-unsaved-changes="updateSkipUnsavedChanges" @update:active-view-index="updateActiveViewIndex" /> `, setup(props) { const addView = value => action('add:view')(value); const deleteView = value => action('delete:view')(value); const duplicateView = value => action('duplicate:view')(value); const reorderView = value => action('reorder:view')(value); const restoreView = value => action('restore:view')(value); const saveView = value => action('save:view')(value); const selectView = value => action('select:view')(value); const updateView = value => action('update:view')(value); const updateSkipUnsavedChanges = value => action('update:skip-unsaved-changes')(value); const updateActiveViewIndex = value => action('update:active-view-index')(value); return { args: isVue2 ? props : _args, addView, deleteView, duplicateView, reorderView, restoreView, saveView, selectView, updateView, updateSkipUnsavedChanges, updateActiveViewIndex, }; }, }), args: { hasChanges: true, skipUnsavedChangesText: 'Don’t show this message again', actions: [ { title: 'Primary action', event: () => undefined }, { title: 'Secondary action', event: () => undefined }, { title: 'Tertiary action', event: () => undefined }, { title: 'Another action', event: () => undefined }, ], additionalViewSetting: { label: 'Include date filter (relative)', value: false, }, title: 'Page Title', views: [ { icon: 'stack', iconColor: BentoHeaderWithViewsItemIconColorEnum.PRIMARY, label: 'A very long value', }, { icon: 'stack', iconColor: BentoHeaderWithViewsItemIconColorEnum.PRIMARY, label: 'Fixed view', isFixed: true, }, { icon: 'stack', iconColor: BentoHeaderWithViewsItemIconColorEnum.PRIMARY, label: 'View', }, ], infoIconTooltipText: 'Info icon tooltip text', lastUpdated: new Date(), description: "This page shows how Adyen's AI boosts your payment performance and revenue. Monitor your authorization rate uplift and discover data-driven opportunities for further optimization.", reloadButton: { title: 'Reload', state: 'start', event: action('reloadButtonEvent'), }, }, parameters: storybookDocsParameter(defaultCode), }; export const ControlledActiveView: Story = { render: (_args, { argTypes }) => ({ components: { BentoHeaderWithViews, BentoInputField }, props: Object.keys(argTypes), template: ` <div> <bento-header-with-views v-bind="args" :active-view-index="activeViewIndex" @update:active-view-index="onActiveViewIndexChange" /> <div style="margin-top: var(--b-spacer-080); max-width: 200px;"> <bento-input-field :model-value="activeViewIndex" @update:model-value="onInputChange" type="number" label="Active view index" /> </div> </div> `, setup(props) { const activeViewIndex = ref(props.activeViewIndex); const onActiveViewIndexChange = (value: number) => { activeViewIndex.value = value; action('update:active-view-index')(value); }; const onInputChange = (value: string) => { const numValue = Number.parseInt(value, 10); activeViewIndex.value = numValue; }; watch( () => props.activeViewIndex, index => { activeViewIndex.value = index; } ); return { args: isVue2 ? props : _args, activeViewIndex, onActiveViewIndexChange, onInputChange, }; }, }), args: { hasChanges: false, skipUnsavedChangesText: null, title: 'Page Title', views: [ { icon: 'stack', iconColor: BentoHeaderWithViewsItemIconColorEnum.BLUE, label: 'First View', }, { icon: 'leaf', iconColor: BentoHeaderWithViewsItemIconColorEnum.GREEN, label: 'Second View', }, { icon: 'star', iconColor: BentoHeaderWithViewsItemIconColorEnum.YELLOW, label: 'Third View', }, ], }, parameters: storybookDocsParameter(HeaderWithViewsControlledActiveViewExample), }; 

package/dist/assets/components/header-with-views/header-with-views.vue

@@ -0,0 +1 @@
+<template> <div ref="hostRef" class="b-header-with-views"> <div class="b-header-with-views__container" :class="conditionalContainerClass"> <div class="b-header-with-views__title"> <bento-typography el="h2" variant="title">{{ title }}</bento-typography> <info-icon-with-popover v-if="infoIconTooltipText || hasSlot('infoIconTooltipContent')" :popover-text="infoIconTooltipText" class="b-header-with-views__title-icon" > <template v-if="hasSlot('infoIconTooltipContent')" #default> <slot name="infoIconTooltipContent" /> </template> </info-icon-with-popover> </div> <fieldset ref="viewsRef" class="b-header-with-views__bar" :aria-label="t('viewListLabel')"> <div v-for="(view, index) in computedViews" :key="index" ref="viewRefs" class="b-header-with-views__bar-tab" :class="isViewActive(index) ? 'b-header-with-views__bar-tab--active' : null" > <bento-button class="b-header-with-views__bar-tab-button" variant="tertiary-with-background" :aria-current="currentActiveView === index ? 'true' : 'false'" @click="handleViewSelect(index)" @keydown.enter.native="handleViewSelect(index)" @keydown.space.native="handleViewSelect(index)" > <template #iconLeft> <span class="b-header-with-views__bar-tab-button-icon" :class="`b-header-with-views__bar-tab-button-icon--${view.iconColor}`" aria-hidden="true" > <component :is="BentoHeaderWithViewsItemIconElement[view.icon]" /> </span> </template> <bento-typography el="span" variant="body" stronger class="b-header-with-views__bar-tab-button-text" > {{ view.label }} </bento-typography> <template v-if="isViewUnsaved(index)" #iconRight> <span class="b-header-with-views__bar-tab-button--unsaved"> <dot-icon :svg-title="t('withUnsavedChanges')" /> </span> </template> </bento-button> <bento-menu v-if="currentActiveView === index" ref="editViewMenuRefs" class="b-header-with-views__bar-tab-menu" :button="{ variant: 'tertiary' }" :data="getViewMenuData(index)" :close-on-click-outside-options="{ ignore: [`#${editViewPopoverId}`], }" :menu-fixed-positioning="true" @open="showViewMenuPopover(index)" @close="hideViewMenuPopover()" @keydown.tab.native.capture="handleTabEditViewPopover" > <template #iconLeft> <options-horizontal-icon :svg-title="t('openViewOptions', { label: view.label })" /> </template> </bento-menu> </div> <div ref="viewControlRef" class="b-header-with-views__bar-control"> <!-- All views --> <header-with-views-all-views v-if="computedViews.length" ref="viewControlAllViewsRef" :menu-items="computedViews" :menu-items-actions="getViewMenuData(activeViewMenuPopover)" :menu-close-on-click-outside-options="{ ignore: [`#${editViewPopoverId}`] }" @close:view-menu="hideViewMenuPopover()" @close:all-views="showAllViewsPopover = false" @open:all-views="showAllViewsPopover = true" @open:view-menu="index => showViewMenuPopover(index)" @reorder:view="views => handleReorder(views)" @select:view="index => handleViewSelect(index)" /> <bento-toggle-button ref="createViewButtonRef" :aria-expanded="showCreateViewPopover" :aria-controls="showCreateViewPopover ? createViewPopoverId : null" :toggled="showCreateViewPopover" variant="tertiary" @click="showCreateViewPopover = !showCreateViewPopover" > <template #iconLeft> <plus-icon :svg-title="t('createView')" :aria-hidden="computedViews.length === 0" /> </template> <template v-if="computedViews.length === 0" #default>{{ t('createView') }}</template> </bento-toggle-button> </div> </fieldset> <header-meta v-if="hasMetaSection" class="b-header-with-views__meta-container" :description="description" :last-updated="lastUpdated" :reload-button="reloadButton" > <template v-if="hasSlot('description')" #description><slot name="description" /></template> </header-meta> <button-actions-with-menu v-if="actions" :actions="actions" :actions-layout="isCompact ? 'buttons-start' : 'buttons-end'" :displayed-actions="2" :disable-responsive-behavior="true" :hide-displayed-actions-breakpoint="STACKED_LAYOUT_BREAKPOINT" class="b-header-with-views__actions" /> </div> <!-- Create view --> <bento-popover v-if="activeViewMenuPopover === null && createViewButtonRef" :id="createViewPopoverId" ref="createViewPopoverRef" :dismissible="true" :fixed-positioning="true" :target-element="createViewButtonRef" :title="t('createView')" :open="showCreateViewPopover" :overflow-visible="true" position="bottom-start" @dismiss="hideCreateViewPopover" @keydown.esc.native.capture.stop.prevent="hideCreateViewPopover" > <header-with-views-edit-form context="create" :errors="errors" :additional-form-item="additionalViewSetting" :disable-customization="disableCustomization" @blur:label="value => validateLabel(value, activeViewMenuPopover)" @input:label="value => validateLabel(value, activeViewMenuPopover)" @keydown:enter="handleKeydownEnterViewItem" @update="handleCreateViewItem" @cancel="hideCreateViewPopover" > </header-with-views-edit-form> </bento-popover> <!-- Edit view --> <bento-popover v-if="activeViewMenuPopover !== null && editViewTargetElementRef" :id="editViewPopoverId" ref="editViewPopoverRef" :disable-focus-trap="false" :dismissible="true" :fixed-positioning="true" :target-element="editViewTargetElementRef" :title="t('editDetails')" :open="activeEditViewPopover !== null" :overflow-visible="true" position="right-start" @dismiss="setActiveEditViewPopover()" @keydown.esc.native.capture.stop.prevent="setActiveEditViewPopover()" > <header-with-views-edit-form v-if="computedViews[activeEditViewPopover]" context="edit" :additional-form-item="computedViews[activeEditViewPopover].additionalViewSetting" :errors="errors" :icon="computedViews[activeEditViewPopover].icon" :icon-color="computedViews[activeEditViewPopover].iconColor" :label="computedViews[activeEditViewPopover].label" :disable-customization="disableCustomization" @blur:label="value => validateLabel(value, activeViewMenuPopover)" @input:label="value => validateLabel(value, activeViewMenuPopover)" @keydown:enter="handleKeydownEnterViewItem" @update="handleUpdateViewItem" @cancel="hideEditViewPopover" > </header-with-views-edit-form> </bento-popover> <!-- Unsaved views prompt --> <bento-modal v-if="showUnsavedModalWarning" :actions="computedUnsavedViewModalActions" :is-dismissible="false" :is-open="showUnsavedModalWarning" @close-modal="showUnsavedModalWarning = false" > <template #default>{{ t('unsavedChangesTitle', { label: computedViews[currentActiveView].label }) }}</template> <template #content> <div class="b-header-with-views__modal-description"> <bento-typography>{{ t('unsavedChangesDescription') }}</bento-typography> <bento-checkbox v-if="skipUnsavedChangesText" :model-value="skipUnsavedChangesReminder" @update:model-value="value => (skipUnsavedChangesReminder = value)" > {{ skipUnsavedChangesText }} </bento-checkbox> </div> </template> </bento-modal> <!-- Delete views prompt --> <bento-modal v-if="showDeleteModalWarning" :actions="computedDeleteViewModalActions" :is-open="showDeleteModalWarning" :is-dismissible="false" destructive-actions @click.native.capture="handleClickModal" @close-modal="showDeleteModalWarning = false" > <template #default> {{ t('deleteViewTitle', { label: computedViewToBeDeletedLabel }) }} </template> <template #content> <div class="b-header-with-views__modal-description"> <bento-typography>{{ t('deleteViewDescription', { label: computedViewToBeDeletedLabel }) }}</bento-typography> </div> </template> </bento-modal> </div> </template> <script setup lang="ts"> import { BentoButton, BentoToggleButton } from '@/components/button'; import { BentoCheckbox } from '@/components/checkbox'; import { BentoMenu, type BentoMenuItem } from '@/components/menu'; import BentoModal from '@/components/modal/modal.vue'; import { BentoPopover } from '@/components/popover'; import { BentoTypography } from '@/components/typography'; import { HeaderMeta } from '@/internal'; import { useBentoToastController, useClickOutside, useHasSlot } from '@/composables'; import { generateUid } from '@/core/utils/ts'; import ButtonActionsWithMenu from '@/internal/button-actions-with-menu/button-actions-with-menu.vue'; import { InfoIconWithPopover } from '@/internal/info-icon-with-popover'; import { useI18n } from '@/utils/ts/i18n'; import BinIcon from '@adyen/ui-assets-icons-16/vue/bin'; import DotIcon from '@adyen/ui-assets-icons-16/vue/dot'; import DownloadIcon from '@adyen/ui-assets-icons-16/vue/download'; import EditIcon from '@adyen/ui-assets-icons-16/vue/edit-2'; import HeartIcon from '@adyen/ui-assets-icons-16/vue/heart'; import OptionsHorizontalIcon from '@adyen/ui-assets-icons-16/vue/options-horizontal'; import PlusIcon from '@adyen/ui-assets-icons-16/vue/plus'; import PlusMultipleIcon from '@adyen/ui-assets-icons-16/vue/plus-multiple'; import RefreshIcon from '@adyen/ui-assets-icons-16/vue/refresh'; import { useElementSize } from '@vueuse/core'; import { computed, nextTick, onMounted, ref, useSlots, watch } from 'vue'; import { HeaderWithViewsAllViews, HeaderWithViewsEditForm } from './components'; import { useEditViews, useResponsiveViews } from './composables'; import { type BentoHeaderWithViewsEmits, type BentoHeaderWithViewsItem, BentoHeaderWithViewsItemIconElement, type BentoHeaderWithViewsProps, } from './header-with-views.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<BentoHeaderWithViewsProps>(), { actions: () => [], additionalViewSetting: null, title: null, description: null, disableCustomization: false, lastUpdated: null, reloadButton: null, infoIconTooltipText: null, views: () => [], disableAutoSelect: false, activeViewIndex: undefined, }); const emit = defineEmits<BentoHeaderWithViewsEmits>(); const STACKED_LAYOUT_BREAKPOINT = 573; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const slots = useSlots(); const hasSlot = useHasSlot(slots); // refs const createViewButtonRef = ref(null); const createViewPopoverRef = ref(null); const editViewPopoverRef = ref(null); const editViewMenuRefs = ref([]); const editViewTargetElementRef = ref(null); // used as a mount for the edit form popover const hostRef = ref(null); const viewsRef = ref<HTMLElement>(null); // container for all views const viewRefs = ref<Array<HTMLDivElement>>([]); // individual view const viewControlRef = ref(null); // all views menu and create view button container const viewControlAllViewsRef = ref(null); // all views menu // controls const showCreateViewPopover = ref<boolean>(false); // control the create view popover const showAllViewsPopover = ref<boolean>(false); // control when menu button is shown const showUnsavedModalWarning = ref<boolean>(false); const showDeleteModalWarning = ref<boolean>(false); const activeEditViewPopover = ref<number>(null); // control the edit view popover const activeViewMenuPopover = ref<number>(null); // control when menu items are shown const internalActiveView = ref<number>(null); // control which view the user is currently on const nextActiveView = ref<number>(null); // control which view is does the user want to navigate to, used for caching unsaved view navigation const viewToBeDeleted = ref<number>(null); // cache which view is marked for deletion // Computed property to handle two-way binding for activeViewIndex const currentActiveView = computed({ get: () => internalActiveView.value, set: (value: number | null) => { internalActiveView.value = value; emit('update:active-view-index', value); }, }); // models const skipUnsavedChangesReminder = ref<boolean>(false); const createViewPopoverId = generateUid('createViewPopover'); const editViewPopoverId = generateUid('editViewPopover'); useResponsiveViews({ container: viewsRef, children: viewRefs, offset: viewControlRef, activeViewIndex: currentActiveView, }); const { computedViews, clearError, duplicateView, errors, setViews, updateView, validateLabel } = useEditViews({ additionalViewSetting: props.additionalViewSetting, views: props.views, }); const hideCreateViewPopover = async (updateFocus = true) => { showCreateViewPopover.value = false; if (updateFocus) { await nextTick(); createViewButtonRef.value.$el.focus(); } clearError(); }; const hideEditViewPopover = () => { const currentMenuRef = showAllViewsPopover.value ? viewControlAllViewsRef.value.$refs.editViewMenuRefs[activeEditViewPopover.value] : editViewMenuRefs.value[0]; currentMenuRef?.closeMenu(); }; useClickOutside(createViewPopoverRef, () => hideCreateViewPopover(false), { ignore: [createViewButtonRef], }); useClickOutside(editViewPopoverRef, () => setActiveEditViewPopover(), { ignore: [editViewTargetElementRef], }); const { width: hostWidth } = useElementSize(hostRef); const { addToast } = useBentoToastController(); const computedUnsavedViewModalActions = computed(() => [ { title: t('saveChanges'), event: handleSaveChanges, }, { title: t('leave'), event: handleRestoreChanges, }, ]); const computedDeleteViewModalActions = computed(() => [ { title: t('deleteViewAction'), event: async () => { showDeleteModalWarning.value = false; const updatedViewObj = updateView(null, viewToBeDeleted.value); emit('delete:view', updatedViewObj); hideViewMenuPopover(); // if a view that is placed higher in the order is deleted, ignore if (currentActiveView.value < viewToBeDeleted.value) { return; } // if a view that is placed lower in the order is deleted, // we need to shift the index to maintain the current view if (currentActiveView.value > viewToBeDeleted.value) { currentActiveView.value -= 1; } else if (currentActiveView.value === viewToBeDeleted.value) { if (updatedViewObj.newViews.length === 0) { // there are no more views currentActiveView.value = null; } else if (currentActiveView.value >= updatedViewObj.newViews.length) { // shift it to the left currentActiveView.value -= 1; } // else, keep it at the same index } viewToBeDeleted.value = null; }, }, { title: t('cancel'), event: () => { showDeleteModalWarning.value = false; }, }, ]); const computedViewToBeDeletedLabel = computed(() => computedViews.value[viewToBeDeleted.value]?.label); const hasMetaSection = computed(() => props.description || hasSlot('description') || props.lastUpdated); const isCompact = computed(() => hostWidth.value <= STACKED_LAYOUT_BREAKPOINT); const conditionalContainerClass = computed(() => ({ 'b-header-with-views__container--is-compact': isCompact.value, 'b-header-with-views__container--has-meta': hasMetaSection.value, })); watch([currentActiveView, computedViews], ([newIndex, newViews], [oldIndex, oldViews]) => { // skip if the labels are the same or no active view const isViewUpdated = newIndex === oldIndex && newViews.length === oldViews.length; const isViewDeletedWithChangedIndex = newViews[newIndex]?.label === oldViews[oldIndex]?.label; if (isViewUpdated || isViewDeletedWithChangedIndex) { return; } // allow empty label // occurs when the user removes all views emit('select:view', newViews[newIndex]?.label ?? null); }); // whenever the view menu popover changes, we reset the edit popover because it is never opened by default watch(activeViewMenuPopover, () => { setActiveEditViewPopover(); }); watch(showAllViewsPopover, value => { if (value) { return; } // if show all view popover is closed, close children as well hideViewMenuPopover(); }); // set the popover to open next to the edit button watch(activeEditViewPopover, value => { const editButtonIndex = isViewUnsaved(value) ? 2 : 0; // EDGE CASE: // Since edit button can be clicked while in all views popover or while it is in the bar, // we will not support the case where edit popover is opened and the screen is resize until the view menu is hidden. // Edit popover will still be displayed but the position does not have to follow the edit button as it is hidden. if (showAllViewsPopover.value) { const menuListItemRef = viewControlAllViewsRef.value.$refs.editViewMenuRefs[activeViewMenuPopover.value]?.$refs ?.menuItemListRef; editViewTargetElementRef.value = viewControlAllViewsRef.value.$refs.editViewMenuRefs[activeViewMenuPopover.value]?.$refs?.menuItemListRef ?.$refs?.menuItemRef?.[editButtonIndex] ?? null; if (!value) { menuListItemRef?.focusItem(); clearError(); } return; } const menuListItemRef = editViewMenuRefs.value.find(ref => ref.$refs.menuItemListRef)?.$refs?.menuItemListRef; editViewTargetElementRef.value = menuListItemRef?.$refs?.menuItemRef?.[editButtonIndex] ?? null; if (!value) { menuListItemRef?.focusItem(); clearError(); } }); // Watch for external changes to the activeViewIndex prop watch( () => props.activeViewIndex, newValue => { if (newValue !== undefined && newValue >= 0 && newValue < computedViews.value.length) { currentActiveView.value = newValue; } } ); onMounted(() => { if ( props.activeViewIndex !== undefined && props.activeViewIndex >= 0 && props.activeViewIndex < computedViews.value.length ) { currentActiveView.value = props.activeViewIndex; } else if (!props.disableAutoSelect) { const defaultView = computedViews.value.findIndex(view => view.isDefault); currentActiveView.value = defaultView >= 0 ? defaultView : 0; } }); const getViewMenuData = (index: number): Array<BentoMenuItem> => [ ...(isViewUnsaved(index) ? [ { text: t('saveChanges'), handler: handleSaveChanges, icon: DownloadIcon, }, { addDivider: true, text: t('restoreChanges'), handler: handleRestoreChanges, icon: RefreshIcon, }, ] : []), ...(!computedViews.value[index]?.isFixed ? [ { text: t('edit'), handler: () => { setActiveEditViewPopover(activeViewMenuPopover.value); }, icon: EditIcon, skipClose: true, }, ] : []), { text: t('setAsDefault'), handler: () => { const updatedViewObj = updateView({ isDefault: true }, activeViewMenuPopover.value); emit('update:view', updatedViewObj); addToast({ text: t('setAsDefaultToast', { label: updatedViewObj.targetViewLabel }), }); hideViewMenuPopover(); }, icon: HeartIcon, }, { text: t('duplicate'), handler: () => { const updatedViewObj = duplicateView(activeViewMenuPopover.value); emit('duplicate:view', updatedViewObj); hideViewMenuPopover(); // switch to newly duplicated view handleViewSelect(updatedViewObj.newViews.length - 1); }, icon: PlusMultipleIcon, }, ...(!computedViews.value[index]?.isFixed ? [ { text: t('delete'), handler: () => { viewToBeDeleted.value = activeViewMenuPopover.value; showDeleteModalWarning.value = true; }, critical: true, icon: BinIcon, }, ] : []), ]; const showViewMenuPopover = (index: number) => { activeViewMenuPopover.value = index; }; const hideViewMenuPopover = () => { activeViewMenuPopover.value = null; setActiveEditViewPopover(); }; const setActiveEditViewPopover = (index?: number) => { if (index === activeEditViewPopover.value) { activeEditViewPopover.value = null; } else { activeEditViewPopover.value = index ?? null; } }; const handleCreateViewItem = (value: BentoHeaderWithViewsItem) => { const updatedViewObj = updateView(value); emit('add:view', updatedViewObj); hideCreateViewPopover(); // switch to new view on add handleViewSelect(updatedViewObj.newViews.findIndex(view => updatedViewObj.targetViewLabel === view.label)); addToast({ text: t('createViewToast', { label: updatedViewObj.targetViewLabel }), }); }; const handleUpdateViewItem = (value: BentoHeaderWithViewsItem) => { emit('update:view', updateView(value, activeEditViewPopover.value)); hideEditViewPopover(); }; const handleKeydownEnterViewItem = (value: BentoHeaderWithViewsItem) => { validateLabel(value.label, activeViewMenuPopover.value); if (Object.values(errors).some(error => error.length > 0)) { return; } if (activeEditViewPopover.value) { handleUpdateViewItem(value); return; } handleCreateViewItem(value); }; const handleViewSelect = (index: number) => { // If there's no currently active view, or if there are no unsaved changes, // just switch to the new view. if (currentActiveView.value === null || !props.hasChanges || props.skipUnsavedChangesText === null) { // If switching from an existing view, emit restore event. if (currentActiveView.value !== null) { emit('restore:view', computedViews.value[currentActiveView.value].label); } currentActiveView.value = index; return; } nextActiveView.value = index; showUnsavedModalWarning.value = true; }; const handleReorder = (reorderedViews: Array<BentoHeaderWithViewsItem>) => { const currentActiveLabel = currentActiveView.value !== null ? computedViews.value[currentActiveView.value]?.label : null; const result = setViews(reorderedViews); if (currentActiveLabel) { const newIndex = result.newViews.findIndex(view => view.label === currentActiveLabel); if (newIndex !== -1) { currentActiveView.value = newIndex; } } emit('reorder:view', result); }; const handleClickModal = (event: MouseEvent) => { if ((event.target as HTMLElement).closest('button')) { return; } event.stopPropagation(); event.preventDefault(); }; const handleTabEditViewPopover = () => { // skip built-in refocus on the menu button when menu is closed // enables tab to flow as intended by HTML spec editViewMenuRefs.value[0].closeMenu(false); }; const handleSaveChanges = () => { const label = computedViews.value[currentActiveView.value].label; emit('save:view', label); if (showUnsavedModalWarning.value) { emit('update:skip-unsaved-changes', skipUnsavedChangesReminder.value); // fired when user saves the view while navigating to a different tab currentActiveView.value = nextActiveView.value; nextActiveView.value = null; showUnsavedModalWarning.value = false; } else { // fired when user saves the view via the menu hideViewMenuPopover(); } addToast({ text: t('saveChangesToast', { label }), action: { handler: () => emit('restore:view', label), text: t('undo'), }, }); }; const handleRestoreChanges = () => { emit('restore:view', computedViews.value[currentActiveView.value].label); if (showUnsavedModalWarning.value) { emit('update:skip-unsaved-changes', skipUnsavedChangesReminder.value); // fired when user restore the view while navigating to a different tab currentActiveView.value = nextActiveView.value; nextActiveView.value = null; showUnsavedModalWarning.value = false; } else { // fired when user restore the view via the menu hideViewMenuPopover(); } }; const isViewActive = (index: number) => currentActiveView.value === index; const isViewUnsaved = (index: number) => isViewActive(index) && props.hasChanges; </script> <script lang="ts"> /** * Header with views allow users to save and quickly retrieve configurations tailored to specific tasks. * For example, managing daily transactions, auditing, or analyzing specific data sets. * It also allows the user to define the columns, filters, and search queries they need. * * @example * import { BentoHeaderWithViews } from '@adyen/bento-vue2'; * * export default { * components: { BentoHeaderWithViews }, * template: ` * <bento-header-with-views * :actions="[ * { title: 'Primary action', event: () => undefined }, * { title: 'Secondary action', event: () => undefined }, * { title: 'Tertiary action', event: () => undefined }, * { title: 'Another action', event: () => undefined } * ]" * description="Page Description" * title="Page Title" * :views="[ * { icon: 'stack', iconColor: 'blue', label: 'A very long value' }, * { icon: 'stack', iconColor: 'primary', label: 'Title 1' }, * { icon: 'stack', iconColor: 'primary', label: 'Title 2' } * ]" * :additionalViewSetting="{ * label: 'Include date filter (relative)', * value: false * }" * hasChanges * /> * ` * }; */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./header-with-views.scss" /> 

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

@@ -0,0 +1,34 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as ImageStories from './image.stories';
+
+<Meta of={ImageStories} />
+
+# Image
+
+`BentoImage` is used for resizing images to certain aspect ratios and fit strategies.
+
+<Canvas of={ImageStories.Default} />
+
+## Use Cases
+
+-   Use when you need to have an image resized to a cetain aspect ratio.
+
+### Do not use
+
+-   When just diplaying an image. It will not provide any extra benefit over the HTML `<img>` tag
+
+## Setting proportions
+
+The `BentoImage` provides presets for setting an aspect ratio for the image like `landscape`, `portait` or `square`.
+Additionally there is more granular control using numbers, ranging from `4:3` to `16:9` to `1:1`.
+
+When setting an `aspect-ratio` it is important to define a streategy for how the image will fit in the container with
+the new ratio, for which you can specify an `object-fit` property of `cover`, `fill` or `contain`.
+
+Since these are wrappers around css properties, you can find more info on
+[aspect-ratio](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) and
+[object-fit](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit) online.
+
+## Accessibility
+
+The image will receive the `alt` attribute as its as its textual replacement.

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

@@ -0,0 +1 @@
+import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { StoryObj } from '@storybook/vue'; import BentoImage from './image.vue'; import { mockImage } from './const'; import { BentoImageAspectRatio, BentoImageObjectFit } from './image.types'; import { isVue2 } from 'vue-demi'; export default { title: 'Image', component: BentoImage, argTypes: { aspectRatio: { options: Object.values(BentoImageAspectRatio), mapping: BentoImageAspectRatio, control: { type: 'select', }, }, objectFit: { options: Object.values(BentoImageObjectFit), mapping: BentoImageObjectFit, control: { type: 'select', }, }, }, }; type Story = StoryObj<typeof BentoImage>; const DEFAULT_IMAGE_PROPS = { src: mockImage, alt: 'Mock image', aspectRatio: 'landscape', objectFit: 'cover', }; const DefaultTemplate: Story = { render: (_args, { argTypes }) => ({ components: { BentoImage }, props: Object.keys(argTypes), template: ` <bento-image v-bind="args" style="width:200px" /> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), }; const defaultCode = ` <bento-image src="${DEFAULT_IMAGE_PROPS.src}" alt="${DEFAULT_IMAGE_PROPS.alt}" aspect-ratio="${DEFAULT_IMAGE_PROPS.aspectRatio}" object-fit="${DEFAULT_IMAGE_PROPS.objectFit}" /> `; export const Default = { ...DefaultTemplate, args: { ...DEFAULT_IMAGE_PROPS, }, parameters: storybookDocsParameter(defaultCode), }; Default.argTypes = { icon: { table: { disable: true } } }; 

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

@@ -0,0 +1 @@
+<template> <img :src="src" :alt="alt" :style="imageStyles" /> </template> <script lang="ts" setup> import { computed } from 'vue'; import { BentoImageAspectRatio, type BentoImageProps } from './image.types'; const props = withDefaults(defineProps<BentoImageProps>(), { aspectRatio: null, objectFit: null, }); const convertAspectRatio = (aspectRatio: BentoImageAspectRatio | `${BentoImageAspectRatio}`) => { let parsedAspectRatio: BentoImageAspectRatio | `${BentoImageAspectRatio}` = BentoImageAspectRatio.P16_9; switch (aspectRatio) { case BentoImageAspectRatio.LANDSCAPE: parsedAspectRatio = BentoImageAspectRatio.P16_9; break; case BentoImageAspectRatio.PORTRAIT: parsedAspectRatio = BentoImageAspectRatio.P3_4; break; case BentoImageAspectRatio.SQUARE: parsedAspectRatio = BentoImageAspectRatio.P1_1; break; default: parsedAspectRatio = aspectRatio; break; } return `${parsedAspectRatio}`.replace(':', '/'); }; const imageStyles = computed(() => ({ aspectRatio: convertAspectRatio(props.aspectRatio), objectFit: props.objectFit, })); </script> <script lang="ts"> /** * Image component used for resizing images to certain aspect ratios and fit strategies. * * @example * import { BentoImage } from '@adyen/bento-vue2'; * * export default { * components: { BentoImage }, * template: ` * <bento-image * :src="imageSrc" * alt="alternative text" * aspect-ratio="landscape" * object-fit="cover" * * /> * ` * } */ export default { name: 'bento-image', }; </script> 

package/dist/assets/components/info-icon/info-icon.docs.mdx

@@ -0,0 +1,57 @@
+import { Canvas, Meta, Story } from '@storybook/blocks';
+import * as InfoIconStories from './info-icon.stories';
+
+<Meta of={InfoIconStories} />
+
+# Info Icon
+
+<Canvas withSource="closed">
+    <Story of={InfoIconStories.Default} />
+</Canvas>
+
+A BentoInfoIcon that renders an informational icon with a tooltip text.
+
+When a user hovers over the icon, the tooltip text displays, providing further information about the UI element or
+feature.
+
+## Use Cases
+
+- Show additional information for any component or element on the page
+
+## Modifiers
+
+### Tooltip Position
+
+This property positions the tooltip relative to the trigger element. It's of type `PopperContainerPosition` and it
+should take, one of the following values:
+
+- `auto`: default value, positions the tooltip wherever there is space available
+- `top`: displays the tooltip to the top of the trigger element.
+- `right`: displays the tooltip to the right of the trigger element.
+- `bottom`: displays the tooltip to the bottom of the trigger element.
+- `left`: displays the tooltip to the left of the trigger element.
+
+Note that the tooltip will only be displayed in the correct position if there is space available.
+
+## Accessibility
+
+### Keyboard interaction
+
+The `bento-info-icon` is reachable through keyboard navigation in the logical navigation flow of the page. The following
+keys trigger the following actions:
+
+| Keyboard interaction | Action                                                               |
+| -------------------- | -------------------------------------------------------------------- |
+| `Tab`                | Moves focus to the button or away from it, showing or hiding tooltip |
+
+### Aria attributes
+
+Adhering to the [WAI-ARIA 1.2 standard](https://www.w3.org/TR/wai-aria-1.2/) we apply the following:
+
+| ARIA attribute | is automatic?                              | fallback used | manual override |
+| -------------- | ------------------------------------------ | ------------- | --------------- |
+| `label`        | Yes, based on `tooltipText` property value | -             | -               |
+
+## Resources
+
+- [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/branch/xxUamzpDM5NlukATVD9JFT/Bento---Components?node-id=4550%3A101263&mode=dev)

package/dist/assets/components/info-icon/info-icon.stories.ts

@@ -0,0 +1 @@
+import BentoInfoIcon from './info-icon.vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; import { PopperContainerPosition } from '@/components/popper-container'; export default { title: 'Info Icon', component: BentoInfoIcon, argTypes: { tooltipPosition: { options: Object.values(PopperContainerPosition), mapping: PopperContainerPosition, defaultValue: PopperContainerPosition.AUTO, control: { type: 'select', }, }, }, } as Meta; type Story = StoryObj<typeof BentoInfoIcon>; const DEFAULT_INFO_ICON_PROPS = { tooltipText: 'Default Icon Tooltip Text', }; const defaultCode = ` <template> <bento-info-icon tooltip-text="${DEFAULT_INFO_ICON_PROPS.tooltipText}" /> </template> <script setup lang="ts"> import { BentoInfoIcon } from '@adyen/bento-vue2'; </scrip> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoInfoIcon }, props: Object.keys(argTypes), template: ` <bento-info-icon v-bind="args"/> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { ...DEFAULT_INFO_ICON_PROPS }, parameters: storybookDocsParameter(defaultCode), }; 

package/dist/assets/components/info-icon/info-icon.vue

@@ -0,0 +1 @@
+<template> <span v-bento-tooltip-directive:[tooltipPosition]="tooltipText" :aria-label="tooltipText" class="b-info-icon" @mouseenter="emit('mouseenter', $event)" > <info-icon :svg-title="tooltipText" class="b-info-icon__svg" /> </span> </template> <script setup lang="ts"> import { PopperContainerPosition } from '@/components/popper-container'; import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives'; import { type BentoInfoIconProps } from './info-icon.types'; import InfoIcon from '@adyen/ui-assets-icons-16/vue/info'; withDefaults(defineProps<BentoInfoIconProps>(), { tooltipPosition: PopperContainerPosition.AUTO, }); const emit = defineEmits<{ /** * Emitted when the mouse pointer enters the component. */ (e: 'mouseenter', event: MouseEvent): void; }>(); </script> <script lang="ts"> /** * @example * <template> * <bento-info-icon tooltip-text="Text on hover" /> * </template> * * <script setup lang="ts"> * import { BentoInfoIcon } from '@adyen/bento-vue2'; * </scrip> */ export default { name: 'bento-info-icon', }; </script> <style lang="scss" scoped src="./info-icon.scss" />