@adyen/bento-mcp 0.0.0 → 0.1.0

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

@@ -0,0 +1,53 @@
+import { Canvas, Story, Meta } from '@storybook/blocks';
+import * as TextareaStories from './textarea.stories';
+
+<Meta of={TextareaStories} />
+
+# Textarea
+
+The Textarea represents a multi-line plain-text editing control, useful when you want to allow users to enter a sizeable
+amount of free-form text, for example a comment on a payment or feedback form.
+
+It's a complete form control including a label, input, icons and description text.
+
+<Canvas withSource="closed">
+    <Story of={TextareaStories.Default} />
+</Canvas>
+
+-   [Textarea](#textarea)
+-   [Disabled](#disabled)
+-   [Tooltip](#tooltip)
+-   [Validation](#validation)
+-   [Accessibility](#accessibility)
+-   [Focus](#focus)
+
+## Disabled
+
+The disabled property determines whether the input component is enabled or disabled.
+
+When an input component is disabled, it will not allow user interaction and the value of the input cannot be changed.
+
+The visual representation of a disabled input-field component is as a grayed-out color or and lack of hover effect.
+
+## Tooltip
+
+A tooltip with extra information for the field can be rendered by passing the desired information to the `tooltipText`
+prop.
+
+## Validation
+
+The error prop toggles the error state.
+
+## Accessibility
+
+### Focus
+
+When nn input-field or label is clicked or selected, the focus ring should be visible. The focus ring is an affordance
+that allows users to easily identify which element is currently focused.
+
+Identifying the current focused element is key to keep tab order obvious and explicit. Not providing a focus state on
+click events could result in making focus management unintuitive and more complex, and fail to comply with basic
+accessibility guidelines such as:
+
+2.4.3 Focus order: If a Web page can be navigated sequentially and the navigation sequences affect meaning or operation,
+focusable components receive focus in an order that preserves meaning and operability.

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

@@ -0,0 +1 @@
+import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { type Meta, type StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import BentoTextarea from './textarea.vue'; import { ref } from 'vue'; import { BentoTextareaResizeOption } from './textarea.types'; const meta: Meta = { title: 'Textarea', component: BentoTextarea, argTypes: { resizable: { options: Object.values(BentoTextareaResizeOption), mapping: BentoTextareaResizeOption, control: { type: 'select', }, }, input: { control: { disable: true }, table: { category: 'Deprecated' }, description: 'Deprecated since version 2.0. Use `v-model` or `update:model-value` instead', }, value: { control: { type: 'text' }, table: { category: 'Deprecated' }, description: 'Deprecated for usage with properties since version 2.0. Use `v-model` or `model-value` property instead', }, }, }; export default meta; type Story = StoryObj<typeof BentoTextarea>; const DEFAULT_TEXTAREA_PROPS = { description: 'Description', label: 'Label', placeholder: 'Enter text', clearable: true, optional: true, height: '', characterLimit: 100, }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTextarea }, props: Object.keys(argTypes), template: ` <bento-textarea v-bind="args" @blur="blurAction" @change="changeAction" @clear="clearAction" @focus="focusAction" @update:model-value="updateModelValueAction" @keydown="keydownAction" @keyup="keyupAction" /> `, setup(props) { const args = isVue2 ? props : _args; const textareaValue = ref(args.modelValue); const blurAction = (value: string) => action('blur')(value); const changeAction = (value: string) => action('change')(value); const focusAction = (value: string) => action('focus')(value); const updateModelValueAction = (value: string) => action('update:model-value')(value); const clearAction = () => { textareaValue.value = ''; action('clear')(); }; const keydownAction = ({ key, code }: KeyboardEvent) => action('keydown')({ key, code }); const keyupAction = ({ key, code }: KeyboardEvent) => action('keyup')({ key, code }); return { // Methods blurAction, clearAction, changeAction, focusAction, updateModelValueAction, keydownAction, keyupAction, // Values args, textareaValue, }; }, }), args: { ...DEFAULT_TEXTAREA_PROPS, }, parameters: storybookDocsParameter(` <bento-textarea :aria-label="string" :character-limit="number" :clearable="boolean" :description="string" :disabled="boolean" :error="boolean" :height="string" :label="string" :optional="boolean" :placeholder="string" :readonly="boolean" :resizable="boolean" :required="boolean" :model-value="textareaValue" @blur="blurAction" @change="changeAction" @clear="clearAction" @focus="focusAction" @update:model-value="modelValueUpdate" @keydown="keydownAction" @keyup="keyupAction" /> `), }; 

package/dist/assets/components/textarea/textarea.vue

@@ -0,0 +1 @@
+<template> <div ref="textareaComponent" class="b-textarea" :class="conditionalClasses"> <div :style="{ width: textareaWrapperWidth }"> <div class="b-textarea__label-box" :class="conditionalClassesLabelBox"> <field-label v-if="label" :for="textareaId" :label="label" :tooltip-text="tooltipText" :optional="optional" :required="required" /> <bento-typography v-if="characterLimit" el="span" class="b-textarea__label-item" :class="conditionalClassesLabelItem" > {{ counter }} </bento-typography> </div> <bento-typography el="div" class="b-textarea__input-box" :aria-disabled="disabled"> <textarea :id="textareaId" ref="textareaElement" :value="textareaValue" class="b-textarea__input" :class="conditionalClassesInput" :aria-label="computedAriaLabel" :aria-invalid="invalidInput" :readonly="isReadOnly" :required="required" :disabled="disabled" :placeholder="placeholder" :style="{ resize: resizable, height: textareaHeight }" @blur="onBlur" @change="onChange" @focus="onFocus" @input="onInput" @keydown.esc="onPressEscape" @keydown="onKeyDown" @keyup="onKeyUp" @mousedown="onMouseDown" @mouseup="onMouseUp" > </textarea> <div v-if="showClearButton" class="b-textarea__clear-button"> <bento-button variant="tertiary" :disabled="disabled" @click="onClear" @keypress.enter="onClear" @keyup.space="onClear" > <template #iconLeft> <cross-circle-fill-small-icon :svg-title="t('clearText')" /> </template> </bento-button> </div> </bento-typography> <error-message v-if="isOverCharacterLimit" :error-message="counterErrorText" /> <error-message v-if="errorMessage" :error-message="errorMessage" /> <bento-typography v-if="description" class="b-textarea__description" el="span"> {{ description }} </bento-typography> </div> </div> </template> <script setup lang="ts"> import { computed, nextTick, onMounted, onUnmounted, ref, toRef, toRefs, useAttrs, watch } from 'vue'; // Components import { BentoButton } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import { ErrorMessage, FieldLabel } from '@/internal'; import CrossCircleFillSmallIcon from '@adyen/ui-assets-icons-16/vue/cross-circle-fill-small'; // Utils import { generateUid } from '@/core/utils/ts'; import { observeSizeOfElement } from '@/utils/ts/resize'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { useI18n } from '@/utils/ts/i18n'; import { deprecate } from '@/utils/ts/deprecate'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; // Composables import { useFormLayoutFieldLoading } from '@/composables/use-form-layout-loading/use-form-layout-loading'; // Constants import { BBorderWidthAttention } from '@adyen/bento-design-tokens/dist/js/bento/es6'; // Types import { BentoTextareaEvent, type BentoTextareaProps, BentoTextareaStateClass } from './textarea.types'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const attrs = useAttrs(); const props = withDefaults(defineProps<BentoTextareaProps>(), { ariaLabel: undefined, characterLimit: undefined, description: '', disabled: false, clearable: false, errorMessage: '', height: null, label: '', optional: false, placeholder: '', readonly: false, resizable: 'both', required: false, tooltipText: null, value: '', modelValue: '', }); const emit = defineEmits<{ /** * Emitted when the element has lost focus */ (e: BentoTextareaEvent.BLUR): void; /** * Emitted when the user modifies the element's value. Unlike the 'input' event, the change event is not necessarily fired for each alteration to an element's value */ (e: BentoTextareaEvent.CHANGE): void; /** * Emitted when the "Clear" button was clicked */ (e: BentoTextareaEvent.CLEAR): void; /** * Emitted when the "ESC" key is pressed */ (e: BentoTextareaEvent.ESCAPE_PRESSED): void; /** * Emitted when the element has received focus */ (e: BentoTextareaEvent.FOCUS): void; /** * Emitted when the component's model changes * * @deprecated since version 2.0. Use `v-model` or `update:model-value` instead. * */ (e: BentoTextareaEvent.INPUT, value: string): void; /** * Emitted when the component's model changes */ (e: BentoTextareaEvent.UPDATE_MODEL_VALUE, value: string): void; /** * Emitted when the text area keydown event is fired */ (e: BentoTextareaEvent.KEYDOWN, event: KeyboardEvent): void; /** * Emitted when the text area keyup event is fired */ (e: BentoTextareaEvent.KEYUP, event: KeyboardEvent): void; }>(); const { height } = toRefs(props); const textareaId = generateUid('textarea'); const textareaElement = ref<HTMLTextAreaElement>(null); const textareaComponent = ref<HTMLDivElement>(null); const textareaValue = ref(props.modelValue || props.value); const defaultTextareaHeight = 44; const textareaHeight = ref(props.height || `${defaultTextareaHeight}px`); const userSetHeight = ref<number>(0); const textareaWrapperWidth = ref('100%'); // The width set to the wrapper of the label, textarea and description const isUserResizing = ref(false); let textareaElementObserver: ResizeObserver | null = null; let textareaComponentObserver: ResizeObserver | null = null; const { t, n } = useI18n<{ message: MessageSchema }>({ messages }); const { isReadOnly } = useFormLayoutFieldLoading(toRef(props, 'readonly')); const { emitValue } = useFormFieldEmits<string>(emit); const counter = computed(() => `${n(textareaValue?.value?.length ?? 0)} / ${n(props.characterLimit)}`); const isDynamicHeight = computed(() => !height.value); const isOverCharacterLimit = computed( () => props.characterLimit && textareaValue.value.length > props.characterLimit ); /** * Calculates and sets the height of the textarea. * The height is determined by the maximum of the following values: * * 1. The content's scroll height (with a minimum of `defaultTextareaHeight`) + the border width. * 2. The height set by the user manually resizing the textarea (`userSetHeight`). * 3. The default minimum height (`defaultTextareaHeight`). * * This ensures the textarea grows with content, shrinks when content is removed, * but never goes below the manually set height or the default height. */ const calculateHeight = () => { if (textareaElement.value) { const newHeight = Math.max( textareaElement.value.scrollHeight <= defaultTextareaHeight ? defaultTextareaHeight : textareaElement.value.scrollHeight + TEXTAREA_BORDER_WIDTH * 2, userSetHeight.value, defaultTextareaHeight ); textareaHeight.value = `${newHeight}px`; } }; watch(height, () => { if (isDynamicHeight.value) { calculateHeight(); } else { textareaHeight.value = height.value; } }); watch( () => [props.value, props.modelValue], () => { textareaValue.value = props.modelValue || props.value; }, { immediate: true } ); watch( () => textareaValue.value, async () => { if (isDynamicHeight.value) { // Hack to make the textarea calculate its height properly // Set the textarea back to the original value before calculating the height textareaHeight.value = `${defaultTextareaHeight}px`; if (!textareaValue.value) { return; } await nextTick(); calculateHeight(); } }, { immediate: true } ); const invalidInput = computed(() => !!props.errorMessage || isOverCharacterLimit.value); const conditionalClasses = computed(() => ({ [`b-textarea--${BentoTextareaStateClass.DISABLED}`]: props.disabled, })); const conditionalClassesInput = computed(() => ({ [`b-textarea__input--${BentoTextareaStateClass.CLEARABLE}`]: props.clearable, [`b-textarea__input--${BentoTextareaStateClass.READONLY}`]: isReadOnly.value, [`b-textarea__input--${BentoTextareaStateClass.ERROR}`]: invalidInput.value, [`b-textarea__input--dynamic-height`]: isDynamicHeight.value, })); const conditionalClassesLabelBox = computed(() => ({ [`b-textarea__label-box--no-label`]: !props.label, })); const conditionalClassesLabelItem = computed(() => ({ [`b-textarea__label-item--${BentoTextareaStateClass.ERROR}`]: isOverCharacterLimit.value, })); const counterErrorText = computed(() => t('yourTextCanBenAtMost', { characterLimit: props.characterLimit })); const ariaLabelAttribute = ref(attrs['aria-label']); const { ariaLabel, label } = 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: label, }); const showClearButton = computed( () => props.clearable && textareaValue.value && !props.disabled && !isReadOnly.value ); const onClear = () => { textareaValue.value = ''; emit(BentoTextareaEvent.CLEAR); emitValue(''); }; const onInput = (event: InputEvent) => { event.stopImmediatePropagation(); if (!props.disabled && !isReadOnly.value) { textareaValue.value = (event.target as HTMLInputElement).value; /** * Triggered when input value is changed * * @event input * @property {String} inputValue - the updated textarea value */ emitValue(textareaValue.value); } }; const onBlur = () => { textareaElement.value.scrollTop = 0; emit(BentoTextareaEvent.BLUR); }; const onFocus = () => { textareaElement.value.focus(); emit(BentoTextareaEvent.FOCUS); }; const onChange = () => { emit(BentoTextareaEvent.CHANGE); }; const onPressEscape = () => { emit(BentoTextareaEvent.ESCAPE_PRESSED); }; const onKeyDown = (event: KeyboardEvent) => { event.stopPropagation(); emit(BentoTextareaEvent.KEYDOWN, event); }; const onKeyUp = (event: KeyboardEvent) => { event.stopPropagation(); emit(BentoTextareaEvent.KEYUP, event); }; const onMouseDown = () => { isUserResizing.value = true; }; const onMouseUp = () => { isUserResizing.value = false; }; /** * Updates the textarea width depending if the container or the user update its size. * @param isTextareaElement - sets to true if the element being observed is the textarea HTML element. */ const resizeTextareaWrapper = (isTextareaElement = false) => { // Width assigned by the browser whenever the textarea is manually resized. String of the format `<value>px`. const textareaStyleWidth = textareaElement.value.style.width; // Make sure the tracked textareaHeight is always in sync with the height size in case we manually resize the textarea if (textareaElement.value.style.height) { if (isUserResizing.value) { userSetHeight.value = parseInt(textareaElement.value.style.height, 10); } textareaHeight.value = textareaElement.value.style.height; } // If the textarea element observer is being triggered, but there's no textareaStyleWidth, we want to ignore it, as no manual resize as happened yet // The component wrapper will handle the resizing logic instead if (isTextareaElement && !textareaStyleWidth) { return; } // Width of the whole bento-textarea component const textareaComponentWidth = textareaComponent?.value?.offsetWidth; // If there is no textareaStyleWidth or the textareaStyleWidth is larger than the component container, the wrapper should be 100% of the container if (!textareaStyleWidth || parseInt(textareaStyleWidth, 10) > textareaComponentWidth) { textareaWrapperWidth.value = '100%'; } else { // Else the wrapper should always be as wide as the textarea element itself textareaWrapperWidth.value = textareaStyleWidth; } }; const focus = () => { textareaElement.value.focus(); }; defineExpose({ focus, }); onMounted(() => { textareaElementObserver = observeSizeOfElement(textareaElement.value, () => { resizeTextareaWrapper(true); }); textareaComponentObserver = observeSizeOfElement(textareaComponent.value, () => { resizeTextareaWrapper(); }); if (isDynamicHeight.value) { calculateHeight(); } if (props.value) { deprecate( 'BentoTextarea "value" property', `The use of "value" prop in "BentoTextarea" is no longer supported. Use the "v-model" or "model-value" property instead.`, '2.0.0' ); } }); onUnmounted(() => { textareaElementObserver?.disconnect(); textareaComponentObserver?.disconnect(); }); </script> <script lang="ts"> const TEXTAREA_BORDER_WIDTH = parseFloat(BBorderWidthAttention); export default { i18n: { messages }, name: 'bento-textarea', model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./textarea.scss" /> 

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

@@ -0,0 +1 @@
+import BentoTimelineItem from './timeline-item.vue'; import BentoTimeline from '../../timeline.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import { BentoTimelineItemVariant } from '../../timeline.types'; import { isVue2 } from 'vue-demi'; import { BentoDateFormat } from '@/components/date'; const meta: Meta = { title: 'Timeline/Timeline Item', component: BentoTimelineItem, argTypes: { variant: { options: Object.keys(BentoTimelineItemVariant), mapping: BentoTimelineItemVariant, defaultValue: BentoTimelineItemVariant.DEFAULT, control: { type: 'select', }, table: { category: 'Deprecated' }, }, type: { control: { type: 'select', }, }, status: { control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoTimeline>; const DEFAULT_PROPS = { title: 'Milestone', timestamp: { date: new Date(), value: 'AuthorName', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD, }, dataList: [ { label: 'Label', value: 'Value' }, { label: 'Label', value: 'Value' }, ], description: 'Space to put some description about this milestone', tag: { label: 'Tag' }, status: 'black', }; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline> <bento-timeline-item v-bind="args" /> </bento-timeline> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { ...DEFAULT_PROPS, }, }; 

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

@@ -0,0 +1 @@
+<template> <li v-if="isVisible" class="b-timeline-item" :class="conditionalClasses"> <div v-if="timegap" class="b-timeline-item__row"> <div class="b-timeline-item__marker" aria-hidden="true"> <div class="b-timeline-item__icon b-timeline-item__icon--timegap"></div> <div class="b-timeline-item__separator"></div> </div> <div class="b-timeline-item__content"> <bento-typography class="b-timeline-item__timegap" :aria-label="timegapAriaLabel"> {{ timegap }} </bento-typography> </div> </div> <div class="b-timeline-item__row"> <div class="b-timeline-item__marker" aria-hidden="true"> <square-small-icon class="b-timeline-item__icon" :class="iconConditionalClasses" /> <div v-if="!isLastItem" class="b-timeline-item__separator" data-testid="last-timeline-item-separator" ></div> </div> <div class="b-timeline-item__content"> <bento-typography v-if="!isNoteType" el="div" variant="body" strongest class="b-timeline-item__title" role="heading" aria-level="2" > <bento-link v-if="isLinkTitle" v-bind="linkTitleProps" disable-typography>{{ linkTitleProps.title }}</bento-link> <span v-else>{{ title }}</span> </bento-typography> <bento-typography v-if="isNoteType && (description || hasSlot('default'))" el="div" variant="body" class="b-timeline-item__description" > <slot>{{ description }}</slot> </bento-typography> <bento-typography v-if="timestamp" class="b-timeline-item__timestamp" el="div" variant="caption"> <bento-date :date="timestamp.date" :format="timestamp.format" disable-typography /> {{ timestamp.value }} </bento-typography> <bento-typography v-if="!isNoteType && additionalTimestamp" class="b-timeline-item__timestamp" el="div" variant="caption" > <bento-date :date="additionalTimestamp.date" :format="additionalTimestamp.format" disable-typography /> {{ additionalTimestamp.value }} </bento-typography> <bento-typography v-if="!isNoteType && (description || hasSlot('default'))" el="div" variant="body" class="b-timeline-item__description" > <slot>{{ description }}</slot> </bento-typography> <div v-if="!isNoteType && dataList" class="b-timeline-item__data-list"> <bento-structured-list> <bento-structured-list-item v-for="listEntry in dataList" :key="generateUid(listEntry.label)" :label="listEntry.label" > <bento-typography variant="caption">{{ listEntry.value }}</bento-typography> </bento-structured-list-item> </bento-structured-list> </div> <bento-tag v-if="!isNoteType && tag" v-bind="tag" class="b-timeline-item__tag" /> </div> </div> <div v-if="displayShowMoreButton" class="b-timeline-item__row"> <div class="b-timeline-item__marker" aria-hidden="true"> <div class="b-timeline-item__separator"></div> </div> <div class="b-timeline-item__content"> <bento-button class="b-timeline__show-more" variant="tertiary" @click="showAll = !showAll"> <template v-if="!showAll">{{ t('showMore', { items: hiddenItems }) }}</template> <template v-else>{{ t('showLess') }}</template> </bento-button> </div> </div> </li> </template> <script setup lang="ts"> import { computed, defineComponent, inject, onUnmounted, provide, useSlots } from 'vue'; // Components import { BentoButton } from '@/components/button'; import { BentoDate } from '@/components/date'; import { BentoLink } from '@/components/link'; import { BentoTag } from '@/components/tag'; import { BentoTypography } from '@/components/typography'; import { BentoStructuredList, BentoStructuredListItem } from '@/components/structured-list'; import SquareSmallIcon from '@adyen/ui-assets-icons-16/vue/square-small-fill'; // Utils import { deprecate } from '@/utils/ts/deprecate'; import { generateUid } from '@/core/utils/ts'; import { useI18n } from '@/utils/ts/i18n'; import { useHasSlot } from '@/composables'; import { formatDistanceStrict } from 'date-fns/formatDistanceStrict'; // Types import { type BentoTimelineConfigData, type BentoTimelineEntry, type BentoTimelineItemProps, type BentoTimelineItemTitle, BentoTimelineItemVariant, type BentoTimelineRegisterEntry, } from '../../timeline.types'; // Keys import { TIMELINE_CONFIG_INJECTION_KEY, TIMELINE_REGISTER_ENTRY_INJECTION_KEY } from '../../timeline.keys'; import { STRUCTURED_LIST_CONDENSED_INJECTION_KEY } from '@/components/structured-list/structured-list.keys'; import messages from './messages.json'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<BentoTimelineItemProps>(), { additionalTimestamp: null, dataList: null, description: null, status: 'black', tag: undefined, title: null, type: 'milestone', variant: null, }); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const slots = useSlots(); const hasSlot = useHasSlot(slots); const isNoteType = computed(() => props.type === 'note'); // Handle variant deprecation, by setting `critical` and `success` variants to their respective colors const computedStatus = computed(() => { if (props.variant === BentoTimelineItemVariant.CRITICAL) { return 'red'; } if (props.variant === BentoTimelineItemVariant.SUCCESS) { return 'green'; } return props.status; }); if (props.variant) { deprecate( 'BentoTimelineItem "variant" property', `Use the BentoTimelineItem "status" modifier instead to modify the color of the timeline icon. <bento-timeline-item status="red" />`, '2.0.0' ); } const iconConditionalClasses = computed(() => ({ [`b-timeline-item__icon--${computedStatus.value}`]: computedStatus.value && !isNoteType.value, })); const conditionalClasses = computed(() => ({ 'b-timeline-item--note': isNoteType.value, })); // Provide STRUCTURED_LIST_CONDENSED_INJECTION_KEY as true, to set the internal condensed style in the BentoStructuredList comp provide(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, true); const entry: BentoTimelineEntry = { title: props.title, date: props.timestamp.date, }; // Register timeline entry to the timeline entries array const registerTimelineEntry: BentoTimelineRegisterEntry = inject(TIMELINE_REGISTER_ENTRY_INJECTION_KEY); const { timelineEntries, unregisterTimelineEntry } = registerTimelineEntry(entry); // On unmounting timeline item, unregister it from the parent timeline component onUnmounted(() => unregisterTimelineEntry()); // Get timeline config data from the parent Timeline comp const { showAll, showMoreIndex, hiddenItems, visibleIndexes, timegapLimit }: BentoTimelineConfigData = inject(TIMELINE_CONFIG_INJECTION_KEY); const index = computed(() => timelineEntries.value.indexOf(entry)); const allItemsShowing = computed(() => showAll.value || !visibleIndexes.value); const isVisible = computed(() => (allItemsShowing.value ? true : visibleIndexes.value.includes(index.value))); const isLinkTitle = computed(() => typeof props.title === 'object'); const linkTitleProps = computed(() => props.title as BentoTimelineItemTitle); const timegap = computed(() => { if (!timegapLimit.value) { return null; } const previousDate = timelineEntries.value[index.value - 1]?.date; const isPreviousItemVisible = allItemsShowing.value || visibleIndexes.value.includes(index.value - 1); if (!previousDate || !isPreviousItemVisible) { return null; } const { date } = timelineEntries.value[index.value]; const timegapInSelectedUnit = parseInt( formatDistanceStrict(previousDate, date, { unit: timegapLimit.value.unit }), 10 ); return timegapLimit.value.amount < timegapInSelectedUnit ? formatDistanceStrict(previousDate, date, { roundingMethod: 'floor' }) : null; }); const timegapAriaLabel = computed(() => (timegap.value ? t('timegap', { timegap: timegap.value }) : '')); const displayShowMoreButton = computed(() => hiddenItems.value && showMoreIndex.value === index.value); const isLastItem = computed(() => { // The index can be -1 before the parent has had a chance to sort the array. return index.value !== -1 && index.value === timelineEntries.value.length - 1; }); </script> <script lang="ts"> /** * BentoTimelineItem renders each event in the Timeline component * * @example * import { BentoDateFormat, BentoTimelineItem } from '@adyen/bento-vue2'; * * export default { * components: { BentoTimelineItem }, * template: ` * <bento-timeline-item * title="Milestone" * :timestamp="{ date: new Date(), value: 'Created at', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD }" * :additional-timestamp="{ date: new Date(), value: 'Modified at' }" * description="Milestone description" * :data-list="[ * { label: 'Label', value: 'Value' }, * { label: 'Label', value: 'Value' }, * ]" * :tag="{ label: 'Tag'}" * /> * ` * } */ export default defineComponent({ name: 'bento-timeline-item', i18n: { messages }, }); </script> <style lang="scss" scoped src="./timeline-item.scss" /> 

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

@@ -0,0 +1,131 @@
+import { Canvas, Meta } from '@storybook/blocks';
+import * as TimelineStories from './timeline.stories';
+
+<Meta of={TimelineStories} />
+
+# Timeline
+
+Timeline displays a collection of events in a reverse chronological order (newest event is displayed on the top).
+
+<Canvas of={TimelineStories.Default} />
+
+## Use Cases
+
+Use the `bento-timeline` component to display a collection of chronological events. They should always include at least
+a title and corresponding timestamp.
+
+### Do not use
+
+Don't use the timeline for notes, comments or to guide a user through a multistep flow - these will be handled by
+separate components.
+
+## Variations
+
+### Variant (deprecated)
+
+> ⚠️ **Deprecation Notice**: Timeline item variants are deprecated and will be removed in release **2.0.0**. Use
+> [`status` modifier](#status) instead.
+
+There are three variants for the Timeline items: `Default`, `Success` and `Critical`.
+
+Use `Success` and `Critical` item variants sparingly - only when it's necessary to grab user's attention, for example,
+when the timeline is used for troubleshooting. Otherwise stick to the default styling.
+
+### Links
+
+It’s possible to add links to either title or description of a timeline item. To make the timeline item title render as
+a link, pass an object containing the `bento-link` props to the `title` prop. If you want to render a link in your
+description, don't pass the `description` prop but instead use a `default slot`.
+
+<Canvas of={TimelineStories.WithLinks} />
+
+### Notes
+
+Timeline can be a list of just events, but also a combination of events and notes or just notes, as all of these things
+have a chronological order. To render a note in a `bento-timeline`, use a `bento-timeline-item` component by setting its
+`type` property to `note`. Note that when setting `type` to `note`, you need to pass a `description` and a `timestamp`
+to the timeline item component.
+
+<Canvas of={TimelineStories.WithNotes} />
+
+#### Adding a note
+
+You can choose to let the user manually add notes to the timeline by setting the `add-note` prop to true.
+
+Every time the user will confirm they want to add a note, the event `@add-timeline-note` containing the data inputted by
+the user will be emitted. You can listen to this event and add the note item to the timeline the same way provided in
+the code snippet example below.
+
+Note that you can manipulate the data before passing it to the timeline item to suit your needs, i.e. if you need to add
+the author name to the timestamp.
+
+<Canvas of={TimelineStories.AddNote} />
+
+#### Adding timeline items dynamically
+
+It's also possible to add timeline items dynamically. For a correct implementation, consult the code snippet below.
+
+<Canvas of={TimelineStories.DynamicItemAddition} />
+
+## Modifiers
+
+### Show more
+
+When a timeline is really long, it's possible to hide part of it under a `Show X more` button. Teams can specify after
+how many milestones in total additional ones should be hidden, and where the button should be placed.
+
+**Possible placements:**
+
+- after the most recent item (`AFTER_FIRST`)
+- before the last item (`BEFORE_LAST`)
+- at the bottom (`BOTTOM`)
+
+Pressing `Show X more` reveals all the previously hidden items in one go. Revealed items can be hidden again by pressing
+`Show less` button.
+
+### Time gap
+
+The timeline component supports automatic gap detection which helps to indicate if a task is taking too much time. If
+the time elapsed between 2 items is greater than the minimum gap, it will automatically insert a time gap indicator. The
+time from which a gap should be added can be configured by the teams.
+
+When there’s a time gap in between two items and one of them is hidden, the time gap is also hidden. Once the additional
+milestones are revealed, the time gap is also revealed as the first thing under `Show less` button.
+
+### Status
+
+Status will change the color of the timeline icon to its matching color, from `bento-status` component variants, and can
+be used to show progression through statuses (for example, to track what happened with a payment), but also to attract
+attention (for example, to highlight that a document is missing).
+
+**Possible values:**
+
+- `grey`: renders the icon in the color grey.
+- `blue`: renders the icon in the color blue.
+- `green`: renders the icon in the color green.
+- `yellow`: renders the icon in the color yellow.
+- `orange`: renders the icon in the color orange.
+- `red`: renders the icon in the color red.
+
+> **IMPORTANT**: Do not rely on `status` alone to provide context, as this is not accessible. Make sure that the
+> timeline event always clearly states its purpose and that the status icon is merely a visual aid.
+
+## Accessibility
+
+The Timeline component is rendered as a ordered list of items.
+
+### Keyboard Interaction
+
+The only interactive element in Timeline is the `Show X more` button, which is reachable through keyboard navigation in
+the logical navigation flow of the page. The following keys trigger the following actions:
+
+| Keyboard interaction | Action                                                          |
+| -------------------- | --------------------------------------------------------------- |
+| `Tab`                | Moves focus to the `Show X more` button or away from it.        |
+| `Space`              | Activates the `Show X more` button, triggering the click event. |
+| `Enter`              | Activates the `Show X more` button, triggering the click event. |
+
+## Resources
+
+- [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/Bento---Components?type=design&node-id=13069-168343&mode=design&t=vHGM2jHS68oKH69N-0)
+- [Accessible timelines](https://roodesign.co.uk/articles/2020-10-15-accessible-timelines/)

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

@@ -0,0 +1 @@
+import type { Meta, StoryObj } from '@storybook/vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { onMounted, ref } from 'vue'; import { isVue2 } from 'vue-demi'; import BentoTimeline from './timeline.vue'; import BentoTimelineItem from './components/timeline-item/timeline-item.vue'; import { BentoTimelineGapUnit, BentoTimelineShowMorePlacement } from './timeline.types'; import TimelineDynamicAddition from './__tests__/timeline-dynamic-add-stub.vue?raw'; import { BentoDateFormat } from '@/components/date/date.types'; import BentoLink from '@/components/link/link.vue'; import BentoButton from '@/components/button/button.vue'; const meta: Meta = { title: 'Timeline', component: BentoTimeline, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'BentoTimelineItem components', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, }, }; export default meta; type Story = StoryObj<typeof BentoTimeline>; const DEFAULT_PROPS = { timegapLimit: { unit: BentoTimelineGapUnit.DAY, amount: 15 }, showMore: { limit: 3, placement: BentoTimelineShowMorePlacement.AFTER_FIRST }, }; const DEFAULT_ITEM_PROPS = { timestamp: { date: new Date(), value: 'AuthorName', format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD, }, dataList: [ { label: 'Label', value: 'Value' }, { label: 'Label', value: 'Value' }, ], description: 'Space to put some description about this milestone', }; const { description: _, ...DEFAULT_PROPS_WITHOUT_DESCRIPTION } = DEFAULT_ITEM_PROPS; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args"> <bento-timeline-item v-bind="milestone5" /> <bento-timeline-item v-bind="milestone4" /> <bento-timeline-item v-bind="milestone3" /> <bento-timeline-item v-bind="milestone2" /> <bento-timeline-item v-bind="milestone1" /> </bento-timeline> `, setup(props) { const milestone5 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 5', status: 'green', }; const milestone4 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 4', timestamp: { date: new Date().setDate(-2), value: 'AuthorName', }, }; const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 3', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, status: 'red', }; const milestone2 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-15), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; return { args: isVue2 ? props : _args, milestone1, milestone2, milestone3, milestone4, milestone5, }; }, }), args: { ...DEFAULT_PROPS, }, }; export const WithLinks: Story = { render: (_args, { argTypes }) => ({ components: { BentoLink, BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args"> <bento-timeline-item v-bind="milestone3" /> <bento-timeline-item v-bind="milestone2"> A description with <bento-link to="/">a link</bento-link> </bento-timeline-item> <bento-timeline-item v-bind="milestone1" /> </bento-timeline> `, setup(props) { const milestone3 = { ...DEFAULT_ITEM_PROPS, title: { title: 'Milestone 3', to: '/', }, timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, status: 'green', }; const milestone2 = { ...DEFAULT_PROPS_WITHOUT_DESCRIPTION, title: 'Milestone 2', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-15), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; return { args: isVue2 ? props : _args, milestone1, milestone2, milestone3, }; }, }), args: { ...DEFAULT_PROPS, }, }; const withNotesCode = ` <template> <bento-timeline v-bind="args" @add-timeline-note="addNote"> <bento-timeline-item v-for="item in timelineItems" v-bind="item" /> </bento-timeline> </template> <script setup> const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const timelineItems = ref(); onMounted(() => { timelineItems.value = [milestone3, milestone2, milestone1]; }); const addNote = e => { timelineItems.value.unshift(e); }; return { args: isVue2 ? props : _args, timelineItems, addNote, }; </script> `; export const WithNotes: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args"> <bento-timeline-item v-bind="milestone3" /> <bento-timeline-item v-bind="milestone2" /> <bento-timeline-item v-bind="milestone1" /> </bento-timeline> `, setup(props) { const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; return { args: isVue2 ? props : _args, milestone1, milestone2, milestone3, }; }, }), args: { ...DEFAULT_PROPS, showMore: null, }, parameters: storybookDocsParameter(withNotesCode), }; const addNoteCode = ` <template> <bento-timeline v-bind="args" add-note @add-timeline-note="addNote"> <bento-timeline-item v-for="item in timelineItems" v-bind="item" /> </bento-timeline> </template> <script setup> const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const timelineItems = ref(); onMounted(() => { timelineItems.value = [milestone3, milestone2, milestone1]; }); const addNote = e => { timelineItems.value.unshift(e); }; return { timelineItems, addNote, }; </script> `; export const AddNote: Story = { render: (_args, { argTypes }) => ({ components: { BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <bento-timeline v-bind="args" add-note @add-timeline-note="addNote"> <bento-timeline-item v-for="item in timelineItems" v-bind="item" /> </bento-timeline> `, setup(props) { const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-5), value: 'AuthorName', }, }; const milestone2 = { type: 'note', description: 'Milestone Note. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const timelineItems = ref(); onMounted(() => { timelineItems.value = [milestone3, milestone2, milestone1]; }); const addNote = e => { const newNote = { ...e, timestamp: { ...e.timestamp, value: 'AuthorName' } }; timelineItems.value.unshift(newNote); }; return { args: isVue2 ? props : _args, timelineItems, addNote, }; }, }), args: { ...DEFAULT_PROPS, showMore: null, addNotes: true, }, parameters: storybookDocsParameter(addNoteCode), }; export const DynamicItemAddition: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoTimeline, BentoTimelineItem }, props: Object.keys(argTypes), template: ` <div style="display: flex; flex-direction: row; align-items: flex-start; gap: 16px;"> <bento-button @click="addItem">Add timeline item</bento-button> <bento-timeline v-if="timelineEntries"> <bento-timeline-item v-for="entry in timelineEntries" :key="entry.title" v-bind="entry" /> </bento-timeline> </div> `, setup(props) { const timelineEntries = ref([]); let index = 0; const addItem = () => { if (index < 5) { timelineEntries.value.unshift(milestones[index]); index++; } }; const milestone5 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 5', status: 'green', }; const milestone4 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 4', timestamp: { date: new Date().setDate(-2), value: 'AuthorName', }, }; const milestone3 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 3', timestamp: { date: new Date().setDate(-4), value: 'AuthorName', }, status: 'red', }; const milestone2 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 2', timestamp: { date: new Date().setDate(-14), value: 'AuthorName', }, additionalTimestamp: { date: new Date().setDate(-15), value: 'AuthorName', }, }; const milestone1 = { ...DEFAULT_ITEM_PROPS, title: 'Milestone 1', timestamp: { date: new Date().setDate(-150), value: 'AuthorName', }, tag: { label: 'Tag1', }, }; const milestones = [milestone1, milestone2, milestone3, milestone4, milestone5]; return { args: isVue2 ? props : _args, timelineEntries, addItem, }; }, }), args: { ...DEFAULT_PROPS, }, parameters: storybookDocsParameter(TimelineDynamicAddition), }; 

package/dist/assets/components/timeline/timeline.vue

@@ -0,0 +1 @@
+<template> <div class="b-timeline"> <div v-if="addNote" class="b-timeline__add-note-section"> <bento-button v-if="!showAddNoteTextArea" ref="addNoteButtonRef" variant="tertiary" @click="toggleAddNote" >{{ addNoteLabel }}</bento-button > <div v-if="showAddNoteTextArea"> <bento-textarea ref="addNoteTextareaRef" :label="addNoteLabel" :character-limit="150" resizable="vertical" @update:model-value="updateNoteContent" /> <bento-button-actions :actions="[ { title: addNoteLabel, event: addNoteToTimeline }, { title: cancelLabel, event: toggleAddNote }, ]" /> </div> </div> <ol class="b-timeline__items"> <slot /> </ol> </div> </template> <script setup lang="ts"> import { computed, defineComponent, nextTick, provide, ref, type Ref, toRefs, watch } from 'vue'; import { BentoButton, BentoButtonActions } from '@/components/button'; import { BentoTextarea } from '@/components/textarea'; import { type BentoInternalTimelineRegisterEntry, type BentoTimelineConfigData, type BentoTimelineEntry, type BentoTimelineProps, BentoTimelineShowMorePlacement, } from './timeline.types'; import { TIMELINE_CONFIG_INJECTION_KEY, TIMELINE_REGISTER_ENTRY_INJECTION_KEY } from './timeline.keys'; import messages from './messages.json'; import { useI18n } from '@/utils/ts/i18n'; type MessageSchema = (typeof messages)['en-US']; const props = withDefaults(defineProps<BentoTimelineProps>(), { addNote: false, showMore: null, timegapLimit: null, }); const emit = defineEmits(['add-timeline-note']); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const addNoteLabel = computed(() => t('addNote') as string); const cancelLabel = computed(() => t('cancel') as string); const newNoteContent: Ref<string> = ref(); const updateNoteContent = (newTimelineNoteContent: string): void => { newNoteContent.value = newTimelineNoteContent; }; const addNoteTextareaRef: Ref<InstanceType<typeof BentoTextarea>> = ref(null); const addNoteButtonRef: Ref<InstanceType<typeof BentoButton>> = ref(null); const showAddNoteTextArea = ref(false); const toggleAddNote = async () => { showAddNoteTextArea.value = !showAddNoteTextArea.value; await nextTick(); if (showAddNoteTextArea.value) { (addNoteTextareaRef.value.$refs.textareaElement as HTMLTextAreaElement)?.focus(); } else { (addNoteButtonRef.value.$el as HTMLButtonElement)?.focus(); } }; const addNoteToTimeline = () => { emit('add-timeline-note', { description: newNoteContent.value, timestamp: { date: new Date() }, type: 'note', }); toggleAddNote(); }; const timelineEntries = ref<Array<BentoTimelineEntry>>([]); const hiddenItems = computed(() => props.showMore && timelineEntries.value.length > props.showMore.limit ? timelineEntries.value.length - props.showMore.limit : null ); const showAll = ref(false); const { timegapLimit } = toRefs(props); const timelineIndexes = computed(() => Array.from(timelineEntries.value.keys())); const visibleIndexes = computed(() => { if (!props.showMore) { return null; } if (props.showMore.placement === BentoTimelineShowMorePlacement.BEFORE_LAST) { return [ ...timelineIndexes.value.slice(0, props.showMore.limit - 1), timelineIndexes.value[timelineIndexes.value.length - 1], ]; } if (props.showMore.placement === BentoTimelineShowMorePlacement.AFTER_FIRST) { return [timelineIndexes.value[0], ...timelineIndexes.value.slice(-(props.showMore.limit - 1))]; } return timelineIndexes.value.slice(0, props.showMore.limit); }); const showMoreIndex = computed(() => { if (!props.showMore) { return null; } switch (props.showMore.placement) { case BentoTimelineShowMorePlacement.BEFORE_LAST: return props.showMore.limit - 2; case BentoTimelineShowMorePlacement.AFTER_FIRST: return 0; case BentoTimelineShowMorePlacement.BOTTOM: default: return props.showMore.limit - 1; } }); const sortEntries = () => { // Sorts timeline entries based on date in reverse chronological order (newest first). timelineEntries.value.sort((a, b) => { return new Date(b.date).getTime() - new Date(a.date).getTime(); }); }; const unregisterTimelineEntry = (entryToRemove: BentoTimelineEntry) => () => { const index = timelineEntries.value.indexOf(entryToRemove); // The index can be -1 if the entry has already been removed by a parent re-render. if (index > -1) { timelineEntries.value.splice(index, 1); } }; const registerTimelineEntry: BentoInternalTimelineRegisterEntry = entry => { timelineEntries.value.push(entry); return { timelineEntries, unregisterTimelineEntry: unregisterTimelineEntry(entry) }; }; watch( () => timelineEntries.value.length, () => sortEntries() ); const configData: BentoTimelineConfigData = { showAll, showMoreIndex, hiddenItems, visibleIndexes, timegapLimit, timelineEntries, }; // provide register timeline entry and config data timeline items provide(TIMELINE_REGISTER_ENTRY_INJECTION_KEY, registerTimelineEntry); provide(TIMELINE_CONFIG_INJECTION_KEY, configData); </script> <script lang="ts"> /** * Timeline displays a collection of events in a reverse chronological order (newest event is displayed on the top). * * @example * import { BentoDateFormat, BentoTimeline } from '@adyen/bento-vue2'; * * export default { * components: { BentoTimeline }, * template: ` * <bento-timeline> * <bento-timeline-item * title="Milestone 1" * :timestamp="{ date: new Date(), value: 'Created at' }" * :additional-timestamp="{ date: new Date(), value: 'Modified at' }" * description="Milestone description" * :tag="{ label: 'Tag'}" * /> * <bento-timeline-item * title="Milestone 2" * :timestamp="{ * date: new Date(), * value: 'Created at', * format: BentoDateFormat.FULL_DATE_EXACT_TIME_WITHOUT_PERIOD * }" * description="Milestone description" * :data-list="[ * { label: 'Label', value: 'Value' }, * { label: 'Label', value: 'Value' }, * ]" * /> * </bento-timeline> * ` * } */ export default defineComponent({ i18n: { messages }, name: 'bento-timeline', }); </script> <style lang="scss" scoped src="./timeline.scss" /> 

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

@@ -0,0 +1 @@
+<template> <div class="b-toast-item"> <output class="b-toast-item__text" role="status"> <bento-typography :title="toast.text" el="span" variant="body" strongest> {{ toast.text }} </bento-typography> </output> <bento-button v-if="toast.action" class="b-toast-item__btn" variant="tertiary" data-testid="toast-item-action-btn" @click="onAction" > {{ toast.action.text }} </bento-button> <bento-button class="b-toast-item__btn" variant="tertiary" data-testid="toast-item-close-btn" @click="toast.dismiss()" > <template #iconLeft> <cross-icon :svg-title="t('dismiss')" /> </template> </bento-button> </div> </template> <script setup lang="ts"> import { type PropType } from 'vue'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross-small'; import { useI18n } from '@/utils/ts/i18n'; import { BentoButton } from '@/components/button'; import { BentoTypography } from '@/components/typography'; import type { BentoToastItem } from '@/composables'; import messages from './messages.json'; const props = defineProps({ toast: { type: Object as PropType<BentoToastItem>, required: true }, }); type MessageSchema = (typeof messages)['en-US']; const { t } = useI18n<{ message: MessageSchema }>({ messages }); const onAction = () => { if (typeof props.toast.action.handler === 'function') { props.toast.action.handler(); } props.toast.dismiss(); }; </script> <script lang="ts"> export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./toast-item.scss" /> 

package/dist/assets/components/toast/components/toast-shadow-stack/toast-shadow-stack.vue

@@ -0,0 +1 @@
+<template> <div ref="shadowStack" class="b-toast-shadow-stack"> <!-- since we only interested in the size of the last 3 toasts and order of the toast items is not guaranteed when we use ref with v-for (more info at the end of this section https://vuejs.org/guide/essentials/template-refs.html#refs-inside-v-for), toast items would be rendered independently with individual ref references. --> <toast-item v-if="toasts[0]" ref="toast0" :toast="toasts[0]" /> <toast-item v-if="toasts[1]" ref="toast1" :toast="toasts[1]" /> <toast-item v-if="toasts[2]" ref="toast2" :toast="toasts[2]" /> </div> </template> <script setup lang="ts"> /** * This component will "shadow-render" ToastItems positioned relatively to each other, * would grab their positions and size and would emit augmented list of toasts with those * additional details. This would allow us to have perfect control over toasts positioning and animation * in the parent Toast component, where ToastItems would actually be visible. */ import { computed, nextTick, onMounted, ref, watch } from 'vue'; import { useBentoToastController } from '@/composables'; import type { BentoToastItemWithDimensions } from './toast-shadow-stack.types'; import ToastItem from '../toast-item/toast-item.vue'; const { stack } = useBentoToastController(); const emit = defineEmits<{ /** * */ (e: 'update', toasts: Array<BentoToastItemWithDimensions>): void; }>(); const shadowStack = ref<HTMLElement>(); const toast0 = ref<InstanceType<typeof ToastItem>>(); const toast1 = ref<InstanceType<typeof ToastItem>>(); const toast2 = ref<InstanceType<typeof ToastItem>>(); const toastRefs = [toast0, toast1, toast2]; // only get 3 last toast as only they would be rendered on the screen const toasts = computed(() => stack.value.slice(0, 3)); const shareToastsWithDimensions = async () => { // Wait for all toasts to render, so we would be able to get their ClientRect await nextTick(); // Parent container "top" value should be 0, but can be something else due to CSS. So have to account for it const { top: parentTop } = shadowStack.value.getBoundingClientRect(); const toastsWithDimensions = stack.value.map((toast, index) => { if (index > 2) { return { ...toast, bottom: 0, height: 0 }; } const { height, top } = toastRefs[index].value.$el.getBoundingClientRect(); return { ...toast, height, bottom: top - parentTop }; }); emit('update', toastsWithDimensions); }; watch(stack, shareToastsWithDimensions); onMounted(() => { // Refs would be null until component is mounted, so let's make sure we only do it after that if (stack.value.length > 0) { shareToastsWithDimensions(); } }); </script> <style lang="scss" scoped src="./toast-shadow-stack.scss" /> 

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

@@ -0,0 +1,151 @@
+# Toast
+
+Toast is a concise and temporary message that provides feedback on app’s processes after user takes an action, without
+disrupting their flow or requiring them to act on it.
+
+### Behaviour
+
+When a user performs an action that triggers a toast message, it appears on the bottom right corner of the screen (or in
+the middle on smaller screens).
+
+The message can be immediately dismissed by the user by clicking the `close` icon or action button, but if no action is
+taken, it will disappear on its own after 5 seconds.
+
+### Stacking
+
+If there are multiple toast messages triggered at the same time, they stack. The auto-dismiss timer starts only when a
+message is on top of the stack to ensure the user has time to read them all.
+
+Hovering over the toasts will pause the auto-dismiss timer.
+
+The stack shows a maximum of three toast messages, even if there are more. The rest is queued and will appear when
+another message is dismissed.
+
+If user hovers over the stack, if unfolds showing up to last 3 toasts and the rest of the toast stacked (if there are
+more than three).
+
+## Use Cases
+
+Due to their temporary nature, use toasts for at-a-glance, non-critical feedback about the app’s processes, i.e. a
+confirmation message that a setting has been saved.
+
+### Do not use
+
+For important messages, explanations or errors that require user to take action, use an alert instead.
+
+Do not use toast in combination with modal, because modal’s overlay always appears above all the other content and will
+obscure the toast. When you need to provide feedback on actions taken within a modal, use alert instead.
+
+## Usage
+
+The `bento-toast` component doesn't accept any props, however its state is managed by a global reactive state. To be
+able to add and display toast messages, you should:
+
+-   Initialize the **Bento plugin** with the toasts enabled by setting the `withToast` property to `true`
+
+```typescript
+// index.ts
+import Vue from 'vue';
+import BentoVue from '@adyen/bento-vue2';
+
+Vue.use(BentoVue, { withToast: true });
+```
+
+-   Import and instantiate the `bento-toast` component in the root of your application. The Toast component can be
+    anywhere on the app but it should only be included once, therefore it is recommended to have it on the root of your
+    app, namely in the `App.vue` file.
+
+```html
+// App.vue
+
+<template>
+    <div>
+        <!-- your code here-->
+        <bento-toast />
+    </div>
+</template>
+
+<script lang="ts">
+    import { defineComponent } from 'vue';
+    import { BentoToast } from '@adyen/bento-vue2';
+
+    export default defineComponent({
+        components: { BentoToast },
+    });
+</script>
+```
+
+-   Import the `useBentoToastController` composable in whatever component you might need to trigger a toast message.
+    Upon executing, `useBentoToastController()` composable will retrun `addToast()` method which would allow to register
+    new toasts messages.
+
+```typescript
+<script lang="ts">
+    import { defineComponent } from 'vue';
+    import { useBentoToastController } from '@adyen/bento-vue2';
+
+    export default defineComponent({
+        setup() {
+            const { addToast } = useBentoToastController();
+
+            addToast({
+                text: 'Toast text',
+            });
+
+            addToast({
+                text: 'Toast with action',
+                // optional property
+                action: {
+                    text: 'Do action',
+                    handler: () => {},
+                },
+            });
+
+            const { dismiss } = addToast({ text: 'Toast' });
+            // Toasts can be programmatically dimissed from the code by calling `dismiss()` function returned from the `addToast()` call
+            dismiss();
+        }
+    })
+<script>
+```
+
+## Variations
+
+There are no variations for this component.
+
+## Modifiers
+
+There are no modifiers for this component.
+
+## Accessibility
+
+The `bento-toast` component renders in an
+[`aria-live` region](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions) with a `polite`
+value - in practice this means that the screen reader will speak changes whenever the user is idle.
+
+Each toast item's message is in turned marked with a role of `status` so that the content of the toast region will be
+announced to the user without interrupting the flow whenever there is an update to its content.
+
+### Keyboard interaction
+
+The `dismiss` button of the latest stacked toast element (i.e. the one that is visible to the user) is accessible via
+keyboard navigation. All other toast elements are rendered as `inert` so that they won't be reachable by keyboard
+navigation and will be announced as non-interactive by assistive technology.
+
+| Keyboard interaction | Output                                                               |
+| -------------------- | -------------------------------------------------------------------- |
+| `Tab`                | Moves focus to the visible toast's `dismiss` button or away from it. |
+| `Space`              | When focus is on the toast's `dismiss` button, it clicks the button. |
+| `Enter`              | When focus is on the toast's `dismiss` button, it clicks the button. |
+
+### Roles, states and properties
+
+| ARIA attribute | is automatic?                                | fallback used | manual override |
+| -------------- | -------------------------------------------- | ------------- | --------------- |
+| `aria-live`    | Yes, set to `polite` on the toast region.    | -             | -               |
+| `role`         | Yes, set to `status` on each toast element`. | -             | -               |
+
+## Resources
+
+-   [Figma link](https://www.figma.com/design/uLabwF3243jdMDsNSP7U9I/Bento---Components?node-id=2342-42474)
+-   [WAI-ARIA guidelines](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA22)

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

@@ -0,0 +1 @@
+import { onMounted, ref } from 'vue'; import { action } from '@storybook/addon-actions'; import { BentoButton } from '@/components/button'; import { BentoFormLayout } from '@/components/form-layout'; import { BentoInputField } from '@/components/input-field'; import { BentoCheckbox } from '@/components/checkbox'; import { withToastDecorator } from '@/utils/ts/storybook'; import { useBentoToastController } from '@/composables'; import BentoToast from './toast.vue'; import { isVue2 } from 'vue-demi'; export default { title: 'Toast', component: BentoToast, decorators: [withToastDecorator], args: { onToastAction: action('Toast action button clicked'), }, }; const items = [ { text: 'Toast 1' }, { text: 'Toast 2 with very long title that supppose not to fit in a single line and wrap to the next line, or even further', action: true, }, { text: 'Toast 3' }, { text: 'Toast 4' }, ]; export const Default = (_args, { argTypes }) => ({ components: { BentoButton, BentoFormLayout, BentoInputField, BentoCheckbox }, props: Object.keys(argTypes), template: ` <bento-form-layout form style="max-width: 400px" @submit.prevent.native="onNewToast"> <bento-input-field v-model="text" /> <bento-checkbox v-model="withAction">With action button</bento-checkbox> <template #actions-left> <bento-button type="submit">Add toast</bento-button> </template> </bento-form-layout> `, setup(props) { const { onToastAction } = isVue2 ? props : _args; const { stack, addToast } = useBentoToastController(); let counter = 1; const addNewToast = toast => { const toastNum = counter; addToast({ ...toast, text: `#${toastNum}: ${toast.text}`, action: toast.action ? { text: 'Action', handler: () => onToastAction(`#${toastNum}`) } : null, }); counter += 1; }; onMounted(() => { items.forEach(toast => addNewToast(toast)); }); const text = ref('Toast'); const withAction = ref(false); const onNewToast = () => addNewToast({ text: text.value, action: withAction.value, }); return { onNewToast, text, withAction, stack, }; }, }); 

package/dist/assets/components/toast/toast.vue

@@ -0,0 +1 @@
+<template> <div v-if="renderToast" ref="root" class="b-toast" data-testid="toast" :style="{ height: stackHeight }" @mouseenter="hovered = true" @mouseleave="hovered = false" > <toast-shadow-stack @update="toastsWithDimensions = $event" /> <transition-group name="b-toast__queue" tag="div" aria-live="polite" enter-class="b-toast__queue--enter" leave-to-class="b-toast__queue--leave-to" @before-leave="onBeforeToastLeave" @after-leave="checkHover" > <toast-item v-for="toast in queue" v-bind="{ 'data-dismiss-transform': toast.dismissTransform }" :key="toast.id" :toast="toast" :style="toast.styles" :class="{ 'b-toast__item--first': toast.isFirst }" :inert="toast.isInert" data-testid="toast-item" class="b-toast__item" /> </transition-group> </div> </template> <script setup lang="ts"> import { computed, ref, watch } from 'vue'; import ToastShadowStack from './components/toast-shadow-stack/toast-shadow-stack.vue'; import ToastItem from './components/toast-item/toast-item.vue'; import { useBentoToastController } from '@/composables/use-bento-toast-controller'; import type { BentoToastItemWithDimensions } from './components/toast-shadow-stack/toast-shadow-stack.types'; // By design, top-most toast should be visible for 5 seconds before auto-dismiss const TOAST_DISPLAY_DURATION = 5000; // Delay first render of the toast until we actually need it, to skip all the positioning calculation logic // until we actually have anything to render. const renderToast = ref(false); const { stack } = useBentoToastController(); watch( stack, toastStack => { if (toastStack.length > 0 && !renderToast.value) { renderToast.value = true; } }, { immediate: true } ); const hovered = ref(false); const toastsWithDimensions = ref<Array<BentoToastItemWithDimensions>>([]); // In collapsed mode we need for toast to "stick out", but not overflow another toast in the forefront. // Random number that satisfies this condition (single-line toast is roughly 52px height) const collapsedToastHeight = 40; // How much pixels of the stacked toast will be "sticking out" from the visible toast const stackIndicatorHeight = 10; const queueSize = computed(() => toastsWithDimensions.value.length); const lastVisibleToastIndex = computed(() => Math.min(hovered.value ? 2 : 0, queueSize.value - 1)); const lastVisibleToastBottom = computed(() => { const toast = toastsWithDimensions.value[lastVisibleToastIndex.value]; return toast ? toast.bottom + toast.height : 0; }); const queue = computed(() => { const translateBaseValue = lastVisibleToastBottom.value - collapsedToastHeight; return toastsWithDimensions.value.map((toast, index) => { const collapsed = index > lastVisibleToastIndex.value; const isSmallerStack = !hovered.value && index > 1; const translateY = collapsed ? translateBaseValue + stackIndicatorHeight * (isSmallerStack ? 2 : 1) : toast.bottom; return { ...toast, styles: { height: `${collapsed ? collapsedToastHeight : toast.height}px`, transform: collapsed ? `translateY(${translateY * -1}px) scaleX(${isSmallerStack ? '0.8' : '0.9'})` : `translateY(${translateY * -1}px)`, 'z-index': queueSize.value - index, }, // first toast has different animation, and toasts above index 2/3 are not visible so no need for a custom animation dismissTransform: index > 0 && index < (hovered.value ? 4 : 3) ? `translateY(${(translateY - toast.height) * -1}px) scale(0.5, 0.1)` : null, isFirst: index === 0, isInert: index > (hovered.value ? 2 : 0), }; }); }); const onBeforeToastLeave = (el: HTMLElement) => { // We have to swap transformation on the toast element that is about to be removed // Unfortunately we cannot do it via transition classes as transformation function is // unique per toast, and we cannot use reactivity because it won't be applied for a toast // that is removed. So direct DOM manipulation is the only way it seems. if (el.dataset.dismissTransform) { /* eslint-disable no-param-reassign -- explicitly manipulating with DOM properties, no way around it unfortunately */ el.style.transform = el.dataset.dismissTransform; } }; const stackHeight = computed(() => { // Track stack container height, so that hover over would work without glitches // (when mouse is over space between toasts) let height = 0; if (lastVisibleToastIndex.value >= 0) { const stackIndicator = stackIndicatorHeight * Math.min(queueSize.value - 1 - lastVisibleToastIndex.value, hovered.value ? 1 : 2); height = Math.min(lastVisibleToastBottom.value + stackIndicator, document.body.parentElement.clientHeight); } return `${height}px`; }); let dismissTimout = null; let timeoutStart = null; let remainingTimeToDismiss = TOAST_DISPLAY_DURATION; const startTimer = (toast, duration) => { timeoutStart = Date.now(); dismissTimout = setTimeout(() => toast.dismiss(), duration); }; const startNewDismissTimer = toast => { // stop previous timeouts, if any clearTimeout(dismissTimout); if (toast) { remainingTimeToDismiss = TOAST_DISPLAY_DURATION; if (!hovered.value) { startTimer(toast, remainingTimeToDismiss); } } else { remainingTimeToDismiss = 0; } }; watch( () => queue.value[0], (firstToast, oldFirstToast) => { if (firstToast?.id === oldFirstToast?.id) { return; } startNewDismissTimer(firstToast); }, { immediate: true } ); const pauseDismissTimer = () => { remainingTimeToDismiss = remainingTimeToDismiss - Date.now() + timeoutStart; clearTimeout(dismissTimout); }; const resumeDismissTimer = () => { if (remainingTimeToDismiss > 0) { startTimer(queue.value[0], remainingTimeToDismiss); } }; watch(hovered, isHovered => { if (isHovered) { pauseDismissTimer(); } else { resumeDismissTimer(); } }); const root = ref<HTMLElement>(); // "mouseleave" event would be emitted for the root element when the mouse moves out of the root element, // but browser wouldn't emit this event when root element shrinks to the point when mouse is not over element anymore. // This can happen when user clicks on dismiss button the top-most toast and doesn't move the mouse during animation, // after which browser would think that root element is still hovered. This workaround addresses this particular issue. const checkHover = () => setTimeout(() => { hovered.value = hovered.value ? root.value.matches(':hover') : false; }); </script> <style lang="scss" scoped src="./toast.scss" /> 

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

@@ -0,0 +1,81 @@
+import { Canvas, Story, Meta } from '@storybook/blocks';
+import * as ComponentStories from './toggle.stories';
+
+<Meta of={ComponentStories} />
+
+# Toggle
+
+<Canvas of={ComponentStories.Default} />
+
+A toggle represents a state. Use a toggle when you want users to quickly switch and save between two states, like
+turning a feature on or off.
+
+## Use Cases
+
+Use a toggle if:
+
+-   You have a binary option that can be either active or inactive (on or off).
+-   The user needs to perform instantaneous actions without confirmation.
+
+Toggles are mostly are used for settings or filters.
+
+### Do not use
+
+Don't use a toggle if the user has to perform additional steps for changes to become effective (e.g. clicking a `Save`
+button)`.
+
+## Variations
+
+### Toggle only
+
+It's a toggle without the label or the description text. In this case, it is strongly recommended to provide an
+accessible name through the `aria-label` prop in order to make the component accessible.
+
+<Canvas of={ComponentStories.toggleOnly} />
+
+### Label position
+
+If a label is passed through the right `slots`, this can be positioned on the left or on the right of the toggle itself.
+To achieve this, one the following values need to be passed to the `labelPosition` prop:
+
+-   `before`: positions the label to the left of the toggle.
+-   `after`: positions the label to the right of the toggle.
+
+## Modifiers
+
+### Disabled
+
+Renders the toggle in a disabled state. In practice this makes the component non-interactive and renders a `not-allowed`
+cursor on hover.
+
+### Readonly
+
+Renders the toggle in a readonly state. In practice this makes the component non-interactive, but it can still be
+submitted in a form and won't show `not-allowed` cursor.
+
+## Accessibility
+
+### Keyboard interaction
+
+The toggle is reachable through keyboard navigation and follows 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 toggle or away from it.             |
+| `Space`              | When focus is on the toggle, toggles the toggle button |
+| `Enter`              | When focus is on the toggle, toggles the toggle button |
+
+### Roles, states and properties
+
+| ARIA attribute     | is automatic?                                                                                | fallback used                                                                                   | manual override                                                                   |
+| ------------------ | -------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
+| `aria-label`       | Yes, corresponds to the default slot text.                                                   | If no slot text is present (e.g. toggle only), then a default value of 'toggle' will be passed. | The `aria-label` prop can be passed to provide an accessible name for the toggle. |
+| `role`             | Yes, through the semantic `input[type="checkbox"]` element with `role="switch"` set.         | -                                                                                               | -                                                                                 |
+| `aria-describedby` | Yes, it corresponds to the description text, if this one is present.                         | -                                                                                               | -                                                                                 |
+| `aria-checked`     | Yes, set when the toggle gets toggled or untoggled through the `input`'s `checked` property. | -                                                                                               | -                                                                                 |
+
+## Resources
+
+-   [Figma link](https://www.figma.com/file/uLabwF3243jdMDsNSP7U9I/ADL-2.0---Components?node-id=302-1925&t=7Zhgxe1lwQU3XdU1-0)
+-   [WAI-ARIA guidelines](https://www.w3.org/WAI/ARIA/apg/patterns/switch/)

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

@@ -0,0 +1 @@
+import { storybookDocsParameter } from '@/utils/ts/storybook'; import { action } from '@storybook/addon-actions'; import { isVue2 } from 'vue-demi'; import BentoToggle from './toggle.vue'; const TOGGLE_LABEL = 'Label'; const TOGGLE_DESCRIPTION = 'Description'; export default { title: 'Toggle', component: BentoToggle, argTypes: { default: { name: 'Default slot', description: 'Toggle label', defaultValue: '', table: { type: { summary: 'VNode[]' }, }, control: 'text', }, description: { name: 'Descriptive sub label slot', description: 'Toggle description', defaultValue: '', table: { type: { summary: 'VNode[]' }, }, control: 'text', }, input: { name: 'input', defaultValue: '', description: 'Input event handler.', table: { type: { summary: '($event) => void' }, }, control: { disable: true }, }, }, }; export const Default = (_args, { argTypes }) => ({ components: { BentoToggle }, props: Object.keys(argTypes), template: ` <bento-toggle v-bind="args" @input="clickedToggleAction"> {{args.default}} <template #description>{{args.description}}</template> </bento-toggle> `, setup(props) { return { clickedToggleAction: action('input'), args: isVue2 ? props : _args, }; }, }); Default.args = { default: TOGGLE_LABEL, description: TOGGLE_DESCRIPTION, disabled: false, }; const defaultCode = ` <bento-toggle @input="clickedToggleAction"> ${TOGGLE_LABEL} <template #description>${TOGGLE_DESCRIPTION}</template> </bento-toggle> `; Default.parameters = storybookDocsParameter(defaultCode); export const toggleOnly = (_args, { argTypes }) => ({ components: { BentoToggle }, props: Object.keys(argTypes), template: ` <bento-toggle v-bind="args" @input="clickedToggleAction" /> `, setup(props) { return { clickedToggleAction: action('input'), args: isVue2 ? props : _args, }; }, }); toggleOnly.args = { disabled: false, }; const toggleOnlyCode = ` <bento-toggle @input="clickedToggleAction" /> `; toggleOnly.parameters = storybookDocsParameter(toggleOnlyCode); 

package/dist/assets/components/toggle/toggle.vue

@@ -0,0 +1 @@
+<template> <label class="b-toggle" :class="conditionalClasses" data-testid="label"> <input v-model="toggleInput" :aria-label="computedAriaLabel" :aria-describedby="computedDescription" :disabled="disabled" :aria-readonly="readonly" role="switch" class="b-toggle__input" type="checkbox" @change="$event => onChange($event)" @click="onClick" /> <span class="b-toggle__track" aria-hidden="true"> <span class="b-toggle__handle"> <checkmark-small v-if="toggleInput" /> </span> </span> <span v-if="hasSlot('default')" class="b-toggle__label-container"> <bento-typography v-if="hasSlot('default')" el="span" variant="body" data-testid="inner-label"> <slot></slot> </bento-typography> <bento-typography v-if="hasSlot('default') && hasSlot('description')" :id="descriptionId" el="span" variant="body" class="b-toggle__description" > <slot name="description" /> </bento-typography> </span> </label> </template> <script setup lang="ts"> import { computed, type PropType, ref, toRefs, useAttrs, useSlots, watch } from 'vue'; import CheckmarkSmall from '@adyen/ui-assets-icons-16/vue/checkmark-small'; import { BentoToggleLabelPosition, BentoTogglePropClass } from './toggle.types'; import { BentoTypography } from '@/components/typography'; import { generateUid } from '@/core/utils/ts'; import { useDefaultSlotValidator, useHasSlot } from '@/composables'; import { getSlotText } from '@/utils/ts/get-slot-text/get-slot-text'; import { useAriaLabel } from '@/utils/ts/aria-label'; const slots = useSlots(); const attrs = useAttrs(); const hasSlot = useHasSlot(slots); const props = defineProps({ /** * @deprecated from version 2.0.0. Use the aria-label attribute instead. */ /** * Accessible name for the toggle. It is strongly recommended to pass such value when the toggle is used without a label */ ariaLabel: { type: String, default: undefined, }, /** * Disable the toggle (optional) */ disabled: { type: Boolean, default: false, }, /** * Position of the label relative to the toggle (optional) * @values before, after */ labelPosition: { type: String as PropType<BentoToggleLabelPosition | `${BentoToggleLabelPosition}`>, default: BentoToggleLabelPosition.BEFORE, validator: (value: BentoToggleLabelPosition) => Object.values(BentoToggleLabelPosition).includes(value), }, /** * Setting this property to true will set the toggle to read only state. */ readonly: { type: Boolean, default: false, }, /** * Indicates if the switch is "on" or "off" */ value: { type: Boolean, default: false, }, }); const emit = defineEmits<{ (e: 'input', value: boolean): void; }>(); const toggleInput = ref(props.value); const descriptionId: string = generateUid('toggle-description'); useDefaultSlotValidator('bento-toggle', slots.default, slots.description); const labelSlot = computed((): string | null => (hasSlot('default') ? getSlotText(slots)('default') : null)); const ariaLabelAttribute = computed(() => attrs['aria-label'] as string); const { ariaLabel } = toRefs(props); const computedAriaLabel = useAriaLabel({ ariaLabel: ariaLabelAttribute.value, // TODO: take this line away when the aria-label props is removed label: ariaLabel, defaultFallback: labelSlot, }); const computedDescription = computed((): string | null => descriptionId ?? null); const conditionalClasses = computed((): { [key: string]: boolean } => ({ [`b-toggle--${BentoTogglePropClass.LABEL_FIRST}`]: props.labelPosition === BentoToggleLabelPosition.BEFORE, 'b-toggle--disabled': props.disabled, 'b-toggle--readonly': props.readonly, })); const onChange = (event: Event) => { emit('input', (event.target as HTMLInputElement).checked); }; // readonly attr doesn't work with checkbox, so we need to manually ignore the click instead const onClick = (event: Event) => { if (props.readonly) { event.preventDefault(); } }; watch( () => props.value, newValue => { toggleInput.value = newValue; } ); </script> <script lang="ts"> /** * A wrapper around the bento toggle, providing checkbox functionality with a knob-like toggle * * @usage * import { BentoToggle, BentoLabelPosition } from '@adyen/adl-vue2'; * * export default { * components: { BentoToggle }, * template: ` * <bento-toggle * :value="toggleValue"` * label-position="LabelPosition.BEFORE" * @input="optionalHandler($event)" * > * Label Text * </bento-toggle> * `, * } */ export default { name: 'bento-toggle', }; </script> <style lang="scss" scoped src="./toggle.scss" /> 

package/dist/assets/components/tutorial/components/tutorial-popover/components/tutorial-indicator/tutorial-indicator.vue

@@ -0,0 +1 @@
+<template> <popper-container :target-element="targetElement" :middleware="middleware" position="top-start" fixed-positioning disabled-focus-trap class="b-tutorial-indicator" data-testid="tutorial-indicator" > <div class="b-tutorial-indicator__highlight" :style="computedStyles"></div> </popper-container> </template> <script setup lang="ts"> import { ref } from 'vue'; import { hide, type Middleware, offset } from '@floating-ui/vue'; import { PopperContainer } from '@/components/popper-container'; const BORDER_OFFSET = 2; defineProps({ /** * Tutorial indicator's target element. * The indicator will position itself around the target element. */ targetElement: { type: PopperContainer.props?.targetElement.type, required: true, }, }); const computedStyles = ref({ width: '0', height: '0', borderRadius: '0', }); function getBorderRadius(element: HTMLElement) { try { const radius = parseFloat(getComputedStyle(element).getPropertyValue('border-radius')); return Number.isNaN(radius) ? '' : `${radius + 2 * BORDER_OFFSET}px`; } catch { return ''; } } const middleware = [ hide(), offset({ mainAxis: BORDER_OFFSET, alignmentAxis: -BORDER_OFFSET, }), { name: 'updateIndicatorSize', fn: ({ x, y, elements }) => { const target = elements.reference as HTMLElement; computedStyles.value.width = `${target.offsetWidth + 4 * BORDER_OFFSET}px`; computedStyles.value.height = `${target.offsetHeight + 4 * BORDER_OFFSET}px`; computedStyles.value.borderRadius = getBorderRadius(target); return { x, y }; }, } as Middleware, ]; </script> <style lang="scss" scoped src="./tutorial-indicator.scss" />