@adyen/bento-mcp 0.0.0 → 0.1.0

package/dist/assets/components/popover/popover.vue

@@ -0,0 +1 @@
+<template> <Transition name="b-popover__animation"> <popper-container v-if="open" :id="computedAttributes['id']" :aria-role="computedAttributes.role" :aria-label="computedAriaLabel" :arrow="{ classes: ['b-popover__arrow'] }" :disabled-focus-trap="disableFocusTrap" :trap-all="trapAll" :trap-all-options="trapAllOptions" :class="conditionalClasses" :fallback-position="fallbackPosition" :fixed-positioning="fixedPositioning" :offset="[0, offset]" :position="position" :target-element="targetElement" class="b-popover" @placement="$emit('placement', $event)" > <div v-if="hasSlot('image')" class="b-popover__image"> <div v-if="dismissible" class="b-popover__image-dismiss-button"> <bento-popover-dismiss-button on-image @click="dismissPopover" /> </div> <slot name="image"></slot> </div> <div v-if="title" class="b-popover__header"> <div class="b-popover__header-title"> <slot v-if="hasSlot('headerIcon')" name="headerIcon"></slot> <bento-popover-title :title="title" :is-image-title="!!hasSlot('image')" /> </div> <div v-if="dismissible && !hasSlot('image')"> <bento-popover-dismiss-button @click="dismissPopover" /> </div> </div> <div v-if="hasSlot('default')" class="b-popover__content" :class="contentConditionalClasses"> <slot></slot> </div> <div v-if="actions" class="b-popover__footer"> <bento-button-actions :actions="actions" :layout="actionsLayout"></bento-button-actions> </div> </popper-container> </Transition> </template> <script setup lang="ts"> import { computed, inject, ref, toRefs, useAttrs, useSlots } from 'vue'; import BentoPopoverDismissButton from './components/popover-dismiss-button/popover-dismiss-button.vue'; import BentoPopoverTitle from './components/popover-title/popover-title.vue'; import BentoButtonActions from '@/components/button/components/button-actions/button-actions.vue'; import { PopperContainer, PopperContainerAriaRole } from '@/components/popper-container'; import { useHasSlot } from '@/composables/use-has-slot/use-has-slot'; import { INPUT_FILTER_POPOVER_INJECTION_KEY } from '@/components/filter-bar/components/input-filter/input-filter.keys'; import { INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY } from '@/components/filter-bar/components/input-with-dropdown-filter/input-with-dropdown-filter.keys'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { POPOVER_OFFSET_INJECTION_KEY } from './popover.keys'; import type { Placement } from '@floating-ui/vue'; import type { BentoPopoverProps } from './popover.types'; const DEFAULT_OFFSET = 2; const props = withDefaults(defineProps<BentoPopoverProps>(), { actions: undefined, actionsLayout: 'buttons-end', ariaLabel: undefined, divider: false, disableFocusTrap: false, dismissible: false, fallbackPosition: () => ['bottom-start', 'right-start', 'top-start', 'left-start'], fitContent: false, fixedPositioning: false, open: false, large: false, modifiers: undefined, position: 'bottom-start', small: false, title: undefined, trapAll: false, trapAllOptions: undefined, withoutSpace: false, overflowVisible: false, }); const emit = defineEmits<{ /** * Triggered when the `dismiss` button is clicked */ (e: 'dismiss'): void; /** * Triggered when the popover `placement` changes */ (e: 'placement', placement: Placement): void; }>(); const slots = useSlots(); const attrs = useAttrs(); const computedAttributes = computed(() => ({ id: attrs.id?.toString() as string, role: attrs?.['role'] === null ? undefined : PopperContainerAriaRole.POPOVER, })); const offset = inject<number>(POPOVER_OFFSET_INJECTION_KEY, DEFAULT_OFFSET); const ariaLabelAttribute = ref(attrs['aria-label']); const { ariaLabel, title } = toRefs(props); const computedAriaLabel = useAriaLabel({ ariaLabel: ariaLabelAttribute.value as string, // TODO: take this line away when the aria-label props is removed label: ariaLabel, defaultFallback: title, }); const isOverflowVisible = inject(INPUT_FILTER_WITH_DROPDOWN_POPOVER_INJECTION_KEY, false) || inject(INPUT_FILTER_POPOVER_INJECTION_KEY, false); const conditionalClasses = computed(() => ({ 'b-popover--small': props.small && !props.large, 'b-popover--with-divider': !!props.divider, 'b-popover--large': props.large && !props.small, 'b-popover--fit-content': props.fitContent, 'b-popover--without-space': props.withoutSpace, 'b-popover--overflow-visible': props.overflowVisible || isOverflowVisible, })); const contentConditionalClasses = computed(() => ({ 'b-popover__content--with-title': !!props.title, })); const dismissPopover = () => emit('dismiss'); const hasSlot = useHasSlot(slots); </script> <script lang="ts"> /** * Example description of the component... * * @example * import { BentoPopover } from '@adyen/adl-vue2'; * * export default { * components: { BentoPopover }, * template: ` * <bento-popover id="your-popover-id"> * ...Example code of the component * </bento-popover> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./popover.scss" /> 

package/dist/assets/components/popper-container/popper-container.docs.mdx

@@ -0,0 +1,11 @@
+import { Canvas, Story, Meta } from '@storybook/blocks';
+import * as ComponentStories from './popper-container.stories';
+
+<Meta of={ComponentStories} />
+
+# Popper Container / Popover
+
+A popover is a window that opens when a user clicks on an element. A popover can contain other components like buttons
+or lists
+
+<Canvas of={ComponentStories.Default} />

package/dist/assets/components/popper-container/popper-container.stories.ts

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import { PopperContainerPosition } from './popper-container.types'; import { isVue2 } from 'vue-demi'; import type { Meta, StoryObj } from '@storybook/vue'; import PopperContainer from './popper-container.vue'; const meta: Meta = { title: 'Popper Container', component: PopperContainer, argTypes: { fixedPositioning: { control: 'boolean' }, position: { options: Object.values(PopperContainerPosition), mapping: PopperContainerPosition, control: { type: 'select', }, }, fallbackPosition: { options: Object.values(PopperContainerPosition), mapping: PopperContainerPosition, control: { type: 'select', }, }, withArrow: { control: 'boolean' }, }, args: { fixedPositioning: false }, }; export default meta; type Story = StoryObj<typeof PopperContainer>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { PopperContainer }, props: Object.keys(argTypes), data: () => ({ isOpen: false }), setup(props) { const onPlacementUpdate = action('placement'); return { // Values args: isVue2 ? props : _args, // Methods onPlacementUpdate, }; }, template: ` <div style="margin: 150px"> <button ref="target" @click="isOpen = !isOpen">Toggle popover</button> <popper-container v-if="isOpen" v-bind="args" :target-element="$refs.target" :arrow="args.withArrow ? { strokeClass: this.arrowStrokeClass, fillClass: this.arrowFillClass, padding: this.arrowPadding } : false" :offset="[args.offsetSkidding, args.offsetDistance]" @placement="onPlacementUpdate" > <div class="adl2-card__body"> <p class="adl2-text">I'm a popping card!</p> </div> </popper-container> </div> `, }), args: { position: 'auto', withArrow: false, arrowStrokeClass: 'arrow-stroke-class', arrowFillClass: 'arrow-fill-class', arrowPadding: 0, offsetSkidding: 0, offsetDistance: 0, matchWidth: false, }, }; 

package/dist/assets/components/popper-container/popper-container.vue

@@ -0,0 +1 @@
+<template> <bento-focus-trap v-bind="$attrs" :id="id" ref="popperContainerRef" class="b-popper-container" :data-popper-placement="placement" :disabled="disabledFocusTrap" :style="floatingStyles" :role="ariaRole" :trap-all="trapAll" :trap-all-options="trapAllOptions" > <slot></slot> <span v-if="props.arrow" v-bind="arrowAttributes" ref="floatingArrow" class="b-popper-container__arrow" data-testid="arrow" ></span> </bento-focus-trap> </template> <script setup lang="ts"> import type {} from '@floating-ui/core'; import { computed, type PropType, type Ref, ref, toRefs, watch } from 'vue'; import { arrow as arrowMiddleware, autoPlacement, autoUpdate, flip, // eslint-disable-next-line vue/no-dupe-keys offset, shift, useFloating, } from '@floating-ui/vue'; import { BentoFocusTrap } from '@/components/focus-trap'; import { type FallbackPositionProp, PopperContainerAriaRole, type PopperContainerArrowProp, PopperContainerPosition, type PopperContainerPositionBasic, } from './popper-container.types'; import type { VueNodeElement } from '@/types/elements'; import type { AutoPlacementOptions, Middleware, Placement, Strategy } from '@floating-ui/vue'; import { getFlipModifier, getOffsetModifier, sameWidthMiddleware } from './popper-container.utils'; import type { CSSProperties } from 'vue/types/jsx.d.ts'; import { type Options as FocusTrapOptions } from 'focus-trap'; const props = defineProps({ /** * The aria role assigned to the container. Defaults to null, which means it's not set if nothing is passed. */ ariaRole: { type: String as PropType<PopperContainerAriaRole>, default: null, validator: value => Object.values(PopperContainerAriaRole).includes(value as PopperContainerAriaRole), }, /** * Indicates if container should have additional arrow, pointing at target element * Can be just a boolean flag, or an object with additional configuration: * @property {Array<string>} arrow.classes – apply any additional classes to the arrow element. * @property {string} arrow.padding – useful when content has rounded corners, @see {@link https://floating-ui.com/docs/arrow#padding} */ arrow: { type: Object as PropType<PopperContainerArrowProp | boolean>, default: undefined }, /** * Disables wrapping focus-trap component. * Mostly useful for the storybook demo. */ disabledFocusTrap: { type: Boolean, default: false }, /** * Allows to configure to fallback position to the one specified, it could be 'auto' or ['right', 'top', ...]. * Useful when not using auto as starting placement. * @see {@link https://floating-ui.com/docs/flip#fallbackplacements} */ fallbackPosition: { type: [Array, String] as PropType<FallbackPositionProp>, default: null, }, /** * Instructs popover to be visible outside of the containing container. * Useful when component would be used in limited containers like Modal, Side panel, etc. * @see {@link https://floating-ui.com/docs/usefloating#strategy} */ fixedPositioning: { type: Boolean, default: false }, /** * The id to be set on the component. Use it for accessibility purposes. */ id: { type: String, default: null }, /** * If hiding / showing popper element then use this property to tell the popper when to update it's position. * This will drastically help improve performance, as we will not need to track hidden elements. */ isHidden: { type: Boolean, default: null }, /** * Instructs popper container to have the same width as target element. */ matchWidth: { type: Boolean, default: false }, /** * Custom set of middleware. Useful for low-level control over Popper behavior in some really complex use cases. * @see {@link https://floating-ui.com/docs/middleware} */ middleware: { type: Array as PropType<Array<Middleware>>, default: null }, /** * Allows to displace a popper container from its target element. * @see {@link https://floating-ui.com/docs/offset#options} */ offset: { type: Array as PropType<Array<number>>, default: () => [0, 0], validator: (value: Array<number>) => value?.length === 2, }, /** * Position relative to the target element * @see {@link https://floating-ui.com/docs/computeposition#placement} */ position: { type: String as PropType<PopperContainerPosition | `${PopperContainerPosition}`>, default: PopperContainerPosition.AUTO, validator: value => Object.values(PopperContainerPosition).includes(value as PopperContainerPositionBasic), }, /** * Reference to the DOM element or Vue component for positioning */ targetElement: { type: [Element, Object] as PropType<VueNodeElement>, required: true }, /** * Activates focus trap for both arrow and tab keys. */ trapAll: { type: Boolean, default: false }, /** * Configurations for the focus-trap when trap-all is active. */ trapAllOptions: { type: Object as PropType<FocusTrapOptions>, default: undefined, }, }); const emit = defineEmits<{ /** * Emits new placement of popper container when it's placement is updated. */ (e: 'placement', value: Placement): void; }>(); // Popper / floating ui logic const { position } = toRefs(props); const popperContainerRef = ref(); const floatingArrow = ref(null); const emittedPosition = ref(props.position); const targetElement = computed(() => (props.targetElement as any).$el ? ((props.targetElement as any).$el as Element) : (props.targetElement as Element) ); const popperContainerElement = computed(() => (popperContainerRef.value as any).$el ? ((popperContainerRef.value as any).$el as HTMLElement) : (popperContainerRef.value as HTMLElement) ); const isFlipMiddleware = computed(() => props?.position !== 'auto' && props?.fallbackPosition !== 'auto'); const getAutoPlacementProps = computed<AutoPlacementOptions>(() => { switch (props.position) { case 'auto-start': return { alignment: 'start', crossAxis: true }; case 'auto-end': return { alignment: 'end', crossAxis: true }; default: return undefined; } }); const strategy = computed<Strategy>(() => (props.fixedPositioning ? 'fixed' : 'absolute')); const { floatingStyles, middlewareData, placement, update } = useFloating(targetElement, popperContainerRef, { placement: position as Ref<Placement>, middleware: [ // Adds flip modifier if fallbackPosition is not set to auto ...(isFlipMiddleware.value ? [ flip({ fallbackPlacements: getFlipModifier(props.fallbackPosition).fallbackPlacements, }), ] : []), // Adds autoposition middlelare if position is set to any auto variants ...(!isFlipMiddleware.value ? [autoPlacement(getAutoPlacementProps.value)] : []), // Add shifting middle in case popper is still not fully visible in view port shift(), // Adds offset middlelare if offset property is set ...(props.offset ? [offset(getOffsetModifier(props.arrow, props.offset))] : []), // Adds arrow middlelare if arrow property is set, can set additional padding property ...(props.arrow ? [arrowMiddleware({ element: floatingArrow, padding: props.arrow.padding || 0 })] : []), // Adds same width middleware to keep popper width same as referenced element's width ...(props.matchWidth ? [sameWidthMiddleware] : []), // If there is additional custom middleware to add via the property then add it ...(props.middleware?.length > 0 ? props.middleware : []), ], strategy, // If we're mounting the element with a `v-if` then we need to auto update it while it's mounted ...(props.isHidden === null ? { whileElementsMounted: autoUpdate } : []), }); // If we're hiding the floating element, then we need to manually update once it's visible let cleanupAutoUpdate: undefined | (() => void); watch( () => props.isHidden, () => { if (props.isHidden !== null && !props.isHidden) { cleanupAutoUpdate = autoUpdate(targetElement?.value, popperContainerElement?.value, update); } else if (props.isHidden !== null && props.isHidden && typeof cleanupAutoUpdate === 'function') { cleanupAutoUpdate(); } } ); // Watch placement for changes, if changed then emit new placemenet watch( () => placement.value, () => { if (emittedPosition.value !== placement.value) { emittedPosition.value = placement.value; emit('placement', emittedPosition.value); } } ); // Arrow attributes and styles const arrowStyles = computed<CSSProperties>(() => ({ position: 'absolute', left: middlewareData.value.arrow?.x != null ? `${middlewareData.value.arrow.x}px` : '', top: middlewareData.value.arrow?.y != null ? `${middlewareData.value.arrow.y}px` : '', })); const arrowAttributes = computed(() => ({ class: props.arrow.classes, style: arrowStyles.value, // Applies a data-hide attribute to arrow element depending on center offset. ...(middlewareData.value.arrow?.centerOffset !== 0 ? { 'data-hide': '' } : {}), })); </script> <script lang="ts"> import type {} from '@floating-ui/vue'; /** * A wrapper for the 'popper/core' package that overlays a small piece of content near a target element. * * NOTE: This component should not be used by itself but more implemented by other exported components * e.g. Tooltip * More info here on the package: https://floating-ui.com/docs/vue * * * @usage * import { PopperContainer } from '@adyen/bento-vue2'; * * export default { * components: { PopperContainer }, * computed: { * targetElement() { * return this.$refs.tooltipTarget; * }, * }, * template: ` * <popper-container * :target-element="targetElement" * :position="position" * > * {{ content }} * </popper-container>`, * } */ export default {}; </script> <style lang="scss" scoped src="./popper-container.scss" /> 

package/dist/assets/components/promo-banner/promo-banner.docs.mdx

@@ -0,0 +1,94 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as PromoBannerStories from './promo-banner.stories';
+
+<Meta of={PromoBannerStories} />
+
+# PromoBanner
+
+The promotional banner, or promo-banner, is used to highlight important information, announcements, or promotions.
+
+<Canvas of={PromoBannerStories.Default} />
+
+## Use Cases
+
+Use this component to:
+
+-   Communicate time-sensitive announcements (e.g., limited-time offers, updates).
+-   Highlight key actions or promotions.
+
+### Do not use
+
+Avoid using this component to:
+
+-   Display persistent messages that require ongoing visibility. Consider alternative components like alerts for those.
+
+## Variations
+
+-   `horizontal` (default) - Ideal for large spaces. Changes to vertical layout in smaller containers depending on the
+    image's aspect-ratio.
+-   `vertical` - Suitable for smaller spaces, such as half a page or side panels. Does not change with container size.
+
+## Modifiers
+
+### Actions
+
+The promotional banner incorporates the `BentoButton` component.
+
+We support only `primary` or `secondary` button variants. They are optional.
+
+### Color
+
+We have three available colors - `green`, `grey` and `blue`.
+
+### Image
+
+The promotional banner incorporates the `BentoImage` component.
+
+It only allows aspect-ratio of `16:9`, `2:1` and `1:1`. This is based on the ratio that brand uses. To change the
+illustration/image go the brand website to download a `png` of the illustration and set the `image.src` property to the
+downloaded image path. Choose a format based on the illustration and the width of your banner.
+
+Depending on the image's `aspect-ratio`, the promotional banner respond at different containers sizes. Refer to
+[here](#responsive) for more information.
+
+### Dismissible
+
+Emits an event that allows users to remove the banner if it is not critical. This is set to `true` by default.
+
+## Accessibility
+
+### Keyboard interaction
+
+| Keyboard interaction | Output                                                 |
+| -------------------- | ------------------------------------------------------ |
+| `Tab`                | Focus visibly moves to the first button on the banner. |
+| `Enter`              | Selects the button.                                    |
+| `Space`              | Selects the button.                                    |
+
+### Roles, states and properties
+
+| ARIA attribute    | is automatic?                  | fallback used | manual override |
+| ----------------- | ------------------------------ | ------------- | --------------- |
+| `role`            | Yes, has the `region` value.   | -             | -               |
+| `aria-labelledby` | Yes, it uses the `title` text. | -             | -               |
+
+### Responsive
+
+The promotional banner transitions between horizontal and vertical layouts based on container width. Additionally,
+illustration aspect ratios adapt dynamically at specific breakpoints to maintain optimal visual balance.
+
+-   ≤ 850px → Landscape (2:1) shifts to vertical layout.
+-   ≤ 800px → Landscape (16:9) shifts to vertical layout.
+-   ≤ 623px → Square (1:1) shifts to vertical layout.
+
+If the promotional banner is given `layout="vertical"`, it will not be responsive i.e. always remain vertical regardless
+of container width.
+
+> _Note_: The responsiveness of the promotional banner is not determined by the screen size but is instead based on the
+> size of the container in which it is placed. It is important to note that while screen size can affect layout
+> elements, the banner's responsiveness specifically adapts to the dimensions of its containing element, ensuring
+> flexibility within that context.
+
+## Resources
+
+-   [Figma link](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=38849-7952)

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

@@ -0,0 +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), }; 

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

@@ -0,0 +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" /> 

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

@@ -0,0 +1,76 @@
+import { Canvas, Meta, Story } from '@storybook/blocks';
+import * as RadioButtonStories from './radio-button.stories';
+
+<Meta title="Radio button" of={RadioButtonStories} />
+
+# Radio button
+
+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.
+
+<Canvas of={RadioButtonStories.Default} />
+
+## Use Cases
+
+**Only** use this component when:
+
+-   Creating a new component that is not provided by Bento
+
+### Do not use
+
+Don't use a radio button in the following cases:
+
+-   Multiple choices: Use the `bento-radio-group` as it is built with accessibility in mind.
+-   Building a form: Use `bento-radio-group`, `bento-checkbox` or `bento-toggle`.
+
+### Guidelines
+
+When using the `bento-radio-button` component, it is advised:
+
+-   Accessibility (a11y) must always come first.
+-   Create a group with all the individual `bento-radio-button` using a `fieldset` with a `legend` inside for
+    accessibility.
+-   Follow
+    [Bento guidelines](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=25221-4758).
+-   When creating a group the following accessibility keyboard interactions **must** be supported according to the
+    official [W3 aria specifications](https://www.w3.org/WAI/ARIA/apg/patterns/radio/examples/radio-rating/#kbd_label)
+    -   `Tab`: Moves focus to the radio-button or away from it.
+    -   `Space`: When focus is on the radio-button, selects the value.
+    -   `Up`: When focus is on the radio-button, selects the next value.
+    -   `Left`: When focus is on the radio-button, selects the next value.
+    -   `Down`: When focus is on the radio-button, selects the previous value.
+    -   `Right`: When focus is on the radio-button, selects the previous value.
+
+## Variations
+
+There are no variations available for the Radio button component
+
+## Modifiers
+
+### Disabled
+
+Renders the radio button in a disabled state. In practice this makes the component non-interactive and renders a
+`not-allowed` cursor on hover.
+
+### Adding tags to items
+
+If you would like to grab a user's attention or guide them in their choice on which item to select then you may want to
+use `tag` property. This property accepts all properties a `BentoTag` accepts.
+
+## Accessibility
+
+The `label` and `description` areas are clickable. A click on these elements selects the radio input value.
+
+Screen readers convey the state of the radio button automatically.
+
+### Roles, states and properties
+
+| ARIA attribute | is automatic?                                                                          | fallback used                                                                       | manual override |
+| -------------- | -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | --------------- |
+| `aria-label`   | Yes, corresponds to the `default` slot text                                            | If no text is passed to the `default` slot, then the `value` property will be used. | -               |
+| `role`         | Yes, through the semantic `input[type="radio"]` element with `role="radio"` set.       | -                                                                                   | -               |
+| `aria-checked` | Yes, set when the radio button gets selected through the `input`'s `checked` property. | -                                                                                   | -               |
+
+## Resources
+
+-   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/ADL-2.0---Components?node-id=211-4397&t=MzNjIT4cgO21YCtH-0)

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

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { ref } from 'vue'; import { isVue2 } from 'vue-demi'; import type { Meta, StoryObj } from '@storybook/vue'; import { BentoRadioButton } from './index'; const meta: Meta = { title: 'Radio group/Radio button', component: BentoRadioButton, argTypes: { // Props hasError: { name: 'has-error', }, modelValue: { name: 'model-value', control: { disable: true }, }, // Slots content: { type: { name: 'string', required: false }, description: 'Conditional content slot that is shown when the radio button is checked', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, default: { type: { name: 'string', required: false }, description: 'The default content slot', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, description: { type: { name: 'string', required: false }, description: 'Description slot', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, }, }; export default meta; type Story = StoryObj<typeof BentoRadioButton>; const LABEL = 'Label'; const DESCRIPTION = 'Optional description'; const defaultCode = ` <template> <bento-radio-button :value="value" v-model="modelValue" @update:model-value="onInput" > Label <template #description>Description text</template> <template #content>Conditional content (optional)</template> </bento-radio-button> </template> <script setup lang="ts"> import { BentoButtonRadioButton, type BentoRadioButtonValue } from '@adyen/bento-vue2' const value = 'option-value-id' const modelValue = ref<BentoRadioButtonValue>(null) const onInput = (value: BentoRadioButtonValue) => {} </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ props: Object.keys(argTypes), components: { BentoRadioButton }, template: ` <bento-radio-button v-bind="args" :model-value.sync="modelValue" @input="input" > {{args.default}} <template #description>{{args.description}}</template> <template #content>{{args.content}}</template> </bento-radio-button> `, setup(props) { const modelValue = ref('any value'); return { // Values args: isVue2 ? props : _args, modelValue, // Methods update: action('update:model-value'), input: action('input'), }; }, }), args: { default: LABEL, description: DESCRIPTION, value: 'option', content: 'Conditional content', }, parameters: storybookDocsParameter(defaultCode), }; 

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

@@ -0,0 +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" /> 

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

@@ -0,0 +1,154 @@
+import { Canvas, Story, Source, Meta } from '@storybook/blocks';
+import * as RadioGroupStories from './radio-group.stories';
+
+<Meta of={RadioGroupStories} />
+
+# Radio group
+
+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.
+
+<Canvas of={RadioGroupStories.Default} />
+
+> IMPORTANT
+>
+> Labels without a description are hidden by default. You must set a `label` and a `description` (via a prop or slot) to
+> display both. If only a `label` (without `description`) is meant to be displayed, then set `hideLabel` to `false`. See
+> more details in [hide label](#hide-label).
+
+## Use Cases
+
+Here are some examples:
+
+- Choosing a subscription plan for a service, when the user can select only one plan from a list of available plans.
+- Payment Methods selection from various options, such as credit card, PayPal, or bank transfer.
+
+### Do not use
+
+Don't use a radio button group in the following cases:
+
+- Multiple selections - the `radio-group` component is designed for selecting a single option from a group of mutually
+  exclusive choices. If you need to allow users to select multiple options simultaneously, consider using a
+  `checkbox-group` instead.
+- If you have a large amount of options (e.g. more than four), then consider using a dropdown as it takes up less screen
+  space.
+
+### Guidelines
+
+When using the `radio-group` component, it is advised to:
+
+- Align the choices vertically when possible as it is easier to scan and localize. If you still need to display them
+  horizontally, make sure you have enough space between the options so that it’s absolutely clear which choice goes with
+  which label.
+- Make sure the options are both comprehensive and clearly distinctive from each other.
+
+## Variations
+
+### Variant
+
+The `variant` property defines the layout in which the radio buttons are displayed. It can be one of the following:
+
+- `'vertical'`: displays the radio buttons stacked on top of each other. It's the default value.
+- `'horizontal'`: displays the radio buttons one next to the other. If not enough horizontal space is present, the items
+  that don't fit overflow on a new line.
+
+## Modifiers
+
+### Disabled
+
+Renders the `radio-group` in a disabled state. In practice this makes the component non-interactive and renders a
+`not-allowed` cursor on hover.
+
+### Readonly
+
+Renders the `radio-group` in a readonly state. In terms of functionality, read only states are focusable and submittable
+in a form. They're considered to be 'active' from an application's point of view.
+
+### Tooltip
+
+A tooltip with extra information for the field can be rendered by passing the desired information to the `tooltipText`
+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`.
+
+### Hide Label
+
+The `label` is not displayed by default in Bento `1.x` if passed without a `description` property set at the same time.
+
+To display a `label` without a `description` set, the property `hideLabel` must be set to `false` (`true` by default).
+
+Displaying a `label` (without a `description`) will be the default in Bento `2.x` and the property `hideLabel` will be
+removed.
+
+<Source
+    dark
+    language="html"
+    code={`<bento-radio-group
+    :items="[
+        { value: 1, label: 'Label text' },
+        { value: 2, label: 'Label text 2', description: 'Description text' },
+    ]"
+    label="Group label"
+    hide-label="false"
+/>`}
+/>
+
+### Custom slots
+
+The `RadioGroup` component offers a `description` slot to add a description to the group, and a `content` slot for the
+vertical layout, which will only display the content for the selected radio option.
+
+<Canvas sourceState="hidden">
+    <Story of={RadioGroupStories.Slots} />
+</Canvas>
+
+## Adding tags to items
+
+If you would like to grab a user's attention or guide them in their choice on which item to select then you may want to
+use `tag` property on each `BentoRadioGroupItem`. This property accepts all properties a `BentoTag` accepts.
+
+<Canvas of={RadioGroupStories.WithTag} />
+
+## Accessibility
+
+The `bento-radio-group` component has been implemented using WAI-ARIA's radio group pattern and grouping controls
+pattern.
+
+The radio button itself is built using a semantically accessible structure which leverages the native `input` tag with a
+role of `radio` and which is associated to its corresponding `label`. Both the `label` and `description` areas of each
+radio button are clickable. A click on these elements selects the corresponding radio input value. Since both the the
+radio button and the group are built using semantic elements, screen readers convey the state and grouping of these
+components automatically.
+
+### Keyboard interaction
+
+Since the `bento-radio-group` component is implemented via a `fieldset` tag, it is reachable through keyboard navigation
+and follows the logical navigation flow of the page. A detailed list of keyboard interactions is provided in the table
+below.
+
+| Keyboard interaction | Output                                                                                       |
+| -------------------- | -------------------------------------------------------------------------------------------- |
+| `Tab`                | Moves focus to the first radio button in the group or away from the group.                   |
+| `Arrow keys`         | Moves focus to the different radio buttons in the group and selects the corresponding value. |
+
+### Roles, states and properties
+
+| ARIA attribute | is automatic?                                                                                                                                                       | fallback used                                                                                 | manual override                                                                                                                                                                                   |
+| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `role`         | Yes. In the group, through the semantic `fieldset` element, which groups all its child elements. In the buttons, through the `input` tag with `[role="radio"]` set. | -                                                                                             | -                                                                                                                                                                                                 |
+| `label`        | Yes. In the group it's set via the `label` prop, whereas in the buttons it's set via the `slot` content.                                                            | In each radio button, the radio's value gets set in the unlikely scenario no slot is present. | Yes, the consumer is required to set both values.                                                                                                                                                 |
+| `form`         | No, it needs to be manually set via the `form` property.                                                                                                            | -                                                                                             | The user can pass the form id with which the group needs to be associated with. This allows to use such component also externally from the form and have the value submitted along with the form. |
+| `disabled`     | No, it needs to be set by setting the `disabled` prop to `true`.                                                                                                    | -                                                                                             | If set to reu, it disables all the elements contained in the group.                                                                                                                               |
+
+## Resources
+
+- [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/ADL-2.0---Components?node-id=211-4397&t=MzNjIT4cgO21YCtH-0)
+- [WAI-ARIA guidelines for grouping controls](https://www.w3.org/WAI/tutorials/forms/grouping/)
+- [WAI-ARIA radio group pattern](https://www.w3.org/WAI/ARIA/apg/patterns/radio/)

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

@@ -0,0 +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), }; 

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

@@ -0,0 +1 @@
+<template> <div class="b-radio-group"> <controls-group class="b-radio-group__buttons" :aria-describedby="shouldShowErrorMessage ? errorId : ''" :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" /> 

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

@@ -0,0 +1 @@
+<template> <div ref="editableRef" contenteditable="true" tabindex="0" :disabled="disabled" class="b-rich-text-editor-content-area" @input="onInput" @keydown="preserveCursor" > </div> </template> <script setup lang="ts"> import { onMounted, ref, watch } from 'vue'; import { type BentoRichTextEditorContentAreaProps } from './rich-text-editor-content-area.types'; const props = withDefaults(defineProps<BentoRichTextEditorContentAreaProps>(), { disabled: false, value: null, }); const emit = defineEmits<{ (e: 'input', value: BentoRichTextEditorContentAreaProps['value']): void; }>(); const editableRef = ref<HTMLDivElement>(null); const onInput = (event: InputEvent) => { emit('input', (event.target as HTMLElement).innerText); }; const preserveCursor = () => { // Do nothing here. This prevents unnecessary handling that can disturb user input }; // Update the contenteditable div after the component is mounted onMounted(() => { if (editableRef.value && editableRef.value.innerText !== props.value) { editableRef.value.innerText = props.value; // Initial content sync } }); watch( () => props.value, newVal => { if (editableRef.value && editableRef.value.innerText !== newVal) { editableRef.value.innerText = newVal; } } ); </script> <style lang="scss" scoped src="./rich-text-editor-content-area.scss" /> 

package/dist/assets/components/rich-text-editor/components/rich-text-editor-renderer/components/rich-text-editor-code-block/rich-text-editor-code-block.vue

@@ -0,0 +1 @@
+<template> <pre>{{ code }}</pre> </template> <script setup lang="ts"> import { type RichTextEditorCodeBlockProps } from './rich-text-editor-code-block.types'; defineProps<RichTextEditorCodeBlockProps>(); </script> 

package/dist/assets/components/rich-text-editor/components/rich-text-editor-renderer/components/rich-text-editor-inline-code/rich-text-editor-inline-code.vue

@@ -0,0 +1 @@
+<template> <code>{{ code }}</code> </template> <script setup lang="ts"> import { type RichTextEditorInlineCodeProps } from './rich-text-editor-inline-code.types'; defineProps<RichTextEditorInlineCodeProps>(); </script> 

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

@@ -0,0 +1 @@
+<template> <bento-link :to="url" external is-not-routing> <template #default> <slot></slot> </template> </bento-link> </template> <script setup lang="ts"> import { BentoLink } from '@/components/link'; import { type RichTextEditorLinkProps } from './rich-text-editor-link.types'; withDefaults(defineProps<RichTextEditorLinkProps>(), { url: '', }); </script> 

package/dist/assets/components/rich-text-editor/components/rich-text-editor-renderer/components/rich-text-editor-list-item/rich-text-editor-list-item.vue

@@ -0,0 +1 @@
+<template> <li :style="noBullet"> <bento-checkbox v-if="isTaskList" v-model="isChecked"> <slot></slot> </bento-checkbox> <div v-else> <slot></slot> </div> </li> </template> <script setup lang="ts"> import { computed, ref } from 'vue'; import BentoCheckbox from '@/components/checkbox/checkbox.vue'; import { type RichTextEditorListItemProps } from './rich-text-editor-list-item.types'; const props = withDefaults(defineProps<RichTextEditorListItemProps>(), { checked: null, }); const isChecked = ref(props.checked); const isTaskList = computed(() => props.checked !== null); const noBullet = computed(() => (isTaskList.value ? { listStyleType: 'none', marginLeft: '-20px' } : {})); </script> 

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

@@ -0,0 +1 @@
+<template> <table> <slot> <thead><slot name="head"></slot></thead> <tbody><slot name="body"></slot></tbody> </slot> </table> </template> 

package/dist/assets/components/rich-text-editor/rich-text-editor.docs.mdx

@@ -0,0 +1,52 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as RichTextEditorStories from './rich-text-editor.stories';
+
+<Meta of={RichTextEditorStories} />
+
+# RichTextEditor
+
+An editable content area with additional functionality that allows to change text styling and add links and tables.
+
+<Canvas of={RichTextEditorStories.Default} />
+
+## Use Cases
+
+Use a RichTextEditor if:
+
+- The text count exceeds 100 characters
+- You need content with rich text formats (bold, italics, list, table)
+
+### Do not use
+
+- Don’t use when you need user to enter shorter text content. Use input field or text area instead.
+- Don’t use when you need user to enter non-sentence content (like URLs). Use input field instead.
+
+## Variations
+
+When providing the value `visual` to the `mode` property, the editor will activate in visual mode when rendered. The
+default value is `markdown`.
+
+## Modifiers
+
+### Disabled
+
+The disabled property determines whether the component is enabled or disabled.
+
+When a `rich-text-editor` component is disabled, it will not allow user interaction and the value of the input cannot be
+changed.
+
+The visual representation of a disabled `rich-text-editor` component is as a grayed-out color or and lack of hover
+effect.
+
+### Error message
+
+The `errorMessage` controls the error state of `rich-text-editor`:
+
+### Tooltip
+
+A tooltip with extra information for the label of the `rich-text-editor` can be rendered by passing the desired
+information to the `tooltipText` prop.
+
+## Resources
+
+- [Figma link](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=32951-148311&p=f&t=oKNt5rFb69AFPWN0-0)

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

@@ -0,0 +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" /> `), }; 

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

@@ -0,0 +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" @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" />