@bethinkpl/design-system 30.4.3 → 31.0.0

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

@@ -0,0 +1,377 @@
+<template>
+	<li class="ds-menuItem__wrapper">
+		<component
+			:is="as"
+			v-if="shouldRenderComponent"
+			v-bind="bindings"
+			:class="[
+				'ds-menuItem',
+				levelClass,
+				{
+					'-ds-disabled': isDisabled,
+					'-ds-medium': size === MENU_ITEM_SIZES.MEDIUM,
+					'-ds-selected': isSelected,
+					'-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>
+				</span>
+			</span>
+			<span
+				v-if="shouldRenderRightContent"
+				class="ds-menuItem__rightContent"
+				:class="{ '-ds-centeredContent': $slots.default }"
+			>
+				<template v-if="$slots.default">
+					<slot />
+				</template>
+				<ds-icon
+					v-if="isDone"
+					class="ds-menuItem__icon -ds-active"
+					:icon="ICONS.FA_CHECK_SOLID"
+					:size="ICON_SIZES.X_SMALL"
+				/>
+				<ds-icon
+					v-else-if="iconRight"
+					class="ds-menuItem__icon"
+					:class="{
+						'-ds-active': isSelected && hasSelectedIconsColorPrimary,
+					}"
+					:icon="iconRight"
+					:size="ICON_SIZES.X_SMALL"
+					:rotation="iconRightRotation"
+				></ds-icon>
+			</span>
+		</component>
+		<slot name="children" />
+	</li>
+</template>
+
+<style scoped lang="scss">
+@import '../../../../styles/settings/radiuses';
+@import '../../../../styles/settings/spacings';
+@import '../../../../styles/settings/colors/tokens';
+@import '../../../../styles/settings/typography/tokens';
+
+.ds-menuItem {
+	$root: &;
+	$menu-item-padding: $space-xs;
+
+	@for $i from 2 through 6 {
+		&.-ds-level#{$i} {
+			padding-left: $menu-item-padding + ($i - 1) * $space-3xs;
+		}
+	}
+
+	background-color: $color-neutral-background-weak;
+	border-radius: $radius-s;
+	column-gap: $space-2xs;
+	display: flex;
+	justify-content: space-between;
+	padding: $menu-item-padding;
+	text-decoration: none;
+
+	&__wrapper {
+		list-style-type: none;
+	}
+
+	&__rightContent,
+	&__content {
+		align-items: flex-start;
+		display: flex;
+		max-width: 100%;
+	}
+
+	&__rightContent {
+		column-gap: $space-2xs;
+
+		&.-ds-centeredContent {
+			align-items: center;
+		}
+	}
+
+	&__content {
+		overflow-x: clip;
+	}
+
+	&__accessory {
+		color: $color-neutral-icon-weak;
+		padding: $space-4xs $space-5xs;
+
+		&.-ds-active {
+			color: $color-primary-icon;
+		}
+	}
+
+	&__index {
+		@include label-l-default-bold;
+
+		color: $color-neutral-text-weak;
+		margin-right: $space-3xs;
+
+		&.-ds-active {
+			color: $color-primary-text;
+		}
+	}
+
+	&__text {
+		@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
+		// https://bethinkteam.slack.com/archives/C012R8RM3A4/p1727776466931369?thread_ts=1727775029.076259&cid=C012R8RM3A4
+		overflow: hidden;
+	}
+
+	&__label {
+		@include label-l-default-regular;
+
+		color: $color-neutral-text-heavy;
+
+		&.-ds-uppercase {
+			@include label-l-default-regular-uppercase;
+
+			#{$root}.-ds-selected & {
+				@include label-l-default-bold-uppercase;
+			}
+		}
+
+		#{$root}.-ds-selected & {
+			@include label-l-default-bold;
+		}
+	}
+
+	&__additionalText {
+		@include label-m-default-bold;
+
+		color: $color-neutral-text-weak;
+		margin-left: $space-4xs;
+	}
+
+	&__icon {
+		color: $color-neutral-icon-weak;
+		margin-right: $space-3xs;
+
+		&.-ds-active {
+			color: $color-primary-icon;
+		}
+	}
+
+	&.-ds-hoverable:hover {
+		background-color: $color-neutral-background-weak-hovered;
+		cursor: pointer;
+	}
+
+	&.-ds-selected {
+		background-color: $color-neutral-background;
+
+		&.-ds-hoverable:hover {
+			background-color: $color-neutral-background-hovered;
+		}
+	}
+
+	&.-ds-disabled {
+		pointer-events: none;
+
+		#{$root}__icon {
+			color: $color-neutral-icon-weak-disabled;
+
+			&.-ds-active {
+				color: $color-primary-icon-disabled;
+			}
+		}
+
+		#{$root}__index {
+			color: $color-neutral-text-weak-disabled;
+
+			&.-ds-active {
+				color: $color-primary-text-disabled;
+			}
+		}
+
+		#{$root}__label {
+			color: $color-neutral-text-heavy-disabled;
+		}
+	}
+
+	&.-ds-medium {
+		padding: $space-s $space-xs;
+
+		#{$root}__label {
+			@include label-l-default-bold;
+
+			&.-ds-uppercase {
+				@include label-l-default-bold-uppercase;
+			}
+		}
+	}
+
+	&.-ds-backgroundNeutral {
+		background-color: $color-neutral-background;
+
+		&.-ds-hoverable:hover {
+			background-color: $color-neutral-background-hovered;
+		}
+	}
+}
+</style>
+
+<script setup lang="ts">
+import { computed, inject, provide } from 'vue';
+import DsIcon, { ICON_SIZES, IconItem, ICONS } from '../../Icons/Icon';
+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
+
+// DS don't have vue-router installed, so we define a loose type which should match RouteLocationRaw
+type RouterLocation = string | Record<string, unknown>;
+
+const {
+	href = '',
+	to = '',
+	size = MENU_ITEM_SIZES.SMALL,
+	backgroundColor = MENU_ITEM_BACKGROUND_COLORS.NEUTRAL_WEAK,
+	iconLeft = null,
+	iconRight = null,
+	iconRightRotation = null,
+	index = null,
+	label = '',
+	isLabelUppercase = false,
+	additionalText = '',
+	state = MENU_ITEM_STATES.DEFAULT,
+	accessoryState = null,
+	isSelected = false,
+	isDone = false,
+	hasSelectedIconsColorPrimary = true,
+	isSelectedInteractive = false,
+	level = null,
+} = defineProps<{
+	href?: string;
+	to?: RouterLocation;
+	size?: MenuItemSize;
+	backgroundColor?: MenuItemBackgroundColor;
+	iconLeft?: IconItem | null;
+	iconRight?: IconItem | null;
+	iconRightRotation?: 90 | 180 | 270 | null;
+	index?: number | null;
+	label?: string;
+	isLabelUppercase?: boolean;
+	additionalText?: string;
+	state?: MenuItemState;
+	accessoryState?: MenuItemAccessoryState | null;
+	isSelected?: boolean;
+	isDone?: boolean;
+	hasSelectedIconsColorPrimary?: boolean;
+	isSelectedInteractive?: boolean;
+	level?: number | null;
+}>();
+
+const slots = defineSlots<{
+	children?: () => any;
+	labelSlot?: () => any;
+	default?: () => any;
+}>();
+
+const as = computed(() => {
+	if (href) {
+		return 'a';
+	}
+	if (to) {
+		return 'router-link';
+	}
+	return 'span';
+});
+
+const bindings = computed(() => {
+	if (href) {
+		return { href };
+	}
+	if (to) {
+		return { to };
+	}
+	return {};
+});
+
+const isDisabled = computed(() => {
+	return state === MENU_ITEM_STATES.DISABLED;
+});
+
+const levelComputed = computed(() => {
+	const injectedLevel = inject(MENU_ITEM_LEVEL_INJECTION_KEY, null);
+
+	if (level !== null) {
+		return level;
+	}
+
+	if (injectedLevel !== null) {
+		return injectedLevel;
+	}
+
+	return 1;
+});
+
+const shouldRenderRightContent = computed(() => slots.default || isDone || iconRight);
+
+const shouldRenderComponent = computed(
+	() =>
+		label ||
+		additionalText ||
+		slots.labelSlot ||
+		accessoryState ||
+		index !== null ||
+		iconLeft ||
+		shouldRenderRightContent.value,
+);
+
+const levelClass = computed(() => {
+	const limitedLevel = levelComputed.value > 6 ? 6 : levelComputed.value;
+
+	return `-ds-level${limitedLevel}`;
+});
+
+provide(MENU_ITEM_LEVEL_INJECTION_KEY, levelComputed.value + 1);
+</script>

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

@@ -0,0 +1,4 @@
+import MenuItem from './MenuItem.vue';
+
+export default MenuItem;
+export * from './MenuItem.consts';

package/lib/js/icons/fontawesome.ts

@@ -222,6 +222,7 @@ import { faUserDoctor as fasUserDoctor } from '@fortawesome/pro-solid-svg-icons/
 import { faVideo as fasVideo } from '@fortawesome/pro-solid-svg-icons/faVideo';
 import { faVolumeHigh as fasVolumeHigh } from '@fortawesome/pro-solid-svg-icons/faVolumeHigh';
 import { faCircleDot as fasCircleDot } from '@fortawesome/pro-solid-svg-icons/faCircleDot';
+import { faDot as fasDot } from '@fortawesome/pro-solid-svg-icons/faDot';
 import { faFlagCheckered as fasFlagCheckered } from '@fortawesome/pro-solid-svg-icons/faFlagCheckered';
 
 import { faChevronLeft as falChevronLeft } from '@fortawesome/pro-light-svg-icons/faChevronLeft';
@@ -343,6 +344,7 @@ export const FONTAWESOME_ICONS = {
 	FA_CREDIT_CARD: faCreditCard,
 	FA_DNA_SOLID: fasDna,
 	FA_DOT_CIRCLE_SOLID: fasCircleDot,
+	FA_DOT_SOLID: fasDot,
 	FA_EARTH_AMERICAS: faEarthAmericas,
 	FA_ELLIPSIS_VERTICAL: faEllipsisVertical,
 	FA_ELLIPSIS: faEllipsis,

package/lib/js/index.ts

@@ -100,13 +100,14 @@ export { default as DrawerTile } from './components/Drawer/DrawerTile/DrawerTile
 export { default as DsDrawerTile } from './components/Drawer/DrawerTile/DrawerTile.vue';
 export { default as DrawerSection } from './components/Drawer/DrawerSection/DrawerSection.vue';
 export { default as DsDrawerSection } from './components/Drawer/DrawerSection/DrawerSection.vue';
-export { default as OutlineItem } from './components/Outline/OutlineItem';
-export { default as DsOutlineItem } from './components/Outline/OutlineItem';
-export * from './components/Outline/OutlineItem/OutlineItem.consts';
-export { default as OutlineDivider } from './components/Outline/OutlineDivider';
-export { default as DsOutlineDivider } from './components/Outline/OutlineDivider';
-export { default as OutlineSectionHeader } from './components/Outline/OutlineSectionHeader';
-export { default as DsOutlineSectionHeader } from './components/Outline/OutlineSectionHeader';
+export { default as Menu } from './components/Menu/Menu';
+export { default as DsMenu } from './components/Menu/Menu';
+export * from './components/Menu/Menu/Menu.consts';
+export { default as MenuItem } from './components/Menu/MenuItem';
+export { default as DsMenuItem } from './components/Menu/MenuItem';
+export * from './components/Menu/MenuItem/MenuItem.consts';
+export { default as MenuDivider } from './components/Menu/MenuDivider';
+export { default as DsMenuDivider } from './components/Menu/MenuDivider';
 export { default as Chip } from './components/Chip';
 export { default as DsChip } from './components/Chip';
 export * from './components/Chip/Chip.consts';

package/package.json

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