IT-7404 | SelectListItem accessory slot, replace SelectListItemTile with SelectListItemContainer, TextGroup XS size

lib/js/components/Divider/Divider.vue

@@ -16,6 +16,7 @@
 
 .ds-divider {
 	background-color: $color-neutral-divider;
+	flex-shrink: 0;
 
 	&.-ds-strong {
 		background-color: $color-neutral-divider-strong;

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;

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>

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',
+	},
+};

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>