@bethinkpl/design-system 31.0.3 → 33.0.0

package/dist/lib/js/components/Tile/Tile.sb.shared.d.ts

@@ -22,6 +22,7 @@ export declare const data: () => {
         readonly FA_ARROW_DOWN_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ARROW_DOWN_TO_LINE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ARROW_LEFT_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_ARROW_LEFT_TO_DOTTED_LINE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ARROW_POINTER: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ARROW_RIGHT_FROM_BRACKET: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ARROW_RIGHT_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -32,8 +33,10 @@ export declare const data: () => {
         readonly FA_ARROW_UP_RIGHT_FROM_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ARROW_UP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ARROWS_LEFT_RIGHT_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_ARROWS_FROM_DOTTED_LINE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ARROWS_MAXIMIZE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ARROWS_ROTATE: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_ARROWS_TO_DOTTED_LINE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ATOM_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_BADGE_PERCENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_BAN: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -173,6 +176,7 @@ export declare const data: () => {
         readonly FA_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -278,6 +282,7 @@ export declare const data: () => {
 export declare const components: {
     DsBanner: {
         new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+            isExpanded: import('vue').PropType<boolean>;
             icon: import('../Icons/Icon').IconItem | null;
             buttonText: {
                 type: import('vue').PropType<string>;
@@ -292,9 +297,6 @@ export declare const components: {
                 type: import('vue').PropType<string>;
                 required: true;
             };
-            isExpanded: {
-                type: import('vue').PropType<boolean>;
-            };
             isIconHiddenOnMobile: {
                 type: import('vue').PropType<boolean>;
             };
@@ -307,11 +309,9 @@ export declare const components: {
         }>> & Readonly<{
             onClose?: (() => any) | undefined;
             "onButton-clicked"?: (() => any) | undefined;
-            "onUpdate:isExpanded"?: ((isExpanded: boolean) => any) | undefined;
         }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
             close: () => void;
             "button-clicked": () => void;
-            "update:isExpanded": (isExpanded: boolean) => void;
         }, import('vue').PublicProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
             P: {};
             B: {};
@@ -320,6 +320,7 @@ export declare const components: {
             M: {};
             Defaults: {};
         }, Readonly<import('vue').ExtractPropTypes<{
+            isExpanded: import('vue').PropType<boolean>;
             icon: import('../Icons/Icon').IconItem | null;
             buttonText: {
                 type: import('vue').PropType<string>;
@@ -334,9 +335,6 @@ export declare const components: {
                 type: import('vue').PropType<string>;
                 required: true;
             };
-            isExpanded: {
-                type: import('vue').PropType<boolean>;
-            };
             isIconHiddenOnMobile: {
                 type: import('vue').PropType<boolean>;
             };
@@ -349,12 +347,12 @@ export declare const components: {
         }>> & Readonly<{
             onClose?: (() => any) | undefined;
             "onButton-clicked"?: (() => any) | undefined;
-            "onUpdate:isExpanded"?: ((isExpanded: boolean) => any) | undefined;
         }>, {}, {}, {}, {}, {}>;
         __isFragment?: never;
         __isTeleport?: never;
         __isSuspense?: never;
     } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+        isExpanded: import('vue').PropType<boolean>;
         icon: import('../Icons/Icon').IconItem | null;
         buttonText: {
             type: import('vue').PropType<string>;
@@ -369,9 +367,6 @@ export declare const components: {
             type: import('vue').PropType<string>;
             required: true;
         };
-        isExpanded: {
-            type: import('vue').PropType<boolean>;
-        };
         isIconHiddenOnMobile: {
             type: import('vue').PropType<boolean>;
         };
@@ -384,11 +379,9 @@ export declare const components: {
     }>> & Readonly<{
         onClose?: (() => any) | undefined;
         "onButton-clicked"?: (() => any) | undefined;
-        "onUpdate:isExpanded"?: ((isExpanded: boolean) => any) | undefined;
     }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
         close: () => void;
         "button-clicked": () => void;
-        "update:isExpanded": (isExpanded: boolean) => void;
     }, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
         $slots: {
             defaultText?(_: {}): any;

package/dist/lib/js/components/Toggles/ToggleButton/ToggleButton.vue.d.ts

@@ -78,6 +78,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FA_ARROW_DOWN_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ARROW_DOWN_TO_LINE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ARROW_LEFT_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_ARROW_LEFT_TO_DOTTED_LINE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ARROW_POINTER: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ARROW_RIGHT_FROM_BRACKET: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ARROW_RIGHT_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -88,8 +89,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FA_ARROW_UP_RIGHT_FROM_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ARROW_UP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ARROWS_LEFT_RIGHT_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_ARROWS_FROM_DOTTED_LINE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ARROWS_MAXIMIZE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ARROWS_ROTATE: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_ARROWS_TO_DOTTED_LINE: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_ATOM_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_BADGE_PERCENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_BAN: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -229,6 +232,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly FA_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
+        readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
         readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;

package/dist/lib/js/icons/fontawesome.d.ts

@@ -9,6 +9,7 @@ export declare const FONTAWESOME_ICONS: {
     readonly FA_ARROW_DOWN_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_ARROW_DOWN_TO_LINE: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_ARROW_LEFT_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+    readonly FA_ARROW_LEFT_TO_DOTTED_LINE: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_ARROW_POINTER: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_ARROW_RIGHT_FROM_BRACKET: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_ARROW_RIGHT_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -19,8 +20,10 @@ export declare const FONTAWESOME_ICONS: {
     readonly FA_ARROW_UP_RIGHT_FROM_SQUARE: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_ARROW_UP_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_ARROWS_LEFT_RIGHT_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
+    readonly FA_ARROWS_FROM_DOTTED_LINE: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_ARROWS_MAXIMIZE: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_ARROWS_ROTATE: import('@fortawesome/fontawesome-common-types').IconDefinition;
+    readonly FA_ARROWS_TO_DOTTED_LINE: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_ATOM_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_BADGE_PERCENT: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_BAN: import('@fortawesome/fontawesome-common-types').IconDefinition;
@@ -160,6 +163,7 @@ export declare const FONTAWESOME_ICONS: {
     readonly FA_LIST: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_LOCATION_DOT: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_LOCK_KEYHOLE: import('@fortawesome/fontawesome-common-types').IconDefinition;
+    readonly FA_MAP: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_MAGNIFYING_GLASS: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_MEDAL: import('@fortawesome/fontawesome-common-types').IconDefinition;
     readonly FA_MEMO_SOLID: import('@fortawesome/fontawesome-common-types').IconDefinition;

package/lib/js/components/Banner/Banner.vue

@@ -60,11 +60,11 @@
 				<div v-if="$slots.expandedText" class="ds-banner__expander">
 					<ds-icon-button
 						:size="ICON_BUTTON_SIZES.SMALL"
-						:icon="isExpandedInternal ? ICONS.FA_CHEVRON_UP : ICONS.FA_CHEVRON_DOWN"
+						:icon="isExpanded ? ICONS.FA_CHEVRON_UP : ICONS.FA_CHEVRON_DOWN"
 						:color="ICON_BUTTON_COLORS.NEUTRAL"
 						:radius="BUTTON_RADIUSES.CAPSULE"
 						:touchable="false"
-						@click="toggleExpandedText"
+						@click="isExpanded = !isExpanded"
 					/>
 				</div>
 				<div v-if="!$slots.expandedText && closable" class="ds-banner__close">
@@ -78,10 +78,7 @@
 					/>
 				</div>
 			</div>
-			<div
-				v-if="$slots.expandedText && isExpandedInternal"
-				class="ds-banner__expandedContainer"
-			>
+			<div v-if="$slots.expandedText && isExpanded" class="ds-banner__expandedContainer">
 				<ds-divider :prominence="DIVIDER_PROMINENCES.STRONG" />
 				<div class="ds-banner__expandedText">
 					<slot name="expandedText" />
@@ -330,7 +327,7 @@ import DsDivider, { DIVIDER_PROMINENCES } from '../Divider';
 import { IconItem, ICONS } from '../Icons/Icon';
 import DsIconButton, { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES } from '../Buttons/IconButton';
 import { BANNER_COLORS, BANNER_SIZES, BannerColor, BannerSize } from './Banner.consts';
-import { computed, ref, watch } from 'vue';
+import { computed } from 'vue';
 import FeatureIcon, {
 	FEATURE_ICON_COLOR,
 	FEATURE_ICON_SIZES,
@@ -341,7 +338,6 @@ const {
 	icon = null,
 	closable = false,
 	color = BANNER_COLORS.DEFAULT,
-	isExpanded = false,
 	isIconHiddenOnMobile = false,
 	size = BANNER_SIZES.MEDIUM,
 	titleInColor = false,
@@ -351,19 +347,18 @@ const {
 	closable?: boolean;
 	color?: BannerColor;
 	title: string;
-	isExpanded?: boolean;
 	isIconHiddenOnMobile?: boolean;
 	size?: BannerSize;
 	titleInColor?: boolean;
 }>();
 
-const emit = defineEmits<{
+defineEmits<{
 	'button-clicked': [];
 	close: [];
-	'update:isExpanded': [isExpanded: boolean];
 }>();
 
-const { toggleExpandedText, isExpandedInternal } = useExpanded();
+const isExpanded = defineModel<boolean>('isExpanded', { default: false });
+
 const { sizeClass, colorClass } = useBannerClasses();
 const iconColor = computed(() => {
 	const colorMap: Record<BannerColor, FeatureIconColor> = {
@@ -379,30 +374,6 @@ const iconColor = computed(() => {
 	return colorMap[color];
 });
 
-function useExpanded() {
-	const isExpandedInternal = ref(false);
-
-	watch(
-		() => isExpanded,
-		(newValue) => {
-			if (newValue !== isExpandedInternal.value) {
-				isExpandedInternal.value = newValue;
-			}
-		},
-		{ immediate: true },
-	);
-
-	const toggleExpandedText = () => {
-		isExpandedInternal.value = !isExpandedInternal.value;
-		emit('update:isExpanded', isExpandedInternal.value);
-	};
-
-	return {
-		isExpandedInternal,
-		toggleExpandedText,
-	};
-}
-
 function useBannerClasses() {
 	const colorClass = computed(() => {
 		const colorMap: Record<BannerColor, string> = {

package/lib/js/components/Drawer/DrawerSection/DrawerSection.stories.ts

@@ -4,6 +4,10 @@ import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import { SECTION_HEADER_ICON_COLORS, SECTION_HEADER_SIZES } from '../../Headers/SectionHeader';
 import { ICONS } from '../../Icons/Icon';
 import { useArgs } from '@storybook/preview-api';
+import SlotPlaceholder, {
+	SLOT_PLACEHOLDER_SIZES,
+} from '../../../../../.storybook/SlotPlaceholder/SlotPlaceholder.vue';
+import { toRefs } from 'vue';
 
 export default {
 	title: 'Components/Drawer/DrawerSection',
@@ -14,13 +18,14 @@ const StoryTemplate: StoryFn<typeof DrawerSection> = (args) => {
 	const [_, updateArgs] = useArgs();
 
 	return {
-		components: { DrawerSection },
+		components: { DrawerSection, SlotPlaceholder },
 		setup() {
-			return args;
-		},
-		data() {
+			const reactiveArgs = toRefs(args);
+
 			return {
-				ICONS: Object.freeze(ICONS),
+				...reactiveArgs,
+				ICONS,
+				SLOT_PLACEHOLDER_SIZES,
 			};
 		},
 		methods: {
@@ -51,8 +56,12 @@ const StoryTemplate: StoryFn<typeof DrawerSection> = (args) => {
 				@infoClick="infoClicked"
 				@update:isExpanded="isExpandedUpdated"
 			>
-				Default slot
-				<template #uncollapsible>Uncollapsible slot</template>
+				<slot-placeholder label="default slot" />
+				<template #uncollapsible>
+					<slot-placeholder label="uncollapsible slot" :size="SLOT_PLACEHOLDER_SIZES.MEDIUM" /></template>
+				<template #sectionHeaderDefault>
+					<slot-placeholder label="section header default slot" :size="SLOT_PLACEHOLDER_SIZES.SMALL" />
+				</template>
 			</drawer-section>`,
 	};
 };

package/lib/js/components/Drawer/DrawerSection/DrawerSection.vue

@@ -15,9 +15,14 @@
 			:eyebrow="eyebrow"
 			:supporting-text="supportingText"
 			:has-divider="hasDivider"
+			:mobile-layout="SECTION_HEADER_MOBILE_LAYOUTS.HORIZONTAL"
 			@info-click="onInfoClick"
 			@update:is-expanded="onExpandableHeaderClick"
-		/>
+		>
+			<template v-if="$slots.sectionHeaderDefault" #default>
+				<slot name="sectionHeaderDefault" />
+			</template>
+		</ds-section-header>
 
 		<div v-if="isExpandedInternal || !isExpandable">
 			<slot />
@@ -31,6 +36,7 @@ import { IconItem, ICONS } from '../../Icons/Icon';
 import { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES } from '../../Buttons/IconButton';
 import SectionHeader, {
 	SECTION_HEADER_ICON_COLORS,
+	SECTION_HEADER_MOBILE_LAYOUTS,
 	SECTION_HEADER_SIZES,
 	SectionHeaderIconColor,
 	SectionHeaderSize,
@@ -114,11 +120,16 @@ export default defineComponent({
 	// TODO fix me when touching this file
 	// eslint-disable-next-line vue/require-emit-validator
 	emits: ['info-click', 'update:isExpanded'],
+	setup() {
+		return {
+			ICON_BUTTON_COLORS,
+			ICON_BUTTON_SIZES,
+			ICONS,
+			SECTION_HEADER_MOBILE_LAYOUTS,
+		};
+	},
 	data() {
 		return {
-			ICON_BUTTON_COLORS: Object.freeze(ICON_BUTTON_COLORS),
-			ICON_BUTTON_SIZES: Object.freeze(ICON_BUTTON_SIZES),
-			ICONS: Object.freeze(ICONS),
 			isExpandedInternal: this.isExpanded,
 		};
 	},

package/lib/js/components/Menu/MenuItem/MenuItem.consts.ts

@@ -22,13 +22,4 @@ export const MENU_ITEM_BACKGROUND_COLORS = {
 
 export type MenuItemBackgroundColor = Value<typeof MENU_ITEM_BACKGROUND_COLORS>;
 
-export const MENU_ITEM_ACCESSORY_STATES = {
-	DOT: 'dot',
-	// not implemented for now
-	// EXPANDED: 'expanded',
-	// COLLAPSED: 'collapsed',
-};
-
-export type MenuItemAccessoryState = Value<typeof MENU_ITEM_ACCESSORY_STATES>;
-
 export const MENU_ITEM_LEVEL_INJECTION_KEY: InjectionKey<number> = Symbol('menuItemLevel');

package/lib/js/components/Menu/MenuItem/MenuItem.spec.ts

@@ -3,13 +3,13 @@ import { mount, shallowMount } from '@vue/test-utils';
 import { h } from 'vue';
 import MenuItem from './MenuItem.vue';
 import {
-	MENU_ITEM_ACCESSORY_STATES,
 	MENU_ITEM_BACKGROUND_COLORS,
 	MENU_ITEM_LEVEL_INJECTION_KEY,
 	MENU_ITEM_SIZES,
 	MENU_ITEM_STATES,
 } from './MenuItem.consts';
 import { ICONS } from '../../Icons/Icon';
+import { DsIconButton } from '../../../index';
 
 describe('MenuItem', () => {
 	const createComponent = (props = {} as any, options = {}) => {
@@ -182,19 +182,93 @@ describe('MenuItem', () => {
 		});
 	});
 
-	describe('Accessory state', () => {
-		it('does not render accessory when accessoryState is null', () => {
-			const wrapper = createComponent({ accessoryState: null });
+	describe('Expandable', () => {
+		it('does not render expandable icons when isExpandable is false', () => {
+			const wrapper = createComponent({ isExpandable: false });
 
-			expect(wrapper.find('.ds-menuItem__accessory').exists()).toBe(false);
+			expect(wrapper.find('.ds-menuItem__expanderDotWrapper').exists()).toBe(false);
+			expect(wrapper.find('.ds-menuItem__expaneder').exists()).toBe(false);
 		});
 
-		it('renders dot accessory when accessoryState is dot', () => {
+		it('renders dot when isExpandable is true and no children slot set', () => {
 			const wrapper = createComponent({
-				accessoryState: MENU_ITEM_ACCESSORY_STATES.DOT,
+				isExpandable: true,
 			});
 
-			expect(wrapper.find('.ds-menuItem__accessory').exists()).toBe(true);
+			expect(wrapper.find('.ds-menuItem__expanderDotWrapper').exists()).toBe(true);
+			expect(wrapper.find('.ds-menuItem__expaneder').exists()).toBe(false);
+		});
+
+		it('renders chevron right icon button when isExpandable is true and children is set but not render children', () => {
+			const wrapper = createComponent(
+				{
+					isExpandable: true,
+					isExpanded: false,
+				},
+				{
+					slots: {
+						children: '<strong data-test-id="children-identifier">children</strong>',
+					},
+				},
+			);
+
+			expect(wrapper.find('.ds-menuItem__expanderDotWrapper').exists()).toBe(false);
+			const expanderIconButton =
+				wrapper.findComponent<typeof DsIconButton>('.ds-menuItem__expander');
+			expect(expanderIconButton.exists()).toBe(true);
+			expect(expanderIconButton.props().icon).toEqual(ICONS.FA_CHEVRON_RIGHT);
+			expect(wrapper.find('[data-test-id="children-identifier"]').exists()).toBe(false);
+		});
+
+		it('renders chevron down icon button when isExpandable is true and children is set and render it when is expanded', () => {
+			const wrapper = createComponent(
+				{
+					isExpandable: true,
+					isExpanded: true,
+				},
+				{
+					slots: {
+						children: '<strong data-test-id="children-identifier">children</strong>',
+					},
+				},
+			);
+
+			expect(wrapper.find('.ds-menuItem__expanderDotWrapper').exists()).toBe(false);
+			const expanderIconButton =
+				wrapper.findComponent<typeof DsIconButton>('.ds-menuItem__expander');
+			expect(expanderIconButton.exists()).toBe(true);
+			expect(expanderIconButton.props().icon).toEqual(ICONS.FA_CHEVRON_DOWN);
+			expect(wrapper.find('[data-test-id="children-identifier"]').exists()).toBe(true);
+		});
+
+		it('should change children and icon state when clicking on expander icon', async () => {
+			const wrapper = createComponent(
+				{
+					isExpandable: true,
+					isExpanded: false,
+				},
+				{
+					slots: {
+						children: '<strong data-test-id="children-identifier">children</strong>',
+					},
+				},
+			);
+
+			const expanderIconButton =
+				wrapper.findComponent<typeof DsIconButton>('.ds-menuItem__expander');
+			expect(expanderIconButton.exists()).toBe(true);
+			expect(expanderIconButton.props().icon).toEqual(ICONS.FA_CHEVRON_RIGHT);
+			expect(wrapper.find('[data-test-id="children-identifier"]').exists()).toBe(false);
+
+			await expanderIconButton.trigger('click');
+
+			expect(expanderIconButton.props().icon).toEqual(ICONS.FA_CHEVRON_DOWN);
+			expect(wrapper.find('[data-test-id="children-identifier"]').exists()).toBe(true);
+
+			await expanderIconButton.trigger('click');
+
+			expect(expanderIconButton.props().icon).toEqual(ICONS.FA_CHEVRON_RIGHT);
+			expect(wrapper.find('[data-test-id="children-identifier"]').exists()).toBe(false);
 		});
 	});
 
@@ -355,7 +429,7 @@ describe('MenuItem', () => {
 					additionalText: '',
 					index: null,
 					iconLeft: null,
-					accessoryState: null,
+					isExpandable: false,
 				},
 			});
 
@@ -392,14 +466,6 @@ describe('MenuItem', () => {
 			expect(wrapper.find('.ds-menuItem').exists()).toBe(true);
 		});
 
-		it('renders when accessoryState is provided', () => {
-			const wrapper = createComponent({
-				label: '',
-				accessoryState: MENU_ITEM_ACCESSORY_STATES.DOT,
-			});
-			expect(wrapper.find('.ds-menuItem').exists()).toBe(true);
-		});
-
 		it('renders right content section when needed', () => {
 			// Should not render right content by default
 			const wrapper1 = createComponent();