@adyen/bento-mcp 0.0.0 → 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Changelog
+
+## 0.1.0 (2026-02-25)
+
+### Features
+
+- added `@adyen/bento-mcp` to NX release ([8ada8c531](https://github.com/Adyen/bento/commit/8ada8c531))
+
+### ❤️ Thank You
+
+- daver

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Adyen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,113 @@
+# Bento MCP Server
+
+Bento Model Context Protocol (MCP) server. This package provides context about the Bento design system to large language
+models (LLMs) to interact with Bento's codebase, documentation, and components.
+
+## Features
+
+- **Changelog Access**: Query and retrieve information from the Bento Vue2 changelog.
+- **Component Context**: Provide component definitions and usage guidelines to LLMs.
+- **Design Tokens**: (Planned) Access design token values and documentation.
+
+## Usage
+
+You can use this server as a tool with various AI assistant clients that support the Model Context Protocol. The tool
+command to use is `bento-mcp`.
+
+### With Gemini
+
+You can use the `bento-mcp` server as a tool with the `gemini-cli` by passing the command in the `-t` flag.
+
+```bash
+gemini -t "bento-mcp" "What props does the button component have?"
+```
+
+Alternatively, you can configure the tool in a JSON file. For example, you can create a `.gemini-cli-config.json` file
+in your home directory:
+
+```json
+{
+    "mcpServers": {
+        "bento": {
+            "type": "stdio",
+            "command": "npx",
+            "args": ["@adyen/bento-mcp@latest"]
+        }
+    }
+}
+```
+
+With this configuration, you can invoke the tool by its name:
+
+```bash
+gemini -t "bento" "What props does the button component have?"
+```
+
+### With Claude Desktop (macOS)
+
+To configure the `bento-mcp` tool for the Claude desktop client on macOS, you can edit the configuration file located at
+`~/Library/Application Support/Claude/claude_desktop_config.json`.
+
+Add a `bento` server entry that points to the `bento-mcp` command:
+
+```json
+{
+    "mcpServers": {
+        "bento": {
+            "type": "stdio",
+            "command": "npx",
+            "args": ["@adyen/bento-mcp@latest"]
+        }
+    }
+}
+```
+
+### With Windsurf
+
+#### Installation
+
+You can install the package globally using NPM:
+
+```bash
+npm install -g @adyen/bento-mcp
+```
+
+This will make the `bento-mcp` command available in your shell.
+
+You can pass the tool command directly to the `windsurf` client:
+
+```bash
+windsurf --tool "bento-mcp" "What props does the button component have?"
+```
+
+You can also configure tools in a JSON file. For instance, create a `~/.windsurf/config.json` file:
+
+```json
+{
+    "tools": [
+        {
+            "alias": "bento",
+            "command": "bento-mcp"
+        }
+    ]
+}
+```
+
+## Available Tools
+
+The server exposes the following tools to the language model:
+
+### `get_component`
+
+Retrieves the documentation, stories, and Vue implementation for a list of components.
+
+- **Arguments:** `componentNames` (Array<string>): A list of component names (e.g., `["button", "modal"]`).
+- **Returns:** A Markdown formatted string containing the contents of the `.docs.mdx`, `.stories.ts`, and `.vue` files
+  for the requested components.
+
+### `get_all_components`
+
+Retrieves the main index file that exports all available Bento components. Use this to understand which components are
+available in the library.
+
+- **Returns:** The raw content of the `packages/vue2/src/index.ts` file.

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

@@ -0,0 +1,77 @@
+import { Canvas, Meta, Story } from '@storybook/blocks';
+import * as AccordionStories from './accordion.stories';
+
+<Meta of={AccordionStories} />
+
+# Accordion
+
+An accordion is a vertical stack of interactive headers used to reveal or hide sections of content associated with this
+headers.
+
+<Canvas withSource="closed">
+    <Story of={AccordionStories.Default} />
+</Canvas>
+
+## Use Cases
+
+Use accordions only when:
+
+-   Users need only a few pieces of information on the page
+-   The information in each section is independent and users are unlikely to need simultaneous access to multiple
+    sections
+-   When the content is long and the window size is small (example: mobile)
+
+Some valid usage examples:
+
+-   Organize additional information (reduce clutter)
+-   Reduce page length (when information is not crucial) or when content can’t be displayed all at once due to limited
+    space (mobile)
+-   Improve scannability of page
+
+### Do not use
+
+Please do not use accordions when your audience requires the majority or all the content on the page to find answers to
+their questions. Also we do not recommend to use accordions when there is a little content on the page or content has a
+deep hierarchy with sublevels.
+
+## Modifiers
+
+### Title size
+
+Providing `small` title size renders smaller accordion item titles.
+
+Use this for more compact layouts.
+
+## Accessibility
+
+The accordion items follow the HTML structure recommended by the
+[accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
+
+The title section is focusable and clickable.
+
+### Keyboard interaction
+
+The accordion items are 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 next accordion title section.                     |
+| `Shift` + `Tab`      | Moves focus to the previous accordion title section.                 |
+| `Space`/`Enter`      | When focus is on the accordion title, expands/collapses the content. |
+
+### Roles, states and properties
+
+| ARIA attribute    | is automatic?                                                 | fallback used | manual override |
+| ----------------- | ------------------------------------------------------------- | ------------- | --------------- |
+| `role="heading"`  | Yes, through the semantic `h3` element.                       | -             | -               |
+| `role="button"`   | Yes, through the semantic `button` element.                   | -             | -               |
+| `role="region"`   | Yes, role set on the content `div`.                           | -             | -               |
+| `aria-controls`   | Yes, set to the content `id` attribute.                       | -             | -               |
+| `aria-expanded`   | Yes, "true" or "false" based on the expanded/collapsed state. | -             | -               |
+| `aria-labelledby` | Yes, set to the button `id` attribute.                        | -             | -               |
+
+## Resources
+
+-   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?type=design&node-id=17009-76072&t=UTkCtnqxxUOuopRB-4)
+-   [WAI-ARIA guidelines](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/)

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

@@ -0,0 +1 @@
+import { ref } from 'vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import BentoAccordion from './accordion.vue'; import BentoAccordionItem from './components/accordion-item.vue'; import { BentoButton } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import type { Meta, StoryObj } from '@storybook/vue'; import { BentoAccordionTitleSizeOptions } from './accordion.types'; export default { title: 'Accordion', component: BentoAccordion, argTypes: { titleSize: { options: BentoAccordionTitleSizeOptions, control: { type: 'select', }, }, default: { control: false, table: { type: { summary: 'BentoAccordionItem[]' }, }, }, }, } as Meta; type Story = StoryObj<typeof BentoAccordion>; const DEFAULT_PROPS = { titleSize: 'default', }; const defaultCode = ` <template> <bento-accordion> <bento-accordion-item title="Alderaan" :is-expanded.sync="toggle"> <bento-typography> Alderaan had a reputation as one of the most peaceful and cultured worlds in the Galaxy, an idyllic locale for vacation or education in high demand among the denizens of Star Wars' most cultured and aspirational. </bento-typography> </bento-accordion-item> <bento-accordion-item title="Coruscant" is-expanded> <bento-typography> Coruscant is among the most diverse locales in the Galaxy, though it tends to be humans who hold wealth and power. Although it appears a flawless futuristic paradise on its surface, the lower you descend into the city's levels, the more crime and poverty you'll find. </bento-typography> </bento-accordion-item> <bento-accordion-item title="Dagobah"> <bento-typography> A swamp planet teeming with so much life that any manner of Force detection is rendered irrelevant, Dagobah is where Jedi Grandmaster in exile Yoda made his home for the last years of his life following the fall of the Jedi Order, awaiting the arrival of his final pupil and the Galaxy's last hope. </bento-typography> </bento-accordion-item> <bento-accordion-item title="Hoth"> <bento-typography> This snowy ice planet was home to the Rebellion's Echo Base, which Leia, Han, and Luke called home when the Empire titularly struck back in The Empire Strikes Back. Luke fights a wampa, Han guts a tauntaun for warmth, and the rebels hogtie some elephantine AT-AT imperial walkers with their snowspeeders here before beating a hasty retreat from the Empire. </bento-typography> </bento-accordion-item> </bento-accordion> <bento-button type="button" style="margin-top: 1rem" @click="toggle = !toggle">Toggle "Alderaan"</bento-button> </template> <script setup lang="ts"> import { BentoAccordion, BentoAccordionItem, BentoTypography, BentoButton } from '@adyen/bento-vue2' const toggle = ref(false); </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoAccordion, BentoAccordionItem, BentoButton, BentoTypography }, props: Object.keys(argTypes), template: ` <div> <bento-accordion v-bind="args"> <bento-accordion-item title="Alderaan" :is-expanded.sync="toggle"> <bento-typography> Alderaan had a reputation as one of the most peaceful and cultured worlds in the Galaxy, an idyllic locale for vacation or education in high demand among the denizens of Star Wars' most cultured and aspirational. </bento-typography> </bento-accordion-item> <bento-accordion-item title="Coruscant" is-expanded> <bento-typography> Coruscant is among the most diverse locales in the Galaxy, though it tends to be humans who hold wealth and power. Although it appears a flawless futuristic paradise on its surface, the lower you descend into the city's levels, the more crime and poverty you'll find. </bento-typography> </bento-accordion-item> <bento-accordion-item title="Dagobah"> <bento-typography> A swamp planet teeming with so much life that any manner of Force detection is rendered irrelevant, Dagobah is where Jedi Grandmaster in exile Yoda made his home for the last years of his life following the fall of the Jedi Order, awaiting the arrival of his final pupil and the Galaxy's last hope. </bento-typography> </bento-accordion-item> <bento-accordion-item title="Hoth"> <bento-typography> This snowy ice planet was home to the Rebellion's Echo Base, which Leia, Han, and Luke called home when the Empire titularly struck back in The Empire Strikes Back. Luke fights a wampa, Han guts a tauntaun for warmth, and the rebels hogtie some elephantine AT-AT imperial walkers with their snowspeeders here before beating a hasty retreat from the Empire. </bento-typography> </bento-accordion-item> </bento-accordion> <bento-button type="button" style="margin-top: 1rem" @click="toggle = !toggle">Toggle "Alderaan"</bento-button> </div> `, setup(props) { const toggle = ref(false); return { args: isVue2 ? props : _args, toggle }; }, }), args: DEFAULT_PROPS, parameters: storybookDocsParameter(defaultCode), }; 

package/dist/assets/components/accordion/accordion.vue

@@ -0,0 +1 @@
+<template> <div class="b-accordion"> <slot /> </div> </template> <script setup lang="ts"> import { type PropType, provide, toRef } from 'vue'; import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from './accordion.keys'; import type { BentoAccordionTitleSize } from './accordion.types'; const props = defineProps({ /** * Controls accordion title size. * @values default, small */ titleSize: { type: String as PropType<BentoAccordionTitleSize>, default: 'default', }, }); provide(ACCORDION_TITLE_SIZE_INJECTION_KEY, toRef(props, 'titleSize')); </script> <script lang="ts"> /** * An accordion is a vertical stack of interactive headers used to reveal or hide * sections of content associated with these headers. * * This component must only have `BentoAccordionItem` components in its default slot. * * Accordion items should be collapsed by default. * * @example * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2'; * * export default { * components: { BentoAccordion, BentoAccordionItem }, * template: ` * <bento-accordion> * <bento-accordion-item title="Item 1"> * Content for item 1 * </bento-accordion-item> * <bento-accordion-item title="Item 2"> * Content for item 2 * </bento-accordion-item> * </bento-accordion> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./accordion.scss" /> 

package/dist/assets/components/accordion/components/accordion-item.stories.ts

@@ -0,0 +1 @@
+import { isVue2 } from 'vue-demi'; import BentoAccordionItem from './accordion-item.vue'; import { BentoTypography } from '@/components/typography'; import type { Meta, StoryObj } from '@storybook/vue'; export default { title: 'Accordion/Accordion Item', component: BentoAccordionItem, argTypes: { default: { name: 'default', type: { name: 'string', required: false }, description: 'Content of the BentoAccordionItem', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, 'update:is-expanded': { control: false, table: { type: { summary: '($event) => void' }, }, }, }, } as Meta; type Story = StoryObj<typeof BentoAccordionItem>; const DEFAULT_PROPS = { title: 'Default title', default: 'Are you threatening me, Master Jedi? Once more the Sith will rule the galaxy.', isExpanded: true, }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoAccordionItem, BentoTypography }, props: Object.keys(argTypes), template: ` <bento-accordion-item v-bind="args"> <bento-typography> {{ args.default }} </bento-typography> </bento-accordion-item> `, setup(props) { return { args: isVue2 ? props : _args }; }, }), args: DEFAULT_PROPS, }; 

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

@@ -0,0 +1 @@
+<template> <div class="b-accordion-item"> <bento-typography el="h3" :variant="titleSize === 'small' ? 'body' : 'title'" :strongest="titleSize === 'small'" > <button :id="buttonId" :aria-controls="contentId" :aria-expanded="`${isOpen}`" type="button" class="b-accordion-item__button" @click="isOpen = !isOpen" > <chevron-up-icon v-if="isOpen" class="b-accordion-item__icon" :svg-title="t('collapse')" aria-hidden="true" /> <chevron-down-icon v-else class="b-accordion-item__icon" :svg-title="t('expand')" aria-hidden="true" /> {{ title }} </button> </bento-typography> <Transition :name="CONTENT_TRANSITION_NAME"> <div v-if="isOpen" :id="contentId" :aria-labelledby="buttonId" role="region" :style="contentMaxHeight"> <div ref="contentDiv" class="b-accordion-item__content"> <slot /> </div> </div> </Transition> </div> </template> <script setup lang="ts"> import { computed, inject, ref, watch } from 'vue'; import { BentoTypography } from '@/components/typography'; import ChevronDownIcon from '@adyen/ui-assets-icons-16/vue/chevron-down'; import ChevronUpIcon from '@adyen/ui-assets-icons-16/vue/chevron-up'; import { generateUid } from '@/core/utils/ts'; import { observeSizeOfElement } from '@/utils/ts/resize'; import { useI18n } from '@/utils/ts/i18n'; import { ACCORDION_TITLE_SIZE_INJECTION_KEY } from '../accordion.keys'; import type { BentoAccordionTitleSize } from '../accordion.types'; import { useExpandableContentHeight } from '@/composables/use-expandable-content-height/use-expandable-content-height'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const CONTENT_TRANSITION_NAME = 'b-accordion-item__animation--content'; const props = defineProps({ /** * Sets the title of the accordion item. */ title: { type: String, required: true, }, /** * Controls if the content is visible or hidden. */ isExpanded: { type: Boolean, default: false, }, }); const emit = defineEmits<{ /** * Emits update event when content is toggled */ (e: 'update:is-expanded', value: boolean): void; }>(); const { t } = useI18n<{ message: MessageSchema }>({ messages }); // Refs const contentDiv = ref<HTMLDivElement>(null); const isOpen = ref(props.isExpanded); // Generating IDs const buttonId = generateUid('accordionItemButton'); const contentId = generateUid('accordionItemContent'); // Injecting prop from parent const titleSize = inject<`${BentoAccordionTitleSize}`>(ACCORDION_TITLE_SIZE_INJECTION_KEY, 'default'); // Getting and setting the item height to be able to handle height animation const { updateContentHeight, contentHeight } = useExpandableContentHeight(contentDiv, isOpen); const contentMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {})); watch( () => props.isExpanded, value => { isOpen.value = value; } ); watch( () => contentDiv.value, () => { let observer: ResizeObserver | null = null; if (!observer && contentDiv.value) { observer = observeSizeOfElement(contentDiv.value, () => { if (contentDiv.value) { updateContentHeight(); } }); } } ); watch( isOpen, value => { // Enable two-way data binding for `isExpanded` emit('update:is-expanded', value); updateContentHeight(); }, { immediate: true } ); </script> <script lang="ts"> /** * An accordion item is an interactive header used to reveal or hide a * section of content associated with this header. * * This component must always be wrapped by a `BentoAccordion` component. * * @example * import { BentoAccordion, BentoAccordionItem } from '@adyen/bento-vue2'; * * export default { * components: { BentoAccordion, BentoAccordionItem }, * template: ` * <bento-accordion> * <bento-accordion-item title="Item 1"> * Content for item 1 * </bento-accordion-item> * <bento-accordion-item title="Item 2"> * Content for item 2 * </bento-accordion-item> * </bento-accordion> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./accordion-item.scss" /> 

package/dist/assets/components/action-bar/action-bar.docs.mdx

@@ -0,0 +1,103 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as ActionBarStories from './action-bar.stories';
+
+<Meta of={ActionBarStories} />
+
+# ActionBar
+
+Action bar is a floating bar that provides users with quick access to key actions that can be applied to a single or
+multiple items at the same time.
+
+<Canvas of={ActionBarStories.Default} />
+
+## Use Cases
+
+Use when you want to enable user to perform single or bulk selection on data grid (or other components)
+
+-   Selecting rows on data grid and performing single or bulk actions on selected rows
+-   Selecting cards and and performing single or bulk actions on selected cards
+-   Any other similar scenarios.
+
+## Placement
+
+Action bar always appear stays centered at the bottom part of the screen.
+
+Margin from bottom side of the viewport should be `16px` (default) OR `48px` (`extraBottomSpacing`) on pages where there
+is a sticky element at the bottom part of the screen. Example: Data grid with bottom sticky pagination.
+
+Action bar appears on top of your content. You should always allow scrolling and additional space for users to be able
+to view the content underneath.
+
+For example if the action bar appears on data grid then the user should be able to scroll to the last row and select it
+as well. Ensure that all your content is available when the action bar is present.
+
+## Actions
+
+By default, the Action Bar will display up to 4 actions, if there is enough space for the 4 actions to be rendered. If
+more than 4 actions are passed or there is not enough space to render all actions, the component will show a menu button
+where the rest of the actions will be hidden.
+
+Additionally, if you want to display less than 4 actions, you can pass the prop `visibleActions` with the amount of
+actions you want displayed outside the menu. You should pass a **number** to the prop no larger than 4.
+
+Make essential and often performed actions visible and hide actions that are rarely used but still needed from time to
+time.
+
+All actions in the Action Bar are **secondary buttons** with **inverse color** set (this will be enforced internally by
+the component). Critical buttons are also supported.
+
+### Critical actions
+
+You can use **1** critical button on action bar.
+
+When you use a critical action we recommend you to pair it with additional confirmation (i.e. use `bento-modal` dialog)
+to ensure the user does not perform destructive actions accidentally.
+
+### Confirmation
+
+When the user applies an action, be sure to use `bento-toast` to inform about the result of the action.
+
+Consider adding an “Undo” button if the price of the mistake is high.
+
+After applying an action the action bar will remain with the selected set until the user closes it.
+
+## Variants
+
+The Action bar component comes in two variants - `default` and `confirmation`.
+
+### Default
+
+The default variant should be used for any generic case, accepts all props.
+
+### Confirmation
+
+To be used to confirm changes in a page. Only takes the `itemCounter` prop, the `selectionLabel` will always be 'unsaved
+changes' and the `actions` are always 'Save' and 'Cancel'. It also has no close button.
+
+## Modifiers
+
+### Extra bottom spacing
+
+This modifier will add extra spacing between the bottom of the screen and the action bar to allow elements sticking to
+the bottom (like sticky pagination) to be visible.
+
+## Accessibility
+
+### Keyboard interaction
+
+| Keyboard interaction | Output                                                                                                 |
+| -------------------- | ------------------------------------------------------------------------------------------------------ |
+| `Tab`                | Focus visibly moves in logical order to actions inside of the action bar (close action should be last) |
+| `Shift` + `Tab`      | Moves focus to the previous actions.                                                                   |
+| `Space`/`Enter`      | Button is activated                                                                                    |
+
+### Roles, states and properties
+
+| ARIA attribute  | is automatic?                                | fallback used | manual override |
+| --------------- | -------------------------------------------- | ------------- | --------------- |
+| `role="region"` | Yes, through the semantic `section` element. | -             | -               |
+| `aria-label`    | Yes, it is set by default to 'Action bar'    | -             | -               |
+
+## Resources
+
+-   [Figma link](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=23466-201772&t=fUgRFhiNubQnT2RN-0)

package/dist/assets/components/action-bar/action-bar.stories.ts

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import { isVue2, ref } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoActionBar from './action-bar.vue'; import { BentoButton } from '@/components/button'; import type { Meta, StoryObj } from '@storybook/vue'; import BinIcon from '@adyen/ui-assets-icons-16/vue/bin'; import EditIcon from '@adyen/ui-assets-icons-16/vue/edit-1'; const meta: Meta = { title: 'Action bar', component: BentoActionBar, argTypes: { variant: { control: { type: 'select', }, }, }, args: { variant: 'default', }, parameters: { layout: 'fullscreen', }, }; export default meta; type Story = StoryObj<typeof BentoActionBar>; const DEFAULT_ACTIONS = [ { title: 'Assign to...', disabled: true, event: () => true, }, { title: 'Snooze', event: () => true, }, { title: 'Edit', icon: EditIcon, event: () => true, }, { title: 'Delete', critical: true, icon: BinIcon, event: () => true, }, { title: 'Extra option', event: () => true, }, ]; const DEFAULT_PROPS = { actions: DEFAULT_ACTIONS, selectionLabel: 'selected', itemCounter: 3 }; const defaultCode = ` <template> <bento-action-bar :actions="[ { title: 'Assign to...', event: () => true, }, { title: 'Snooze', event: () => true, }, { title: 'Edit', icon: EditIcon, event: () => true, }, { title: 'Delete', critical: true, icon: BinIcon, event: () => true, }, { title: 'Extra option', event: () => true, } ]" @close="closeAction" :item-counter="3" /> <script setup> const closeAction = () => { // unselect selected items and reset itemCounter } </script> </template>`; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoActionBar, BentoButton }, props: Object.keys(argTypes), template: ` <div style="height:140px"> <bento-button @click='toggleActionBar = !toggleActionBar'>Toggle action bar</bento-button> <bento-action-bar v-if='toggleActionBar' v-bind="args" @close="closeAction" @cancel="cancelAction" @save="saveAction" /> </div> `, setup(props) { const closeAction = () => action('close')(); const cancelAction = () => action('cancel')(); const saveAction = () => action('save')(); const toggleActionBar = ref(true); return { // Values args: isVue2 ? props : _args, toggleActionBar, // Events closeAction, cancelAction, saveAction, }; }, }), args: { ...DEFAULT_PROPS, }, parameters: storybookDocsParameter(defaultCode), }; 

package/dist/assets/components/action-bar/action-bar.vue

@@ -0,0 +1 @@
+<template> <Transition name="b-action-bar__animation" appear> <section class="b-action-bar" :class="conditionalClasses" :aria-label="t('actionBar')"> <div ref="actionBar" class="b-action-bar__container"> <div v-if="!isConfirmationVariant" class="b-action-bar__close-button"> <bento-button variant="tertiary" inverse :aria-label="t('close')" @click="emit('close')"> <template #iconLeft><cross-icon :aria-hidden="true" /></template> </bento-button> </div> <bento-typography el="span" stronger class="b-action-bar__selection"> {{ n(itemCounter) }} {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }} </bento-typography> <bento-button-actions v-if="isConfirmationVariant" :actions="confirmationActions" class="b-action-bar__actions" inverse /> <button-actions-with-menu v-else :actions="actionsInternal" class="b-action-bar__actions" :displayed-actions="internalDisplayedActions" menu-position="top-end" disable-responsive-behavior inverse /> </div> </section> </Transition> </template> <script setup lang="ts"> import { computed, nextTick, type PropType, provide, ref, toRefs, watch } from 'vue'; import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import { type BentoActionBarVariant } from '@/components/action-bar/action-bar.types'; import ButtonActionsWithMenu from '@/components/internal/button-actions-with-menu/button-actions-with-menu.vue'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import { useI18n } from '@/utils/ts/i18n'; import { useWindowSize } from '@vueuse/core'; import messages from './messages.json'; import { POPOVER_OFFSET_INJECTION_KEY } from '@/components/popover/popover.keys'; type MessageSchema = (typeof messages)['en-US']; // Constants const AVERAGE_BUTTON_SIZE = 100; const MENU_OFFSET = 7; const RESPONSIVE_BREAKPOINT = 500; const SPACING = 32; const props = defineProps({ /** * List of actions that will be used to render the buttons. * Required and used for the `default` variant. * * Each object in the list should have a `title`, an `event` and, * optionally, an `icon`. * * The component will display 4 actions and the hide the rest inside a menu. * * @see BentoButton for a list of all the other props supported by each button action. */ actions: { type: Array as PropType<BentoButtonActionsList>, default: () => [], }, /** * How many actions should be visible outside the menu, cannot be more than 4 */ visibleActions: { type: Number, default: 4, validator: (value: number) => value > 0 && value <= 4, }, /** * Use when there are sticky elements at the bottom, like sticky pagination */ extraBottomSpacing: { type: Boolean, default: false, }, /** * Show how many items are selected */ itemCounter: { type: Number, required: true, }, /** * Label for the selection, e.g. 'selected'/'changed' */ selectionLabel: { type: String, default: null, }, /** * Variant for the action bar * @values default, confirmation */ variant: { type: String as PropType<BentoActionBarVariant>, default: 'default', }, }); const emit = defineEmits<{ /** * Event emitted when the user click the close button */ (e: 'close'): void; (e: 'cancel'): void; (e: 'save'): void; }>(); const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages }); const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected'))); // Refs const actionBar = ref<HTMLDivElement>(null); const { extraBottomSpacing, visibleActions } = toRefs(props); const { width } = useWindowSize(); const internalDisplayedActions = ref(null); const internalVisibleActions = ref(null); const isConfirmationVariant = computed(() => props.variant === 'confirmation'); watch( () => visibleActions.value, value => { internalVisibleActions.value = value <= 4 ? value : 4; internalDisplayedActions.value = internalVisibleActions.value; }, { immediate: true } ); // Styling const conditionalClasses = computed(() => ({ 'b-action-bar--extra-spacing': extraBottomSpacing.value, 'b-action-bar--confirmation': isConfirmationVariant.value, })); // Provide POPOVER_OFFSET_INJECTION_KEY to change the value of the popover offset provide(POPOVER_OFFSET_INJECTION_KEY, MENU_OFFSET); // Manipulate actions array to display as intended const actionsInternal = computed(() => { // All buttons should be of type secondary in the action bar const actions = props.actions.map(action => ({ ...action, variant: 'secondary', })) as BentoButtonActionsList; // Shown actions should display from left to right in action bar, instead of right to left which is the button actions default const shownActions = actions.slice(0, internalDisplayedActions.value).reverse(); const hiddenActions = actions.slice(internalDisplayedActions.value); return [...shownActions, ...hiddenActions]; }); const confirmationActions = computed<BentoButtonActionsList>(() => [ { title: t('save'), event: () => emit('save'), }, { title: t('cancel'), variant: 'secondary', event: () => emit('cancel'), }, ]); // Recursive functions to determine how many actions should be visible/hidden based on the screens width const showActions = async () => { await nextTick(); if ( width.value > actionBar.value.clientWidth + SPACING + AVERAGE_BUTTON_SIZE && internalDisplayedActions.value < internalVisibleActions.value ) { internalDisplayedActions.value += 1; showActions(); } }; const hideActions = async () => { await nextTick(); if (width.value < actionBar.value.clientWidth + SPACING && internalDisplayedActions.value > 0) { internalDisplayedActions.value -= 1; hideActions(); } }; // Screen width watcher to toggle hidden/visible actions watch( () => width.value, async (newValue, oldValue) => { await nextTick(); if (!actionBar.value) { return; } const isIncreasing = newValue > oldValue; if (width.value < RESPONSIVE_BREAKPOINT) { internalDisplayedActions.value = 0; } else if (isIncreasing) { showActions(); } else { hideActions(); } }, { immediate: true } ); </script> <script lang="ts"> /** * Action bar is a floating bar that provides users with quick access to key actions that can be applied to one or multiple items. * * @example * import { BentoActionBar } from '@adyen/bento-vue2'; * * export default { * components: { BentoActionBar }, * template: ` * <bento-action-bar * :actions='[ * { * title: 'Delete', * critical: true, * icon: BinIcon, * event: () => true, * }, * { * title: 'Edit', * icon: EditIcon, * event: () => true, * } * ]' * @close="closeAction" * :item-counter="5" * /> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./action-bar.scss" /> 

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

@@ -0,0 +1,106 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as AlertStories from './alert.stories';
+
+<Meta of={AlertStories} />
+
+# Alert
+
+Alert is a persistent notification containing information important to the user. It should be used to inform about
+changes, explain a problem or provide a solution. It may be triggered by a user action or not.
+
+<Canvas of={AlertStories.Default} />
+
+## Use Cases
+
+Use alerts for important messages, explanations or errors that require user to take action.
+
+Use alerts for:
+
+-   Warning users about potential problems, risks, or actions required like update their password.
+-   Informing users with helpful information or tips, such as feature announcements, usage guidelines, or updates about
+    system status.
+-   Displaying system-generated notifications, such as scheduled maintenance, security alerts, or updates about the
+    availability of new features or versions of the software.
+
+### Do not use
+
+Do not use alerts for non-critical feedback about the app’s processes after user takes an action:
+
+For example:
+
+-   confirmation message that a setting has been saved. In this case, prefer the `toast` component instead
+
+### Guidelines
+
+The component allows you to pass `actions` slot where action buttons may be placed
+
+According to the Design system guidelines:
+
+-   You are restricted to use only `Button` component with `tertiary` variant
+-   The amount of buttons may be other 1 or 2, not more
+
+## Variants
+
+The Alert component comes in two variants - default and tip.
+
+### Default
+
+The default variant should be used for longer content alerts and in places where there’s enough space, for example,
+above a form. It has optional title, buttons and dismiss icon.
+
+### Tip
+
+For cramped spaces and short tips, use tip variant instead. It’s like an exposed tooltip that, for example, can warn
+user of a specific setting’s consequences. It doesn’t have a title, buttons or dismiss icon, however, you can link parts
+of the text, if needed.
+
+## Modifiers
+
+### Type
+
+Determines the type of alert that is displayed. By setting the `type` property, the Alert component will render a
+corresponding visual representation of the alert type with predefined icon and background.
+
+It accepts one of the following values:
+
+-   `'success'`
+-   `'highlight'`
+-   `'warning'`
+-   `'critical'`
+
+### Close Button
+
+The `closeButton` boolean property adds a Close Button icon that is displayed on the right side of the Alert component
+
+Clicking on it, a `close-alert` event is emitted
+
+## Accessibility
+
+### Keyboard Interaction
+
+When a user uses the feature that triggers the alert they can SEE it appear (but focus DOES NOT transfer automatically
+when alert appears).
+
+### Screenreader
+
+When a user uses the feature that triggers the alert:
+
+-   User can HEAR the alert is read when it appears (but focus DOES NOT transfer automatically when alert appears).
+-   `Success`, `Warning` and `Critical` types will be identified by an alert sound before the alert is read.
+
+### Colors
+
+Different type options can be used to differentiate between alerts or to add additional meaning. Make sure you don’t
+rely on color only, though, as users with color blindness may struggle with discerning them.
+
+### Aria attributes
+
+Adhering to the [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/) standard we apply the following:
+
+| ARIA attribute | is automatic?                                                                | fallback used | manual override |
+| -------------- | ---------------------------------------------------------------------------- | ------------- | --------------- |
+| `role`         | Yes, based on `type` property value, either `alert` or `status` role is used | -             | -               |
+
+## Resources
+
+-   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=2748-62103&t=88jDJJzCcALwP5KP-0)

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

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import { BentoAlertTypeOption, BentoAlertVariant } from './alert.types'; import { BentoButton } from '@/components/button'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { type Meta, type StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import BentoAlert from './alert.vue'; export default { title: 'Alert', component: BentoAlert, parameters: { layout: 'centered', }, argTypes: { default: { name: 'default', defaultValue: '', description: 'Heading title', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text', }, }, variant: { options: Object.values(BentoAlertVariant), defaultValue: BentoAlertVariant.TIP, mapping: BentoAlertVariant, control: { type: 'select', }, }, type: { options: Object.values(BentoAlertTypeOption), defaultValue: BentoAlertTypeOption.HIGHLIGHT, mapping: BentoAlertTypeOption, control: { type: 'select', }, }, description: { name: 'description', defaultValue: '', description: 'Description in alert body', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text', }, }, actions: { name: 'actions', defaultValue: '', description: 'Actions in the footer', table: { type: { summary: 'VNode[]' }, }, control: { disable: true, }, }, }, } as Meta; type Story = StoryObj<typeof BentoAlert>; const DEFAULT_ALERT_PROPS = { default: 'Alert title', type: 'highlight', description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultrices leo massa, at accumsan lorem sagittis vehicula. Ut elit orci, finibus id neque quis, cursus posuere metus. Proin sed convallis odio, ut porttitor turpis.', closeButton: true, variant: 'default', }; const defaultCode = ` <bento-alert @close-alert='clickedCloseAction'> <template #default> ${DEFAULT_ALERT_PROPS.default} </template> <template #description> ${DEFAULT_ALERT_PROPS.description} </template> </bento-alert> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoAlert }, props: Object.keys(argTypes), template: ` <bento-alert v-bind='args' @close-alert='clickedCloseAction' style="width: 100vw;max-width: 700px;"> <template #default v-if='args.default'> {{ args.default }} </template> <template #description v-if='args.description'> {{ args.description }} </template> </bento-alert> `, setup(props) { return { clickedCloseAction: action('onClickCloseButton'), args: isVue2 ? props : _args, }; }, }), args: { ...DEFAULT_ALERT_PROPS }, parameters: storybookDocsParameter(defaultCode), }; export const WithActions: Story = { render: (_args, { argTypes }) => ({ components: { BentoAlert, BentoButton }, props: Object.keys(argTypes), template: ` <bento-alert v-bind='args' @close-alert='clickedCloseAction' style="width: 100vw;max-width: 700px;"> <template #default v-if='args.default'> {{ args.default }} </template> <template #description v-if='args.description'> {{ args.description }} </template> <template #actions> <bento-button @click='clickedAction' variant="tertiary">Cancel</bento-button> <bento-button @click='clickedAction' variant="tertiary">Confirm</bento-button> </template> </bento-alert> `, setup(props) { return { clickedCloseAction: action('onClickCloseButton'), clickedAction: action('onClickAction'), args: isVue2 ? props : _args, }; }, }), args: { ...DEFAULT_ALERT_PROPS }, parameters: storybookDocsParameter(defaultCode), }; 

package/dist/assets/components/alert/alert.vue

@@ -0,0 +1 @@
+<template> <div class="b-alert" :role="computedRole"> <div class="b-alert__inner-container" :class="alertConditionalClasses"> <div class="b-alert__icon"> <component :is="iconComponent" aria-hidden="true" :svg-title="iconSvgTitle" /> </div> <div class="b-alert__content"> <bento-typography v-if="hasSlot('default') && !isTipVariant" class="b-alert__title" el="div" variant="body" strongest wide > <slot /> </bento-typography> <bento-typography v-if="hasSlot('description')" class="b-alert__description" v-bind="descriptionTypography" data-testid="alert-description" > <slot name="description" /> </bento-typography> <div v-if="hasSlot('actions') && !isTipVariant" class="b-alert__actions" data-testid="alert-actions"> <slot name="actions" /> </div> </div> <bento-button v-if="closeButton && !isTipVariant" class="b-alert__close-button" variant="tertiary" type="button" @click="onCloseButtonClick" > <cross-small :svg-title="t('close')" /> </bento-button> </div> </div> </template> <script setup lang="ts"> import { computed, onMounted, useSlots } from 'vue'; // Component import { BentoAlertEvent, BentoAlertTypeOption, BentoAlertVariant } from '@/components/alert/alert.types'; import { BentoTypography, BentoTypographyElement, BentoTypographyVariant } from '@/components/typography'; import { BentoButton } from '@/components/button'; import CrossSmall from '@adyen/ui-assets-icons-16/vue/cross-small'; import Warning from '@adyen/ui-assets-icons-16/vue/warning-filled'; import CrossCircle from '@adyen/ui-assets-icons-16/vue/cross-circle-fill'; import CheckedCircle from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill'; import Info from '@adyen/ui-assets-icons-16/vue/info-filled'; // Utils import { useHasSlot } from '@/composables'; import { useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const slots = useSlots(); const hasSlot = useHasSlot(slots); const emit = defineEmits<{ /** * Emits event when the alert is closed. `closeButton` must be `true` */ (e: 'close-alert'); }>(); const props = withDefaults( defineProps<{ /** * Adds a close button on the right side of the alert */ closeButton?: boolean; /** * Type of a alert; set a distinctive icon and color. Defaults to highlight. * @values HIGHLIGHT, SUCCESS, CRITICAL, WARNING */ type?: BentoAlertTypeOption | `${BentoAlertTypeOption}`; /** * Variant for the alert * @values DEFAULT, TIP */ variant?: BentoAlertVariant | `${BentoAlertVariant}`; }>(), { closeButton: false, type: BentoAlertTypeOption.HIGHLIGHT, variant: BentoAlertVariant.DEFAULT, } ); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const isTipVariant = computed(() => props.variant === BentoAlertVariant.TIP); const alertConditionalClasses = computed(() => ({ [`b-alert--${props.type}`]: props.type, [`b-alert--${BentoAlertVariant.TIP}`]: isTipVariant.value, })); const iconSvgTitle = computed(() => t(`${props.type}Icon`)); const iconComponent = computed(() => { switch (props.type) { case BentoAlertTypeOption.CRITICAL: return CrossCircle; case BentoAlertTypeOption.SUCCESS: return CheckedCircle; case BentoAlertTypeOption.WARNING: return Warning; case BentoAlertTypeOption.HIGHLIGHT: default: return Info; } }); const descriptionTypography = computed(() => ({ el: BentoTypographyElement.DIV, variant: isTipVariant.value ? BentoTypographyVariant.CAPTION : BentoTypographyVariant.BODY, wide: true, })); const computedRole = computed(() => (props.type === BentoAlertTypeOption.HIGHLIGHT ? 'status' : 'alert')); const onCloseButtonClick = () => { emit(BentoAlertEvent.CLOSE_ALERT); }; onMounted(() => { if (!slots.default && !slots.description) { throw new Error('Alert Component requires a title or a description'); } }); </script> <script lang="ts"> /** * An Alert component is used to display a persistent * notification containing information important to the user * * @example * import { BentoAlert, BentoAlertTypeOption } from '@adyen/bento-vue2'; * * export default { * components: { BentoAlert }, * template: ` * <bento-alert type="highlight"> * Title of the Alert * </bento-alert> * ` * } */ export default { i18n: { messages }, name: 'bento-alert', }; </script> <style lang="scss" scoped src="./alert.scss" /> 

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

@@ -0,0 +1,44 @@
+import { Canvas, Story, Meta } from '@storybook/blocks';
+import * as AvatarStories from './avatar.stories';
+
+<Meta of={AvatarStories} />
+
+# Avatar
+
+An Avatar is a visual representation of a user. It can display a user’s name paired with an icon containing a chosen
+image or the initials of their name.
+
+<Canvas withSource="closed">
+    <Story of={AvatarStories.Default} />
+</Canvas>
+
+## Use Cases
+
+Use an Avatar if you want to visually represent a user, combined with their name.
+
+## Variations
+
+### Icon only
+
+Displays the Avatar with an icon only
+
+## Modifiers
+
+There are currently no modifiers for this component.
+
+## Accessibility
+
+The Avatar component is not reachable through keyboard navigation since it's a non-interactive element that displays a
+property related to a user name.
+
+### Aria attributes
+
+Adhering to the [WAI-ARIA 1.2](https://www.w3.org/TR/wai-aria-1.2/) standard we apply the following:
+
+| ARIA attribute | is automatic?                                                                    | fallback used | manual override |
+| -------------- | -------------------------------------------------------------------------------- | ------------- | --------------- |
+| `aria-label`   | Yes, set to the username value if the component renders in an icon only variant. | -             | -               |
+
+## Resources
+
+-   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?type=design&node-id=3546-77563&mode=design&t=5dC1Iux4QIcnK7zH-0)

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

@@ -0,0 +1 @@
+import { type StoryObj } from '@storybook/vue'; import BentoAvatar from './avatar.vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; const meta = { title: 'Avatar', component: BentoAvatar, argTypes: { username: { name: 'username', description: 'Name of user', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text', }, }, src: { name: 'src', description: 'Image src of user profile picture', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoAvatar>; const DEFAULT_USERNAME = 'John'; const ICON_ONLY = false; const defaultCode = ` <bento-avatar username="John" /> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoAvatar }, props: Object.keys(argTypes), setup: props => ({ args: isVue2 ? props : _args }), template: ` <bento-avatar v-bind="args"/> `, }), args: { username: DEFAULT_USERNAME, iconOnly: ICON_ONLY, }, parameters: storybookDocsParameter(defaultCode), }; 

package/dist/assets/components/avatar/avatar.vue

@@ -0,0 +1 @@
+<template> <div class="b-avatar" :role="iconOnly ? 'img' : null" :aria-label="computedAriaLabel"> <avatar-image :src="src" :username="computedUsername" :variant="BentoAvatarImageVariant.SMALL" :color="avatarColor" /> <bento-typography v-if="!iconOnly" class="b-avatar__label" el="span" variant="body"> {{ username }} </bento-typography> </div> </template> <script setup lang="ts"> import { computed, toRefs } from 'vue'; import { AvatarImage, BentoAvatarImageColor, BentoAvatarImageVariant } from './components/avatar-image'; import { BentoTypography } from '@/components/typography'; import { useInitials } from '@/composables'; const props = withDefaults( defineProps<{ /** * Displays the user profile without the label. */ iconOnly?: boolean; /** * Image src to load the profile picture. */ src?: string; /** * Name of the user that will be used both in the label and to extract initials to display default value. * John => J * John Smith => JS * John Smith Doe => JD * John Smith Doe Holly => JH */ username: string; }>(), { iconOnly: false, src: null, } ); const { username } = toRefs(props); const computedAriaLabel = computed(() => (props.iconOnly ? props.username : null)); const computedUsername = computed(() => (!props.src ? props.username : null)); const initials = useInitials(username); // Returns the UTF-16 char code const charCode = computed(() => (initials.value ? initials.value.charCodeAt(0) - 65 : null)); // Returns a computed color based on the letter passed const avatarColor = computed(() => { const numberOfAlphabetLetters = 26; const numberOfColors = Object.keys(BentoAvatarImageColor).length; const rangeStep = numberOfAlphabetLetters / numberOfColors; if (charCode.value <= rangeStep) { return BentoAvatarImageColor.YELLOW; } if (charCode.value <= rangeStep * 2) { return BentoAvatarImageColor.BLUE; } if (charCode.value <= rangeStep * 3) { return BentoAvatarImageColor.GREEN; } return BentoAvatarImageColor.RED; }); </script> <script lang="ts"> /** * Displays an user profile including an avatar and optionally a label. * * @example * import { BentoAvatar } from '@adyen/bento-vue2'; * * export default { * components: { BentoAvatar }, * template: `<bento-avatar :src="userAvatarSrc" username="Jane" />` * } */ export default { name: 'bento-avatar', }; </script> <style lang="scss" scoped src="./avatar.scss" /> 

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

@@ -0,0 +1 @@
+<template> <div class="b-avatar-image" :class="conditionalClasses" aria-hidden="true" data-testid="avatar"> <img v-if="src" :src="src" class="b-avatar-image__image" alt="" data-testid="avatar-content" /> <div v-else class="b-avatar-image__default" data-testid="avatar-content"> <bento-typography el="span" variant="body" strongest> {{ initials }} </bento-typography> </div> </div> </template> <script setup lang="ts"> import { computed, toRefs } from 'vue'; import { BentoAvatarImageColor, BentoAvatarImageVariant } from './avatar-image.types'; import { BentoTypography } from '@/components/typography'; import { useInitials } from '@/composables'; const props = withDefaults( defineProps<{ /** * Avatar color. Defaults to yellow. */ color?: BentoAvatarImageColor; /** * Image src to load the profile picture. */ src?: string; /** * Name of the user that will be used to extract initials to display default value. * John => J * John Smith => JS * John Smith Doe => JD * John Smith Doe Holly => JH */ username?: string; /** * Variants supported for small and large. * Default - large */ variant?: BentoAvatarImageVariant; }>(), { color: BentoAvatarImageColor.YELLOW, src: null, username: null, variant: BentoAvatarImageVariant.LARGE, } ); const { username } = toRefs(props); const initials = useInitials(username); const conditionalClasses = computed(() => ({ [`b-avatar-image--${BentoAvatarImageVariant.SMALL}`]: props.variant === BentoAvatarImageVariant.SMALL, [`b-avatar-image--${props.color}`]: props.color, })); </script> <script lang="ts"> /** * Image used as user profile inside bento-avatar. * * @example * import { AvatarImage } from './components/avatar-image'; * * export default { * components: { AvatarImage }, * template: `<avatar-image :src="userAvatarSrc" username="Jane" />` * } */ export default {}; </script> <style lang="scss" scoped src="./avatar-image.scss" />