@adyen/bento-mcp 0.11.0 → 0.12.0

package/dist/assets/components/selection-card/components/selection-card-group/selection-card-group.stories.ts

@@ -1 +1 @@
-import { ref } from 'vue'; import { isVue2 } from 'vue-demi'; import { action } from '@storybook/addon-actions'; import RetailIcon from '@adyen/ui-assets-icons-16/vue/retail'; import LeafIcon from '@adyen/ui-assets-icons-16/vue/leaf'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoSelectionCardGroup from './selection-card-group.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import SelectCardGroupEverythingBagelExample from './__tests__/selection-card-group-everything-bagel-example.vue?raw'; import SelectCardGroupWithSlotsExample from './__tests__/selection-card-group-with-slots-example.vue?raw'; const meta: Meta = { title: 'Selection Card/Selection Card Group', component: BentoSelectionCardGroup, argTypes: { layout: { control: { type: 'radio' }, }, 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 BentoSelectionCardGroup>; const ITEMS = [ { title: 'Card 1', value: 'card-1', }, { title: 'Card 2', value: 'card-2', }, { title: 'Card 3', value: 'card-3', }, { title: 'Card 4', value: 'card-4', }, ]; const ITEMS_WITH_CONTENT = [ { title: 'Card 1', value: 'card-1', content: 'Slot content 1', icon: RetailIcon, fullyClickable: true, }, { title: 'Card 2', value: 'card-2', content: 'Slot content 2', icon: LeafIcon, fullyClickable: true, }, ]; const ITEMS_EVERYTHING_BAGEL = [ { title: 'Card 1', value: 'card-1', description: 'Description card 1', subtitle: 'Subtitle card 1', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et tellus at sem finibus posuere. Quisque nec velit sapien. Proin ultrices enim at placerat rhoncus. Ut volutpat nisl non hendrerit laoreet. ', dynamicContent: 'Dynamic content 1', icon: RetailIcon, fullyClickable: true, }, { title: 'Card 2', value: 'card-2', description: 'Description card 2', subtitle: 'Subtitle card 2', content: 'Content slot 2', icon: LeafIcon, fullyClickable: true, }, ]; const defaultCode = ` <template> <bento-selection-card-group label="Your group label" :items="items" v-model="selectedValue" /> </template> <script setup lang="ts"> import { BentoSelectionCardGroup } from '@adyen/bento-vue2'; const items = ref(${JSON.stringify(ITEMS)}); const selectedValue = ref([]); </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCardGroup }, props: Object.keys(argTypes), template: ` <bento-selection-card-group v-bind="args" :model-value="selectedValue" @update:model-value="updateAction" /> `, setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const updateAction = value => { selectedValue.value = value; action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, updateAction, }; }, }), args: { label: 'Label', items: ITEMS, itemsPerRow: {}, modelValue: [], }, parameters: storybookDocsParameter(defaultCode), }; const radioCode = ` <template> <bento-selection-card-group label="Your group label" variant="radio" :items="items" v-model="selectedValue" /> </template> <script setup lang="ts"> import { BentoSelectionCardGroup } from '@adyen/bento-vue2'; const items = ref(${JSON.stringify(ITEMS)}); const selectedValue = ref(undefined); </script> `; export const Radio: Story = { ...Default, args: { label: 'Label', variant: 'radio', items: ITEMS, itemsPerRow: {}, modelValue: undefined, }, parameters: storybookDocsParameter(radioCode), }; export const WithSlots: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCardGroup, LeafIcon, RetailIcon }, props: Object.keys(argTypes), template: ` <bento-selection-card-group v-bind="args" :model-value="selectedValue" @update:model-value="updateAction" > <template #icon="{ icon }"> <component :is="icon"/> </template> <template #content="{ content }"> <div>{{ content }}</div> </template> <template #dynamicContent="{ dynamicContent }"> <div>{{ dynamicContent }}</div> </template> </bento-selection-card-group> `, setup(props) { const selectedValue = ref([]); const updateAction = value => { selectedValue.value = value; action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, updateAction, }; }, }), args: { label: 'Label', items: ITEMS_WITH_CONTENT, }, parameters: storybookDocsParameter(SelectCardGroupWithSlotsExample), }; const itemsPerRowCode = ` <template> <bento-selection-card-group label="Your group label" :items="items" :items-per-row="{ small: 2, medium: 3, large: 4 }" v-model="selectedValue" /> </template> <script setup lang="ts"> import { BentoSelectionCardGroup } from '@adyen/bento-vue2'; const items = ref(${JSON.stringify(ITEMS)}); const selectedValue = ref([]); </script> `; export const ItemsPerRow: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCardGroup }, props: Object.keys(argTypes), template: ` <bento-selection-card-group v-bind="args" :model-value="selectedValue" @update:model-value="updateAction" /> `, setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const updateAction = value => { selectedValue.value = value; action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, updateAction, }; }, }), args: { label: 'With responsive items per row', items: ITEMS, layout: 'horizontal', itemsPerRow: { small: 2, medium: 3, large: 4 }, modelValue: [], }, parameters: storybookDocsParameter(itemsPerRowCode), }; export const EverythingBagel: Story = { ...WithSlots, args: { label: 'Label', items: ITEMS_EVERYTHING_BAGEL, required: true, hideLabel: false, description: 'Supporting text', tooltipText: 'Tooltip text', }, parameters: storybookDocsParameter(SelectCardGroupEverythingBagelExample), }; 
+import { ref } from 'vue'; import { isVue2 } from 'vue-demi'; import { action } from '@storybook/addon-actions'; import RetailIcon from '@adyen/ui-assets-icons-16/vue/retail'; import LeafIcon from '@adyen/ui-assets-icons-16/vue/leaf'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoSelectionCardGroup from './selection-card-group.vue'; import type { Meta, StoryObj } from '@storybook/vue'; const SelectCardGroupEverythingBagelExample = "<template>\n <bento-selection-card-group\n v-model=\"selectedValue\"\n label=\"Label\"\n description=\"Supporting text\"\n tooltip-text=\"Tooltip text\"\n required\n :hide-label=\"false\"\n :error-message=\"errorMessage\"\n :items=\"items\"\n :readonly=\"readonly\"\n :disabled=\"disabled\"\n >\n <template #icon=\"{ icon }\">\n <component :is=\"icon\" />\n </template>\n <template #content=\"{ content }\">\n <!-- You can also render a component here -->\n <div>{{ content }}</div>\n </template>\n <template #dynamicContent=\"{ dynamicContent }\">\n <!-- You can also render a component here -->\n <div>{{ dynamicContent }}</div>\n </template>\n </bento-selection-card-group>\n</template>\n\n<script setup lang=\"ts\">\n import {\n BentoSelectionCardGroup,\n type BentoSelectionCardItem,\n type BentoSelectionCardModelValue,\n } from '@adyen/bento-vue2';\n import RetailIcon from '@adyen/ui-assets-icons-16/vue/retail';\n import LeafIcon from '@adyen/ui-assets-icons-16/vue/leaf';\n import { ref } from 'vue';\n\n const items = ref<Array<BentoSelectionCardItem>>([\n {\n title: 'Card 1',\n value: 'card-1',\n description: 'Description card 1',\n subtitle: 'Subtitle card 1',\n content:\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et tellus at sem finibus posuere. Quisque nec velit sapien. Proin ultrices enim at placerat rhoncus. Ut volutpat nisl non hendrerit laoreet. ',\n dynamicContent: 'Dynamic content 1',\n icon: RetailIcon,\n fullyClickable: true,\n },\n {\n title: 'Card 2',\n value: 'card-2',\n description: 'Description card 2',\n subtitle: 'Subtitle card 2',\n content: 'Content slot 2',\n icon: LeafIcon,\n fullyClickable: true,\n },\n ]);\n\n const selectedValue = ref<BentoSelectionCardModelValue>([]);\n const errorMessage = ref<string | null>(null);\n const readonly = ref(false);\n const disabled = ref(false);\n</script>\n"; const SelectCardGroupWithSlotsExample = "<template>\n <bento-selection-card-group v-model=\"selectedValue\" label=\"Label\" :items=\"items\">\n <template #icon=\"{ icon }\">\n <component :is=\"icon\" />\n </template>\n <template #content=\"{ content }\">\n <!-- You can also render a component here -->\n <div>{{ content }}</div>\n </template>\n </bento-selection-card-group>\n</template>\n\n<script setup lang=\"ts\">\n import {\n BentoSelectionCardGroup,\n type BentoSelectionCardItem,\n type BentoSelectionCardModelValue,\n } from '@adyen/bento-vue2';\n import RetailIcon from '@adyen/ui-assets-icons-16/vue/retail';\n import LeafIcon from '@adyen/ui-assets-icons-16/vue/leaf';\n import { ref } from 'vue';\n\n const items = ref<Array<BentoSelectionCardItem>>([\n {\n title: 'Card 1',\n value: 'card-1',\n content: 'Slot content 1',\n icon: RetailIcon,\n fullyClickable: true,\n },\n {\n title: 'Card 2',\n value: 'card-2',\n content: 'Slot content 2',\n icon: LeafIcon,\n fullyClickable: true,\n },\n ]);\n\n const selectedValue = ref<BentoSelectionCardModelValue>([]);\n</script>\n"; const meta: Meta = { title: 'Selection Card/Selection Card Group', component: BentoSelectionCardGroup, argTypes: { layout: { control: { type: 'radio' }, }, }, }; export default meta; type Story = StoryObj<typeof BentoSelectionCardGroup>; const ITEMS = [ { title: 'Card 1', value: 'card-1', }, { title: 'Card 2', value: 'card-2', }, { title: 'Card 3', value: 'card-3', }, { title: 'Card 4', value: 'card-4', }, ]; const ITEMS_WITH_CONTENT = [ { title: 'Card 1', value: 'card-1', content: 'Slot content 1', icon: RetailIcon, fullyClickable: true, }, { title: 'Card 2', value: 'card-2', content: 'Slot content 2', icon: LeafIcon, fullyClickable: true, }, ]; const ITEMS_EVERYTHING_BAGEL = [ { title: 'Card 1', value: 'card-1', description: 'Description card 1', subtitle: 'Subtitle card 1', content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus et tellus at sem finibus posuere. Quisque nec velit sapien. Proin ultrices enim at placerat rhoncus. Ut volutpat nisl non hendrerit laoreet. ', dynamicContent: 'Dynamic content 1', icon: RetailIcon, fullyClickable: true, }, { title: 'Card 2', value: 'card-2', description: 'Description card 2', subtitle: 'Subtitle card 2', content: 'Content slot 2', icon: LeafIcon, fullyClickable: true, }, ]; const defaultCode = ` <template> <bento-selection-card-group label="Your group label" :items="items" v-model="selectedValue" /> </template> <script setup lang="ts"> import { BentoSelectionCardGroup } from '@adyen/bento-vue2'; const items = ref(${JSON.stringify(ITEMS)}); const selectedValue = ref([]); </script> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCardGroup }, props: Object.keys(argTypes), template: ` <bento-selection-card-group v-bind="args" :model-value="selectedValue" @update:model-value="updateAction" /> `, setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const updateAction = value => { selectedValue.value = value; action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, updateAction, }; }, }), args: { label: 'Label', items: ITEMS, itemsPerRow: {}, modelValue: [], }, parameters: storybookDocsParameter(defaultCode), }; const radioCode = ` <template> <bento-selection-card-group label="Your group label" variant="radio" :items="items" v-model="selectedValue" /> </template> <script setup lang="ts"> import { BentoSelectionCardGroup } from '@adyen/bento-vue2'; const items = ref(${JSON.stringify(ITEMS)}); const selectedValue = ref(undefined); </script> `; export const Radio: Story = { ...Default, args: { label: 'Label', variant: 'radio', items: ITEMS, itemsPerRow: {}, modelValue: undefined, }, parameters: storybookDocsParameter(radioCode), }; export const WithSlots: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCardGroup, LeafIcon, RetailIcon }, props: Object.keys(argTypes), template: ` <bento-selection-card-group v-bind="args" :model-value="selectedValue" @update:model-value="updateAction" > <template #icon="{ icon }"> <component :is="icon"/> </template> <template #content="{ content }"> <div>{{ content }}</div> </template> <template #dynamicContent="{ dynamicContent }"> <div>{{ dynamicContent }}</div> </template> </bento-selection-card-group> `, setup(props) { const selectedValue = ref([]); const updateAction = value => { selectedValue.value = value; action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, updateAction, }; }, }), args: { label: 'Label', items: ITEMS_WITH_CONTENT, }, parameters: storybookDocsParameter(SelectCardGroupWithSlotsExample), }; const itemsPerRowCode = ` <template> <bento-selection-card-group label="Your group label" :items="items" :items-per-row="{ small: 2, medium: 3, large: 4 }" v-model="selectedValue" /> </template> <script setup lang="ts"> import { BentoSelectionCardGroup } from '@adyen/bento-vue2'; const items = ref(${JSON.stringify(ITEMS)}); const selectedValue = ref([]); </script> `; export const ItemsPerRow: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCardGroup }, props: Object.keys(argTypes), template: ` <bento-selection-card-group v-bind="args" :model-value="selectedValue" @update:model-value="updateAction" /> `, setup(props) { const args = isVue2 ? props : _args; const selectedValue = ref(args.modelValue); const updateAction = value => { selectedValue.value = value; action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, updateAction, }; }, }), args: { label: 'With responsive items per row', items: ITEMS, layout: 'horizontal', itemsPerRow: { small: 2, medium: 3, large: 4 }, modelValue: [], }, parameters: storybookDocsParameter(itemsPerRowCode), }; export const EverythingBagel: Story = { ...WithSlots, args: { label: 'Label', items: ITEMS_EVERYTHING_BAGEL, required: true, hideLabel: false, description: 'Supporting text', tooltipText: 'Tooltip text', }, parameters: storybookDocsParameter(SelectCardGroupEverythingBagelExample), }; 

package/dist/assets/components/selection-card/components/selection-card-group/selection-card-group.vue

@@ -1 +1 @@
-<template> <controls-group ref="containerRef" :aria-describedby="shouldShowGroupError ? errorMessageId : null" :aria-required="required" :label="label" :hide-label="hideLabel" :description="description" :disabled="disabled" :tooltip-text="tooltipText" :readonly="readonly" :required="required" :optional="optional" class="b-selection-card-group" component-name="selection-card-group" > <div v-if="!itemsPerRow || layout === 'vertical'" class="b-selection-card-group__items" :class="conditionalItemsClasses" > <bento-selection-card v-for="item in items" :key="`selection-card-${item.value}`" class="b-selection-card-group__item" v-bind="item" :model-value="inputValue" :readonly="readonly || item.readonly" :has-error="shouldShowGroupError" :disabled="disabled || item.disabled" @update:model-value="onInput" > <template v-if="hasSlot('icon') && item.icon" #icon> <slot name="icon" v-bind="item"></slot> </template> <template v-if="hasSlot('content') && item.content" #content> <slot name="content" v-bind="item"></slot> </template> <template v-if="hasSlot('dynamicContent') && item.dynamicContent" #dynamicContent> <slot name="dynamicContent" v-bind="item"></slot> </template> </bento-selection-card> </div> <template v-else> <div :key="`selection-card-group-layout-breakpoint-${currentBreakpoint}`"> <grid-layout v-for="(row, rowIndex) in computedRows" :key="`selection-card-group-row-${rowIndex}-cols-${computedItemsPerRow}`" class="b-selection-card-group__items--wrap" :column-width="computedColumnWidth" > <template v-for="(item, columnIndex) in row" #[`col-${Number(columnIndex)+1}`]> <bento-selection-card :key="`selection-card-${item.value}`" class="b-selection-card-group__item b-selection-card-group__item--full-height" v-bind="item" :model-value="inputValue" :readonly="readonly || item.readonly" :has-error="shouldShowGroupError" :disabled="disabled || item.disabled" @update:model-value="onInput" > <template v-if="hasSlot('icon') && item.icon" #icon> <slot name="icon" v-bind="item"></slot> </template> <template v-if="hasSlot('content') && item.content" #content> <slot name="content" v-bind="item"></slot> </template> <template v-if="hasSlot('dynamicContent') && item.dynamicContent" #dynamicContent> <slot name="dynamicContent" v-bind="item"></slot> </template> </bento-selection-card> </template> </grid-layout> </div> </template> <error-message v-if="shouldShowGroupError" :id="errorMessageId" :error-message="errorMessage" class="b-selection-card-group__error-message" /> </controls-group> </template> <script setup lang="ts"> import { computed, onMounted, provide, ref, useSlots, watch } from 'vue'; import { useElementSize } from '@vueuse/core'; import { BMediaQueryMMax, BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6'; import { type BentoSelectionCardGroupEmits, type BentoSelectionCardGroupProps } from './selection-card-group.types'; import BentoSelectionCard from '../../selection-card.vue'; import { ControlsGroup, ErrorMessage, GridLayout } from '../../../internal'; import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from '../../selection-card.keys'; import { generateUid } from '@/core/utils/ts'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; const props = withDefaults(defineProps<BentoSelectionCardGroupProps>(), { description: null, disabled: false, errorMessage: null, formId: null, hideLabel: null, label: null, layout: 'vertical', itemsPerRow: undefined, modelValue: null, optional: false, required: false, tooltipText: null, readonly: false, variant: 'checkbox', }); const emit = defineEmits<BentoSelectionCardGroupEmits>(); const { emitValue } = useFormFieldEmits(emit); const slots = useSlots(); // Slots logic // Temporary, use-has-slots composable doesn't currently work for vue3 named scoped slots // We do the same in bento-checkbox-group const hasSlot = name => !!slots[name]; const conditionalItemsClasses = computed(() => ({ 'b-selection-card-group__items--horizontal': props.layout === 'horizontal', })); const inputValue = ref(props.modelValue); watch( () => props.modelValue, () => { inputValue.value = props.modelValue; } ); // Error message logic const errorMessageId = generateUid('error'); const shouldShowGroupError = computed(() => !props.disabled && !props.readonly && !!props.errorMessage); // itemsPerRow logic const containerRef = ref<HTMLElement | null>(null); const { width } = useElementSize(containerRef); const smallBreakpoint = computed(() => BMediaQuerySMax.split('px')[0]); const mediumBreakpoint = computed(() => BMediaQueryMMax.split('px')[0]); const currentBreakpoint = computed(() => { if (width.value < smallBreakpoint.value) { return 'small'; } if (width.value >= smallBreakpoint.value && width.value < mediumBreakpoint.value) { return 'medium'; } return 'large'; }); const computedItemsPerRow = computed(() => { return (props.itemsPerRow?.[currentBreakpoint?.value] as number) || props.items.length; }); const computedRows = computed(() => { if (!props.itemsPerRow) { return []; } const rows = []; for (let i = 0; i < props.items.length; i += computedItemsPerRow?.value) { rows.push(props.items.slice(i, i + computedItemsPerRow?.value)); } return rows; }); // We need to compute the column width on 12 because we're using a 12-column system for out grid-layout logic const itemColumnWidth = computed(() => 12 / computedItemsPerRow?.value); /** * Filling the columnWidth array with the same parameters per item to pass * to the `grid-layout` layout so the each card can have * the same width according to the screen size. */ const computedColumnWidth = computed(() => { return computedItemsPerRow?.value ? new Array(computedItemsPerRow?.value).fill({ // Instead of passing the actual screen sizes values, passing the same values per each screen size and recomputing it makes sure visually the change is smoother and not laggy small: itemColumnWidth.value, medium: itemColumnWidth.value, large: itemColumnWidth.value, }) : []; }); const onInput = value => { inputValue.value = value; emitValue(value); }; const isRadioVariant = computed(() => props.variant === 'radio'); provide(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, isRadioVariant); onMounted(() => { if (props.itemsPerRow) { Object.values(props.itemsPerRow).forEach(el => { if (el && (el < 2 || el > 6)) { throw new Error( 'itemsPerRow values must have a value between 2 and 6 items per row. Read the documentation for more information.' ); } }); } }); </script> <script lang="ts"> /** * Group of bento-selection-cards. * * @example * import { BentoSelectionCardGroup } from '@adyen/bento-vue2'; * * export default { * components: { BentoSelectionCardGroup }, * template: ` * <bento-selection-card-group * :items="[ * { * title: 'Card 1', * value: 'card-1', * content: 'Slot content 1', * icon: RetailIcon, * }, * { * title: 'Card 2', * value: 'card-2', * content: 'Slot content 2', * icon: LeafIcon, * }, * ]" * > * <template #icon="{ icon }"> * <component :is="icon"/> * </template> * <template #content="{ content }"> * <div>{{ content }}</div> * </template> * </bento-selection-card-group> * `, * } */ export default { model: { prop: 'modelValue' }, }; </script> <style lang="scss" scoped src="./selection-card-group.scss" /> 
+<template> <controls-group ref="containerRef" :aria-describedby="shouldShowGroupError ? errorMessageId : null" :aria-required="required" :label="label" :hide-label="hideLabel" :description="description" :disabled="disabled" :tooltip-text="tooltipText" :readonly="readonly" :required="required" :optional="optional" class="b-selection-card-group" component-name="selection-card-group" > <div v-if="!itemsPerRow || layout === 'vertical'" class="b-selection-card-group__items" :class="conditionalItemsClasses" > <bento-selection-card v-for="item in items" :key="`selection-card-${item.value}`" class="b-selection-card-group__item" v-bind="item" :model-value="inputValue" :readonly="readonly || item.readonly" :has-error="shouldShowGroupError" :disabled="disabled || item.disabled" @update:model-value="onInput" > <template v-if="hasSlot('icon') && item.icon" #icon> <slot name="icon" v-bind="item"></slot> </template> <template v-if="hasSlot('content') && item.content" #content> <slot name="content" v-bind="item"></slot> </template> <template v-if="hasSlot('dynamicContent') && item.dynamicContent" #dynamicContent> <slot name="dynamicContent" v-bind="item"></slot> </template> </bento-selection-card> </div> <template v-else> <div :key="`selection-card-group-layout-breakpoint-${currentBreakpoint}`"> <grid-layout v-for="(row, rowIndex) in computedRows" :key="`selection-card-group-row-${rowIndex}-cols-${computedItemsPerRow}`" class="b-selection-card-group__items--wrap" :column-width="computedColumnWidth" > <template v-for="(item, columnIndex) in row" #[`col-${Number(columnIndex)+1}`]> <bento-selection-card :key="`selection-card-${item.value}`" class="b-selection-card-group__item b-selection-card-group__item--full-height" v-bind="item" :model-value="inputValue" :readonly="readonly || item.readonly" :has-error="shouldShowGroupError" :disabled="disabled || item.disabled" @update:model-value="onInput" > <template v-if="hasSlot('icon') && item.icon" #icon> <slot name="icon" v-bind="item"></slot> </template> <template v-if="hasSlot('content') && item.content" #content> <slot name="content" v-bind="item"></slot> </template> <template v-if="hasSlot('dynamicContent') && item.dynamicContent" #dynamicContent> <slot name="dynamicContent" v-bind="item"></slot> </template> </bento-selection-card> </template> </grid-layout> </div> </template> <error-message v-if="shouldShowGroupError" :id="errorMessageId" :error-message="errorMessage" class="b-selection-card-group__error-message" /> </controls-group> </template> <script setup lang="ts"> import { computed, onMounted, provide, ref, useSlots, watch } from 'vue'; import { useElementSize } from '@vueuse/core'; import { BMediaQueryMMax, BMediaQuerySMax } from '@adyen/bento-design-tokens/dist/js/bento/es6'; import { type BentoSelectionCardGroupEmits, type BentoSelectionCardGroupProps } from './selection-card-group.types'; import BentoSelectionCard from '../../selection-card.vue'; import { ControlsGroup, ErrorMessage, GridLayout } from '../../../internal'; import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from '../../selection-card.keys'; import { generateUid } from '@/utils/ts/generate-uid'; import { useFormFieldEmits } from '@/utils/ts/form-field/form-field'; const props = withDefaults(defineProps<BentoSelectionCardGroupProps>(), { description: null, disabled: false, errorMessage: null, formId: null, hideLabel: null, label: null, layout: 'vertical', itemsPerRow: undefined, modelValue: null, optional: false, required: false, tooltipText: null, readonly: false, variant: 'checkbox', }); const emit = defineEmits<BentoSelectionCardGroupEmits>(); const { emitValue } = useFormFieldEmits(emit); const slots = useSlots(); // Slots logic // Temporary, use-has-slots composable doesn't currently work for vue3 named scoped slots // We do the same in bento-checkbox-group const hasSlot = name => !!slots[name]; const conditionalItemsClasses = computed(() => ({ 'b-selection-card-group__items--horizontal': props.layout === 'horizontal', })); const inputValue = ref(props.modelValue); watch( () => props.modelValue, () => { inputValue.value = props.modelValue; } ); // Error message logic const errorMessageId = generateUid('error'); const shouldShowGroupError = computed(() => !props.disabled && !props.readonly && !!props.errorMessage); // itemsPerRow logic const containerRef = ref<HTMLElement | null>(null); const { width } = useElementSize(containerRef); const smallBreakpoint = computed(() => BMediaQuerySMax.split('px')[0]); const mediumBreakpoint = computed(() => BMediaQueryMMax.split('px')[0]); const currentBreakpoint = computed(() => { if (width.value < smallBreakpoint.value) { return 'small'; } if (width.value >= smallBreakpoint.value && width.value < mediumBreakpoint.value) { return 'medium'; } return 'large'; }); const computedItemsPerRow = computed(() => { return (props.itemsPerRow?.[currentBreakpoint?.value] as number) || props.items.length; }); const computedRows = computed(() => { if (!props.itemsPerRow) { return []; } const rows = []; for (let i = 0; i < props.items.length; i += computedItemsPerRow?.value) { rows.push(props.items.slice(i, i + computedItemsPerRow?.value)); } return rows; }); // We need to compute the column width on 12 because we're using a 12-column system for out grid-layout logic const itemColumnWidth = computed(() => 12 / computedItemsPerRow?.value); /** * Filling the columnWidth array with the same parameters per item to pass * to the `grid-layout` layout so the each card can have * the same width according to the screen size. */ const computedColumnWidth = computed(() => { return computedItemsPerRow?.value ? new Array(computedItemsPerRow?.value).fill({ // Instead of passing the actual screen sizes values, passing the same values per each screen size and recomputing it makes sure visually the change is smoother and not laggy small: itemColumnWidth.value, medium: itemColumnWidth.value, large: itemColumnWidth.value, }) : []; }); const onInput = value => { inputValue.value = value; emitValue(value); }; const isRadioVariant = computed(() => props.variant === 'radio'); provide(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, isRadioVariant); onMounted(() => { if (props.itemsPerRow) { Object.values(props.itemsPerRow).forEach(value => { const numericValue = Number(value); if (!Number.isInteger(numericValue) || numericValue < 1 || numericValue > 6) { throw new Error( 'itemsPerRow values must have a value between 1 and 6 items per row. Read the documentation for more information.' ); } }); } }); </script> <script lang="ts"> /** * Group of bento-selection-cards. * * @example * import { BentoSelectionCardGroup } from '@adyen/bento-vue2'; * * export default { * components: { BentoSelectionCardGroup }, * template: ` * <bento-selection-card-group * :items="[ * { * title: 'Card 1', * value: 'card-1', * content: 'Slot content 1', * icon: RetailIcon, * }, * { * title: 'Card 2', * value: 'card-2', * content: 'Slot content 2', * icon: LeafIcon, * }, * ]" * > * <template #icon="{ icon }"> * <component :is="icon"/> * </template> * <template #content="{ content }"> * <div>{{ content }}</div> * </template> * </bento-selection-card-group> * `, * } */ export default { model: { prop: 'modelValue', event: 'update:model-value' }, }; </script> <style lang="scss" scoped src="./selection-card-group.scss" /> 

package/dist/assets/components/selection-card/selection-card.stories.ts

@@ -1 +1 @@
-import { action } from '@storybook/addon-actions'; import { isVue2 } from 'vue-demi'; import { ref } from 'vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoSelectionCard from './selection-card.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy'; const meta: Meta = { title: 'Selection Card', component: BentoSelectionCard, }; export default meta; type Story = StoryObj<typeof BentoSelectionCard>; const defaultCode = ` <bento-selection-card title="Card title" value="card-value" :model-value.sync="yourModelValueVariable" /> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCard }, props: Object.keys(argTypes), template: ` <bento-selection-card v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction" /> `, setup(props) { const selectedValue = ref(undefined); const clickedAction = value => { selectedValue.value = value; action('input')(value); action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, // Events clickedAction, }; }, }), args: { title: 'Card title', value: 'value', }, parameters: storybookDocsParameter(defaultCode), }; const withIconCode = ` <template> <bento-selection-card title="Card title" value="card-value" :model-value.sync="yourModelValueVariable" > <template #icon> <emoticon-happy-icon /> </template> </bento-selection-card> </template> <script setup lang="ts"> import { BentoSelectionCard } from '@adyen/bento-vue2'; import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy'; </script> `; export const WithIcon: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCard, EmoticonHappyIcon }, props: Object.keys(argTypes), template: ` <bento-selection-card v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction" > <template #icon> <emoticon-happy-icon /> </template> </bento-selection-card> `, setup(props) { const selectedValue = ref(undefined); const clickedAction = value => { selectedValue.value = value; action('input')(value); action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, // Events clickedAction, }; }, }), args: { title: 'Card title', value: 'value', }, parameters: storybookDocsParameter(withIconCode), }; const withContentSlotCode = ` <template> <bento-selection-card title="Card title" value="card-value" :model-value.sync="yourModelValueVariable" > <template #content> I'm a content slot that can be replaced with any content! </template> </bento-selection-card> </template> `; export const WithContentSlot: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCard }, props: Object.keys(argTypes), template: ` <bento-selection-card v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction" > <template #content> I'm a content slot that can be replaced with any content! </template> </bento-selection-card> `, setup(props) { const selectedValue = ref(undefined); const clickedAction = value => { selectedValue.value = value; action('input')(value); action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, // Events clickedAction, }; }, }), args: { title: 'Card title', value: 'value', }, parameters: storybookDocsParameter(withContentSlotCode), }; const withDynamicContentSlotCode = ` <template> <bento-selection-card title="Card title" value="card-value" :model-value.sync="yourModelValueVariable" > <template #dynamicContent> I'm a content slot that will only show when the card is selected! </template> </bento-selection-card> </template> `; export const WithDynamicContentSlot: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCard }, props: Object.keys(argTypes), template: ` <bento-selection-card v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction" > <template #dynamicContent> I'm a content slot that will only show when the card is selected! </template> </bento-selection-card> `, setup(props) { const selectedValue = ref(undefined); const clickedAction = value => { selectedValue.value = value; action('input')(value); action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, // Events clickedAction, }; }, }), args: { title: 'Card title', value: 'value', }, parameters: storybookDocsParameter(withDynamicContentSlotCode), }; const everythingBagelCode = ` <template> <bento-selection-card title="Card title" subtitle="Subtitle" description="Description" value="card-value" :model-value.sync="yourModelValueVariable" > <template #icon> <emoticon-happy-icon /> </template> <template #content> I'm a content slot that can be replaced with any content! </template> <template #dynamicContent> I'm a content slot that will only show when the card is selected! </template> </bento-selection-card> </template> <script setup lang="ts"> import { BentoSelectionCard } from '@adyen/bento-vue2'; import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy'; </script> `; export const EverythingBagel: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCard, EmoticonHappyIcon }, props: Object.keys(argTypes), template: ` <bento-selection-card v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction" > <template #icon> <emoticon-happy-icon /> </template> <template #content> I'm a content slot that can be replaced with any content! </template> <template #dynamicContent> I'm a content slot that will only show when the card is selected! </template> </bento-selection-card> `, setup(props) { const selectedValue = ref(undefined); const clickedAction = value => { selectedValue.value = value; action('input')(value); action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, // Events clickedAction, }; }, }), args: { title: 'Card title', description: 'Description', subtitle: 'Subtitle', value: 'value', }, parameters: storybookDocsParameter(everythingBagelCode), }; 
+import { action } from '@storybook/addon-actions'; import { isVue2 } from 'vue-demi'; import { ref } from 'vue'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import BentoSelectionCard from './selection-card.vue'; const SelectionCardDefaultExample = "<template>\n <bento-selection-card\n title=\"Card title\"\n value=\"value\"\n :model-value=\"selectedValue\"\n @update:model-value=\"selectCard\"\n />\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import {\n BentoSelectionCard,\n type BentoSelectionCardModelValue,\n type BentoSelectionCardValue,\n } from '@adyen/bento-vue2';\n\n const selectedValue = ref<BentoSelectionCardModelValue>();\n const selectCard = (value: BentoSelectionCardValue) => {\n selectedValue.value = value;\n };\n</script>\n"; const SelectionCardEverythingBagelExample = "<template>\n <bento-selection-card\n title=\"Card title\"\n subtitle=\"Subtitle\"\n description=\"Description\"\n value=\"value\"\n :model-value=\"selectedValue\"\n @update:model-value=\"selectCard\"\n >\n <template #icon>\n <emoticon-happy-icon />\n </template>\n <template #content>I'm a content slot that can be replaced with any content!</template>\n <template #dynamicContent>I'm a content slot that will only show when the card is selected!</template>\n </bento-selection-card>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import {\n BentoSelectionCard,\n type BentoSelectionCardModelValue,\n type BentoSelectionCardValue,\n } from '@adyen/bento-vue2';\n import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy';\n\n const selectedValue = ref<BentoSelectionCardModelValue>();\n const selectCard = (value: BentoSelectionCardValue) => {\n selectedValue.value = value;\n };\n</script>\n"; const SelectionCardWithContentSlotExample = "<template>\n <bento-selection-card\n title=\"Card title\"\n value=\"value\"\n :model-value=\"selectedValue\"\n @update:model-value=\"selectCard\"\n >\n <template #content>I'm a content slot that can be replaced with any content!</template>\n </bento-selection-card>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import {\n BentoSelectionCard,\n type BentoSelectionCardModelValue,\n type BentoSelectionCardValue,\n } from '@adyen/bento-vue2';\n\n const selectedValue = ref<BentoSelectionCardModelValue>();\n const selectCard = (value: BentoSelectionCardValue) => {\n selectedValue.value = value;\n };\n</script>\n"; const SelectionCardWithDynamicContentSlotExample = "<template>\n <bento-selection-card\n title=\"Card title\"\n value=\"value\"\n :model-value=\"selectedValue\"\n @update:model-value=\"selectCard\"\n >\n <template #dynamicContent>I'm a content slot that will only show when the card is selected!</template>\n </bento-selection-card>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import {\n BentoSelectionCard,\n type BentoSelectionCardModelValue,\n type BentoSelectionCardValue,\n } from '@adyen/bento-vue2';\n\n const selectedValue = ref<BentoSelectionCardModelValue>();\n const selectCard = (value: BentoSelectionCardValue) => {\n selectedValue.value = value;\n };\n</script>\n"; const SelectionCardWithIconExample = "<template>\n <bento-selection-card\n title=\"Card title\"\n value=\"value\"\n :model-value=\"selectedValue\"\n @update:model-value=\"selectCard\"\n >\n <template #icon>\n <emoticon-happy-icon />\n </template>\n </bento-selection-card>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import {\n BentoSelectionCard,\n type BentoSelectionCardModelValue,\n type BentoSelectionCardValue,\n } from '@adyen/bento-vue2';\n import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy';\n\n const selectedValue = ref<BentoSelectionCardModelValue>();\n const selectCard = (value: BentoSelectionCardValue) => {\n selectedValue.value = value;\n };\n</script>\n"; import type { Meta, StoryObj } from '@storybook/vue'; import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy'; const meta: Meta = { title: 'Selection Card', component: BentoSelectionCard, }; export default meta; type Story = StoryObj<typeof BentoSelectionCard>; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCard }, props: Object.keys(argTypes), template: ` <bento-selection-card v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction" /> `, setup(props) { const selectedValue = ref(undefined); const clickedAction = value => { selectedValue.value = value; action('input')(value); action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, // Events clickedAction, }; }, }), args: { title: 'Card title', value: 'value', }, parameters: storybookDocsParameter(SelectionCardDefaultExample), }; export const WithIcon: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCard, EmoticonHappyIcon }, props: Object.keys(argTypes), template: ` <bento-selection-card v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction" > <template #icon> <emoticon-happy-icon /> </template> </bento-selection-card> `, setup(props) { const selectedValue = ref(undefined); const clickedAction = value => { selectedValue.value = value; action('input')(value); action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, // Events clickedAction, }; }, }), args: { title: 'Card title', value: 'value', }, parameters: storybookDocsParameter(SelectionCardWithIconExample), }; export const WithContentSlot: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCard }, props: Object.keys(argTypes), template: ` <bento-selection-card v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction" > <template #content> I'm a content slot that can be replaced with any content! </template> </bento-selection-card> `, setup(props) { const selectedValue = ref(undefined); const clickedAction = value => { selectedValue.value = value; action('input')(value); action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, // Events clickedAction, }; }, }), args: { title: 'Card title', value: 'value', }, parameters: storybookDocsParameter(SelectionCardWithContentSlotExample), }; export const WithDynamicContentSlot: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCard }, props: Object.keys(argTypes), template: ` <bento-selection-card v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction" > <template #dynamicContent> I'm a content slot that will only show when the card is selected! </template> </bento-selection-card> `, setup(props) { const selectedValue = ref(undefined); const clickedAction = value => { selectedValue.value = value; action('input')(value); action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, // Events clickedAction, }; }, }), args: { title: 'Card title', value: 'value', }, parameters: storybookDocsParameter(SelectionCardWithDynamicContentSlotExample), }; export const EverythingBagel: Story = { render: (_args, { argTypes }) => ({ components: { BentoSelectionCard, EmoticonHappyIcon }, props: Object.keys(argTypes), template: ` <bento-selection-card v-bind="args" :model-value="selectedValue" @update:model-value="clickedAction" > <template #icon> <emoticon-happy-icon /> </template> <template #content> I'm a content slot that can be replaced with any content! </template> <template #dynamicContent> I'm a content slot that will only show when the card is selected! </template> </bento-selection-card> `, setup(props) { const selectedValue = ref(undefined); const clickedAction = value => { selectedValue.value = value; action('input')(value); action('update:model-value')(value); }; return { // Values args: isVue2 ? props : _args, selectedValue, // Events clickedAction, }; }, }), args: { title: 'Card title', description: 'Description', subtitle: 'Subtitle', value: 'value', }, parameters: storybookDocsParameter(SelectionCardEverythingBagelExample), }; 

package/dist/assets/components/selection-card/selection-card.types.ts

@@ -1 +1 @@
-import { type RadioInputValue } from '@/components/internal/radio-input'; import { type BentoCheckboxType } from '../checkbox/checkbox.types'; import { type VueNodeElement } from '@/types/elements'; export enum BentoSelectionCardState { DISABLED = 'disabled', READONLY = 'readonly', ERROR = 'error', } export type BentoSelectionCardValue = string | number; export type BentoSelectionCardModelValue = BentoCheckboxType | RadioInputValue; export interface BentoSelectionCardItem { content?: string | object; description?: string; disabled?: boolean; dynamicContent?: string | object; fullyClickable?: boolean; hasError?: boolean; icon?: VueNodeElement; readonly?: boolean; subtitle?: string; title: string; value: BentoSelectionCardValue; } 
+import { type RadioInputValue } from '@/components/internal/radio-input'; import { type BentoCheckboxType } from '@/types/checkbox'; import { type VueNodeElement } from '@/types/elements'; export enum BentoSelectionCardState { DISABLED = 'disabled', READONLY = 'readonly', ERROR = 'error', } export type BentoSelectionCardValue = string | number; export type BentoSelectionCardModelValue = BentoCheckboxType | RadioInputValue; export interface BentoSelectionCardItem { content?: string | object; description?: string; disabled?: boolean; dynamicContent?: string | object; fullyClickable?: boolean; hasError?: boolean; icon?: VueNodeElement; readonly?: boolean; subtitle?: string; title: string; value: BentoSelectionCardValue; } 

package/dist/assets/components/selection-card/selection-card.vue

@@ -1 +1 @@
-<template> <div class="b-selection-card" :class="conditionalClasses" @click="handleCardClick"> <div class="b-selection-card__container" :class="containerConditionalClasses"> <div class="b-selection-card__checkbox-container" :class="checkboxContainerConditionalClasses"> <div class="b-selection-card__checkbox-container-text" :class="checkboxContainerTextConditionalClasses"> <div v-if="hasSlot('icon')" class="b-selection-card__icon" role="presentation" aria-hidden="true"> <slot name="icon" /> </div> <label :for="inputId" class="b-selection-card__text" @click.stop.prevent="handleCardClick"> <bento-typography v-if="subtitle" class="b-selection-card__description" el="span" variant="caption" > {{ subtitle }} </bento-typography> <bento-typography el="span" variant="title">{{ title }}</bento-typography> <bento-typography v-if="description" id="descriptionId" class="b-selection-card__description" el="span" variant="body" > {{ description }} </bento-typography> </label> </div> <radio-input v-if="isRadioInput" :id="inputId" ref="inputRef" :aria-label="ariaLabel" :aria-describedby="description ? descriptionId : undefined" :disabled="disabled" :has-error="hasError" :aria-readonly="readonly ?? undefined" :value="value" :readonly="readonly" :model-value="computedRadioInputModelValue" /> <checkbox-input v-else :id="inputId" ref="inputRef" :aria-label="ariaLabel" :aria-describedby="description ? descriptionId : undefined" :disabled="disabled" :has-error="hasError" :aria-readonly="readonly ?? undefined" :value="value" :readonly="readonly" :model-value="computedCheckboxInputModelValue" /> </div> <bento-typography v-if="hasSlot('content')" ref="slotRef" el="div" class="b-selection-card__slot" :class="slotConditionalClasses" > <slot name="content" /> </bento-typography> <bento-typography v-if="hasSlot('dynamicContent') && isChecked" ref="dynamicSlotRef" el="div" class="b-selection-card__slot" :class="slotConditionalClasses" > <slot name="dynamicContent" /> </bento-typography> </div> </div> </template> <script setup lang="ts"> import { BentoTypography } from '@/components/typography'; import { type BentoCheckboxType, type BentoMultiCheckboxType, CheckboxInput } from '../internal/checkbox-input'; import { RadioInput, type RadioInputValue } from '../internal/radio-input'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { generateUid } from '@/core/utils/ts'; import { computed, type ComputedRef, inject, type PropType, type Ref, ref, useSlots } from 'vue'; import { useHasSlot } from '@/composables'; import type { BentoSelectionCardModelValue, BentoSelectionCardValue } from './selection-card.types'; import { BentoSelectionCardState } from './selection-card.types'; import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from './selection-card.keys'; const props = defineProps({ /** * The description of the selection card */ description: { type: String, default: undefined, }, /** * Disables the selection card */ disabled: { type: Boolean, default: false }, /** * Makes the entire selection card clickable. Clicking over interactive elements inside the card with this prop enabled will not be possible. */ fullyClickable: { type: Boolean, default: false }, /** * Shows the selection card in error state */ hasError: { type: Boolean, default: false }, /** * This property should not be used directly. * It will be used by v-model directive on selection card component. * * When handling a single input, use a string or a number. * * When handling multiple inputs, use an array of keys. * These keys exist as a set "value" prop for each input. */ modelValue: { type: [Boolean, String, Array] as PropType<BentoSelectionCardModelValue>, default: null, }, /** * Sets the selection card to readonly */ readonly: { type: Boolean, default: false }, /** * The subtitle of the selection card */ subtitle: { type: String, default: undefined, }, /** * The title of the selection card */ title: { type: String, required: true, }, /** * Indicates the value of the input that will be returned when it's checked. */ value: { type: [String, Number] as PropType<BentoSelectionCardValue>, required: true, }, }); const emit = defineEmits<{ /** * Emitted when the selection card is clicked. Enables Vue2 "v-model" */ (e: 'input', value: BentoSelectionCardValue); /** * Emitted when the selection card is clicked. Enables Vue3 "v-model" */ (e: 'update:model-value', value: BentoSelectionCardValue); }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const inputId = generateUid('selection-card-input-id'); const descriptionId = generateUid('selection-card-description'); const computedRadioInputModelValue: ComputedRef<RadioInputValue> = computed( () => props.modelValue as RadioInputValue ); const computedCheckboxInputModelValue: ComputedRef<BentoCheckboxType> = computed( () => props.modelValue as BentoCheckboxType ); const conditionalClasses = computed(() => ({ 'b-selection-card--checked': isChecked.value, 'b-selection-card--fully-clickable': props.fullyClickable, })); const containerConditionalClasses = computed(() => ({ [`b-selection-card--${BentoSelectionCardState.DISABLED}`]: props.disabled, [`b-selection-card--${BentoSelectionCardState.ERROR}`]: props.hasError, [`b-selection-card--${BentoSelectionCardState.READONLY}`]: props.readonly, 'b-selection-card--center-aligned': isTitleOnly.value, })); const checkboxContainerConditionalClasses = computed(() => ({ 'b-selection-card__checkbox-container--center-aligned': isTitleOnly.value, })); const checkboxContainerTextConditionalClasses = computed(() => ({ 'b-selection-card__checkbox-container-text--center-aligned': isTitleOnly.value, })); const slotConditionalClasses = computed(() => ({ 'b-selection-card__slot--with-icon': hasSlot('icon'), })); const ariaLabel = useAriaLabel({ ariaLabel: props.title, label: props.value as string, }); const isCheckboxGroup = computed(() => Array.isArray(props.modelValue)); const isChecked: ComputedRef<boolean> = computed(() => { if (isRadioInput.value) { return props.value === props.modelValue; } if (!isCheckboxGroup.value) { return props.modelValue as boolean; } return (props.modelValue as BentoMultiCheckboxType).some(item => item === props.value); }); const isRadioInput: Ref<boolean> = inject(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, ref(false)); const isTitleOnly = computed(() => !props.subtitle && !props.description); const inputRef = ref<InstanceType<typeof RadioInput> | InstanceType<typeof CheckboxInput>>(null); const slotRef = ref(null); const dynamicSlotRef = ref(null); // Handle click on the whole card area const handleCardClick = (event: Event) => { if (inputRef.value.$refs.inputRef === event.target) { const newValue = toggleInput(); onChange(newValue); return; } // Do nothing if disabled or readonly if (props.disabled && props.readonly) { return; } // If it's not fully clickable prevent selecting the card if the click // originated in a slot if (!props.fullyClickable) { // Check if the click originated from the slot - in that case, do nothng if (slotRef.value && slotRef.value?.$el?.contains(event.target)) { return; } // Check if the click originated from the dynamic slot - in that case, do nothng if (dynamicSlotRef.value && dynamicSlotRef.value?.$el?.contains(event.target)) { return; } // Check if the click originated from the input - in that case do nothing, as the input will emit the event already if (inputRef.value && inputRef.value?.$el?.contains(event.target as Node)) { return; } } // If the click originated outside of these two areas, emit the change event const newValue = toggleInput(); onChange(newValue); }; const toggleInput = (): BentoSelectionCardModelValue => { const currentValue: boolean = (inputRef.value?.$refs.inputRef as HTMLInputElement).checked; if (isCheckboxGroup.value) { const newCheckedList = [...(props.modelValue as BentoMultiCheckboxType)]; const index = newCheckedList.indexOf(props.value); if (index === -1) { newCheckedList.push(props.value); } else { newCheckedList.splice(index, 1); } return newCheckedList; } if (isRadioInput.value) { return props.value; } return currentValue; }; const onChange = newValue => { if (!props.disabled && !props.readonly) { emit('update:model-value', newValue); emit('input', newValue); } }; </script> <script lang="ts"> /** * Selection card component. If used standalone, only the checkbox variant can be used. If the checkbox variant is needed, please use the bento-selection-card-group component. * * @example * import { BentoSelectionCard } from '@adyen/bento-vue2'; * import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy'; * * export default { * components: { BentoSelectionCard, EmoticonHappyIcon }, * template: ` * <bento-selection-card title="Card title" :model-value.sync="yourModelValue"> * <template #icon> * <emoticon-happy-icon /> * </template> * </bento-selection-card> * ` * } */ export default { name: 'bento-selection-card', }; </script> <style lang="scss" scoped src="./selection-card.scss" /> 
+<template> <div class="b-selection-card" :class="conditionalClasses" @click="handleCardClick"> <div class="b-selection-card__container" :class="containerConditionalClasses"> <div class="b-selection-card__checkbox-container" :class="checkboxContainerConditionalClasses"> <div class="b-selection-card__checkbox-container-text" :class="checkboxContainerTextConditionalClasses"> <div v-if="hasSlot('icon')" class="b-selection-card__icon" role="presentation" aria-hidden="true"> <slot name="icon" /> </div> <label :for="inputId" class="b-selection-card__text" @click.stop.prevent="handleCardClick"> <bento-typography v-if="subtitle" class="b-selection-card__description" el="span" variant="caption" > {{ subtitle }} </bento-typography> <bento-typography el="span" variant="title">{{ title }}</bento-typography> <bento-typography v-if="description" id="descriptionId" class="b-selection-card__description" el="span" variant="body" > {{ description }} </bento-typography> </label> </div> <radio-input v-if="isRadioInput" :id="inputId" ref="inputRef" :aria-label="ariaLabel" :aria-describedby="description ? descriptionId : undefined" :disabled="disabled" :has-error="hasError" :aria-readonly="readonly ?? undefined" :value="value" :readonly="readonly" :model-value="computedRadioInputModelValue" /> <checkbox-input v-else :id="inputId" ref="inputRef" :aria-label="ariaLabel" :aria-describedby="description ? descriptionId : undefined" :disabled="disabled" :has-error="hasError" :aria-readonly="readonly ?? undefined" :value="value" :readonly="readonly" :model-value="computedCheckboxInputModelValue" /> </div> <bento-typography v-if="hasSlot('content')" ref="slotRef" el="div" class="b-selection-card__slot" :class="slotConditionalClasses" > <slot name="content" /> </bento-typography> <bento-typography v-if="hasSlot('dynamicContent') && isChecked" ref="dynamicSlotRef" el="div" class="b-selection-card__slot" :class="slotConditionalClasses" > <slot name="dynamicContent" /> </bento-typography> </div> </div> </template> <script setup lang="ts"> import { BentoTypography } from '@/components/typography'; import { CheckboxInput } from '../internal/checkbox-input'; import { RadioInput, type RadioInputValue } from '../internal/radio-input'; import { type BentoCheckboxType, type BentoMultiCheckboxType } from '@/types/checkbox'; import { useAriaLabel } from '@/utils/ts/aria-label'; import { generateUid } from '@/utils/ts/generate-uid'; import { computed, type ComputedRef, inject, type PropType, type Ref, ref, useSlots } from 'vue'; import { useHasSlot } from '@/composables'; import type { BentoSelectionCardModelValue, BentoSelectionCardValue } from './selection-card.types'; import { BentoSelectionCardState } from './selection-card.types'; import { SELECTION_CARD_RADIO_INPUT_INJECTION_KEY } from './selection-card.keys'; const props = defineProps({ /** * The description of the selection card */ description: { type: String, default: undefined, }, /** * Disables the selection card */ disabled: { type: Boolean, default: false }, /** * Makes the entire selection card clickable. Clicking over interactive elements inside the card with this prop enabled will not be possible. */ fullyClickable: { type: Boolean, default: false }, /** * Shows the selection card in error state */ hasError: { type: Boolean, default: false }, /** * This property should not be used directly. * It will be used by v-model directive on selection card component. * * When handling a single input, use a string or a number. * * When handling multiple inputs, use an array of keys. * These keys exist as a set "value" prop for each input. */ modelValue: { type: [Boolean, String, Array] as PropType<BentoSelectionCardModelValue>, default: null, }, /** * Sets the selection card to readonly */ readonly: { type: Boolean, default: false }, /** * The subtitle of the selection card */ subtitle: { type: String, default: undefined, }, /** * The title of the selection card */ title: { type: String, required: true, }, /** * Indicates the value of the input that will be returned when it's checked. */ value: { type: [String, Number] as PropType<BentoSelectionCardValue>, required: true, }, }); const emit = defineEmits<{ /** * Emitted when the selection card is clicked. Enables Vue2 "v-model" */ (e: 'input', value: BentoSelectionCardValue); /** * Emitted when the selection card is clicked. Enables Vue3 "v-model" */ (e: 'update:model-value', value: BentoSelectionCardValue); }>(); const slots = useSlots(); const hasSlot = useHasSlot(slots); const inputId = generateUid('selection-card-input-id'); const descriptionId = generateUid('selection-card-description'); const computedRadioInputModelValue: ComputedRef<RadioInputValue> = computed( () => props.modelValue as RadioInputValue ); const computedCheckboxInputModelValue: ComputedRef<BentoCheckboxType> = computed( () => props.modelValue as BentoCheckboxType ); const conditionalClasses = computed(() => ({ 'b-selection-card--checked': isChecked.value, 'b-selection-card--fully-clickable': props.fullyClickable, })); const containerConditionalClasses = computed(() => ({ [`b-selection-card--${BentoSelectionCardState.DISABLED}`]: props.disabled, [`b-selection-card--${BentoSelectionCardState.ERROR}`]: props.hasError, [`b-selection-card--${BentoSelectionCardState.READONLY}`]: props.readonly, 'b-selection-card--center-aligned': isTitleOnly.value, })); const checkboxContainerConditionalClasses = computed(() => ({ 'b-selection-card__checkbox-container--center-aligned': isTitleOnly.value, })); const checkboxContainerTextConditionalClasses = computed(() => ({ 'b-selection-card__checkbox-container-text--center-aligned': isTitleOnly.value, })); const slotConditionalClasses = computed(() => ({ 'b-selection-card__slot--with-icon': hasSlot('icon'), })); const ariaLabel = useAriaLabel({ ariaLabel: props.title, label: props.value as string, }); const isCheckboxGroup = computed(() => Array.isArray(props.modelValue)); const isChecked: ComputedRef<boolean> = computed(() => { if (isRadioInput.value) { return props.value === props.modelValue; } if (!isCheckboxGroup.value) { return props.modelValue as boolean; } return (props.modelValue as BentoMultiCheckboxType).some(item => item === props.value); }); const isRadioInput: Ref<boolean> = inject(SELECTION_CARD_RADIO_INPUT_INJECTION_KEY, ref(false)); const isTitleOnly = computed(() => !props.subtitle && !props.description); const inputRef = ref<InstanceType<typeof RadioInput> | InstanceType<typeof CheckboxInput>>(null); const slotRef = ref(null); const dynamicSlotRef = ref(null); // Handle click on the whole card area const handleCardClick = (event: Event) => { if (inputRef.value.$refs.inputRef === event.target) { const newValue = toggleInput(); onChange(newValue); return; } // Do nothing if disabled or readonly if (props.disabled && props.readonly) { return; } // If it's not fully clickable prevent selecting the card if the click // originated in a slot if (!props.fullyClickable) { // Check if the click originated from the slot - in that case, do nothng if (slotRef.value && slotRef.value?.$el?.contains(event.target)) { return; } // Check if the click originated from the dynamic slot - in that case, do nothng if (dynamicSlotRef.value && dynamicSlotRef.value?.$el?.contains(event.target)) { return; } // Check if the click originated from the input - in that case do nothing, as the input will emit the event already if (inputRef.value && inputRef.value?.$el?.contains(event.target as Node)) { return; } } // If the click originated outside of these two areas, emit the change event const newValue = toggleInput(); onChange(newValue); }; const toggleInput = (): BentoSelectionCardModelValue => { const currentValue: boolean = (inputRef.value?.$refs.inputRef as HTMLInputElement).checked; if (isCheckboxGroup.value) { const newCheckedList = [...(props.modelValue as BentoMultiCheckboxType)]; const index = newCheckedList.indexOf(props.value); if (index === -1) { newCheckedList.push(props.value); } else { newCheckedList.splice(index, 1); } return newCheckedList; } if (isRadioInput.value) { return props.value; } return currentValue; }; const onChange = newValue => { if (!props.disabled && !props.readonly) { emit('update:model-value', newValue); emit('input', newValue); } }; </script> <script lang="ts"> /** * Selection card component. If used standalone, only the checkbox variant can be used. If the checkbox variant is needed, please use the bento-selection-card-group component. * * @example * import { BentoSelectionCard } from '@adyen/bento-vue2'; * import EmoticonHappyIcon from '@adyen/ui-assets-icons-16/vue/emoticon-happy'; * * export default { * components: { BentoSelectionCard, EmoticonHappyIcon }, * template: ` * <bento-selection-card title="Card title" :model-value.sync="yourModelValue"> * <template #icon> * <emoticon-happy-icon /> * </template> * </bento-selection-card> * ` * } */ export default { name: 'bento-selection-card', }; </script> <style lang="scss" scoped src="./selection-card.scss" /> 

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

@@ -101,7 +101,7 @@ The `isDismissible` property determines whether the sidepanel can be closed by c
 To independently control the visibility of the close button while `isDismissible` is set, use the `hideCloseButton`
 property.
 
-**Upcoming in v2.0.0:** The appearance of the close button will no longer depend on the `isDismissible` property.
+**Upcoming in v3.0.0:** The appearance of the close button will no longer depend on the `isDismissible` property.
 Instead, you will have full control over its visibility using the `hideCloseButton` property. By default,
 `hideCloseButton` will be set to `false`, meaning the close button will be shown regardless of the value of
 `isDismissible`.

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

@@ -1 +1 @@
-import { ref, watch } from 'vue'; import { BentoButton } from '@/components/button'; import BentoSidepanel from './sidepanel.vue'; import BentoSidepanelPage from './components/sidepanel-page.vue'; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { action } from '@storybook/addon-actions'; import { type Meta, type StoryObj } from '@storybook/vue'; export default { title: 'Sidepanel', component: BentoSidepanel, argTypes: { default: { name: 'default', type: { name: 'string', required: false }, description: 'BentoSidepanelPage components', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, }, } as Meta; type Story = StoryObj<typeof BentoSidepanel>; const DEFAULT_PROPS = { isOpen: false, isDismissible: true, }; const onePageCode = ` <bento-sidepanel :is-open="isOpen" @update:is-open="isOpen = $event"> <bento-sidepanel-page title="One page" :actions="actionsArray"> This is the content of the sidepanel. </bento-sidepanel-page> </bento-sidepanel> `; export const OnePage: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoSidepanel, BentoSidepanelPage }, props: Object.keys(argTypes), template: ` <div> <bento-button :aria-expanded="isOpen" @click="isOpen = true" > Open sidepanel </bento-button> <bento-sidepanel v-bind="args" :is-open="isOpen" @update:is-open='isOpen = false'> <bento-sidepanel-page title="Intro">This is my only page</bento-sidepanel-page> </bento-sidepanel> </div> `, setup(props) { const isOpen = ref(false); const args = isVue2 ? props : _args; watch( () => args.isOpen, () => { isOpen.value = args.isOpen; } ); return { args, isOpen, }; }, }), args: { ...DEFAULT_PROPS }, parameters: storybookDocsParameter(onePageCode), }; const multiplePagesCode = ` <bento-sidepanel :is-open="isOpen" :active-page="activePage" @update:is-open="isOpen = $event" @update:active-page="activePage = $event" > <bento-sidepanel-page pageId="step1" title="Step 1" :actions="actionsArray" actions-label="Label"> This is the content of step 1 of the sidepanel. With an label next to the actions. </bento-sidepanel-page> <bento-sidepanel-page pageId="step2" title="Step 2" :actions="actionsArray"> This is the content of step 2 of the sidepanel. </bento-sidepanel-page> <bento-sidepanel-page pageId="step3" title="Step 3" :actions="actionsArray" destructive-actions> This is the content of step 3 of the sidepanel. With the primary action as a destructive action. </bento-sidepanel-page> <bento-sidepanel-page pageId="step4" title="Step 4" :actions="actionsArray" :previous-page="null"> This is the content of step 4 of the sidepanel. With no back arrow showing. </bento-sidepanel-page> </bento-sidepanel> `; export const MultiplePages: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoSidepanel, BentoSidepanelPage }, props: Object.keys(argTypes), template: ` <div> <bento-button :aria-expanded="isOpen" @click="isOpen = true" > Open sidepanel </bento-button> <bento-sidepanel v-bind="args" :is-open="isOpen" :active-page="activePage" @update:active-page="activePage = $event" @update:is-open='isOpen = $event'> <bento-sidepanel-page v-bind="intro"> <p style="margin-top: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </bento-sidepanel-page> <bento-sidepanel-page v-bind="newProfile" > This page has some info about creating a new profile </bento-sidepanel-page> <bento-sidepanel-page v-bind="editProfile" > This is where you edit your profile </bento-sidepanel-page> <bento-sidepanel-page v-bind="newProfileForm"> This is where you create a new profile </bento-sidepanel-page> <bento-sidepanel-page v-bind="success"> Your profile is created </bento-sidepanel-page> </bento-sidepanel> </div> `, setup(props) { const isOpen = ref(false); const activePage = ref('intro'); const args = isVue2 ? props : _args; watch( () => args.isOpen, () => { isOpen.value = args.isOpen; } ); watch( () => args.activePage, () => { activePage.value = args.activePage; } ); const intro = { pageId: 'intro', title: 'Intro', actions: [ { title: 'New profile', event: () => { activePage.value = 'newProfile'; }, }, { title: 'Edit profile', event: () => { activePage.value = 'editProfile'; }, }, ], actionsLabel: 'What do you wanna do?', }; const newProfile = { pageId: 'newProfile', title: 'New profile', actions: [ { title: 'Go to form', event: () => { activePage.value = 'newProfileForm'; }, }, ], }; const editProfile = { pageId: 'editProfile', title: 'Edit profile', actions: [ { title: 'Save', event: () => { activePage.value = 'success'; }, }, { title: 'Cancel', event: () => { isOpen.value = false; action('cancel')(); }, }, ], }; const newProfileForm = { pageId: 'newProfileForm', title: 'New profile form', actions: [ { title: 'Save', event: () => { activePage.value = 'success'; }, }, { title: 'Cancel', event: () => { isOpen.value = false; action('cancel')(); }, }, ], }; const success = { pageId: 'success', title: 'Success!', destructiveActions: true, actions: [ { title: 'Delete', event: () => { isOpen.value = false; action('delete')(); }, }, { title: 'Cancel', event: () => { isOpen.value = false; action('cancel')(); }, }, ], previousPage: null, }; return { args, activePage, intro, newProfile, newProfileForm, success, editProfile, isOpen, }; }, }), args: { ...DEFAULT_PROPS, activePage: 'intro' }, parameters: storybookDocsParameter(multiplePagesCode), }; 
+import { ref, watch } from 'vue'; import { BentoButton } from '@/components/button'; import BentoSidepanel from './sidepanel.vue'; import BentoSidepanelPage from './components/sidepanel-page.vue'; const SidepanelMultiplePagesExample = "<template>\n <div>\n <bento-button :aria-expanded=\"isOpen\" @click=\"isOpen = true\">Open sidepanel</bento-button>\n <bento-sidepanel\n :is-open=\"isOpen\"\n is-dismissible\n :active-page=\"activePage\"\n @update:active-page=\"activePage = $event\"\n @update:is-open=\"isOpen = $event\"\n >\n <bento-sidepanel-page v-bind=\"intro\">\n <p style=\"margin-top: 0\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore\n et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\n culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore\n et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\n culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore\n et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\n culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore\n et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\n culpa qui officia deserunt mollit anim id est laborum.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore\n et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut\n aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in\n culpa qui officia deserunt mollit anim id est laborum.\n </p>\n </bento-sidepanel-page>\n <bento-sidepanel-page v-bind=\"newProfile\">\n This page has some info about creating a new profile\n </bento-sidepanel-page>\n <bento-sidepanel-page v-bind=\"editProfile\">This is where you edit your profile</bento-sidepanel-page>\n <bento-sidepanel-page v-bind=\"newProfileForm\">This is where you create a new profile</bento-sidepanel-page>\n <bento-sidepanel-page v-bind=\"success\">Your profile is created</bento-sidepanel-page>\n </bento-sidepanel>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoButton, type BentoButtonActionsList, BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n\n const isOpen = ref(false);\n const activePage = ref('intro');\n\n const intro = {\n pageId: 'intro',\n title: 'Intro',\n actions: [\n {\n title: 'New profile',\n event: () => {\n activePage.value = 'newProfile';\n },\n },\n {\n title: 'Edit profile',\n event: () => {\n activePage.value = 'editProfile';\n },\n },\n ] as BentoButtonActionsList,\n actionsLabel: 'What do you wanna do?',\n };\n\n const newProfile = {\n pageId: 'newProfile',\n title: 'New profile',\n actions: [\n {\n title: 'Go to form',\n event: () => {\n activePage.value = 'newProfileForm';\n },\n },\n ] as BentoButtonActionsList,\n };\n\n const editProfile = {\n pageId: 'editProfile',\n title: 'Edit profile',\n actions: [\n {\n title: 'Save',\n event: () => {\n activePage.value = 'success';\n },\n },\n {\n title: 'Cancel',\n event: () => {\n isOpen.value = false;\n },\n },\n ] as BentoButtonActionsList,\n };\n\n const newProfileForm = {\n pageId: 'newProfileForm',\n title: 'New profile form',\n actions: [\n {\n title: 'Save',\n event: () => {\n activePage.value = 'success';\n },\n },\n {\n title: 'Cancel',\n event: () => {\n isOpen.value = false;\n },\n },\n ] as BentoButtonActionsList,\n };\n\n const success = {\n pageId: 'success',\n title: 'Success!',\n destructiveActions: true,\n actions: [\n {\n title: 'Delete',\n event: () => {\n isOpen.value = false;\n },\n },\n {\n title: 'Cancel',\n event: () => {\n isOpen.value = false;\n },\n },\n ] as BentoButtonActionsList,\n previousPage: null,\n };\n</script>\n"; const SidepanelOnePageExample = "<template>\n <div>\n <bento-button :aria-expanded=\"isOpen\" @click=\"isOpen = true\">Open sidepanel</bento-button>\n <bento-sidepanel :is-open=\"isOpen\" is-dismissible @update:is-open=\"isOpen = $event\">\n <bento-sidepanel-page title=\"Intro\">This is my only page</bento-sidepanel-page>\n </bento-sidepanel>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoButton, BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2';\n\n const isOpen = ref(false);\n</script>\n"; import { isVue2 } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { action } from '@storybook/addon-actions'; import { type Meta, type StoryObj } from '@storybook/vue'; export default { title: 'Sidepanel', component: BentoSidepanel, argTypes: { default: { name: 'default', type: { name: 'string', required: false }, description: 'BentoSidepanelPage components', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, }, } as Meta; type Story = StoryObj<typeof BentoSidepanel>; const DEFAULT_PROPS = { isOpen: false, isDismissible: true, }; export const OnePage: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoSidepanel, BentoSidepanelPage }, props: Object.keys(argTypes), template: ` <div> <bento-button :aria-expanded="isOpen" @click="isOpen = true" > Open sidepanel </bento-button> <bento-sidepanel v-bind="args" :is-open="isOpen" @update:is-open='isOpen = false'> <bento-sidepanel-page title="Intro">This is my only page</bento-sidepanel-page> </bento-sidepanel> </div> `, setup(props) { const isOpen = ref(false); const args = isVue2 ? props : _args; watch( () => args.isOpen, () => { isOpen.value = args.isOpen; } ); return { args, isOpen, }; }, }), args: { ...DEFAULT_PROPS }, parameters: storybookDocsParameter(SidepanelOnePageExample), }; export const MultiplePages: Story = { render: (_args, { argTypes }) => ({ components: { BentoButton, BentoSidepanel, BentoSidepanelPage }, props: Object.keys(argTypes), template: ` <div> <bento-button :aria-expanded="isOpen" @click="isOpen = true" > Open sidepanel </bento-button> <bento-sidepanel v-bind="args" :is-open="isOpen" :active-page="activePage" @update:active-page="activePage = $event" @update:is-open='isOpen = $event'> <bento-sidepanel-page v-bind="intro"> <p style="margin-top: 0;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </bento-sidepanel-page> <bento-sidepanel-page v-bind="newProfile" > This page has some info about creating a new profile </bento-sidepanel-page> <bento-sidepanel-page v-bind="editProfile" > This is where you edit your profile </bento-sidepanel-page> <bento-sidepanel-page v-bind="newProfileForm"> This is where you create a new profile </bento-sidepanel-page> <bento-sidepanel-page v-bind="success"> Your profile is created </bento-sidepanel-page> </bento-sidepanel> </div> `, setup(props) { const isOpen = ref(false); const activePage = ref('intro'); const args = isVue2 ? props : _args; watch( () => args.isOpen, () => { isOpen.value = args.isOpen; } ); watch( () => args.activePage, () => { activePage.value = args.activePage; } ); const intro = { pageId: 'intro', title: 'Intro', actions: [ { title: 'New profile', event: () => { activePage.value = 'newProfile'; }, }, { title: 'Edit profile', event: () => { activePage.value = 'editProfile'; }, }, ], actionsLabel: 'What do you wanna do?', }; const newProfile = { pageId: 'newProfile', title: 'New profile', actions: [ { title: 'Go to form', event: () => { activePage.value = 'newProfileForm'; }, }, ], }; const editProfile = { pageId: 'editProfile', title: 'Edit profile', actions: [ { title: 'Save', event: () => { activePage.value = 'success'; }, }, { title: 'Cancel', event: () => { isOpen.value = false; action('cancel')(); }, }, ], }; const newProfileForm = { pageId: 'newProfileForm', title: 'New profile form', actions: [ { title: 'Save', event: () => { activePage.value = 'success'; }, }, { title: 'Cancel', event: () => { isOpen.value = false; action('cancel')(); }, }, ], }; const success = { pageId: 'success', title: 'Success!', destructiveActions: true, actions: [ { title: 'Delete', event: () => { isOpen.value = false; action('delete')(); }, }, { title: 'Cancel', event: () => { isOpen.value = false; action('cancel')(); }, }, ], previousPage: null, }; return { args, activePage, intro, newProfile, newProfileForm, success, editProfile, isOpen, }; }, }), args: { ...DEFAULT_PROPS, activePage: 'intro' }, parameters: storybookDocsParameter(SidepanelMultiplePagesExample), }; 

package/dist/assets/components/sidepanel/sidepanel.vue

@@ -1 +1 @@
-<template> <dialog ref="sidepanel" class="b-sidepanel" :class="conditionalClasses" @animationend="closeSidepanelAfterAnimation" @keydown.esc.prevent="isDismissible && startCloseSidepanelAnimation" > <bento-focus-trap :id="sidepanelId" v-bento-click-outside-directive="closeSidepanelOnClickOutside"> <div v-if="!computedHideCloseButton" class="b-sidepanel__close-button"> <bento-button variant="tertiary" @click="startCloseSidepanelAnimation"> <cross-icon :svg-title="t('close')" /> </bento-button> </div> <slot /> </bento-focus-trap> </dialog> </template> <script setup lang="ts"> import { computed, onMounted, onUnmounted, provide, ref, toRefs, watch } from 'vue'; import { BentoButton } from '@/components/button'; import { BentoFocusTrap } from '@/components/focus-trap'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import { BentoSidepanelEvent } from './sidepanel.types'; import { BentoDialogPageAnimation, type BentoDialogPageConfigData, type BentoDialogPageRegisterPage, DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, } from '@/internal'; import { SIDEPANEL_DIALOG_ID_INJECTION_KEY } from './sidepanel.keys'; import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside'; import { useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; import { generateUid } from '@/core/utils/ts'; import { deprecate } from '@/utils/ts/deprecate'; type MessageSchema = (typeof messages)['en-US']; const props = defineProps({ /** * The id of the current active page * Should be the same id as the BentoSidepanelPage to be displayed * If the component only has one page, it can be left null/undefined. */ activePage: { type: String, default: null, }, /** * If set to true, it allows the sidepanel to be closed. * Shows close button when `true` and hides close button when `false`. * * _Note: This property will not set the visibility of the close button in v2.0.0_ */ isDismissible: { type: Boolean, default: false, }, /** * Controls the sidepanel's state from the outside. Set it to true to open the sidepanel. */ isOpen: { type: Boolean, default: null, }, /** * Controls the visibility of close button on the sidepanel. * Defaults to `true` when `isDismissible=false`, and `true` when `isDimissible=true`. * * _Note: This property will be set to `false` by default, independent of `isDismissible` in v2.0.0_ */ hideCloseButton: { type: Boolean, default: null, }, }); const emit = defineEmits<{ /** * Emits update event when page is changed internally */ (e: BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page: string): void; /** * Emits close-sidepanel event when the sidepanel is closed */ (e: BentoSidepanelEvent.UPDATE_IS_OPEN, isOpen: boolean): void; }>(); // Refs const { activePage, isOpen } = toRefs(props); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const sidepanel = ref(null); const pages = ref<Array<string>>([]); const previousPages = ref([]); const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER); const isClosing = ref(false); const sidepanelId = generateUid('sidepanel'); const internalIsOpen = ref(false); const isAnimationActive = ref(false); const isMounted = ref(false); // Animation styling const conditionalClasses = computed(() => ({ 'b-sidepanel--hide': isClosing.value, 'b-sidepanel--animation': isAnimationActive.value, })); // Handle closing and closing animation for dialog element const closeSidepanelAfterAnimation = () => { if (isClosing.value && sidepanel.value) { sidepanel.value.close(); if (previousPages.value[0]) { emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, previousPages.value[0]); } previousPages.value = []; isClosing.value = false; internalIsOpen.value = false; emit(BentoSidepanelEvent.UPDATE_IS_OPEN, false); } }; const startCloseSidepanelAnimation = () => { if (!sidepanel.value || !sidepanel.value.open) { return; } isClosing.value = true; }; const closeSidepanelOnClickOutside = () => { if (props.isDismissible) { startCloseSidepanelAnimation(); } }; // TODO: Remove in upcoming major. See properties `hideCloseButton` and `isDismissible`. const computedHideCloseButton = computed(() => { if (props.hideCloseButton !== null) { return props.hideCloseButton; } return !props.isDismissible; }); onMounted(() => { isMounted.value = true; }); onUnmounted(() => { isMounted.value = false; }); // Watching isOpen prop to toggle open/close the dialog element watch( [() => isOpen.value, sidepanel], ([newIsOpen, newSidepanelValue]) => { if (!isMounted.value || !newSidepanelValue) { return; } if (newIsOpen) { internalIsOpen.value = true; if (!newSidepanelValue.open) { newSidepanelValue.showModal(); } if (!previousPages.value.length) { previousPages.value.push(activePage.value); } } else if (newSidepanelValue.open) { startCloseSidepanelAnimation(); } }, { immediate: true, flush: 'post' } ); // Pages const updatePage = page => emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page); // unregister page if removed / destroyed const unregisterPage = (pageIdToRemove: string) => () => { pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove); }; // Provide data and function to register page to subcomponent const registerPage: BentoDialogPageRegisterPage = pageId => { pages.value.push(pageId); return { unregisterPage: unregisterPage(pageId) }; }; provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, { activePage, animation, isAnimationActive, isOpen: internalIsOpen, pages, previousPages, updatePage, }); provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage); // Let's Children components know they are inside a SidePanel (dialog element) provide(SIDEPANEL_DIALOG_ID_INJECTION_KEY, sidepanelId); if (!props.isDismissible && props.hideCloseButton === null) { deprecate( 'BentoSidepanel "isDismissible" property’s behavior', 'BentoSidepanel "isDismissible" will no longer hide the close button. Use "hideCloseButton=true" instead.', '2.0.0' ); } </script> <script lang="ts"> /** * Sidepanel component is a slide-in panel that should be used for presenting actions, settings or features that are directly associated with a specific task or interaction on the main screen. * * @example * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2'; * * export default { * components: { BentoSidepanel, BentoSidepanelPage }, * template: ` * <bento-sidepanel active-page='step1' is-open='true'> * <bento-sidepanel-page * title='Step 1' * pageId='step1' * :actions="[ * { * title: 'Next step', * event: () => { * activePage.value = 'step2'; * }, * }]"> * Step 1 info * </bento-sidepanel-page> * <bento-sidepanel-page * title='Step 2' * pageId='step2' * :actions="[ * { * title: 'Save', * event: () => {}, * }]"> * Step 2 info * </bento-sidepanel-page> * </bento-sidepanel> * ` * } */ export default { i18n: { messages }, }; </script> <style lang="scss" scoped src="./sidepanel.scss" /> 
+<template> <dialog ref="sidepanel" class="b-sidepanel" :class="conditionalClasses" @animationend="closeSidepanelAfterAnimation" @keydown.esc.prevent="isDismissible && startCloseSidepanelAnimation" > <bento-focus-trap :id="sidepanelId" v-bento-click-outside-directive="closeSidepanelOnClickOutside"> <div v-if="!computedHideCloseButton" class="b-sidepanel__close-button"> <bento-button variant="tertiary" @click="startCloseSidepanelAnimation"> <cross-icon :svg-title="t('close')" /> </bento-button> </div> <slot /> </bento-focus-trap> </dialog> </template> <script setup lang="ts"> import { computed, onMounted, onUnmounted, provide, ref, toRefs, watch } from 'vue'; import { BentoButton } from '@/components/button'; import { BentoFocusTrap } from '@/components/focus-trap'; import CrossIcon from '@adyen/ui-assets-icons-16/vue/cross'; import { BentoSidepanelEvent } from './sidepanel.types'; import { BentoDialogPageAnimation, type BentoDialogPageConfigData, type BentoDialogPageRegisterPage, DIALOG_PAGE_CONFIG_INJECTION_KEY, DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, } from '@/internal'; import { SIDEPANEL_DIALOG_ID_INJECTION_KEY } from './sidepanel.keys'; import { BentoClickOutsideDirective as vBentoClickOutsideDirective } from '@/directives/click-outside'; import { useI18n } from '@/utils/ts/i18n'; import messages from './messages.json'; import { generateUid } from '@/utils/ts/generate-uid'; import { deprecate } from '@/utils/ts/deprecate'; type MessageSchema = (typeof messages)['en-US']; const props = defineProps({ /** * The id of the current active page * Should be the same id as the BentoSidepanelPage to be displayed * If the component only has one page, it can be left null/undefined. */ activePage: { type: String, default: null, }, /** * If set to true, it allows the sidepanel to be closed. * Shows close button when `true` and hides close button when `false`. * * _Note: This property will not set the visibility of the close button in v3.0.0_ */ isDismissible: { type: Boolean, default: false, }, /** * Controls the sidepanel's state from the outside. Set it to true to open the sidepanel. */ isOpen: { type: Boolean, default: null, }, /** * Controls the visibility of close button on the sidepanel. * Defaults to `true` when `isDismissible=false`, and `true` when `isDimissible=true`. * * _Note: This property will be set to `false` by default, independent of `isDismissible` in v3.0.0_ */ hideCloseButton: { type: Boolean, default: null, }, }); const emit = defineEmits<{ /** * Emits update event when page is changed internally */ (e: BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page: string): void; /** * Emits close-sidepanel event when the sidepanel is closed */ (e: BentoSidepanelEvent.UPDATE_IS_OPEN, isOpen: boolean): void; }>(); // Refs const { activePage, isOpen } = toRefs(props); const { t } = useI18n<{ message: MessageSchema }>({ messages }); const sidepanel = ref(null); const pages = ref<Array<string>>([]); const previousPages = ref([]); const animation = ref(BentoDialogPageAnimation.TRANSITION_LEVEL_DEEPER); const isClosing = ref(false); const sidepanelId = generateUid('sidepanel'); const internalIsOpen = ref(false); const isAnimationActive = ref(false); const isMounted = ref(false); // Animation styling const conditionalClasses = computed(() => ({ 'b-sidepanel--hide': isClosing.value, 'b-sidepanel--animation': isAnimationActive.value, })); // Handle closing and closing animation for dialog element const closeSidepanelAfterAnimation = () => { if (isClosing.value && sidepanel.value) { sidepanel.value.close(); if (previousPages.value[0]) { emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, previousPages.value[0]); } previousPages.value = []; isClosing.value = false; internalIsOpen.value = false; emit(BentoSidepanelEvent.UPDATE_IS_OPEN, false); } }; const startCloseSidepanelAnimation = () => { if (!sidepanel.value || !sidepanel.value.open) { return; } isClosing.value = true; }; const closeSidepanelOnClickOutside = () => { if (props.isDismissible) { startCloseSidepanelAnimation(); } }; // TODO: Remove in upcoming major. See properties `hideCloseButton` and `isDismissible`. const computedHideCloseButton = computed(() => { if (props.hideCloseButton !== null) { return props.hideCloseButton; } return !props.isDismissible; }); onMounted(() => { isMounted.value = true; }); onUnmounted(() => { isMounted.value = false; }); // Watching isOpen prop to toggle open/close the dialog element watch( [() => isOpen.value, sidepanel], ([newIsOpen, newSidepanelValue]) => { if (!isMounted.value || !newSidepanelValue) { return; } if (newIsOpen) { internalIsOpen.value = true; if (!newSidepanelValue.open) { newSidepanelValue.showModal(); } if (!previousPages.value.length) { previousPages.value.push(activePage.value); } } else if (newSidepanelValue.open) { startCloseSidepanelAnimation(); } }, { immediate: true, flush: 'post' } ); // Pages const updatePage = page => emit(BentoSidepanelEvent.UPDATE_ACTIVE_PAGE, page); // unregister page if removed / destroyed const unregisterPage = (pageIdToRemove: string) => () => { pages.value = pages.value?.filter(pageId => pageId !== pageIdToRemove); }; // Provide data and function to register page to subcomponent const registerPage: BentoDialogPageRegisterPage = pageId => { pages.value.push(pageId); return { unregisterPage: unregisterPage(pageId) }; }; provide<BentoDialogPageConfigData>(DIALOG_PAGE_CONFIG_INJECTION_KEY, { activePage, animation, isAnimationActive, isOpen: internalIsOpen, pages, previousPages, updatePage, }); provide(DIALOG_PAGE_REGISTER_PAGE_INJECTION_KEY, registerPage); // Let's Children components know they are inside a SidePanel (dialog element) provide(SIDEPANEL_DIALOG_ID_INJECTION_KEY, sidepanelId); if (!props.isDismissible && props.hideCloseButton === null) { deprecate( 'BentoSidepanel "isDismissible" property’s behavior', 'BentoSidepanel "isDismissible" will no longer hide the close button. Use "hideCloseButton=true" instead.', '3.0.0' ); } </script> <script lang="ts"> /** * Sidepanel component is a slide-in panel that should be used for presenting actions, settings or features that are directly associated with a specific task or interaction on the main screen. * * @example * import { BentoSidepanel, BentoSidepanelPage } from '@adyen/bento-vue2'; * * export default { * components: { BentoSidepanel, BentoSidepanelPage }, * template: ` * <bento-sidepanel active-page='step1' is-open='true'> * <bento-sidepanel-page * title='Step 1' * pageId='step1' * :actions="[ * { * title: 'Next step', * event: () => { * activePage.value = 'step2'; * }, * }]"> * Step 1 info * </bento-sidepanel-page> * <bento-sidepanel-page * title='Step 2' * pageId='step2' * :actions="[ * { * title: 'Save', * event: () => {}, * }]"> * Step 2 info * </bento-sidepanel-page> * </bento-sidepanel> * ` * } */ export default { i18n: { messages }, name: 'bento-sidepanel', }; </script> <style lang="scss" scoped src="./sidepanel.scss" /> 

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

@@ -1 +1 @@
-import { BentoStatusVariant } from './status.types'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { type Meta, type StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import BentoStatus from './status.vue'; const meta: Meta = { title: 'Status', component: BentoStatus, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'Default slot content', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, // Enum props variant: { options: Object.values(BentoStatusVariant), mapping: BentoStatusVariant, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoStatus>; const DEFAULT_TEXT = 'Status'; const defaultCode = ` <bento-status variant="grey"> ${DEFAULT_TEXT} </bento-status> `; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoStatus }, props: Object.keys(argTypes), template: ` <bento-status v-bind="args"> {{args.default}} </bento-status> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { default: DEFAULT_TEXT, variant: 'grey', }, parameters: storybookDocsParameter(defaultCode), }; 
+import { BentoStatusVariant } from './status.types'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { type Meta, type StoryObj } from '@storybook/vue'; import { isVue2 } from 'vue-demi'; import BentoStatus from './status.vue'; const StatusDefaultExample = "<template>\n <bento-status variant=\"grey\">Status</bento-status>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoStatus } from '@adyen/bento-vue2';\n</script>\n"; const meta: Meta = { title: 'Status', component: BentoStatus, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'Default slot content', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, // Enum props variant: { options: Object.values(BentoStatusVariant), mapping: BentoStatusVariant, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoStatus>; const DEFAULT_TEXT = 'Status'; export const Default: Story = { render: (_args, { argTypes }) => ({ components: { BentoStatus }, props: Object.keys(argTypes), template: ` <bento-status v-bind="args"> {{args.default}} </bento-status> `, setup(props) { return { args: isVue2 ? props : _args, }; }, }), args: { default: DEFAULT_TEXT, variant: 'grey', }, parameters: storybookDocsParameter(StatusDefaultExample), }; 

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

@@ -1 +1 @@
-/** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoStatusVariant { BLUE = 'blue', GREEN = 'green', GREY = 'grey', ORANGE = 'orange', RED = 'red', YELLOW = 'yellow', } export interface BentoStatusProps { /** * Defines the type and color of the Status */ variant: BentoStatusVariant | `${BentoStatusVariant}`; } 
+/** * @deprecated Since v3.0.0. Use string literal instead. */ export enum BentoStatusVariant { BLUE = 'blue', GREEN = 'green', GREY = 'grey', ORANGE = 'orange', RED = 'red', YELLOW = 'yellow', } export interface BentoStatusProps { /** * Defines the type and color of the Status */ variant: BentoStatusVariant | `${BentoStatusVariant}`; } 

package/dist/assets/components/stepper/components/step/step.vue

@@ -1 +1 @@
-<template> <li :class="conditionalClasses" class="b-step"> <base-button ref="buttonComponent" :aria-current="ariaCurrentValue" :aria-disabled="ariaDisabledValue" class="b-step__button" type="button" :tabindex="tabIndexValue" :disabled="isDisabled" @click="navigateToStep" @focus="isFocused = true" @blur="isFocused = false" > <template #iconLeft> <bento-typography el="span" variant="body" stronger class="b-step__index" aria-hidden="true"> <checkmark-small-icon v-if="isCompleted" /> <template v-else-if="!isSubstep">{{ index + 1 }}</template> <dot-icon v-else /> </bento-typography> </template> <bento-typography ref="stepContent" el="span" variant="body" :stronger="isActive" class="b-step__content"> <slot></slot> </bento-typography> </base-button> <ul v-show="isSubstepsVisible" ref="substepList" class="b-step__substep-list"> <slot name="substeps"></slot> </ul> </li> </template> <script setup lang="ts"> import { computed, inject, onBeforeUnmount, onMounted, provide, ref, useSlots, watch } from 'vue'; import { BaseButton } from '@/components/internal/base-button'; import { BentoTypography } from '@/components/typography'; import CheckmarkSmallIcon from '@adyen/ui-assets-icons-16/vue/checkmark-small'; import DotIcon from '@adyen/ui-assets-icons-16/vue/dot'; import { useStepRegister } from '../../composables'; import { STEPPER_STATE } from '../../stepper.keys'; import { type BentoStepperState, type BentoStepperStepExposeState, BentoStepperTypeOption, BentoStepperVariantOption, } from '../../stepper.types'; import { type Booleanish } from '@/types/prop-types'; const slots = useSlots(); const props = defineProps({ /** * Completed status. Used on non-linear steppers to indicate if the step is completed. */ completed: { type: Boolean, default: false, }, /** * Active substep index */ substepIndex: { type: Number, default: 0, }, }); const emit = defineEmits<{ /** * Event triggered when substep is updated by the parent step */ (e: 'update:substep-index', index: number): void; }>(); // Element refs const buttonComponent = ref<InstanceType<typeof BaseButton> | null>(null); const stepContent = ref<InstanceType<typeof BentoTypography> | null>(null); const substeps = ref<Array<BentoStepperStepExposeState>>([]); // Injects parent BentoStepper state data const stepper = inject<BentoStepperState>(STEPPER_STATE); const buttonElement = computed(() => buttonComponent.value?.$el as HTMLButtonElement); const index = computed(() => stepper?.value.steps.indexOf(buttonElement.value)); const stepContentValue = computed(() => stepContent.value?.$el.textContent); // Substep logic const substepsButtonElements = computed(() => substeps.value.map(({ buttonElement }) => buttonElement)); const activeSubStepIndex = ref(props.substepIndex); const latestActiveSubStepIndex = ref(activeSubStepIndex.value); const navigateToSubstep = (value: number) => { if (value > latestActiveSubStepIndex.value) { latestActiveSubStepIndex.value = value; } activeSubStepIndex.value = value; }; const { registerStep, removeStep } = useStepRegister(substeps); const stepState: BentoStepperState = ref({ activeStepIndex: activeSubStepIndex, latestActiveStep: latestActiveSubStepIndex, type: stepper.value.type, variant: stepper.value.variant, steps: substepsButtonElements, isParentStep: true, navigateToStep: navigateToSubstep, registerStep, removeStep, }); provide(STEPPER_STATE, stepState); watch(() => props.substepIndex, navigateToSubstep); watch(activeSubStepIndex, value => { emit('update:substep-index', value); }); onMounted(() => { if (!stepper) { throw new Error( 'BentoStep components should only be used inside BentoStepper or other BentoStep components.' ); } stepper.value.registerStep({ buttonElement, stepContent: stepContentValue, substeps, }); }); onBeforeUnmount(() => { stepper.value.removeStep({ buttonElement, stepContent: stepContentValue, substeps, }); }); // Step states const isSubstep = computed(() => stepper.value.isParentStep); const isFocused = ref(false); const isActive = computed(() => stepper?.value.activeStepIndex === index.value); const isSubstepsVisible = computed( () => isActive.value && stepper.value.variant !== BentoStepperVariantOption.HORIZONTAL && !isSubstep.value && slots.substeps ); const isCompleted = computed(() => { if (stepper?.value.type === BentoStepperTypeOption.NON_LINEAR) { return props.completed; } return stepper?.value.latestActiveStep > index.value; }); const isDisabled = computed( () => stepper?.value.type === BentoStepperTypeOption.LINEAR && index.value > stepper?.value.latestActiveStep ); const navigateToStep = () => { if (isDisabled.value) { return; } stepper.value.navigateToStep(index.value); }; // Styling and a11y const ariaCurrentValue = computed(() => (isActive.value ? 'step' : ('false' as Booleanish))); const ariaDisabledValue = computed(() => isDisabled.value.toString() as Booleanish); const tabIndexValue = computed(() => (isFocused.value || (index.value === 0 && !isSubstep.value) ? '0' : '-1')); const conditionalClasses = computed(() => ({ 'b-step--active': isActive.value, 'b-step--completed': isCompleted.value, 'b-step--substep': isSubstep.value, })); </script> <script lang="ts"> /** * Steps are components placed inside BentoSteppers to break down complex processes * * @example * import { BentoStep } from '@adyen/bento-vue2'; * * export default { * components: { BentoStep }, * template: ` * <bento-stepper> * <bento-step>Step 1</bento-step> * <bento-step> * Step 2 * <template #substeps> * <bento-step>Substep 1</bento-step> * <bento-step>Substep 2</bento-step> * </template> * </bento-step> * </bento-stepper> * ` * } */ export default { name: 'step', }; </script> <style lang="scss" scoped src="./step.scss" /> 
+<template> <li :class="conditionalClasses" class="b-step"> <base-button ref="buttonComponent" :aria-current="ariaCurrentValue" :aria-disabled="ariaDisabledValue" class="b-step__button" type="button" :tabindex="tabIndexValue" :disabled="isDisabled" @click="navigateToStep" @focus="isFocused = true" @blur="isFocused = false" > <template #iconLeft> <bento-typography el="span" variant="caption" stronger class="b-step__index" aria-hidden="true"> <checkmark-small-icon v-if="isCompleted" /> <template v-else-if="!isSubstep">{{ index + 1 }}</template> <dot-icon v-else /> </bento-typography> </template> <bento-typography ref="stepContent" el="span" variant="body" :stronger="isActive" class="b-step__content"> <slot></slot> </bento-typography> </base-button> <ul v-show="isSubstepsVisible" ref="substepList" class="b-step__substep-list"> <slot name="substeps"></slot> </ul> </li> </template> <script setup lang="ts"> import { computed, inject, onBeforeUnmount, onMounted, provide, ref, useSlots, watch } from 'vue'; import { BaseButton } from '@/components/internal/base-button'; import { BentoTypography } from '@/components/typography'; import CheckmarkSmallIcon from '@adyen/ui-assets-icons-16/vue/checkmark-small'; import DotIcon from '@adyen/ui-assets-icons-16/vue/dot'; import { useStepRegister } from '../../composables'; import { STEPPER_STATE } from '../../stepper.keys'; import { type BentoStepperState, type BentoStepperStepExposeState, BentoStepperTypeOption, BentoStepperVariantOption, } from '../../stepper.types'; import { type Booleanish } from '@/types/prop-types'; const slots = useSlots(); const props = defineProps({ /** * Completed status. Used on non-linear steppers to indicate if the step is completed. */ completed: { type: Boolean, default: false, }, /** * Active substep index */ substepIndex: { type: Number, default: 0, }, }); const emit = defineEmits<{ /** * Event triggered when substep is updated by the parent step */ (e: 'update:substep-index', index: number): void; }>(); // Element refs const buttonComponent = ref<InstanceType<typeof BaseButton> | null>(null); const stepContent = ref<InstanceType<typeof BentoTypography> | null>(null); const substeps = ref<Array<BentoStepperStepExposeState>>([]); // Injects parent BentoStepper state data const stepper = inject<BentoStepperState>(STEPPER_STATE); const buttonElement = computed(() => buttonComponent.value?.$el as HTMLButtonElement); const index = computed(() => stepper?.value.steps.indexOf(buttonElement.value)); const stepContentValue = computed(() => stepContent.value?.$el.textContent); // Substep logic const substepsButtonElements = computed(() => substeps.value.map(({ buttonElement }) => buttonElement)); const activeSubStepIndex = ref(props.substepIndex); const latestActiveSubStepIndex = ref(activeSubStepIndex.value); const navigateToSubstep = (value: number) => { if (value > latestActiveSubStepIndex.value) { latestActiveSubStepIndex.value = value; } activeSubStepIndex.value = value; }; const { registerStep, removeStep } = useStepRegister(substeps); const stepState: BentoStepperState = ref({ activeStepIndex: activeSubStepIndex, latestActiveStep: latestActiveSubStepIndex, type: stepper.value.type, variant: stepper.value.variant, steps: substepsButtonElements, isParentStep: true, navigateToStep: navigateToSubstep, registerStep, removeStep, }); provide(STEPPER_STATE, stepState); watch(() => props.substepIndex, navigateToSubstep); watch(activeSubStepIndex, value => { emit('update:substep-index', value); }); onMounted(() => { if (!stepper) { throw new Error( 'BentoStep components should only be used inside BentoStepper or other BentoStep components.' ); } stepper.value.registerStep({ buttonElement, stepContent: stepContentValue, substeps, }); }); onBeforeUnmount(() => { stepper.value.removeStep({ buttonElement, stepContent: stepContentValue, substeps, }); }); // Step states const isSubstep = computed(() => stepper.value.isParentStep); const isFocused = ref(false); const isActive = computed(() => stepper?.value.activeStepIndex === index.value); const isSubstepsVisible = computed( () => isActive.value && stepper.value.variant !== BentoStepperVariantOption.HORIZONTAL && !isSubstep.value && slots.substeps ); const isCompleted = computed(() => { if (stepper?.value.type === BentoStepperTypeOption.NON_LINEAR) { return props.completed; } return stepper?.value.latestActiveStep > index.value; }); const isDisabled = computed( () => stepper?.value.type === BentoStepperTypeOption.LINEAR && index.value > stepper?.value.latestActiveStep ); const navigateToStep = () => { if (isDisabled.value) { return; } stepper.value.navigateToStep(index.value); }; // Styling and a11y const ariaCurrentValue = computed(() => (isActive.value ? 'step' : ('false' as Booleanish))); const ariaDisabledValue = computed(() => isDisabled.value.toString() as Booleanish); const tabIndexValue = computed(() => (isFocused.value || (index.value === 0 && !isSubstep.value) ? '0' : '-1')); const conditionalClasses = computed(() => ({ 'b-step--active': isActive.value, 'b-step--completed': isCompleted.value, 'b-step--substep': isSubstep.value, })); </script> <script lang="ts"> /** * Steps are components placed inside BentoSteppers to break down complex processes * * @example * import { BentoStep } from '@adyen/bento-vue2'; * * export default { * components: { BentoStep }, * template: ` * <bento-stepper> * <bento-step>Step 1</bento-step> * <bento-step> * Step 2 * <template #substeps> * <bento-step>Substep 1</bento-step> * <bento-step>Substep 2</bento-step> * </template> * </bento-step> * </bento-stepper> * ` * } */ export default { name: 'step', }; </script> <style lang="scss" scoped src="./step.scss" /> 

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

@@ -1 +1 @@
-import BentoStepper from './stepper.vue'; import BentoStep from './components/step/step.vue'; import { BentoButton } from '@/components/button'; import { action } from '@storybook/addon-actions'; import { computed, isVue2, ref } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import { BentoStepperTypeOption, BentoStepperVariantOption } from './stepper.types'; import NonLinearStepperSource from './__tests__/non-linear-stepper-example.vue?raw'; import './stepper.stories.scss?module'; const meta: Meta = { title: 'Stepper', component: BentoStepper, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'BentoStep components', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, // Enum props type: { options: Object.values(BentoStepperTypeOption), mapping: BentoStepperTypeOption, control: { type: 'select', }, }, variant: { options: Object.values(BentoStepperVariantOption), mapping: BentoStepperVariantOption, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoStepper>; export const Default: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep }, props: Object.keys(argTypes), template: ` <bento-stepper v-bind="args" :key="JSON.stringify(args)" @update:index="updateIndex"> <bento-step>Step 1</bento-step> <bento-step>Step 2</bento-step> <bento-step>Step 3</bento-step> <bento-step>Step 4</bento-step> </bento-stepper> `, setup(props) { const updateIndex = (index: number) => action('update:index')(index); return { updateIndex, args: isVue2 ? props : _args, }; }, }; }, args: { index: 2, }, }; Default.parameters = storybookDocsParameter(` <bento-stepper :index="index" @update:index="index = $event"> <bento-step>Step 1</bento-step> <bento-step>Step 2</bento-step> <bento-step>Step 3</bento-step> <bento-step>Step 4</bento-step> </bento-stepper> <div role="status"> A dynamic content such as computed(() => steps[activeIndex]) is needed here in order for the section to be announced by the screen reader on step change </div> `); export const Substeps: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep }, props: Object.keys(argTypes), template: ` <bento-stepper :index="index" @update:index="index = $event"> <bento-step>Step 1</bento-step> <bento-step :substep-index="args.substepIndex" @update:substep-index="substepAction"> Step 2 <template #substeps> <bento-step>Substep 1</bento-step> <bento-step>Substep 2</bento-step> <bento-step>Substep 3</bento-step> </template> </bento-step> <bento-step>Step 3</bento-step> </bento-stepper> `, setup(props) { const updateIndex = (index: number) => action('update:index')(index); const substepAction = (index: number) => action('update:substep-index')(index); return { updateIndex, substepAction, args: isVue2 ? props : _args, }; }, }; }, args: { index: 1, substepIndex: 1, }, }; Substeps.parameters = storybookDocsParameter(` <bento-stepper :index="index" @update:index="index = $event"> <bento-step>Step 1</bento-step> <bento-step :substep-index="args.substepIndex" @update:substep-index="substepAction"> Step 2 <template #substeps> <bento-step>Substep 1</bento-step> <bento-step>Substep 2</bento-step> <bento-step>Substep 3</bento-step> </template> </bento-step> <bento-step>Step 3</bento-step> </bento-stepper> <div role="status"> A dynamic content such as computed(() => steps[activeIndex]) is needed here in order for the section to be announced by the screen reader on step change </div> `); export const ConditionalSteps: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep, BentoButton }, props: Object.keys(argTypes), template: ` <div class="b-stepper-story" :class="args.variant === 'horizontal' && 'b-stepper-story--horizontal'"> <bento-stepper v-bind="args" :key="JSON.stringify(args)" :style="stepperStyle" @update:index="updateIndex"> <bento-step v-for="(step, index) in steps" :key="step">{{ step }}</bento-step> </bento-stepper> <bento-button @click="toggleSteps">Toggle extra steps</bento-button> </div> `, setup(props) { const updateIndex = (index: number) => action('update:index')(index); const withMiddleSteps = ref(true); const steps = computed(() => [ 'General config', withMiddleSteps.value && 'Online settings', withMiddleSteps.value && 'Offline settings', 'Summary', withMiddleSteps.value && 'Extra: post config', ].filter(Boolean) ); const toggleSteps = () => { withMiddleSteps.value = !withMiddleSteps.value; }; const stepperStyle = computed(() => ({ width: props.variant === 'horizontal' ? 'unset' : '200px' })); return { updateIndex, args: isVue2 ? props : _args, withMiddleSteps, steps, toggleSteps, stepperStyle, }; }, }; }, args: { index: 1, }, }; ConditionalSteps.parameters = storybookDocsParameter(` <bento-stepper :index="index" @update:index="index = $event"> <bento-step v-for="step in steps" :key="step">{{ step }}</bento-step> </bento-stepper> <div role="status"> A dynamic content such as computed(() => steps[activeIndex]) is needed here in order for the section to be announced by the screen reader on step change </div> `); export const NonLinear: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep }, props: Object.keys(argTypes), template: ` <bento-stepper :index="activeStep" non-linear @update:index="index => setStep(index)" > <bento-step v-for="(step, index) in steps" :key="index" :completed="completedSteps[index]" > {{ step.title }} </bento-step> </bento-stepper> `, setup(props) { const steps = [{ title: 'Step 1' }, { title: 'Step 2' }, { title: 'Step 3' }, { title: 'Step 4' }]; const activeStep = ref(1); const completedSteps = ref<Record<number, boolean>>({ 0: true, }); const setStep = (index: number) => { action('update:index')(index); completedSteps.value[activeStep.value] = true; activeStep.value = index; }; return { args: isVue2 ? props : _args, steps, activeStep, completedSteps, setStep, }; }, }; }, args: { index: 1, nonLinear: true, }, parameters: storybookDocsParameter(NonLinearStepperSource), }; 
+import BentoStepper from './stepper.vue'; import BentoStep from './components/step/step.vue'; import { BentoButton } from '@/components/button'; import { action } from '@storybook/addon-actions'; import { computed, isVue2, ref } from 'vue-demi'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import type { Meta, StoryObj } from '@storybook/vue'; import { BentoStepperTypeOption, BentoStepperVariantOption } from './stepper.types'; const ConditionalStepsExample = "<template>\n <div>\n <bento-stepper :index=\"activeIndex\" @update:index=\"activeIndex = $event\">\n <bento-step v-for=\"step in steps\" :key=\"step\">{{ step }}</bento-step>\n </bento-stepper>\n <div role=\"status\">{{ steps[activeIndex] }}</div>\n <bento-button @click=\"withMiddleSteps = !withMiddleSteps\">Toggle extra steps</bento-button>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { computed, ref } from 'vue';\n import { BentoButton, BentoStep, BentoStepper } from '@adyen/bento-vue2';\n\n const activeIndex = ref(1);\n const withMiddleSteps = ref(true);\n const steps = computed(() => [\n 'General config',\n ...(withMiddleSteps.value ? ['Online settings', 'Offline settings'] : []),\n 'Summary',\n ...(withMiddleSteps.value ? ['Extra: post config'] : []),\n ]);\n</script>\n"; const DefaultStepperExample = "<template>\n <div>\n <bento-stepper :index=\"activeIndex\" @update:index=\"activeIndex = $event\">\n <bento-step>Step 1</bento-step>\n <bento-step>Step 2</bento-step>\n <bento-step>Step 3</bento-step>\n <bento-step>Step 4</bento-step>\n </bento-stepper>\n <div role=\"status\">{{ steps[activeIndex] }}</div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoStep, BentoStepper } from '@adyen/bento-vue2';\n\n const steps = ['Step 1', 'Step 2', 'Step 3', 'Step 4'];\n const activeIndex = ref(2);\n</script>\n"; const NonLinearStepperSource = "<template>\n <bento-stepper :index=\"activeStep\" type=\"non-linear\" @update:index=\"index => setStep(index)\">\n <bento-step v-for=\"(step, index) in steps\" :key=\"index\" :completed=\"completedSteps[index]\">\n {{ step.title }}\n </bento-step>\n </bento-stepper>\n</template>\n\n<script lang=\"ts\" setup>\n import { ref } from 'vue';\n import BentoStepper from '../stepper.vue';\n import BentoStep from '../components/step/step.vue';\n\n const steps = [{ title: 'Step 1' }, { title: 'Step 2' }, { title: 'Step 3' }, { title: 'Step 4' }];\n\n const activeStep = ref(1);\n const completedSteps = ref<Record<number, boolean>>({\n 0: true,\n });\n\n const setStep = (index: number) => {\n completedSteps.value[activeStep.value] = true;\n activeStep.value = index;\n };\n</script>\n"; const SubstepsStepperExample = "<template>\n <div>\n <bento-stepper :index=\"activeIndex\" @update:index=\"activeIndex = $event\">\n <bento-step>Step 1</bento-step>\n <bento-step :substep-index=\"substepIndex\" @update:substep-index=\"substepIndex = $event\">\n Step 2\n <template #substeps>\n <bento-step>Substep 1</bento-step>\n <bento-step>Substep 2</bento-step>\n <bento-step>Substep 3</bento-step>\n </template>\n </bento-step>\n <bento-step>Step 3</bento-step>\n </bento-stepper>\n <div role=\"status\">{{ steps[activeIndex] }}</div>\n </div>\n</template>\n\n<script setup lang=\"ts\">\n import { ref } from 'vue';\n import { BentoStep, BentoStepper } from '@adyen/bento-vue2';\n\n const steps = ['Step 1', 'Step 2', 'Step 3'];\n const activeIndex = ref(1);\n const substepIndex = ref(1);\n</script>\n"; import './stepper.stories.scss?module'; const meta: Meta = { title: 'Stepper', component: BentoStepper, argTypes: { // Slots default: { name: 'default', type: { name: 'string', required: false }, description: 'BentoStep components', control: 'text', table: { type: { summary: 'VNode[]' }, }, }, // Enum props type: { options: Object.values(BentoStepperTypeOption), mapping: BentoStepperTypeOption, control: { type: 'select', }, }, variant: { options: Object.values(BentoStepperVariantOption), mapping: BentoStepperVariantOption, control: { type: 'select', }, }, }, }; export default meta; type Story = StoryObj<typeof BentoStepper>; export const Default: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep }, props: Object.keys(argTypes), template: ` <bento-stepper v-bind="args" :key="JSON.stringify(args)" @update:index="updateIndex"> <bento-step>Step 1</bento-step> <bento-step>Step 2</bento-step> <bento-step>Step 3</bento-step> <bento-step>Step 4</bento-step> </bento-stepper> `, setup(props) { const updateIndex = (index: number) => action('update:index')(index); return { updateIndex, args: isVue2 ? props : _args, }; }, }; }, args: { index: 2, }, }; Default.parameters = storybookDocsParameter(DefaultStepperExample); export const Substeps: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep }, props: Object.keys(argTypes), template: ` <bento-stepper :index="index" @update:index="index = $event"> <bento-step>Step 1</bento-step> <bento-step :substep-index="args.substepIndex" @update:substep-index="substepAction"> Step 2 <template #substeps> <bento-step>Substep 1</bento-step> <bento-step>Substep 2</bento-step> <bento-step>Substep 3</bento-step> </template> </bento-step> <bento-step>Step 3</bento-step> </bento-stepper> `, setup(props) { const updateIndex = (index: number) => action('update:index')(index); const substepAction = (index: number) => action('update:substep-index')(index); return { updateIndex, substepAction, args: isVue2 ? props : _args, }; }, }; }, args: { index: 1, substepIndex: 1, }, }; Substeps.parameters = storybookDocsParameter(SubstepsStepperExample); export const ConditionalSteps: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep, BentoButton }, props: Object.keys(argTypes), template: ` <div class="b-stepper-story" :class="args.variant === 'horizontal' && 'b-stepper-story--horizontal'"> <bento-stepper v-bind="args" :key="JSON.stringify(args)" :style="stepperStyle" @update:index="updateIndex"> <bento-step v-for="(step, index) in steps" :key="step">{{ step }}</bento-step> </bento-stepper> <bento-button @click="toggleSteps">Toggle extra steps</bento-button> </div> `, setup(props) { const updateIndex = (index: number) => action('update:index')(index); const withMiddleSteps = ref(true); const steps = computed(() => [ 'General config', withMiddleSteps.value && 'Online settings', withMiddleSteps.value && 'Offline settings', 'Summary', withMiddleSteps.value && 'Extra: post config', ].filter(Boolean) ); const toggleSteps = () => { withMiddleSteps.value = !withMiddleSteps.value; }; const stepperStyle = computed(() => ({ width: props.variant === 'horizontal' ? 'unset' : '200px' })); return { updateIndex, args: isVue2 ? props : _args, withMiddleSteps, steps, toggleSteps, stepperStyle, }; }, }; }, args: { index: 1, }, }; ConditionalSteps.parameters = storybookDocsParameter(ConditionalStepsExample); export const NonLinear: Story = { render(_args, { argTypes }) { return { components: { BentoStepper, BentoStep }, props: Object.keys(argTypes), template: ` <bento-stepper :index="activeStep" non-linear @update:index="index => setStep(index)" > <bento-step v-for="(step, index) in steps" :key="index" :completed="completedSteps[index]" > {{ step.title }} </bento-step> </bento-stepper> `, setup(props) { const steps = [{ title: 'Step 1' }, { title: 'Step 2' }, { title: 'Step 3' }, { title: 'Step 4' }]; const activeStep = ref(1); const completedSteps = ref<Record<number, boolean>>({ 0: true, }); const setStep = (index: number) => { action('update:index')(index); completedSteps.value[activeStep.value] = true; activeStep.value = index; }; return { args: isVue2 ? props : _args, steps, activeStep, completedSteps, setStep, }; }, }; }, args: { index: 1, nonLinear: true, }, parameters: storybookDocsParameter(NonLinearStepperSource), }; 

package/dist/assets/components/stepper/stepper.vue

@@ -1 +1 @@
-<template> <nav class="b-stepper"> <ol v-bento-keyboard-navigation-directive class="b-stepper__list" :class="conditionalClasses" v-on="keyboardNavigationListeners" > <slot></slot> </ol> <bento-typography el="span" variant="body" stronger class="b-stepper__text-stepper" >{{ t('step', { currentIndex: n(activeStepIndex + 1), totalSteps: n(stepsAmount), content: currentStepContent, }) }} </bento-typography> </nav> </template> <script setup lang="ts"> import { BentoTypography } from '@/components/typography'; import { computed, type DeepReadonly, type PropType, provide, readonly, ref, watch } from 'vue'; import { BentoKeyboardNavigationDirective as vBentoKeyboardNavigationDirective } from '@/directives'; import { useKeyboardNavigation, useStepRegister } from './composables'; import { useI18n } from '@/utils/ts/i18n'; import { STEPPER_STATE } from './stepper.keys'; import { type BentoStepperState, type BentoStepperStepExposeState, type BentoStepperTypeOption, BentoStepperVariantOption, } from './stepper.types'; import messages from './messages.json'; const props = defineProps({ /** * Type of stepper; defines how the stepper should behave. Default: linear * @values linear, non-linear */ type: { type: String as PropType<`${BentoStepperTypeOption}`>, default: 'linear', }, /** * Stepper variant; defines how the stepper should be displayed. Default: vertical * @values vertical, horizontal */ variant: { type: String as PropType<`${BentoStepperVariantOption}`>, default: 'vertical', }, /** * Active step index */ index: { type: Number, default: 0, }, }); const emit = defineEmits<{ /** * Event triggered when step is updated by the stepper */ (e: 'update:index', index: number): void; }>(); type MessageSchema = (typeof messages)['en-US']; const { t, n } = useI18n<{ message: MessageSchema }>({ messages }); const childrenSteps = ref<Array<BentoStepperStepExposeState>>([]); const activeStepIndex = ref(props.index); const latestActiveStep = ref(activeStepIndex.value); const navigateToStep = (index: number) => { // Stores latest active step index so users can navigate backwards and forwards on linear stepper if (index > latestActiveStep.value) { latestActiveStep.value = index; } activeStepIndex.value = index; }; const currentStepContent = computed(() => childrenSteps.value[activeStepIndex.value]?.stepContent); const stepsAmount = computed(() => childrenSteps.value.length); const childrenStepsElements = computed(() => childrenSteps.value.map(({ buttonElement }) => buttonElement)); const isHorizontalVariant = computed(() => props.variant === BentoStepperVariantOption.HORIZONTAL); // List of all visible steps nested on the stepper, including the substeps of the children steps // Flattening the steps on a single list makes the keyboard navigation easier to be handled const allVisibleStepsElements = computed(() => childrenSteps.value .map(({ buttonElement, substeps }, index) => { const isStepActive = activeStepIndex.value === index; const isSubstepsVisible = !isHorizontalVariant.value && isStepActive; if (!isSubstepsVisible) { return [buttonElement]; } return [buttonElement].concat(substeps.map(step => step.buttonElement)); }) .flat() ); const { registerStep, removeStep } = useStepRegister(childrenSteps); const stepperState: BentoStepperState = ref({ activeStepIndex, latestActiveStep, steps: childrenStepsElements, type: props.type, variant: props.variant, navigateToStep, registerStep, removeStep, }); const conditionalClasses = computed(() => ({ 'b-stepper__list--horizontal': isHorizontalVariant.value, })); watch(() => props.index, navigateToStep); watch(activeStepIndex, index => { emit('update:index', index); }); const keyboardNavigationListeners = useKeyboardNavigation(allVisibleStepsElements); // Provides stepper state to BentoStep children components provide<DeepReadonly<BentoStepperState>>(STEPPER_STATE, readonly(stepperState)); const reset = () => { activeStepIndex.value = 0; latestActiveStep.value = 0; }; defineExpose({ reset, }); </script> <script lang="ts"> /** * Steppers break down complex processes into manageable steps to guide users through a sequential or multi-step process. * * @example * import { BentoStep, BentoStepper } from '@adyen/bento-vue2'; * * export default { * components: { BentoStep, BentoStepper }, * template: ` * <bento-stepper :index="1"> * <bento-step>Step 1</bento-step> * <bento-step>Step 2</bento-step> * <bento-step>Step 3</bento-step> * </bento-stepper> * ` * } */ export default { i18n: { messages }, name: 'stepper', }; </script> <style scoped src="./stepper.scss" /> 
+<template> <nav class="b-stepper"> <ol v-bento-keyboard-navigation-directive class="b-stepper__list" :class="conditionalClasses" v-on="keyboardNavigationListeners" > <slot></slot> </ol> <bento-typography el="span" variant="body" stronger class="b-stepper__text-stepper" >{{ t('step', { currentIndex: n(activeStepIndex + 1), totalSteps: n(stepsAmount), content: currentStepContent, }) }} </bento-typography> </nav> </template> <script setup lang="ts"> import { BentoTypography } from '@/components/typography'; import { computed, type DeepReadonly, type PropType, provide, readonly, ref, watch } from 'vue'; import { BentoKeyboardNavigationDirective as vBentoKeyboardNavigationDirective } from '@/directives'; import { useKeyboardNavigation, useStepRegister } from './composables'; import { useI18n } from '@/utils/ts/i18n'; import { STEPPER_STATE } from './stepper.keys'; import { type BentoStepperState, type BentoStepperStepExposeState, type BentoStepperTypeOption, BentoStepperVariantOption, } from './stepper.types'; import messages from './messages.json'; const props = defineProps({ /** * Type of stepper; defines how the stepper should behave. Default: linear * @values linear, non-linear */ type: { type: String as PropType<`${BentoStepperTypeOption}`>, default: 'linear', }, /** * Stepper variant; defines how the stepper should be displayed. Default: vertical * @values vertical, horizontal */ variant: { type: String as PropType<`${BentoStepperVariantOption}`>, default: 'vertical', }, /** * Active step index */ index: { type: Number, default: 0, }, }); const emit = defineEmits<{ /** * Event triggered when step is updated by the stepper */ (e: 'update:index', index: number): void; }>(); type MessageSchema = (typeof messages)['en-US']; const { t, n } = useI18n<{ message: MessageSchema }>({ messages }); const childrenSteps = ref<Array<BentoStepperStepExposeState>>([]); const activeStepIndex = ref(props.index); const latestActiveStep = ref(activeStepIndex.value); const navigateToStep = (index: number) => { // Stores latest active step index so users can navigate backwards and forwards on linear stepper if (index > latestActiveStep.value) { latestActiveStep.value = index; } activeStepIndex.value = index; }; const currentStepContent = computed(() => childrenSteps.value[activeStepIndex.value]?.stepContent); const stepsAmount = computed(() => childrenSteps.value.length); const childrenStepsElements = computed(() => childrenSteps.value.map(({ buttonElement }) => buttonElement)); const isHorizontalVariant = computed(() => props.variant === BentoStepperVariantOption.HORIZONTAL); // List of all visible steps nested on the stepper, including the substeps of the children steps // Flattening the steps on a single list makes the keyboard navigation easier to be handled const allVisibleStepsElements = computed(() => childrenSteps.value .map(({ buttonElement, substeps }, index) => { const isStepActive = activeStepIndex.value === index; const isSubstepsVisible = !isHorizontalVariant.value && isStepActive; if (!isSubstepsVisible) { return [buttonElement]; } return [buttonElement].concat(substeps.map(step => step.buttonElement)); }) .flat() ); const { registerStep, removeStep } = useStepRegister(childrenSteps); const stepperState: BentoStepperState = ref({ activeStepIndex, latestActiveStep, steps: childrenStepsElements, type: props.type, variant: props.variant, navigateToStep, registerStep, removeStep, }); const conditionalClasses = computed(() => ({ 'b-stepper__list--horizontal': isHorizontalVariant.value, })); watch(() => props.index, navigateToStep); watch(activeStepIndex, index => { emit('update:index', index); }); const keyboardNavigationListeners = useKeyboardNavigation(allVisibleStepsElements); // Provides stepper state to BentoStep children components provide<DeepReadonly<BentoStepperState>>(STEPPER_STATE, readonly(stepperState)); const reset = () => { activeStepIndex.value = 0; latestActiveStep.value = 0; }; defineExpose({ reset, }); </script> <script lang="ts"> /** * Steppers break down complex processes into manageable steps to guide users through a sequential or multi-step process. * * @example * import { BentoStep, BentoStepper } from '@adyen/bento-vue2'; * * export default { * components: { BentoStep, BentoStepper }, * template: ` * <bento-stepper :index="1"> * <bento-step>Step 1</bento-step> * <bento-step>Step 2</bento-step> * <bento-step>Step 3</bento-step> * </bento-stepper> * ` * } */ export default { i18n: { messages }, name: 'bento-stepper', }; </script> <style scoped src="./stepper.scss" /> 

package/dist/assets/components/structured-list/structured-list.stories.ts

@@ -1 +1 @@
-import { BentoPaymentMethod } from '@/components/payment-method'; import { BentoStatus } from '@/components/status'; import { BentoCurrency, BentoCurrencyISOCode } from '@/components/currency'; import { BentoCountry, BentoCountryCode } from '@/components/country'; import { BentoTypography } from '@/components/typography'; import { BentoDate, BentoDateFormat } from '@/components/date'; import { BentoLink } from '@/components/link'; import BentoStructuredList from './structured-list.vue'; import BentoStructuredListItem from './components/structered-list-item/structured-list-item.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import { BentoStructuredListLayoutOptions } from './structured-list.types'; import BentoStructuredListDefault from './__tests__/structured-list-default.vue?raw'; const meta: Meta = { title: 'Structured list', component: BentoStructuredList, argTypes: { layout: { options: Object.values(BentoStructuredListLayoutOptions), mapping: BentoStructuredListLayoutOptions, control: { type: 'select', }, }, default: { control: false, table: { type: { summary: 'BentoStructuredListItem[]' }, }, }, }, } as Meta; export default meta; type Story = StoryObj<typeof BentoStructuredList>; export const EverythingBagel: Story = { render: (_args, { argTypes }) => ({ components: { BentoStructuredList, BentoStructuredListItem, BentoPaymentMethod, BentoCurrency, BentoLink, BentoTypography, BentoDate, BentoStatus, BentoCountry, }, props: Object.keys(argTypes), template: ` <bento-structured-list v-bind="args"> <bento-structured-list-item label="Status"> <bento-status variant="green">Approved</bento-status> </bento-structured-list-item> <bento-structured-list-item label="Linked"> <bento-link to="router/path">This is a link</bento-link> </bento-structured-list-item> <bento-structured-list-item label="Amount"> <bento-currency currency="USD" :value="123456" /> </bento-structured-list-item> <bento-structured-list-item label="Funding source"> <bento-typography>Credit</bento-typography> </bento-structured-list-item> <bento-structured-list-item label="Date" label-info="Payment date"> <bento-date :date="new Date('2017-09-25')" :format="BentoDateFormat.SHORT_DATE" /> </bento-structured-list-item> <bento-structured-list-item label="Country/Region"> <bento-country :code="BentoCountryCode.NL" /> </bento-structured-list-item> <bento-structured-list-item label="PSP reference" copy="P1234DBE2435" @copy="copyAction"> <bento-typography>P1234DBE2435</bento-typography> </bento-structured-list-item> <bento-structured-list-item label="Payment method"> <bento-payment-method type="Klarna" label="Klarna" /> </bento-structured-list-item> <bento-structured-list-item label="Shopper" :search="search" search-tooltip="Search in payments list" > <bento-typography>143442642</bento-typography> </bento-structured-list-item> </bento-structured-list> `, setup(props) { const copyAction = value => action('copy')(value); return { BentoCurrencyISOCode, BentoDateFormat, BentoCountryCode, // eslint-disable-next-line @typescript-eslint/no-empty-function search: () => {}, copyAction, dateObject: new Date('2017-09-25'), args: isVue2 ? props : _args, }; }, }), args: { layout: '33-66' }, parameters: storybookDocsParameter(BentoStructuredListDefault), }; 
+import { BentoPaymentMethod } from '@/components/payment-method'; import { BentoStatus } from '@/components/status'; import { BentoCurrency, BentoCurrencyISOCode } from '@/components/currency'; import { BentoCountry, BentoCountryCode } from '@/components/country'; import { BentoTypography } from '@/components/typography'; import { BentoDate, BentoDateFormat } from '@/components/date'; import { BentoLink } from '@/components/link'; import BentoStructuredList from './structured-list.vue'; import BentoStructuredListItem from './components/structered-list-item/structured-list-item.vue'; import type { Meta, StoryObj } from '@storybook/vue'; import { action } from '@storybook/addon-actions'; import { storybookDocsParameter } from '@/utils/ts/storybook'; import { isVue2 } from 'vue-demi'; import { BentoStructuredListLayoutOptions } from './structured-list.types'; const BentoStructuredListDefault = "<template>\n <bento-structured-list>\n <bento-structured-list-item label=\"Status\">\n <bento-status variant=\"green\">Approved</bento-status>\n </bento-structured-list-item>\n <bento-structured-list-item label=\"Linked\">\n <bento-link to=\"router/path\">This is a link</bento-link>\n </bento-structured-list-item>\n <bento-structured-list-item label=\"Amount\">\n <bento-currency currency=\"USD\" :value=\"123456\" />\n </bento-structured-list-item>\n <bento-structured-list-item label=\"Funding source\">\n <bento-typography>Credit</bento-typography>\n </bento-structured-list-item>\n <bento-structured-list-item label=\"Date\">\n <bento-date :date=\"new Date('2017-09-25')\" />\n </bento-structured-list-item>\n <bento-structured-list-item label=\"Country/Region\">\n <bento-country code=\"NL\" />\n </bento-structured-list-item>\n <bento-structured-list-item label=\"PSP reference\" copy=\"P1234DBE2435\" @copy=\"copyFn\">\n <bento-typography>P1234DBE2435</bento-typography>\n </bento-structured-list-item>\n <bento-structured-list-item label=\"Payment method\">\n <bento-payment-method type=\"Klarna\" label=\"Klarna\" />\n </bento-structured-list-item>\n <bento-structured-list-item label=\"Shopper\" :search=\"searchFn\" search-tooltip=\"Search in payments list\">\n <bento-typography>143442642</bento-typography>\n </bento-structured-list-item>\n </bento-structured-list>\n</template>\n\n<script setup lang=\"ts\">\n import { BentoStructuredList, BentoStructuredListItem } from '@adyen/bento-vue2';\n\n const copyFn = () => {\n // write your copy fn here\n };\n\n const searchFn = () => {\n // write your search fn here\n };\n</script>\n"; const meta: Meta = { title: 'Structured list', component: BentoStructuredList, argTypes: { layout: { options: Object.values(BentoStructuredListLayoutOptions), mapping: BentoStructuredListLayoutOptions, control: { type: 'select', }, }, default: { control: false, table: { type: { summary: 'BentoStructuredListItem[]' }, }, }, }, } as Meta; export default meta; type Story = StoryObj<typeof BentoStructuredList>; export const EverythingBagel: Story = { render: (_args, { argTypes }) => ({ components: { BentoStructuredList, BentoStructuredListItem, BentoPaymentMethod, BentoCurrency, BentoLink, BentoTypography, BentoDate, BentoStatus, BentoCountry, }, props: Object.keys(argTypes), template: ` <bento-structured-list v-bind="args"> <bento-structured-list-item label="Status"> <bento-status variant="green">Approved</bento-status> </bento-structured-list-item> <bento-structured-list-item label="Linked"> <bento-link to="router/path">This is a link</bento-link> </bento-structured-list-item> <bento-structured-list-item label="Amount"> <bento-currency currency="USD" :value="123456" /> </bento-structured-list-item> <bento-structured-list-item label="Funding source"> <bento-typography>Credit</bento-typography> </bento-structured-list-item> <bento-structured-list-item label="Date" label-info="Payment date"> <bento-date :date="new Date('2017-09-25')" :format="BentoDateFormat.SHORT_DATE" /> </bento-structured-list-item> <bento-structured-list-item label="Country/Region"> <bento-country :code="BentoCountryCode.NL" /> </bento-structured-list-item> <bento-structured-list-item label="PSP reference" copy="P1234DBE2435" @copy="copyAction"> <bento-typography>P1234DBE2435</bento-typography> </bento-structured-list-item> <bento-structured-list-item label="Payment method"> <bento-payment-method type="Klarna" label="Klarna" /> </bento-structured-list-item> <bento-structured-list-item label="Shopper" :search="search" search-tooltip="Search in payments list" > <bento-typography>143442642</bento-typography> </bento-structured-list-item> </bento-structured-list> `, setup(props) { const copyAction = value => action('copy')(value); return { BentoCurrencyISOCode, BentoDateFormat, BentoCountryCode, // eslint-disable-next-line @typescript-eslint/no-empty-function search: () => {}, copyAction, dateObject: new Date('2017-09-25'), args: isVue2 ? props : _args, }; }, }), args: { layout: '33-66' }, parameters: storybookDocsParameter(BentoStructuredListDefault), }; 

package/dist/assets/components/structured-list/structured-list.vue

@@ -1 +1 @@
-<template> <dl class="b-structured-list"> <slot /> </dl> </template> <script setup lang="ts"> import { computed, inject, provide } from 'vue'; import { STRUCTURED_LIST_CONDENSED_INJECTION_KEY, STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, } from '@/components/structured-list/structured-list.keys'; import { BentoStructuredListLayoutOptions } from './structured-list.types'; const props = withDefaults( defineProps<{ /** * Width of the labels container, in pixels. Overrides layout prop. */ labelsWidth?: number; /** * The layout of the label value pair in percentage. * If labelsWidth is set, layout will be overriden by the static pixel value. * * If the value entered is not listed in the example * list below '33-66' will be applied * @example * '25-75' * '33-66' * '42-58' * '50-50' * '75-25' * '66-33' * '58-42' */ layout?: BentoStructuredListLayoutOptions; }>(), { labelsWidth: null, layout: '33-66', } ); const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false); const computedLayout = computed(() => BentoStructuredListLayoutOptions.includes(props.layout) ? props.layout : '33-66' ); const computedLabelsWidth = computed(() => { if (isCondensed) { return '130px'; } if (props.labelsWidth) { return `${props.labelsWidth}px`; } return `${computedLayout.value.split('-')[0]}%`; }); provide(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, computedLabelsWidth); </script> <script lang="ts"> /** * This is a list used to display pairs of information in a clear and organized manner. * `BentoStructureListItem` should be used to pass the label/value pairs to the list. * * @example * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2'; * * export default { * components: { BentoStructuredList, BentoStructuredListItem }, * template: ` * <bento-structured-list> * <bento-structured-list-item label="Payment"> * <bento-payment-method label="Klarna" type="Klarna" /> * </bento-structured-list-item> * <bento-structured-list-item label="Amount"> * <bento-currency :currency="BentoCurrencyISOCode.USD" :value="123456" /> * </bento-structured-list-item> * </bento-structured-list> * ` * } */ export default {}; </script> <style lang="scss" scoped src="./structured-list.scss" /> 
+<template> <dl class="b-structured-list"> <slot /> </dl> </template> <script setup lang="ts"> import { computed, inject, provide } from 'vue'; import { STRUCTURED_LIST_CONDENSED_INJECTION_KEY, STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, } from '@/components/structured-list/structured-list.keys'; import { BentoStructuredListLayoutOptions } from './structured-list.types'; const props = withDefaults( defineProps<{ /** * Width of the labels container, in pixels. Overrides layout prop. */ labelsWidth?: number; /** * The layout of the label value pair in percentage. * If labelsWidth is set, layout will be overriden by the static pixel value. * * If the value entered is not listed in the example * list below '33-66' will be applied * @example * '25-75' * '33-66' * '42-58' * '50-50' * '75-25' * '66-33' * '58-42' */ layout?: BentoStructuredListLayoutOptions; }>(), { labelsWidth: null, layout: '33-66', } ); const isCondensed = inject(STRUCTURED_LIST_CONDENSED_INJECTION_KEY, false); const computedLayout = computed(() => BentoStructuredListLayoutOptions.includes(props.layout) ? props.layout : '33-66' ); const computedLabelsWidth = computed(() => { if (isCondensed) { return '130px'; } if (props.labelsWidth) { return `${props.labelsWidth}px`; } return `${computedLayout.value.split('-')[0]}%`; }); provide(STRUCTURED_LIST_LABELS_WIDTH_INJECTION_KEY, computedLabelsWidth); </script> <script lang="ts"> /** * This is a list used to display pairs of information in a clear and organized manner. * `BentoStructureListItem` should be used to pass the label/value pairs to the list. * * @example * import { BentoStructuredListItem, BentoStructuredListItem } from '@adyen/bento-vue2'; * * export default { * components: { BentoStructuredList, BentoStructuredListItem }, * template: ` * <bento-structured-list> * <bento-structured-list-item label="Payment"> * <bento-payment-method label="Klarna" type="Klarna" /> * </bento-structured-list-item> * <bento-structured-list-item label="Amount"> * <bento-currency :currency="BentoCurrencyISOCode.USD" :value="123456" /> * </bento-structured-list-item> * </bento-structured-list> * ` * } */ export default { name: 'bento-structured-list', }; </script> <style lang="scss" scoped src="./structured-list.scss" /> 

package/dist/assets/components/summary-grid/components/summary-grid-item/summary-grid-item.types.ts

@@ -1 +1 @@
-import type { BentoDashedUnderlineProps } from '@/components/dashed-underline'; import type { BentoSummaryGridItemSize, BentoSummaryGridItemTrendDirection } from '../../summary-grid.types'; /** * @deprecated Since v2.0.0. Use string literal instead. */ export enum SummaryGridItemType { AMOUNT = 'amount', PERCENTAGE = 'percentage', NUMERIC = 'numeric', TEXT = 'text', CUSTOM = 'custom', } export interface BaseSummaryGridItemProps { /** * Text to copy to the clipboard */ copy?: string; /** * The width of `summary-grid-item` fits its content */ fitContent?: boolean; /** * Text showed in the info-icon tooltip on hover */ infoIconTooltipText?: string; // amount, percentage and numeric props /** * Defines the size of the `summary-grid-item` text content */ // TODO implement logic for Large size size?: `${BentoSummaryGridItemSize}`; /** * Text used as a title */ title: string; /** * Shows colored trend label next to text content */ trend?: string; /** * Defines the color of trend label */ trendDirection?: `${BentoSummaryGridItemTrendDirection}`; /** * Shows colored trend tag next to secondary metric value */ secondaryTrend?: string; /** * Defines the color of secondary trend tag */ secondaryTrendDirection?: `${BentoSummaryGridItemTrendDirection}`; /** * Size of the popover of a dashed-underline title */ underlinePopoverSize?: BentoDashedUnderlineProps['popoverSize']; /** * Text showed in a dashed-underline title tooltip on hover */ underlineTooltipText?: string; } export interface BentoSummaryGridItemProps extends BaseSummaryGridItemProps { /** * Applies styling based on content type */ // TODO add text truncation for SummaryGridItemType.TEXT itemType?: `${SummaryGridItemType}`; } 
+import type { BentoDashedUnderlineProps } from '@/components/dashed-underline'; import type { BentoSummaryGridItemSize, BentoSummaryGridItemTrendDirection } from '../../summary-grid.types'; /** * @deprecated Since v3.0.0. Use string literal instead. */ export enum SummaryGridItemType { AMOUNT = 'amount', PERCENTAGE = 'percentage', NUMERIC = 'numeric', TEXT = 'text', CUSTOM = 'custom', } export interface BaseSummaryGridItemProps { /** * Text to copy to the clipboard */ copy?: string; /** * The width of `summary-grid-item` fits its content */ fitContent?: boolean; /** * Text showed in the info-icon tooltip on hover */ infoIconTooltipText?: string; // amount, percentage and numeric props /** * Defines the size of the `summary-grid-item` text content */ // TODO implement logic for Large size size?: `${BentoSummaryGridItemSize}`; /** * Text used as a title */ title: string; /** * Shows colored trend label next to text content */ trend?: string; /** * Defines the color of trend label */ trendDirection?: `${BentoSummaryGridItemTrendDirection}`; /** * Shows colored trend tag next to secondary metric value */ secondaryTrend?: string; /** * Defines the color of secondary trend tag */ secondaryTrendDirection?: `${BentoSummaryGridItemTrendDirection}`; /** * Size of the popover of a dashed-underline title */ underlinePopoverSize?: BentoDashedUnderlineProps['popoverSize']; /** * Text showed in a dashed-underline title tooltip on hover */ underlineTooltipText?: string; } export interface BentoSummaryGridItemProps extends BaseSummaryGridItemProps { /** * Applies styling based on content type */ // TODO add text truncation for SummaryGridItemType.TEXT itemType?: `${SummaryGridItemType}`; } 

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

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

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

@@ -1 +1 @@
-import { type GridLayoutColumnWidths } from '@/components/internal/grid-layout/grid-layout.types'; /** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoSummaryGridItemSize { SMALL = 'small', MEDIUM = 'medium', LARGE = 'large', } /** * @deprecated Since v2.0.0. Use string literal instead. */ export enum BentoSummaryGridItemTrendDirection { POSITIVE = 'positive', NEGATIVE = 'negative', NEUTRAL = 'neutral', } export interface BentoSummaryGridColumnWidth { row1: GridLayoutColumnWidths; row2?: GridLayoutColumnWidths; row3?: GridLayoutColumnWidths; } export type BentoSummaryGridLayout = () => { isSummaryGridLayout: boolean; }; export interface BentoSummaryGridProps { /** * Sets the responsive columns widths values for 1 of the 3 rows. */ columnWidth?: BentoSummaryGridColumnWidth; /** * Renders a font numeric style with slashed zeros instead of normal ones. */ slashedZero?: boolean; } 
+import { type GridLayoutColumnWidths } from '@/components/internal/grid-layout/grid-layout.types'; /** * @deprecated Since v3.0.0. Use string literal instead. */ export enum BentoSummaryGridItemSize { SMALL = 'small', MEDIUM = 'medium', LARGE = 'large', } /** * @deprecated Since v3.0.0. Use string literal instead. */ export enum BentoSummaryGridItemTrendDirection { POSITIVE = 'positive', NEGATIVE = 'negative', NEUTRAL = 'neutral', } export interface BentoSummaryGridColumnWidth { row1: GridLayoutColumnWidths; row2?: GridLayoutColumnWidths; row3?: GridLayoutColumnWidths; } export type BentoSummaryGridLayout = () => { isSummaryGridLayout: boolean; }; export interface BentoSummaryGridProps { /** * Sets the responsive columns widths values for 1 of the 3 rows. */ columnWidth?: BentoSummaryGridColumnWidth; /** * Renders a font numeric style with slashed zeros instead of normal ones. */ slashedZero?: boolean; } 

package/dist/assets/components/table-of-contents/components/table-of-contents-list/table-of-contents-list.vue

@@ -1 +1 @@
-<template> <ol class="b-table-of-contents__toc" @keydown="onKeydownNavigation"> <li v-for="(item, index) in items" :key="index" class="b-table-of-contents__item" :class="getItemClasses(item)"> <a ref="navigationItemRefs" class="b-table-of-contents__item-title" :href="getSectionHref(item.elementRef)" :aria-current="isActiveItem(item) ? 'location' : undefined" :tabindex="isFocusable(index) ? null : -1" @click.prevent="onScrollToSection(item.elementRef)" @keydown.enter.prevent="onScrollToSection(item.elementRef)" > <bento-typography el="span" variant="body" stronger class="b-table-of-contents__item-label">{{ item.title }}</bento-typography> </a> <div v-if="index !== items.length - 1" class="b-table-of-contents__item-separator"></div> </li> </ol> </template> <script setup lang="ts"> import { computed } from 'vue'; import { BentoTypography } from '@/components/typography'; import { useSectionNavigationKeyboard } from '@/composables/use-section-navigation-keyboard'; import { getElementFragmentHref, scrollToSection, type ScrollToSectionTarget } from '@/utils/ts/scroll-to-section'; import { type BentoTableOfContentsItem, TableOfContentsClass } from '../../table-of-contents.types'; import type { TableOfContentsListProps } from './table-of-contents-list.types'; const props = withDefaults(defineProps<TableOfContentsListProps>(), { activeSectionHref: undefined, initialFocusIndex: -1, scrollOffset: undefined, }); const getSectionFragmentHref = (elementRef?: BentoTableOfContentsItem['elementRef']) => getElementFragmentHref(elementRef as ScrollToSectionTarget); const getSectionHref = (elementRef?: BentoTableOfContentsItem['elementRef']) => getSectionFragmentHref(elementRef) ?? '#'; const isActiveItem = (item: BentoTableOfContentsItem) => !!props.activeSectionHref && getSectionFragmentHref(item.elementRef) === props.activeSectionHref; const getItemClasses = (item: BentoTableOfContentsItem) => ({ [`b-table-of-contents__item--${TableOfContentsClass.ACTIVE}`]: isActiveItem(item), [`b-table-of-contents__item--level-${Math.min(Math.max(item.level ?? 1, 1), 4)}`]: true, }); const onScrollToSection = (elementRef: BentoTableOfContentsItem['elementRef']) => scrollToSection(elementRef, { scrollOffset: props.scrollOffset, updateHash: true, warningPrefix: 'bento-table-of-contents', }); const { isFocusable, navigationItemRefs, onKeydownNavigation } = useSectionNavigationKeyboard( computed(() => props.items), { initialIndex: computed(() => props.initialFocusIndex), } ); </script> <style lang="scss" scoped src="./table-of-contents-list.scss" /> 
+<template> <ol class="b-table-of-contents__toc" @keydown="onKeydownNavigation"> <li v-for="(item, index) in items" :key="index" class="b-table-of-contents__item" :class="getItemClasses(item)"> <a ref="navigationItemRefs" class="b-table-of-contents__item-title" :href="getSectionHref(item.elementRef)" :aria-current="isActiveItem(item) ? 'location' : undefined" :tabindex="isFocusable(index) ? null : -1" @click.prevent="onScrollToSection(item.elementRef)" @keydown.enter.prevent="onScrollToSection(item.elementRef)" > <bento-typography el="span" variant="body" stronger class="b-table-of-contents__item-label">{{ item.title }}</bento-typography> </a> <div v-if="index !== items.length - 1" class="b-table-of-contents__item-separator"></div> </li> </ol> </template> <script setup lang="ts"> import { computed } from 'vue'; import { BentoTypography } from '@/components/typography'; import { useSectionNavigationKeyboard } from '@/composables/use-section-navigation-keyboard'; import { getElementFragmentHref, scrollToSection, type ScrollToSectionTarget } from '@/utils/ts/scroll-to-section'; import { TableOfContentsClass } from '../../table-of-contents.internal.types'; import { type BentoTableOfContentsItem } from '../../table-of-contents.types'; import type { TableOfContentsListProps } from './table-of-contents-list.types'; const props = withDefaults(defineProps<TableOfContentsListProps>(), { activeSectionHref: undefined, initialFocusIndex: -1, scrollOffset: undefined, }); const getSectionFragmentHref = (elementRef?: BentoTableOfContentsItem['elementRef']) => getElementFragmentHref(elementRef as ScrollToSectionTarget); const getSectionHref = (elementRef?: BentoTableOfContentsItem['elementRef']) => getSectionFragmentHref(elementRef) ?? '#'; const isActiveItem = (item: BentoTableOfContentsItem) => !!props.activeSectionHref && getSectionFragmentHref(item.elementRef) === props.activeSectionHref; const getItemClasses = (item: BentoTableOfContentsItem) => ({ [`b-table-of-contents__item--${TableOfContentsClass.ACTIVE}`]: isActiveItem(item), [`b-table-of-contents__item--level-${Math.min(Math.max(item.level ?? 1, 1), 4)}`]: true, }); const onScrollToSection = (elementRef: BentoTableOfContentsItem['elementRef']) => scrollToSection(elementRef, { scrollOffset: props.scrollOffset, updateHash: true, warningPrefix: 'bento-table-of-contents', }); const { isFocusable, navigationItemRefs, onKeydownNavigation } = useSectionNavigationKeyboard( computed(() => props.items), { initialIndex: computed(() => props.initialFocusIndex), } ); </script> <style lang="scss" scoped src="./table-of-contents-list.scss" /> 

package/dist/assets/components/table-of-contents/table-of-contents.internal.types.ts

@@ -0,0 +1 @@
+export enum TableOfContentsClass { ACTIVE = 'active', }