@adyen/bento-mcp 0.0.0 → 0.1.0

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

@@ -0,0 +1,137 @@
+import { Canvas, Meta, Story } from '@storybook/blocks';
+import * as ButtonStories from './button.stories';
+
+<Meta title="Docs" of={ButtonStories} />
+
+# Button
+
+<Canvas withSource="closed">
+    <Story of={ButtonStories.Default} />
+</Canvas>
+
+A button communicates possible actions. Use a button to trigger actions and are ideal for calling attention to where a
+user needs to do something in order to move forward in a flow.
+
+## Use Cases
+
+Here are some examples:
+
+- Submitting or moving onto the next step in a form wizard.
+- Adding a new item to a data set.
+
+### Do not use
+
+Here are some "don't dos":
+
+- Add custom HTML inside the button's `default` slot e.g. `<bento-button><strong>click me</hello></bento-button>`.
+- Putting any elements other than icon components (from the `@adyen/ui-assets` package) in the `iconLeft` or `iconRight`
+  slots .
+
+## Variations
+
+### Primary
+
+Primary button is used to highlight the main action on the page. A page can contain several types of buttons, but the
+primary button focuses on indicating the main action of the entire page. The primary can only be used once in the page
+and can’t be combined another primary button.
+
+### Secondary
+
+Secondary button should be used when the action is less important than the main action.. It’s also used when the user
+has multiple options and all of them have the same importancy.
+
+The secondary button should only be used when a primary button is present.
+
+### Tertiary button
+
+Tertiary button should be used for secondary action. It can be use when the action is recurring on the page or when is
+linked to a group of elements like tables, card list, etc. The main difference between a Tertiary and a secondary button
+is the visual aspect of it. In case the visual is too heavy with the use of more than one secondary button, a tertiary
+button should be applied.
+
+### Tertiary button with background
+
+In situations where tertiary button is combined with toggle button, we recommend to use tertiary button with background,
+which has the same padding and states as the toggle button.
+
+## Modifiers
+
+### Critical buttons
+
+Critical buttons have same variations as the regular default buttons except that represent a critical action.
+
+| Variation | Usage                                                                                                                                                                       |
+| --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| Primary   | when the primary action is a critical action the red variation can be applied. This scenario will only happen in case the button is a confirmation of a critical action.    |
+| Secondary | in case the critical action is a secondary action, the secondary red can be applied. Eg. when deleting an item is a possibility for the user, but it’s not the main action. |
+| Tertiary  | in case there many critical actions present or the call to action for this button is minimal.                                                                               |
+
+### Button with icon
+
+<Canvas withSource="closed">
+    <Story of={ButtonStories.WithIcon} />
+</Canvas>
+
+Please use the @adyen/ui-assets-icons-16 NPM package for all icons.
+
+All the buttons variation can be used combined with an icon. The combination of text and icon together should be use if
+the icon adds value to the user interaction.
+
+Icons can be used as standing alone button in case the icon is clear enough for the users that doesn’t need a support
+text. In most of the cases, the icon button should receive a tooltip or aria label, otherwise it won’t be accessible.
+
+When the icon is used in combination with text, the icon can be placed in either side of the text using the `iconLeft`
+and `iconRight` slot.
+
+### Condensed button
+
+All the buttons variation can be used as a condensed button. They should be use in case you need an action on a table or
+in case there is lack of space or too many information at the same place.
+
+All the condensed button variations can be used combined with a icon respecting the same rules of the default button.
+
+### Link button
+
+<Canvas withSource="closed">
+    <Story of={ButtonStories.Link} />
+</Canvas>
+
+The button component can also be rendered as a link (i.e. using an anchor DOM element instead of a button DOM element).
+To do this set the `link` property which will be forwarded onto the internal `BentoLink` component. To find out which
+properties you can set see the [BentoLink story](?path=/docs/components-link--docs)).
+
+## Inverse color set
+
+All the button variants and modifiers can also be used with color set inverse. This is to be used when the button is
+being applied on top of an element using `background.inverse.primary` instead of `background.primary`.
+
+It will turn any button into its inverse color. For example, a button using `background.primary` as its
+background-color, will now be set to `background.inverse.primary`.
+
+## Accessibility
+
+### Keyboard Interaction
+
+Being an interactive element, the button 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.        |
+| `Space`              | Activates the button, triggering the click event. |
+| `Enter`              | Activates the button, triggering the click event. |
+
+### Roles, States, and Properties
+
+Adhering to the Adhering to the [WAI-ARIA 1.2 standard](https://www.w3.org/TR/wai-aria-1.2/) we follow the
+[button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/#wai-ariaroles,states,andproperties) documentation
+provided. we follow the button pattern documentation provided.
+
+| ARIA attribute | is automatic?                       | fallback used                                                                                                                     | manual override |
+| -------------- | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------- | --------------- |
+| label          | Yes, default slot text              | If no slot text present e.g. icon only, then meaningful title must be provided in the `svg-title` property of the icon component. | -               |
+| role           | Yes, semantic `button` element used | -                                                                                                                                 | -               |
+
+## Resources
+
+- [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/ADL-2.0---Components?node-id=1-9&t=otNdkreSYuLIZgud-0)

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

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import { BentoButtonVariant } from '@/components/button/button.types'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import CheckMark from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill'; import BentoButton from './button.vue'; const meta: Meta = { title: 'Button', component: BentoButton, argTypes: { variant: { options: Object.values(BentoButtonVariant), mapping: BentoButtonVariant, control: { type: 'select', }, }, default: { name: 'default', defaultValue: '', description: 'Button text', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text', }, }, iconLeft: { name: 'iconLeft', defaultValue: '', description: 'Icon component', table: { type: { summary: 'VNode[]' }, }, control: { disable: true, }, }, iconRight: { name: 'iconRight', defaultValue: '', description: 'Icon component', table: { type: { summary: 'VNode[]' }, }, control: { disable: true, }, }, type: { options: ['button', 'submit', 'reset'], control: { type: 'select', }, }, // Events blur: { table: { type: { summary: '() => void' }, }, control: { disable: true }, }, click: { table: { type: { summary: '(event: MouseEvent) => void' }, }, control: { disable: true }, }, focus: { table: { type: { summary: '() => void' }, }, control: { disable: true }, }, 'keydown.esc': { table: { type: { summary: '() => void' }, }, control: { disable: true }, }, }, }; export default meta; type Story = StoryObj<typeof BentoButton>; const BUTTON_TEXT_DEFAULT = { default: 'Button', }; const DEFAULT_BUTTON_PROPS = { disabled: false, variant: 'primary', ...BUTTON_TEXT_DEFAULT, }; const defaultCode = ` <bento-button @click="clickedButtonAction"> ${BUTTON_TEXT_DEFAULT.default} </bento-button> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton }, props: Object.keys(argTypes), template: ` <bento-button v-bind="args" @click="clickedButtonAction" > {{args.default}} </bento-button> `, setup(props) { return { clickedButtonAction: action('onClick'), args: isVue2 ? props : _args, }; }, }), args: DEFAULT_BUTTON_PROPS, parameters: storybookDocsParameter(defaultCode), }; const ButtonWithIconTemplate = { render: (_args, { argTypes }) => ({ components: { BentoButton, CheckMark }, props: Object.keys(argTypes), template: ` <bento-button v-bind="args" @click="clickedButtonAction" > <template #iconLeft> <check-mark svg-title="checked" /> </template> {{args.default}} <template #iconRight> <check-mark svg-title="checked" /> </template> </bento-button> `, setup(props) { return { clickedButtonAction: action('onClick'), args: isVue2 ? props : _args, }; }, }), }; const WithIconCode = ` <bento-button @click="clickedButtonAction" > <template #iconLeft> <check-mark svg-title="checked" /> </template> ${BUTTON_TEXT_DEFAULT.default} <template #iconRight> <check-mark svg-title="checked" /> </template> </bento-button> `; export const WithIcon = { ...ButtonWithIconTemplate, args: DEFAULT_BUTTON_PROPS, parameters: storybookDocsParameter(WithIconCode), }; const OnlyIconTemplate = { render: (_args, { argTypes }) => ({ components: { BentoButton, CheckMark }, props: Object.keys(argTypes), template: ` <bento-button v-bind="args" @click="clickedButtonAction" > <template #iconLeft> <check-mark svg-title="check item" /> </template> </bento-button> `, setup(props) { return { clickedButtonAction: action('onClick'), args: isVue2 ? props : _args, }; }, }), }; export const OnlyIcon = { ...OnlyIconTemplate, argTypes: { default: { table: { disable: true } }, }, }; const LinkCode = ` <bento-button :link="{ to: 'https://adyen.com', external: true }"> {{${BUTTON_TEXT_DEFAULT.default}}} </bento-button> `; export const Link: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton }, props: Object.keys(argTypes), template: ` <bento-button v-bind="args" @click="clickedButtonAction" > {{args.default}} </bento-button> `, setup(props) { return { clickedButtonAction: action('onClick'), args: isVue2 ? props : _args, }; }, }), args: { ...DEFAULT_BUTTON_PROPS, link: { to: '/' } }, parameters: storybookDocsParameter(LinkCode), }; 

package/dist/assets/components/button/button.vue

@@ -0,0 +1 @@
+<template> <component :is="componentType" v-bind="componentProps" class="b-button" :class="{ ...conditionalClasses, ...getIconOnlyClass() }" @click.capture="onClickButton" > <span v-if="hasSlot('iconLeft')" class="b-button__icon-left" data-testid="icon-button-left" :aria-hidden="hasSlot('default') ? 'true' : null" > <slot name="iconLeft" /> </span> <bento-typography v-if="hasSlot('default')" el="span" variant="body" stronger class="b-button__label"> <slot /> </bento-typography> <span v-if="hasSlot('iconRight')" class="b-button__icon-right" data-testid="icon-button-right" :aria-hidden="hasSlot('default') ? 'true' : null" > <slot name="iconRight" /> </span> </component> </template> <script setup lang="ts"> import { computed, type PropType, useAttrs, useSlots } from 'vue'; import { BentoButtonPropClass, BentoButtonVariant } from './button.types'; import { BentoTypography } from '@/components/typography'; import { useHasSlot } from '@/composables/use-has-slot/use-has-slot'; import { type Booleanish } from '../../types/prop-types'; import type { RouterLinkProps } from 'vue-router/types/router.d.ts'; import type { AnchorHTMLAttributes, ButtonHTMLAttributes } from 'vue/types/jsx.d.ts'; import { BentoLink, BentoLinkVariant } from '@/components/link'; // TODO: replace all this code when migrated to Vue 3 is complete as this is the only // current way to extend the `router-link` component in Vue 2 and Vue Router 3 export interface LinkProps extends RouterLinkProps, AnchorHTMLAttributes { args?: { props: RouterLinkProps }; /** * Set the rendered link to a regular external anchor link. */ external: boolean; } const props = defineProps({ /** * Reduces sizing of button */ condensed: { type: Boolean, default: false }, /** * Displays button as critical */ critical: { type: Boolean, default: false }, /** * Disables button functionality */ disabled: { type: Boolean, default: false }, /** * Sets color set to inverse */ inverse: { type: Boolean, default: false }, /** * Object containing props passed on to the BentoLink component. @see BentoLink documentation for which properties you can pass. */ link: { type: Object, default: undefined }, /** * The default behavior of the button. * Possible values are: 'button', 'reset', 'submit' */ type: { type: String as PropType<ButtonHTMLAttributes['type']>, default: 'button', }, /** * Types of flavour of Button * @values primary, secondary, tertiary, tertiary-with-background */ variant: { type: String as PropType<BentoButtonVariant | `${BentoButtonVariant}`>, default: BentoButtonVariant.PRIMARY, validator: (value: BentoButtonVariant) => Object.values(BentoButtonVariant).includes(value), }, }); const emit = defineEmits<{ /** * Emitted when the element has lost focus */ (e: 'blur'); /** * Emitted when the button is clicked */ (e: 'click', event: MouseEvent); /** * Emitted when the element has received focus */ (e: 'focus'); /** * Emitted when the "ESC" key is pressed */ (e: 'keydown.esc'); }>(); const attrs = useAttrs(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const componentType = computed(() => { if (props?.link !== undefined) { /** * Display a "span" with role "link" and "aria-disabled=true" * if the link is disabled. * @link https://www.scottohara.me/blog/2021/05/28/disabled-links.html */ return props.disabled ? 'span' : BentoLink; } return 'button'; }); const ariaAttributes = computed(() => ({ 'aria-controls': attrs['aria-controls']?.toString() as string, 'aria-expanded': attrs['aria-expanded']?.toString() as Booleanish, })); const componentProps = computed(() => componentType.value === 'button' ? { ...ariaAttributes.value, disabled: props.disabled, type: props.type, } : { ...props.link, disableTypography: true, variant: BentoLinkVariant.DEFAULT, isButton: true, /** * When the button is a disabled link, it's rendered as a `<span>`. * These attributes ensure it's still announced as a disabled link by screen readers. */ 'aria-disabled': props.disabled ? 'true' : undefined, role: props.disabled ? 'link' : undefined, } ); const variantClass = computed(() => ({ [`b-button--${props.variant}${props.critical ? `-${BentoButtonPropClass.DESTRUCTIVE}` : ''}`]: true, })); const conditionalClasses = computed(() => ({ ...variantClass.value, [`b-button--${BentoButtonPropClass.CONDENSED}`]: props.condensed, [`b-button--${BentoButtonPropClass.DISABLED}`]: props.disabled, [`b-button--${BentoButtonPropClass.INVERSE}`]: props.inverse, })); const getIconOnlyClass = () => ({ [`b-button--${BentoButtonPropClass.ICON_ONLY}`]: !hasSlot('default'), }); const onClickButton = (e: MouseEvent) => { if (!props.disabled) { emit('click', e); } else { e.preventDefault(); e.stopPropagation(); } }; </script> <script lang="ts"> /** * Button component for all the various types of bento buttons. * * @example * import { BentoButton } from '@adyen/bento-vue2'; * import { CheckMarkIcon } from '@adyen/ui-assets-icons-16'; * * export default { * components: { BentoButton }, * template: ` * <bento-button * disabled * variant="secondary" * > * <template #iconLeft> * <check-mark svg-title="checked" /> * </template> * * Button text * * <template #iconRight> * <check-mark svg-title="checked" /> * </template> * </bento-button> * `, * } */ export default { name: 'bento-button', }; </script> <style lang="scss" scoped src="./button.scss" /> 

package/dist/assets/components/button/components/ai-button/ai-button.docs.mdx

@@ -0,0 +1,40 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as AiButtonStories from './ai-button.stories';
+
+<Meta of={AiButtonStories} />
+
+# AI Button
+
+The `bento-ai-button` is a specific variant of the `bento-button` used for actions related to Artificial Intelligence.
+It includes a dedicated AI icon, animation and is styled as a secondary button to ensure consistency across different
+features.
+
+<Canvas of={AiButtonStories.Default} />
+
+## Use Cases
+
+Use this component whenever a user needs to trigger an action powered by AI, such as:
+
+- Generating content.
+- Summarizing text.
+- Triggering an AI-based analysis.
+
+## Props
+
+The AI Button accepts a subset of the standard `bento-button` props. The `variant` is fixed to `secondary` and cannot be
+changed. There is also no `critical` state available as AI should not be making critical actions.
+
+## Accessibility
+
+On top of already using the correct semantic elements for the buttons, the `bento-ai-button` follows all accessibility
+guidelines of a standard button.
+
+### Keyboard interaction
+
+The button is reachable through keyboard navigation and follows the logical navigation flow of the page. A detailed list
+of keyboard interactions is provided in the table below.
+
+| Keyboard interaction | Output                                                |
+| -------------------- | ----------------------------------------------------- |
+| `Tab`                | Moves focus to the button or away from it.            |
+| `Space` or `Enter`   | Activates the button where the focus is currently on. |

package/dist/assets/components/button/components/ai-button/ai-button.stories.ts

@@ -0,0 +1 @@
+import BentoAiButton from './ai-button.vue'; import BentoAiButtonDefault from './__tests__/ai-button-default.vue?raw'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { action } from '@storybook/addon-actions'; import { isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; export default { title: 'Button/AI Button', component: BentoAiButton, argTypes: { condensed: { control: { type: 'boolean', }, table: { type: { summary: 'boolean' }, }, }, default: { name: 'default', defaultValue: '', description: 'Button text', table: { type: { summary: 'VNode[]' }, }, control: { disable: true }, }, disabled: { control: { type: 'boolean', }, table: { type: { summary: 'boolean' }, }, }, inverse: { control: { type: 'boolean', }, table: { type: { summary: 'boolean' }, }, }, }, } as Meta; type Story = StoryObj<typeof BentoAiButton>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoAiButton }, props: Object.keys(argTypes), template: ` <bento-ai-button @click="onClick" v-bind="args"> Generate with AI </bento-ai-button> `, setup(props) { return { args: isVue2 ? props : _args, onClick: action('click'), }; }, }), parameters: storybookDocsParameter(BentoAiButtonDefault), }; 

package/dist/assets/components/button/components/ai-button/ai-button.vue

@@ -0,0 +1 @@
+<template> <div class="b-ai-button" :class="conditionalClass"> <div class="b-ai-button__animation" /> <bento-button class="b-ai-button__button" :condensed="condensed" :disabled="disabled" :inverse="inverse" variant="secondary" @click.capture.stop="onClick" > <template #iconLeft> <ai-filled-icon aria-hidden="true" class="b-ai-button__icon" /> </template> <slot></slot> </bento-button> </div> </template> <script setup lang="ts"> import { computed, onMounted, useSlots } from 'vue'; import BentoButton from '../../button.vue'; import AiFilledIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled'; import { useHasSlot } from '@/composables/use-has-slot/use-has-slot'; import { printDevelopmentWarning } from '@/utils/ts/print-development-warning'; import { type BentoAiButtonProps } from './ai-button.types'; const props = withDefaults(defineProps<BentoAiButtonProps>(), { link: undefined, type: 'button', condensed: false, disabled: false, inverse: false, }); const emit = defineEmits<{ /** * Click event handler */ (e: 'click', event: MouseEvent): void; }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const conditionalClass = computed(() => ({ 'b-ai-button--disabled': props.disabled, })); const onClick = (e: MouseEvent) => { // Prevent Vue3 from triggering event twice e.stopPropagation(); emit('click', e); }; onMounted(() => { if (!hasSlot('default')) { printDevelopmentWarning('An icon-only button cannot be a AI button'); } }); </script> <script lang="ts"> /** * AI Button component is used for cases where pressing a button starts an AI-related action. * * @example * import { BentoAiButton } from '@adyen/bento-vue2'; * * export default { * components: { BentoAiButton }, * template: ` * <bento-ai-button @click="onClick">Generate with AI</bento-ai-button> * ` * } */ export default { name: 'bento-ai-button', }; </script> <style lang="scss" scoped src="./ai-button.scss" /> 

package/dist/assets/components/button/components/button-actions/button-actions.docs.mdx

@@ -0,0 +1,169 @@
+import { Canvas, Meta, Source } from '@storybook/blocks';
+import * as ButtonActionsStories from './button-actions.stories';
+
+<Meta of={ButtonActionsStories} />
+
+# Button Actions
+
+<Canvas of={ButtonActionsStories.Default} />
+
+The `bento-button-actions` component manages a set of actions a user can choose from by displaying a group of
+`bento-buttons`.
+
+## Use Cases
+
+Use this component if:
+
+- You have one or more actions that a user needs to perform.
+- You have one primary action in the list of possible actions (in most cases, this would be a `create new` type of
+  action).
+- You have a number of actions that ranges from 2 to 4.
+
+### Do not use
+
+Don't use the `bento-button-actions` if:
+
+- You have more than one primary action.
+- You have more than 3 or 4 actions in the group. In this case, consider if this is the right pattern and speak to you
+  product designer about it.
+
+## Variations
+
+### Actions
+
+It's the set of actions that will be displayed in the group in the form of `bento-button`s. This set is an array of
+`BentoButtonActionObject` objects, which means every element of the array will require the following fields to be
+configured:
+
+<Source
+    dark
+    language="typescript"
+    code={`
+    interface BentoButtonActionObject {
+    
+    // Shared properties
+    title: string;
+    condensed?: boolean;
+    critical?: boolean;
+    disabled?: boolean;
+    elementRef?: Exclude<VNodeRef, string>;
+    icon?: VueComponent;
+    iconLeft?: VueComponent;
+    iconRight?: VueComponent;
+    inverse?: boolean;
+    link?: object;
+    type?: string;
+    variant?: BentoButtonVariant | \`\$\{BentoButtonVariant\}\`;
+
+    // Button properties
+    event?: (event: Event) => void;
+    iconOnly?: boolean;
+    state?: BentoLoadingButtonState | \`\$\{BentoLoadingButtonState\}\`;
+
+    // Menu properties (providing 'data' will render a menu instead of a button)
+    closeMenuOnItemSelect?: boolean;
+    closeOnClickOutsideOptions?: object;
+    data?: BentoMenuItem[];
+    disableArrowDownOpeningMenu?: boolean;
+    menuFixedPositioning?: boolean;
+    menuPosition?: BentoPopoverPositions | \`\$\{BentoPopoverPositions\}\`;
+    menuWidth?: number;
+    revertFocusToButton?: boolean;
+    teleport?: boolean;
+
+}`}/>
+
+- `title`: the button's text.
+- `condensed` (optional): condensed button.
+- `critical` (optional): the button's red border and color.
+- `disabled` (optional): the button renders as disabled.
+- `elementRef` (optional): provides a template ref to the underlying component instance
+- `event` (optional): the button's event handler).
+- `icon` (optional): the button's icon.
+- `iconLeft` (optional): the button's left icon.
+- `iconRight` (optional): the button's right icon.
+- `iconOnly` (optional): renders the button as iconOnly.
+- `inverse` (optional): the button's color to inverse.
+- `link` (optional): the button's [link](../?path=/docs/components-link--docs#variations) properties.
+- `state` (optional): the button's [loading state](../?path=/docs/components-button-loading-button--docs#state).
+- `type` (optional): HTML
+  [button element type](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/type).
+- `variant` (optional): the button's variant background color.
+- See [menu](../?path=/story/components-menu--default) for the menu properties
+
+#### Styling Guidelines
+
+As a developer, you should rely on these patterns of `bento-button-actions` styling:
+
+- 1-st button PRIMARY, all others - SECONDARY: is applicable in the majority of cases
+- 1-st button CRITICAL, all others - SECONDARY: a destructive pattern that is applicable in user's more urgent attention
+
+Keep in mind that `bento-button-actions` is a component that is reused in multiple other components in different
+configurations (meaning some of it options can be restricted for use in some components).
+
+The final available configuration is always dictated by the component in which action-buttons is used.
+
+Please, NEVER use action-buttons configurations that are not available on the component in which action-buttons is used.
+If you have a strong need > please reach Bento team first to get a guidance from designer.
+
+### Critical
+
+<Canvas of={ButtonActionsStories.Critical} />
+
+### With Link
+
+<Canvas of={ButtonActionsStories.WithLink} />
+
+### With loading button
+
+<Canvas of={ButtonActionsStories.WithLoadingButton} />
+
+### With menu button
+
+The `actions` prop also accepts arguments from the `bento-menu` component. This allows you to render a menu component
+instead of a button for a given action. Check the example below for more details.
+
+<Canvas of={ButtonActionsStories.WithMenu} />
+
+## Modifiers
+
+### Layout
+
+It's the spatial disposition of the button group. This property can take the following values:
+
+- `'buttons-end'`: aligns the buttons to the right side of the container.
+- `'fill-container'`: stretches the buttons to fill the container's space.
+- `'space-between'`: spaces the buttons evenly to fill in the container's width without stretching them.
+- `'vertical-stack'`: stack the buttons vertically one on top of the other.
+
+## Inverse color set
+
+Button actions can also be used with color set inverse. This is to be used when the buttons are being applied on top of
+an element using `background.inverse.primary` instead of `background.primary`.
+
+It will turn **ALL** buttons in the group to its inverse color.
+
+## Accessibility
+
+On top of already using the correct semantic elements for the buttons, the `bento-button-actions` component used the
+ARIA `group` role to form a logical collection between items with related functionality.
+
+### Keyboard interaction
+
+The button actions component is reachable through keyboard navigation and follows logical navigation flow of the page. A
+detailed list of keyboard interactions is provided in the table below.
+
+| Keyboard interaction | Output                                                          |
+| -------------------- | --------------------------------------------------------------- |
+| `Tab`                | Moves focus to the various buttons in the list or away from it. |
+| `Space`              | Activates the button where the focus is currently on.           |
+
+### Roles, states and properties
+
+| ARIA attribute | is automatic?                                                                                     | fallback used | manual override |
+| -------------- | ------------------------------------------------------------------------------------------------- | ------------- | --------------- |
+| `role`         | Yes, corresponds to `group` value and indicates that the items are related and form a collection. | -             | -               |
+
+## Resources
+
+-[ARIA group role](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/group_role)

package/dist/assets/components/button/components/button-actions/button-actions.stories.ts

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import { BentoButtonActionsLayout } from '@/components/button'; import ButtonActionsWithMenu from './__tests__/button-actions-with-menu.vue?raw'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoButtonActions from './button-actions.vue'; import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning'; import type { BentoButtonActionsList } from './button-actions.types'; export default { title: 'Button/Button Actions', component: BentoButtonActions, argTypes: { layout: { options: Object.values(BentoButtonActionsLayout), mapping: BentoButtonActionsLayout, control: { type: 'select', }, }, }, } as Meta; type Story = StoryObj<typeof BentoButtonActions>; const defaultCode = ` <script setup lang="ts"> import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning'; </script> <template> <bento-button-actions :actions="[{ title: 'Primary', event: clickedAction, icon: MachineLearningIcon, }, { title: 'Secondary', event: clickedAction, }, { title: 'Tertiary', event: clickedAction, }]" /> </template> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoButtonActions, MachineLearningIcon }, props: Object.keys(argTypes), template: ` <bento-button-actions v-bind="args" :actions="[{ title: 'Primary', event: clickedAction, icon: icon, }, { title: 'Secondary', event: clickedAction, }, { title: 'Tertiary', event: clickedAction, }]" > </bento-button-actions> `, setup(props) { const icon = MachineLearningIcon; return { args: isVue2 ? props : _args, clickedAction: action('input'), icon, }; }, }), parameters: storybookDocsParameter(defaultCode), }; export const Critical = { render: (_args, { argTypes }) => ({ components: { BentoButtonActions, MachineLearningIcon }, props: Object.keys(argTypes), template: ` <bento-button-actions v-bind="args" :actions="[{ title: 'Primary', critical: true, event: clickedAction, icon: args.icon, }, { title: 'Secondary', event: clickedAction, }]" > </bento-button-actions> `, setup(props) { return { args: isVue2 ? props : _args, clickedAction: action('input'), }; }, }), }; const withLinkCode = ` <script setup lang="ts"> import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning'; </script> <template> <bento-button-actions :actions="[{ title: 'Primary', event: clickedAction, icon: MachineLearningIcon, }, { title: 'Secondary', event: clickedAction, link: { variant: 'default', external: true, to: 'https://www.adyen.com/' }, }, { title: 'Tertiary', event: clickedAction, }]" /> </template> `; export const WithLink: Story = { render: (_args, { argTypes }) => ({ components: { BentoButtonActions, MachineLearningIcon }, props: Object.keys(argTypes), template: ` <bento-button-actions v-bind="args" :actions="[{ title: 'Primary', event: clickedAction, icon: icon, }, { title: 'Secondary (a link)', event: clickedAction, link: { variant: 'default', external: true, to: 'https://www.adyen.com/' }, }, { title: 'Tertiary', event: clickedAction, }]" > </bento-button-actions> `, setup(props) { const icon = MachineLearningIcon; return { args: isVue2 ? props : _args, clickedAction: action('input'), icon, }; }, }), parameters: storybookDocsParameter(withLinkCode), }; const withLoadingButtonCode = ` <template> <bento-button-actions :actions="[ { title: 'Loading Button', event: loadingClickAction, state: 'loading', icon, }, { title: 'Secondary', event: secondaryClickAction, state: 'start', icon, }, ]" /> </template> `; export const WithLoadingButton: Story = { render: (_args, { argTypes }) => ({ components: { BentoButtonActions, MachineLearningIcon }, props: Object.keys(argTypes), template: ` <bento-button-actions v-bind="args" :actions="[ { title: 'Loading Button', event: clickedAction, state: 'loading', icon, }, { title: 'Secondary', event: clickedAction, state: 'start', icon, }, ]" /> `, setup(props) { const icon = MachineLearningIcon; return { args: isVue2 ? props : _args, clickedAction: action('input'), icon, }; }, }), parameters: storybookDocsParameter(withLoadingButtonCode), }; export const WithMenu: Story = { render: (_args, { argTypes }) => ({ components: { BentoButtonActions }, props: Object.keys(argTypes), template: ` <bento-button-actions v-bind="args" /> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { actions: [ { title: 'Primary', event: () => true, }, { title: 'Secondary', event: () => true, }, { title: 'Tertiary', event: () => true, disabled: true, }, { title: 'Menu', data: [ { text: 'Item 1', secondaryText: 'Text', handler: () => true, critical: true, }, { text: 'Item 2', secondaryText: 'Text', handler: () => true, }, ], }, ] satisfies BentoButtonActionsList, }, parameters: storybookDocsParameter(ButtonActionsWithMenu), }; 

package/dist/assets/components/button/components/button-actions/button-actions.vue

@@ -0,0 +1 @@
+<template> <div ref="buttonActions" class="b-button-actions"> <div class="b-button-actions__container-wrapper" :class="conditionalClasses" role="group"> <div v-for="(button, index) in reversedActionsList" :key="index" ref="buttons" class="b-button-actions__button-wrapper" > <template v-if="button.data"> <bento-menu :ref="button.elementRef" :data="button.data" :close-menu-on-item-select="button.closeMenuOnItemSelect" :close-on-click-outside-options="button.closeOnClickOutsideOptions" :disable-arrow-down-opening-menu="button.disableArrowDownOpeningMenu" :menu-position="button.menuPosition" :menu-fixed-positioning="button.menuFixedPositioning" :menu-width="button.menuWidth" :revert-focus-to-button="button.revertFocusToButton" :teleport="button.teleport" > <template v-if="button.icon || button.iconLeft" #iconLeft> <component :is="button.icon || button.iconLeft" :svg-title="button.title"></component> </template> <template v-if="!isIconOnly(button)" #default> {{ button.title }} </template> </bento-menu> </template> <template v-else> <bento-loading-button v-if="button.state" :ref="button.elementRef" :condensed="button.condensed" :critical="button.critical" :disabled="button.disabled" :inverse="inverse" :state="button.state" :variant="button.variant || generateButtonVariantByIndex(index)" v-on="generateButtonEvents(button)" > <template v-if="button.icon || button.iconLeft" #iconLeft> <component :is="button.icon || button.iconLeft" :svg-title="button.title"></component> </template> <template v-if="!isIconOnly(button)" #default> {{ button.title }} </template> </bento-loading-button> <bento-button v-else :ref="button.elementRef" :condensed="button.condensed" :critical="button.critical" :disabled="button.disabled" :inverse="inverse" :link="button.link" :variant="button.variant || generateButtonVariantByIndex(index)" v-on="generateButtonEvents(button)" > <template v-if="button.icon || button.iconLeft" #iconLeft> <component :is="button.icon || button.iconLeft" :svg-title="button.title"></component> </template> <template v-if="!isIconOnly(button)" #default> {{ button.title }} </template> <template v-if="button.iconRight" #iconRight> <component :is="button.iconRight" :svg-title="button.title"></component> </template> </bento-button> </template> </div> </div> </div> </template> <script setup lang="ts"> import { computed, ref, toRef } from 'vue'; import BentoButton from '../../button.vue'; import type { BentoActionButton, BentoButtonActionsProps } from './button-actions.types'; import BentoLoadingButton from '../loading-button/loading-button.vue'; import BentoMenu from '@/components/menu/menu.vue'; import { useStackButtons } from './composables/use-stack-buttons/use-stack-buttons'; const props = withDefaults(defineProps<BentoButtonActionsProps>(), { inverse: false, layout: 'buttons-end', }); const buttonActions = ref<HTMLDivElement>(null); const buttons = ref<Array<HTMLDivElement>>(null); const stackButtons = useStackButtons(buttonActions, buttons, toRef(props, 'actions')); const reversedActionsList = computed(() => props.actions.slice().reverse()); const generateButtonVariantByIndex = actionIndex => { const lastActionIndex = props.actions.length - 1; return actionIndex === lastActionIndex ? 'primary' : 'secondary'; }; const conditionalClasses = computed(() => ({ [`b-button-actions--${props.layout}`]: true, [`b-button-actions--stacked-buttons`]: stackButtons.value, })); const generateButtonEvents = (button: BentoActionButton) => button?.event !== undefined ? { click: button.event, } : {}; const isIconOnly = (button: BentoActionButton) => button.iconOnly && (button.iconLeft || button.iconRight || button.icon); </script> <script lang="ts"> /** * ButtonActions component manages a set of actions a user can choose from by displaying a group of buttons. * * @example * import { BentoButtonActions } from '@adyen/bento-vue2'; * import MachineLearningIcon from '@adyen/ui-assets-icons-16/vue/machine-learning'; * * const clickedAction = () => { //your action here } * * <template> * <bento-button-actions * :actions="[{ * title: 'Primary', * event: clickedAction, * icon: MachineLearningIcon, * }, { * title: 'Secondary', * event: clickedAction, * }, { * title: 'Tertiary', * event: clickedAction, * }]" * /> * </template> */ export default {}; </script> <style lang="scss" scoped src="./button-actions.scss" /> 

package/dist/assets/components/button/components/loading-button/loading-button.docs.mdx

@@ -0,0 +1,106 @@
+import { Canvas, Story, Meta } from '@storybook/blocks';
+import * as LoadingButtonStories from './loading-button.stories';
+
+<Meta of={LoadingButtonStories} />
+
+# Loading Button
+
+<Canvas withSource="closed">
+    <Story of={LoadingButtonStories.Default} />
+</Canvas>
+
+A loading button is used for cases where pressing a button starts an event that requires a loading state. This is then
+displayed by a small variant of `bento-loading-indicator` and it can result in either a success or fail state.
+
+## Use cases
+
+Use a `bento-loading-button` when you have any sort of asynchronous action and are waiting for a response.
+
+Note that both the states of the button (`start`, `loading`, `success` or `fail`) and its text need to be updated
+manually based on the state of the action you are waiting upon. For example, let's say clicking on this button would
+trigger a `POST` request:
+
+-   Before the user clicks on the button, this will be shown initially in a `start` state.
+-   Once the user clicks on the button, the `POST` request is triggered and the button's state has to be changed to
+    `loading` and have a matching text of your liking to represent that state. At this point the button will be rendered
+    as disabled and will not trigger any actions on click.
+-   Once a response from the request is received, the loading button state has to be updated and its text updated
+    accordingly:
+    -   If the request was successful a `success` state has to be set with a corresponding text that marks success.
+    -   Otherwise a `fail` state needs to be set with a corresponding text that indicates failure and tells the user
+        they can retry the action if the button is clicked again.
+-   In these two final states the button will be clickable again, for retrying on `fail` or doing any other action on
+    `success`.
+
+## Variations
+
+### State
+
+This property represents the state of the button and is of type `BentoLoadingButtonState`, which can take up one of the
+following values:
+
+-   `BentoLoadingButtonState.START`: the initial state of the button, this state represents a button that has not
+    triggered any action yet.
+-   `BentoLoadingButtonState.LOADING`: the state of the button that represents an action in process, during this state
+    the button click events will not be emitted.
+-   `BentoLoadingButtonState.SUCCESS`: the state of the button that represents that an action has been completed
+    successfully.
+-   `BentoLoadingButtonState.FAIL`: the state of the button that represents that an action has been completed
+    unsuccessfully.
+
+### Variant
+
+This property represent the variant referenced in the `bento-button` component. It is one of the following values:
+
+-   `'primary'`: renders the `bento-loading-button` in the primary variant.
+-   `'secondary'`: renders the `bento-loading-button` in the secondary variant.
+-   `'tertiary'`: renders the `bento-loading-button` in the tertiary variant.
+
+## Slots
+
+### Icon
+
+You can pass an icon to the `bento-loading-button` the same way you do to `bento-button`, by using the `iconLeft` slot.
+However, the icon will only show in the `start` state, being replaced by the loading button respective icons in the
+other states.
+
+## Modifiers
+
+### Disabled
+
+This property represents the loading button in a disabled state.
+
+### Condensed
+
+This property represents the loading button in a smaller size. This version should only be used in data-dense spaces
+where a regular-size button would be too big (e.g. inside of tables and data grids).
+
+## Accessibility
+
+Being implemented by leveraging the `bento-button`, the loading button provides out of the box all of the accessibility
+features already present in the `bento-button`.
+
+### Keyboard navigation
+
+The loading button is reachable through keyboard navigation and is placed 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.        |
+| `Space`              | Activates the button, triggering the click event. |
+| `Enter`              | Activates the button, triggering the click event. |
+
+### Roles, States, and Properties
+
+The roles, states and properties set adhering to the [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/) standard on
+this component are as follows:
+
+| ARIA attribute | is automatic?                        | fallback used | manual override |
+| -------------- | ------------------------------------ | ------------- | --------------- |
+| `aria-label`   | Yes, default slot text.              | -             | -               |
+| `role`         | Yes, semantic `button` element used. | -             | -               |
+
+Resources:
+
+-   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=1901-27998&t=NHLd9msx8lGq3NNF-0)

package/dist/assets/components/button/components/loading-button/loading-button.stories.ts

@@ -0,0 +1 @@
+import { ref, watch } from 'vue'; import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { BentoButtonVariant } from '@/components/button'; import { computed, isVue2 } from 'vue-demi'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoLoadingButton from './loading-button.vue'; import DownloadIcon from '@adyen/ui-assets-icons-16/vue/download'; export default { title: 'Button/Loading Button', component: BentoLoadingButton, argTypes: { condensed: { control: { type: 'boolean', }, table: { type: { summary: 'boolean' }, }, }, critical: { control: { type: 'boolean', }, table: { type: { summary: 'boolean' }, }, }, default: { name: 'default', defaultValue: '', description: 'Button text', table: { type: { summary: 'VNode[]' }, }, control: { disable: true }, }, disabled: { control: { type: 'boolean', }, table: { type: { summary: 'boolean' }, }, }, state: { control: { type: 'select', }, table: { type: { summary: 'BentoLoadingButtonState: start, loading, success, fail', }, }, }, variant: { options: Object.values(BentoButtonVariant), control: { type: 'select', }, table: { type: { summary: `BentoButtonVariant: ${Object.values(BentoButtonVariant)}` }, }, }, }, } as Meta; type Story = StoryObj<typeof BentoLoadingButton>; const BUTTON_TEXT = { start: 'Button', loading: 'Loading', success: 'Success', fail: 'Retry', }; const defaultCode = ` <bento-loading-button state="loading" :variant="primary" @input="() => {}" > Loading </bento-loading-button> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoLoadingButton }, props: Object.keys(argTypes), template: ` <bento-loading-button v-bind="args" @click="clickedButtonAction"> {{ loadingButtonText }} </bento-loading-button> `, setup(props) { const args = isVue2 ? props : _args; const loadingButtonText = computed(() => BUTTON_TEXT[args.state]); return { clickedButtonAction: action('click'), loadingButtonText, args, }; }, }), args: { state: 'loading', variant: 'primary', }, parameters: storybookDocsParameter(defaultCode), }; const withIconCode = ` <bento-loading-button state="start" :variant="primary" @click="() => {}" > <template #iconLeft> <download-icon /> </template> Download </bento-loading-button> `; export const WithIcon: Story = { render: (_args, { argTypes }) => ({ components: { BentoLoadingButton, DownloadIcon }, props: Object.keys(argTypes), template: ` <bento-loading-button v-bind="args" @click="downloadAction" :state="loadingState"> <template #iconLeft> <download-icon /> </template> Download </bento-loading-button> `, setup(props) { const args = isVue2 ? props : _args; const loadingState = ref(args.state); const downloadAction = () => { loadingState.value = 'loading'; setTimeout(() => { loadingState.value = Math.random() < 0.5 ? 'success' : 'fail'; }, 1000); }; watch( () => args.state, () => { loadingState.value = args.state; } ); return { downloadAction, loadingState, args, }; }, }), args: { variant: 'primary', state: 'start', }, parameters: storybookDocsParameter(withIconCode), }; 

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

@@ -0,0 +1 @@
+<template> <bento-button :critical="isCritical" :variant="variant" :condensed="condensed" :disabled="disabled" :inverse="inverse" class="b-loading-button" :class="conditionalClasses" @click.capture.stop="onClick" > <slot></slot> <template v-if="state === 'start' && hasSlot('iconLeft')" #iconLeft> <slot name="iconLeft"></slot> </template> <template v-else-if="state !== 'start'" #iconLeft> <span class="b-loading-button__icon" data-testid="loading-button-rotating-icon"> <cross v-if="state === 'fail'" :svg-title="t('failed')" /> <checkmark v-else-if="state === 'success'" :svg-title="t('succeded')" /> <!-- TODO: Replace with new loading-indicator component --> <bento-loading-indicator v-else-if="state === 'loading'" small :inverse="isInverseLoadingIndicator" /> </span> </template> </bento-button> </template> <script setup lang="ts"> import { computed, type PropType, useSlots } from 'vue'; import { BentoLoadingButtonState } from './loading-button.types'; import { BentoLoadingIndicator } from '@/components/loading-indicator'; import BentoButton from '@/components/button/button.vue'; import Cross from '@adyen/ui-assets-icons-16/vue/cross-circle-fill'; import Checkmark from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill'; import { useHasSlot } from '@/composables/use-has-slot/use-has-slot'; import { useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = defineProps({ /** * Reduces sizing of button */ condensed: { type: BentoButton.props.condensed.type, default: false, }, /** * Displays loading-button as critical */ critical: { type: BentoButton.props.critical.type, default: false, }, /** * Disables button functonality */ disabled: { type: BentoButton.props.disabled.type, default: false, }, /** * Sets color set to inverse */ inverse: { type: Boolean, default: false, }, /** * State of the button. * @values start, loading, success, fail */ state: { type: String as PropType<BentoLoadingButtonState | `${BentoLoadingButtonState}`>, default: BentoLoadingButtonState.START, validator: (value: BentoLoadingButtonState) => Object.values(BentoLoadingButtonState).includes(value), }, /** * Types of flavour of Button */ variant: { type: BentoButton.props.variant.type, default: 'primary', validator: BentoButton.props.variant.validator, }, }); const emit = defineEmits<{ /** * Click event handler */ (e: 'click', event: MouseEvent): void; }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const conditionalClasses = computed(() => ({ [`b-loading-button--${props.variant}-${BentoLoadingButtonState.LOADING}`]: props.state === BentoLoadingButtonState.LOADING && !props.disabled, 'b-loading-button--loading': props.state === BentoLoadingButtonState.LOADING && !props.disabled, [`b-loading-button--${props.variant}-${BentoLoadingButtonState.SUCCESS}`]: props.state === BentoLoadingButtonState.SUCCESS, [`b-loading-button--inverse`]: props.inverse, })); const isInverseLoadingIndicator = computed( () => (props.variant === 'primary' && !props.inverse) || (props.variant !== 'primary' && props.inverse) ); const isCritical = computed( () => (props.critical && props.state === BentoLoadingButtonState.START) || props.state === BentoLoadingButtonState.FAIL ); const onClick = (e: MouseEvent) => { // Prevent Vue3 from triggering event twice e.stopPropagation(); if (props.state !== BentoLoadingButtonState.LOADING) { emit('click', e); } }; </script> <script lang="ts"> /** * Loading Button component is used for cases where pressing a button starts an event that requires a loading state, e.g. when you have any sort of asynchronous action and are waiting for a response * * @example * import { BentoLoadingButton } from '@adyen/bento-vue2'; * * export default { * components: { BentoLoadingButton }, * template: ` * <bento-loading-button state="loading" variant="secondary"> * Loading * </bento-loading button> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./loading-button.scss" /> 

package/dist/assets/components/button/components/toggle-button/toggle-button.docs.mdx

@@ -0,0 +1,81 @@
+import { Canvas, Story, Meta } from '@storybook/blocks';
+import * as ToggleButtonStories from './toggle-button.stories';
+
+<Meta of={ToggleButtonStories} />
+
+# Toggle Button
+
+<Canvas withSource="closed">
+    <Story of={ToggleButtonStories.Default} />
+</Canvas>
+
+Toggle button is used to switch between two states (example: menu shown, menu hidden). It functions as a regular button
+but retains its state to indicate whether the associated menu or element is active or inactive.
+
+## Use Cases
+
+Use this component when you need to provide a way for user to show/hide menus or additional content.
+
+### Do not use
+
+-   Don't use for controlling a setting or preference (use toggle instead).
+-   Don't use when the state change does not need to be visually indicated.
+-   Don't use for any form of selection (use radio button or dropdown instead).
+
+## Variations
+
+### Toggled
+
+This property can be used to set the toggled state of the button programatically. You can use this in combination with
+the `update:toggled` emit event to sync the toggled state using the
+[sync modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier) (in vue 2) or using `v-model`
+(in vue 3)
+
+### Variant
+
+This property represent the variant referenced in the `bento-button` component. It is one of the following values:
+
+-   `'primary'`: renders the `bento-toggle-button` in the primary variant.
+-   `'secondary'`: renders the `bento-toggle-button` in the secondary variant.
+-   `'tertiary'`: renders the `bento-toggle-button` in the tertiary variant.
+
+## Modifiers
+
+### Disabled
+
+This property disables the button from being toggled and emit any events.
+
+### Condensed
+
+This property represents the toggle button in a smaller size. This version should only be used in data-dense spaces
+where a regular-size button would be too big (e.g. inside of tables and data grids).
+
+## Accessibility
+
+Being implemented by leveraging the `bento-button`, the toggle button provides out of the box all of the accessibility
+features already present in the `bento-button`.
+
+### Keyboard navigation
+
+The toggle button is reachable through keyboard navigation and is placed 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.        |
+| `Space`              | Activates the button, triggering the click event. |
+| `Enter`              | Activates the button, triggering the click event. |
+
+### Roles, States, and Properties
+
+The roles, states and properties set adhering to the [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/) standard on
+this component are as follows:
+
+| ARIA attribute | is automatic?                        | fallback used | manual override |
+| -------------- | ------------------------------------ | ------------- | --------------- |
+| `aria-label`   | Yes, default slot text.              | -             | -               |
+| `role`         | Yes, semantic `button` element used. | -             | -               |
+
+Resources:
+
+-   [Figma link](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=25572-108880&node-type=INSTANCE)

package/dist/assets/components/button/components/toggle-button/toggle-button.stories.ts

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import { computed, ref, watch } from 'vue'; import { type Meta, type StoryObj } from '@storybook/vue'; import BentoToggleButton from './toggle-button.vue'; import OptionsVerticalIcon from '@adyen/ui-assets-icons-16/vue/options-vertical'; import CheckmarkCircleFillIcon from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill'; export default { title: 'Button/Toggle Button', component: BentoToggleButton, argTypes: { condensed: { control: { type: 'boolean', }, table: { type: { summary: 'boolean' }, }, }, default: { name: 'default', defaultValue: '', description: 'Button text', table: { type: { summary: 'VNode[]' }, }, control: { disable: true }, }, disabled: { control: { type: 'boolean', }, table: { type: { summary: 'boolean' }, }, }, variant: { control: { type: 'select', }, table: { type: { summary: 'BentoButtonVariant: primary, secondary, tertiary' }, }, }, }, } as Meta; type Story = StoryObj<typeof BentoToggleButton>; const defaultCode = ` <bento-toggle-button variant="primary" :state="toggleState" @update:state="updateToggleState" > Toggle Button </bento-toggle-button> <script setup lang="ts"> import { BentoToggleButton } from '@adyen/bento-vue2' const toggleState = ref(false); const updateToggleState = (newToggleState: boolean) => { toggleState.value = newToggleState; }; </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoToggleButton }, props: Object.keys(argTypes), template: ` <bento-toggle-button v-bind="args" :toggled="toggleState" @click="clickedButtonAction" @update:toggled="updateToggleState" > {{toggleButtonText}} </bento-toggle-button> `, setup(props) { const args = isVue2 ? props : _args; const toggleState = ref<boolean>(args?.toggled); const toggleButtonText = computed(() => (toggleState.value ? 'Toggled' : 'Un-toggled')); const updateToggleState = (newToggleState: boolean) => { action('update:toggled')(newToggleState); toggleState.value = newToggleState; }; watch( () => args.toggled, () => { toggleState.value = args.toggled; } ); return { // Methods clickedButtonAction: action('click'), updateToggleState, // Values toggleButtonText, toggleState, args, }; }, }), args: { toggled: false, variant: 'primary', disabled: false, inverse: false, condensed: false, }, parameters: storybookDocsParameter(defaultCode), }; const withIconsCode = ` <bento-toggle-button variant="primary" :state="toggleState" @update:state="updateToggleState" > Toggle Button <template #iconLeft> <CheckmarkCircleFillIcon /> </template> <template #iconRight> <CheckmarkCircleFillIcon /> </template> </bento-toggle-button> <script setup lang="ts"> import { BentoToggleButton } from '@adyen/bento-vue2' import CheckmarkCircleFillIcon from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill'; const toggleState = ref(false); const updateToggleState = (newToggleState: boolean) => { toggleState.value = newToggleState; }; </script> `; export const WithIcons: Story = { render: (_args, { argTypes }) => ({ components: { BentoToggleButton, CheckmarkCircleFillIcon }, props: Object.keys(argTypes), template: ` <bento-toggle-button v-bind="args" :toggled="toggleState" @click="clickedButtonAction" @update:toggled="updateToggleState" > {{toggleButtonText}} <template #iconLeft> <CheckmarkCircleFillIcon /> </template> <template #iconRight> <CheckmarkCircleFillIcon /> </template> </bento-toggle-button> `, setup(props) { const args = isVue2 ? props : _args; const toggleState = ref<boolean>(args?.toggled); const toggleButtonText = computed(() => (toggleState.value ? 'Toggled' : 'Un-toggled')); const updateToggleState = (newToggleState: boolean) => { action('update:toggled')(newToggleState); toggleState.value = newToggleState; }; watch( () => args.toggled, () => { toggleState.value = args.toggled; } ); return { // Methods clickedButtonAction: action('click'), updateToggleState, // Values toggleButtonText, toggleState, args, }; }, }), args: { toggled: false, variant: 'primary', disabled: false, inverse: false, condensed: false, }, parameters: storybookDocsParameter(withIconsCode), }; const onlyIconCode = ` <bento-toggle-button variant="primary" :state="toggleState" @update:state="updateToggleState" > <template #iconLeft> <OptionsVerticalIcon /> </template> </bento-toggle-button> <script setup lang="ts"> import { BentoToggleButton } from '@adyen/bento-vue2' import OptionsVerticalIcon from '@adyen/ui-assets-icons-16/vue/options-vertical'; const toggleState = ref(false); const updateToggleState = (newToggleState: boolean) => { toggleState.value = newToggleState; }; </script> `; export const OnlyIcon: Story = { render: (_args, { argTypes }) => ({ components: { BentoToggleButton, OptionsVerticalIcon }, props: Object.keys(argTypes), template: ` <bento-toggle-button v-bind="args" :toggled="toggleState" @click="clickedButtonAction" @update:toggled="updateToggleState" > <template #iconLeft> <OptionsVerticalIcon /> </template> </bento-toggle-button> `, setup(props) { const args = isVue2 ? props : _args; const toggleState = ref<boolean>(args?.toggled); const updateToggleState = (newToggleState: boolean) => { action('update:toggled')(newToggleState); toggleState.value = newToggleState; }; watch( () => args.toggled, () => { toggleState.value = args.toggled; } ); return { // Methods clickedButtonAction: action('click'), updateToggleState, // Values toggleState, args, }; }, }), args: { toggled: false, variant: 'primary', disabled: false, inverse: false, condensed: false, }, parameters: storybookDocsParameter(onlyIconCode), };