@adyen/bento-mcp 0.11.0 → 0.12.0

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

@@ -1 +1 @@
-<template> <div class="b-progress-bar" :class="conditionalClasses"> <div class="b-progress-bar__header"> <field-label v-if="label" :id="labelId" class="b-progress-bar__label" :label="label" :tooltip-text="tooltipText" /> <div v-if="shouldShowValue" class="b-progress-bar__value"> <slot name="value"> <bento-typography el="span" stronger>{{ valueText }}</bento-typography> </slot> </div> </div> <div class="b-progress-bar__track" :class="conditionalTrackClasses" role="progressbar" v-bind="trackA11yAttrs"> <div class="b-progress-bar__track-indicator" :class="conditionalIndicatorClasses" :style="indicatorStyle" @animationend="onIndicatorAnimationEnd" ></div> </div> <error-message v-if="!!errorMessage" :id="errorId" :error-message="errorMessage" class="b-progress-bar__error-message" /> <bento-typography v-if="description" :id="descriptionId" el="span" class="b-progress-bar__description" :class="conditionalDescriptionClasses" > {{ description }} </bento-typography> <div class="b-progress-bar__announcement" role="status" aria-live="polite"> {{ completionMessage }} </div> </div> </template> <script setup lang="ts"> import { computed, ref, useSlots, watch } from 'vue'; import { BentoTypography } from '@/components/typography'; import { ErrorMessage, FieldLabel } from '@/internal'; import { useHasSlot } from '@/composables'; import { generateUid } from '@/core/utils/ts'; import { useI18n } from '@/utils/ts/i18n'; import { type BentoProgressBarProps } from './progress-bar.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<BentoProgressBarProps>(), { staticAnimation: true, completionAnnouncement: undefined, description: undefined, direction: 'default', errorMessage: undefined, height: 'default', shimmer: true, stopIndicator: true, successFlash: true, valueVisible: true, label: undefined, tooltipText: undefined, type: 'default', value: undefined, variant: 'determinate', }); const slots = useSlots(); const hasSlot = useHasSlot(slots); const labelId = generateUid('progress-bar-label'); const descriptionId = generateUid('progress-bar-description'); const errorId = generateUid('progress-bar-error'); // Value const clampedValue = computed(() => { if (props.value === undefined) { return 0; } return Math.min(Math.max(props.value, 0), 100); }); const valueText = computed(() => `${clampedValue.value}%`); // Success flash, triggered once when the value crosses into 100 const isSuccessFlashing = ref(false); // Screen readers do not reliably announce progressbar value changes, so completion is announced // through a polite live region when the value crosses into 100. const completionMessage = ref(''); watch(clampedValue, (value, previousValue) => { if (props.variant !== 'determinate' || previousValue >= 100 || value < 100) { return; } if (props.successFlash) { isSuccessFlashing.value = true; } completionMessage.value = props.completionAnnouncement ?? t('progressComplete'); }); // Variant state const effectiveVariant = computed(() => { if (props.valueVisible && props.value === undefined && !hasSlot('value')) { return 'indeterminate'; } return props.variant; }); const isIndeterminate = computed(() => effectiveVariant.value === 'indeterminate'); // Display flags const shouldShowValue = computed( () => props.valueVisible && !isIndeterminate.value && (hasSlot('value') || props.value !== undefined) ); const shouldShowError = computed(() => !!props.errorMessage); // Indicator styling const indicatorStyle = computed(() => { if (isIndeterminate.value) { return undefined; } const width = props.direction === 'default' ? `${clampedValue.value}%` : `${100 - clampedValue.value}%`; return { width }; }); // Accessibility const trackA11yAttrs = computed(() => { const describedBy = [props.description ? descriptionId : null, props.errorMessage ? errorId : null].filter(Boolean).join(' ') || undefined; return { 'aria-labelledby': props.label ? labelId : undefined, 'aria-describedby': describedBy, 'aria-busy': isIndeterminate.value || undefined, 'aria-valuemin': isIndeterminate.value ? undefined : 0, 'aria-valuemax': isIndeterminate.value ? undefined : 100, 'aria-valuenow': isIndeterminate.value ? undefined : clampedValue.value, }; }); // Conditional classes const conditionalClasses = computed(() => ({ [`b-progress-bar--${props.height}`]: props.height !== 'default', [`b-progress-bar--${props.type}`]: props.type !== 'default', 'b-progress-bar--error': shouldShowError.value, })); const conditionalTrackClasses = computed(() => ({ 'b-progress-bar__track--reverse': props.direction === 'reverse', 'b-progress-bar__track--with-stop-indicator': props.stopIndicator && effectiveVariant.value === 'determinate', 'b-progress-bar__track--with-success-flash': isSuccessFlashing.value && effectiveVariant.value === 'determinate', })); const conditionalIndicatorClasses = computed(() => ({ 'b-progress-bar__track-indicator--indeterminate': isIndeterminate.value, 'b-progress-bar__track-indicator--static': effectiveVariant.value === 'static', 'b-progress-bar__track-indicator--static-animated': props.staticAnimation && effectiveVariant.value === 'static', 'b-progress-bar__track-indicator--with-shimmer': props.shimmer && !props.errorMessage && effectiveVariant.value === 'determinate', 'b-progress-bar__track-indicator--with-success-flash': isSuccessFlashing.value && effectiveVariant.value === 'determinate', [`b-progress-bar__track-indicator--${props.type}`]: props.type !== 'default', 'b-progress-bar__track-indicator--error': shouldShowError.value, })); const conditionalDescriptionClasses = computed(() => ({ 'b-progress-bar__description--error': !!props.errorMessage, })); const onIndicatorAnimationEnd = (event: AnimationEvent) => { if (event.animationName?.includes('success-flash')) { isSuccessFlashing.value = false; } }; </script> <script lang="ts"> /** * A progress bar communicates the completion status of a task or process. * * @usage * import { BentoProgressBar } from '@adyen/bento-vue2'; * * export default { * components: { BentoProgressBar }, * template: ` * <bento-progress-bar :value="40" label="Uploading files" /> * ` * }; */ export default { name: 'bento-progress-bar', i18n: { messages }, }; </script> <style lang="scss" scoped src="./progress-bar.scss" /> 
+<template> <div class="b-progress-bar" :class="conditionalClasses"> <div class="b-progress-bar__header"> <field-label v-if="label" :id="labelId" class="b-progress-bar__label" :label="label" :tooltip-text="tooltipText" /> <div v-if="shouldShowValue" class="b-progress-bar__value"> <slot name="value"> <bento-typography el="span" stronger>{{ valueText }}</bento-typography> </slot> </div> </div> <div class="b-progress-bar__track" :class="conditionalTrackClasses" role="progressbar" v-bind="trackA11yAttrs"> <div class="b-progress-bar__track-indicator" :class="conditionalIndicatorClasses" :style="indicatorStyle" @animationend="onIndicatorAnimationEnd" ></div> </div> <error-message v-if="!!errorMessage" :id="errorId" :error-message="errorMessage" class="b-progress-bar__error-message" /> <bento-typography v-if="description" :id="descriptionId" el="span" class="b-progress-bar__description" :class="conditionalDescriptionClasses" > {{ description }} </bento-typography> <div class="b-progress-bar__announcement" role="status" aria-live="polite"> {{ completionMessage }} </div> </div> </template> <script setup lang="ts"> import { computed, ref, useSlots, watch } from 'vue'; import { BentoTypography } from '@/components/typography'; import { ErrorMessage, FieldLabel } from '@/internal'; import { useHasSlot } from '@/composables'; import { generateUid } from '@/utils/ts/generate-uid'; import { useI18n } from '@/utils/ts/i18n'; import { type BentoProgressBarProps } from './progress-bar.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<BentoProgressBarProps>(), { staticAnimation: true, completionAnnouncement: undefined, description: undefined, direction: 'default', errorMessage: undefined, height: 'default', shimmer: true, stopIndicator: true, successFlash: true, valueVisible: true, label: undefined, tooltipText: undefined, type: 'default', value: undefined, variant: 'determinate', }); const slots = useSlots(); const hasSlot = useHasSlot(slots); const labelId = generateUid('progress-bar-label'); const descriptionId = generateUid('progress-bar-description'); const errorId = generateUid('progress-bar-error'); // Value const clampedValue = computed(() => { if (props.value === undefined) { return 0; } return Math.min(Math.max(props.value, 0), 100); }); const valueText = computed(() => `${clampedValue.value}%`); // Success flash, triggered once when the value crosses into 100 const isSuccessFlashing = ref(false); // Screen readers do not reliably announce progressbar value changes, so completion is announced // through a polite live region when the value crosses into 100. const completionMessage = ref(''); watch(clampedValue, (value, previousValue) => { if (props.variant !== 'determinate' || previousValue >= 100 || value < 100) { return; } if (props.successFlash) { isSuccessFlashing.value = true; } completionMessage.value = props.completionAnnouncement ?? t('progressComplete'); }); // Variant state const effectiveVariant = computed(() => { if (props.valueVisible && props.value === undefined && !hasSlot('value')) { return 'indeterminate'; } return props.variant; }); const isIndeterminate = computed(() => effectiveVariant.value === 'indeterminate'); // Display flags const shouldShowValue = computed( () => props.valueVisible && !isIndeterminate.value && (hasSlot('value') || props.value !== undefined) ); const shouldShowError = computed(() => !!props.errorMessage); // Indicator styling const indicatorStyle = computed(() => { if (isIndeterminate.value) { return undefined; } const width = props.direction === 'default' ? `${clampedValue.value}%` : `${100 - clampedValue.value}%`; return { width }; }); // Accessibility const trackA11yAttrs = computed(() => { const describedBy = [props.description ? descriptionId : null, props.errorMessage ? errorId : null].filter(Boolean).join(' ') || undefined; return { 'aria-labelledby': props.label ? labelId : undefined, 'aria-describedby': describedBy, 'aria-busy': isIndeterminate.value || undefined, 'aria-valuemin': isIndeterminate.value ? undefined : 0, 'aria-valuemax': isIndeterminate.value ? undefined : 100, 'aria-valuenow': isIndeterminate.value ? undefined : clampedValue.value, }; }); // Conditional classes const conditionalClasses = computed(() => ({ [`b-progress-bar--${props.height}`]: props.height !== 'default', [`b-progress-bar--${props.type}`]: props.type !== 'default', 'b-progress-bar--error': shouldShowError.value, })); const conditionalTrackClasses = computed(() => ({ 'b-progress-bar__track--reverse': props.direction === 'reverse', 'b-progress-bar__track--with-stop-indicator': props.stopIndicator && effectiveVariant.value === 'determinate', 'b-progress-bar__track--with-success-flash': isSuccessFlashing.value && effectiveVariant.value === 'determinate', })); const conditionalIndicatorClasses = computed(() => ({ 'b-progress-bar__track-indicator--indeterminate': isIndeterminate.value, 'b-progress-bar__track-indicator--static': effectiveVariant.value === 'static', 'b-progress-bar__track-indicator--static-animated': props.staticAnimation && effectiveVariant.value === 'static', 'b-progress-bar__track-indicator--with-shimmer': props.shimmer && !props.errorMessage && effectiveVariant.value === 'determinate', 'b-progress-bar__track-indicator--with-success-flash': isSuccessFlashing.value && effectiveVariant.value === 'determinate', [`b-progress-bar__track-indicator--${props.type}`]: props.type !== 'default', 'b-progress-bar__track-indicator--error': shouldShowError.value, })); const conditionalDescriptionClasses = computed(() => ({ 'b-progress-bar__description--error': !!props.errorMessage, })); const onIndicatorAnimationEnd = (event: AnimationEvent) => { if (event.animationName?.includes('success-flash')) { isSuccessFlashing.value = false; } }; </script> <script lang="ts"> /** * A progress bar communicates the completion status of a task or process. * * @usage * import { BentoProgressBar } from '@adyen/bento-vue2'; * * export default { * components: { BentoProgressBar }, * template: ` * <bento-progress-bar :value="40" label="Uploading files" /> * ` * }; */ export default { name: 'bento-progress-bar', i18n: { messages }, }; </script> <style lang="scss" scoped src="./progress-bar.scss" /> 

package/dist/assets/components/promo-banner/promo-banner.stories.ts

@@ -1 +1 @@
-import { storybookDocsParameter } from '@/utils/ts/storybook'; import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import { BentoImageAspectRatio } from '../image'; import { BentoTypography } from '../typography'; import { BentoPromoBannerColor, BentoPromoBannerLayout } from './promo-banner.types'; import BentoPromoBanner from './promo-banner.vue'; const meta: Meta = { title: 'Promo banner', component: BentoPromoBanner, argTypes: { // Slots description: { name: 'description', description: "Provides supplementary information that reinforces the banner's title", table: { type: { summary: 'VNode[]' }, category: 'slots', }, control: { type: 'text', }, }, color: { options: Object.values(BentoPromoBannerColor), mapping: BentoPromoBannerColor, control: { type: 'select', }, }, layout: { options: Object.values(BentoPromoBannerLayout), mapping: BentoPromoBannerLayout, defaultValue: BentoPromoBannerLayout.HORIZONTAL, control: { type: 'select', }, }, // Events dismiss: { table: { type: { summary: '() => void' }, category: 'events', }, control: { disable: true }, }, }, }; export default meta; type Story = StoryObj<typeof BentoPromoBanner>; const DEFAULT_TITLE = 'Title'; const DEFAULT_DESCRIPTION = 'Brief description explaining and giving more information about the title'; const DEFAULT_PROPS = { actions: [ { title: 'Primary', event: () => action('onClick'), }, { title: 'Secondary', event: () => action('onClick'), variant: 'secondary', }, ], color: BentoPromoBannerColor.GREY, description: DEFAULT_DESCRIPTION, image: { src: './16-9.png', alt: '', aspectRatio: BentoImageAspectRatio.P16_9, }, isDismissible: true, layout: 'horizontal', title: DEFAULT_TITLE, }; const defaultCode = ` <bento-promo-banner :actions="[ { title: 'Primary', event: () => action('onClick'), }, { title: 'Secondary', event: () => action('onClick'), variant: 'secondary', } " :image="{ src: './16-9.png', alt: '', aspectRatio: '16:9', }" :title="${DEFAULT_TITLE}" @dismiss="dismissAction" > <template #description> <bento-typography variant="body"> ${DEFAULT_DESCRIPTION} </bento-typography> </template> </bento-promo-banner> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoPromoBanner, BentoTypography }, props: Object.keys(argTypes), template: ` <bento-promo-banner v-bind="args" @dismiss="dismissAction"> <template #description> <bento-typography variant="body"> ${DEFAULT_DESCRIPTION} </bento-typography> </template> </bento-promo-banner> `, setup(props) { return { // Values args: isVue2 ? props : _args, // Events dismissAction: action('dismiss'), }; }, }), args: DEFAULT_PROPS, parameters: storybookDocsParameter(defaultCode), }; 
+import { storybookDocsParameter } from '@/utils/ts/storybook'; import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import { BentoImageAspectRatio } from '../image'; import { BentoTypography } from '../typography'; import { BentoPromoBannerColor, BentoPromoBannerLayout } from './promo-banner.types'; import BentoPromoBanner from './promo-banner.vue'; const PromoBannerDefaultExample = "<template>\n <bento-promo-banner :actions=\"actions\" color=\"grey\" :image=\"image\" is-dismissible layout=\"horizontal\" title=\"Title\">\n <template #description>\n <bento-typography variant=\"body\">\n Brief description explaining and giving more information about the title\n </bento-typography>\n </template>\n </bento-promo-banner>\n</template>\n\n<script lang=\"ts\" setup>\n import { BentoPromoBanner, BentoTypography } from '@adyen/bento-vue2';\n\n const actions = [\n { title: 'Primary', event: () => true, variant: 'primary' as const },\n { title: 'Secondary', event: () => true, variant: 'secondary' as const },\n ];\n const image = {\n src: './16-9.png',\n alt: '',\n aspectRatio: '16:9' as const,\n };\n</script>\n"; const meta: Meta = { title: 'Promo banner', component: BentoPromoBanner, argTypes: { // Slots description: { name: 'description', description: "Provides supplementary information that reinforces the banner's title", table: { type: { summary: 'VNode[]' }, category: 'slots', }, control: { type: 'text', }, }, color: { options: Object.values(BentoPromoBannerColor), mapping: BentoPromoBannerColor, control: { type: 'select', }, }, layout: { options: Object.values(BentoPromoBannerLayout), mapping: BentoPromoBannerLayout, defaultValue: BentoPromoBannerLayout.HORIZONTAL, control: { type: 'select', }, }, // Events dismiss: { table: { type: { summary: '() => void' }, category: 'events', }, control: { disable: true }, }, }, }; export default meta; type Story = StoryObj<typeof BentoPromoBanner>; const DEFAULT_TITLE = 'Title'; const DEFAULT_DESCRIPTION = 'Brief description explaining and giving more information about the title'; const DEFAULT_PROPS = { actions: [ { title: 'Primary', event: () => action('onClick'), }, { title: 'Secondary', event: () => action('onClick'), variant: 'secondary', }, ], color: BentoPromoBannerColor.GREY, description: DEFAULT_DESCRIPTION, image: { src: './16-9.png', alt: '', aspectRatio: BentoImageAspectRatio.P16_9, }, isDismissible: true, layout: 'horizontal', title: DEFAULT_TITLE, }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoPromoBanner, BentoTypography }, props: Object.keys(argTypes), template: ` <bento-promo-banner v-bind="args" @dismiss="dismissAction"> <template #description> <bento-typography variant="body"> ${DEFAULT_DESCRIPTION} </bento-typography> </template> </bento-promo-banner> `, setup(props) { return { // Values args: isVue2 ? props : _args, // Events dismissAction: action('dismiss'), }; }, }), args: DEFAULT_PROPS, parameters: storybookDocsParameter(PromoBannerDefaultExample), }; 

package/dist/assets/components/promo-banner/promo-banner.types.ts

@@ -1 +1 @@
-import { type BentoButtonActionObject } from '@/components/button'; import { type BentoButtonVariant } from '../button'; import { type BentoImageAspectRatio, type BentoImageProps } from '../image'; export interface BentoPromoBannerProps { /** * List of actions that will be used to render the buttons. * * Each object in the list should have a `title`, an `event` and a `variant`. * * `title`: Button's text. * `event`: Event triggered when clicking the Button. * `variant`: Button's style. * * ``` * [{ * title: 'Primary', * event: () => { ... }, * variant: 'primary' * }, { * title: 'Secondary', * event: () => { ... } * variant: 'secondary' * }] * ``` */ actions?: Array<BentoPromoBannerAction>; /** * Defines the color of banner's background */ color?: `${BentoPromoBannerColor}`; /** * Defines whether the banner has a `Dismiss` button */ isDismissible?: boolean; /** * Defines whether the banner has a `Dismiss` button */ dismissButtonText?: string; /** * Defines the image used in the banner. * * The promotional banner adapts to different container sizes based on the image's `aspect-ratio`. * Only the following `aspect-ratio` values are supported: `16:9`, `2:1`, and `1:1`. * * In Storybook, to verify the image display, update `image.src` and `image.aspectRatio` as follows: * - `./1-1.png` with an aspect ratio of `1:1` * - `./2-1.png` with an aspect ratio of `2:1` * - `./16-9.png` with an aspect ratio of `16:9` */ image: BentoPromoBannerImage; /** * Defines style of the banner. * * The horizontal layout is responsive to the container size and * changes depending on the image aspect ratio. * * The vertical layout remains the same regardless of container size. */ layout?: `${BentoPromoBannerLayout}`; /** * Defines the title text to be shown on the banner */ title: string; } export type BentoPromoBannerImageAspectRatio = `${ | BentoImageAspectRatio.P16_9 | BentoImageAspectRatio.P2_1 | BentoImageAspectRatio.P1_1}`; export type BentoPromoBannerButtonVariant = `${BentoButtonVariant.PRIMARY | BentoButtonVariant.SECONDARY}`; /** * @deprecated Since v2.0.0. Use `BentoPromoBannerAction` without the generic instead. */ // eslint-disable-next-line @typescript-eslint/no-unused-vars export type BentoPromoBannerAction<IconType = object> = BentoButtonActionObject & { variant: BentoPromoBannerButtonVariant; }; export interface BentoPromoBannerImage { src: BentoImageProps['src']; alt?: BentoImageProps['alt']; aspectRatio: BentoPromoBannerImageAspectRatio; } export enum BentoPromoBannerColor { BLUE = 'blue', GREY = 'grey', GREEN = 'green', } export enum BentoPromoBannerLayout { HORIZONTAL = 'horizontal', VERTICAL = 'vertical', } 
+import { type BentoButtonActionObject } from '@/components/button'; import { type BentoButtonVariant } from '../button'; import { type BentoImageAspectRatio, type BentoImageProps } from '../image'; export interface BentoPromoBannerProps { /** * List of actions that will be used to render the buttons. * * Each object in the list should have a `title`, an `event` and a `variant`. * * `title`: Button's text. * `event`: Event triggered when clicking the Button. * `variant`: Button's style. * * ``` * [{ * title: 'Primary', * event: () => { ... }, * variant: 'primary' * }, { * title: 'Secondary', * event: () => { ... } * variant: 'secondary' * }] * ``` */ actions?: Array<BentoPromoBannerAction>; /** * Defines the color of banner's background */ color?: `${BentoPromoBannerColor}`; /** * Defines whether the banner has a `Dismiss` button */ isDismissible?: boolean; /** * Defines whether the banner has a `Dismiss` button */ dismissButtonText?: string; /** * Defines the image used in the banner. * * The promotional banner adapts to different container sizes based on the image's `aspect-ratio`. * Only the following `aspect-ratio` values are supported: `16:9`, `2:1`, and `1:1`. * * In Storybook, to verify the image display, update `image.src` and `image.aspectRatio` as follows: * - `./1-1.png` with an aspect ratio of `1:1` * - `./2-1.png` with an aspect ratio of `2:1` * - `./16-9.png` with an aspect ratio of `16:9` */ image: BentoPromoBannerImage; /** * Defines style of the banner. * * The horizontal layout is responsive to the container size and * changes depending on the image aspect ratio. * * The vertical layout remains the same regardless of container size. */ layout?: `${BentoPromoBannerLayout}`; /** * Defines the title text to be shown on the banner */ title: string; } export type BentoPromoBannerImageAspectRatio = `${ | BentoImageAspectRatio.P16_9 | BentoImageAspectRatio.P2_1 | BentoImageAspectRatio.P1_1}`; export type BentoPromoBannerButtonVariant = `${BentoButtonVariant.PRIMARY | BentoButtonVariant.SECONDARY}`; /** * @deprecated Since v3.0.0. Use `BentoPromoBannerAction` without the generic instead. */ // eslint-disable-next-line @typescript-eslint/no-unused-vars export type BentoPromoBannerAction<IconType = object> = BentoButtonActionObject & { variant: BentoPromoBannerButtonVariant; }; export interface BentoPromoBannerImage { src: BentoImageProps['src']; alt?: BentoImageProps['alt']; aspectRatio: BentoPromoBannerImageAspectRatio; } export enum BentoPromoBannerColor { BLUE = 'blue', GREY = 'grey', GREEN = 'green', } export enum BentoPromoBannerLayout { HORIZONTAL = 'horizontal', VERTICAL = 'vertical', } 

package/dist/assets/components/promo-banner/promo-banner.vue

@@ -1 +1 @@
-<template> <section ref="promoBannerRef" class="b-promo-banner" :class="bannerConditionalClass" :aria-labelledby="promoBannerTitleId" > <div class="b-promo-banner__content"> <div class="b-promo-banner__content-header"> <bento-typography :id="promoBannerTitleId" variant="title" large> {{ title }} </bento-typography> <slot name="description" /> </div> <div class="b-promo-banner__content-actions"> <template v-if="actions"> <bento-button v-for="(button, index) in actions" :key="index" :variant="button.variant" :critical="button.critical" :disabled="button.disabled" :inverse="button.inverse" :icon-only="button.iconOnly" :link="button.link" @click="button.event" > <template v-if="button.icon || button.iconLeft" #iconLeft> <component :is="button.icon || button.iconLeft" :svg-title="button.title"></component> </template> <template v-if="!isIconOnly(button)" #default> {{ button.title }} </template> <template v-if="button.iconRight" #iconRight> <component :is="button.iconRight" :svg-title="button.title"></component> </template> </bento-button> </template> <bento-button v-if="isDismissible" variant="secondary" @click="emit('dismiss')"> {{ computedDismissButtonText }} </bento-button> </div> </div> <div class="b-promo-banner__image"> <bento-image class="b-promo-banner__image-item" :src="image.src" :alt="image.alt ?? ''" :aspect-ratio="image.aspectRatio" :object-fit="BentoImageObjectFit.CONTAIN" ></bento-image> </div> </section> </template> <script setup lang="ts"> import { useElementSize } from '@vueuse/core'; import { computed, ref } from 'vue'; // Components import { BentoButton, type BentoButtonActionObject } from '@/components/button'; import { BentoImage, BentoImageAspectRatio, BentoImageObjectFit } from '@/components/image'; import { BentoTypography } from '@/components/typography'; import { BentoPromoBannerColor, BentoPromoBannerLayout, type BentoPromoBannerProps } from './promo-banner.types'; // Utils import { useI18n } from '@/utils/ts/i18n'; import { generateUid } from '@/core/utils/ts'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<BentoPromoBannerProps>(), { actions: null, color: BentoPromoBannerColor.GREY, isDismissible: true, dismissButtonText: null, layout: BentoPromoBannerLayout.HORIZONTAL, }); const emit = defineEmits<{ /** * Emits a dismiss event when dismiss button on the promotional banner is pressed */ (e: 'dismiss'); }>(); const promoBannerRef = ref(null); const promoBannerSize = useElementSize(promoBannerRef); const promoBannerTitleId = generateUid('promoBannerTitle'); const horizontalLayoutBreakpoint = computed(() => { if (props.image.aspectRatio === BentoImageAspectRatio.P16_9) { return 800; } else if (props.image.aspectRatio === BentoImageAspectRatio.P2_1) { return 850; } else if (props.image.aspectRatio === BentoImageAspectRatio.P1_1) { return 623; } return 0; }); const bannerLayoutClass = computed(() => { // only horizontal layout is responsive and, by design, follows the container size if ( props.layout === BentoPromoBannerLayout.HORIZONTAL && promoBannerSize.width.value <= horizontalLayoutBreakpoint.value ) { return BentoPromoBannerLayout.VERTICAL; } return props.layout; }); const bannerConditionalClass = computed(() => [`b-promo-banner--${bannerLayoutClass.value}`, `b-promo-banner--${props.color}`].join(' ') ); const isIconOnly = (button: BentoButtonActionObject) => button.iconOnly && (button.iconLeft || button.iconRight || button.icon); const computedDismissButtonText = computed(() => props.dismissButtonText || t('dismiss')); </script> <script lang="ts"> /** * Promotional Banner highlights important information, announcements, or promotions. * * @example * import { BentoPromoBanner } from '@adyen/bento-vue2'; * * export default { * components: { BentoPromoBanner }, * template: ` * <bento-promo-banner * title="Title" * description="Brief description explaining and giving more information about the title" * :image="{ src: '16-1.png', aspectRatio: '16:9' }" * :actions="[{ title: 'Primary', event: () => {} }]" * > * </bento-promo-banner> * ` * }; */ export default { i18n: { messages }, name: 'bento-promo-banner', }; </script> <style lang="scss" scoped src="./promo-banner.scss" /> 
+<template> <section ref="promoBannerRef" class="b-promo-banner" :class="bannerConditionalClass" :aria-labelledby="promoBannerTitleId" > <div class="b-promo-banner__content"> <div class="b-promo-banner__content-header"> <bento-typography :id="promoBannerTitleId" variant="title" large> {{ title }} </bento-typography> <slot name="description" /> </div> <div class="b-promo-banner__content-actions"> <template v-if="actions"> <bento-button v-for="(button, index) in actions" :key="index" :variant="button.variant" :critical="button.critical" :disabled="button.disabled" :inverse="button.inverse" :icon-only="button.iconOnly" :link="button.link" @click="button.event" > <template v-if="button.icon || button.iconLeft" #iconLeft> <component :is="button.icon || button.iconLeft" :svg-title="button.title"></component> </template> <template v-if="!isIconOnly(button)" #default> {{ button.title }} </template> <template v-if="button.iconRight" #iconRight> <component :is="button.iconRight" :svg-title="button.title"></component> </template> </bento-button> </template> <bento-button v-if="isDismissible" variant="secondary" @click="emit('dismiss')"> {{ computedDismissButtonText }} </bento-button> </div> </div> <div class="b-promo-banner__image"> <bento-image class="b-promo-banner__image-item" :src="image.src" :alt="image.alt ?? ''" :aspect-ratio="image.aspectRatio" :object-fit="BentoImageObjectFit.CONTAIN" ></bento-image> </div> </section> </template> <script setup lang="ts"> import { useElementSize } from '@vueuse/core'; import { computed, ref } from 'vue'; // Components import { BentoButton, type BentoButtonActionObject } from '@/components/button'; import { BentoImage, BentoImageAspectRatio, BentoImageObjectFit } from '@/components/image'; import { BentoTypography } from '@/components/typography'; import { BentoPromoBannerColor, BentoPromoBannerLayout, type BentoPromoBannerProps } from './promo-banner.types'; // Utils import { useI18n } from '@/utils/ts/i18n'; import { generateUid } from '@/utils/ts/generate-uid'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<BentoPromoBannerProps>(), { actions: null, color: BentoPromoBannerColor.GREY, isDismissible: true, dismissButtonText: null, layout: BentoPromoBannerLayout.HORIZONTAL, }); const emit = defineEmits<{ /** * Emits a dismiss event when dismiss button on the promotional banner is pressed */ (e: 'dismiss'); }>(); const promoBannerRef = ref(null); const promoBannerSize = useElementSize(promoBannerRef); const promoBannerTitleId = generateUid('promoBannerTitle'); const horizontalLayoutBreakpoint = computed(() => { if (props.image.aspectRatio === BentoImageAspectRatio.P16_9) { return 800; } else if (props.image.aspectRatio === BentoImageAspectRatio.P2_1) { return 850; } else if (props.image.aspectRatio === BentoImageAspectRatio.P1_1) { return 623; } return 0; }); const bannerLayoutClass = computed(() => { // only horizontal layout is responsive and, by design, follows the container size if ( props.layout === BentoPromoBannerLayout.HORIZONTAL && promoBannerSize.width.value <= horizontalLayoutBreakpoint.value ) { return BentoPromoBannerLayout.VERTICAL; } return props.layout; }); const bannerConditionalClass = computed(() => [`b-promo-banner--${bannerLayoutClass.value}`, `b-promo-banner--${props.color}`].join(' ') ); const isIconOnly = (button: BentoButtonActionObject) => button.iconOnly && (button.iconLeft || button.iconRight || button.icon); const computedDismissButtonText = computed(() => props.dismissButtonText || t('dismiss')); </script> <script lang="ts"> /** * Promotional Banner highlights important information, announcements, or promotions. * * @example * import { BentoPromoBanner } from '@adyen/bento-vue2'; * * export default { * components: { BentoPromoBanner }, * template: ` * <bento-promo-banner * title="Title" * description="Brief description explaining and giving more information about the title" * :image="{ src: '16-1.png', aspectRatio: '16:9' }" * :actions="[{ title: 'Primary', event: () => {} }]" * > * </bento-promo-banner> * ` * }; */ export default { i18n: { messages }, name: 'bento-promo-banner', }; </script> <style lang="scss" scoped src="./promo-banner.scss" /> 

package/dist/assets/components/radio-group/components/radio-button/radio-button.vue

@@ -1 +1 @@
-<template> <div class="b-radio-button" data-testid="radio-button-container" :class="conditionalClassContainer"> <radio-input :id="radioButtonId" ref="radioInputRef" :aria-label="ariaLabel" :aria-describedby="hasSlot('description') ? descriptionId : ''" :checked="isChecked" :disabled="disabled" :readonly="readonly" :has-error="hasError" :value="value" :model-value="modelValue" :name="name" @update:model-value="onChange" /> <div> <label v-if="hasSlot('default')" :for="radioButtonId" class="b-radio-button__label-container"> <span v-if="hasSlot('default')" class="b-radio-button__primary-label"> <bento-typography class="b-radio-button__label" el="span" variant="body"><slot /></bento-typography> <bento-tag v-if="tag" class="b-radio-button__label-tag" v-bind="tag" /> </span> <bento-typography v-if="hasSlot('default') && hasSlot('description')" :id="descriptionId" class="b-radio-button__description" el="span" variant="body" > <slot name="description"></slot> </bento-typography> </label> <bento-typography v-if="hasSlot('content') && isChecked" class="b-radio-button__content" el="div"> <slot name="content"></slot> </bento-typography> </div> </div> </template> <script setup lang="ts"> import { BentoTag } from '@/components/tag'; import { BentoTypography } from '@/components/typography'; import { RadioInput } from '../../../internal/radio-input'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { generateUid } from '@/core/utils/ts'; import { computed, type ComputedRef, type PropType, ref, toRefs, useSlots } from 'vue'; import { useDefaultSlotValidator, useHasSlot } from '@/composables'; import { BentoRadioButtonStateClass, type BentoRadioButtonTag, type BentoRadioButtonValue } from './radio-button.types'; import { getSlotText } from '@/utils/ts/get-slot-text'; const slots = useSlots(); const hasSlot = useHasSlot(slots); const props = defineProps({ /** * Disable the radio button (optional) */ disabled: { type: Boolean, default: false }, /** * Shows bento-radio-button in error state (optional) */ hasError: { type: Boolean, default: false }, /** * This property should not be used directly. * It will be used by v-model directive on radio component. */ modelValue: { type: [String, Number] as PropType<BentoRadioButtonValue>, default: null, }, /** * Sets the radio button to readonly (optional) */ readonly: { type: Boolean, default: false }, /** * Sets the properties of the BentoTag component that is placed next to the label. * {@see BentoTag} */ tag: { type: Object as PropType<BentoRadioButtonTag>, default: undefined }, /** * Indicates the value of the input that will be returned when it's checked */ value: { type: [String, Number] as PropType<BentoRadioButtonValue>, required: true, }, /** * Sets the name of the radio input. * Used for differentiating radio groups or accessing input via form submission. */ name: { type: String, default: null, }, }); const emit = defineEmits<{ /** * Emitted when the radio button is clicked. Enables Vue2 "v-model" */ (e: 'input', value: BentoRadioButtonValue); /** * Emitted when the radio button is clicked. Enables Vue3 "v-model" */ (e: 'update:model-value', value: BentoRadioButtonValue); }>(); const { value } = toRefs(props); const radioButtonId = generateUid('bento-radio-button'); const descriptionId = generateUid('description'); const radioInputRef = ref(null); useDefaultSlotValidator('bento-radio-button', slots.default, slots.description); const conditionalClassContainer = computed(() => ({ [`b-radio-button--${BentoRadioButtonStateClass.DISABLED}`]: props.disabled, [`b-radio-button--${BentoRadioButtonStateClass.READONLY}`]: props.readonly, })); const ariaLabel = useAriaLabel({ ariaLabel: getSlotText(slots)('default'), label: value.value as string, }); const isChecked: ComputedRef<boolean> = computed(() => props.value === props.modelValue); const onChange = () => { if (!props.disabled && !props.readonly) { emit('update:model-value', props.value); emit('input', props.value); } }; const focus = () => { radioInputRef.value.focus(); }; defineExpose({ focus, }); </script> <script lang="ts"> /** * Radio buttons are used when two or more options are mutually exclusive, * the user can only select a single option from a list of pre-defined options. * The label tag area is also clickable. * Only to be used internally. * * @example * import { BentoRadioButton } from '@adyen/bento-vue2'; * * export default { * components: { BentoRadioButton }, * template: ` * <bento-radio-button * disabled * value="inputRadio" * model-value.sync="modelValue" * > * Label text * <template #description>Description text below label</template> * <template #content>Content shown when checked</template> * </bento-radio-button> * `, * setup() { * const modelValue = ref('anyValue') * const value = 'option-value' * * return { * modelValue, * value, * } * } * } */ export default { name: 'bento-radio-button', model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./radio-button.scss" /> 
+<template> <div class="b-radio-button" data-testid="radio-button-container" :class="conditionalClassContainer"> <radio-input :id="radioButtonId" ref="radioInputRef" :aria-label="ariaLabel" :aria-describedby="hasSlot('description') ? descriptionId : ''" :checked="isChecked" :disabled="disabled" :readonly="readonly" :has-error="hasError" :value="value" :model-value="modelValue" :name="name" @update:model-value="onChange" /> <div> <label v-if="hasSlot('default')" :for="radioButtonId" class="b-radio-button__label-container"> <span v-if="hasSlot('default')" class="b-radio-button__primary-label"> <bento-typography class="b-radio-button__label" el="span" variant="body"><slot /></bento-typography> <bento-tag v-if="tag" class="b-radio-button__label-tag" v-bind="tag" /> </span> <bento-typography v-if="hasSlot('default') && hasSlot('description')" :id="descriptionId" class="b-radio-button__description" el="span" variant="body" > <slot name="description"></slot> </bento-typography> </label> <bento-typography v-if="hasSlot('content') && isChecked" class="b-radio-button__content" el="div"> <slot name="content"></slot> </bento-typography> </div> </div> </template> <script setup lang="ts"> import { BentoTag } from '@/components/tag'; import { BentoTypography } from '@/components/typography'; import { RadioInput } from '../../../internal/radio-input'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { generateUid } from '@/utils/ts/generate-uid'; import { computed, type ComputedRef, type PropType, ref, toRefs, useSlots } from 'vue'; import { useDefaultSlotValidator, useHasSlot } from '@/composables'; import { BentoRadioButtonStateClass, type BentoRadioButtonTag, type BentoRadioButtonValue, } from './radio-button.types'; import { getSlotText } from '@/utils/ts/get-slot-text'; const slots = useSlots(); const hasSlot = useHasSlot(slots); const props = defineProps({ /** * Disable the radio button (optional) */ disabled: { type: Boolean, default: false }, /** * Shows bento-radio-button in error state (optional) */ hasError: { type: Boolean, default: false }, /** * This property should not be used directly. * It will be used by v-model directive on radio component. */ modelValue: { type: [String, Number] as PropType<BentoRadioButtonValue>, default: null, }, /** * Sets the radio button to readonly (optional) */ readonly: { type: Boolean, default: false }, /** * Sets the properties of the BentoTag component that is placed next to the label. * {@see BentoTag} */ tag: { type: Object as PropType<BentoRadioButtonTag>, default: undefined }, /** * Indicates the value of the input that will be returned when it's checked */ value: { type: [String, Number] as PropType<BentoRadioButtonValue>, required: true, }, /** * Sets the name of the radio input. * Used for differentiating radio groups or accessing input via form submission. */ name: { type: String, default: null, }, }); const emit = defineEmits<{ /** * Emitted when the radio button is clicked. Enables Vue2 "v-model" */ (e: 'input', value: BentoRadioButtonValue); /** * Emitted when the radio button is clicked. Enables Vue3 "v-model" */ (e: 'update:model-value', value: BentoRadioButtonValue); }>(); const { value } = toRefs(props); const radioButtonId = generateUid('bento-radio-button'); const descriptionId = generateUid('description'); const radioInputRef = ref(null); useDefaultSlotValidator('bento-radio-button', slots.default, slots.description); const conditionalClassContainer = computed(() => ({ [`b-radio-button--${BentoRadioButtonStateClass.DISABLED}`]: props.disabled, [`b-radio-button--${BentoRadioButtonStateClass.READONLY}`]: props.readonly, })); const ariaLabel = useAriaLabel({ ariaLabel: getSlotText(slots)('default'), label: value.value as string, }); const isChecked: ComputedRef<boolean> = computed(() => props.value === props.modelValue); const onChange = () => { if (!props.disabled && !props.readonly) { emit('update:model-value', props.value); emit('input', props.value); } }; const focus = () => { radioInputRef.value.focus(); }; defineExpose({ focus, }); </script> <script lang="ts"> /** * Radio buttons are used when two or more options are mutually exclusive, * the user can only select a single option from a list of pre-defined options. * The label tag area is also clickable. * Only to be used internally. * * @example * import { BentoRadioButton } from '@adyen/bento-vue2'; * * export default { * components: { BentoRadioButton }, * template: ` * <bento-radio-button * disabled * value="inputRadio" * model-value.sync="modelValue" * > * Label text * <template #description>Description text below label</template> * <template #content>Content shown when checked</template> * </bento-radio-button> * `, * setup() { * const modelValue = ref('anyValue') * const value = 'option-value' * * return { * modelValue, * value, * } * } * } */ export default { name: 'bento-radio-button', model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./radio-button.scss" /> 

package/dist/assets/components/radio-group/radio-group.docs.mdx

@@ -71,12 +71,7 @@ prop.
 
 ### Error
 
-There are two properties that control the error state of all rendered `bento-radio-button`'s within `bento-radio-group`:
-
-- `errorMessage`: renders all radio buttons with an error state and displays an error message beneath the buttons
-- `hasError`: renders all radio buttons with an error state
-
-`hasError` is deprecated and will be removed in the near future, so please use `errorMessage`.
+The `errorMessage` prop renders all radio buttons with an error state and displays an error message beneath the buttons.
 
 ### Hide Label
 

package/dist/assets/components/radio-group/radio-group.stories.ts

@@ -1 +1 @@
-import BentoRadioGroup from './radio-group.vue'; import { BentoInputField } from '@/components/input-field'; import { BentoRadioGroupVariant } from './radio-group.types'; import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { ref } from 'vue'; import { isVue2 } from 'vue-demi'; import RadioGroupSlotsExample from './__tests__/radio-group-slots-example.vue?raw'; import type { Meta, StoryObj } from '@storybook/vue'; const meta: Meta = { title: 'Radio Group', component: BentoRadioGroup, argTypes: { variant: { options: Object.values(BentoRadioGroupVariant), mapping: BentoRadioGroupVariant, control: { type: 'select', }, }, items: { table: { type: { summary: 'BentoRadioGroupItems' }, }, }, disabled: { control: { type: 'boolean', }, }, hasError: { control: { type: 'boolean' }, table: { category: 'Deprecated' }, }, 'update:model-value': { name: 'update:model-value', defaultValue: '', description: 'Input event handler.', table: { type: { summary: '(newValue: number | string | null) => void' }, }, control: { disable: true }, }, input: { description: 'Deprecated since version 2.0. Use `v-model` or `update:model-value` instead', table: { category: 'Deprecated', }, control: { disable: true }, }, }, }; export default meta; type Story = StoryObj<typeof BentoRadioGroup>; const RADIO_DEFAULT_LABEL = 'Label text'; const DEFAULT_PROPS = { label: 'Group label', description: 'Optional description', tooltipText: 'Tooltip text', items: [ { value: 1, label: RADIO_DEFAULT_LABEL }, { value: 2, label: `${RADIO_DEFAULT_LABEL} 2`, description: 'Descriptive sub label' }, { value: 3, label: `${RADIO_DEFAULT_LABEL} readonly`, readonly: true }, ], }; const defaultCode = ` <template> <!-- With model-value --> <bento-radio-group :items="[ { value: 1, label: 'Label text' }, { value: 2, label: 'Label text 2', description: 'Description text' }, ]" :model-value="yourModelValueVariable" @update:model-value="yourUpdateHandler" label="Group label" description="Optional description" variant="horizontal" /> <!-- With v-model Vue2/Vue3 --> <bento-radio-group :items="[ { value: 1, label: 'Label text' }, { value: 2, label: 'Label text 2', description: 'Description text' }, ]" v-model="yourModelValueVariable" label="Group label" description="Optional description" variant="horizontal" /> </template> <script setup lang="ts"> import { BentoRadioGroup } from '@adyen/bento-vue2'; const yourModelValueVariable = ref<number>(1); const yourUpdateHandler = (newValue: number) => { yourModelValueVariable.value = newValue; } </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoRadioGroup }, props: Object.keys(argTypes), template: ` <bento-radio-group v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction" /> `, setup(props) { const selectedValue = ref(undefined); const clickedAction = value => { selectedValue.value = value; action('update:model-value')(value); }; return { // Values selectedValue, args: isVue2 ? props : _args, // Events clickedAction, }; }, }), args: { ...DEFAULT_PROPS, }, parameters: storybookDocsParameter(defaultCode), }; export const Slots: Story = { render: (_args, { argTypes }) => ({ components: { BentoRadioGroup, BentoInputField }, props: Object.keys(argTypes), template: ` <bento-radio-group v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction" > <template #description> Description slot text. </template> <template #content> <bento-input-field /> </template> </bento-radio-group> `, setup(props) { const selectedValue = ref(undefined); const clickedAction = value => { selectedValue.value = value; action('update:model-value')(value); }; return { // Values selectedValue, args: isVue2 ? props : _args, // Events clickedAction, }; }, }), args: { ...DEFAULT_PROPS, }, parameters: storybookDocsParameter(RadioGroupSlotsExample), }; const withTagCode = ` <template> <!-- With model-value --> <bento-radio-group :items="[ { value: 1, label: 'Label text', tag: { label: 'Recommended' } }, { value: 2, label: 'Label text 2', description: 'Description text' }, ]" :model-value="yourModelValueVariable" @update:model-value="yourUpdateHandler" label="Group label" description="Optional description" variant="horizontal" /> <!-- With v-model Vue2/Vue3 --> <bento-radio-group :items="[ { value: 1, label: 'Label text', tag: { label: 'Recommended' } }, { value: 2, label: 'Label text 2', description: 'Description text' }, ]" v-model="yourModelValueVariable" label="Group label" description="Optional description" variant="horizontal" /> </template> <script setup lang="ts"> import { BentoRadioGroup } from '@adyen/bento-vue2'; const yourModelValueVariable = ref<number>(1); const yourUpdateHandler = (newValue: number) => { yourModelValueVariable.value = newValue; } </script> `; export const WithTag = { ...Default, args: { ...Default.args, items: [ { value: 1, label: RADIO_DEFAULT_LABEL, tag: { label: 'Recommended' } }, { value: 2, label: `${RADIO_DEFAULT_LABEL} 2`, description: 'Descriptive sub label', }, { value: 3, label: `${RADIO_DEFAULT_LABEL} readonly`, readonly: true }, ], }, parameters: storybookDocsParameter(withTagCode), }; 
+import BentoRadioGroup from './radio-group.vue'; import { BentoInputField } from '@/components/input-field'; import { BentoRadioGroupVariant } from './radio-group.types'; import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { ref } from 'vue'; import { isVue2 } from 'vue-demi'; const RadioGroupDefaultExample = "<template>\n <bento-radio-group\n :items=\"items\"\n :model-value=\"selectedValue\"\n label=\"Group label\"\n description=\"Optional description\"\n tooltip-text=\"Tooltip text\"\n @update:model-value=\"selectedValue = $event\"\n />\n</template>\n\n<script lang=\"ts\" setup>\n import { ref } from 'vue';\n import { BentoRadioGroup, type BentoRadioGroupValue } from '@adyen/bento-vue2';\n\n const selectedValue = ref<BentoRadioGroupValue | null>();\n const items = [\n { value: 1, label: 'Label text' },\n { value: 2, label: 'Label text 2', description: 'Descriptive sub label' },\n { value: 3, label: 'Label text readonly', readonly: true },\n ];\n</script>\n"; const RadioGroupSlotsExample = "<template>\n <div>\n <!-- With model-value -->\n <bento-radio-group\n :items=\"ITEMS\"\n :model-value=\"yourModelValueVariable\"\n label=\"Group label\"\n variant=\"vertical\"\n @update:model-value=\"yourUpdateHandler\"\n >\n <template #description>{{ DESCRIPTION_SLOT_TEXT }}</template>\n <template #content>\n <bento-input-field />\n </template>\n </bento-radio-group>\n\n <!-- With v-model Vue2/Vue3 -->\n <bento-radio-group v-model=\"yourModelValueVariable\" :items=\"ITEMS\" label=\"Group label\" variant=\"vertical\">\n <template #description>{{ DESCRIPTION_SLOT_TEXT }}</template>\n <template #content>\n <bento-input-field />\n </template>\n </bento-radio-group>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoInputField, BentoRadioGroup, type BentoRadioGroupItems } from '@adyen/bento-vue2';\n\n const ITEMS: BentoRadioGroupItems = [\n { value: 1, label: 'Label text' },\n { value: 2, label: 'Label text 2', description: 'Description text' },\n ];\n const DESCRIPTION_SLOT_TEXT = 'Description slot text.';\n\n const yourModelValueVariable = ref<number>(1);\n const yourUpdateHandler = (newValue: number) => {\n yourModelValueVariable.value = newValue;\n };\n</script>\n"; const RadioGroupWithTagExample = "<template>\n <bento-radio-group\n :items=\"items\"\n :model-value=\"selectedValue\"\n label=\"Group label\"\n description=\"Optional description\"\n tooltip-text=\"Tooltip text\"\n @update:model-value=\"selectedValue = $event\"\n />\n</template>\n\n<script lang=\"ts\" setup>\n import { ref } from 'vue';\n import { BentoRadioGroup, type BentoRadioGroupValue } from '@adyen/bento-vue2';\n\n const selectedValue = ref<BentoRadioGroupValue | null>();\n const items = [\n { value: 1, label: 'Label text', tag: { label: 'Recommended' } },\n { value: 2, label: 'Label text 2', description: 'Descriptive sub label' },\n { value: 3, label: 'Label text readonly', readonly: true },\n ];\n</script>\n"; import type { Meta, StoryObj } from '@storybook/vue'; const meta: Meta = { title: 'Radio Group', component: BentoRadioGroup, argTypes: { variant: { options: Object.values(BentoRadioGroupVariant), mapping: BentoRadioGroupVariant, control: { type: 'select', }, }, items: { table: { type: { summary: 'BentoRadioGroupItems' }, }, }, disabled: { control: { type: 'boolean', }, }, 'update:model-value': { name: 'update:model-value', defaultValue: '', description: 'Input event handler.', table: { type: { summary: '(newValue: number | string | null) => void' }, }, control: { disable: true }, }, }, }; export default meta; type Story = StoryObj<typeof BentoRadioGroup>; const RADIO_DEFAULT_LABEL = 'Label text'; const DEFAULT_PROPS = { label: 'Group label', description: 'Optional description', tooltipText: 'Tooltip text', items: [ { value: 1, label: RADIO_DEFAULT_LABEL }, { value: 2, label: `${RADIO_DEFAULT_LABEL} 2`, description: 'Descriptive sub label' }, { value: 3, label: `${RADIO_DEFAULT_LABEL} readonly`, readonly: true }, ], }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoRadioGroup }, props: Object.keys(argTypes), template: ` <bento-radio-group v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction" /> `, setup(props) { const selectedValue = ref(undefined); const clickedAction = value => { selectedValue.value = value; action('update:model-value')(value); }; return { // Values selectedValue, args: isVue2 ? props : _args, // Events clickedAction, }; }, }), args: { ...DEFAULT_PROPS, }, parameters: storybookDocsParameter(RadioGroupDefaultExample), }; export const Slots: Story = { render: (_args, { argTypes }) => ({ components: { BentoRadioGroup, BentoInputField }, props: Object.keys(argTypes), template: ` <bento-radio-group v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction" > <template #description> Description slot text. </template> <template #content> <bento-input-field /> </template> </bento-radio-group> `, setup(props) { const selectedValue = ref(undefined); const clickedAction = value => { selectedValue.value = value; action('update:model-value')(value); }; return { // Values selectedValue, args: isVue2 ? props : _args, // Events clickedAction, }; }, }), args: { ...DEFAULT_PROPS, }, parameters: storybookDocsParameter(RadioGroupSlotsExample), }; export const WithTag = { ...Default, args: { ...Default.args, items: [ { value: 1, label: RADIO_DEFAULT_LABEL, tag: { label: 'Recommended' } }, { value: 2, label: `${RADIO_DEFAULT_LABEL} 2`, description: 'Descriptive sub label', }, { value: 3, label: `${RADIO_DEFAULT_LABEL} readonly`, readonly: true }, ], }, parameters: storybookDocsParameter(RadioGroupWithTagExample), }; 

package/dist/assets/components/radio-group/radio-group.types.ts

@@ -1 +1 @@
-import type { FormField, FormFieldEmits } from '../../types/form-field'; import type { BentoRadioButtonTag, BentoRadioButtonValue } from './components/radio-button'; /** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoRadioGroupVariant { HORIZONTAL = 'horizontal', VERTICAL = 'vertical', } export type BentoRadioGroupValue = BentoRadioButtonValue; export interface BentoRadioGroupItem { value: BentoRadioGroupValue; label: string; description?: string; disabled?: boolean; readonly?: boolean; hasError?: boolean; tag?: BentoRadioButtonTag; } export type BentoRadioGroupItems = Array<BentoRadioGroupItem>; export type BentoRadioGroupEmits = FormFieldEmits<BentoRadioGroupValue>; export interface BentoRadioGroupProps extends FormField { /** * The form id the radio group is associated with. Defaults to null, as a radio group can also be used standalone. * @default null */ formId?: string | null; /** * If set to true, renders all bento-radio-buttons in the group in an error state. * @deprecated Since v2.0.0. Use `errorMessage` instead. * @default false */ hasError?: boolean; /** * Shows/hides the group label. * @default null */ hideLabel?: boolean | null; /** * The radio group's items. * Required. */ items: BentoRadioGroupItems; /** * The name associated with the group. Required for accessibility purposes. * Required. */ label: string; /** * Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value. * Defaults to no value selected. * @default null */ modelValue?: BentoRadioGroupValue | null; /** * The radio group's layout. It can be vertical or horizontal. Defaults to vertical. * @default BentoRadioGroupVariant.VERTICAL */ variant?: BentoRadioGroupVariant | `${BentoRadioGroupVariant}`; } 
+import type { FormField, FormFieldEmits } from '../../types/form-field'; import type { BentoRadioButtonTag, BentoRadioButtonValue } from './components/radio-button'; /** * @deprecated Since v3.0.0. Use string literal instead. */ export enum BentoRadioGroupVariant { HORIZONTAL = 'horizontal', VERTICAL = 'vertical', } export type BentoRadioGroupValue = BentoRadioButtonValue; export interface BentoRadioGroupItem { value: BentoRadioGroupValue; label: string; description?: string; disabled?: boolean; readonly?: boolean; hasError?: boolean; tag?: BentoRadioButtonTag; } export type BentoRadioGroupItems = Array<BentoRadioGroupItem>; export type BentoRadioGroupEmits = FormFieldEmits<BentoRadioGroupValue>; export interface BentoRadioGroupProps extends FormField { /** * The form id the radio group is associated with. Defaults to null, as a radio group can also be used standalone. * @default null */ formId?: string | null; /** * Shows/hides the group label. * @default null */ hideLabel?: boolean | null; /** * The radio group's items. * Required. */ items: BentoRadioGroupItems; /** * The name associated with the group. Required for accessibility purposes. * Required. */ label: string; /** * Determines the initially selected value of the group. Corresponds to the BentoRadioButtonItem's value. * Defaults to no value selected. * @default null */ modelValue?: BentoRadioGroupValue | null; /** * The radio group's layout. It can be vertical or horizontal. Defaults to vertical. * @default BentoRadioGroupVariant.VERTICAL */ variant?: BentoRadioGroupVariant | `${BentoRadioGroupVariant}`; } 

package/dist/assets/components/radio-group/radio-group.vue

@@ -1 +1 @@
-<template> <div class="b-radio-group"> <controls-group class="b-radio-group__buttons" :aria-describedby="shouldShowErrorMessage ? errorId : ''" :aria-required="required" :component-name="COMPONENT_NAME" :class="conditionalClasses" :description="description" :disabled="disabled" :form="formId" :label="label" :optional="optional" :required="required" :hide-label="hideLabel" :tooltip-text="tooltipText" role="radiogroup" :aria-readonly="isReadOnly" > <bento-radio-button v-for="item in items" ref="radioButton" :key="item.value" :model-value="inputValue" :value="item.value" :disabled="disabled || item.disabled" :readonly="isReadOnly || item.readonly" :has-error="shouldShowError || item.hasError" :tag="item.tag" :name="formId || label" @update:model-value="onUpdateModelValue" > <template #default>{{ item.label }}</template> <template v-if="item.description" #description>{{ item.description }}</template> <template v-if="hasSlot('content') && isVertical" #content> <slot name="content"></slot> </template> </bento-radio-button> <template v-if="hasSlot('description')" #description> <slot name="description" /> </template> </controls-group> <error-message v-if="shouldShowErrorMessage" :id="errorId" :error-message="errorMessage" class="b-radio-group__error-message" /> </div> </template> <script setup lang="ts"> import { computed, ref, toRef, useSlots, watch } from 'vue'; import { ControlsGroup, ErrorMessage } from '@/components/internal'; import { BentoRadioButton } from './components/radio-button'; import { useHasSlot } from '@/composables'; import { generateUid } from '@/core/utils/ts'; import { deprecate } from '@/utils/ts/deprecate'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; import { type BentoRadioGroupEmits, type BentoRadioGroupProps, BentoRadioGroupVariant } from './radio-group.types'; import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading'; /** * The name of the component to be used in the Vue devtools and console warnings. */ const COMPONENT_NAME = 'bento-radio-group'; const slots = useSlots(); const hasSlot = useHasSlot(slots); const emit = defineEmits<BentoRadioGroupEmits>(); const props = withDefaults(defineProps<BentoRadioGroupProps>(), { description: null, disabled: false, errorMessage: null, formId: null, hasError: false, hideLabel: null, modelValue: null, optional: false, readonly: false, required: false, tooltipText: null, variant: BentoRadioGroupVariant.VERTICAL, }); const inputValue = toRef(props, 'modelValue'); const errorId = generateUid('error'); const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly')); const { emitValue } = useFormFieldEmits(emit); const radioButton = ref(null); const shouldShowError = computed( () => !props.disabled && !isReadOnly.value && (!!props.errorMessage || props.hasError) ); const shouldShowErrorMessage = computed(() => !props.disabled && !isReadOnly.value && !!props.errorMessage); const conditionalClasses = computed(() => ({ 'b-radio-group__buttons--horizontal': props.variant === BentoRadioGroupVariant.HORIZONTAL, })); // Content slot logic const isVertical = computed(() => props.variant === 'vertical'); const shouldShowSlotError = computed(() => hasSlot('content') && !isVertical?.value); const onUpdateModelValue = value => { emitValue(value); }; if (props.hasError) { deprecate( 'BentoRadioGroup "hasError" property', `Use the BentoRadioGroup "errorMessage" property instead to indicate that there is a modifier error. Having the field as "undefined" will hide/remove the error. <bento-radio-group errorMessage="Error message text" />`, '2.0.0' ); } watch( shouldShowSlotError, newVal => { if (newVal) { throw new Error('The content slot is only available for the vertical radio group layout'); } }, { immediate: true, } ); const focus = () => { radioButton.value[0].focus(); }; defineExpose({ focus, }); </script> <script lang="ts"> /** * A radio group component should be used whenever it is necessary to use a set of radio buttons * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/ * * import { BentoRadioGroup } from '@adyen/bento-vue2/'; * * export default { * components: { BentoRadioGroup }, * template: ` * <bento-radio-group * label="Your group label" * :items="[ * { value: 1, label: 'Your label' }, * { value: 2, label: 'Another label', description: 'Your descriptive sub label' }, * ]" * variant="horizontal" * /> * ` * }; */ export default { name: 'bento-radio-group', model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./radio-group.scss" /> 
+<template> <div class="b-radio-group"> <controls-group class="b-radio-group__buttons" :aria-describedby="shouldShowError ? errorId : ''" :aria-required="required" :component-name="COMPONENT_NAME" :class="conditionalClasses" :description="description" :disabled="disabled" :form="formId" :label="label" :optional="optional" :required="required" :hide-label="hideLabel" :tooltip-text="tooltipText" role="radiogroup" :aria-readonly="isReadOnly" > <bento-radio-button v-for="item in items" ref="radioButton" :key="item.value" :model-value="inputValue" :value="item.value" :disabled="disabled || item.disabled" :readonly="isReadOnly || item.readonly" :has-error="shouldShowError || item.hasError" :tag="item.tag" :name="formId || label" @update:model-value="onUpdateModelValue" > <template #default>{{ item.label }}</template> <template v-if="item.description" #description>{{ item.description }}</template> <template v-if="hasSlot('content') && isVertical" #content> <slot name="content"></slot> </template> </bento-radio-button> <template v-if="hasSlot('description')" #description> <slot name="description" /> </template> </controls-group> <error-message v-if="shouldShowError" :id="errorId" :error-message="errorMessage" class="b-radio-group__error-message" /> </div> </template> <script setup lang="ts"> import { computed, ref, toRef, useSlots, watch } from 'vue'; import { ControlsGroup, ErrorMessage } from '@/components/internal'; import { BentoRadioButton } from './components/radio-button'; import { useHasSlot } from '@/composables'; import { generateUid } from '@/utils/ts/generate-uid'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; import { type BentoRadioGroupEmits, type BentoRadioGroupProps, BentoRadioGroupVariant } from './radio-group.types'; import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading'; /** * The name of the component to be used in the Vue devtools and console warnings. */ const COMPONENT_NAME = 'bento-radio-group'; const slots = useSlots(); const hasSlot = useHasSlot(slots); const emit = defineEmits<BentoRadioGroupEmits>(); const props = withDefaults(defineProps<BentoRadioGroupProps>(), { description: null, disabled: false, errorMessage: null, formId: null, hideLabel: null, modelValue: null, optional: false, readonly: false, required: false, tooltipText: null, variant: BentoRadioGroupVariant.VERTICAL, }); const inputValue = toRef(props, 'modelValue'); const errorId = generateUid('error'); const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly')); const { emitValue } = useFormFieldEmits(emit); const radioButton = ref(null); const shouldShowError = computed(() => !props.disabled && !isReadOnly.value && !!props.errorMessage); const conditionalClasses = computed(() => ({ 'b-radio-group__buttons--horizontal': props.variant === BentoRadioGroupVariant.HORIZONTAL, })); // Content slot logic const isVertical = computed(() => props.variant === 'vertical'); const shouldShowSlotError = computed(() => hasSlot('content') && !isVertical?.value); const onUpdateModelValue = value => { emitValue(value); }; watch( shouldShowSlotError, newVal => { if (newVal) { throw new Error('The content slot is only available for the vertical radio group layout'); } }, { immediate: true, } ); const focus = () => { radioButton.value[0].focus(); }; defineExpose({ focus, }); </script> <script lang="ts"> /** * A radio group component should be used whenever it is necessary to use a set of radio buttons * This component conforms to the official WAI-ARIA guidelines for grouping controls: https://www.w3.org/WAI/tutorials/forms/grouping/ * * import { BentoRadioGroup } from '@adyen/bento-vue2/'; * * export default { * components: { BentoRadioGroup }, * template: ` * <bento-radio-group * label="Your group label" * :items="[ * { value: 1, label: 'Your label' }, * { value: 2, label: 'Another label', description: 'Your descriptive sub label' }, * ]" * variant="horizontal" * /> * ` * }; */ export default { name: 'bento-radio-group', model: { prop: 'modelValue', event: 'update:model-value' }, }; </script> <style lang="scss" scoped src="./radio-group.scss" /> 

package/dist/assets/components/rich-text-editor/rich-text-editor.internal.types.ts

@@ -0,0 +1 @@
+export const BentoRichTextEditorModeOptions = ['markdown', 'visual'] as const; 

package/dist/assets/components/rich-text-editor/rich-text-editor.stories.ts

@@ -1 +1 @@
-import { isVue2 } from 'vue-demi'; import { ref, watch } from 'vue'; import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoRichTextEditor from './rich-text-editor.vue'; import type { Meta, StoryObj } from '@storybook/vue'; const meta: Meta = { title: 'Rich text editor', component: BentoRichTextEditor, argTypes: { mode: { name: 'mode', type: { name: 'string', required: false }, description: 'switch between Markdown or Visual mode', options: ['markdown', 'visual'], mapping: { markdown: 'markdown', visual: 'visual' }, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoRichTextEditor>; const DEFAULT_LABEL = 'Label'; const DEFAULT_DESCRIPTION = 'Supporting text'; const DEFAULT_MARKDOWN_VALUE = ` # All rendering elements ## Renders a paragraph This is just a plain paragraph ## Renders a table | Month | Savings | | -------- | ------- | | January | $250 | | February | $80 | | March | $420 | ## Renders a link [Adyen.com](https://adyen.com) ## Renders lists ### An unordered list * An unordered * List of things * To test how it renders ### An ordered list 1. An ordered 2. List of things 3. To test how it renders ### A tasks list - [ ] a task list item - [ ] list syntax required ## Renders html as plain text <html> <body> <p>This is html content</p> <script>alert('This should be rendered as text')</script> </body> </html> ## Renders code \`\`\` git status git add git commit \`\`\` ## Renders quotes > Text that is a quote `; const defaultProps = { label: DEFAULT_LABEL, hideLabel: false, disabled: false, description: DEFAULT_DESCRIPTION, value: DEFAULT_MARKDOWN_VALUE, }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoRichTextEditor }, props: Object.keys(argTypes), template: ` <bento-rich-text-editor v-bind="args" :label="args.label" :hideLabel="args.hideLabel" :description="args.description" :value="inputValue" @input="inputAction" /> `, setup(props) { const args = isVue2 ? props : _args; const inputValue = ref(args.value); const inputAction = (value: string) => { inputValue.value = value; action('input')(value); }; watch( () => args.value, () => { inputValue.value = args.value; } ); return { args, inputValue, inputAction, }; }, }), args: { ...defaultProps, }, parameters: storybookDocsParameter(` <bento-rich-text-editor :value="inputValue" @input="inputValue" /> `), }; export const VisualMode: Story = { render: (_args, { argTypes }) => ({ components: { BentoRichTextEditor }, props: Object.keys(argTypes), template: ` <bento-rich-text-editor v-bind="args" :label="args.label" :hideLabel="args.hideLabel" :description="args.description" mode="visual" :value="inputValue" @input="inputAction" /> `, setup(props) { const args = isVue2 ? props : _args; const inputValue = ref(args.value); const inputAction = (value: string) => { inputValue.value = value; action('input')(value); }; watch( () => args.value, () => { inputValue.value = args.value; } ); return { args, inputValue, inputAction, }; }, }), args: { ...defaultProps, mode: 'visual', }, parameters: storybookDocsParameter(` <bento-rich-text-editor :value="inputValue" mode="visual" @input="inputValue" /> `), }; 
+import { isVue2 } from 'vue-demi'; import { ref, watch } from 'vue'; import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoRichTextEditor from './rich-text-editor.vue'; const RichTextEditorDefaultExample = "<template>\n <bento-rich-text-editor\n label=\"Label\"\n description=\"Supporting text\"\n :value=\"inputValue\"\n @input=\"inputValue = $event\"\n />\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoRichTextEditor } from '@adyen/bento-vue2';\n\n const closingScriptTag = ['</', 'script>'].join('');\n const inputValue = ref(`\n# All rendering elements\n\n## Renders a paragraph\nThis is just a plain paragraph\n\n## Renders a table\n| Month | Savings |\n| -------- | ------- |\n| January | $250 |\n| February | $80 |\n| March | $420 |\n\n## Renders a link\n[Adyen.com](https://adyen.com)\n\n## Renders lists\n### An unordered list\n* An unordered\n* List of things\n* To test how it renders\n### An ordered list\n1. An ordered\n2. List of things\n3. To test how it renders\n### A tasks list\n- [ ] a task list item\n- [ ] list syntax required\n\n## Renders html as plain text\n<html>\n<body>\n<p>This is html content</p>\n<script>alert('This should be rendered as text')${closingScriptTag}\n</body>\n</html>\n\n## Renders code\n\\`\\`\\`\ngit status\ngit add\ngit commit\n\\`\\`\\`\n\n## Renders quotes\n> Text that is a quote\n`);\n</script>\n"; const RichTextEditorVisualModeExample = "<template>\n <bento-rich-text-editor\n label=\"Label\"\n description=\"Supporting text\"\n mode=\"visual\"\n :value=\"inputValue\"\n @input=\"inputValue = $event\"\n />\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoRichTextEditor } from '@adyen/bento-vue2';\n\n const closingScriptTag = ['</', 'script>'].join('');\n const inputValue = ref(`\n# All rendering elements\n\n## Renders a paragraph\nThis is just a plain paragraph\n\n## Renders a table\n| Month | Savings |\n| -------- | ------- |\n| January | $250 |\n| February | $80 |\n| March | $420 |\n\n## Renders a link\n[Adyen.com](https://adyen.com)\n\n## Renders lists\n### An unordered list\n* An unordered\n* List of things\n* To test how it renders\n### An ordered list\n1. An ordered\n2. List of things\n3. To test how it renders\n### A tasks list\n- [ ] a task list item\n- [ ] list syntax required\n\n## Renders html as plain text\n<html>\n<body>\n<p>This is html content</p>\n<script>alert('This should be rendered as text')${closingScriptTag}\n</body>\n</html>\n\n## Renders code\n\\`\\`\\`\ngit status\ngit add\ngit commit\n\\`\\`\\`\n\n## Renders quotes\n> Text that is a quote\n`);\n</script>\n"; import { BentoRichTextEditorModeOptions } from './rich-text-editor.internal.types'; import type { Meta, StoryObj } from '@storybook/vue'; const meta: Meta = { title: 'Rich text editor', component: BentoRichTextEditor, argTypes: { mode: { name: 'mode', type: { name: 'string', required: false }, description: 'switch between Markdown or Visual mode', options: BentoRichTextEditorModeOptions, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoRichTextEditor>; const DEFAULT_LABEL = 'Label'; const DEFAULT_DESCRIPTION = 'Supporting text'; const DEFAULT_MARKDOWN_VALUE = ` # All rendering elements ## Renders a paragraph This is just a plain paragraph ## Renders a table | Month | Savings | | -------- | ------- | | January | $250 | | February | $80 | | March | $420 | ## Renders a link [Adyen.com](https://adyen.com) ## Renders lists ### An unordered list * An unordered * List of things * To test how it renders ### An ordered list 1. An ordered 2. List of things 3. To test how it renders ### A tasks list - [ ] a task list item - [ ] list syntax required ## Renders html as plain text <html> <body> <p>This is html content</p> <script>alert('This should be rendered as text')</script> </body> </html> ## Renders code \`\`\` git status git add git commit \`\`\` ## Renders quotes > Text that is a quote `; const defaultProps = { label: DEFAULT_LABEL, hideLabel: false, disabled: false, description: DEFAULT_DESCRIPTION, value: DEFAULT_MARKDOWN_VALUE, }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoRichTextEditor }, props: Object.keys(argTypes), template: ` <bento-rich-text-editor v-bind="args" :label="args.label" :hideLabel="args.hideLabel" :description="args.description" :value="inputValue" @input="inputAction" /> `, setup(props) { const args = isVue2 ? props : _args; const inputValue = ref(args.value); const inputAction = (value: string) => { inputValue.value = value; action('input')(value); }; watch( () => args.value, () => { inputValue.value = args.value; } ); return { args, inputValue, inputAction, }; }, }), args: { ...defaultProps, }, parameters: storybookDocsParameter(RichTextEditorDefaultExample), }; export const VisualMode: Story = { render: (_args, { argTypes }) => ({ components: { BentoRichTextEditor }, props: Object.keys(argTypes), template: ` <bento-rich-text-editor v-bind="args" :label="args.label" :hideLabel="args.hideLabel" :description="args.description" mode="visual" :value="inputValue" @input="inputAction" /> `, setup(props) { const args = isVue2 ? props : _args; const inputValue = ref(args.value); const inputAction = (value: string) => { inputValue.value = value; action('input')(value); }; watch( () => args.value, () => { inputValue.value = args.value; } ); return { args, inputValue, inputAction, }; }, }), args: { ...defaultProps, mode: 'visual', }, parameters: storybookDocsParameter(RichTextEditorVisualModeExample), }; 

package/dist/assets/components/rich-text-editor/rich-text-editor.types.ts

@@ -1 +1 @@
-/** * Private */ export type BentoRichTextEditorMode = 'visual' | 'markdown'; /** * Public */ export interface BentoRichTextEditorProps { /** * Descriptive supporting text visibile underneath the rich text editor. */ description?: string; /** * Disables rich text editor functionality. */ disabled?: boolean; /** * Highlights the rich text editor in an erroneous state with an error message. */ errorMessage?: string; /** * Shows/hides the label. */ hideLabel?: boolean; /** * Text that is displayed as a label above the element. */ label?: string; /** * Allows the component to render first in visual mode. */ mode?: BentoRichTextEditorMode; /** * Highlights the rich text editor is required. */ required?: boolean; /** * Adds a info icon next to the label to display the passed tooltip message. */ tooltipText?: string; /** * Text displayed as the value of the rich text editor */ value?: string; } 
+import type { BentoRichTextEditorModeOptions } from './rich-text-editor.internal.types'; export type BentoRichTextEditorMode = (typeof BentoRichTextEditorModeOptions)[number]; export interface BentoRichTextEditorProps { /** * Descriptive supporting text visibile underneath the rich text editor. */ description?: string; /** * Disables rich text editor functionality. */ disabled?: boolean; /** * Highlights the rich text editor in an erroneous state with an error message. */ errorMessage?: string; /** * Shows/hides the label. */ hideLabel?: boolean; /** * Text that is displayed as a label above the element. */ label?: string; /** * Allows the component to render first in visual mode. */ mode?: BentoRichTextEditorMode; /** * Highlights the rich text editor is required. */ required?: boolean; /** * Adds a info icon next to the label to display the passed tooltip message. */ tooltipText?: string; /** * Text displayed as the value of the rich text editor */ value?: string; } 

package/dist/assets/components/rich-text-editor/rich-text-editor.vue

@@ -1 +1 @@
-<template> <bento-typography el="div" class="b-rich-text-editor" rich-text> <field-label v-if="!hideLabel" :label="label" :tooltip-text="tooltipText" :required="required" /> <div v-bind="attrs" class="b-rich-text-editor__container" data-testid="rich-text-editor-container" :aria-disabled="disabled" :class="conditionalClasses" > <div class="b-rich-text-editor__toolbar"> <bento-segmented-control v-model="selectedMode" :items="richTextEditorModeOptions" /> </div> <keep-alive> <rich-text-editor-content-area v-if="selectedMode === 'markdown'" :value="internalValue" role="textbox" aria-multiline="true" :disabled="disabled" :aria-label="computedAriaLabel" :aria-describedby="ariaDescribedBy" :aria-required="required" @input="onInput" /> <bento-alert v-else-if="error" type="critical"> <template #default> {{ t('errorProcessingMarkdown', { value: error }) }} </template> </bento-alert> <rich-text-editor-renderer v-else :node="node" class="b-rich-text-editor__renderer" :class="rendererConditionalClasses" /> </keep-alive> </div> <error-message v-if="!!errorMessage" :id="errorId" :error-message="errorMessage" class="b-rich-text-editor__error-message" /> <span v-if="description" :id="descriptionId" class="b-rich-text-editor__description"> <bento-typography el="span" variant="body">{{ description }}</bento-typography> </span> </bento-typography> </template> <script setup lang="ts"> import { computed, ref, useAttrs, watch } from 'vue'; import type { Root } from 'mdast'; // Components import BentoTypography from '@/components/typography/typography.vue'; import BentoSegmentedControl from '@/components/segmented-control/segmented-control.vue'; import BentoAlert from '@/components/alert/alert.vue'; import { ErrorMessage, FieldLabel } from '@/internal'; import RichTextEditorContentArea from './components/rich-text-editor-content-area/rich-text-editor-content-area.vue'; import RichTextEditorRenderer from './components/rich-text-editor-renderer/rich-text-editor-renderer'; import type { BentoRichTextEditorMode, BentoRichTextEditorProps } from './rich-text-editor.types'; // Utils import { useI18n } from '@/utils/ts/i18n'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { generateUid } from '@/core/utils/ts'; import { parseMarkdown } from './utils'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const errorId = generateUid('rich-text-editor-error'); const descriptionId = generateUid('rich-text-editor-description'); const attrs = useAttrs(); const props = withDefaults(defineProps<BentoRichTextEditorProps>(), { description: null, disabled: false, errorMessage: null, hideLabel: null, label: null, mode: 'markdown', required: false, tooltipText: null, value: null, }); const emit = defineEmits<{ /** * Emmited when the content of the editor changes */ (e: 'input', value: string): void; }>(); const selectedMode = ref<BentoRichTextEditorMode>(props.mode); const internalValue = ref(props.value); const node = ref<Root>(null); const error = ref<Error>(null); const richTextEditorModeOptions = computed< Array<{ label: string; value: BentoRichTextEditorMode; disabled: boolean; }> >(() => [ { label: t('visual'), value: 'visual', disabled: props.disabled, }, { label: t('markdown'), value: 'markdown', disabled: props.disabled, }, ]); const conditionalClasses = computed(() => ({ 'b-rich-text-editor__container--disabled': props.disabled, 'b-rich-text-editor__container--error': props.errorMessage, })); const rendererConditionalClasses = computed(() => ({ 'b-rich-text-editor__renderer--disabled': props.disabled, })); // ARIA const computedAriaLabelFallbackMessage = computed(() => t('ariaLabelFallback')); const ariaLabelAttribute = ref(attrs['aria-label']); const computedAriaLabel = useAriaLabel({ ariaLabel: ariaLabelAttribute.value as string, defaultFallback: computedAriaLabelFallbackMessage, }); const ariaDescribedBy = computed( () => `${props.description ? descriptionId : ''} ${props.errorMessage ? errorId : ''}`.trim() || null ); /** * Turns internal value into an AST Node */ function updateNodeValue() { try { node.value = parseMarkdown(internalValue.value); error.value = null; } catch (e) { node.value = null; error.value = e.message.split(':')[1]; } } const onInput = (newContentValue: string) => { internalValue.value = newContentValue; }; watch(internalValue, (newValue: string) => { node.value = null; // Invalidate previously parsed node emit('input', newValue); }); watch( selectedMode, newVal => { if (newVal === 'visual' && !node.value) { updateNodeValue(); } }, { immediate: true } ); </script> <script lang="ts"> /** * An editable content area with additional functionality * that allows to change text styling and add links and tables. * * @example * import { BentoRichTextEditor } from '@adyen/bento-vue2'; * * export default { * components: { BentoRichTextEditor }, * template: ` * <bento-rich-text-editor * v-model="value" * :label="label" * :description="description" * :disabled="false" * /> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./rich-text-editor.scss" /> 
+<template> <bento-typography el="div" class="b-rich-text-editor" rich-text> <field-label v-if="!hideLabel" :label="label" :tooltip-text="tooltipText" :required="required" /> <div v-bind="attrs" class="b-rich-text-editor__container" data-testid="rich-text-editor-container" :aria-disabled="disabled" :class="conditionalClasses" > <div class="b-rich-text-editor__toolbar"> <bento-segmented-control v-model="selectedMode" :items="richTextEditorModeOptions" /> </div> <keep-alive> <rich-text-editor-content-area v-if="selectedMode === 'markdown'" :value="internalValue" role="textbox" aria-multiline="true" :disabled="disabled" :aria-label="computedAriaLabel" :aria-describedby="ariaDescribedBy" :aria-required="required" @input="onInput" /> <bento-alert v-else-if="error" type="critical"> <template #default> {{ t('errorProcessingMarkdown', { value: error }) }} </template> </bento-alert> <rich-text-editor-renderer v-else :node="node" class="b-rich-text-editor__renderer" :class="rendererConditionalClasses" /> </keep-alive> </div> <error-message v-if="!!errorMessage" :id="errorId" :error-message="errorMessage" class="b-rich-text-editor__error-message" /> <span v-if="description" :id="descriptionId" class="b-rich-text-editor__description"> <bento-typography el="span" variant="body">{{ description }}</bento-typography> </span> </bento-typography> </template> <script setup lang="ts"> import { computed, ref, useAttrs, watch } from 'vue'; import type { Root } from 'mdast'; // Components import BentoTypography from '@/components/typography/typography.vue'; import BentoSegmentedControl from '@/components/segmented-control/segmented-control.vue'; import BentoAlert from '@/components/alert/alert.vue'; import { ErrorMessage, FieldLabel } from '@/internal'; import RichTextEditorContentArea from './components/rich-text-editor-content-area/rich-text-editor-content-area.vue'; import RichTextEditorRenderer from './components/rich-text-editor-renderer/rich-text-editor-renderer'; import type { BentoRichTextEditorMode, BentoRichTextEditorProps } from './rich-text-editor.types'; // Utils import { useI18n } from '@/utils/ts/i18n'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { generateUid } from '@/utils/ts/generate-uid'; import { parseMarkdown } from './utils'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const errorId = generateUid('rich-text-editor-error'); const descriptionId = generateUid('rich-text-editor-description'); const attrs = useAttrs(); const props = withDefaults(defineProps<BentoRichTextEditorProps>(), { description: null, disabled: false, errorMessage: null, hideLabel: null, label: null, mode: 'markdown', required: false, tooltipText: null, value: null, }); const emit = defineEmits<{ /** * Emmited when the content of the editor changes */ (e: 'input', value: string): void; }>(); const selectedMode = ref<BentoRichTextEditorMode>(props.mode); const internalValue = ref(props.value); const node = ref<Root>(null); const error = ref<Error>(null); const richTextEditorModeOptions = computed< Array<{ label: string; value: BentoRichTextEditorMode; disabled: boolean; }> >(() => [ { label: t('visual'), value: 'visual', disabled: props.disabled, }, { label: t('markdown'), value: 'markdown', disabled: props.disabled, }, ]); const conditionalClasses = computed(() => ({ 'b-rich-text-editor__container--disabled': props.disabled, 'b-rich-text-editor__container--error': props.errorMessage, })); const rendererConditionalClasses = computed(() => ({ 'b-rich-text-editor__renderer--disabled': props.disabled, })); // ARIA const computedAriaLabelFallbackMessage = computed(() => t('ariaLabelFallback')); const ariaLabelAttribute = ref(attrs['aria-label']); const computedAriaLabel = useAriaLabel({ ariaLabel: ariaLabelAttribute.value as string, defaultFallback: computedAriaLabelFallbackMessage, }); const ariaDescribedBy = computed( () => `${props.description ? descriptionId : ''} ${props.errorMessage ? errorId : ''}`.trim() || null ); /** * Turns internal value into an AST Node */ function updateNodeValue() { try { node.value = parseMarkdown(internalValue.value); error.value = null; } catch (e) { node.value = null; error.value = e.message.split(':')[1]; } } const onInput = (newContentValue: string) => { internalValue.value = newContentValue; }; watch(internalValue, (newValue: string) => { node.value = null; // Invalidate previously parsed node emit('input', newValue); }); watch( selectedMode, newVal => { if (newVal === 'visual' && !node.value) { updateNodeValue(); } }, { immediate: true } ); </script> <script lang="ts"> /** * An editable content area with additional functionality * that allows to change text styling and add links and tables. * * @example * import { BentoRichTextEditor } from '@adyen/bento-vue2'; * * export default { * components: { BentoRichTextEditor }, * template: ` * <bento-rich-text-editor * v-model="value" * :label="label" * :description="description" * :disabled="false" * /> * ` * } */ export default { i18n: { messages }, name: 'bento-rich-text-editor', }; </script> <style lang="scss" scoped src="./rich-text-editor.scss" /> 

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

@@ -1 +1 @@
-import { action } from '@storybook/addon-actions'; import { ref } from 'vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import BentoSearchBar from './search-bar.vue'; export default { title: 'Search bar', component: BentoSearchBar, }; export const Default = (_args, { argTypes }) => ({ components: { BentoSearchBar }, props: Object.keys(argTypes), setup(props) { const searchTerm = ref(props.value); const inputAction = inputValue => { action('input')(inputValue); }; const clearAction = () => { searchTerm.value = ''; action('clear')(); }; return { // Values searchTerm, args: isVue2 ? props : _args, // Methods inputAction, clearAction, }; }, // :input-field-aria-label="args.inputFieldAriaLabel" template: ` <bento-search-bar v-bind="args" :debounce-time="args.debounceTime" v-model="searchTerm" @input="inputAction" @clear="clearAction" /> `, }); Default.args = { inputFieldAriaLabel: 'Search bar short description', placeholder: 'Placeholder text', }; const DefaultCode = ` <bento-search-bar input-field-aria-label="Search bar short description" :debounce-time="500" v-model="searchTerm" @input="inputAction" @clear="clearAction" /> `; Default.parameters = storybookDocsParameter(DefaultCode); 
+import { action } from '@storybook/addon-actions'; import { ref } from 'vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import BentoSearchBar from './search-bar.vue'; const SearchBarDefaultExample = "<template>\n <bento-search-bar\n v-model=\"searchTerm\"\n input-field-aria-label=\"Search bar short description\"\n placeholder=\"Placeholder text\"\n />\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoSearchBar } from '@adyen/bento-vue2';\n\n const searchTerm = ref('');\n</script>\n"; export default { title: 'Search bar', component: BentoSearchBar, }; export const Default = (_args, { argTypes }) => ({ components: { BentoSearchBar }, props: Object.keys(argTypes), setup(props) { const searchTerm = ref(props.value); const inputAction = inputValue => { action('input')(inputValue); }; const clearAction = () => { searchTerm.value = ''; action('clear')(); }; return { // Values searchTerm, args: isVue2 ? props : _args, // Methods inputAction, clearAction, }; }, // :input-field-aria-label="args.inputFieldAriaLabel" template: ` <bento-search-bar v-bind="args" :debounce-time="args.debounceTime" v-model="searchTerm" @input="inputAction" @clear="clearAction" /> `, }); Default.args = { inputFieldAriaLabel: 'Search bar short description', placeholder: 'Placeholder text', }; Default.parameters = storybookDocsParameter(SearchBarDefaultExample); 

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

@@ -1 +1 @@
-<template> <div class="b-search-bar"> <bento-input-field ref="bentoInputField" v-bind="attrs" :model-value="searchTerm" type="search" :condensed="condensed" :aria-label="inputFieldAriaLabel" :aria-hidden="false" :disabled="disabled" :placeholder="placeholder" @update:model-value="onInputEvent" @focus="emit('focus')" @blur="emit('blur')" @escape-pressed="emit(BentoSearchBarInternalEvent.ESCAPE)" > <template #iconBefore> <search-icon :svg-title="t('search')" aria-hidden="true" /> </template> <template v-if="searchTerm" #iconAfter> <div class="b-search-bar__clear-search" tabindex="0" data-testid="b-search-bar-clear-search-button" @click="onClearSearch" @keypress.enter="onClearSearch" @keyup.space="onClearSearch" > <cross-circle-fill-icon :svg-title="t('clearSearch')" /> </div> </template> </bento-input-field> </div> </template> <script setup lang="ts"> import { provide, ref, toRef, useAttrs, watch } from 'vue'; import { debounce } from '@/utils/ts/debounce'; import { BentoSearchBarInternalEvent, type BentoSearchBarProps } from './search-bar.types'; import { useI18n } from '@/utils/ts/i18n'; import { INPUT_FIELD_HINT_INJECTION_KEY } from '@/components/input-field/input-field.keys'; // eslint-disable-next-line @typescript-eslint/consistent-type-imports import BentoInputField from '@/components/input-field/input-field.vue'; import SearchIcon from '@adyen/ui-assets-icons-16/vue/search'; import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<BentoSearchBarProps>(), { condensed: false, debounceTime: 300, disabled: false, hint: '', placeholder: '', value: undefined, }); const emit = defineEmits<{ /** * Emitted when the input value changes by typing a search. Debounced by the `debounceTime` property */ (e: 'input', inputValue: string): void; /** * Emitted when the "clear search" button is clicked */ (e: 'clear'): void; /** * Emitted when the "ESC" key is pressed inside the Search Bar input */ (e: 'escape-pressed'): void; /** * Emitted when the element has lost focus */ (e: 'blur'): void; /** * Emitted when the element has received focus */ (e: 'focus'): void; }>(); provide(INPUT_FIELD_HINT_INJECTION_KEY, toRef(props, 'hint')); const attrs = useAttrs(); const searchTerm = ref(props.value); const bentoInputField = ref<InstanceType<typeof BentoInputField> | null>(); watch( () => props.value, () => { searchTerm.value = props.value; }, { immediate: true } ); const onClearSearch = () => { searchTerm.value = ''; emit('clear'); emit('input', ''); }; const debouncedEmit = debounce(() => { emit('input', searchTerm.value); }, props.debounceTime); const onInputEvent = (value: string) => { searchTerm.value = value; debouncedEmit(); }; const focus = () => { // bentoInputField.value?.focusInput(); bentoInputField.value.focusInput(); }; // Expose method so that it can be used to focus on the input from outside the component defineExpose({ /** * Focus on the input field when called. */ focus, }); </script> <script lang="ts"> /** * Search functionality to help users find the desired data quicker. * When a user starts typing, the data is dynamically filtered to * only show the relevant results. * * Clearing the search field displays the entire list again. * * @example * import { * BentoSearchBar, * BentoSearchBarData, * useSearchBarFilter * } from '@adyen/bento-vue2'; * * export default { * components: { BentoSearchBar }, * template: ` * <bento-search-bar * input-field-aria-label="Search bar" * v-model="searchTerm" * @input="onInput" * @clear="onClearSearch" * /> * // Render the filtered data * {{ filteredData }} * `, * setup() { * const searchTerm = ref(''); * const data = ref<BentoSearchBarData>([]); * const filteredData = useSearchBarFilter(searchTerm, data); * * consdt onInput = () => {} * consdt onClearSearch = () => {} * * return { * searchTerm, * filteredData, * onInput, * onClearSearch, * }; * } * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./search-bar.scss" /> 
+<template> <div class="b-search-bar"> <bento-input-field ref="bentoInputField" v-bind="attrs" :model-value="searchTerm" type="search" :condensed="condensed" :aria-label="inputFieldAriaLabel" :aria-hidden="false" :disabled="disabled" :placeholder="placeholder" @update:model-value="onInputEvent" @focus="emit('focus')" @blur="emit('blur')" @escape-pressed="emit(BentoSearchBarInternalEvent.ESCAPE)" > <template #iconBefore> <search-icon :svg-title="t('search')" aria-hidden="true" /> </template> <template v-if="searchTerm" #iconAfter> <div class="b-search-bar__clear-search" tabindex="0" data-testid="b-search-bar-clear-search-button" @click="onClearSearch" @keypress.enter="onClearSearch" @keyup.space="onClearSearch" > <cross-circle-fill-icon :svg-title="t('clearSearch')" /> </div> </template> </bento-input-field> </div> </template> <script setup lang="ts"> import { provide, ref, toRef, useAttrs, watch } from 'vue'; import { debounce } from '@/utils/ts/debounce'; import { BentoSearchBarInternalEvent, type BentoSearchBarProps } from './search-bar.types'; import { useI18n } from '@/utils/ts/i18n'; import { INPUT_FIELD_HINT_INJECTION_KEY } from '@/components/input-field/input-field.keys'; // eslint-disable-next-line @typescript-eslint/consistent-type-imports import BentoInputField from '@/components/input-field/input-field.vue'; import SearchIcon from '@adyen/ui-assets-icons-16/vue/search'; import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const props = withDefaults(defineProps<BentoSearchBarProps>(), { condensed: false, debounceTime: 300, disabled: false, hint: '', placeholder: '', value: undefined, }); const emit = defineEmits<{ /** * Emitted when the input value changes by typing a search. Debounced by the `debounceTime` property */ (e: 'input', inputValue: string): void; /** * Emitted when the "clear search" button is clicked */ (e: 'clear'): void; /** * Emitted when the "ESC" key is pressed inside the Search Bar input */ (e: 'escape-pressed'): void; /** * Emitted when the element has lost focus */ (e: 'blur'): void; /** * Emitted when the element has received focus */ (e: 'focus'): void; }>(); provide(INPUT_FIELD_HINT_INJECTION_KEY, toRef(props, 'hint')); const attrs = useAttrs(); const searchTerm = ref(props.value); const bentoInputField = ref<InstanceType<typeof BentoInputField> | null>(); watch( () => props.value, () => { searchTerm.value = props.value; }, { immediate: true } ); const onClearSearch = () => { searchTerm.value = ''; emit('clear'); emit('input', ''); }; const debouncedEmit = debounce(() => { emit('input', searchTerm.value); }, props.debounceTime); const onInputEvent = (value: string) => { searchTerm.value = value; debouncedEmit(); }; const focus = () => { // bentoInputField.value?.focusInput(); bentoInputField.value.focusInput(); }; // Expose method so that it can be used to focus on the input from outside the component defineExpose({ /** * Focus on the input field when called. */ focus, }); </script> <script lang="ts"> /** * Search functionality to help users find the desired data quicker. * When a user starts typing, the data is dynamically filtered to * only show the relevant results. * * Clearing the search field displays the entire list again. * * @example * import { * BentoSearchBar, * BentoSearchBarData, * useSearchBarFilter * } from '@adyen/bento-vue2'; * * export default { * components: { BentoSearchBar }, * template: ` * <bento-search-bar * input-field-aria-label="Search bar" * v-model="searchTerm" * @input="onInput" * @clear="onClearSearch" * /> * // Render the filtered data * {{ filteredData }} * `, * setup() { * const searchTerm = ref(''); * const data = ref<BentoSearchBarData>([]); * const filteredData = useSearchBarFilter(searchTerm, data); * * consdt onInput = () => {} * consdt onClearSearch = () => {} * * return { * searchTerm, * filteredData, * onInput, * onClearSearch, * }; * } * } */ export default { i18n: { messages }, name: 'bento-search-bar', }; </script> <style lang="scss" scoped src="./search-bar.scss" /> 

package/dist/assets/components/secondary-nav/components/secondary-nav-item/secondary-nav-item.vue

@@ -1 +1 @@
-<template> <div class="b-secondary-nav-item"> <div class="b-secondary-nav-item__wrapper"> <button class="b-secondary-nav-item__option" :class="conditionalClasses" :aria-current="isItemSelected ? 'page' : undefined" :aria-expanded="expandleItemIsToggleOnly ? `${isOpen}` : undefined" :aria-controls="expandleItemIsToggleOnly ? subItemsId : undefined" @click="expandleItemIsToggleOnly ? onToggleClick() : onClick($event)" > <bento-typography class="b-secondary-nav-item__title" variant="body" stronger> {{ label }} </bento-typography> <bento-tag v-if="errorCounter" class="b-secondary-nav-item__error-counter" variant="red"> <template #icon> <cross-circle-fill-icon aria-hidden="true" /> </template> <span>{{ errorCounter }}</span> <span class="b-secondary-nav-item__visually-hidden">{{ tc('errorCount', errorCounter) }}</span> </bento-tag> </button> <bento-button v-if="hasSubItems" :aria-hidden="expandleItemIsToggleOnly" :tabindex="expandleItemIsToggleOnly ? -1 : undefined" class="b-secondary-nav-item__toggle" variant="tertiary" :aria-label="isOpen ? `Collapse ${label}` : `Expand ${label}`" :aria-expanded="!expandleItemIsToggleOnly ? `${isOpen}` : undefined" :aria-controls="!expandleItemIsToggleOnly ? subItemsId : undefined" @click.stop="onToggleClick" > <template #iconLeft> <chevron-up-icon v-if="isOpen" class="b-secondary-nav-item__icon" aria-hidden="true" /> <chevron-down-icon v-else class="b-secondary-nav-item__icon" aria-hidden="true" /> </template> </bento-button> </div> <Transition :name="CONTENT_TRANSITION_NAME"> <div v-if="hasSubItems && isOpen" :id="subItemsId" :style="subItemsMaxHeight"> <ul ref="subItemsRef" class="b-secondary-nav-item__sub-items"> <li v-for="item in items" :key="item.value"> <secondary-nav-item :label="item.label" :value="item.value" :items="item.items" :error-counter="item.errorCounter" is-sub-item /> </li> </ul> </div> </Transition> </div> </template> <script lang="ts" setup> import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys'; import { BentoButton } from '@/components/button'; import { BentoTag } from '@/components/tag'; 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 CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill'; import { computed, inject, ref, watch } from 'vue'; import { useI18n } from '@/utils/ts/i18n'; import { generateUid } from '@/core/utils/ts'; import { type BentoSecondaryNavItemsItem } from '../../secondary-nav.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 { tc } = useI18n<{ message: MessageSchema }>({ messages }); const { activeItemValue, updateActiveItemValue, allowExpandableItemNavigation } = inject(SECONDARY_NAV_STATE); const CONTENT_TRANSITION_NAME = 'b-secondary-nav-item__animation--content'; const props = defineProps<{ /** * The display name of the navigation item */ label: string; /** * The value of this item. */ value: string; /** * Nested sub-items for this item. */ items?: Array<BentoSecondaryNavItemsItem>; /** * Defines if the item is a subitem */ isSubItem?: boolean; /** * Defines the number of errors pertaining to this item */ errorCounter?: number; }>(); const isOpen = ref(false); const subItemsId = generateUid('secondary-nav-sub-items'); const subItemsRef = ref<HTMLUListElement>(null); const hasSubItems = computed(() => !!props.items?.length); const isItemSelected = computed(() => activeItemValue.value === props.value); const expandleItemIsToggleOnly = computed(() => hasSubItems.value && !allowExpandableItemNavigation.value); const { contentHeight } = useExpandableContentHeight(subItemsRef, isOpen); const subItemsMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {})); const conditionalClasses = computed(() => ({ 'b-secondary-nav-item__option--active': isItemSelected.value, 'b-secondary-nav-item__option--expandable': hasSubItems.value, 'b-secondary-nav-item__option--sub-item': props.isSubItem, })); const emit = defineEmits<{ /** * Event emitted when this element is clicked */ (e: 'click', clickEvent: MouseEvent): void; }>(); const onClick = (e: MouseEvent) => { emit('click', e); updateActiveItemValue(props.value); }; const onToggleClick = () => { isOpen.value = !isOpen.value; }; const hasActiveDescendant = (items: Array<BentoSecondaryNavItemsItem>, value: string): boolean => { return items.some( item => item.value === value || (item.items ? hasActiveDescendant(item.items, value) : false) ); }; const hasDescendantErrors = (items: Array<BentoSecondaryNavItemsItem>): boolean => items.some(item => !!item.errorCounter || (item.items ? hasDescendantErrors(item.items) : false)); watch( [activeItemValue, () => props.items], ([activeValue]) => { if (hasSubItems.value && props.items) { if (hasActiveDescendant(props.items, activeValue) || hasDescendantErrors(props.items)) { isOpen.value = true; } } }, { immediate: true, deep: true } ); </script> <script lang="ts"> /** * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav} */ export default { i18n: { messages } }; </script> <style lang="scss" scoped src="./secondary-nav-item.scss" /> 
+<template> <div class="b-secondary-nav-item"> <div class="b-secondary-nav-item__wrapper"> <button class="b-secondary-nav-item__option" :class="conditionalClasses" :aria-current="isItemSelected ? 'page' : undefined" :aria-expanded="expandleItemIsToggleOnly ? `${isOpen}` : undefined" :aria-controls="expandleItemIsToggleOnly ? subItemsId : undefined" @click="expandleItemIsToggleOnly ? onToggleClick() : onClick($event)" > <bento-typography class="b-secondary-nav-item__title" variant="body" stronger> {{ label }} </bento-typography> <bento-tag v-if="errorCounter" class="b-secondary-nav-item__error-counter" variant="red" :label="errorCounter.toString()" :aria-label="tc('errorCount', errorCounter)" > <template #icon> <cross-circle-fill-icon aria-hidden="true" /> </template> </bento-tag> </button> <bento-button v-if="hasSubItems" :aria-hidden="expandleItemIsToggleOnly" :tabindex="expandleItemIsToggleOnly ? -1 : undefined" class="b-secondary-nav-item__toggle" variant="tertiary" :aria-label="isOpen ? `Collapse ${label}` : `Expand ${label}`" :aria-expanded="!expandleItemIsToggleOnly ? `${isOpen}` : undefined" :aria-controls="!expandleItemIsToggleOnly ? subItemsId : undefined" @click.stop="onToggleClick" > <template #iconLeft> <chevron-up-icon v-if="isOpen" class="b-secondary-nav-item__icon" aria-hidden="true" /> <chevron-down-icon v-else class="b-secondary-nav-item__icon" aria-hidden="true" /> </template> </bento-button> </div> <Transition :name="CONTENT_TRANSITION_NAME"> <div v-if="hasSubItems && isOpen" :id="subItemsId" :style="subItemsMaxHeight"> <ul ref="subItemsRef" class="b-secondary-nav-item__sub-items"> <li v-for="item in items" :key="item.value"> <secondary-nav-item :label="item.label" :value="item.value" :items="item.items" :error-counter="item.errorCounter" is-sub-item /> </li> </ul> </div> </Transition> </div> </template> <script lang="ts" setup> import { SECONDARY_NAV_STATE } from '../../secondary-nav.keys'; import { BentoButton } from '@/components/button'; import { BentoTag } from '@/components/tag'; 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 CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill'; import { computed, inject, ref, watch } from 'vue'; import { useI18n } from '@/utils/ts/i18n'; import { generateUid } from '@/utils/ts/generate-uid'; import { type BentoSecondaryNavItemsItem } from '../../secondary-nav.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 { tc } = useI18n<{ message: MessageSchema }>({ messages }); const { activeItemValue, updateActiveItemValue, allowExpandableItemNavigation } = inject(SECONDARY_NAV_STATE); const CONTENT_TRANSITION_NAME = 'b-secondary-nav-item__animation--content'; const props = defineProps<{ /** * The display name of the navigation item */ label: string; /** * The value of this item. */ value: string; /** * Nested sub-items for this item. */ items?: Array<BentoSecondaryNavItemsItem>; /** * Defines if the item is a subitem */ isSubItem?: boolean; /** * Defines the number of errors pertaining to this item */ errorCounter?: number; }>(); const isOpen = ref(false); const subItemsId = generateUid('secondary-nav-sub-items'); const subItemsRef = ref<HTMLUListElement>(null); const hasSubItems = computed(() => !!props.items?.length); const isItemSelected = computed(() => activeItemValue.value === props.value); const expandleItemIsToggleOnly = computed(() => hasSubItems.value && !allowExpandableItemNavigation.value); const { contentHeight } = useExpandableContentHeight(subItemsRef, isOpen); const subItemsMaxHeight = computed(() => (contentHeight.value ? { 'max-height': contentHeight.value } : {})); const conditionalClasses = computed(() => ({ 'b-secondary-nav-item__option--active': isItemSelected.value, 'b-secondary-nav-item__option--expandable': hasSubItems.value, 'b-secondary-nav-item__option--sub-item': props.isSubItem, })); const emit = defineEmits<{ /** * Event emitted when this element is clicked */ (e: 'click', clickEvent: MouseEvent): void; }>(); const onClick = (e: MouseEvent) => { emit('click', e); updateActiveItemValue(props.value); }; const onToggleClick = () => { isOpen.value = !isOpen.value; }; const hasActiveDescendant = (items: Array<BentoSecondaryNavItemsItem>, value: string): boolean => { return items.some( item => item.value === value || (item.items ? hasActiveDescendant(item.items, value) : false) ); }; const hasDescendantErrors = (items: Array<BentoSecondaryNavItemsItem>): boolean => items.some(item => !!item.errorCounter || (item.items ? hasDescendantErrors(item.items) : false)); watch( [activeItemValue, () => props.items], ([activeValue]) => { if (hasSubItems.value && props.items) { if (hasActiveDescendant(props.items, activeValue) || hasDescendantErrors(props.items)) { isOpen.value = true; } } }, { immediate: true, deep: true } ); </script> <script lang="ts"> /** * This component shouldn't be used directly. It is internally used by {@see BentoSecondaryNav} */ export default { i18n: { messages } }; </script> <style lang="scss" scoped src="./secondary-nav-item.scss" /> 

package/dist/assets/components/secondary-nav/secondary-nav.stories.ts

@@ -1 +1 @@
-import { action } from '@storybook/addon-actions'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoSecondaryNav from './secondary-nav.vue'; import DefaultCodeSample from './__tests__/secondary-nav-default-example.vue?raw'; import WithCategoriesCodeSample from './__tests__/secondary-nav-with-categories-example.vue?raw'; import WithSubItemsCodeSample from './__tests__/secondary-nav-with-sub-items-example.vue?raw'; import type { Meta, StoryObj } from '@storybook/vue'; import { type BentoSecondaryNavItems } from '@/components/secondary-nav/secondary-nav.types'; const meta: Meta = { title: 'Secondary Nav', component: BentoSecondaryNav, }; export default meta; type Story = StoryObj<typeof BentoSecondaryNav>; const DEFAULT_ITEMS: BentoSecondaryNavItems = [ { label: 'Option 1', value: 'option_1', }, { label: 'Option 2', value: 'option_2', errorCounter: 3, }, { label: 'Option 3', value: 'option_3', }, ]; const ITEMS_WITH_CATEGORIES: BentoSecondaryNavItems = [ { label: 'Category 1', items: [ { label: 'Option 1', value: 'option_1', errorCounter: 1, }, { label: 'Option 2', value: 'option_2', }, ], }, { label: 'Category 2', items: [ { label: 'Option 3', value: 'option_3', }, { label: 'Option 4', value: 'option_4', }, { label: 'Option 5', value: 'option_5', }, ], }, ]; const ITEMS_WITH_SUB_ITEMS: BentoSecondaryNavItems = ITEMS_WITH_CATEGORIES.map(category => ({ ...category, items: category.items.map(item => { if (item.value === 'option_2') { return { ...item, items: [ { label: 'Option 2.1', value: 'option_2_1', }, { label: 'Option 2.2', value: 'option_2_2', }, ], }; } if (item.value === 'option_4') { return { ...item, items: [ { label: 'Option 4.1', value: 'option_4_1', errorCounter: 2, }, { label: 'Option 4.2', value: 'option_4_2', }, ], }; } return item; }), })); export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoSecondaryNav, }, props: Object.keys(argTypes), template: ` <bento-secondary-nav v-bind="args" @change="clickedAction" /> `, setup(props) { const clickedAction = value => action('change')(value); return { // Values args: isVue2 ? props : _args, // Events clickedAction, }; }, }), args: { items: DEFAULT_ITEMS, value: 'option_1', }, parameters: storybookDocsParameter(DefaultCodeSample), }; export const WithCategories: Story = { render: (_args, { argTypes }) => ({ components: { BentoSecondaryNav, }, props: Object.keys(argTypes), template: ` <bento-secondary-nav v-bind="args" @change="clickedAction" /> `, setup(props) { const clickedAction = value => action('change')(value); return { // Values args: isVue2 ? props : _args, // Events clickedAction, }; }, }), args: { items: ITEMS_WITH_CATEGORIES, }, parameters: storybookDocsParameter(WithCategoriesCodeSample), }; export const WithSubItems: Story = { render: (_args, { argTypes }) => ({ components: { BentoSecondaryNav, }, props: Object.keys(argTypes), template: ` <bento-secondary-nav v-bind="args" @change="clickedAction" /> `, setup(props) { const clickedAction = value => action('change')(value); return { args: isVue2 ? props : _args, clickedAction, }; }, }), args: { value: 'option_2_1', items: ITEMS_WITH_SUB_ITEMS, }, parameters: storybookDocsParameter(WithSubItemsCodeSample), }; 
+import { action } from '@storybook/addon-actions'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoSecondaryNav from './secondary-nav.vue'; const DefaultCodeSample = "<template>\n <bento-secondary-nav :items=\"items\" :value=\"activeItem\" @change=\"onChange\" />\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoSecondaryNav, type BentoSecondaryNavItems } from '@adyen/bento-vue2';\n\n const items: BentoSecondaryNavItems = [\n {\n label: 'Option 1',\n value: 'option_1',\n },\n {\n label: 'Option 2',\n value: 'option_2',\n errorCounter: 3,\n },\n {\n label: 'Option 3',\n value: 'option_3',\n },\n ];\n\n const activeItem = ref('option_1');\n\n const onChange = (newActiveItem: string) => {\n activeItem.value = newActiveItem;\n };\n</script>\n"; const WithCategoriesCodeSample = "<template>\n <bento-secondary-nav :items=\"items\" :value=\"activeItem\" @change=\"onChange\" />\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoSecondaryNav, type BentoSecondaryNavItems } from '@adyen/bento-vue2';\n\n const items: BentoSecondaryNavItems = [\n {\n label: 'Category 1',\n items: [\n {\n label: 'Option 1',\n value: 'option_1',\n errorCounter: 1,\n },\n {\n label: 'Option 2',\n value: 'option_2',\n },\n ],\n },\n\n {\n label: 'Category 2',\n items: [\n {\n label: 'Option 3',\n value: 'option_3',\n },\n {\n label: 'Option 4',\n value: 'option_4',\n },\n {\n label: 'Option 5',\n value: 'option_5',\n },\n ],\n },\n ];\n\n const activeItem = ref('option_1');\n\n const onChange = (newActiveItem: string) => {\n activeItem.value = newActiveItem;\n };\n</script>\n"; const WithSubItemsCodeSample = "<template>\n <bento-secondary-nav :items=\"items\" :value=\"activeItem\" @change=\"onChange\" />\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoSecondaryNav, type BentoSecondaryNavItems } from '@adyen/bento-vue2';\n\n const items: BentoSecondaryNavItems = [\n {\n label: 'Category 1',\n items: [\n {\n label: 'Option 1',\n value: 'option_1',\n errorCounter: 1,\n },\n {\n label: 'Option 2',\n value: 'option_2',\n items: [\n {\n label: 'Option 2.1',\n value: 'option_2_1',\n },\n {\n label: 'Option 2.2',\n value: 'option_2_2',\n },\n ],\n },\n ],\n },\n {\n label: 'Category 2',\n items: [\n {\n label: 'Option 3',\n value: 'option_3',\n },\n {\n label: 'Option 4',\n value: 'option_4',\n items: [\n {\n label: 'Option 4.1',\n value: 'option_4_1',\n errorCounter: 2,\n },\n {\n label: 'Option 4.2',\n value: 'option_4_2',\n },\n ],\n },\n {\n label: 'Option 5',\n value: 'option_5',\n },\n ],\n },\n ];\n\n const activeItem = ref('option_2_1');\n\n const onChange = (newActiveItem: string) => {\n activeItem.value = newActiveItem;\n };\n</script>\n"; import type { Meta, StoryObj } from '@storybook/vue'; import { type BentoSecondaryNavItems } from '@/components/secondary-nav/secondary-nav.types'; const meta: Meta = { title: 'Secondary Nav', component: BentoSecondaryNav, }; export default meta; type Story = StoryObj<typeof BentoSecondaryNav>; const DEFAULT_ITEMS: BentoSecondaryNavItems = [ { label: 'Option 1', value: 'option_1', }, { label: 'Option 2', value: 'option_2', errorCounter: 3, }, { label: 'Option 3', value: 'option_3', }, ]; const ITEMS_WITH_CATEGORIES: BentoSecondaryNavItems = [ { label: 'Category 1', items: [ { label: 'Option 1', value: 'option_1', errorCounter: 1, }, { label: 'Option 2', value: 'option_2', }, ], }, { label: 'Category 2', items: [ { label: 'Option 3', value: 'option_3', }, { label: 'Option 4', value: 'option_4', }, { label: 'Option 5', value: 'option_5', }, ], }, ]; const ITEMS_WITH_SUB_ITEMS: BentoSecondaryNavItems = ITEMS_WITH_CATEGORIES.map(category => ({ ...category, items: category.items.map(item => { if (item.value === 'option_2') { return { ...item, items: [ { label: 'Option 2.1', value: 'option_2_1', }, { label: 'Option 2.2', value: 'option_2_2', }, ], }; } if (item.value === 'option_4') { return { ...item, items: [ { label: 'Option 4.1', value: 'option_4_1', errorCounter: 2, }, { label: 'Option 4.2', value: 'option_4_2', }, ], }; } return item; }), })); export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoSecondaryNav, }, props: Object.keys(argTypes), template: ` <bento-secondary-nav v-bind="args" @change="clickedAction" /> `, setup(props) { const clickedAction = value => action('change')(value); return { // Values args: isVue2 ? props : _args, // Events clickedAction, }; }, }), args: { items: DEFAULT_ITEMS, value: 'option_1', }, parameters: storybookDocsParameter(DefaultCodeSample), }; export const WithCategories: Story = { render: (_args, { argTypes }) => ({ components: { BentoSecondaryNav, }, props: Object.keys(argTypes), template: ` <bento-secondary-nav v-bind="args" @change="clickedAction" /> `, setup(props) { const clickedAction = value => action('change')(value); return { // Values args: isVue2 ? props : _args, // Events clickedAction, }; }, }), args: { items: ITEMS_WITH_CATEGORIES, }, parameters: storybookDocsParameter(WithCategoriesCodeSample), }; export const WithSubItems: Story = { render: (_args, { argTypes }) => ({ components: { BentoSecondaryNav, }, props: Object.keys(argTypes), template: ` <bento-secondary-nav v-bind="args" @change="clickedAction" /> `, setup(props) { const clickedAction = value => action('change')(value); return { args: isVue2 ? props : _args, clickedAction, }; }, }), args: { value: 'option_2_1', items: ITEMS_WITH_SUB_ITEMS, }, parameters: storybookDocsParameter(WithSubItemsCodeSample), }; 

package/dist/assets/components/secondary-nav/secondary-nav.vue

@@ -1 +1 @@
-<template> <nav class="b-secondary-nav"> <bento-dropdown v-if="isMobile" :aria-label="t('mobileDropdownAriaLabel')" :items="mobileDropdownItems" :static-categories="hasCategories" :model-value="activeItemValue" :is-option-disabled="isMobileOptionDisabled" @update:model-value="updateActiveItemValue" > <template #display-value="{ label }"> <bento-typography el="span"> {{ label }} </bento-typography> </template> <template #default="{ label, data }"> <bento-typography el="div" :class="{ 'b-secondary-nav__option': true, 'b-secondary-nav__nested-option': !!data?.level }" > {{ label }} <bento-tag v-if="data?.errorCounter" class="b-secondary-nav__error-counter" variant="red"> <template #icon> <cross-circle-fill-icon aria-hidden="true" /> </template> <span>{{ data.errorCounter }}</span> <span class="b-secondary-nav__visually-hidden">{{ tc('errorCount', data.errorCounter) }}</span> </bento-tag> </bento-typography> </template> </bento-dropdown> <ul v-else class="b-secondary-nav__list"> <li v-for="item in items" :key="item.label"> <secondary-nav-category v-if="'items' in item && !('value' in item)" :label="item.label" :items="item.items" /> <secondary-nav-item v-else :label="item.label" :value="item.value" :items="item.items" :error-counter="item.errorCounter" /> </li> </ul> </nav> </template> <script setup lang="ts"> import { computed, provide, readonly, ref, toRef, watch } from 'vue'; import { SecondaryNavItem } from './components/secondary-nav-item'; import { SecondaryNavCategory } from './components/secondary-nav-category'; import { SECONDARY_NAV_STATE } from './secondary-nav.keys'; import { type BentoSecondaryNavItems, type BentoSecondaryNavItemsCategory, type BentoSecondaryNavItemsItem, type BentoSecondaryNavState, } from './secondary-nav.types'; import { BentoDropdown } from '@/components/dropdown'; import { BentoTypography } from '@/components/typography'; import { BentoTag } from '@/components/tag'; import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill'; import { useBreakpoints } from '@vueuse/core'; import { useI18n } from '@/utils/ts/i18n'; import { type BentoListboxOptionItem, type BentoListboxOptions } from '@/types/listbox'; import { BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t, tc } = useI18n<{ message: MessageSchema }>({ messages }); const breakpoints = useBreakpoints({ s: BMediaQuerySMax, }); const isMobile = breakpoints.smallerOrEqual('s'); const props = defineProps<{ /** * An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory }, * which is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them. */ items: BentoSecondaryNavItems; /** * The value of the selected item. * If nothing is passed, it defaults to the first item value in items. */ value?: string; /** * When true, items that contain subitems are also clickable and can be selected. * When false, those items only act as expand/collapse toggles. */ allowExpandableItemNavigation?: boolean; }>(); const emit = defineEmits<{ /** * Emmited when the current selected item changes */ (e: 'change', category: string): void; }>(); const isCategory = (item: BentoSecondaryNavItems[number]): item is BentoSecondaryNavItemsCategory => 'items' in item && !('value' in item); const mapNestedItems = (items: Array<BentoSecondaryNavItemsItem>, level = 0): BentoListboxOptions => items.flatMap((item): BentoListboxOptions => { const currentItem: BentoListboxOptionItem = { label: item.label, value: item.value, data: { level, hasSubItems: !!item.items?.length, errorCounter: item.errorCounter }, }; if (item.items?.length) { return [currentItem, ...mapNestedItems(item.items, level + 1)]; } return [currentItem]; }); const isMobileOptionDisabled = (option: BentoListboxOptionItem): boolean => !props.allowExpandableItemNavigation && (option.data as { hasSubItems?: boolean })?.hasSubItems; const hasCategories = computed(() => props.items.some(item => isCategory(item))); const mobileDropdownItems = computed<BentoListboxOptions>(() => { return props.items.flatMap(item => { if (isCategory(item)) { return [ { label: item.label, value: `category-${item.label}`, items: mapNestedItems(item.items), } satisfies BentoListboxOptionItem, ]; } if (item.items?.length) { return mapNestedItems([item]); } return [ { label: item.label, value: item.value, data: { level: 0, errorCounter: item.errorCounter }, } satisfies BentoListboxOptionItem, ]; }); }); const flattenNestedItems = (items: Array<BentoSecondaryNavItemsItem>): Array<BentoSecondaryNavItemsItem> => items.flatMap(item => [item, ...(item.items?.length ? flattenNestedItems(item.items) : [])]); const findFirstSelectableNestedItemValue = (items: Array<BentoSecondaryNavItemsItem>): string => flattenNestedItems(items).find(item => props.allowExpandableItemNavigation || !item.items?.length)?.value ?? ''; const activeItemValueFallback = computed(() => { if (!props.items.length) { return ''; } return findFirstSelectableNestedItemValue( props.items.flatMap(item => isCategory(item) ? flattenNestedItems(item.items) : flattenNestedItems([item]) ) ); }); const activeItemValue = ref(props.value ?? activeItemValueFallback.value); const updateActiveItemValue = (value: string) => { activeItemValue.value = value; emit('change', value); }; // The component's state is inject on `secondary-nav-item` to determine the // current active item and to change its value const state: BentoSecondaryNavState = { activeItemValue: readonly(activeItemValue), updateActiveItemValue, allowExpandableItemNavigation: toRef(props, 'allowExpandableItemNavigation'), }; watch( () => props.value, value => { if (value !== undefined) { activeItemValue.value = value; } } ); provide(SECONDARY_NAV_STATE, state); </script> <script lang="ts"> /** * Secondary Nav offers users a structured way to access information. * It also provides a clear hierarchy for users to understand and navigate through various information. * * @example * import { BentoSecondaryNav } from '@adyen/bento-vue2'; * * export default { * components: { BentoSecondaryNav }, * template: ` * <bento-secondary-nav :value="value" :items="items" /> * `, * setup() { * const value = ref(2) // Active item value * const items: BentoSecondaryNavItemInfo[] = [ * { label: 'Option 1', value: 1 }, * { label: 'Option 2', value: 2 }, * ]; * return { items, value }; * } * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./secondary-nav.scss" /> 
+<template> <nav class="b-secondary-nav"> <bento-dropdown v-if="isMobile" :aria-label="t('mobileDropdownAriaLabel')" :items="mobileDropdownItems" :static-categories="hasCategories" :model-value="activeItemValue" :is-option-disabled="isMobileOptionDisabled" @update:model-value="updateActiveItemValue" > <template #display-value="{ label }"> <bento-typography el="span"> {{ label }} </bento-typography> </template> <template #default="{ label, data }"> <bento-typography el="div" :class="{ 'b-secondary-nav__option': true, 'b-secondary-nav__nested-option': !!data?.level }" > {{ label }} <bento-tag v-if="data?.errorCounter" class="b-secondary-nav__error-counter" variant="red" :label="data.errorCounter" :aria-label="tc('errorCount', data.errorCounter)" > <template #icon> <cross-circle-fill-icon aria-hidden="true" /> </template> </bento-tag> </bento-typography> </template> </bento-dropdown> <ul v-else class="b-secondary-nav__list"> <li v-for="item in items" :key="item.label"> <secondary-nav-category v-if="'items' in item && !('value' in item)" :label="item.label" :items="item.items" /> <secondary-nav-item v-else :label="item.label" :value="item.value" :items="item.items" :error-counter="item.errorCounter" /> </li> </ul> </nav> </template> <script setup lang="ts"> import { computed, provide, readonly, ref, toRef, watch } from 'vue'; import { SecondaryNavItem } from './components/secondary-nav-item'; import { SecondaryNavCategory } from './components/secondary-nav-category'; import { SECONDARY_NAV_STATE } from './secondary-nav.keys'; import { type BentoSecondaryNavItems, type BentoSecondaryNavItemsCategory, type BentoSecondaryNavItemsItem, type BentoSecondaryNavState, } from './secondary-nav.types'; import { BentoDropdown } from '@/components/dropdown'; import { BentoTypography } from '@/components/typography'; import { BentoTag } from '@/components/tag'; import CrossCircleFillIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill'; import { useBreakpoints } from '@vueuse/core'; import { useI18n } from '@/utils/ts/i18n'; import { type BentoListboxOptionItem, type BentoListboxOptions } from '@/types/listbox'; import { BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const { t, tc } = useI18n<{ message: MessageSchema }>({ messages }); const breakpoints = useBreakpoints({ s: BMediaQuerySMax, }); const isMobile = breakpoints.smallerOrEqual('s'); const props = defineProps<{ /** * An array containing all the items on the nav. The array can have either {@see BentoSecondaryNavItemsCategory }, * which is used to group different items or {@see BentoSecondaryNavItemsItem } if you don't need to group them. */ items: BentoSecondaryNavItems; /** * The value of the selected item. * If nothing is passed, it defaults to the first item value in items. */ value?: string; /** * When true, items that contain subitems are also clickable and can be selected. * When false, those items only act as expand/collapse toggles. */ allowExpandableItemNavigation?: boolean; }>(); const emit = defineEmits<{ /** * Emmited when the current selected item changes */ (e: 'change', category: string): void; }>(); const isCategory = (item: BentoSecondaryNavItems[number]): item is BentoSecondaryNavItemsCategory => 'items' in item && !('value' in item); const mapNestedItems = (items: Array<BentoSecondaryNavItemsItem>, level = 0): BentoListboxOptions => items.flatMap((item): BentoListboxOptions => { const currentItem: BentoListboxOptionItem = { label: item.label, value: item.value, data: { level, hasSubItems: !!item.items?.length, errorCounter: item.errorCounter }, }; if (item.items?.length) { return [currentItem, ...mapNestedItems(item.items, level + 1)]; } return [currentItem]; }); const isMobileOptionDisabled = (option: BentoListboxOptionItem): boolean => !props.allowExpandableItemNavigation && (option.data as { hasSubItems?: boolean })?.hasSubItems; const hasCategories = computed(() => props.items.some(item => isCategory(item))); const mobileDropdownItems = computed<BentoListboxOptions>(() => { return props.items.flatMap(item => { if (isCategory(item)) { return [ { label: item.label, value: `category-${item.label}`, items: mapNestedItems(item.items), } satisfies BentoListboxOptionItem, ]; } if (item.items?.length) { return mapNestedItems([item]); } return [ { label: item.label, value: item.value, data: { level: 0, errorCounter: item.errorCounter }, } satisfies BentoListboxOptionItem, ]; }); }); const flattenNestedItems = (items: Array<BentoSecondaryNavItemsItem>): Array<BentoSecondaryNavItemsItem> => items.flatMap(item => [item, ...(item.items?.length ? flattenNestedItems(item.items) : [])]); const findFirstSelectableNestedItemValue = (items: Array<BentoSecondaryNavItemsItem>): string => flattenNestedItems(items).find(item => props.allowExpandableItemNavigation || !item.items?.length)?.value ?? ''; const activeItemValueFallback = computed(() => { if (!props.items.length) { return ''; } return findFirstSelectableNestedItemValue( props.items.flatMap(item => isCategory(item) ? flattenNestedItems(item.items) : flattenNestedItems([item]) ) ); }); const activeItemValue = ref(props.value ?? activeItemValueFallback.value); const updateActiveItemValue = (value: string) => { activeItemValue.value = value; emit('change', value); }; // The component's state is inject on `secondary-nav-item` to determine the // current active item and to change its value const state: BentoSecondaryNavState = { activeItemValue: readonly(activeItemValue), updateActiveItemValue, allowExpandableItemNavigation: toRef(props, 'allowExpandableItemNavigation'), }; watch( () => props.value, value => { if (value !== undefined) { activeItemValue.value = value; } } ); provide(SECONDARY_NAV_STATE, state); </script> <script lang="ts"> /** * Secondary Nav offers users a structured way to access information. * It also provides a clear hierarchy for users to understand and navigate through various information. * * @example * import { BentoSecondaryNav } from '@adyen/bento-vue2'; * * export default { * components: { BentoSecondaryNav }, * template: ` * <bento-secondary-nav :value="value" :items="items" /> * `, * setup() { * const value = ref(2) // Active item value * const items: BentoSecondaryNavItemInfo[] = [ * { label: 'Option 1', value: 1 }, * { label: 'Option 2', value: 2 }, * ]; * return { items, value }; * } * } */ export default { i18n: { messages }, name: 'bento-secondary-nav', }; </script> <style lang="scss" scoped src="./secondary-nav.scss" /> 

package/dist/assets/components/segmented-control/components/segmented-control-button/segmented-control-button.vue

@@ -1 +1 @@
-<template> <div class="b-segmented-control-button" :class="conditionalClasses"> <input :id="segmentedControlButtonId" v-bento-tooltip-directive="tooltipText" :aria-checked="isChecked" :aria-label="label" :checked="isChecked" :disabled="disabled" :value="value" type="radio" class="b-segmented-control-button__input" role="radio" @change="onClick" /> <label v-if="label" :for="segmentedControlButtonId" class="b-segmented-control-button__label-container"> <bento-typography ref="segmentedControlButtonLabel" class="b-segmented-control-button__label" el="span" variant="body" stronger > {{ label }} </bento-typography> </label> </div> </template> <script setup lang="ts"> import { computed, type ComputedRef, ref } from 'vue'; import { BentoTypography } from '@/components/typography'; import { generateUid } from '@/core/utils/ts'; import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives'; const props = withDefaults( defineProps<{ /** * Disable the radio button (optional) */ disabled?: boolean; /** * Renders the button with a 100% width */ fullWidth?: boolean; /** * The string the button will showcase */ label: string; /** * This property should not be used directly. * It will be used by v-model directive on the segmented control component */ modelValue?: string | number; /** * Renders tooltip text if provided */ tooltipText?: string; /** * Renders the button with a truncated text if the space is not enough to render the whole content */ truncate?: boolean; /** * Indicates the value of the input that will be returned when it's selected */ value: string | number; /** * Renders the button with centered text in case the text has to wrap multiple lines */ wrap?: boolean; }>(), { disabled: false, fullWidth: false, modelValue: null, truncate: false, wrap: false, tooltipText: undefined, } ); const emit = defineEmits<{ /** * Emitted every time the segmented control internal value is changed */ (e: 'update:model-value', value: string | number); }>(); const segmentedControlButtonLabel = ref(); const segmentedControlButtonId = generateUid('segmented-control-button'); const isChecked: ComputedRef<boolean> = computed(() => props.value === props.modelValue); const conditionalClasses = computed(() => ({ 'b-segmented-control-button--hug-content': !props.fullWidth, 'b-segmented-control-button--full-width': props.fullWidth, 'b-segmented-control-button--truncate': props.truncate, 'b-segmented-control-button--wrap': props.wrap && !props.truncate, })); const onClick = () => { if (!props.disabled) { emit('update:model-value', props.value); } }; </script> <script lang="ts"> /** * Internal component to be used within the BentoSegmentedControl component only */ export default { name: 'bento-segmented-control-button', }; </script> <style lang="scss" scoped src="./segmented-control-button.scss" /> 
+<template> <div class="b-segmented-control-button" :class="conditionalClasses"> <input :id="segmentedControlButtonId" v-bento-tooltip-directive="tooltipText" :aria-checked="isChecked" :aria-label="label" :checked="isChecked" :disabled="disabled" :value="value" type="radio" class="b-segmented-control-button__input" role="radio" @change="onClick" /> <label v-if="label" :for="segmentedControlButtonId" class="b-segmented-control-button__label-container"> <bento-typography ref="segmentedControlButtonLabel" class="b-segmented-control-button__label" el="span" variant="body" stronger > {{ label }} </bento-typography> </label> </div> </template> <script setup lang="ts"> import { computed, type ComputedRef, ref } from 'vue'; import { BentoTypography } from '@/components/typography'; import { generateUid } from '@/utils/ts/generate-uid'; import { BentoTooltipDirective as vBentoTooltipDirective } from '@/directives'; const props = withDefaults( defineProps<{ /** * Disable the radio button (optional) */ disabled?: boolean; /** * Renders the button with a 100% width */ fullWidth?: boolean; /** * The string the button will showcase */ label: string; /** * This property should not be used directly. * It will be used by v-model directive on the segmented control component */ modelValue?: string | number; /** * Renders tooltip text if provided */ tooltipText?: string; /** * Renders the button with a truncated text if the space is not enough to render the whole content */ truncate?: boolean; /** * Indicates the value of the input that will be returned when it's selected */ value: string | number; /** * Renders the button with centered text in case the text has to wrap multiple lines */ wrap?: boolean; }>(), { disabled: false, fullWidth: false, modelValue: null, truncate: false, wrap: false, tooltipText: undefined, } ); const emit = defineEmits<{ /** * Emitted every time the segmented control internal value is changed */ (e: 'update:model-value', value: string | number); }>(); const segmentedControlButtonLabel = ref(); const segmentedControlButtonId = generateUid('segmented-control-button'); const isChecked: ComputedRef<boolean> = computed(() => props.value === props.modelValue); const conditionalClasses = computed(() => ({ 'b-segmented-control-button--hug-content': !props.fullWidth, 'b-segmented-control-button--full-width': props.fullWidth, 'b-segmented-control-button--truncate': props.truncate, 'b-segmented-control-button--wrap': props.wrap && !props.truncate, })); const onClick = () => { if (!props.disabled) { emit('update:model-value', props.value); } }; </script> <script lang="ts"> /** * Internal component to be used within the BentoSegmentedControl component only */ export default { name: 'bento-segmented-control-button', }; </script> <style lang="scss" scoped src="./segmented-control-button.scss" /> 

package/dist/assets/components/segmented-control/segmented-control.stories.ts

@@ -1 +1 @@
-import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/vue'; import { ref } from 'vue'; import { isVue2 } from 'vue-demi'; import { BentoSegmentedControlEvent } from './segmented-control.types'; import BentoSegmentedControl from './segmented-control.vue'; import { storybookDocsParameter } from '@/core/utils/ts/storybook'; const ITEMS = [ { label: 'Segment 1', value: 1 }, { label: 'Segment 2', value: 2 }, { label: 'Segment 3', value: 3, disabled: true }, ]; const meta: Meta = { title: 'Segmented Control', component: BentoSegmentedControl, argTypes: { items: { control: { disable: true }, }, modelValue: { control: { disable: true }, }, // Events 'update:model-value': { table: { type: { summary: '(modelValue: string | number) => void' } }, control: { disable: true }, }, input: { table: { type: { summary: '(modelValue: string | number) => void' } }, control: { disable: true }, }, }, }; export default meta; type Story = StoryObj<typeof BentoSegmentedControl>; const defaultCode = ` <template> <bento-segmented-control v-model="selectedValue" :items="${JSON.stringify(ITEMS)}" aria-label="Segmented control example" full-width wrap @update:model-value="updateaction" @input="inputAction" /> </template> <script setup lang="ts"> import { BentoSegmentedControl, BentoSegmentedControlValue } from '@adyen/bento-vue2' import { ref } from 'vue' const selectedValue = ref<BentoSegmentedControlValue>() // Events const updateaction = () => { // Manually control the "@update:model-value" event in Vue3 } const inputAction = () => { // Manually control the "input" event in Vue2 } </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoSegmentedControl }, props: Object.keys(argTypes), template: ` <bento-segmented-control v-bind="args" v-model="selectedValue" :items="items" aria-label="Segmented control example" @update:model-value="updateAction" @input="inputAction" /> `, setup(props) { const selectedValue = ref(ITEMS[0].value); const items = ITEMS; const updateAction = value => { action(BentoSegmentedControlEvent.UPDATE)(value); }; const inputAction = value => { action('input')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, items, // Events updateAction, inputAction, }; }, }), args: {}, parameters: storybookDocsParameter(defaultCode), }; 
+import { action } from '@storybook/addon-actions'; import type { Meta, StoryObj } from '@storybook/vue'; import { ref } from 'vue'; import { isVue2 } from 'vue-demi'; import BentoSegmentedControl from './segmented-control.vue'; const SegmentedControlDefaultExample = "<template>\n <bento-segmented-control v-model=\"selectedValue\" :items=\"items\" aria-label=\"Segmented control example\" />\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import {\n BentoSegmentedControl,\n type BentoSegmentedControlItem,\n type BentoSegmentedControlValue,\n } from '@adyen/bento-vue2';\n\n const items: Array<BentoSegmentedControlItem> = [\n { label: 'Segment 1', value: 1 },\n { label: 'Segment 2', value: 2 },\n { label: 'Segment 3', value: 3, disabled: true },\n ];\n const selectedValue = ref<BentoSegmentedControlValue>(items[0].value);\n</script>\n"; import { storybookDocsParameter } from '@/utils/ts/storybook'; const ITEMS = [ { label: 'Segment 1', value: 1 }, { label: 'Segment 2', value: 2 }, { label: 'Segment 3', value: 3, disabled: true }, ]; const meta: Meta = { title: 'Segmented Control', component: BentoSegmentedControl, argTypes: { items: { control: { disable: true }, }, modelValue: { control: { disable: true }, }, // Events 'update:model-value': { table: { type: { summary: '(modelValue: string | number) => void' } }, control: { disable: true }, }, input: { table: { type: { summary: '(modelValue: string | number) => void' } }, control: { disable: true }, }, }, }; export default meta; type Story = StoryObj<typeof BentoSegmentedControl>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoSegmentedControl }, props: Object.keys(argTypes), template: ` <bento-segmented-control v-bind="args" v-model="selectedValue" :items="items" aria-label="Segmented control example" @update:model-value="updateAction" @input="inputAction" /> `, setup(props) { const selectedValue = ref(ITEMS[0].value); const items = ITEMS; const updateAction = value => { action('update:model-value')(value); }; const inputAction = value => { action('input')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, items, // Events updateAction, inputAction, }; }, }), args: {}, parameters: storybookDocsParameter(SegmentedControlDefaultExample), }; 

package/dist/assets/components/segmented-control/segmented-control.types.ts

@@ -1 +1 @@
-export type BentoSegmentedControlValue = string | number; export interface BentoSegmentedControlProps { /** * Accessible name describing the segmented control. * @deprecated Since v2.0.0. Use `aria-label` instead. */ ariaLabel?: string; /** * If set to true, renders the component full width. */ fullWidth?: boolean; /** * Items that will populate the segmented control. */ items: Array<BentoSegmentedControlItem>; /** * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value. */ modelValue?: BentoSegmentedControlValue; /** * If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore. */ wrap?: boolean; } export interface BentoSegmentedControlItem { label: string; value: string | number; disabled?: boolean; } /** * @deprecated Since v2.0.0. Use `update:model-value` or `v-model` instead. */ export enum BentoSegmentedControlEvent { UPDATE = 'update:model-value', } 
+export type BentoSegmentedControlValue = string | number; export interface BentoSegmentedControlProps { /** * If set to true, renders the component full width. */ fullWidth?: boolean; /** * Items that will populate the segmented control. */ items: Array<BentoSegmentedControlItem>; /** * Determines the selected value of the group. Corresponds to the BentoSegmentedControlItem's value. */ modelValue?: BentoSegmentedControlValue; /** * If set to true, wraps the items in the segmented control to show their content whenever these don't fit in the available space anymore. */ wrap?: boolean; } export interface BentoSegmentedControlItem { label: string; value: string | number; disabled?: boolean; } /** * @deprecated Since v3.0.0. Use `update:model-value` or `v-model` instead. */ export enum BentoSegmentedControlEvent { UPDATE = 'update:model-value', } 

package/dist/assets/components/segmented-control/segmented-control.vue

@@ -1 +1 @@
-<template> <div ref="segmentedControlRef" role="group" class="b-segmented-control" :class="conditionalClasses"> <segmented-control-button v-for="(item, index) in computedItems" ref="segmentedControlButtonRef" :key="`segmented-control-item-${index}-${item.label}`" class="b-segmented-control__item" :label="item.label" :value="item.value" :disabled="item.disabled" :truncate="truncate" :wrap="wrap" :full-width="fullWidth" :model-value="inputValue" :tooltip-text="item.tooltipText" @update:model-value="onInput" /> </div> </template> <script setup lang="ts"> import { computed, onMounted, ref, toRef, watch } from 'vue'; import SegmentedControlButton from './components/segmented-control-button/segmented-control-button.vue'; import { type BentoSegmentedControlProps, type BentoSegmentedControlValue } from './segmented-control.types'; import { observeSizeOfElement } from '@/utils/ts/resize'; import { printDevelopmentWarning } from '@/utils/ts/print-development-warning'; const emit = defineEmits<{ /** * Emitted every time the segmented control internal value is changed for Vue3 */ (e: 'update:model-value', value: any); /** * Emitted every time the segmented control internal value is changed for Vue2 * */ (e: 'input', value: BentoSegmentedControlValue): void; }>(); const props = withDefaults(defineProps<BentoSegmentedControlProps>(), { ariaLabel: null, fullWidth: false, wrap: false, modelValue: null, }); const inputValue = toRef(props, 'modelValue'); const segmentedControlRef = ref(); const segmentedControlButtonRef = ref(); const hasEllipsis = ref(); const truncate = computed(() => !props.wrap); watch( () => props.items, () => { if (props.items.length > 5) { printDevelopmentWarning( 'Do not use when you need to provide more than 5 segments at a time. If you need to provide more options, use a dropdown component.' ); } }, { immediate: true } ); onMounted(() => { observeSizeOfElement(segmentedControlRef.value, () => { if (segmentedControlRef.value) { hasEllipsis.value = segmentedControlButtonRef?.value?.map( el => el.$refs.segmentedControlButtonLabel.$el.offsetWidth < el.$refs.segmentedControlButtonLabel.$el.scrollWidth ); } }); }); const computedItems = computed(() => props.items.map((el, index) => ({ ...el, tooltipText: truncate.value && hasEllipsis?.value?.[index] ? el.label : undefined, })) ); const onInput = value => { emit('update:model-value', value); emit('input', value); }; const conditionalClasses = computed(() => ({ 'b-segmented-control--hug': !props.fullWidth, 'b-segmented-control--full-width': props.fullWidth, 'b-segmented-control--truncate': truncate.value, 'b-segmented-control--wrap': props.wrap, })); </script> <script lang="ts"> /** * @example * import { BentoSegmentedControl } from '@adyen/bento-vue2'; * * export default { * components: { BentoSegmentedControl }, * template: ` * <bento-segmented-control * :items="[{ label: 'Segment 1', value: 1 }, { label: 'Segment 2', value: 2 }, { label: 'Segment 3', value: 3, disabled: true }]" * :model-value="1" * @update:model-value="yourUpdateHandler" * /> * ` * } */ export default { name: 'bento-segmented-control', model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./segmented-control.scss" /> 
+<template> <div ref="segmentedControlRef" role="group" class="b-segmented-control" :class="conditionalClasses"> <segmented-control-button v-for="(item, index) in computedItems" ref="segmentedControlButtonRef" :key="`segmented-control-item-${index}-${item.label}`" class="b-segmented-control__item" :label="item.label" :value="item.value" :disabled="item.disabled" :truncate="truncate" :wrap="wrap" :full-width="fullWidth" :model-value="inputValue" :tooltip-text="item.tooltipText" @update:model-value="onInput" /> </div> </template> <script setup lang="ts"> import { computed, onMounted, ref, toRef, watch } from 'vue'; import SegmentedControlButton from './components/segmented-control-button/segmented-control-button.vue'; import { type BentoSegmentedControlProps, type BentoSegmentedControlValue } from './segmented-control.types'; import { observeSizeOfElement } from '@/utils/ts/resize'; import { printDevelopmentWarning } from '@/utils/ts/print-development-warning'; const emit = defineEmits<{ /** * Emitted every time the segmented control internal value is changed for Vue3 */ (e: 'update:model-value', value: any); /** * Emitted every time the segmented control internal value is changed for Vue2 * */ (e: 'input', value: BentoSegmentedControlValue): void; }>(); const props = withDefaults(defineProps<BentoSegmentedControlProps>(), { fullWidth: false, wrap: false, modelValue: null, }); const inputValue = toRef(props, 'modelValue'); const segmentedControlRef = ref(); const segmentedControlButtonRef = ref(); const hasEllipsis = ref(); const truncate = computed(() => !props.wrap); watch( () => props.items, () => { if (props.items.length > 5) { printDevelopmentWarning( 'Do not use when you need to provide more than 5 segments at a time. If you need to provide more options, use a dropdown component.' ); } }, { immediate: true } ); onMounted(() => { observeSizeOfElement(segmentedControlRef.value, () => { if (segmentedControlRef.value) { hasEllipsis.value = segmentedControlButtonRef?.value?.map( el => el.$refs.segmentedControlButtonLabel.$el.offsetWidth < el.$refs.segmentedControlButtonLabel.$el.scrollWidth ); } }); }); const computedItems = computed(() => props.items.map((el, index) => ({ ...el, tooltipText: truncate.value && hasEllipsis?.value?.[index] ? el.label : undefined, })) ); const onInput = value => { emit('update:model-value', value); emit('input', value); }; const conditionalClasses = computed(() => ({ 'b-segmented-control--hug': !props.fullWidth, 'b-segmented-control--full-width': props.fullWidth, 'b-segmented-control--truncate': truncate.value, 'b-segmented-control--wrap': props.wrap, })); </script> <script lang="ts"> /** * @example * import { BentoSegmentedControl } from '@adyen/bento-vue2'; * * export default { * components: { BentoSegmentedControl }, * template: ` * <bento-segmented-control * :items="[{ label: 'Segment 1', value: 1 }, { label: 'Segment 2', value: 2 }, { label: 'Segment 3', value: 3, disabled: true }]" * :model-value="1" * @update:model-value="yourUpdateHandler" * /> * ` * } */ export default { name: 'bento-segmented-control', model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./segmented-control.scss" /> 

package/dist/assets/components/selection-card/components/selection-card-group/selection-card-group.docs.mdx

@@ -14,8 +14,8 @@ handles the group's label and error handling logic.
 
 Use a `bento-selection-card-group` if:
 
--   You need to render related `bento-selection-card`
--   You need to render `bento-selection-card` with a `radio` input
+- You need to render related `bento-selection-card`
+- You need to render `bento-selection-card` with a `radio` input
 
 ### Do not use
 
@@ -29,14 +29,13 @@ with a `checkbox` input and without an associated label). In this case, use the
 Determines what kind of input element and selection logic is applied to the `bento-selection-card`s. The possible
 `variants` supported are:
 
--   `checkbox`: Renders a group of `bento-selection-card` with checkbox inputs. Multiple values can be selected at the
-    same time. The `modelValue` prop should be an array of values (or an empty array if no card is selected).
+- `checkbox`: Renders a group of `bento-selection-card` with checkbox inputs. Multiple values can be selected at the
+  same time. The `modelValue` prop should be an array of values (or an empty array if no card is selected).
 
     <Canvas of={SelectionCardGroupStories.Default} />
 
--   `radio`: Renders a group of `bento-selection-card` with radio inputs. Only one value can be selected at a time. The
-    `modelValue` prop should correspond to the `value` of the selected card (or `undefined` if no card has been
-    selected).
+- `radio`: Renders a group of `bento-selection-card` with radio inputs. Only one value can be selected at a time. The
+  `modelValue` prop should correspond to the `value` of the selected card (or `undefined` if no card has been selected).
 
     <Canvas of={SelectionCardGroupStories.Radio} />
 
@@ -47,8 +46,8 @@ Determines what kind of input element and selection logic is applied to the `ben
 Items in a `bento-selection-card-group` can be stacked vertically or horizontally by passing the correct value to the
 `layout` prop. In particular:
 
--   `horizontal`: will render the cards in the group next to each other.
--   `vertical`: will stack the cards in the group vertically.
+- `horizontal`: will render the cards in the group next to each other.
+- `vertical`: will stack the cards in the group vertically.
 
 ### Items per row
 
@@ -67,8 +66,8 @@ The `itemsPerRow` props is an object of type `BentoSelectionCardGroupItemsPerRow
 }
 ```
 
-Where the values for each key represent the number of cards displayed per row on the specific container size. Note that
-you can pass a maximum of 6 items per row.
+Where the values for each key represent the number of cards displayed per row on the specific container size. Each value
+must be an integer between 1 and 6.
 
 ### Optional label
 
@@ -115,5 +114,5 @@ navigation flow of the page. A detailed list of keyboard interactions is provide
 
 ## Resources
 
--   [Figma link](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=25526-44502&node-type=frame&t=vr0mgcsqz2FWuNua-0)
--   [WAI-ARIA guidelines for grouping controls](https://www.w3.org/WAI/tutorials/forms/grouping/)
+- [Figma link](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=25526-44502&node-type=frame&t=vr0mgcsqz2FWuNua-0)
+- [WAI-ARIA guidelines for grouping controls](https://www.w3.org/WAI/tutorials/forms/grouping/)