@adyen/bento-mcp 0.0.0 → 0.1.0

package/dist/assets/components/summary-grid/components/summary-grid-item-custom/summary-grid-item-custom.stories.ts

@@ -0,0 +1 @@
+import { storybookDocsParameter } from '@/utils/ts/storybook'; import { BentoCountry, BentoCountryCode } from '@/components/country'; import BentoSummaryGridItemCustom from './summary-grid-item-custom.vue'; import { type Meta, type StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import { action } from '@storybook/addon-actions'; const meta: Meta = { title: 'Summary Grid/Summary Grid Item Custom', component: BentoSummaryGridItemCustom, }; export default meta; type Story = StoryObj<typeof BentoSummaryGridItemCustom>; const SUMMARY_BAR_ITEM_TITLE = 'Item title'; const SUMMARY_BAR_INFO_ICON_TOOLTIP = 'Text for icon tooltip'; const SUMMARY_BAR_ITEM_DEFAULT_PROPS = { title: SUMMARY_BAR_ITEM_TITLE, }; const defaultCode = ` <bento-summary-grid-item-custom :title="titleVariable"> Item content bento-summary-grid-item-custom> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoSummaryGridItemCustom, BentoCountry }, props: Object.keys(argTypes), template: ` <bento-summary-grid-item-custom v-bind="args" class="b-summary-grid-item-story" @copy-click="copyClicked" @info-icon-mouseenter="infoIconMouseEnter" > <bento-country code="${BentoCountryCode.NL}" /> </bento-summary-grid-item-custom> `, setup(props) { const copyClicked = (event: PointerEvent) => action('copy-click')(event); const infoIconMouseEnter = (event: PointerEvent) => action('info-icon-mouseenter')(event); return { args: isVue2 ? props : _args, copyClicked, infoIconMouseEnter, }; }, }), args: { ...SUMMARY_BAR_ITEM_DEFAULT_PROPS, }, parameters: storybookDocsParameter(defaultCode), }; const withIconsCode = ` <bento-summary-grid-item-custom :title="titleVariable" :copy="textToCopy" info-icon-tooltip-text="tooltip text" @copy-click="copyClicked" @info-icon-mouseenter="infoIconMouseEnter" > <bento-country code="${BentoCountryCode.NL}" /> </bento-summary-grid-item-custom> `; export const WithIcons: Story = { render: Default.render, args: { ...SUMMARY_BAR_ITEM_DEFAULT_PROPS, infoIconTooltipText: SUMMARY_BAR_INFO_ICON_TOOLTIP, copy: 'copy this', }, parameters: storybookDocsParameter(withIconsCode), }; const FitContentCode = ` <bento-summary-grid-item-custom :title="titleVariable" :fit-content="true"> Item content bento-summary-grid-item-custom> `; export const FitContent: Story = { render: Default.render, args: { ...SUMMARY_BAR_ITEM_DEFAULT_PROPS, infoIconTooltipText: SUMMARY_BAR_INFO_ICON_TOOLTIP, copyIcon: true, fitContent: true, }, parameters: storybookDocsParameter(FitContentCode), }; const withUnderlineCode = ` <bento-summary-grid-item-custom :title="titleVariable"> <template #dashed-underline> <strong>Underline</strong> <em>popover</em> content </template> Item content <bento-summary-grid-item-custom> `; export const WithDashedUnderline: Story = { render: (_args, { argTypes }) => ({ components: { BentoSummaryGridItemCustom }, props: Object.keys(argTypes), template: ` <bento-summary-grid-item-custom v-bind="args" class="b-summary-grid-item-story" > <template #dashed-underline> <strong>Underline</strong> <em>popover</em> content </template> Item content </bento-summary-grid-item-custom> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { ...SUMMARY_BAR_ITEM_DEFAULT_PROPS, }, parameters: storybookDocsParameter(withUnderlineCode), }; 

package/dist/assets/components/summary-grid/components/summary-grid-item-custom/summary-grid-item-custom.vue

@@ -0,0 +1 @@
+<template> <summary-grid-item :title="title" :info-icon-tooltip-text="infoIconTooltipText" :copy="copy" :fit-content="fitContent" :underline-popover-size="underlinePopoverSize" :underline-tooltip-text="underlineTooltipText" @copy-click="$emit('copy-click', $event)" @info-icon-mouseenter="$emit('info-icon-mouseenter', $event)" > <template v-if="hasSlot('dashed-underline')" #dashed-underline> <slot name="dashed-underline" /> </template> <slot /> </summary-grid-item> </template> <script setup lang="ts"> import { useSlots } from 'vue'; import { SummaryGridItem } from '../summary-grid-item'; import { useHasSlot } from '@/composables'; import type { BentoSummaryGridItemCustomProps } from './summary-grid-item-custom.types'; defineEmits<{ /** * Emitted when the copy button is clicked. */ (e: 'copy-click', event: MouseEvent): void; /** * Emitted when the mouse pointer enters the info icon component. */ (e: 'info-icon-mouseenter', event: MouseEvent): void; }>(); withDefaults(defineProps<BentoSummaryGridItemCustomProps>(), { copy: undefined, infoIconTooltipText: null, fitContent: false, underlinePopoverSize: 'fit-content', underlineTooltipText: null, }); const slots = useSlots(); const hasSlot = useHasSlot(slots); </script> <script lang="ts"> /** * A summary bar item is a piece of information to be displayed in `bento-summary-bar` component * * @example * import { SummaryBarItem } from '@adyen/bento-vue2'; * * export default { * components: { SummaryBarItem }, * template: ` * <summary-grid-item :title="textVariable"> * Content of the item * </summary-grid-item> * ` * } */ export default {}; </script> 

package/dist/assets/components/summary-grid/components/summary-grid-item-numeric/summary-grid-item-numeric.stories.ts

@@ -0,0 +1 @@
+import { type Meta, type StoryObj } from '@storybook/vue'; import { BentoSummaryGridItemSize, BentoSummaryGridItemTrendDirection } from '../../summary-grid.types'; import BentoSummaryGridItemNumeric from './summary-grid-item-numeric.vue'; import { isVue2 } from 'vue-demi'; import { action } from '@storybook/addon-actions'; const meta: Meta = { title: 'Summary Grid/Summary Grid Item/Summary Grid Item Numeric', component: BentoSummaryGridItemNumeric, argTypes: { size: { options: Object.values(BentoSummaryGridItemSize), mapping: BentoSummaryGridItemSize, control: { type: 'select', }, }, trendDirection: { options: Object.values(BentoSummaryGridItemTrendDirection), mapping: BentoSummaryGridItemTrendDirection, control: { type: 'select', }, }, secondaryTrendDirection: { options: Object.values(BentoSummaryGridItemTrendDirection), mapping: BentoSummaryGridItemTrendDirection, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoSummaryGridItemNumeric>; const SUMMARY_BAR_ITEM_TITLE = 'Summary grid item numeric'; const SUMMARY_BAR_ITEM_LABEL = '123'; const SUMMARY_BAR_ITEM_SECONDARY_METRIC = '345'; const SUMMARY_BAR_INFO_ICON_TOOLTIP = 'Text for icon tooltip'; const SUMMARY_BAR_ITEM_TREND = '+12%'; const SUMMARY_BAR_ITEM_SECONDARY_TREND = '-12%'; const SUMMARY_BAR_ITEM_DEFAULT_PROPS = { title: SUMMARY_BAR_ITEM_TITLE, label: SUMMARY_BAR_ITEM_LABEL, size: 'small', infoIconTooltipText: SUMMARY_BAR_INFO_ICON_TOOLTIP, copy: 'copy this', trend: SUMMARY_BAR_ITEM_TREND, }; const SUMMARY_BAR_ITEM_WITH_SECONDARY_METRIC_PROPS = { ...SUMMARY_BAR_ITEM_DEFAULT_PROPS, secondaryMetric: SUMMARY_BAR_ITEM_SECONDARY_METRIC, secondaryTrend: SUMMARY_BAR_ITEM_SECONDARY_TREND, secondaryTrendDirection: 'negative', }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoSummaryGridItemNumeric }, props: Object.keys(argTypes), template: ` <bento-summary-grid-item-numeric v-bind="args" @copy-click="copyClicked" @info-icon-mouseenter="infoIconMouseEnter" /> `, setup(props) { const copyClicked = (event: PointerEvent) => action('copy-click')(event); const infoIconMouseEnter = (event: PointerEvent) => action('info-icon-mouseenter')(event); return { args: isVue2 ? props : _args, copyClicked, infoIconMouseEnter, }; }, }), args: { ...SUMMARY_BAR_ITEM_DEFAULT_PROPS, }, }; export const WithSecondaryMetric: Story = { render: (_args, { argTypes }) => ({ components: { BentoSummaryGridItemNumeric }, props: Object.keys(argTypes), template: `<bento-summary-grid-item-numeric v-bind="args"/>`, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { ...SUMMARY_BAR_ITEM_WITH_SECONDARY_METRIC_PROPS, }, }; 

package/dist/assets/components/summary-grid/components/summary-grid-item-numeric/summary-grid-item-numeric.vue

@@ -0,0 +1 @@
+<template> <summary-grid-item item-type="numeric" :info-icon-tooltip-text="infoIconTooltipText" :title="title" :copy="copy" :fit-content="fitContent" :size="size" :trend="trend" :trend-direction="trendDirection" :secondary-trend="secondaryTrend" :secondary-trend-direction="secondaryTrendDirection" :underline-popover-size="underlinePopoverSize" :underline-tooltip-text="underlineTooltipText" class="b-summary-grid-item-numeric" @copy-click="$emit('copy-click', $event)" @info-icon-mouseenter="$emit('info-icon-mouseenter', $event)" > <template v-if="hasSlot('dashed-underline')" #dashed-underline> <slot name="dashed-underline" /> </template> {{ label }} <template v-if="secondaryMetric" #secondary> {{ secondaryMetric }} </template> </summary-grid-item> </template> <script setup lang="ts"> import { useSlots } from 'vue'; import { SummaryGridItem } from '../summary-grid-item'; import { useHasSlot } from '@/composables'; import type { BentoSummaryGridItemNumericProps } from './summary-grid-item-numeric.types'; defineEmits<{ /** * Emitted when the copy button is clicked. */ (e: 'copy-click', event: MouseEvent): void; /** * Emitted when the mouse pointer enters the info icon component. */ (e: 'info-icon-mouseenter', event: MouseEvent): void; }>(); withDefaults(defineProps<BentoSummaryGridItemNumericProps>(), { copy: undefined, fitContent: false, infoIconTooltipText: null, secondaryMetric: null, secondaryTrend: null, secondaryTrendDirection: 'positive', size: 'small', trend: null, trendDirection: 'positive', underlinePopoverSize: 'fit-content', underlineTooltipText: null, }); const slots = useSlots(); const hasSlot = useHasSlot(slots); </script> <script lang="ts"> /** * Summary grid item component used to display any numeric information * * @example * import { BentoSummaryGridItemNumeric } from '@adyen/bento-vue2'; * * export default { * components: { BentoSummaryGridItemNumeric }, * template: ` * <bento-summary-grid-item-numeric * title="Your title" * label="123" * info-icon-tooltip-text="Your tooltip text here will be toggled by the info icon" * trend="+12%" * trend-direction="neutral" * size="medium" * /> * ` * } */ export default {}; </script> 

package/dist/assets/components/summary-grid/components/summary-grid-item-percentage/summary-grid-item-percentage.stories.ts

@@ -0,0 +1 @@
+import { type Meta, type StoryObj } from '@storybook/vue'; import BentoSummaryGridItemPercentage from './summary-grid-item-percentage.vue'; import { BentoSummaryGridItemSize, BentoSummaryGridItemTrendDirection } from '../../summary-grid.types'; import { isVue2 } from 'vue-demi'; import { action } from '@storybook/addon-actions'; const meta: Meta = { title: 'Summary Grid/Summary Grid Item/Summary Grid Item Percentage', component: BentoSummaryGridItemPercentage, argTypes: { size: { options: Object.values(BentoSummaryGridItemSize), mapping: BentoSummaryGridItemSize, control: { type: 'select', }, }, trendDirection: { options: Object.values(BentoSummaryGridItemTrendDirection), mapping: BentoSummaryGridItemTrendDirection, control: { type: 'select', }, }, secondaryTrendDirection: { options: Object.values(BentoSummaryGridItemTrendDirection), mapping: BentoSummaryGridItemTrendDirection, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoSummaryGridItemPercentage>; const SUMMARY_BAR_ITEM_TITLE = 'Summary grid item percentage'; const SUMMARY_BAR_ITEM_LABEL = 20.12; const SUMMARY_BAR_INFO_ICON_TOOLTIP = 'Text for icon tooltip'; const SUMMARY_BAR_ITEM_TREND = '+12%'; const SUMMARY_BAR_ITEM_SECONDARY_METRIC = 40; const SUMMARY_BAR_ITEM_SECONDARY_TREND = '-24%'; const SUMMARY_BAR_ITEM_DEFAULT_PROPS = { title: SUMMARY_BAR_ITEM_TITLE, label: SUMMARY_BAR_ITEM_LABEL, size: 'small', infoIconTooltipText: SUMMARY_BAR_INFO_ICON_TOOLTIP, copy: 'copy this', trend: SUMMARY_BAR_ITEM_TREND, }; const SUMMARY_BAR_ITEM_WITH_SECONDARY_METRIC_PROPS = { ...SUMMARY_BAR_ITEM_DEFAULT_PROPS, secondaryMetric: SUMMARY_BAR_ITEM_SECONDARY_METRIC, secondaryTrend: SUMMARY_BAR_ITEM_SECONDARY_TREND, secondaryTrendDirection: 'negative', }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoSummaryGridItemPercentage }, props: Object.keys(argTypes), template: ` <bento-summary-grid-item-percentage v-bind="args" @copy-click="copyClicked" @info-icon-mouseenter="infoIconMouseEnter" /> `, setup(props) { const copyClicked = (event: PointerEvent) => action('copy-click')(event); const infoIconMouseEnter = (event: PointerEvent) => action('info-icon-mouseenter')(event); return { args: isVue2 ? props : _args, copyClicked, infoIconMouseEnter, }; }, }), args: { ...SUMMARY_BAR_ITEM_DEFAULT_PROPS, }, }; export const WithSecondaryMetric: Story = { render: (_args, { argTypes }) => ({ components: { BentoSummaryGridItemPercentage }, props: Object.keys(argTypes), template: `<bento-summary-grid-item-percentage v-bind="args"/>`, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { ...SUMMARY_BAR_ITEM_WITH_SECONDARY_METRIC_PROPS, }, }; 

package/dist/assets/components/summary-grid/components/summary-grid-item-percentage/summary-grid-item-percentage.vue

@@ -0,0 +1 @@
+<template> <summary-grid-item item-type="percentage" :info-icon-tooltip-text="infoIconTooltipText" :title="title" :copy="copy" :fit-content="fitContent" :size="size" :trend="trend" :trend-direction="trendDirection" :secondary-trend="secondaryTrend" :secondary-trend-direction="secondaryTrendDirection" :underline-popover-size="underlinePopoverSize" :underline-tooltip-text="underlineTooltipText" class="b-summary-grid-item-percentage" @copy-click="$emit('copy-click', $event)" @info-icon-mouseenter="$emit('info-icon-mouseenter', $event)" > <template v-if="hasSlot('dashed-underline')" #dashed-underline> <slot name="dashed-underline" /> </template> {{ computedLabelPercentage }} <template v-if="secondaryMetric" #secondary> {{ computedSecondaryMetricPercentage }} </template> </summary-grid-item> </template> <script setup lang="ts"> import { computed, useSlots } from 'vue'; import { SummaryGridItem } from '../summary-grid-item'; import { useHasSlot } from '@/composables'; import { useI18n } from '@/utils/ts/i18n'; import type { BentoSummaryGridItemPercentageProps } from './summary-grid-item-percentage.types'; import type { NumberFormatOptions } from 'vue-i18n'; const { locale } = useI18n(); defineEmits<{ /** * Emitted when the copy button is clicked. */ (e: 'copy-click', event: MouseEvent): void; /** * Emitted when the mouse pointer enters the info icon component. */ (e: 'info-icon-mouseenter', event: MouseEvent): void; }>(); const props = withDefaults(defineProps<BentoSummaryGridItemPercentageProps>(), { copy: undefined, fitContent: false, infoIconTooltipText: null, secondaryMetric: null, secondaryTrend: null, secondaryTrendDirection: 'positive', size: 'small', trend: null, trendDirection: 'positive', underlinePopoverSize: 'fit-content', underlineTooltipText: null, }); const slots = useSlots(); const hasSlot = useHasSlot(slots); const percentageArgs: NumberFormatOptions = { style: 'percent', maximumFractionDigits: 2, }; const isNumeric = (value: string | number) => value != null && value !== '' && !isNaN(Number(value)); const convertToPercentIfNumber = (value: string | number) => { if (value && isNumeric(value)) { return new Intl.NumberFormat(locale.value, percentageArgs).format(Number(value) / 100); } return value; }; const computedLabelPercentage = computed(() => convertToPercentIfNumber(props.label)); const computedSecondaryMetricPercentage = computed(() => convertToPercentIfNumber(props.secondaryMetric)); </script> <script lang="ts"> /** * Summary grid item component used to display any percentage information * * @example * import { BentoSummaryGridItemPercentage } from '@adyen/bento-vue2'; * * export default { * components: { BentoSummaryGridItemPercentage }, * template: ` * <bento-summary-grid-item-percentage * title="Your title" * label="123" * info-icon-tooltip-text="Your tooltip text here will be toggled by the info icon" * trend="+12%" * trend-direction="neutral" * size="medium" * /> * ` * } */ export default { i18n: {}, }; </script> 

package/dist/assets/components/summary-grid/components/summary-grid-item-text/summary-grid-item-text.stories.ts

@@ -0,0 +1 @@
+import { type Meta, type StoryObj } from '@storybook/vue'; import { action } from '@storybook/addon-actions'; import { isVue2 } from 'vue-demi'; import BentoSummaryGridItemText from './summary-grid-item-text.vue'; const meta: Meta = { title: 'Summary Grid/Summary Grid Item/Summary Grid Item Text', component: BentoSummaryGridItemText, }; export default meta; type Story = StoryObj<typeof BentoSummaryGridItemText>; const SUMMARY_BAR_ITEM_TITLE = 'Summary grid item text'; const SUMMARY_BAR_ITEM_LABEL = 'hjsagdf1255fasdgh621ghjkjaksasdsad'; const SUMMARY_BAR_INFO_ICON_TOOLTIP = 'Text for icon tooltip'; const SUMMARY_BAR_ITEM_DEFAULT_PROPS = { title: SUMMARY_BAR_ITEM_TITLE, label: SUMMARY_BAR_ITEM_LABEL, infoIconTooltipText: SUMMARY_BAR_INFO_ICON_TOOLTIP, copy: 'copy this', }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoSummaryGridItemText }, props: Object.keys(argTypes), template: ` <bento-summary-grid-item-text v-bind="args" @copy-click="copyClicked" @info-icon-mouseenter="infoIconMouseEnter" /> `, setup(props) { const copyClicked = (event: PointerEvent) => action('copy-click')(event); const infoIconMouseEnter = (event: PointerEvent) => action('info-icon-mouseenter')(event); return { args: isVue2 ? props : _args, copyClicked, infoIconMouseEnter, }; }, }), args: { ...SUMMARY_BAR_ITEM_DEFAULT_PROPS, }, }; 

package/dist/assets/components/summary-grid/components/summary-grid-item-text/summary-grid-item-text.vue

@@ -0,0 +1 @@
+<template> <summary-grid-item item-type="text" :info-icon-tooltip-text="infoIconTooltipText" :title="title" :copy="copy" :fit-content="fitContent" :underline-popover-size="underlinePopoverSize" :underline-tooltip-text="underlineTooltipText" class="b-summary-grid-item-text" @copy-click="$emit('copy-click', $event)" @info-icon-mouseenter="$emit('info-icon-mouseenter', $event)" > <template v-if="hasSlot('dashed-underline')" #dashed-underline> <slot name="dashed-underline" /> </template> {{ label }} </summary-grid-item> </template> <script setup lang="ts"> import { useSlots } from 'vue'; import { SummaryGridItem } from '../summary-grid-item'; import { useHasSlot } from '@/composables'; import type { BentoSummaryGridItemTextProps } from './summary-grid-item-text.types'; defineEmits<{ /** * Emitted when the copy button is clicked. */ (e: 'copy-click', event: MouseEvent): void; /** * Emitted when the mouse pointer enters the info icon component. */ (e: 'info-icon-mouseenter', event: MouseEvent): void; }>(); withDefaults(defineProps<BentoSummaryGridItemTextProps>(), { copy: undefined, fitContent: false, infoIconTooltipText: null, underlinePopoverSize: 'fit-content', underlineTooltipText: null, }); const slots = useSlots(); const hasSlot = useHasSlot(slots); </script> <script lang="ts"> /** * Summary grid item component used to display text only. Can be used for references, IDs or any other text data. * * @example * import { BentoSummaryGridItemText } from '@adyen/bento-vue2'; * * export default { * components: { BentoSummaryGridItemText }, * template: ` * <bento-summary-grid-item-text * title="Your title" * label="Your text here" * info-icon-tooltip-text="Your tooltip text here will be toggled by the info icon" * /> * ` * } */ export default {}; </script> 

package/dist/assets/components/summary-grid/summary-grid.docs.mdx

@@ -0,0 +1,152 @@
+import { Canvas, Story, Meta } from '@storybook/blocks';
+import * as SummaryGridStories from './summary-grid.stories';
+import * as SummaryGridItemAmountStories from './components/summary-grid-item-amount/summary-grid-item-amount.stories';
+import * as SummaryGridItemNumericStories from './components/summary-grid-item-numeric/summary-grid-item-numeric.stories';
+import * as SummaryGridItemPercentageStories from './components/summary-grid-item-percentage/summary-grid-item-percentage.stories';
+import * as SummaryGridItemTextStories from './components/summary-grid-item-text/summary-grid-item-text.stories';
+import * as SummaryGridItemCustomStories from './components/summary-grid-item-custom/summary-grid-item-custom.stories';
+
+<Meta title="Summary Grid" of={SummaryGridStories} />
+
+# Summary Grid
+
+Summary grid is a set of summary card items that are placed on a 12 column grid and can be used to highlight key
+information on your page.
+
+You can choose to use summary grid (based on 12 columns) or summary cards individually (hug content behaviour, no grid).
+
+<Canvas sourceState="closed">
+    <Story of={SummaryGridStories.Default} />
+</Canvas>
+
+## Use Cases
+
+Use a SummaryGrid if:
+
+- You need to display key information on page to a user
+
+### Do not use
+
+- Do not put use for displaying complicated large chunks of information.
+
+## Slots
+
+The BentoSummaryGrid has a maximum of 3 rows. Each row contains 6 columns.
+
+To place content into a particular row and columns one must simply use the named slot:
+
+```html
+<bento-summary-grid>
+    <template #cell-{ROW_NUMBER}-{COLUMN_NUMBER}> ...item component placed here </template>
+</bento-summary-grid>
+```
+
+For example if we wanted we could make a 4 column layout that would be spread evenly across the row by using the
+following code:
+
+```html
+<bento-summary-grid>
+    <template #cell-1-1> ...item component placed here </template>
+    <template #cell-1-2> ...item component placed here </template>
+    <template #cell-1-3> ...item component placed here </template>
+    <template #cell-1-4> ...item component placed here </template>
+</bento-summary-grid>
+```
+
+## Column Width
+
+You are able to sets the responsive columns widths for any of the 3 rows in the BentoSummaryGrid.
+
+Each row can be set by setting the `row{ROW_NUMBER_TO_SET_COLUMN_WIDTHS_ON}` in the `columnWidth` prop.
+
+e.g.
+
+```typescript
+columnWidth: {
+    row2: [
+        { small: 12, medium: 6, large: 8 },
+        { small: 6, medium: 3, large: 2 },
+        { small: 6, medium: 3, large: 2 }
+    ],
+},
+```
+
+The code above will set the responsive column widths for all 3 columns on the second row.
+
+Each of your items can have one of the following widths: 2 (minimal), 3, 4, or 6.
+
+You can construct any layout you wish from available width keeping in mind that in total you should fill 12 columns (not
+less, not more).
+
+We provide 2 breakpoints Small size (0-549px) Medium size (550px-1089px) Large size (1090px+)
+
+Users have to pass config setting for each breakpoint to define what happens with the grid.
+
+Please note that these are container queries, not media queries, so the breakpoints are defined by the size of the
+container the grid sits in. Therefore, if you place it in a sidebar, a small size will apply.
+
+If you do not supply any columns widths for a row, the columns will automatically fill up the row being of equal width.
+
+## Modifiers
+
+### Slashed zero
+
+If the `slashedZero` prop is set to `true`, the summary grid will render zeroes in a slashed font numeric style.
+
+## Items
+
+### Variants
+
+#### Amount
+
+<Canvas sourceState="closed">
+    <Story of={SummaryGridItemAmountStories.Default} />
+</Canvas>
+
+Used to display financial data, such as currency values and monetary amounts.
+
+#### Numeric
+
+<Canvas sourceState="closed">
+    <Story of={SummaryGridItemNumericStories.Default} />
+</Canvas>
+
+Used to display any numeric information.
+
+#### Percentage
+
+<Canvas sourceState="closed">
+    <Story of={SummaryGridItemPercentageStories.Default} />
+</Canvas>
+
+Used to display any percentage information.
+
+The `label` and `secondaryMetric` props accept a number (e.g., `12.14`) or a numeric string (e.g., `"12.14"`), which
+will be automatically formatted as a (translated) percentage. If you provide a pre-formatted string like `"12.14%"`, it
+will be displayed as is. The `trend` and `secondaryTrend` props expect a pre-formatted (and translated) string (e.g.,
+`"+12%"`), as they are displayed as is.
+
+#### Text
+
+<Canvas sourceState="closed">
+    <Story of={SummaryGridItemTextStories.Default} />
+</Canvas>
+
+Used to display text only. Can be used for references, IDs or any other text data.
+
+#### Custom
+
+<Canvas sourceState="closed">
+    <Story of={SummaryGridItemCustomStories.Default} />
+</Canvas>
+
+Only use the `summary-grid-item-custom` component with the following components in the `default` slot:
+
+- A BentoStatus
+- A BentoPaymentMethod
+- A BentoCountry
+- A BentoDate
+
+## Resources
+
+- [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?type=design&node-id=8195-14548&mode=design&t=61tB76dAUA0HpXF8-0)

package/dist/assets/components/summary-grid/summary-grid.stories.ts

@@ -0,0 +1 @@
+import { BentoStatus } from '@/components/status'; import { BentoPaymentMethod } from '@/components/payment-method'; import { BentoCountry, BentoCountryCode } from '@/components/country'; import { BentoDate, BentoDateFormat } from '@/components/date'; import type { Meta, StoryObj } from '@storybook/vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { BentoSummaryGridItemAmount, BentoSummaryGridItemCustom, BentoSummaryGridItemNumeric, BentoSummaryGridItemPercentage, BentoSummaryGridItemText, } from './index'; import BentoSummaryGrid from './summary-grid.vue'; import './summary-grid.stories.scss?module'; import { isVue2 } from 'vue-demi'; const meta: Meta = { title: 'Summary Grid', component: BentoSummaryGrid, }; export default meta; type Story = StoryObj<typeof BentoSummaryGrid>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoStatus, BentoDate, BentoPaymentMethod, BentoCountry, BentoSummaryGrid, BentoSummaryGridItemCustom, BentoSummaryGridItemAmount, BentoSummaryGridItemNumeric, BentoSummaryGridItemPercentage, BentoSummaryGridItemText, }, template: ` <div class="b-summary-grid-story"> <bento-summary-grid v-bind="args" > <template #cell-1-1> <bento-summary-grid-item-custom title="Status Item" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" > <bento-status variant="red"> Status </bento-status> </bento-summary-grid-item-custom> </template> <template #cell-1-2> <bento-summary-grid-item-custom title="Payment Method Item" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" > <template #dashed-underline> Extra popover information </template> <bento-payment-method type="ideal" label='923601322401537F'/> </bento-summary-grid-item-custom> </template> <template #cell-1-3> <bento-summary-grid-item-custom title="Country/Region Item" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" > <bento-country :code="BentoCountryCode.NL" /> </bento-summary-grid-item-custom> </template> <template #cell-1-4> <bento-summary-grid-item-custom title="Date/Time Item" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" > <bento-date :date="dateNow" :format="BentoDateFormat.FULL_DATE_TIME_WITH_TIMEZONE_AND_PERIOD"/> </bento-summary-grid-item-custom> </template> <template #cell-2-1> <bento-summary-grid-item-percentage title="Percentage Item" label="123" info-icon-tooltip-text="text for icon" trend="12" copy="copy this to clipboard" /> </template> <template #cell-2-2> <bento-summary-grid-item-amount title="Text Item" label="14" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" underline-tooltip-text="text for underline tooltip" /> </template> <template #cell-2-3> <bento-summary-grid-item-numeric title="Numeric Item" label="123" info-icon-tooltip-text="text for icon" trend="12%" trend-direction="positive" copy="copy this to clipboard" size="large" /> </template> <template #cell-2-4> <bento-summary-grid-item-text title="Text Item" label="text label" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" /> </template> </bento-summary-grid> </div> `, props: Object.keys(argTypes), setup(props) { const DATE_OBJECT = new Date(); return { // Values args: isVue2 ? props : _args, dateNow: DATE_OBJECT, BentoCountryCode, BentoDateFormat, }; }, }), args: { columnWidth: { row2: [ { small: 12, medium: 6, large: 6 }, { small: 6, medium: 6, large: 2 }, { small: 6, medium: 6, large: 2 }, { small: 12, medium: 6, large: 2 }, ], }, }, parameters: storybookDocsParameter(`<bento-summary-grid> <template #cell-1-1> <bento-summary-grid-item-custom title="Status Item" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" > <bento-status variant="red"> Status </bento-status> </bento-summary-grid-item-custom> </template> <template #cell-1-2> <bento-summary-grid-item-custom title="Payment Method Item" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" > <bento-payment-method type="ideal" label='923601322401537F'/> </bento-summary-grid-item-custom> </template> <template #cell-1-3> <bento-summary-grid-item-custom title="Country/Region Item" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" > <bento-country :code="BentoCountryCode.NL" /> </bento-summary-grid-item-custom> </template> <template #cell-1-4> <bento-summary-grid-item-custom title="Date/Time Item" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" > <bento-date :date="dateNow" :format="BentoDateFormat.FULL_DATE_TIME_WITH_TIMEZONE_AND_PERIOD"/> </bento-summary-grid-item-custom> </template> <template #cell-2-1> <bento-summary-grid-item-percentage title="Percentage Item" label="123" info-icon-tooltip-text="text for icon" trend="12" copy="copy this to clipboard" /> </template> <template #cell-2-2> <bento-summary-grid-item-amount title="Text Item" label="14" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" /> </template> <template #cell-2-3> <bento-summary-grid-item-numeric title="Numeric Item" label="123" info-icon-tooltip-text="text for icon" trend="12%" trend-direction="positive" copy="copy this to clipboard" size="large" /> </template> <template #cell-2-4> <bento-summary-grid-item-text title="Text Item" label="text label" info-icon-tooltip-text="text for icon" copy="copy this to clipboard" /> </template> </bento-summary-grid>`), }; 

package/dist/assets/components/summary-grid/summary-grid.vue

@@ -0,0 +1 @@
+<template> <div class="b-summary-grid"> <grid-layout v-for="index in numberOfRows" :key="`summary-grid-row-${index}`" :data-testid="`summary-grid-row-${index}`" :column-width="columnWidth?.[`row${index}`]" > <template v-if="hasSlot(`cell-${index}-1`)" #col-1> <slot :name="`cell-${index}-1`" /> </template> <template v-if="hasSlot(`cell-${index}-2`)" #col-2> <slot :name="`cell-${index}-2`" /> </template> <template v-if="hasSlot(`cell-${index}-3`)" #col-3> <slot :name="`cell-${index}-3`" /> </template> <template v-if="hasSlot(`cell-${index}-4`)" #col-4> <slot :name="`cell-${index}-4`" /> </template> <template v-if="hasSlot(`cell-${index}-5`)" #col-5> <slot :name="`cell-${index}-5`" /> </template> <template v-if="hasSlot(`cell-${index}-6`)" #col-6> <slot :name="`cell-${index}-6`" /> </template> </grid-layout> </div> </template> <script setup lang="ts"> import { onMounted, provide, toRef, useSlots } from 'vue'; import type { BentoSummaryGridLayout, BentoSummaryGridProps } from './summary-grid.types'; import { GridLayout } from '@/components/internal'; import { useHasSlot } from '@/composables'; import { SUMMARY_GRID_LAYOUT_INJECTION_KEY, SUMMARY_GRID_SLASHED_ZERO, } from '@/components/summary-grid/summary-grid.keys'; const props = withDefaults(defineProps<BentoSummaryGridProps>(), { columnWidth: null, slashedZero: false, }); const slots = useSlots(); const hasSlot = useHasSlot(slots); let numberOfRows = 1; if (slots) { const slotRows = Object.keys(slots) ?.filter(slotName => slotName.includes('cell-')) ?.map(slotName => parseInt(slotName.split('-')?.[1], 10)); numberOfRows = Math.max(...slotRows); } onMounted(() => { if (numberOfRows > 3) { throw new Error( 'BentoSummaryGrid must only have a maximum of 3 rows. Read the documentation for more information.' ); } }); const registerComponentsInSummaryGrid: BentoSummaryGridLayout = () => { const isSummaryGridLayout = true; return { isSummaryGridLayout }; }; provide(SUMMARY_GRID_LAYOUT_INJECTION_KEY, registerComponentsInSummaryGrid); provide(SUMMARY_GRID_SLASHED_ZERO, toRef(props, 'slashedZero')); </script> <script lang="ts"> /** * A summary grid component that displays a collection items. * * @example * import { BentoSummaryGrid, BentoSummaryGridItemAmount } from '@adyen/bento-vue2'; * * export default { * components: { BentoSummaryGrid, BentoSummaryGridItemAmount }, * template: ` * <bento-summary-grid> * <template #cell-2-2> * <bento-summary-grid-item-amount * title="Text Item" * label="14" * info-icon-tooltip-text="text for icon" * copy="copy this to clipboard" * /> * </template> * </bento-summary-grid> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./summary-grid.scss" /> 

package/dist/assets/components/tabs/components/tab.vue

@@ -0,0 +1 @@
+<template> <div v-show="activeTabId === id" :id="`${id}-tabpanel`" class="b-tab" role="tabpanel" :aria-labelledby="id"> <template v-if="activeTabId === id"> <slot /> </template> </div> </template> <script setup lang="ts"> import { computed, inject, onUnmounted, provide, ref, toRefs } from 'vue'; import { EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY, TABS_ACTIVE_TAB_ID_KEY, TABS_REGISTER_TAB_INJECTION_KEY, } from '../tabs.keys'; import { type BentoTabsRegisterTab } from '../tabs.types'; import { type BentoTabProps, type BentoTabProvidedTitle } from './tab.types'; const props = withDefaults(defineProps<BentoTabProps>(), { counter: null, disabled: false, hidden: false, withNotificationIndicator: false, setElementRef: undefined, }); // External title injection const { counter, disabled, hidden, withNotificationIndicator } = toRefs(props); const componentTitle = ref<BentoTabProps['title']>(); const setTitle: BentoTabProvidedTitle = (value: string) => { componentTitle.value = value; }; provide(EXTERNAL_TITLE_REGISTER_ENTRY_INJECTION_KEY, setTitle); const computedTitle = computed<BentoTabProps['title']>(() => componentTitle.value ?? props.title); const registerTab: BentoTabsRegisterTab = inject(TABS_REGISTER_TAB_INJECTION_KEY); const activeTabId = inject(TABS_ACTIVE_TAB_ID_KEY); const { id, unregisterTab } = registerTab({ counter, disabled, hidden, title: computedTitle, withNotificationIndicator, setElementRef: props.setElementRef, }); onUnmounted(() => unregisterTab()); </script> <script lang="ts"> /** * Tab content which attaches a tab to the `bento-tabs` component * and renders is content when it becomes active. * * @example * import { BentoTab, BentoTabs } from '@adyen/bento-vue2'; * * <template> * <bento-tabs> * <bento-tab * :counter="1" * :disabled="false" * :hidden="false" * title="Tab's title" * with-notification-indicator * > * Tab content * </bento-tab> * </bento-tabs> * </template> */ export default { name: 'bento-tab', }; </script> <style lang="scss" scoped src="./tab.scss" /> 

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

@@ -0,0 +1,98 @@
+import { Canvas, Story, Source } from '@storybook/blocks';
+import * as TabsStories from './tabs.stories';
+
+# Tabs
+
+Tabs are used to navigate between different, but related content views within a page. They always contain at least two
+tabs, with one of them active. By default, the first tab is always active and content from that tab is displayed on the
+page. Selecting another tab replaces content with the new tab’s content.
+
+<Canvas of={TabsStories.Default} />
+
+<br />
+
+## Do's
+
+- Use tabs on content-heavy pages to organise related content into different views. This can help reduce cognitive load.
+- Use concise tab headers that are easily understandable, ideally one or two words.
+
+### Do not's
+
+- Don’t use tabs if users needs to read through all the content to fully understand a process or flow, or if they need
+  to compare information between them.
+
+## Variations
+
+### Notification indicators
+
+If there’s something requiring user attention, the tab gets a blue notification dot. To set/unset this notification dot,
+set the `withNotificationIndicator` prop to `true` or `false` for the designated `bento-tab`.
+
+<Canvas of={TabsStories.WithNotificationIndicator} />
+
+## Modifiers
+
+### Hiding tabs
+
+Hiding individual `bento-tab` elements might deem necessary, for instance, when a tab's content is not relevant to the
+user based on their permissions or the current state of the application.
+
+To hide a tab, set the `hidden` prop to `true` for the designated `bento-tab` instead of using `v-show` in the template.
+
+<Source
+    dark
+    language="html"
+    code={`<bento-tab hidden title="Hidden tab" :counter="0">
+    This shouldn't be seen!
+</bento-tab>`}
+/>
+
+## Capturing tab elements
+
+If you need to target a specific tab to anchor a tooltip or a popover, use the `set-element-ref` prop on `bento-tab`.
+This prop accepts a callback function that safely returns the HTML element back to your component's state.
+
+## Responsiveness
+
+When the tabs cannot fit within the viewport, two chevron buttons are added and the bar becomes horizontally scrollable.
+
+Each press of the button scrolls 80% of the visible bar’s width, so that there is always a little bit of previously
+visible content still in view on each scroll. This helps user with orientating themselves again. The 80% is calculated
+from either left or right, depending which direction the user is scrolling (see below).
+
+The first and last scroll should always end 24px away from the button.
+
+Scrolling the bar does not automatically change tab selection. To select another tab user still needs to click/tap on
+it.
+
+## Accessibility
+
+### Keyboard interaction
+
+| Keyboard interaction | Action                                                                                                       |
+| -------------------- | ------------------------------------------------------------------------------------------------------------ |
+| `Tab`                | Sets focus on the active tab (further repeats would move focus into the tab panel)                           |
+| `ArrowLeft`          | When the active tab is in focus, moves the focus to the previous non-disabled and visible tab, if available. |
+| `ArrowRight`         | When the active tab is in focus, moves the focus to the next non-disabled and visible tab, if available.     |
+| `Space`              | Activates the tab.                                                                                           |
+| `Enter`              | Activates the tab.                                                                                           |
+
+### Roles, states and properties
+
+| Role       | Attribute                        | Element  | Usage                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                |
+| ---------- | -------------------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `tablist`  |                                  | `div`    | Indicates that the element serves as a container for a set of tabs.                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `tab`      |                                  | `button` | <ul><li>Indicates the element serves as a tab control.</li><li>Provides a title for its associated <code>tabpanel</code>.</li></ul>                                                                                                                                                                                                                                                                                                                                                                                  |
+|            | `aria-selected="true"`           | `button` | <ul> <li>Indicates the tab control is activated and its associated panel is displayed.</li> <li>Set when a user activates a tab.</li> <li> Does not change when focus moves in the <code>tablist</code>. </li> </ul>                                                                                                                                                                                                                                                                                                 |
+|            | `aria-selected="false"`          | `button` | <ul> <li> Indicates the tab control is not active and its associated panel is <strong>NOT</strong> displayed. </li> <li> Set for all tab elements in the tab set except the active tab; the one associated with the currently displayed panel. </li> </ul>                                                                                                                                                                                                                                                           |
+|            | `aria-hidden="false"`            | `button` | Indicates the tab control is visible and it is listed in the _accessibility tree_                                                                                                                                                                                                                                                                                                                                                                                                                                    |
+|            | `aria-hidden="true"`             | `button` | Indicates the tab control is **not** visible and it is **not** listed in the _accessibility tree_                                                                                                                                                                                                                                                                                                                                                                                                                    |
+|            | `tabindex="-1"`                  | `button` | <ul> <li> Removes the element from the page <kbd>Tab</kbd> sequence. </li> <li> Set when a tab is not selected so that only the selected (active) tab is in the page <kbd>Tab</kbd> sequence. </li> <li> Since an HTML <code>button</code> element is used for the tab, it is not necessary to set <code>tabindex="0"</code> on the selected (active) tab element. </li> <li> This approach to managing focus is described in the section on "Managing Focus Within Components Using a Roving tabindex". </li> </ul> |
+|            | `aria-controls="ID_REFERENCE"`   | `button` | Refers to the `tabpanel` element associated with the tab.                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
+| `tabpanel` |                                  | `div`    | <ul> <li>Indicates the element serves as a container for tab panel content.</li> <li> Is hidden unless its associated <code>tab</code> control is activated. </li> </ul>                                                                                                                                                                                                                                                                                                                                             |
+|            | `aria-labelledby="ID_REFERENCE"` | `div`    | <ul> <li> Refers to the <code>tab</code> element that controls the panel. </li> <li>Provides an accessible name for the tab panel.</li> </ul>                                                                                                                                                                                                                                                                                                                                                                        |
+
+## Resources
+
+- [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=3298%3A73472&mode=dev)
+- [W3 Example of Tabs with Manual Activation](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/examples/tabs-manual/)

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

@@ -0,0 +1 @@
+import { isVue2 } from 'vue-demi'; import BentoTabs from './tabs.vue'; import BentoTab from './components/tab.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; const meta: Meta = { title: 'Tabs', component: BentoTabs, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'Default slot content', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, }, }; export default meta; type Story = StoryObj<typeof BentoTabs>; const defaultCode = ` <template> <bento-tabs :activeTabIndex="activeTabIndex" @update:active-tab-index="onTabSelected"> <bento-tab title="Maria Ahlefeldt"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> <bento-tab title="Carl Andersen"> (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen. </bento-tab> <bento-tab title="Karl Truffel"> (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel. </bento-tab> <bento-tab title="Maria Ahlefeldt" :disabled="true"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> </bento-tabs> </template> <script setup lang="ts"> import { BentoTab, BentoTabs } from '@adyen/bento-vue2'; import { ref } from 'vue' const activeTabIndex = ref(1) const onTabSelected = (newActiveTabIndex: number) => { activeTabIndex.value = newActiveTabIndex; } </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTabs, BentoTab }, props: Object.keys(argTypes), template: ` <bento-tabs v-bind="args"> <bento-tab title="Maria Ahlefeldt"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> <bento-tab title="Carl Andersen"> (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen. </bento-tab> <bento-tab title="Karl Truffel"> (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel. </bento-tab> <bento-tab title="Maria Ahlefeldt" :disabled="true"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> </bento-tabs> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), parameters: storybookDocsParameter(defaultCode), }; export const Sticky: Story = { render: (_args, { argTypes }) => ({ components: { BentoTabs, BentoTab }, props: Object.keys(argTypes), template: ` <bento-tabs v-bind="args"> <bento-tab title="Maria Ahlefeldt"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas gravida dictum tellus vel semper. Maecenas id purus id massa sollicitudin lobortis sed at massa. Ut venenatis laoreet purus, ac sodales arcu facilisis vitae. Curabitur interdum quis nunc ac faucibus. Sed id dictum nibh, in dignissim augue. Mauris id convallis orci, ac ultrices nibh. Cras sollicitudin vitae tortor id aliquet. Sed vel interdum lectus. Sed nec augue non odio aliquet aliquam quis ut urna. Donec at tincidunt dolor, quis eleifend tellus. Nam ornare cursus ipsum, eu euismod dui hendrerit sed. Donec pulvinar ante a mattis gravida. Cras posuere magna nec lectus varius tincidunt. Suspendisse potenti. In congue, nibh vitae dapibus mollis, nibh erat dapibus magna, vel pretium risus nibh vitae nunc. Nunc ultricies iaculis erat, id accumsan tortor. Proin nec lacus quis arcu tempor cursus vitae et augue. Donec eget egestas est. Praesent pharetra aliquam justo id cursus. Suspendisse ut viverra dolor. Aliquam at rutrum enim, eget volutpat mi. Nunc ut pulvinar turpis. Aliquam porttitor mollis lacus et aliquam. Etiam ullamcorper ut nunc ac ultricies. Vestibulum congue ultrices dictum. Etiam volutpat, felis at fringilla luctus, turpis arcu varius dui, eget eleifend mi mauris nec nisl. Ut et elementum eros, a dapibus leo. Sed molestie lectus in dui consequat vehicula. Phasellus sodales odio et vestibulum consectetur. Maecenas sodales malesuada felis eget semper. Morbi et vestibulum arcu. Fusce ex massa, elementum at massa non, ultricies vestibulum elit. Pellentesque nec felis id quam vulputate dapibus id id dolor. Aenean facilisis nibh sed enim lacinia sodales. Cras viverra ac ipsum vitae commodo. Nulla quis congue ipsum. Nunc ultricies tristique fermentum. Fusce nec maximus nisl, id facilisis mauris. Duis nec maximus tellus. Fusce quis mauris posuere ex mollis faucibus viverra at leo. Donec ac neque fermentum, fringilla magna vel, scelerisque nisi. Nulla id vehicula lectus, ac gravida justo. Sed in lorem odio. Vivamus lacinia ipsum id nisi tincidunt mollis. Sed quis dui ut dolor tempus mattis id eu erat. Sed tempus arcu lectus, sit amet placerat dolor consequat sed. Maecenas fermentum, ligula eu luctus imperdiet, dolor nisi condimentum dolor, nec molestie justo dolor eu dolor. Nullam nisl dui, gravida et massa vel, malesuada faucibus diam. Aenean non convallis nulla, sit amet egestas eros. Ut efficitur tellus vel placerat euismod. In luctus scelerisque elit rutrum ornare. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Fusce iaculis scelerisque tincidunt. Ut vel consequat eros. Vivamus sodales dictum quam quis mattis. Curabitur rutrum bibendum dictum. Suspendisse eros nisi, maximus sed lorem eu, elementum dictum nibh. Donec pellentesque lorem non egestas aliquet. Suspendisse sit amet sagittis ipsum, sit amet venenatis nulla. Sed finibus lacus eu cursus vestibulum. Quisque laoreet tellus nunc, sit amet viverra leo consequat vel. Nunc feugiat porttitor diam, id gravida arcu pretium mollis. Duis mollis odio quam, vel rhoncus metus rhoncus non. Proin ac rutrum nisl. Pellentesque nec porta turpis, accumsan faucibus nisi. Nam at dui sed dui vestibulum porttitor. Nam sed tristique nisi, vitae placerat urna. Aliquam sit amet pretium dui, ac cursus dolor. Nullam vitae auctor neque, quis ornare massa. Duis hendrerit dolor sed ligula interdum pellentesque. Nullam enim turpis, venenatis quis diam vel, mattis porttitor metus. Vivamus vel porttitor nisi, eu commodo augue. Vestibulum libero erat, fringilla ac fermentum in, malesuada nec velit. Morbi quis venenatis dolor. Quisque a congue metus, in pellentesque nibh. Phasellus sodales felis id tempus dictum. Nam molestie nulla eu iaculis porttitor. Etiam in urna mi. Aenean sit amet egestas arcu, a pretium sem. Vestibulum dictum odio vel tempor porta. Mauris laoreet tristique feugiat. In dui est, sollicitudin sed aliquet non, posuere at augue. Praesent auctor vel tellus mollis imperdiet. Phasellus et tincidunt lacus, ut volutpat velit. Quisque vitae tortor accumsan ante semper tincidunt ac vel lorem. Duis in elit vel arcu malesuada semper ac ac mi. Duis massa sapien, lacinia ac sapien ut, volutpat sollicitudin eros. Maecenas cursus massa eu felis dignissim, gravida tincidunt lectus tristique. Maecenas et vehicula leo, consectetur vehicula orci. Sed viverra dictum lacus, ac tristique nisi laoreet vitae. Cras porta suscipit tempus. Praesent lacus massa, volutpat et convallis ac, feugiat sit amet purus. Sed semper faucibus dui, vitae ultricies urna scelerisque at. Curabitur tortor felis, porttitor non augue quis, cursus sollicitudin augue. Fusce sed viverra lorem. Integer sit amet ullamcorper odio. Vivamus et metus ac sem convallis accumsan ut vitae purus. Praesent ligula arcu, varius id vehicula non, sagittis at risus. Duis porta pellentesque commodo. Nullam fermentum nisi neque, in scelerisque eros rutrum ut. Duis id orci non justo sodales dictum et eget ex. Curabitur quis ante at lectus semper eleifend in id purus. Aenean sed suscipit nulla. Mauris ullamcorper sapien velit, sed volutpat ante luctus quis. Cras lobortis orci nec quam finibus dapibus. Aenean nec purus et nisl tristique commodo ac sed odio. Integer placerat ac mauris a elementum. Etiam vestibulum tellus diam, non eleifend justo ultrices a. Duis et elementum tellus. Pellentesque felis orci, rhoncus sed diam eu, finibus faucibus diam. Donec a magna odio. Vestibulum iaculis interdum arcu, ut vulputate nisl dictum sed. Praesent quis eros et nulla condimentum placerat. Nam vel auctor erat. Donec lobortis dapibus erat sit amet luctus. Sed vitae feugiat nulla, in suscipit massa. Nunc ut tellus consequat, pellentesque nibh id, finibus risus. Etiam vulputate a nisi vitae fermentum. Duis tempor, mauris scelerisque commodo molestie, risus massa gravida nisi, et iaculis libero risus non velit. Vestibulum in felis sed justo porttitor bibendum nec id ligula. Maecenas eros sapien, dapibus non scelerisque et, tristique et mi. Maecenas id felis odio. Donec sed lacus gravida justo egestas varius in id dolor. Nunc eu luctus urna, vitae consectetur lorem. Nunc et diam consequat, rhoncus odio non, bibendum ipsum. Aenean et sagittis elit. Aliquam posuere sit amet nisi vitae efficitur. Nulla id blandit dui, at iaculis tellus. In varius sem ac nulla volutpat egestas. Donec condimentum feugiat mauris, in tempor nibh cursus ac. Etiam interdum imperdiet vehicula. Aliquam fringilla, risus eu porttitor accumsan, mi ante consequat tellus, sed vehicula mi nulla quis nisl. Nunc sollicitudin turpis commodo urna egestas, eget pharetra ligula consequat. Donec in odio a arcu tempus tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum iaculis turpis quis euismod pellentesque. Curabitur mattis ex et libero auctor, vel placerat est mollis. Sed nec felis eu sapien faucibus fermentum. Morbi ut risus a lectus fringilla commodo nec in massa. Sed ac suscipit magna. Nunc vel augue mollis, fermentum risus eu, varius dolor. Quisque molestie fringilla ligula. Integer sed posuere magna. Mauris porta ornare interdum. Vivamus ullamcorper maximus lorem, eu consectetur est finibus a. Vivamus sagittis egestas eros nec porta. Sed congue lacus nisl, nec euismod ex volutpat ut. Aliquam erat volutpat. Nam posuere nisl in scelerisque venenatis. Curabitur sed mauris lorem. Mauris ornare est in velit dapibus, nec aliquet dui rhoncus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc euismod orci a odio iaculis, venenatis congue lorem vestibulum. Aenean sollicitudin egestas porta. Nulla ut sem eu nulla vehicula fringilla. Morbi eu sodales sem. Integer tristique tincidunt est vestibulum vehicula. Donec eget nulla congue, posuere lacus at, ornare sapien. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean interdum volutpat lobortis. Sed nulla augue, suscipit quis laoreet sit amet, vestibulum ac ex. Phasellus in volutpat diam. Phasellus tristique ultrices purus, a aliquam erat. Proin diam quam, luctus non bibendum non, vulputate eget nulla. Morbi ornare mauris eget nulla imperdiet, eu pulvinar est blandit. Mauris ut tempor arcu. Cras facilisis dictum lacus, et faucibus sem consectetur et. Cras arcu ligula, posuere ac tempor eu, ornare a felis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean posuere congue elementum. Sed id ligula a ante tristique aliquet. Quisque nec mollis felis. Pellentesque varius eu massa venenatis dapibus. Praesent lacinia lorem nec facilisis luctus. Donec malesuada pretium dui, vitae luctus metus. Morbi ut aliquam ligula. Sed gravida urna in augue accumsan facilisis. Maecenas ultricies augue eu fermentum vestibulum. Vivamus at orci a libero sagittis pretium. Suspendisse quis est justo. Duis rutrum varius est eget lacinia. Duis augue ante, finibus quis auctor sit amet, ultrices id odio. Duis ultricies laoreet fringilla. Nulla vitae placerat lectus. Aenean nisl dui, pellentesque et bibendum quis, fringilla vitae tortor. Aenean cursus velit sed ex facilisis eleifend et eu ante. Maecenas leo est, auctor id tempus aliquet, pharetra eget leo. Nullam fermentum metus mi, ac varius velit lobortis non. Nam ultricies, orci ut lacinia elementum, justo elit efficitur orci, nec ornare augue justo vel odio. Quisque efficitur mauris ac sagittis varius. Fusce id nunc feugiat, efficitur libero eget, imperdiet mi. Nullam at sollicitudin augue, vitae bibendum turpis. Quisque vitae semper nisl. Aenean justo nulla, tincidunt at est vitae, consectetur porta turpis. Ut accumsan dolor mi, feugiat accumsan orci aliquet at. Pellentesque velit tortor, gravida quis magna quis, eleifend posuere est. Aliquam libero quam, porta non tincidunt eu, consequat eu eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris justo lectus, maximus in faucibus vitae, vestibulum ut tortor. Nulla facilisi. Nunc et lectus tellus. Aliquam pretium fringilla mauris, eu congue dui ultricies a. Suspendisse potenti. Maecenas dapibus auctor nisl a tincidunt. Vivamus elementum ex elit, vel molestie sem tristique nec. Etiam tristique volutpat risus, at sodales ex cursus sit amet. Donec aliquam, turpis sit amet vestibulum vulputate, mi leo mollis lorem, eleifend venenatis neque sapien ac erat. Morbi ullamcorper, mi et placerat dictum, tellus libero bibendum sem, id auctor justo lectus sed leo. Phasellus lacinia scelerisque tristique. Curabitur ut congue elit, vitae ullamcorper ligula. Cras purus lacus, dignissim eget justo ac, commodo convallis arcu. In ac pellentesque metus. Proin lobortis diam ac pellentesque sodales. In porta dolor id augue ultricies laoreet. Phasellus aliquam ultricies lorem, a mattis quam maximus vel. Vestibulum eu maximus nunc, eu pellentesque lorem. Vivamus sagittis arcu odio. Praesent nec malesuada sem. Morbi lobortis ullamcorper mollis. Morbi porttitor lectus sed erat luctus cursus. Donec a lacus a ligula vehicula iaculis. Vestibulum sagittis quam eu bibendum dapibus. Donec eleifend mollis suscipit. Morbi vitae magna libero. Nunc imperdiet ligula augue, ullamcorper molestie lacus mollis eget. Vestibulum vel tellus tortor. Suspendisse tincidunt in nisl vitae volutpat. Sed pharetra consequat dui sit amet venenatis. Suspendisse lobortis quis lectus ac maximus. Phasellus feugiat quam accumsan ipsum gravida faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus pellentesque diam non urna tristique, vel elementum mi aliquam. Aliquam turpis urna, fringilla a lorem sit amet, vestibulum laoreet mauris. Etiam ut justo finibus, tempor turpis eu, aliquet nisi. Aliquam eget lorem quam. Ut venenatis eros velit, eget lacinia augue aliquet at. Sed massa urna, imperdiet ut augue at, varius hendrerit arcu. Curabitur quis imperdiet diam. Aliquam porta eu metus et posuere. Suspendisse finibus lacus ex, quis aliquam urna rhoncus vitae. Morbi vel massa a sem vehicula elementum. Etiam orci diam, euismod quis aliquam eget, pulvinar et magna. Suspendisse volutpat leo risus, sed pretium tellus pharetra non. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus sed nunc vel enim vulputate convallis. Maecenas sit amet pretium mauris, in suscipit ligula. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras ultrices facilisis nunc vel suscipit. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur nunc justo, placerat tristique leo eu, facilisis tempor sapien. Nulla tempor metus ligula, sed consectetur eros hendrerit eget. Maecenas vel ex eget mi malesuada ultricies ut eget lorem. Morbi rutrum et nunc non volutpat. Sed id tellus est. Vivamus ac leo vulputate nulla pellentesque aliquam ut vel sem. Quisque sed semper enim. Quisque mattis ultrices tortor, at dapibus lectus facilisis non. Ut leo massa, semper a facilisis at, ultrices id risus. Duis id leo bibendum lacus lobortis laoreet. In hac habitasse platea dictumst. Suspendisse tempus diam ac tempus tempor. Suspendisse tincidunt quis tellus quis bibendum. Vivamus eu urna quis ex mollis mattis auctor nec sapien. Aliquam a libero egestas, accumsan ligula at, porttitor enim. Etiam finibus felis non nisl euismod, eu aliquam metus maximus. Nulla a tortor eu magna ultricies tempus sed vel risus. Nam id lacus quis massa auctor mattis. Vestibulum nec tempus enim, ut rhoncus enim. Vestibulum semper imperdiet lacus sit amet aliquet. Cras eros justo, vestibulum in mattis a, efficitur ac diam. Sed a malesuada leo. Quisque porta ex iaculis, pulvinar velit et, egestas nibh. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et euismod sem. Aliquam ligula tortor, fermentum eu erat eu, pellentesque pharetra nibh. Fusce rutrum scelerisque purus, id auctor lorem vestibulum sed. Fusce id convallis sapien. Mauris feugiat eleifend orci. Donec nunc lorem, malesuada sit amet odio a, facilisis cursus odio. Maecenas eu faucibus lorem. Duis ut diam eu diam volutpat mollis. Aenean id dui nec ipsum porttitor scelerisque a quis purus. In scelerisque arcu fringilla, suscipit metus vitae, gravida lacus. Suspendisse non nibh consectetur, elementum nisi faucibus, tristique diam. Nunc auctor ipsum ac neque suscipit, nec dignissim est viverra. Cras luctus tempus suscipit. Maecenas ullamcorper diam ac quam fermentum venenatis. </bento-tab> <bento-tab title="Carl Andersen"> (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen. </bento-tab> <bento-tab title="Karl Truffel"> (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel. </bento-tab> <bento-tab title="Maria Ahlefeldt" :disabled="true"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> </bento-tabs> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), parameters: storybookDocsParameter(defaultCode), args: { sticky: true, }, }; const withNotificationIndicatorCode = ` <template> <bento-tabs :activeTabIndex="activeTabIndex" @update:active-tab-index="onTabSelected"> <bento-tab title="Maria Ahlefeldt"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> <bento-tab title="Carl Andersen" :with-notification-indicator="true"> (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen. </bento-tab> <bento-tab title="Karl Truffel"> (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel. </bento-tab> <bento-tab title="Maria Ahlefeldt" :disabled="true"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> </bento-tabs> </template> <script setup lang="ts"> import { BentoTab, BentoTabs } from '@adyen/bento-vue2'; import { ref } from 'vue' const activeTabIndex = ref(1) const onTabSelected = (newActiveTabIndex: number) => { activeTabIndex.value = newActiveTabIndex; } </script> `; export const WithNotificationIndicator: Story = { render: (_args, { argTypes }) => ({ components: { BentoTabs, BentoTab }, props: Object.keys(argTypes), template: ` <bento-tabs v-bind="args"> <bento-tab title="Maria Ahlefeldt"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> <bento-tab title="Carl Andersen" :with-notification-indicator="true"> (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen. </bento-tab> <bento-tab title="Karl Truffel"> (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel. </bento-tab> <bento-tab title="Maria Ahlefeldt" :disabled="true"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> </bento-tabs> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), parameters: storybookDocsParameter(withNotificationIndicatorCode), }; const withCountersCode = ` <template> <bento-tabs :activeTabIndex="activeTabIndex" @update:active-tab-index="onTabSelected"> <bento-tab title="Maria Ahlefeldt"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> <bento-tab title="Carl Andersen" :counter="10"> (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen. </bento-tab> <bento-tab title="Karl Truffel" :counter="7" with-notification-indicator> (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel. </bento-tab> <bento-tab title="Maria Ahlefeldt" :disabled="true" :counter="2"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> </bento-tabs> </template> <script setup lang="ts"> import { BentoTab, BentoTabs } from '@adyen/bento-vue2'; import { ref } from 'vue' const activeTabIndex = ref(1) const onTabSelected = (newActiveTabIndex: number) => { activeTabIndex.value = newActiveTabIndex; } </script> `; export const WithCounters: Story = { render: (_args, { argTypes }) => ({ components: { BentoTabs, BentoTab }, props: Object.keys(argTypes), template: ` <bento-tabs v-bind="args"> <bento-tab title="Maria Ahlefeldt"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> <bento-tab title="Carl Andersen" :counter="10"> (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen. </bento-tab> <bento-tab title="Karl Truffel" :counter="7" with-notification-indicator> (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel. </bento-tab> <bento-tab title="Maria Ahlefeldt" :disabled="true" :counter="2"> (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. </bento-tab> </bento-tabs> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), parameters: storybookDocsParameter(withCountersCode), }; 

package/dist/assets/components/tabs/tabs.vue

@@ -0,0 +1 @@
+<template> <div class="b-tabs"> <div ref="tablistwrapper" class="b-tabs__tab-list-wrapper" :class="tablistWrapperConditionalClasses" :style="tablistWrapperStyles" > <fixed-scroller condensed :extra-padding-top="2"> <div ref="tablist" class="b-tabs__tab-list" role="tablist" @keydown="onKeydownTabsNavigation"> <button v-for="{ counter, disabled, hidden, id, title, withNotificationIndicator, setElementRef, } in tabs" v-show="!hidden" :id="id" :ref="setElementRef" :key="id" role="tab" type="button" class="b-tabs__tab" :class="{ 'b-tabs__tab--active': activeTabId === id, 'b-tabs__tab--disabled': disabled, }" :aria-controls="`${id}-tabpanel`" :aria-hidden="hidden ? 'true' : 'false'" :aria-selected="activeTabId === id ? 'true' : 'false'" :tabindex="activeTabId === id && !disabled.value ? null : -1" :disabled="isDisabled(disabled)" @click="handleTabChange(id)" @keydown.enter.space="handleTabChange(id)" > <span class="b-tabs__tab-text"> <bento-typography class="b-tabs__tab-title" el="span" variant="body" stronger> {{ title }} </bento-typography> <bento-typography v-if="counter != null" class="b-tabs__tab-counter" el="span" variant="body" stronger :class="{ 'b-tabs__tab-counter--active': activeTabId === id, }" > {{ counter }} </bento-typography> <span v-if="withNotificationIndicator" class="b-tabs__tab-notification-dot" aria-hidden="true" ></span> </span> <span v-show="activeTabId === id" class="b-tabs__tab-underline" aria-hidden="true"></span> </button> </div> </fixed-scroller> </div> <slot /> </div> </template> <script lang="ts"> import { computed, defineComponent, nextTick, onUnmounted, type PropType, provide, ref, type Ref, unref, watch, } from 'vue'; // components import { BentoTypography } from '@/components/typography'; import { FixedScroller } from '@/internal'; // utils import { generateUid } from '@/core/utils/ts'; import { getNextTabIndex, getPreviousTabIndex } from './utils'; // types import { type Booleanish } from '@/types/prop-types'; import { type BentoTab } from './components/tab.types'; import { type BentoStickyTabsOptions, BentoTabsEvent, type BentoTabsRegisterTab } from './tabs.types'; // keys import { TABS_ACTIVE_TAB_ID_KEY, TABS_REGISTER_TAB_INJECTION_KEY } from './tabs.keys'; /** * Tabs are used to navigate between different, but related content views within a page. * This component conforms to the official WAI-ARIA guidelines for tabs: https://www.w3.org/WAI/ARIA/apg/patterns/tabs/ * * @example * import { BentoTabs, BentoTab } from '@adyen/bento-vue2'; * * export default { * components: { BentoTabs, BentoTab }, * template: ` * <bento-tabs v-bind="$props"> * <bento-tab title="Maria Ahlefeldt"> * (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. * </bento-tab> * <bento-tab title="Carl Andersen"> * (29 April 1847 - 7 May 1909) was a Danish flutist, conductor and composer born in Copenhagen, son of the flutist Christian Joachim Andersen. * </bento-tab> * <bento-tab title="Karl Truffel"> * (1 March 1981 - 7 November 1992) was a Danish dog and commander born in Berlin, son of the machinist Tom Jahoor Truffel. * </bento-tab> * <bento-tab title="Maria Ahlefeldt" :disabled="true"> * (16 January 1755 - 20 December 1810) was a Danish, (originally German), composer. She is known as the first female composer in Denmark. * </bento-tab> * </bento-tabs> * ` * }; */ // component export default defineComponent({ components: { BentoTypography, FixedScroller, }, props: { /** * Sets the active tab by its index (0 being the first tab item). */ activeTabIndex: { type: Number, default: 0 }, /* * Renders the tab with a sticky positioning. */ sticky: { type: Boolean, default: false }, /** * Additional configurable options for tabs rendered with a sticky positioning. * It must be an object of type {@see BentoStickyTabsOption} * @property {Ref<number>} stickyOptions.top - Top position the tabs should take up when rendered as sticky. */ stickyOptions: { type: Object as PropType<BentoStickyTabsOptions>, default: null }, }, emits: [BentoTabsEvent.ACTIVE_TAB_INDEX], setup(props, { emit }) { const tabs: Ref<Array<BentoTab>> = ref([]); const tablist = ref(null); const tablistwrapper = ref(); const activeTabId = ref(''); const isPinnedByObserver = ref(false); let observer; provide(TABS_ACTIVE_TAB_ID_KEY, activeTabId); // unregister tab if removed / destroyed const unregisterTab = (tabIdToRemove: string) => () => { tabs.value = tabs.value?.filter(({ id }) => id !== tabIdToRemove); }; // register tab const registerTab: BentoTabsRegisterTab = ({ title, disabled, withNotificationIndicator, counter, hidden, setElementRef, }) => { const id = generateUid('b-tab'); // add tab to tabs tabs.value.push({ counter, disabled, hidden, id, title, withNotificationIndicator, setElementRef, }); // return values to the Tab component return { id, unregisterTab: unregisterTab(id) }; }; // provide activeTab and registerTab to tab items provide(TABS_REGISTER_TAB_INJECTION_KEY, registerTab); // keyboard navigation const onKeydownTabsNavigation = (e: KeyboardEvent) => { if (e.code === 'ArrowLeft' || e.code === 'ArrowRight') { // find tab that is focussed const activeTab = tabs.value.find(tab => document.activeElement.id === tab.id); let activeTabIndex = tabs.value.indexOf(activeTab); // conditionally increase or decrease the if (e.code === 'ArrowLeft') { activeTabIndex = getPreviousTabIndex(activeTabIndex, tabs.value); } else if (e.code === 'ArrowRight') { activeTabIndex = getNextTabIndex(activeTabIndex, tabs.value); } // focus new active tab tablist.value.children[activeTabIndex].focus(); } }; watch( [() => props.activeTabIndex, tabs], ([index, currentTabs]) => { nextTick(() => { const tab = currentTabs[index]; activeTabId.value = tab && !tab.disabled ? tab.id : tabs.value.find(({ disabled }) => !disabled)?.id; }); }, { immediate: true } ); const handleTabChange = (tabId: string) => { activeTabId.value = tabId; const activeIndex = tabs.value.findIndex(({ id }) => id === activeTabId.value); emit(BentoTabsEvent.ACTIVE_TAB_INDEX, activeIndex); }; const isDisabled = (isDisabledTab: Ref<boolean>): Booleanish => (isDisabledTab ? 'disabled' : false) as Booleanish; /* == Sticky tabs logic == */ const topOffset = computed(() => (props.stickyOptions?.top ? unref(props.stickyOptions.top) : 0)); const isPinned = computed(() => { if (props.sticky && topOffset.value > 0) { return true; } return isPinnedByObserver.value; }); const disconnectObserver = () => { if (observer) { observer.disconnect(); observer = null; } isPinnedByObserver.value = false; }; const setupObserver = (element: HTMLDivElement) => { // The observer is only needed when the tabs are sticky at the top of the screen (no top offset). if (props.sticky && topOffset.value === 0) { observer = new IntersectionObserver( ([e]) => { isPinnedByObserver.value = e.intersectionRatio < 1; }, { threshold: [1] } ); observer.observe(element); } }; // This watcher manages the entire lifecycle of the observer. watch( [() => props.sticky, tablistwrapper, topOffset], ([isSticky, element]) => { disconnectObserver(); if (isSticky && element) { nextTick(() => setupObserver(element)); } }, { immediate: true } ); onUnmounted(() => { disconnectObserver(); }); const tablistWrapperConditionalClasses = computed(() => ({ 'b-tabs__tab-list-wrapper--sticky': props.sticky, 'b-tabs__tab-list-wrapper--pinned': isPinned.value, })); const tablistWrapperStyles = computed(() => // This helps us detect when the tabs are pinned without calculations on the tabs positions because it makes the tabs intersect by 1 pixel with the element on top of it, which is getting aught by the intersection observer. // Followed this example: https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned/ props.sticky ? { top: `${(props.stickyOptions?.top ?? 0) - 1}px`, } : {} ); return { tabs, tablist, tablistwrapper, activeTabId, tablistWrapperConditionalClasses, tablistWrapperStyles, onKeydownTabsNavigation, handleTabChange, isDisabled, }; }, }); </script> <style lang="scss" scoped src="./tabs.scss" /> 

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

@@ -0,0 +1,137 @@
+import { Canvas, Meta, Story } from '@storybook/blocks';
+import * as TagStories from './tag.stories';
+
+# Tag
+
+<Canvas withSource="closed">
+    <Story of={TagStories.Default} />
+</Canvas>
+
+A Tag represents a property or keyword related to an object. Use tags to label, categorize, and organize items, like
+blog categories or quick filter categories.
+
+## ⚠️ Default slot deprecated ⚠️
+
+The `default` slot for tag has been deprecated, please use the `label` property instead to add the text content.
+
+## Use Cases
+
+Use tags to:
+
+- Label items
+- Categorize items
+- Organize items
+
+Examples of said usage are blog categories and quick filter categories.
+
+### Do not use
+
+When using a tag, do not:
+
+- Add custom HTML inside the tag's `default` slot e.g. `<bento-tag><strong>Tag Text</strong></bento-tag>`.
+- Put any elements in the `default` slot, even icon components from the `@adyen/ui-assets` package
+- Use such component to convey a status (e.g. payment status or terminal’s activity). In this case, prefer the `status`
+  component instead
+
+## Variations
+
+### Variant
+
+The `variant` property affects the text color and background color of the component.
+
+It accepts one of the following values:
+
+- `'grey'`
+- `'blue'`
+- `'green'`
+- `'orange'`
+- `'red'`
+- `'white'`
+
+<Canvas withSource="closed">
+    <Story of={TagStories.AllVariantsTemplate} />
+</Canvas>
+
+### Icon
+
+Shows/hide an optional icon, which needs to be passed via the `icon` named slot. The icon only displays if the tag label
+is also present.
+
+## Modifiers
+
+### Truncate
+
+It is possible that the text of some tags will be quite long.
+
+This property accepts a number and determines the maximum length of the text displayed in the component. If the length
+of the text exceeds the specified value, it will be truncated and "..." will be added to the end. If the truncate
+property is not specified, the original text will be displayed in full.
+
+<Canvas withSource="closed">
+    <Story of={TagStories.Truncated} />
+</Canvas>
+
+## Accessibility
+
+### Keyboard Interaction
+
+The tag component is not reachable through keyboard navigation since it's a non-interactive element that displays a
+property or keyword related to an object.
+
+### Colors
+
+Different variants options can be used to differentiate between tags or to add additional meaning. Make sure you don’t
+rely on color only, though, as users with color blindness may struggle with discerning them.
+
+### Role
+
+There are a number of roles that could be valid for this component, depending on the circumstances and how the component
+is used. The recommended approach is to apply the role to the structure around the tag instead of applying a specific
+role to it.
+
+For example, rather than giving the tag component itself the “status” role, the tag can be used inside a list with the
+“status” role. This would also allow for greater control of how the “status” live region is announced, like adding
+`aria-atomic="true"` to cause the live region to announce all of its contents when a change is made, or adding
+`aria-atomic="false"` to instruct the screen reader to announce only the updated content.
+
+```HTML
+<p role="status" aria-atomic="true">
+  <img src="shopping-cart.png" alt="Shopping Cart">
+  <bento-tag>0</bento-tag> items
+</p>
+```
+
+Another example would be to use it inside a breadcrumb, using the tag within a link, in an ordered list inside a nav
+element with `aria-label="Breadcrumb"`.
+
+```HTML
+<nav aria-label="Breadcrumb">
+  <ol>
+    <li><a href="#"><bento-tag>Home</bento-tag></a></li>
+    <li><bento-tag>Stories</bento-tag></a></li>
+    <li aria-current="page"><bento-tag>Tag</bento-tag></li>
+  </ol>
+</nav>
+```
+
+### Use of color
+
+Do not use tag colors as the sole means of communicating any information, as this would be a violation of the
+`Use of Color` criterion. Color should either be decorative or there should be another mean of communicating any
+information provided by the color. For example, using the green tag along with a text label that reads “Success” is
+correct, but using the green tag to indicate success without the text label communicating it too is wrong; a user who is
+color blind must be able to discern any information discernable by a user who is not color blind.
+
+### Aria attributes
+
+Adhering to the Adhering to the [WAI-ARIA 1.2 standard](https://www.w3.org/TR/wai-aria-1.2/) we follow the
+[button pattern](https://www.w3.org/WAI/ARIA/apg/patterns/button/#wai-ariaroles,states,andproperties) documentation
+provided. we apply the following:
+
+| ARIA attribute | is automatic?          | fallback used                                         | manual override |
+| -------------- | ---------------------- | ----------------------------------------------------- | --------------- |
+| `aria-label`   | Yes, default slot text | If no slot text present, then default `tag` value set | -               |
+
+## Resources
+
+- [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/ADL-2.0---Components?node-id=615-2645&t=piB5Gc11SCKIogWg-0)

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

@@ -0,0 +1 @@
+import type { Meta, StoryObj } from '@storybook/vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import CheckmarkCircleFillIcon from '@adyen/ui-assets-icons-16/vue/checkmark-circle-fill'; import BentoTagWithIcon from './__tests__/tag-with-icon.vue?raw'; import BentoTag from './tag.vue'; import { isVue2 } from 'vue-demi'; import { BentoTagVariant } from './tag.types'; export default { title: 'Tag', component: BentoTag, parameters: { layout: 'centered', }, argTypes: { default: { name: 'default (deprecated)', defaultValue: '', description: 'Tag content slot (will be deprecated, use label property instead)', table: { type: { summary: 'VNode[]' }, }, control: { type: 'text', }, }, variant: { options: Object.values(BentoTagVariant), mapping: BentoTagVariant, control: { type: 'select', }, }, }, } as Meta; type Story = StoryObj<typeof BentoTag>; const DEFAULT_TAG_PROPS = { label: 'Default Tag Text', }; const defaultCode = ` <bento-tag label="${DEFAULT_TAG_PROPS.label}" /> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTag }, props: Object.keys(argTypes), template: ` <div style="display:flex; gap: 10px"> <bento-tag v-bind="args" /> </div> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: DEFAULT_TAG_PROPS, parameters: storybookDocsParameter(defaultCode), }; const truncatedCode = ` <bento-tag truncate="10" label="${DEFAULT_TAG_PROPS.label}" /> `; export const Truncated: Story = { render: (_args, { argTypes }) => ({ components: { BentoTag }, props: Object.keys(argTypes), template: ` <div style="display:flex; gap: 10px"> <bento-tag v-bind="args" /> </div> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { ...DEFAULT_TAG_PROPS, variant: 'green', truncate: 10 }, parameters: storybookDocsParameter(truncatedCode), }; export const WithIcon: Story = { render: (_args, { argTypes }) => ({ components: { BentoTag, CheckmarkCircleFillIcon }, props: Object.keys(argTypes), template: ` <div style="display:flex; gap: 10px"> <bento-tag v-bind="args"> <template #icon><checkmark-circle-fill-icon /></template> </bento-tag> </div> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: DEFAULT_TAG_PROPS, parameters: storybookDocsParameter(BentoTagWithIcon), }; const allVariantsCode = ` <div style="display:flex; gap: 10px"> <bento-tag variant="grey" label="Grey" /> <bento-tag variant="green" label="Green" /> <bento-tag variant="red" label="Red" /> <bento-tag variant="blue" label="Blue" /> <bento-tag variant="orange" label="Orange" /> <bento-tag variant="white" label="White" /> </div>`; export const AllVariantsTemplate: Story = { render: (_args, { argTypes }) => ({ components: { BentoTag }, props: Object.keys(argTypes), template: ` <div style="display:flex; gap: 10px"> <bento-tag variant="grey" v-bind="args" label="Grey" /> <bento-tag variant="green" v-bind="args" label="Green" /> <bento-tag variant="red" v-bind="args" label="Red" /> <bento-tag variant="blue" v-bind="args" label="Blue" /> <bento-tag variant="orange" v-bind="args" label="Orange" /> <bento-tag variant="white" v-bind="args" label="White" /> </div> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), parameters: storybookDocsParameter(allVariantsCode), }; 

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

@@ -0,0 +1 @@
+<template> <span v-bento-tooltip-directive="shouldShowTooltip ? textFromSlot : null" data-testid="tag" class="b-tag" :class="tagConditionalClasses" :aria-label="computedAriaLabel" > <div v-if="hasTextContent && hasSlot('icon')" class="b-tag__icon" role="presentation"> <slot name="icon"></slot> </div> <bento-typography class="b-tag__label" el="span" variant="caption" stronger> {{ formattedText }} </bento-typography> </span> </template> <script setup lang="ts"> import { computed, useSlots } from 'vue'; // Use relative paths otherwise the interface won't be correctly detected // TODO: Use alias once the support is added to work with the betterDefine macro import { type BentoTagProps, BentoTagVariant } from './tag.types'; import { BentoTypography } from '@/components/typography'; import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { getSlotText } from '@/utils/ts/get-slot-text'; const props = withDefaults(defineProps<BentoTagProps>(), { label: null, truncate: null, variant: BentoTagVariant.GREY, }); const slots = useSlots(); // Slots logic // Temporary, use-has-slots composable doesn't currently work for vue3 named scoped slots // We do the same in bento-checkbox-group const hasSlot = name => !!slots[name]; const hasTextContent = computed(() => !!(props.label || getSlotText(slots)('default'))); const computedAriaLabel = useAriaLabel({ label: props.label || getSlotText(slots)('default'), defaultFallback: 'tag', }); const tagConditionalClasses = computed(() => ({ [`b-tag--${props.variant}`]: props.variant, })); const textFromSlot = computed(() => props.label ?? getSlotText(slots)('default') ?? 'tag'); const shouldShowTooltip = computed(() => props.truncate && textFromSlot.value.length > props.truncate); const formattedText = computed(() => { if (!props.truncate) { return textFromSlot.value; } return shouldShowTooltip.value ? `${textFromSlot.value.slice(0, props.truncate)}...` : textFromSlot.value; }); </script> <script lang="ts"> export default { name: 'bento-tag', }; </script> <style lang="scss" scoped src="./tag.scss" />