@adyen/bento-mcp 0.10.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,41 @@
 # Changelog
 
+## 0.12.0 (2026-09-09)
+
+### Features
+
+- excluded internal components and added composable docs and MCP tools ([d6891800a](https://github.com/Adyen/bento/commit/d6891800a))
+- improved design token discoverability in MCP ([f8be70c37](https://github.com/Adyen/bento/commit/f8be70c37))
+
+    Update packages/mcp/SKILL.md
+    Co-authored-by: Gerald Campbell <86044115+GeraldAdyen@users.noreply.github.com>
+- added script to copy code snippet vue files into storybook data for each story ([c7938960f](https://github.com/Adyen/bento/commit/c7938960f))
+
+### Bug Fixes
+
+- built design tokens before copying MCP assets ([d5b1fd9f5](https://github.com/Adyen/bento/commit/d5b1fd9f5))
+
+### Build System
+
+- updated the AGENTS.md files structure and content, expanded with skills ([8c303283d](https://github.com/Adyen/bento/commit/8c303283d))
+
+### Miscellaneous Chores
+
+- updated `pnpm` from `10` to `11` ([eddaae383](https://github.com/Adyen/bento/commit/eddaae383))
+- updated `typescript` to `6.0.3` ([54f914b8c](https://github.com/Adyen/bento/commit/54f914b8c))
+
+### ❤️ Thank You
+
+- daver
+- gerald
+- Gerald Campbell @GeraldAdyen
+
+
+## 0.11.0 (2026-07-29)
+
+This was a version bump only for mcp to align it with other projects, there were no code changes.
+
+
 ## 0.10.0 (2026-07-21)
 
 ### Documentation

package/README.md

@@ -114,6 +114,20 @@ this to understand which components are available in the library and their names
 
 - **Returns:** The list of components available in Bento.
 
+### `get_composable`
+
+Retrieves all available documentation, stories, TypeScript implementations, and type definitions for a list of publicly
+exported composables.
+
+- **Arguments:** `composableNames` (`Array<string>`): A list of composable names, such as `["use-bento-currency"]`.
+- **Returns:** A Markdown formatted string containing the composable's available documentation and TypeScript files.
+
+### `get_all_composables`
+
+Retrieves the registry of composables publicly exported by Bento.
+
+- **Returns:** The list of composables publicly exported by Bento.
+
 ### `get_deprecations`
 
 Retrieves the Bento Deprecations Registry. Use this to find out which components, properties, or features are deprecated
@@ -133,9 +147,17 @@ Retrieves specific documentation files for Bento.
 Retrieves Bento Design Tokens (CSS variables), grouped by semantic categories (color, spacing, border, shadow,
 animation, typography, layout).
 
+- **When to use:** Call this before choosing colors, spacing, typography, borders, shadows, or other themeable values.
+- **Token package:** Use `@adyen/bento-design-tokens`, whose generated CSS entry point is
+  `@adyen/bento-design-tokens/dist/css/bento/variables.css`.
 - **Arguments:** `searchQuery` (`string`, optional): A search term to filter tokens (e.g., `"critical"`, `"spacer"`,
-  `"background"`).
-- **Returns:** A Markdown formatted string containing a categorized list of CSS variable names and their values.
+  `"background"`, `"label"`, `"decorative"`).
+- **Returns:** A Markdown formatted string containing grouped CSS variable names, values, and the documented
+  descriptions for color alias groups. Prefer alias tokens over definition tokens. If no suitable token exists, submit a
+  design-token request instead of creating an arbitrary local value.
+- **Token layers:** Color aliases are the semantic styling API. Use only variables returned by this tool. Public
+  foundation variables, such as spacers and border widths, are intentionally included and may come from source files
+  under `definitions`.
 
 ### `get_utility_classes`
 

package/SKILL.md

@@ -21,19 +21,49 @@ If you need to install or configure Bento in a project:
 - Execute `get_docs({ docType: 'getting-started' })` for the core Bento installation guide.
 - Execute `get_docs({ docType: 'tailwind' })` if Tailwind integration is required.
 
-### Step 1: Discovery (Check Existence)
+### Step 1: Token Discovery (Before Styling)
+
+Before choosing colors, spacing, typography, borders, shadows, or other themeable values:
+
+- **DO** execute `get_design_tokens()` to inspect the available Bento tokens and their documented groups.
+- Tokens are provided by `@adyen/bento-design-tokens`. Its generated CSS entry point is
+  `@adyen/bento-design-tokens/dist/css/bento/variables.css`.
+- Use `get_design_tokens({ searchQuery: 'background' })`, `get_design_tokens({ searchQuery: 'label' })`, or
+  `get_design_tokens({ searchQuery: 'decorative' })` to narrow the results.
+- **USE** alias tokens such as `var(--b-color-label-primary)` and `var(--b-color-decorative-blue)`.
+- Use only token names returned by `get_design_tokens`; do not construct or infer token names from the source token
+  structure.
+- If no suitable Bento token exists, submit a design-token request. Do not invent an arbitrary local token or color.
+
+The token output groups color aliases as `Background`, `Label`, `Link`, `Outline`, `Separator`, `Decorative`, and
+`Support`, and includes the documented description for each group.
+
+#### Alias and definition tokens
+
+- **Alias tokens** are semantic, consumer-facing tokens. They describe intent, for example `--b-color-label-primary` or
+  `--b-color-background-critical-weak`, and should be preferred for component styling.
+- Private definition files are implementation details and are not emitted to `variables.css` or returned by
+  `get_design_tokens`.
+- The generated stylesheet also contains a small set of public foundation tokens, such as spacing, border
+  widths, shadows, and breakpoints. These are intentionally available CSS variables, even though their source files live
+  under `definitions`; use them when the MCP returns them.
+- The MCP reads the generated `@adyen/bento-design-tokens/dist/css/bento/variables.css`, not the private YAML source
+  files. Therefore every token returned by `get_design_tokens` is available in the published stylesheet. Never infer or
+  construct private definition names.
+
+### Step 2: Discovery (Check Existence)
 
 If you are unsure if a Bento component exists or what it is called:
 
 - **DO NOT** use `ls`, `grep`, or `read_file` on `node_modules`.
 - **DO** execute `get_all_components()` to retrieve the official registry of components.
 
-### Step 2: Inspection (Fetch Truth)
+### Step 3: Inspection (Fetch Truth)
 
 Once the component name is known:
 
 - Execute `get_component(['component-name'])`.
-- **If tools are missing:** Provide the user with the setup instructions in Section 2.
+- **If tools are missing:** Provide the user with the setup instructions in Section 4.
 
 #### ⚠️ CRITICAL: Truncation & Completeness Rules
 
@@ -50,13 +80,13 @@ Once the component name is known:
 4. **Pre-Write Checklist:** Before any `write_file` or code edit, mentally verify: _"Have I called `get_component` for
    every Bento component in this file?"_ If the answer is no, **STOP** and fetch the missing components.
 
-### Step 3: Constraints First (Read `.docs.mdx`)
+### Step 4: Constraints First (Read `.docs.mdx`)
 
 - **DO NOT SKIM.** Look specifically for **"Do not use"** and **"Guidelines"** sections.
 - **Rule:** If the docs say "text only," you MUST NOT use custom HTML in that slot.
 - **Rule:** If the docs say "max 2 buttons," you MUST NOT include 3.
 
-### Step 4: Syntax & Logic Validation
+### Step 5: Syntax & Logic Validation
 
 - Check `.stories.ts` for correct icon imports from `@adyen/ui-assets-icons-16`.
 - Check `.vue` implementation for event names (e.g., `update:model-value`) and prop types.
@@ -132,9 +162,9 @@ If the Bento MCP tools are not available in your environment, add the following
 
 ---
 
-## 📚 5. Immutable Documentation (Tailwind & Tokens)
+## 📚 5. Implementation Guidance (Tailwind & Token Usage)
 
-The following rules are NOT available via the MCP and must be followed strictly:
+The following rules complement the information available through the MCP and must be followed strictly:
 
 ### Tailwind 4 "Golden Standard" Setup
 

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

@@ -1 +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), }; 
+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'; const AccordionDefault = "<template>\n <div>\n <bento-accordion>\n <bento-accordion-item :is-expanded=\"toggle\" title=\"Alderaan\" @update:is-expanded=\"toggle = $event\">\n <bento-typography>\n Alderaan had a reputation as one of the most peaceful and cultured worlds in the Galaxy, an idyllic\n locale for vacation or education in high demand among the denizens of Star Wars' most cultured and\n aspirational.\n </bento-typography>\n </bento-accordion-item>\n <bento-accordion-item is-expanded title=\"Coruscant\">\n <bento-typography>\n Coruscant is among the most diverse locales in the Galaxy, though it tends to be humans who hold\n wealth and power. Although it appears a flawless futuristic paradise on its surface, the lower you\n descend into the city's levels, the more crime and poverty you'll find.\n </bento-typography>\n </bento-accordion-item>\n <bento-accordion-item title=\"Dagobah\">\n <bento-typography>\n A swamp planet teeming with so much life that any manner of Force detection is rendered irrelevant,\n Dagobah is where Jedi Grandmaster in exile Yoda made his home for the last years of his life\n following the fall of the Jedi Order, awaiting the arrival of his final pupil and the Galaxy's last\n hope.\n </bento-typography>\n </bento-accordion-item>\n <bento-accordion-item title=\"Hoth\">\n <bento-typography>\n This snowy ice planet was home to the Rebellion's Echo Base, which Leia, Han, and Luke called home\n when the Empire titularly struck back in The Empire Strikes Back. Luke fights a wampa, Han guts a\n tauntaun for warmth, and the rebels hogtie some elephantine AT-AT imperial walkers with their\n snowspeeders here before beating a hasty retreat from the Empire.\n </bento-typography>\n </bento-accordion-item>\n </bento-accordion>\n\n <bento-button style=\"margin-top: 1rem\" type=\"button\" @click=\"toggle = !toggle\">\n Toggle \"Alderaan\"\n </bento-button>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoAccordion, BentoAccordionItem, BentoButton, BentoTypography } from '@adyen/bento-vue2';\n\n const toggle = ref(false);\n</script>\n"; 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', }; 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(AccordionDefault), }; 

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

@@ -1 +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, }; 
+import { isVue2 } from 'vue-demi'; import BentoAccordionItem from './accordion-item.vue'; import { BentoTypography } from '@/components/typography'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; const AccordionItemDefault = "<template>\n <bento-accordion-item is-expanded title=\"Default title\">\n <bento-typography>\n Are you threatening me, Master Jedi? Once more the Sith will rule the galaxy.\n </bento-typography>\n </bento-accordion-item>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoAccordionItem, BentoTypography } from '@adyen/bento-vue2';\n</script>\n"; 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, parameters: storybookDocsParameter(AccordionItemDefault), }; 

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

@@ -1 +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 { 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 { contentHeight } = useExpandableContentHeight(contentDiv, isOpen); const contentMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {})); watch( () => props.isExpanded, value => { isOpen.value = value; } ); watch( isOpen, value => { // Enable two-way data binding for `isExpanded` emit('update:is-expanded', value); }, { 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" /> 
+<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 '@/utils/ts/generate-uid'; 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 { contentHeight } = useExpandableContentHeight(contentDiv, isOpen); const contentMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {})); watch( () => props.isExpanded, value => { isOpen.value = value; } ); watch( isOpen, value => { // Enable two-way data binding for `isExpanded` emit('update:is-expanded', value); }, { 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 }, name: 'bento-accordion-item', }; </script> <style lang="scss" scoped src="./accordion-item.scss" /> 

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

@@ -67,12 +67,19 @@ 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.
+The default variant should be used for any generic case. Use `dismissible` to control the close button and
+`selectionLabel` to customize the label following the item counter. When `selectionLabel` is omitted, it defaults to the
+localized “selected” label. Pass `null` to hide the complete selection summary. For arbitrary content, the optional
+`selectionLabel` slot overrides the complete summary and exposes `itemCounter` and `label` as slot properties. Set
+`dismissible` to `false` when the Action Bar must not render a close button.
+
+<Canvas of={ActionBarStories.WithoutLabel} />
 
 ### 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.
+Use the confirmation variant to confirm changes on a page. Provide `itemCounter` to render the localized
+`{count} unsaved change(s)` summary. The `selectionLabel` prop and slot, `dismissible`, and `actions` do not apply: its
+label is fixed, its actions are always “Save” and “Cancel”, and it has no close button.
 
 ## State
 

package/dist/assets/components/action-bar/action-bar.internal.types.ts

@@ -0,0 +1 @@
+export const BentoActionBarVariantOptions = ['default', 'confirmation'] as const; export const BentoActionBarStateOptions = ['start', 'loading', 'success', 'fail'] as const; 

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

@@ -1 +1 @@
-import { action } from '@storybook/addon-actions'; import { computed, ref, watch } from 'vue'; import { isVue2 } 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'; import { BentoActionBarStateOptions, BentoActionBarVariantOptions } from './action-bar.types.ts'; import ActionBarDefault from './__tests__/action-bar-default.vue?raw'; const meta: Meta = { title: 'Action bar', component: BentoActionBar, argTypes: { variant: { options: BentoActionBarVariantOptions, control: { type: 'select', }, }, state: { options: BentoActionBarStateOptions, control: { type: 'select', }, }, // Slots stateLabel: { description: 'Custom text for the action bar state label.', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text' }, }, }, 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, variant: 'default', state: 'start', extraBottomSpacing: false, visibleActions: 4, }; 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" :actions="actions" @close="closeAction" @cancel="cancelAction" @save="saveAction" @retry-action="retryAction" @undo-action="undoAction" @cancel-action="cancelStateAction" :state="state" :show-undo-action="showUndoAction" > <template #stateLabel>{{ slotStateLabel }}</template> </bento-action-bar> </div> `, setup(props) { const args = isVue2 ? props : _args; const state = ref<string>(args.state); const operation = ref<'delete' | 'restore'>('delete'); const timeoutRef = ref<ReturnType<typeof setTimeout> | null>(null); const cancelAction = () => action('cancel')(); const saveAction = () => action('save')(); const toggleActionBar = ref(true); const closeAction = () => { action('close')(); toggleActionBar.value = false; }; const clearTimer = () => { if (timeoutRef.value) { clearTimeout(timeoutRef.value); timeoutRef.value = null; } }; const showSuccessAndReset = () => { state.value = 'success'; timeoutRef.value = setTimeout(() => { state.value = 'start'; operation.value = 'delete'; timeoutRef.value = null; }, 3000); }; const setLoading = (nextOperation: 'delete' | 'restore', callback: () => void) => { clearTimer(); state.value = 'loading'; operation.value = nextOperation; timeoutRef.value = setTimeout(() => { timeoutRef.value = null; callback(); }, 1000); }; const deleteAction = () => { setLoading('delete', () => { state.value = 'fail'; }); }; const retryAction = () => { setLoading('delete', showSuccessAndReset); action('retry-action')(); }; const undoAction = () => { setLoading('restore', showSuccessAndReset); action('undo-action')(); }; const cancelStateAction = () => { state.value = 'start'; operation.value = 'delete'; action('cancel-action')(); }; const actions = DEFAULT_ACTIONS.map(a => (a.title === 'Delete' ? { ...a, event: deleteAction } : a)); const showUndoAction = computed(() => args.showUndoAction && operation.value === 'delete'); const stateLabel = computed(() => { switch (state.value) { case 'loading': return operation.value === 'restore' ? 'Restoring...' : 'Deleting...'; case 'fail': return operation.value === 'restore' ? 'Could not restore the item. Please try again.' : 'Could not delete the item. Please try again.'; case 'success': return operation.value === 'restore' ? 'Item was restored' : 'Item was deleted.'; default: return ''; } }); const slotStateLabel = computed(() => args.stateLabel || stateLabel.value); watch( () => args.state, value => { state.value = value; if (value === 'start') { operation.value = 'delete'; } } ); return { // Values args, state, toggleActionBar, slotStateLabel, actions, showUndoAction, // Events closeAction, cancelAction, saveAction, deleteAction, retryAction, undoAction, cancelStateAction, }; }, }), args: { ...DEFAULT_PROPS, showUndoAction: true, showRetryAction: true, }, parameters: storybookDocsParameter(ActionBarDefault), }; 
+import { action } from '@storybook/addon-actions'; import { computed, ref, watch } from 'vue'; import { isVue2 } 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'; import RefreshIcon from '@adyen/ui-assets-icons-16/vue/refresh'; import ZoomInIcon from '@adyen/ui-assets-icons-16/vue/zoom-in'; import ZoomOutIcon from '@adyen/ui-assets-icons-16/vue/zoom-out'; import { BentoActionBarStateOptions, BentoActionBarVariantOptions } from './action-bar.internal.types'; const ActionBarWithCustomLabel = "<template>\n <bento-action-bar :actions=\"actions\" :item-counter=\"3\" selection-label=\"ready\">\n <template #selectionLabel=\"{ itemCounter, label }\">\n <strong>{{ itemCounter }}</strong> payments {{ label }}\n </template>\n </bento-action-bar>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoActionBar, type BentoButtonActionsList } from '@adyen/bento-vue2';\n\n const actions: BentoButtonActionsList = [\n {\n title: 'Review',\n event: () => undefined,\n },\n ];\n</script>\n"; const ActionBarWithoutLabel = "<template>\n <bento-action-bar :actions=\"actions\" :dismissible=\"false\" :selection-label=\"null\" />\n</template>\n\n<script setup lang=\"ts\">\n import { BentoActionBar, type BentoButtonActionsList } from '@adyen/bento-vue2';\n import RefreshIcon from '@adyen/ui-assets-icons-16/vue/refresh';\n import ZoomInIcon from '@adyen/ui-assets-icons-16/vue/zoom-in';\n import ZoomOutIcon from '@adyen/ui-assets-icons-16/vue/zoom-out';\n\n const actions: BentoButtonActionsList = [\n {\n title: 'Zoom in',\n icon: ZoomInIcon,\n iconOnly: true,\n event: () => undefined,\n },\n {\n title: 'Zoom out',\n icon: ZoomOutIcon,\n iconOnly: true,\n event: () => undefined,\n },\n {\n title: 'Reset',\n icon: RefreshIcon,\n event: () => undefined,\n },\n ];\n</script>\n"; const ActionBarDefault = "<template>\n <div>\n <bento-button @click=\"toggleActionBar = !toggleActionBar\">Toggle action bar</bento-button>\n <bento-action-bar\n v-if=\"toggleActionBar\"\n :actions=\"actions\"\n :state=\"state\"\n :show-undo-action=\"showUndoAction\"\n :item-counter=\"3\"\n show-retry-action\n @close=\"closeAction\"\n @retry-action=\"retryAction\"\n @undo-action=\"undoAction\"\n @cancel-action=\"cancelAction\"\n >\n <template #stateLabel>{{ stateLabel }}</template>\n </bento-action-bar>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n /* eslint-disable no-console */\n import { computed, ref } from 'vue';\n import { BentoActionBar, type BentoActionBarState, BentoButton } from '@adyen/bento-vue2';\n import BinIcon from '@adyen/ui-assets-icons-16/vue/bin';\n import EditIcon from '@adyen/ui-assets-icons-16/vue/edit-1';\n\n const state = ref<BentoActionBarState>('start');\n const operation = ref<'delete' | 'restore'>('delete');\n const timeoutRef = ref<ReturnType<typeof setTimeout> | null>(null);\n const toggleActionBar = ref(true);\n\n const clearTimer = () => {\n if (timeoutRef.value) {\n clearTimeout(timeoutRef.value);\n timeoutRef.value = null;\n }\n };\n\n const showSuccessAndReset = () => {\n state.value = 'success';\n timeoutRef.value = setTimeout(() => {\n state.value = 'start';\n operation.value = 'delete';\n timeoutRef.value = null;\n }, 3000);\n };\n\n const setLoading = (nextOperation: 'delete' | 'restore', callback: () => void) => {\n clearTimer();\n state.value = 'loading';\n operation.value = nextOperation;\n timeoutRef.value = setTimeout(() => {\n timeoutRef.value = null;\n callback();\n }, 1000);\n };\n\n const closeAction = () => {\n toggleActionBar.value = false;\n };\n\n const deleteAction = () => {\n setLoading('delete', () => {\n state.value = 'fail';\n });\n };\n\n const retryAction = () => {\n setLoading('delete', showSuccessAndReset);\n };\n\n const undoAction = () => {\n setLoading('restore', showSuccessAndReset);\n };\n\n const cancelAction = () => {\n state.value = 'start';\n operation.value = 'delete';\n };\n\n const actions = [\n {\n title: 'Assign to...',\n disabled: true,\n event: () => true,\n },\n {\n title: 'Snooze',\n event: () => console.log('snooze'),\n },\n {\n title: 'Edit',\n icon: EditIcon,\n event: () => console.log('edit'),\n },\n {\n title: 'Delete',\n critical: true,\n icon: BinIcon,\n event: deleteAction,\n },\n {\n title: 'Extra option',\n event: () => console.log('extra option'),\n },\n ];\n\n const showUndoAction = computed(() => operation.value === 'delete');\n\n const stateLabel = computed(() => {\n switch (state.value) {\n case 'loading':\n return operation.value === 'restore' ? 'Restoring...' : 'Deleting...';\n case 'fail':\n return operation.value === 'restore'\n ? 'Could not restore the item. Please try again.'\n : 'Could not delete the item. Please try again.';\n case 'success':\n return operation.value === 'restore' ? 'Item was restored' : 'Item was deleted.';\n default:\n return '';\n }\n });\n</script>\n"; const meta: Meta = { title: 'Action bar', component: BentoActionBar, argTypes: { variant: { options: BentoActionBarVariantOptions, control: { type: 'select', }, }, state: { options: BentoActionBarStateOptions, control: { type: 'select', }, }, // Slots selectionLabel: { description: 'Custom content for the complete selection summary in the `default` variant.', table: { type: { summary: 'VNode[]' }, }, control: { disable: true }, }, stateLabel: { description: 'Custom text for the action bar state label.', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text' }, }, }, 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, variant: 'default', state: 'start', extraBottomSpacing: false, visibleActions: 4, }; 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" :actions="actions" @close="closeAction" @cancel="cancelAction" @save="saveAction" @retry-action="retryAction" @undo-action="undoAction" @cancel-action="cancelStateAction" :state="state" :show-undo-action="showUndoAction" > <template #stateLabel>{{ slotStateLabel }}</template> </bento-action-bar> </div> `, setup(props) { const args = isVue2 ? props : _args; const state = ref<string>(args.state); const operation = ref<'delete' | 'restore'>('delete'); const timeoutRef = ref<ReturnType<typeof setTimeout> | null>(null); const cancelAction = () => action('cancel')(); const saveAction = () => action('save')(); const toggleActionBar = ref(true); const closeAction = () => { action('close')(); toggleActionBar.value = false; }; const clearTimer = () => { if (timeoutRef.value) { clearTimeout(timeoutRef.value); timeoutRef.value = null; } }; const showSuccessAndReset = () => { state.value = 'success'; timeoutRef.value = setTimeout(() => { state.value = 'start'; operation.value = 'delete'; timeoutRef.value = null; }, 3000); }; const setLoading = (nextOperation: 'delete' | 'restore', callback: () => void) => { clearTimer(); state.value = 'loading'; operation.value = nextOperation; timeoutRef.value = setTimeout(() => { timeoutRef.value = null; callback(); }, 1000); }; const deleteAction = () => { setLoading('delete', () => { state.value = 'fail'; }); }; const retryAction = () => { setLoading('delete', showSuccessAndReset); action('retry-action')(); }; const undoAction = () => { setLoading('restore', showSuccessAndReset); action('undo-action')(); }; const cancelStateAction = () => { state.value = 'start'; operation.value = 'delete'; action('cancel-action')(); }; const actions = DEFAULT_ACTIONS.map(a => (a.title === 'Delete' ? { ...a, event: deleteAction } : a)); const showUndoAction = computed(() => args.showUndoAction && operation.value === 'delete'); const stateLabel = computed(() => { switch (state.value) { case 'loading': return operation.value === 'restore' ? 'Restoring...' : 'Deleting...'; case 'fail': return operation.value === 'restore' ? 'Could not restore the item. Please try again.' : 'Could not delete the item. Please try again.'; case 'success': return operation.value === 'restore' ? 'Item was restored' : 'Item was deleted.'; default: return ''; } }); const slotStateLabel = computed(() => args.stateLabel || stateLabel.value); watch( () => args.state, value => { state.value = value; if (value === 'start') { operation.value = 'delete'; } } ); return { // Values args, state, toggleActionBar, slotStateLabel, actions, showUndoAction, // Events closeAction, cancelAction, saveAction, deleteAction, retryAction, undoAction, cancelStateAction, }; }, }), args: { ...DEFAULT_PROPS, showUndoAction: true, showRetryAction: true, }, parameters: storybookDocsParameter(ActionBarDefault), }; export const WithoutLabel: Story = { render: (_args, { argTypes }) => ({ components: { BentoActionBar }, props: Object.keys(argTypes), template: ` <div style="height:140px"> <bento-action-bar v-bind="args" :actions="actions" :dismissible="args.dismissible" :selection-label="args.selectionLabel" /> </div> `, setup(props) { const actions = [ { title: 'Zoom in', icon: ZoomInIcon, iconOnly: true, event: () => undefined, }, { title: 'Zoom out', icon: ZoomOutIcon, iconOnly: true, event: () => undefined, }, { title: 'Reset', icon: RefreshIcon, event: () => undefined, }, ]; return { actions, args: isVue2 ? props : _args, }; }, }), args: { ...DEFAULT_PROPS, dismissible: false, selectionLabel: null, }, parameters: storybookDocsParameter(ActionBarWithoutLabel), }; export const WithCustomLabel: Story = { render: (_args, { argTypes }) => ({ components: { BentoActionBar }, props: Object.keys(argTypes), template: ` <div style="height:140px"> <bento-action-bar v-bind="args" :actions="actions" :item-counter="args.itemCounter" :selection-label="args.selectionLabel" > <template #selectionLabel="{ itemCounter, label }"> <strong>{{ itemCounter }}</strong> payments {{ label }} </template> </bento-action-bar> </div> `, setup(props) { const actions = [ { title: 'Review', event: () => undefined, }, ]; return { actions, args: isVue2 ? props : _args, }; }, }), args: { ...DEFAULT_PROPS, selectionLabel: 'ready', }, parameters: storybookDocsParameter(ActionBarWithCustomLabel), }; 

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

@@ -1 +1 @@
-export const BentoActionBarVariantOptions = ['default', 'confirmation'] as const; export const BentoActionBarStateOptions = ['start', 'loading', 'success', 'fail'] as const; export type BentoActionBarVariant = (typeof BentoActionBarVariantOptions)[number]; export type BentoActionBarState = (typeof BentoActionBarStateOptions)[number]; 
+import { type BentoActionBarStateOptions, type BentoActionBarVariantOptions } from './action-bar.internal.types'; export type BentoActionBarVariant = (typeof BentoActionBarVariantOptions)[number]; export type BentoActionBarState = (typeof BentoActionBarStateOptions)[number]; 

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

@@ -1 +1 @@
-<template> <Transition name="b-action-bar__animation" appear> <section class="b-action-bar" :class="conditionalClasses" :aria-label="t('actionBar')" @animationend="onAnimationEnd" > <Transition :name="`b-action-bar__state-animation--${state}`" :mode="stateTransitionMode" @before-leave="onBeforeLeave" @enter="onEnter" @after-enter="onAfterEnter" > <div ref="actionBar" :key="state" class="b-action-bar__container" :class="containerClasses" :style="{ width: containerWidth, maxWidth: containerMaxWidth }" > <div v-if="state === 'start'" class="b-action-bar__container-inner"> <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"> <template v-if="isConfirmationVariant && noItemCounter"> {{ tc('unsavedChanges', 0) }} </template> <template v-else> {{ n(itemCounter) }} {{ isConfirmationVariant ? tc('unsavedChanges', itemCounter) : label }} </template> </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> <div v-else class="b-action-bar__container-inner"> <div class="b-action-bar__state-icon"> <bento-loading-indicator v-if="state === 'loading'" small inverse /> <checkmark-circle-fill v-if="state === 'success'" :aria-hidden="true" /> <cross-circle-fill v-if="state === 'fail'" :aria-hidden="true" /> </div> <bento-typography stronger> <slot name="stateLabel">{{ defaultStateLabel }}</slot> </bento-typography> <div v-if="!hideStateActions" class="b-action-bar__state-actions"> <bento-button v-if="state === 'success' && showUndoAction" variant="tertiary" inverse @click="emit('undo-action')" >{{ t('undo') }}</bento-button > <bento-button v-if="state === 'fail' && showRetryAction" variant="tertiary" inverse @click="emit('retry-action')" >{{ t('retry') }}</bento-button > <bento-button v-if="state === 'fail'" variant="tertiary" inverse @click="emit('cancel-action')" >{{ t('cancel') }}</bento-button > </div> </div> </div> </Transition> </section> </Transition> </template> <script setup lang="ts"> import { computed, nextTick, type PropType, provide, ref, toRefs, type TransitionProps, watch } from 'vue'; import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import { BentoLoadingIndicator } from '@/components/loading-indicator'; import { type BentoActionBarState, 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 CheckmarkCircleFill from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill'; import CrossCircleFill from '@adyen/ui-assets-icons-16/vue/cross-circle-fill'; 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. * When omitted in the `confirmation` variant, a generic "Unsaved changes" label is displayed. */ itemCounter: { type: Number, default: null, }, /** * Label for the selection, e.g. 'selected'/'changed' */ selectionLabel: { type: String, default: null, }, /** * State of the action bar. * @values start, loading, success, fail */ state: { type: String as PropType<BentoActionBarState>, default: 'start', }, /** * Displays the undo action button in `success` state. */ showUndoAction: { type: Boolean, default: false, }, /** * Displays the retry action button in `fail` state. */ showRetryAction: { type: Boolean, default: false, }, /** * 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; /** * Event emitted when the user clicks the cancel button in `confirmation` variant. */ (e: 'cancel'): void; /** * Event emitted when the user clicks the save button in `confirmation` variant. */ (e: 'save'): void; /** * Event emitted when the user clicks the undo button in `success` state. */ (e: 'undo-action'): void; /** * Event emitted when the user clicks the retry button in `fail` state. */ (e: 'retry-action'): void; /** * Event emitted when the user clicks the cancel button in `fail` state. */ (e: 'cancel-action'): void; }>(); const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages }); const label = computed(() => (props.selectionLabel ? props.selectionLabel : t('selected'))); const defaultStateLabel = computed(() => { switch (props.state) { case 'loading': return t('applying'); case 'success': return t('success'); case 'fail': return t('somethingWentWrong'); default: return ''; } }); // Refs const actionBar = ref<HTMLDivElement>(null); const containerMaxWidth = ref<string | null>(null); const containerWidth = ref<string | null>(null); const isShaking = ref(false); const stateTransitionMode = computed( () => (props.state === 'loading' ? 'out-in' : undefined) as TransitionProps['mode'] ); const hideStateActions = computed( () => props.state === 'loading' || (props.state === 'success' && !props.showUndoAction) ); const onBeforeLeave = (el: HTMLElement) => { if (props.state !== 'loading') { return; } containerMaxWidth.value = `${el.offsetWidth}px`; containerWidth.value = '100%'; }; const onEnter = (el: HTMLElement) => { if (props.state !== 'loading') { return; } // Reset styles to get natural width Object.assign(el.style, { width: 'auto', maxWidth: 'none' }); const newWidth = el.offsetWidth; // Reset it back to the original values Object.assign(el.style, { width: '100%', maxWidth: containerMaxWidth.value }); requestAnimationFrame(() => { containerMaxWidth.value = `${newWidth}px`; }); }; const onAfterEnter = () => { containerMaxWidth.value = null; containerWidth.value = null; if (props.state === 'fail') { isShaking.value = true; } }; const onAnimationEnd = (event: AnimationEvent) => { if (event.animationName.startsWith('shake-')) { isShaking.value = false; } }; 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, 'b-action-bar__state-animation--shake': isShaking.value, })); const containerClasses = computed(() => ({ [`b-action-bar__container--${props.state}`]: props.state !== 'start', })); // 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'), }, ]); const noItemCounter = computed(() => { return props.itemCounter == null || props.itemCounter < 1; }); // 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" /> 
+<template> <Transition name="b-action-bar__animation" appear> <section class="b-action-bar" :class="conditionalClasses" :aria-label="t('actionBar')" @animationend="onAnimationEnd" > <Transition :name="`b-action-bar__state-animation--${state}`" :mode="stateTransitionMode" @before-leave="onBeforeLeave" @enter="onEnter" @after-enter="onAfterEnter" > <div ref="actionBar" :key="state" class="b-action-bar__container" :class="containerClasses" :style="{ width: containerWidth, maxWidth: containerMaxWidth }" > <div v-if="state === 'start'" class="b-action-bar__container-inner"> <div v-if="showCloseButton" 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 v-if="showSelectionLabel()" el="span" stronger class="b-action-bar__selection" > <template v-if="isConfirmationVariant && noItemCounter"> {{ tc('unsavedChanges', 0) }} </template> <template v-else> <slot v-if="!isConfirmationVariant && hasSelectionLabelSlot()" name="selectionLabel" :item-counter="itemCounter" :label="label" /> <template v-else> {{ n(itemCounter) }} {{ computedSelectionLabel }} </template> </template> </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> <div v-else class="b-action-bar__container-inner"> <div class="b-action-bar__state-icon"> <bento-loading-indicator v-if="state === 'loading'" small inverse /> <checkmark-circle-fill v-if="state === 'success'" :aria-hidden="true" /> <cross-circle-fill v-if="state === 'fail'" :aria-hidden="true" /> </div> <bento-typography stronger> <slot name="stateLabel">{{ defaultStateLabel }}</slot> </bento-typography> <div v-if="!hideStateActions" class="b-action-bar__state-actions"> <bento-button v-if="state === 'success' && showUndoAction" variant="tertiary" inverse @click="emit('undo-action')" >{{ t('undo') }}</bento-button > <bento-button v-if="state === 'fail' && showRetryAction" variant="tertiary" inverse @click="emit('retry-action')" >{{ t('retry') }}</bento-button > <bento-button v-if="state === 'fail'" variant="tertiary" inverse @click="emit('cancel-action')" >{{ t('cancel') }}</bento-button > </div> </div> </div> </Transition> </section> </Transition> </template> <script setup lang="ts"> import { computed, nextTick, type PropType, provide, ref, toRefs, type TransitionProps, useSlots, watch, } from 'vue'; import { BentoButton, BentoButtonActions, type BentoButtonActionsList } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import { BentoLoadingIndicator } from '@/components/loading-indicator'; import { type BentoActionBarState, 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 CheckmarkCircleFill from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill'; import CrossCircleFill from '@adyen/ui-assets-icons-16/vue/cross-circle-fill'; 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: () => [], }, /** * Determines whether the close button is displayed in the `default` variant. */ dismissible: { type: Boolean, default: true, }, /** * 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. * When omitted in the `confirmation` variant, a generic "Unsaved changes" label is displayed. */ itemCounter: { type: Number, default: null, }, /** * Label for the selection in the `default` variant, e.g. 'selected'/'changed'. * Pass `null` to hide it. In the `confirmation` variant, this prop is ignored. */ selectionLabel: { type: String, default: undefined, }, /** * State of the action bar. * @values start, loading, success, fail */ state: { type: String as PropType<BentoActionBarState>, default: 'start', }, /** * Displays the undo action button in `success` state. */ showUndoAction: { type: Boolean, default: false, }, /** * Displays the retry action button in `fail` state. */ showRetryAction: { type: Boolean, default: false, }, /** * 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; /** * Event emitted when the user clicks the cancel button in `confirmation` variant. */ (e: 'cancel'): void; /** * Event emitted when the user clicks the save button in `confirmation` variant. */ (e: 'save'): void; /** * Event emitted when the user clicks the undo button in `success` state. */ (e: 'undo-action'): void; /** * Event emitted when the user clicks the retry button in `fail` state. */ (e: 'retry-action'): void; /** * Event emitted when the user clicks the cancel button in `fail` state. */ (e: 'cancel-action'): void; }>(); const { t, tc, n } = useI18n<{ message: MessageSchema }>({ messages }); const slots = useSlots(); const hasSelectionLabelSlot = () => Boolean(slots.selectionLabel); const label = computed(() => (props.selectionLabel === undefined ? t('selected') : props.selectionLabel)); const defaultStateLabel = computed(() => { switch (props.state) { case 'loading': return t('applying'); case 'success': return t('success'); case 'fail': return t('somethingWentWrong'); default: return ''; } }); // Refs const actionBar = ref<HTMLDivElement>(null); const containerMaxWidth = ref<string | null>(null); const containerWidth = ref<string | null>(null); const isShaking = ref(false); const stateTransitionMode = computed( () => (props.state === 'loading' ? 'out-in' : undefined) as TransitionProps['mode'] ); const hideStateActions = computed( () => props.state === 'loading' || (props.state === 'success' && !props.showUndoAction) ); const onBeforeLeave = (el: HTMLElement) => { if (props.state !== 'loading') { return; } containerMaxWidth.value = `${el.offsetWidth}px`; containerWidth.value = '100%'; }; const onEnter = (el: HTMLElement) => { if (props.state !== 'loading') { return; } // Reset styles to get natural width Object.assign(el.style, { width: 'auto', maxWidth: 'none' }); const newWidth = el.offsetWidth; // Reset it back to the original values Object.assign(el.style, { width: '100%', maxWidth: containerMaxWidth.value }); requestAnimationFrame(() => { containerMaxWidth.value = `${newWidth}px`; }); }; const onAfterEnter = () => { containerMaxWidth.value = null; containerWidth.value = null; if (props.state === 'fail') { isShaking.value = true; } }; const onAnimationEnd = (event: AnimationEvent) => { if (event.animationName.startsWith('shake-')) { isShaking.value = false; } }; const { extraBottomSpacing, visibleActions } = toRefs(props); const { width } = useWindowSize(); const internalDisplayedActions = ref(null); const internalVisibleActions = ref(null); const isConfirmationVariant = computed(() => props.variant === 'confirmation'); const computedSelectionLabel = computed(() => isConfirmationVariant.value ? tc('unsavedChanges', props.itemCounter) : label.value ); const showCloseButton = computed(() => !isConfirmationVariant.value && props.dismissible !== false); const showSelectionLabel = () => isConfirmationVariant.value || hasSelectionLabelSlot() || props.selectionLabel !== null; 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, 'b-action-bar__state-animation--shake': isShaking.value, })); const containerClasses = computed(() => ({ [`b-action-bar__container--${props.state}`]: props.state !== 'start', })); // 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'), }, ]); const noItemCounter = computed(() => { return props.itemCounter == null || props.itemCounter < 1; }); // 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 }, name: 'bento-action-bar', }; </script> <style lang="scss" scoped src="./action-bar.scss" /> 

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

@@ -1 +1 @@
-import BentoAiTag from './ai-tag.vue'; import AiTagDefault from './__tests__/ai-tag-default.vue?raw'; import { action } from '@storybook/addon-actions'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; const meta: Meta = { title: 'AI tag', component: BentoAiTag, }; export default meta; type Story = StoryObj<typeof BentoAiTag>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoAiTag }, props: Object.keys(argTypes), template: ` <bento-ai-tag v-bind="args" @update:toggled="onToggleAction"/> `, setup(props) { const onToggleAction = (value: boolean) => action('update:toggled')(value); return { // Values args: isVue2 ? props : _args, // Events onToggleAction, }; }, }), args: { title: 'Input fields auto-filled by AI', description: 'Based on your documents uploaded, AI has auto-filled some information for you. You can change that information any time.', influencedValue: '30%', action: { title: 'Learn more', event: () => action('action-click')('Learn more clicked'), }, }, parameters: storybookDocsParameter(AiTagDefault), }; 
+import BentoAiTag from './ai-tag.vue'; const AiTagDefault = "<template>\n <bento-ai-tag\n title=\"Input fields auto-filled by AI\"\n description=\"Based on your documents uploaded, AI has auto-filled some information for you. You can change that information any time.\"\n influenced-value=\"30%\"\n :action=\"learnMore\"\n @update:toggled=\"onToggle\"\n />\n</template>\n\n<script setup lang=\"ts\">\n /* eslint-disable no-console */\n import { BentoAiTag, type BentoButtonActionObject } from '@adyen/bento-vue2';\n\n const learnMore: BentoButtonActionObject = {\n title: 'Learn more',\n event: () => {\n console.log('Learn more clicked');\n },\n };\n\n const onToggle = (isOpen: boolean) => {\n console.log('Popover toggled. Open:', isOpen);\n };\n</script>\n"; import { action } from '@storybook/addon-actions'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; const meta: Meta = { title: 'AI tag', component: BentoAiTag, }; export default meta; type Story = StoryObj<typeof BentoAiTag>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoAiTag }, props: Object.keys(argTypes), template: ` <bento-ai-tag v-bind="args" @update:toggled="onToggleAction"/> `, setup(props) { const onToggleAction = (value: boolean) => action('update:toggled')(value); return { // Values args: isVue2 ? props : _args, // Events onToggleAction, }; }, }), args: { title: 'Input fields auto-filled by AI', description: 'Based on your documents uploaded, AI has auto-filled some information for you. You can change that information any time.', influencedValue: '30%', action: { title: 'Learn more', event: () => action('action-click')('Learn more clicked'), }, }, parameters: storybookDocsParameter(AiTagDefault), }; 

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

@@ -1 +1 @@
-<template> <div ref="aiTagRef" class="b-ai-tag" @keydown.esc="closePopover"> <bento-toggle-button ref="targetElement" :toggled="toggled" :aria-controls="popoverId" variant="secondary" condensed class="b-ai-tag__trigger" @update:toggled="onToggle" > <template #iconLeft> <artificial-intelligence-ai-icon class="b-ai-tag__trigger-icon" :aria-hidden="true" /> </template> {{ t('ai') }} </bento-toggle-button> <bento-popover v-if="targetElement" :id="popoverId" :open="toggled" :target-element="targetElement" :actions="popoverActions" actions-layout="fill-container" :title="t('aiExplained')" trap-all :trap-all-options="{ onDeactivate: closePopover, allowOutsideClick: true }" fixed-positioning overflow-visible @dismiss="closePopover" > <template #headerIcon> <artificial-intelligence-ai-icon class="b-ai-tag__popover-header-icon" :aria-hidden="true" /> </template> <div class="b-ai-tag__popover-content"> <bento-typography v-if="influencedValue" variant="title" medium class="b-ai-tag__influenced-value"> {{ influencedValue }} </bento-typography> <bento-typography variant="title"> {{ title }} </bento-typography> <bento-typography> {{ description }} </bento-typography> </div> </bento-popover> </div> </template> <script setup lang="ts"> import { computed, ref, watch } from 'vue'; import { BentoPopover } from '@/components/popover'; import { BentoToggleButton } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import { useClickOutside } from '@/composables'; import { useI18n } from '@/utils/ts/i18n'; import { generateUid } from '@/core/utils/ts'; import type { BentoButtonActionsList } from '@/components/button/components/button-actions/button-actions.types'; import ArtificialIntelligenceAiIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled'; import type { BentoAiTagProps } from './ai-tag.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<BentoAiTagProps>(), { influencedValue: undefined, toggled: false, action: undefined, }); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const toggled = ref(props.toggled); const aiTagRef = ref<HTMLElement | null>(null); const targetElement = ref<InstanceType<typeof BentoToggleButton> | null>(null); const popoverId = generateUid('b-ai-tag-popover'); watch( () => props.toggled, value => { toggled.value = value; } ); useClickOutside(aiTagRef, () => { closePopover(); }); const popoverActions = computed<BentoButtonActionsList>(() => props.action ? [ { ...props.action, variant: 'secondary', }, ] : undefined ); const emit = defineEmits<{ /** * Triggered when the popover is toggled */ (e: 'update:toggled', toggled: boolean): void; }>(); const onToggle = (value: boolean) => { toggled.value = value; emit('update:toggled', value); }; const closePopover = () => { if (toggled.value) { onToggle(false); } }; </script> <script lang="ts"> /** * The AI tag is a component used to transparently identify content, data, or experiences that have been generated or * enhanced by artificial intelligence. * * @example * import { BentoAiTag } from '@adyen/bento-vue2'; * * export default { * components: { BentoAiTag }, * template: ` * <bento-ai-tag * title="Input fields auto-filled by AI" * description="Based on your documents uploaded, AI has auto-filled some information for you." * /> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./ai-tag.scss" /> 
+<template> <div ref="aiTagRef" class="b-ai-tag" @keydown.esc="closePopover"> <bento-toggle-button ref="targetElement" :toggled="toggled" :aria-controls="popoverId" variant="secondary" condensed class="b-ai-tag__trigger" @update:toggled="onToggle" > <template #iconLeft> <artificial-intelligence-ai-icon class="b-ai-tag__trigger-icon" :aria-hidden="true" /> </template> {{ t('ai') }} </bento-toggle-button> <bento-popover v-if="targetElement" :id="popoverId" :open="toggled" :target-element="targetElement" :actions="popoverActions" actions-layout="fill-container" :title="t('aiExplained')" trap-all :trap-all-options="{ onDeactivate: closePopover, allowOutsideClick: true }" fixed-positioning overflow-visible @dismiss="closePopover" > <template #headerIcon> <artificial-intelligence-ai-icon class="b-ai-tag__popover-header-icon" :aria-hidden="true" /> </template> <div class="b-ai-tag__popover-content"> <bento-typography v-if="influencedValue" variant="title" medium class="b-ai-tag__influenced-value"> {{ influencedValue }} </bento-typography> <bento-typography variant="title"> {{ title }} </bento-typography> <bento-typography> {{ description }} </bento-typography> </div> </bento-popover> </div> </template> <script setup lang="ts"> import { computed, ref, watch } from 'vue'; import { BentoPopover } from '@/components/popover'; import { BentoToggleButton } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import { useClickOutside } from '@/composables'; import { useI18n } from '@/utils/ts/i18n'; import { generateUid } from '@/utils/ts/generate-uid'; import type { BentoButtonActionsList } from '@/components/button/components/button-actions/button-actions.types'; import ArtificialIntelligenceAiIcon from '@adyen/ui-assets-icons-16/vue/artificial-intelligence-ai-filled'; import type { BentoAiTagProps } from './ai-tag.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<BentoAiTagProps>(), { influencedValue: undefined, toggled: false, action: undefined, }); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const toggled = ref(props.toggled); const aiTagRef = ref<HTMLElement | null>(null); const targetElement = ref<InstanceType<typeof BentoToggleButton> | null>(null); const popoverId = generateUid('b-ai-tag-popover'); watch( () => props.toggled, value => { toggled.value = value; } ); useClickOutside(aiTagRef, () => { closePopover(); }); const popoverActions = computed<BentoButtonActionsList>(() => props.action ? [ { ...props.action, variant: 'secondary', }, ] : undefined ); const emit = defineEmits<{ /** * Triggered when the popover is toggled */ (e: 'update:toggled', toggled: boolean): void; }>(); const onToggle = (value: boolean) => { toggled.value = value; emit('update:toggled', value); }; const closePopover = () => { if (toggled.value) { onToggle(false); } }; </script> <script lang="ts"> /** * The AI tag is a component used to transparently identify content, data, or experiences that have been generated or * enhanced by artificial intelligence. * * @example * import { BentoAiTag } from '@adyen/bento-vue2'; * * export default { * components: { BentoAiTag }, * template: ` * <bento-ai-tag * title="Input fields auto-filled by AI" * description="Based on your documents uploaded, AI has auto-filled some information for you." * /> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./ai-tag.scss" /> 

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

@@ -1 +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), }; 
+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'; const AlertDefault = "<template>\n <bento-alert\n close-button\n style=\"width: 100vw; max-width: 700px\"\n type=\"highlight\"\n variant=\"default\"\n @close-alert=\"clickedCloseAction\"\n >\n <template #default>Alert title</template>\n <template #description>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultrices leo massa, at accumsan lorem\n sagittis vehicula. Ut elit orci, finibus id neque quis, cursus posuere metus. Proin sed convallis odio, ut\n porttitor turpis.\n </template>\n </bento-alert>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoAlert } from '@adyen/bento-vue2';\n\n const clickedCloseAction = () => true;\n</script>\n"; const AlertWithActions = "<template>\n <bento-alert\n close-button\n style=\"width: 100vw; max-width: 700px\"\n type=\"highlight\"\n variant=\"default\"\n @close-alert=\"clickedCloseAction\"\n >\n <template #default>Alert title</template>\n <template #description>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent ultrices leo massa, at accumsan lorem\n sagittis vehicula. Ut elit orci, finibus id neque quis, cursus posuere metus. Proin sed convallis odio, ut\n porttitor turpis.\n </template>\n <template #actions>\n <bento-button variant=\"tertiary\" @click=\"clickedAction\">Cancel</bento-button>\n <bento-button variant=\"tertiary\" @click=\"clickedAction\">Confirm</bento-button>\n </template>\n </bento-alert>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoAlert, BentoButton } from '@adyen/bento-vue2';\n\n const clickedCloseAction = () => true;\n const clickedAction = () => true;\n</script>\n"; 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', }; 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(AlertDefault), }; 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(AlertWithActions), }; 

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

@@ -1 +1 @@
-/** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoAlertVariant { DEFAULT = 'default', TIP = 'tip', } /** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoAlertTypeOption { WARNING = 'warning', CRITICAL = 'critical', HIGHLIGHT = 'highlight', SUCCESS = 'success', } /** * @deprecated Since v2.0.0. Use `@close-alert` instead. */ export enum BentoAlertEvent { CLOSE_ALERT = 'close-alert', } 
+/** * @deprecated Since v3.0.0. Use string literal instead. */ export enum BentoAlertVariant { DEFAULT = 'default', TIP = 'tip', } /** * @deprecated Since v3.0.0. Use string literal instead. */ export enum BentoAlertTypeOption { WARNING = 'warning', CRITICAL = 'critical', HIGHLIGHT = 'highlight', SUCCESS = 'success', } /** * @deprecated Since v3.0.0. Use `@close-alert` instead. */ export enum BentoAlertEvent { CLOSE_ALERT = 'close-alert', } 

package/dist/assets/components/anchor-scroller/anchor-scroller.stories.ts

@@ -1 +1 @@
-import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import { computed, ref } from 'vue'; import BentoAnchorScroller from './anchor-scroller.vue'; import AnchorScrollerDefaultExample from './__tests__/anchor-scroller-default-example.vue?raw'; import BentoTypography from '../typography/typography.vue'; import { action } from '@storybook/addon-actions'; const meta: Meta = { title: 'Anchor Scroller', component: BentoAnchorScroller, argTypes: { // Slots default: { description: 'Content to be displayed. This enables the anchor scroller to be sticky when scrolling.', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, // Props activeIndex: { table: { type: { summary: 'number' }, }, }, items: { table: { type: { summary: "BentoAnchorScrollerProps['items']" }, }, }, // Events 'update:active-index': { table: { type: { summary: '(index: number) => void' }, }, }, }, }; export default meta; type Story = StoryObj<typeof BentoAnchorScroller>; const ITEMS = [ { title: 'Overview', elementRef: null }, { title: 'Disabled', elementRef: null, disabled: true }, { title: 'Configuration', elementRef: null }, { title: 'Usage', elementRef: null }, ]; export const Default: Story = { render: args => ({ components: { BentoAnchorScroller, BentoTypography }, template: ` <bento-anchor-scroller v-bind="args" :items="computedItems" @update:active-index="updateActiveIndex" > <section ref="section1" style="height: 500px; border: 1px dashed #ccc; margin-bottom: 32px; padding: 24px; border-radius: 8px" > <bento-typography el="h2" variant="title">Overview</bento-typography> <bento-typography>This is the content for the first section.</bento-typography> </section> <section ref="section2" style="height: 400px; border: 1px dashed #ccc; margin-bottom: 32px; padding: 24px; border-radius: 8px" > <bento-typography el="h2" variant="title">Configuration</bento-typography> <bento-typography>This section is shorter.</bento-typography> </section> <section ref="section3" style="height: 600px; border: 1px dashed #ccc; margin-bottom: 32px; padding: 24px; border-radius: 8px" > <bento-typography el="h2" variant="title">Usage</bento-typography> <bento-typography>This is a tall section to demonstrate scrolling.</bento-typography> </section> </bento-anchor-scroller> `, setup() { const section1 = ref<HTMLElement | null>(null); const section2 = ref<HTMLElement | null>(null); const section3 = ref<HTMLElement | null>(null); const sectionDisabled = ref<HTMLElement | null>(null); const sectionRefs = [section1, sectionDisabled, section2, section3]; const computedItems = computed(() => { return (args.items || []).map((item, index) => ({ ...item, // Keep whatever title/disabled state is currently in the Storybook UI elementRef: sectionRefs[index]?.value || null, // Inject the real DOM node! })); }); const updateActiveIndex = value => action('update:active-index')(value); return { args, computedItems, section1, section2, section3, updateActiveIndex }; }, }), args: { items: ITEMS, activeIndex: 0, }, parameters: storybookDocsParameter(AnchorScrollerDefaultExample), }; 
+import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import { computed, ref } from 'vue'; import BentoAnchorScroller from './anchor-scroller.vue'; const AnchorScrollerDefaultExample = "<template>\n <bento-anchor-scroller :items=\"items\" :active-index=\"activeIndex\" @update:active-index=\"updateActiveIndex\">\n <section\n ref=\"section1\"\n style=\"height: 500px; border: 1px dashed #ccc; margin-bottom: 32px; padding: 24px; border-radius: 8px\"\n >\n <bento-typography el=\"h2\" variant=\"title\">Overview</bento-typography>\n <bento-typography>This is the content for the first section.</bento-typography>\n </section>\n\n <section\n ref=\"section2\"\n style=\"height: 400px; border: 1px dashed #ccc; margin-bottom: 32px; padding: 24px; border-radius: 8px\"\n >\n <bento-typography el=\"h2\" variant=\"title\">Configuration</bento-typography>\n <bento-typography>This section is shorter.</bento-typography>\n </section>\n\n <section\n ref=\"section3\"\n style=\"height: 600px; border: 1px dashed #ccc; margin-bottom: 32px; padding: 24px; border-radius: 8px\"\n >\n <bento-typography el=\"h2\" variant=\"title\">Usage</bento-typography>\n <bento-typography>This is a tall section to demonstrate scrolling.</bento-typography>\n </section>\n </bento-anchor-scroller>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoAnchorScroller, BentoTypography } from '@adyen/bento-vue2';\n\n const section1 = ref<HTMLElement | null>(null);\n const section2 = ref<HTMLElement | null>(null);\n const section3 = ref<HTMLElement | null>(null);\n const sectionDisabled = ref<HTMLElement | null>(null);\n\n const activeIndex = ref(0);\n\n const items = [\n { title: 'Overview', elementRef: section1 },\n { title: 'Disabled', elementRef: sectionDisabled, disabled: true },\n { title: 'Configuration', elementRef: section2 },\n { title: 'Usage', elementRef: section3 },\n ];\n\n const updateActiveIndex = (index: number) => (activeIndex.value = index);\n</script>\n"; import BentoTypography from '../typography/typography.vue'; import { action } from '@storybook/addon-actions'; const meta: Meta = { title: 'Anchor Scroller', component: BentoAnchorScroller, argTypes: { // Slots default: { description: 'Content to be displayed. This enables the anchor scroller to be sticky when scrolling.', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, // Props activeIndex: { table: { type: { summary: 'number' }, }, }, items: { table: { type: { summary: "BentoAnchorScrollerProps['items']" }, }, }, // Events 'update:active-index': { table: { type: { summary: '(index: number) => void' }, }, }, }, }; export default meta; type Story = StoryObj<typeof BentoAnchorScroller>; const ITEMS = [ { title: 'Overview', elementRef: null }, { title: 'Disabled', elementRef: null, disabled: true }, { title: 'Configuration', elementRef: null }, { title: 'Usage', elementRef: null }, ]; export const Default: Story = { render: args => ({ components: { BentoAnchorScroller, BentoTypography }, template: ` <bento-anchor-scroller v-bind="args" :items="computedItems" @update:active-index="updateActiveIndex" > <section ref="section1" style="height: 500px; border: 1px dashed #ccc; margin-bottom: 32px; padding: 24px; border-radius: 8px" > <bento-typography el="h2" variant="title">Overview</bento-typography> <bento-typography>This is the content for the first section.</bento-typography> </section> <section ref="section2" style="height: 400px; border: 1px dashed #ccc; margin-bottom: 32px; padding: 24px; border-radius: 8px" > <bento-typography el="h2" variant="title">Configuration</bento-typography> <bento-typography>This section is shorter.</bento-typography> </section> <section ref="section3" style="height: 600px; border: 1px dashed #ccc; margin-bottom: 32px; padding: 24px; border-radius: 8px" > <bento-typography el="h2" variant="title">Usage</bento-typography> <bento-typography>This is a tall section to demonstrate scrolling.</bento-typography> </section> </bento-anchor-scroller> `, setup() { const section1 = ref<HTMLElement | null>(null); const section2 = ref<HTMLElement | null>(null); const section3 = ref<HTMLElement | null>(null); const sectionDisabled = ref<HTMLElement | null>(null); const sectionRefs = [section1, sectionDisabled, section2, section3]; const computedItems = computed(() => { return (args.items || []).map((item, index) => ({ ...item, // Keep whatever title/disabled state is currently in the Storybook UI elementRef: sectionRefs[index]?.value || null, // Inject the real DOM node! })); }); const updateActiveIndex = value => action('update:active-index')(value); return { args, computedItems, section1, section2, section3, updateActiveIndex }; }, }), args: { items: ITEMS, activeIndex: 0, }, parameters: storybookDocsParameter(AnchorScrollerDefaultExample), }; 

package/dist/assets/components/anchor-scroller/anchor-scroller.vue

@@ -1 +1 @@
-<template> <div v-if="computedItems.length" class="b-anchor-scroller"> <nav ref="navigationRef" class="b-anchor-scroller__navigation" :class="navigationConditionalClasses" :aria-labelledby="navLabelId" > <fixed-scroller condensed centered> <div class="b-anchor-scroller__navigation-panel"> <bento-typography :id="navLabelId" el="span" class="b-anchor-scroller__navigation-panel-label" stronger > {{ t('jumpTo') }} </bento-typography> <anchor-scroller-list :items="computedItems" :active-index="currentActiveIndex" :scroll-offset="bottom" /> </div> </fixed-scroller> </nav> <slot /> </div> </template> <script setup lang="ts"> import { computed, ref, toRef, watch } from 'vue'; import { useElementBounding } from '@vueuse/core'; import BentoTypography from '@/components/typography/typography.vue'; import { FixedScroller } from '@/internal'; import { type BentoAnchorScrollerItem, type BentoAnchorScrollerProps } from './anchor-scroller.types'; import { AnchorScrollerList } from './components/anchor-scroller-list'; import { useI18n } from '@/utils/ts/i18n'; import { generateUid } from '@/core/utils/ts'; import { unrefElement } from '@/directives/click-outside/utils'; import messages from './messages.json'; import { useScrollSpy } from '@/composables/use-scroll-spy'; import { printDevelopmentWarning } from '@/utils/ts/print-development-warning'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<BentoAnchorScrollerProps>(), { activeIndex: undefined, }); const emit = defineEmits<{ /** * Emits update event when the active index is changed */ (e: 'update:active-index', value: number): void; }>(); const navigationRef = ref(null); const computedItems = computed<Array<BentoAnchorScrollerItem>>(() => props.items.map(item => ({ ...item }))); // Skip and cache only items that are enabled const enabledItems = computed(() => props.items .map((item, originalIndex) => ({ element: unrefElement(item.elementRef), originalIndex, disabled: item.disabled, })) .filter( (item): item is { element: Element; originalIndex: number; disabled: boolean } => !item.disabled && !!item.element ) ); const { top, bottom } = useElementBounding(navigationRef); // Extract strictly the elements for the ScrollSpy to watch const scrollToTargets = computed(() => enabledItems.value.map(c => c.element)); const navigationConditionalClasses = computed(() => ({ 'b-anchor-scroller__navigation--pinned': top.value <= 1, })); const { activeIndex: scrollSpyActiveIndex } = useScrollSpy(scrollToTargets, { default: toRef(props, 'activeIndex'), debounce: 200, }); const currentActiveIndex = computed(() => { const candidate = enabledItems.value[scrollSpyActiveIndex.value]; return candidate ? candidate.originalIndex : 0; }); watch(currentActiveIndex, val => { if (Number.isFinite(val)) { emit('update:active-index', val); } }); watch( () => props.activeIndex, val => { if (Number.isFinite(val) && computedItems.value[val].disabled) { printDevelopmentWarning(`[bento-anchor-scroller] activeIndex should not be a disabled item`); } } ); const navLabelId = generateUid('bento-anchor-scroller-label'); </script> <script lang="ts"> /** * A navigation component that tracks page scroll and allows jumping to sections. * * @example * import { BentoAnchorScroller } from '@adyen/bento-vue2'; * import { ref } from 'vue'; * * export default { * components: { BentoAnchorScroller }, * template: ` * <bento-anchor-scroller :items="items"> * <section ref="section1">Section 1</section> * <section ref="section2">Section 2</section> * </bento-anchor-scroller> * `, * setup() { * const section1 = ref(null); * const section2 = ref(null); * const items = ref([ * { title: 'Section 1', elementRef: section1 }, * { title: 'Section 2', elementRef: section2 }, * ]); * return { * items, * section1, * section2, * } * } * } */ export default { i18n: { messages }, name: 'bento-anchor-scroller', }; </script> <style lang="scss" scoped src="./anchor-scroller.scss" /> 
+<template> <div v-if="computedItems.length" class="b-anchor-scroller"> <nav ref="navigationRef" class="b-anchor-scroller__navigation" :class="navigationConditionalClasses" :aria-labelledby="navLabelId" > <fixed-scroller condensed centered> <div class="b-anchor-scroller__navigation-panel"> <bento-typography :id="navLabelId" el="span" class="b-anchor-scroller__navigation-panel-label" stronger > {{ t('jumpTo') }} </bento-typography> <anchor-scroller-list :items="computedItems" :active-index="currentActiveIndex" :scroll-offset="bottom" /> </div> </fixed-scroller> </nav> <slot /> </div> </template> <script setup lang="ts"> import { computed, ref, toRef, watch } from 'vue'; import { useElementBounding } from '@vueuse/core'; import BentoTypography from '@/components/typography/typography.vue'; import { FixedScroller } from '@/internal'; import { type BentoAnchorScrollerItem, type BentoAnchorScrollerProps } from './anchor-scroller.types'; import { AnchorScrollerList } from './components/anchor-scroller-list'; import { useI18n } from '@/utils/ts/i18n'; import { generateUid } from '@/utils/ts/generate-uid'; import { unrefElement } from '@/directives/click-outside/utils'; import messages from './messages.json'; import { useScrollSpy } from '@/composables/use-scroll-spy'; import { printDevelopmentWarning } from '@/utils/ts/print-development-warning'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<BentoAnchorScrollerProps>(), { activeIndex: undefined, }); const emit = defineEmits<{ /** * Emits update event when the active index is changed */ (e: 'update:active-index', value: number): void; }>(); const navigationRef = ref(null); const computedItems = computed<Array<BentoAnchorScrollerItem>>(() => props.items.map(item => ({ ...item }))); // Skip and cache only items that are enabled const enabledItems = computed(() => props.items .map((item, originalIndex) => ({ element: unrefElement(item.elementRef), originalIndex, disabled: item.disabled, })) .filter( (item): item is { element: Element; originalIndex: number; disabled: boolean } => !item.disabled && !!item.element ) ); const { top, bottom } = useElementBounding(navigationRef); // Extract strictly the elements for the ScrollSpy to watch const scrollToTargets = computed(() => enabledItems.value.map(c => c.element)); const navigationConditionalClasses = computed(() => ({ 'b-anchor-scroller__navigation--pinned': top.value <= 1, })); const { activeIndex: scrollSpyActiveIndex } = useScrollSpy(scrollToTargets, { default: toRef(props, 'activeIndex'), debounce: 200, }); const currentActiveIndex = computed(() => { const candidate = enabledItems.value[scrollSpyActiveIndex.value]; return candidate ? candidate.originalIndex : 0; }); watch(currentActiveIndex, val => { if (Number.isFinite(val)) { emit('update:active-index', val); } }); watch( () => props.activeIndex, val => { if (Number.isFinite(val) && computedItems.value[val].disabled) { printDevelopmentWarning(`[bento-anchor-scroller] activeIndex should not be a disabled item`); } } ); const navLabelId = generateUid('bento-anchor-scroller-label'); </script> <script lang="ts"> /** * A navigation component that tracks page scroll and allows jumping to sections. * * @example * import { BentoAnchorScroller } from '@adyen/bento-vue2'; * import { ref } from 'vue'; * * export default { * components: { BentoAnchorScroller }, * template: ` * <bento-anchor-scroller :items="items"> * <section ref="section1">Section 1</section> * <section ref="section2">Section 2</section> * </bento-anchor-scroller> * `, * setup() { * const section1 = ref(null); * const section2 = ref(null); * const items = ref([ * { title: 'Section 1', elementRef: section1 }, * { title: 'Section 2', elementRef: section2 }, * ]); * return { * items, * section1, * section2, * } * } * } */ export default { i18n: { messages }, name: 'bento-anchor-scroller', }; </script> <style lang="scss" scoped src="./anchor-scroller.scss" /> 

package/dist/assets/components/avatar/avatar.internal.types.ts

@@ -0,0 +1 @@
+export const BentoAvatarSizeOptions = ['small', 'medium', 'large', 'xlarge'] as const; 

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

@@ -1 +1 @@
-import { type StoryObj } from '@storybook/vue'; import BentoAvatar from './avatar.vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import { BentoAvatarSizeOptions } from './avatar.types'; 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', }, }, size: { options: BentoAvatarSizeOptions, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoAvatar>; 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: 'John', iconOnly: false, size: 'small', }, parameters: storybookDocsParameter(defaultCode), }; 
+import { type StoryObj } from '@storybook/vue'; import BentoAvatar from './avatar.vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import { BentoAvatarSizeOptions } from './avatar.internal.types'; const AvatarDefault = "<template>\n <bento-avatar username=\"John\" />\n</template>\n\n<script setup lang=\"ts\">\n import { BentoAvatar } from '@adyen/bento-vue2';\n</script>\n"; 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', }, }, size: { options: BentoAvatarSizeOptions, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoAvatar>; 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: 'John', iconOnly: false, size: 'small', }, parameters: storybookDocsParameter(AvatarDefault), }; 

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

@@ -1 +1 @@
-/** * Public */ export type BentoAvatarSize = (typeof BentoAvatarSizeOptions)[number]; /** * Private */ export const BentoAvatarSizeOptions = ['small', 'medium', 'large', 'xlarge'] as const; 
+import type { BentoAvatarSizeOptions } from './avatar.internal.types'; export type BentoAvatarSize = (typeof BentoAvatarSizeOptions)[number]; 

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

@@ -24,8 +24,8 @@ Here are some examples:
 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 .
+- Putting any elements other than icon components (from the `@adyen/ui-assets-icons-16` package) in the `iconLeft` or
+  `iconRight` slots.
 
 ## Variations
 
@@ -72,7 +72,8 @@ Critical buttons have same variations as the regular default buttons except that
     <Story of={ButtonStories.WithIcon} />
 </Canvas>
 
-Please use the @adyen/ui-assets-icons-16 NPM package for all icons.
+> **Icon requirement:** Only components from `@adyen/ui-assets-icons-16` are allowed in icon props and icon slots. Icon
+> fonts, custom SVGs, and external icon libraries are not supported.
 
 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.

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

@@ -1 +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), }; 
+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 ButtonDefault = "<template>\n <bento-button @click=\"clickedButtonAction\">Button</bento-button>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoButton } from '@adyen/bento-vue2';\n\n const clickedButtonAction = () => true;\n</script>\n"; const ButtonLink = "<template>\n <bento-button :link=\"{ to: '/' }\">Button</bento-button>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoButton } from '@adyen/bento-vue2';\n</script>\n"; const ButtonOnlyIcon = "<template>\n <bento-button @click=\"clickedButtonAction\">\n <template #iconLeft>\n <check-mark svg-title=\"check item\" />\n </template>\n </bento-button>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoButton } from '@adyen/bento-vue2';\n import CheckMark from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n\n const clickedButtonAction = () => true;\n</script>\n"; const ButtonWithIcon = "<template>\n <bento-button @click=\"clickedButtonAction\">\n <template #iconLeft>\n <check-mark svg-title=\"checked\" />\n </template>\n Button\n <template #iconRight>\n <check-mark svg-title=\"checked\" />\n </template>\n </bento-button>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoButton } from '@adyen/bento-vue2';\n import CheckMark from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill';\n\n const clickedButtonAction = () => true;\n</script>\n"; 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, }; 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(ButtonDefault), }; 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, }; }, }), }; export const WithIcon = { ...ButtonWithIconTemplate, args: DEFAULT_BUTTON_PROPS, parameters: storybookDocsParameter(ButtonWithIcon), }; 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 } }, }, parameters: storybookDocsParameter(ButtonOnlyIcon), }; 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(ButtonLink), }; 

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

@@ -1 +1 @@
-/** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoButtonVariant { PRIMARY = 'primary', SECONDARY = 'secondary', TERTIARY = 'tertiary', TERTIARY_WITH_BACKGROUND = 'tertiary-with-background', } export enum BentoButtonPropClass { CONDENSED = 'condensed', DESTRUCTIVE = 'critical', DISABLED = 'disabled', ICON_ONLY = 'icon-only', INVERSE = 'inverse', } export interface BentoButtonProps { condensed?: boolean; critical?: boolean; disabled?: boolean; inverse?: boolean; variant?: BentoButtonVariant | `${BentoButtonVariant}`; type?: string; link?: object; } 
+/** * @deprecated Since v3.0.0. Use string literal instead. */ export enum BentoButtonVariant { PRIMARY = 'primary', SECONDARY = 'secondary', TERTIARY = 'tertiary', TERTIARY_WITH_BACKGROUND = 'tertiary-with-background', } export enum BentoButtonPropClass { CONDENSED = 'condensed', DESTRUCTIVE = 'critical', DISABLED = 'disabled', ICON_ONLY = 'icon-only', INVERSE = 'inverse', } export interface BentoButtonProps { condensed?: boolean; critical?: boolean; disabled?: boolean; inverse?: boolean; variant?: BentoButtonVariant | `${BentoButtonVariant}`; type?: string; link?: object; } 

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

@@ -1 +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), }; 
+import BentoAiButton from './ai-button.vue'; const BentoAiButtonDefault = "<template>\n <bento-ai-button @click=\"onClick\">Generate with AI</bento-ai-button>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoAiButton } from '@adyen/bento-vue2';\n\n const onClick = () => true;\n</script>\n"; 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), };