@bethinkpl/design-system 32.0.0 → 33.0.1

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

@@ -3,41 +3,49 @@ import DsChip from '../../Chip/Chip.vue';
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import { toRefs } from 'vue';
 import { ICONS } from '../../Icons/Icon';
-import {
-	MENU_ITEM_ACCESSORY_STATES,
-	MENU_ITEM_BACKGROUND_COLORS,
-	MENU_ITEM_SIZES,
-	MENU_ITEM_STATES,
-} from './MenuItem.consts';
+import SectionHeader, { SECTION_HEADER_SIZES } from '../../Headers/SectionHeader';
+import { MENU_ITEM_BACKGROUND_COLORS, MENU_ITEM_SIZES, MENU_ITEM_STATES } from './MenuItem.consts';
 import DsMenu from '../Menu';
 import SlotPlaceholder, {
 	SLOT_PLACEHOLDER_SIZES,
 } from '../../../../../.storybook/SlotPlaceholder/SlotPlaceholder.vue';
+import { useArgs } from '@storybook/preview-api';
 
 export default {
 	title: 'Components/Menu/MenuItem',
 	component: MenuItem,
 } as Meta<typeof MenuItem>;
 
-const StoryTemplate: StoryFn<typeof MenuItem> = (args) => ({
-	components: { MenuItem, DsChip, SlotPlaceholder },
-	setup() {
-		const reactiveArgs = toRefs(args);
+const StoryTemplate: StoryFn<typeof MenuItem> = (args) => {
+	const [_, updateArgs] = useArgs();
 
-		return {
-			...reactiveArgs,
-			ICONS,
-			SLOT_PLACEHOLDER_SIZES,
-		};
-	},
-	template: `
+	return {
+		components: { MenuItem, DsChip, SlotPlaceholder },
+		setup() {
+			const reactiveArgs = toRefs(args);
+
+			return {
+				...reactiveArgs,
+				ICONS,
+				SLOT_PLACEHOLDER_SIZES,
+			};
+		},
+		methods: {
+			isExpandedUpdated(isExpanded: boolean) {
+				updateArgs({
+					isExpanded,
+				});
+			},
+		},
+		template: `
 		<menu-item :label="label" :additional-text="additionalText" :size="size" :state="state"
 									:icon-left="ICONS[iconLeft]" :icon-right="ICONS[iconRight]" :is-done="isDone"
 									:is-selected="isSelected" :background-color="backgroundColor" :index="index"
 									:is-label-uppercase="isLabelUppercase" :icon-right-rotation="iconRightRotation"
-									:has-selected-icons-color-primary="hasSelectedIconsColorPrimary"
+									:has-selected-accessories-primary="hasSelectedAccessoriesPrimary"
 									:is-selected-interactive="isSelectedInteractive" :level="level"
-									:accessoryState="accessoryState">
+									:is-expandable="isExpandable" :is-expanded="isExpanded"
+				   @update:isExpanded="isExpandedUpdated">
 			<template #labelSlot v-if="labelSlot">
 				<span v-html="labelSlot" />
 			</template>
@@ -45,10 +53,11 @@ const StoryTemplate: StoryFn<typeof MenuItem> = (args) => ({
 				<slot-placeholder label="defaul slot" :size="SLOT_PLACEHOLDER_SIZES.SMALL" />
 			</template>
 			<template #children>
-				<slot-placeholder label="children slot" />
+				<slot-placeholder label="children slot" :size="SLOT_PLACEHOLDER_SIZES.MEDIUM" />
 			</template>
 		</menu-item>`,
-});
+	};
+};
 
 export const Interactive = StoryTemplate.bind({});
 
@@ -65,10 +74,11 @@ const args = {
 	label: 'Menu Item label',
 	isLabelUppercase: false,
 	state: MENU_ITEM_STATES.DEFAULT,
-	accessoryState: null,
+	isExpandable: false,
+	isExpanded: false,
 	isSelected: false,
 	isDone: false,
-	hasSelectedIconsColorPrimary: true,
+	hasSelectedAccessoriesPrimary: true,
 	isSelectedInteractive: false,
 } as Args;
 
@@ -109,9 +119,11 @@ const argTypes = {
 		control: 'select',
 		options: Object.values(MENU_ITEM_STATES),
 	},
-	accessoryState: {
-		control: 'select',
-		options: [null, ...Object.values(MENU_ITEM_ACCESSORY_STATES)],
+	isExpandable: {
+		control: 'boolean',
+	},
+	isExpanded: {
+		control: 'boolean',
 	},
 	isSelected: {
 		control: 'boolean',
@@ -119,7 +131,7 @@ const argTypes = {
 	isDone: {
 		control: 'boolean',
 	},
-	hasSelectedIconsColorPrimary: {
+	hasSelectedAccessoriesPrimary: {
 		control: 'boolean',
 	},
 	isSelectedInteractive: {
@@ -137,6 +149,31 @@ Interactive.parameters = {
 	},
 };
 
+const SectionHeaderMenuTemplate: StoryFn<typeof MenuItem> = (args) => ({
+	components: { MenuItem, DsMenu, SectionHeader },
+	setup() {
+		return {
+			SECTION_HEADER_SIZES,
+		};
+	},
+	template: `
+		<menu-item label="level 1">
+			<template #children>
+				<section-header title="Section Header XXS Level 2" :size="SECTION_HEADER_SIZES.XX_SMALL" :has-divider="false" />
+				<menu-item label="level 2">
+					<template #children>
+						<menu-item label="level 3 first item" />
+						<section-header title="Section Header XXS Level 3" :size="SECTION_HEADER_SIZES.XX_SMALL" :has-divider="false" />
+						<menu-item label="level 3 second item" />
+					</template>
+				</menu-item>
+				<menu-item label="level 2 another item" />
+			</template>
+		</menu-item>`,
+});
+
+export const SectionHeaderMenu = SectionHeaderMenuTemplate.bind({});
+
 const NestedMenuTemplate: StoryFn<typeof MenuItem> = (args) => ({
 	components: { MenuItem, DsMenu },
 	template: `
@@ -175,3 +212,42 @@ const NestedMenuTemplate: StoryFn<typeof MenuItem> = (args) => ({
 		</menu-item>`,
 });
 export const Nested = NestedMenuTemplate.bind({});
+
+const NestedExpandableMenuTemplate: StoryFn<typeof MenuItem> = (args) => ({
+	components: { MenuItem, DsMenu },
+	template: `
+		<menu-item is-expandable label="level 1">
+			<template #children>
+				<ds-menu>
+					<menu-item is-expandable label="level 2" />
+					<menu-item is-expandable label="level 2">
+						<template #children>
+							<ds-menu>
+								<menu-item is-expandable label="level 3">
+									<template #children>
+										<ds-menu>
+											<menu-item is-expandable label="level 4">
+												<template #children>
+													<ds-menu>
+														<menu-item is-expandable label="level 5">
+															<template #children>
+																<ds-menu>
+																	<menu-item is-expandable label="level 6" />
+																</ds-menu>
+															</template>
+														</menu-item>
+													</ds-menu>
+												</template>
+											</menu-item>
+										</ds-menu>
+									</template>
+								</menu-item>
+							</ds-menu>
+						</template>
+					</menu-item>
+					<menu-item is-expandable label="level 2" />
+				</ds-menu>
+			</template>
+		</menu-item>`,
+});
+export const NestedExpandable = NestedExpandableMenuTemplate.bind({});

package/lib/js/components/Menu/MenuItem/MenuItem.vue

@@ -11,49 +11,77 @@
 					'-ds-disabled': isDisabled,
 					'-ds-medium': size === MENU_ITEM_SIZES.MEDIUM,
 					'-ds-selected': isSelected,
+					'-ds-expandable': isExpandable,
 					'-ds-hoverable': !isSelected || isSelectedInteractive,
 					'-ds-backgroundNeutral':
 						backgroundColor === MENU_ITEM_BACKGROUND_COLORS.NEUTRAL,
 				},
 			]"
 		>
-			<span class="ds-menuItem__content">
-				<ds-icon
-					v-if="accessoryState === MENU_ITEM_ACCESSORY_STATES.DOT"
-					:class="['ds-menuItem__accessory', { '-ds-active': isSelected }]"
-					:icon="ICONS.FA_DOT_SOLID"
-					:size="ICON_SIZES.XXX_SMALL"
-				/>
-				<span
-					v-if="index !== null"
-					class="ds-menuItem__index"
-					:class="{ '-ds-active': isSelected }"
-				>
-					{{ index }}.
-				</span>
-				<ds-icon
-					v-if="iconLeft"
-					class="ds-menuItem__icon"
-					:class="{
-						'-ds-active': isSelected && hasSelectedIconsColorPrimary,
-					}"
-					:icon="iconLeft"
-					:size="ICON_SIZES.X_SMALL"
-				/>
-				<span class="ds-menuItem__text">
-					<span class="ds-menuItem__label" :class="{ '-ds-uppercase': isLabelUppercase }">
-						<template v-if="$slots.labelSlot">
-							<slot name="labelSlot" />
-						</template>
-						<template v-else>
-							{{ label }}
-						</template>
-					</span>
-					<span v-if="additionalText" class="ds-menuItem__additionalText">
-						{{ additionalText }}
+			<span class="ds-menuItem__contentWrapper">
+				<span class="ds-menuItem__content">
+					<span class="ds-menuItem__text">
+						<ds-icon-button
+							v-if="isExpandable && $slots.children"
+							class="ds-menuItem__expander"
+							:color="ICON_BUTTON_COLORS.NEUTRAL"
+							:radius="BUTTON_RADIUSES.ROUNDED"
+							:icon="expanderIcon"
+							:size="ICON_BUTTON_SIZES.X_SMALL"
+							:state="
+								isDisabled
+									? ICON_BUTTON_STATES.DISABLED
+									: ICON_BUTTON_STATES.DEFAULT
+							"
+							:touchable="false"
+							@click.stop="isExpanded = !isExpanded"
+						/>
+						<span
+							v-else-if="isExpandable && !$slots.children"
+							class="ds-menuItem__expanderDotWrapper"
+						>
+							<ds-icon :icon="ICONS.FA_DOT_SOLID" :size="ICON_SIZES.XX_SMALL" />
+						</span>
+						<span class="ds-menuItem__itemsWrapper">
+							<span
+								v-if="index !== null"
+								class="ds-menuItem__index"
+								:class="{
+									'-ds-active': isSelected && hasSelectedAccessoriesPrimary,
+								}"
+							>
+								{{ index }}.
+							</span>
+							<ds-icon
+								v-if="iconLeft"
+								class="ds-menuItem__icon"
+								:class="{
+									'-ds-active': isSelected && hasSelectedAccessoriesPrimary,
+								}"
+								:icon="iconLeft"
+								:size="ICON_SIZES.X_SMALL"
+							/>
+							<span class="ds-menuItem__labelWrapper">
+								<span
+									class="ds-menuItem__label"
+									:class="{ '-ds-uppercase': isLabelUppercase }"
+								>
+									<template v-if="$slots.labelSlot">
+										<slot name="labelSlot" />
+									</template>
+									<template v-else>
+										{{ label }}
+									</template>
+								</span>
+								<span v-if="additionalText" class="ds-menuItem__additionalText">
+									{{ additionalText }}
+								</span>
+							</span>
+						</span>
 					</span>
 				</span>
 			</span>
+
 			<span
 				v-if="shouldRenderRightContent"
 				class="ds-menuItem__rightContent"
@@ -72,7 +100,7 @@
 					v-else-if="iconRight"
 					class="ds-menuItem__icon"
 					:class="{
-						'-ds-active': isSelected && hasSelectedIconsColorPrimary,
+						'-ds-active': isSelected && hasSelectedAccessoriesPrimary,
 					}"
 					:icon="iconRight"
 					:size="ICON_SIZES.X_SMALL"
@@ -80,7 +108,7 @@
 				></ds-icon>
 			</span>
 		</component>
-		<slot name="children" />
+		<slot v-if="!isExpandable || isExpanded" name="children" />
 	</li>
 </template>
 
@@ -92,29 +120,40 @@
 
 .ds-menuItem {
 	$root: &;
-	$menu-item-horizontal-padding: $space-2xs;
+	$menu-item-horizontal-padding: $space-xs;
+	$menu-item-expandable-horizontal-padding: $space-4xs;
 
 	@for $i from 2 through 6 {
 		&.-ds-level#{$i} {
 			padding-left: $menu-item-horizontal-padding + ($i - 1) * $space-2xs;
+
+			&.-ds-expandable {
+				padding-left: $menu-item-expandable-horizontal-padding + ($i - 1) * $space-2xs;
+			}
 		}
 	}
 
+	align-items: center;
 	background-color: $color-neutral-background-weak;
 	border-radius: $radius-s;
 	column-gap: $space-2xs;
 	display: flex;
 	justify-content: space-between;
-	padding: $space-s $menu-item-horizontal-padding;
+	min-height: 40px;
+	padding: $space-2xs $space-2xs $space-2xs $menu-item-horizontal-padding;
 	text-decoration: none;
 
+	&.-ds-expandable {
+		padding-left: $menu-item-expandable-horizontal-padding;
+	}
+
 	&__wrapper {
 		list-style-type: none;
 	}
 
 	&__rightContent,
-	&__content {
-		align-items: flex-start;
+	&__contentWrapper {
+		align-items: center;
 		display: flex;
 		max-width: 100%;
 	}
@@ -127,17 +166,45 @@
 		}
 	}
 
-	&__content {
+	&__contentWrapper {
 		overflow-x: clip;
 	}
 
-	&__accessory {
+	&__content {
+		align-items: flex-start;
+		display: flex;
+		flex: 1 0 0;
+		flex-direction: column;
+	}
+
+	&__text {
+		align-items: flex-start;
+		align-self: stretch;
+		display: flex;
+	}
+
+	&__expander {
+		align-items: center;
 		color: $color-neutral-icon-weak;
-		padding: $space-4xs $space-5xs;
+		display: flex;
+		margin-right: $space-5xs;
+	}
 
-		&.-ds-active {
-			color: $color-primary-icon;
-		}
+	&__expanderDotWrapper {
+		align-items: center;
+		color: $color-neutral-icon-weak;
+		display: inline-flex;
+		height: 20px;
+		justify-content: center;
+		margin-right: $space-5xs;
+		width: 20px;
+	}
+
+	&__itemsWrapper {
+		align-items: flex-start;
+		display: flex;
+		flex: 1 0 0;
+		padding: $space-5xs 0;
 	}
 
 	&__index {
@@ -151,7 +218,7 @@
 		}
 	}
 
-	&__text {
+	&__labelWrapper {
 		@include label-l-default-regular; // it fixes whole component height
 
 		// To hide scrollbar in case Chrome renders __label higher than line-height - there are some problems with fraction of a pixel on Retina screens
@@ -186,7 +253,7 @@
 
 	&__icon {
 		color: $color-neutral-icon-weak;
-		margin-right: $space-3xs;
+		margin-right: $space-4xs;
 
 		&.-ds-active {
 			color: $color-primary-icon;
@@ -231,7 +298,8 @@
 	}
 
 	&.-ds-medium {
-		padding: $space-s $space-xs;
+		min-height: 48px;
+		padding: $space-s $space-2xs $space-s $space-xs;
 
 		#{$root}__label {
 			@include label-l-default-bold;
@@ -255,17 +323,21 @@
 <script setup lang="ts">
 import { computed, inject, provide } from 'vue';
 import DsIcon, { ICON_SIZES, IconItem, ICONS } from '../../Icons/Icon';
+import DsIconButton, {
+	ICON_BUTTON_COLORS,
+	ICON_BUTTON_SIZES,
+	ICON_BUTTON_STATES,
+} from '../../Buttons/IconButton';
 import {
-	MENU_ITEM_ACCESSORY_STATES,
 	MENU_ITEM_BACKGROUND_COLORS,
 	MENU_ITEM_LEVEL_INJECTION_KEY,
 	MENU_ITEM_SIZES,
 	MENU_ITEM_STATES,
-	type MenuItemAccessoryState,
 	type MenuItemBackgroundColor,
 	type MenuItemSize,
 	type MenuItemState,
-} from './MenuItem.consts'; // DS don't have vue-router installed, so we define a loose type which should match RouteLocationRaw
+} from './MenuItem.consts';
+import { BUTTON_RADIUSES } from '../../Buttons/Button';
 
 // DS don't have vue-router installed, so we define a loose type which should match RouteLocationRaw
 type RouterLocation = string | Record<string, unknown>;
@@ -283,10 +355,10 @@ const {
 	isLabelUppercase = false,
 	additionalText = '',
 	state = MENU_ITEM_STATES.DEFAULT,
-	accessoryState = null,
+	isExpandable = false,
 	isSelected = false,
 	isDone = false,
-	hasSelectedIconsColorPrimary = true,
+	hasSelectedAccessoriesPrimary = true,
 	isSelectedInteractive = false,
 	level = null,
 } = defineProps<{
@@ -302,10 +374,10 @@ const {
 	isLabelUppercase?: boolean;
 	additionalText?: string;
 	state?: MenuItemState;
-	accessoryState?: MenuItemAccessoryState | null;
+	isExpandable?: boolean;
 	isSelected?: boolean;
 	isDone?: boolean;
-	hasSelectedIconsColorPrimary?: boolean;
+	hasSelectedAccessoriesPrimary?: boolean;
 	isSelectedInteractive?: boolean;
 	level?: number | null;
 }>();
@@ -316,6 +388,8 @@ const slots = defineSlots<{
 	default?: () => any;
 }>();
 
+const isExpanded = defineModel<boolean>('isExpanded');
+
 const as = computed(() => {
 	if (href) {
 		return 'a';
@@ -361,7 +435,6 @@ const shouldRenderComponent = computed(
 		label ||
 		additionalText ||
 		slots.labelSlot ||
-		accessoryState ||
 		index !== null ||
 		iconLeft ||
 		shouldRenderRightContent.value,
@@ -373,5 +446,13 @@ const levelClass = computed(() => {
 	return `-ds-level${limitedLevel}`;
 });
 
+const expanderIcon = computed(() => {
+	if (!slots.children) {
+		return ICONS.FA_DOT_SOLID;
+	}
+
+	return isExpanded.value ? ICONS.FA_CHEVRON_DOWN : ICONS.FA_CHEVRON_RIGHT;
+});
+
 provide(MENU_ITEM_LEVEL_INJECTION_KEY, levelComputed.value + 1);
 </script>

package/lib/js/icons/fontawesome.ts

@@ -11,10 +11,13 @@ import { faArrowPointer } from '@fortawesome/pro-regular-svg-icons/faArrowPointe
 import { faArrowRightFromBracket } from '@fortawesome/pro-regular-svg-icons/faArrowRightFromBracket';
 import { faArrowRotateLeft } from '@fortawesome/pro-regular-svg-icons/faArrowRotateLeft';
 import { faArrowRotateRight } from '@fortawesome/pro-regular-svg-icons/faArrowRotateRight';
+import { faArrowsFromDottedLine } from '@fortawesome/pro-regular-svg-icons/faArrowsFromDottedLine';
 import { faArrowsMaximize } from '@fortawesome/pro-regular-svg-icons/faArrowsMaximize';
 import { faArrowsRotate } from '@fortawesome/pro-regular-svg-icons/faArrowsRotate';
+import { faArrowsToDottedLine } from '@fortawesome/pro-regular-svg-icons/faArrowsToDottedLine';
 import { faArrowUpRightAndArrowDownLeftFromCenter } from '@fortawesome/pro-regular-svg-icons/faArrowUpRightAndArrowDownLeftFromCenter';
 import { faArrowUpRightFromSquare } from '@fortawesome/pro-regular-svg-icons/faArrowUpRightFromSquare';
+import { faArrowLeftToDottedLine } from '@fortawesome/pro-regular-svg-icons/faArrowLeftToDottedLine';
 import { faAtom as fasAtom } from '@fortawesome/pro-solid-svg-icons/faAtom';
 import { faBadgePercent } from '@fortawesome/pro-regular-svg-icons/faBadgePercent';
 import { faBan } from '@fortawesome/pro-regular-svg-icons/faBan';
@@ -259,6 +262,7 @@ export const FONTAWESOME_ICONS = {
 	FA_ARROW_DOWN_SOLID: fasArrowDown,
 	FA_ARROW_DOWN_TO_LINE: faArrowDownToLine,
 	FA_ARROW_LEFT_SOLID: fasArrowLeft,
+	FA_ARROW_LEFT_TO_DOTTED_LINE: faArrowLeftToDottedLine,
 	FA_ARROW_POINTER: faArrowPointer,
 	FA_ARROW_RIGHT_FROM_BRACKET: faArrowRightFromBracket,
 	FA_ARROW_RIGHT_SOLID: fasArrowRight,
@@ -269,8 +273,10 @@ export const FONTAWESOME_ICONS = {
 	FA_ARROW_UP_RIGHT_FROM_SQUARE: faArrowUpRightFromSquare,
 	FA_ARROW_UP_SOLID: fasArrowUp,
 	FA_ARROWS_LEFT_RIGHT_SOLID: fasArrowsLeftRight,
+	FA_ARROWS_FROM_DOTTED_LINE: faArrowsFromDottedLine,
 	FA_ARROWS_MAXIMIZE: faArrowsMaximize,
 	FA_ARROWS_ROTATE: faArrowsRotate,
+	FA_ARROWS_TO_DOTTED_LINE: faArrowsToDottedLine,
 	FA_ATOM_SOLID: fasAtom,
 	FA_BADGE_PERCENT: faBadgePercent,
 	FA_BAN: faBan,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "32.0.0",
+  "version": "33.0.1",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",