@bethinkpl/design-system 34.2.2 → 35.0.1

package/lib/js/components/SelectList/SelectListItem/SelectListItem.stories.ts

@@ -1,5 +1,8 @@
 import SelectListItem from './SelectListItem.vue';
 import { ICONS } from '../../Icons/Icon';
+import SlotPlaceholder, {
+	SLOT_PLACEHOLDER_SIZES,
+} from '../../../../../.storybook/SlotPlaceholder/SlotPlaceholder.vue';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import {
@@ -14,27 +17,30 @@ export default {
 } as Meta<typeof SelectListItem>;
 
 const StoryTemplate: StoryFn<typeof SelectListItem> = (args) => ({
-	components: { SelectListItem },
+	components: { SelectListItem, SlotPlaceholder },
 	setup() {
-		return args;
+		return {
+			args,
+			ICONS,
+			SLOT_PLACEHOLDER_SIZES,
+		};
 	},
 	template: `
 			<select-list-item
-					:icon-left="ICONS[iconLeft]"
-					:label="label"
-					:eyebrow-text="eyebrowText"
-					:is-eyebrow-text-uppercase="isEyebrowTextUppercase"
-					:is-selected="isSelected"
-					:selection-mode="selectionMode"
-					:size="size"
-					:state="state"
-			/>
+					:icon-left="ICONS[args.iconLeft]"
+					:label="args.label"
+					:eyebrow-text="args.eyebrowText"
+					:is-eyebrow-text-uppercase="args.isEyebrowTextUppercase"
+					:is-selected="args.isSelected"
+					:selection-mode="args.selectionMode"
+					:size="args.size"
+					:state="args.state"
+			>
+				<template v-if="args.accessorySlot" #accessory>
+					<slot-placeholder :size="SLOT_PLACEHOLDER_SIZES.SMALL" :label="args.accessorySlot" />
+				</template>
+			</select-list-item>
     `,
-	data() {
-		return {
-			ICONS: Object.freeze(ICONS),
-		};
-	},
 });
 
 export const Interactive = StoryTemplate.bind({});
@@ -48,6 +54,7 @@ const args = {
 	state: SELECT_LIST_ITEM_STATES.DEFAULT,
 	isSelected: false,
 	selectionMode: SELECT_LIST_ITEM_SELECTION_MODE.SELECT_ONLY,
+	accessorySlot: 'accessory',
 } as Args;
 
 const argTypes = {
@@ -67,6 +74,9 @@ const argTypes = {
 		control: 'select',
 		options: Object.values(SELECT_LIST_ITEM_STATES),
 	},
+	accessorySlot: {
+		control: 'text',
+	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;

package/lib/js/components/SelectList/SelectListItem/SelectListItem.vue

@@ -10,6 +10,8 @@
 		}"
 		:title="label"
 	>
+		<slot name="accessory" />
+
 		<ds-icon
 			v-if="iconLeft || isLoading"
 			class="ds-selectListItem__iconLeft"
@@ -54,6 +56,7 @@
 	color: $color-neutral-text-heavy;
 	cursor: pointer;
 	display: flex;
+	gap: $space-3xs;
 	min-height: $minHeight;
 	padding: $space-xs;
 
@@ -100,7 +103,6 @@
 
 	&__iconLeft {
 		color: $color-neutral-icon;
-		margin-right: $space-3xs;
 	}
 
 	&__iconRight {
@@ -160,7 +162,8 @@
 }
 </style>
 
-<script lang="ts">
+<script setup lang="ts">
+import { computed } from 'vue';
 import {
 	SELECT_LIST_ITEM_SELECTION_MODE,
 	SELECT_LIST_ITEM_SIZES,
@@ -169,75 +172,28 @@ import {
 	SelectListItemSize,
 	SelectListItemState,
 } from './SelectListItem.consts';
-import DsIcon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
-import { defineComponent, toRaw } from 'vue';
-
-export default defineComponent({
-	name: 'SelectListItem',
-	components: {
-		DsIcon,
-	},
-	props: {
-		iconLeft: {
-			type: Object,
-			default: null,
-			validator(icon) {
-				return Object.values(ICONS).includes(toRaw(icon));
-			},
-		},
-		isSelected: {
-			type: Boolean,
-			default: false,
-		},
-		label: {
-			type: String,
-			required: true,
-		},
-		eyebrowText: {
-			type: String,
-			default: '',
-		},
-		isEyebrowTextUppercase: {
-			type: Boolean,
-			default: false,
-		},
-		selectionMode: {
-			type: String,
-			default: SELECT_LIST_ITEM_SELECTION_MODE.SELECT_ONLY,
-			validator(selectionMode: SelectListItemSelectionMode) {
-				return Object.values(SELECT_LIST_ITEM_SELECTION_MODE).includes(selectionMode);
-			},
-		},
-		size: {
-			type: String,
-			default: SELECT_LIST_ITEM_SIZES.SMALL,
-			validator(size: SelectListItemSize) {
-				return Object.values(SELECT_LIST_ITEM_SIZES).includes(size);
-			},
-		},
-		state: {
-			type: String,
-			default: SELECT_LIST_ITEM_STATES.DEFAULT,
-			validator(state: SelectListItemState) {
-				return Object.values(SELECT_LIST_ITEM_STATES).includes(state);
-			},
-		},
-	},
-	data() {
-		return {
-			ICON_SIZES: Object.freeze(ICON_SIZES),
-			ICONS: Object.freeze(ICONS),
-			SELECT_LIST_ITEM_SELECTION_MODE: Object.freeze(SELECT_LIST_ITEM_SELECTION_MODE),
-			SELECT_LIST_ITEM_STATES: Object.freeze(SELECT_LIST_ITEM_STATES),
-		};
-	},
-	computed: {
-		isLoading(): boolean {
-			return this.state === SELECT_LIST_ITEM_STATES.LOADING;
-		},
-		isDisabled(): boolean {
-			return this.state === SELECT_LIST_ITEM_STATES.DISABLED;
-		},
-	},
-});
+import DsIcon, { ICON_SIZES, ICONS, IconItem } from '../../Icons/Icon';
+
+const {
+	iconLeft = null,
+	isSelected = false,
+	label,
+	eyebrowText = '',
+	isEyebrowTextUppercase = false,
+	selectionMode = SELECT_LIST_ITEM_SELECTION_MODE.SELECT_ONLY,
+	size = SELECT_LIST_ITEM_SIZES.SMALL,
+	state = SELECT_LIST_ITEM_STATES.DEFAULT,
+} = defineProps<{
+	iconLeft?: IconItem | null;
+	isSelected?: boolean;
+	label: string;
+	eyebrowText?: string;
+	isEyebrowTextUppercase?: boolean;
+	selectionMode?: SelectListItemSelectionMode;
+	size?: SelectListItemSize;
+	state?: SelectListItemState;
+}>();
+
+const isLoading = computed(() => state === SELECT_LIST_ITEM_STATES.LOADING);
+const isDisabled = computed(() => state === SELECT_LIST_ITEM_STATES.DISABLED);
 </script>

package/lib/js/components/SelectList/SelectListItemContainer/SelectListItemContainer.stories.ts

@@ -0,0 +1,35 @@
+import SelectListItemContainer from './SelectListItemContainer.vue';
+import Tile from '../../Tile';
+import { TILE_STATES } from '../../Tile';
+
+import { Meta, StoryFn } from '@storybook/vue3';
+
+export default {
+	title: 'Components/SelectList/SelectListItemContainer',
+	component: SelectListItemContainer,
+} as Meta<typeof SelectListItemContainer>;
+
+const StoryTemplate: StoryFn<typeof SelectListItemContainer> = () => ({
+	components: { SelectListItemContainer, DsTile: Tile },
+	template: `
+<select-list-item-container>
+	<ds-tile
+		text="this is a text text"
+		eyebrow-text="this is an eyebrowText text"
+		additional-text="this is some additionalText"
+		:interactive="false"
+		:state="TILE_STATES.DEFAULT"
+	/>
+</select-list-item-container>
+	`,
+	data: () => ({ TILE_STATES }),
+});
+
+export const Default = StoryTemplate.bind({});
+
+Default.parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/design/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?node-id=5367-94238&m=dev',
+	},
+};

package/lib/js/components/SelectList/SelectListItemContainer/SelectListItemContainer.vue

@@ -0,0 +1,19 @@
+<template>
+	<div class="ds-selectListItemContainer">
+		<slot />
+	</div>
+</template>
+
+<style scoped lang="scss">
+@import '../../../../styles/settings/spacings';
+
+.ds-selectListItemContainer {
+	padding: $space-2xs $space-xs;
+}
+</style>
+
+<script setup lang="ts">
+defineOptions({
+	name: 'SelectListItemContainer',
+});
+</script>

package/lib/js/components/SelectList/SelectListItemToggle/SelectListItemToggle.vue

@@ -19,7 +19,7 @@ import {
 } from '../SelectListItem/SelectListItem.consts';
 import { IconItem, ICONS } from '../../Icons/Icon';
 import SelectListItem from '../SelectListItem/SelectListItem.vue';
-import { defineComponent, toRaw } from 'vue';
+import { defineComponent, PropType, toRaw } from 'vue';
 
 export default defineComponent({
 	name: 'SelectListItemToggle',
@@ -54,14 +54,14 @@ export default defineComponent({
 			required: true,
 		},
 		size: {
-			type: String,
+			type: String as PropType<SelectListItemSize>,
 			default: SELECT_LIST_ITEM_SIZES.SMALL,
 			validator(size: SelectListItemSize) {
 				return Object.values(SELECT_LIST_ITEM_SIZES).includes(size);
 			},
 		},
 		state: {
-			type: String,
+			type: String as PropType<SelectListItemState>,
 			default: SELECT_LIST_ITEM_STATES.DEFAULT,
 			validator(state: SelectListItemState) {
 				return Object.values(SELECT_LIST_ITEM_STATES).includes(state);

package/lib/js/components/TextGroup/TextGroup.consts.ts

@@ -10,6 +10,7 @@ export const TEXT_GROUP_LOADING_SIZES = {
 };
 
 export const TEXT_GROUP_SIZES = {
+	X_SMALL: 'x-small',
 	SMALL: 'small',
 	MEDIUM: 'medium',
 };

package/lib/js/components/TextGroup/TextGroup.vue

@@ -2,6 +2,7 @@
 	<div
 		class="ds-textGroup"
 		:class="{
+			'-ds-x-small': size === TEXT_GROUP_SIZES.X_SMALL,
 			'-ds-small': size === TEXT_GROUP_SIZES.SMALL,
 
 			'-ds-hovered': state === TEXT_GROUP_STATES.HOVERED,
@@ -281,6 +282,26 @@ $text-group-colors: (
 		}
 	}
 
+	&.-ds-x-small {
+		#{$self}__eyebrow {
+			@include info-xs-default-bold;
+
+			margin-bottom: 0;
+
+			&.-ds-uppercase {
+				@include info-xs-extensive-bold-uppercase;
+			}
+		}
+
+		#{$self}__main {
+			@include info-s-default-bold;
+		}
+
+		#{$self}__supporting {
+			@include info-s-default-regular;
+		}
+	}
+
 	&.-ds-interactive:hover,
 	&.-ds-hovered {
 		cursor: pointer;

package/lib/js/components/Toast/Toast.vue

@@ -140,7 +140,7 @@ export default defineComponent({
 			default: TOAST_POSITIONS.CENTER,
 		},
 		boundariesSelector: {
-			type: [String, HTMLElement],
+			type: [String, Object] as PropType<string | HTMLElement>,
 			default: null,
 		},
 		color: {

package/lib/js/index.ts

@@ -127,8 +127,8 @@ export { default as SelectListItemDivider } from './components/SelectList/Select
 export { default as DsSelectListItemDivider } from './components/SelectList/SelectListItemDivider/SelectListItemDivider.vue';
 export { default as SelectListItemToggle } from './components/SelectList/SelectListItemToggle/SelectListItemToggle.vue';
 export { default as DsSelectListItemToggle } from './components/SelectList/SelectListItemToggle/SelectListItemToggle.vue';
-export { default as SelectListItemTile } from './components/SelectList/SelectListItemTile/SelectListItemTile.vue';
-export { default as DsSelectListItemTile } from './components/SelectList/SelectListItemTile/SelectListItemTile.vue';
+export { default as SelectListItemContainer } from './components/SelectList/SelectListItemContainer/SelectListItemContainer.vue';
+export { default as DsSelectListItemContainer } from './components/SelectList/SelectListItemContainer/SelectListItemContainer.vue';
 export { default as SelectListSectionTitle } from './components/SelectList/SelectListSectionTitle/SelectListSectionTitle.vue';
 export { default as DsSelectListSectionTitle } from './components/SelectList/SelectListSectionTitle/SelectListSectionTitle.vue';
 export * from './components/SelectList/SelectListItem/SelectListItem.consts';

package/lib/js/utils/device.ts

@@ -1,7 +1,8 @@
 export const isTouchDevice = (): boolean => {
 	return (
-		'ontouchstart' in window ||
-		navigator.maxTouchPoints > 0 ||
-		(navigator as any).msMaxTouchPoints > 0
+		typeof window !== 'undefined' &&
+		('ontouchstart' in window ||
+			navigator.maxTouchPoints > 0 ||
+			(navigator as any).msMaxTouchPoints > 0)
 	);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bethinkpl/design-system",
-  "version": "34.2.2",
+  "version": "35.0.1",
   "description": "Bethink universe design-system",
   "repository": {
     "type": "git",
@@ -18,8 +18,9 @@
   ],
   "license": "UNLICENSED",
   "engines": {
-    "yarn": "^1.22.1",
-    "node": "^16.13.0 || ^18.17.0 || ^20.9.0"
+    "yarn": ">=1.22.1",
+    "npm": ">=6.0.0",
+    "node": "^16.13.0 || ^18.17.0 || ^20.9.0 || ^22.0.0 || ^24.0.0"
   },
   "scripts": {
     "build": "vite build",

package/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.stories.ts

@@ -1,60 +0,0 @@
-import SelectListItemTile from './SelectListItemTile.vue';
-import { TILE_STATES } from '../../Tile';
-
-import { Args, Meta, StoryFn } from '@storybook/vue3';
-import { args, argTypes, data, template } from '../../Tile/Tile.sb.shared';
-import { withActions } from '@storybook/addon-actions/decorator';
-
-export default {
-	title: 'Components/SelectList/SelectListItemTile',
-	component: SelectListItemTile,
-	decorators: [withActions],
-} as Meta<typeof SelectListItemTile>;
-
-const StoryTemplate: StoryFn<typeof SelectListItemTile> = (args) => ({
-	components: { SelectListItemTile },
-	setup() {
-		return args;
-	},
-	template: template('select-list-item-tile'),
-	data,
-});
-
-export const Interactive = StoryTemplate.bind({});
-
-Interactive.argTypes = argTypes;
-Interactive.args = args;
-
-Interactive.parameters = {
-	actions: {
-		handles: ['click'],
-	},
-	design: {
-		type: 'figma',
-		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=5367-94239&t=GqiOb5BFRTyJrsv8-4',
-	},
-};
-
-const StoryStaticTemplate: StoryFn<typeof SelectListItemTile> = (args) => ({
-	components: { SelectListItemTile },
-	setup() {
-		return args;
-	},
-	template: template('select-list-item-tile'),
-	data,
-});
-
-export const Static = StoryStaticTemplate.bind({});
-
-Static.argTypes = argTypes;
-
-Static.args = {
-	...args,
-	interactive: false,
-	iconLeft: null,
-	iconRight: null,
-	text: 'this is a text text',
-	eyebrowText: 'this is an eyebrowText text',
-	additionalText: 'this is some additionalText',
-	state: TILE_STATES.DEFAULT,
-} as Args;

package/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.vue

@@ -1,41 +0,0 @@
-<template>
-	<div class="ds-selectListItemTile">
-		<ds-tile
-			:interactive="interactive"
-			:icon-left="iconLeft"
-			:icon-right="iconRight"
-			:text="text"
-			:eyebrow-text="eyebrowText"
-			:additional-text="additionalText"
-			:color="color"
-			:is-eyebrow-text-uppercase="isEyebrowTextUppercase"
-			:state="state"
-			:eyebrow-ellipsis="eyebrowEllipsis"
-			:text-ellipsis="textEllipsis"
-			:border-color="borderColor"
-		/>
-	</div>
-</template>
-
-<style scoped lang="scss">
-@import '../../../../styles/settings/spacings';
-
-.ds-selectListItemTile {
-	padding: $space-xs;
-}
-</style>
-
-<script lang="ts">
-import Tile from '../../Tile';
-import { props } from '../../Tile/Tile.shared';
-
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-	name: 'SelectListItemTile',
-	components: {
-		DsTile: Tile,
-	},
-	props,
-});
-</script>