@bethinkpl/design-system 20.0.1 → 20.1.0

package/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.stories.ts

@@ -0,0 +1,337 @@
+import GroupRichListItem from './GroupRichListItem.vue';
+import RichListItem, {
+	RICH_LIST_ITEM_ELEVATION,
+	RICH_LIST_ITEM_SIZE,
+	RICH_LIST_ITEM_STATE,
+	RICH_LIST_ITEM_TYPE,
+} from '../RichListItem';
+import Divider from '../../Divider';
+
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import {
+	GROUP_RICH_LIST_ITEM_BACKGROUND_COLOR,
+	GROUP_RICH_LIST_ITEM_BORDER_COLOR,
+} from './GroupRichListItem.consts';
+import { ICON_COLORS, ICONS } from '../../Icons/Icon';
+
+export default {
+	title: 'Components/RichList/GroupRichListItem',
+	component: GroupRichListItem,
+	decorators: [
+		(story) => ({
+			template: `<div style="display: flex;padding: 16px;"><story/></div>`,
+		}),
+	],
+} as Meta<typeof GroupRichListItem>;
+
+const args = {
+	isExpanded: false,
+	borderColor: null,
+	borderColorHex: '',
+	backgroundColor: GROUP_RICH_LIST_ITEM_BACKGROUND_COLOR.NEUTRAL,
+
+	// RLI
+	parent_size: RICH_LIST_ITEM_SIZE.MEDIUM,
+	parent_elevation: null,
+	parent_isDimmed: false,
+	parent_hasDraggableHandler: true,
+	parent_icon: null,
+	parent_iconColor: ICON_COLORS.NEUTRAL_WEAK,
+	parent_iconColorHex: '',
+	parent_hasActionsSlotDivider: true,
+	parent_isSelectable: true,
+	parent_isSelected: true,
+	parent_state: RICH_LIST_ITEM_STATE.DEFAULT,
+	parent_isInteractive: true,
+
+	child_size: RICH_LIST_ITEM_SIZE.MEDIUM,
+	child_elevation: null,
+	child_isDimmed: false,
+	child_hasDraggableHandler: true,
+	child_icon: null,
+	child_iconColor: ICON_COLORS.NEUTRAL_WEAK,
+	child_iconColorHex: '',
+	child_hasActionsSlotDivider: true,
+	child_isSelectable: true,
+	child_isSelected: true,
+	child_state: RICH_LIST_ITEM_STATE.DEFAULT,
+	child_isInteractive: true,
+} as Args;
+
+const argTypes = {
+	borderColor: {
+		options: [null, ...Object.values(GROUP_RICH_LIST_ITEM_BORDER_COLOR)],
+		control: { type: 'select' },
+	},
+	borderColorHex: {
+		control: { type: 'text' },
+	},
+	backgroundColor: {
+		options: Object.values(GROUP_RICH_LIST_ITEM_BACKGROUND_COLOR),
+		control: { type: 'select' },
+	},
+
+	parent_state: {
+		options: Object.values(RICH_LIST_ITEM_STATE),
+		control: { type: 'select' },
+	},
+	parent_size: {
+		options: Object.values(RICH_LIST_ITEM_SIZE),
+		control: { type: 'select' },
+	},
+	parent_iconColor: {
+		options: Object.values(ICON_COLORS),
+		control: { type: 'select' },
+	},
+	parent_icon: {
+		options: [null, ...Object.keys(ICONS)],
+		control: { type: 'select' },
+	},
+	parent_iconColorHex: {
+		control: { type: 'text' },
+	},
+	parent_elevation: {
+		options: [null, ...Object.values(RICH_LIST_ITEM_ELEVATION)],
+		control: { type: 'select' },
+	},
+
+	child_state: {
+		options: Object.values(RICH_LIST_ITEM_STATE),
+		control: { type: 'select' },
+	},
+	child_size: {
+		options: Object.values(RICH_LIST_ITEM_SIZE),
+		control: { type: 'select' },
+	},
+	child_iconColor: {
+		options: Object.values(ICON_COLORS),
+		control: { type: 'select' },
+	},
+	child_icon: {
+		options: [null, ...Object.keys(ICONS)],
+		control: { type: 'select' },
+	},
+	child_iconColorHex: {
+		control: { type: 'text' },
+	},
+	child_elevation: {
+		options: [null, ...Object.values(RICH_LIST_ITEM_ELEVATION)],
+		control: { type: 'select' },
+	},
+} as ArgTypes;
+
+const slots = `<template #content>Content slot</template><template #meta>Meta slot</template><template #actions>ACS</template>`;
+
+const expandStory = (story) => {
+	story.argTypes = argTypes;
+	story.args = args;
+	story.parameters = {
+		layout: 'fullscreen',
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=8505-126430&mode=design&t=7Ay1DzrwONAPwSGv-4',
+		},
+	};
+	return story;
+};
+
+// # OneChild
+const OneChildStoryTemplate: StoryFn<typeof GroupRichListItem> = (args, { updateArgs }) => {
+	return {
+		components: { GroupRichListItem, RichListItem, Divider },
+		setup() {
+			return { ...args };
+		},
+		data() {
+			return {
+				RICH_LIST_ITEM_TYPE: Object.freeze(RICH_LIST_ITEM_TYPE),
+				RICH_LIST_ITEM_STATE: Object.freeze(RICH_LIST_ITEM_STATE),
+				ICONS: Object.freeze(ICONS),
+			};
+		},
+		methods: {
+			updateParentIsSelected(isSelected) {
+				updateArgs({ parent_isSelected: isSelected });
+			},
+			updateChildIsSelected(isSelected) {
+				updateArgs({ child_isSelected: isSelected });
+			},
+			onClick() {
+				updateArgs({
+					isExpanded: !this.isExpanded,
+				});
+			},
+		},
+		template: `
+      <group-rich-list-item
+        :is-expanded="isExpanded"
+        :border-color="borderColor"
+        :border-color-hex="borderColorHex"
+        :background-color="backgroundColor"
+      >
+        <template #parent>
+          <rich-list-item
+            :state="parent_state"
+            :is-dimmed="parent_isDimmed"
+            :type="RICH_LIST_ITEM_TYPE.FLAT"
+            :is-selectable="parent_isSelectable"
+            :is-selected="parent_isSelected"
+            :size="parent_size"
+            :is-interactive="parent_isInteractive"
+            :is-draggable="parent_isDraggable"
+            :icon="ICONS[parent_icon]"
+            :icon-color="parent_iconColor"
+            :icon-color-hex="parent_iconColorHex"
+            :has-draggable-handler="parent_hasDraggableHandler"
+            :has-actions-slot-divider="parent_hasActionsSlotDivider"
+            @click="onClick"
+						@update:is-selected="updateParentIsSelected"
+          >
+            ${slots}
+          </rich-list-item>
+        </template>
+        <template #children>
+          <rich-list-item
+            :state="child_state"
+            :is-dimmed="child_isDimmed"
+            :type="RICH_LIST_ITEM_TYPE.FLAT"
+            :is-selectable="child_isSelectable"
+            :is-selected="child_isSelected"
+            :size="child_size"
+            :is-interactive="child_isInteractive"
+            :is-draggable="child_isDraggable"
+            :icon="ICONS[child_icon]"
+            :icon-color="child_iconColor"
+            :icon-color-hex="child_iconColorHex"
+            :has-draggable-handler="child_hasDraggableHandler"
+            :has-actions-slot-divider="child_hasActionsSlotDivider"
+            @update:is-selected="updateChildIsSelected"
+          >
+            ${slots}
+          </rich-list-item>
+        </template>
+      </group-rich-list-item>
+    `,
+	};
+};
+export const OneChild = expandStory(OneChildStoryTemplate.bind({}));
+
+// # MultipleChild
+const MultipleChildStoryTemplate: StoryFn<typeof GroupRichListItem> = (args, { updateArgs }) => {
+	return {
+		components: { GroupRichListItem, RichListItem, Divider },
+		setup() {
+			return { ...args };
+		},
+		data() {
+			return {
+				RICH_LIST_ITEM_TYPE: Object.freeze(RICH_LIST_ITEM_TYPE),
+				RICH_LIST_ITEM_STATE: Object.freeze(RICH_LIST_ITEM_STATE),
+				ICONS: Object.freeze(ICONS),
+			};
+		},
+		methods: {
+			updateParentIsSelected(isSelected) {
+				updateArgs({ parent_isSelected: isSelected });
+			},
+			updateChildIsSelected(isSelected) {
+				updateArgs({ child_isSelected: isSelected });
+			},
+			onClick() {
+				updateArgs({
+					isExpanded: !this.isExpanded,
+				});
+			},
+		},
+		template: `
+      <group-rich-list-item
+        :is-expanded="isExpanded"
+        :is-dimmed="isDimmed"
+        :border-color="borderColor"
+        :border-color-hex="borderColorHex"
+        :background-color="backgroundColor"
+      >
+        <template #parent>
+          <rich-list-item
+            :state="parent_state"
+            :is-dimmed="parent_isDimmed"
+            :type="RICH_LIST_ITEM_TYPE.FLAT"
+            :is-selectable="parent_isSelectable"
+            :is-selected="parent_isSelected"
+            :size="parent_size"
+            :is-interactive="parent_isInteractive"
+            :is-draggable="parent_isDraggable"
+            :icon="ICONS[parent_icon]"
+            :icon-color="parent_iconColor"
+            :icon-color-hex="parent_iconColorHex"
+            :has-draggable-handler="parent_hasDraggableHandler"
+            :has-actions-slot-divider="parent_hasActionsSlotDivider"
+            @click="onClick"
+						@update:is-selected="updateParentIsSelected"
+          >
+            ${slots}
+          </rich-list-item>
+        </template>
+        <template #children>
+          <rich-list-item
+            :state="child_state"
+            :is-dimmed="child_isDimmed"
+            :type="RICH_LIST_ITEM_TYPE.FLAT"
+            :is-selectable="child_isSelectable"
+            :is-selected="child_isSelected"
+            :size="child_size"
+            :is-interactive="child_isInteractive"
+            :is-draggable="child_isDraggable"
+            :icon="ICONS[child_icon]"
+            :icon-color="child_iconColor"
+            :icon-color-hex="child_iconColorHex"
+            :has-draggable-handler="child_hasDraggableHandler"
+            :has-actions-slot-divider="child_hasActionsSlotDivider"
+            @update:is-selected="updateChildIsSelected"
+          >
+            ${slots}
+          </rich-list-item>
+          <divider />
+          <rich-list-item
+            :state="child_state"
+            :is-dimmed="child_isDimmed"
+            :type="RICH_LIST_ITEM_TYPE.FLAT"
+            :is-selectable="child_isSelectable"
+            :is-selected="child_isSelected"
+            :size="child_size"
+            :is-interactive="child_isInteractive"
+            :is-draggable="child_isDraggable"
+            :icon="ICONS[child_icon]"
+            :icon-color="child_iconColor"
+            :icon-color-hex="child_iconColorHex"
+            :has-draggable-handler="child_hasDraggableHandler"
+            :has-actions-slot-divider="child_hasActionsSlotDivider"
+            @update:is-selected="updateChildIsSelected"
+          >
+            ${slots}
+          </rich-list-item>
+          <divider />
+          <rich-list-item
+            :state="child_state"
+            :is-dimmed="child_isDimmed"
+            :type="RICH_LIST_ITEM_TYPE.FLAT"
+            :is-selectable="child_isSelectable"
+            :is-selected="child_isSelected"
+            :size="child_size"
+            :is-interactive="child_isInteractive"
+            :is-draggable="child_isDraggable"
+            :icon="ICONS[child_icon]"
+            :icon-color="child_iconColor"
+            :icon-color-hex="child_iconColorHex"
+            :has-draggable-handler="child_hasDraggableHandler"
+            :has-actions-slot-divider="child_hasActionsSlotDivider"
+            @update:is-selected="updateChildIsSelected"
+          >
+            ${slots}
+          </rich-list-item>
+        </template>
+      </group-rich-list-item>
+    `,
+	};
+};
+export const MultipleChild = expandStory(MultipleChildStoryTemplate.bind({}));

package/lib/js/components/RichList/{RichListGroupItem/RichListGroupItem.vue → GroupRichListItem/GroupRichListItem.vue}

@@ -1,16 +1,16 @@
 <template>
-	<div class="richListGroupItem">
-		<div class="richListGroupItem__wrapper">
-			<div class="richListGroupItem__parent" :class="{ '-expanded': isExpanded }">
+	<div class="groupRichListItem" :class="classList">
+		<div class="groupRichListItem__wrapper">
+			<div class="groupRichListItem__parent">
 				<slot name="parent" />
 			</div>
-			<div v-if="isExpanded">
+			<div v-if="isExpanded" class="groupRichListItem__children">
 				<slot name="children" />
 			</div>
 		</div>
 		<div
 			v-if="borderColorClass || borderColorStyle"
-			class="richListGroupItem__border"
+			class="groupRichListItem__border"
 			:class="borderColorClass"
 			:style="borderColorStyle"
 		/>
@@ -23,9 +23,42 @@
 @import '../../../../styles/settings/spacings';
 @import '../RichListItem/border-colors';
 
-.richListGroupItem {
+$group-rich-list-background-colors: (
+	neutral: (
+		parent: $color-neutral-background,
+		children: transparent,
+	),
+	neutral-weak: (
+		parent: $color-neutral-background-weak,
+		children: $color-neutral-background,
+	),
+);
+
+.groupRichListItem {
 	$root: &;
 
+	@each $color, $value in $group-rich-list-background-colors {
+		&.-background-#{$color} {
+			#{$root}__children {
+				background-color: map-get($value, 'children');
+			}
+
+			#{$root}__parent {
+				background-color: map-get($value, 'parent');
+			}
+
+			&.-loading {
+				#{$root}__children {
+					background-color: map-get($value, 'children');
+				}
+
+				#{$root}__parent {
+					background-color: map-get($value, 'parent');
+				}
+			}
+		}
+	}
+
 	border-radius: $radius-s;
 	display: flex;
 	flex: 1;
@@ -40,10 +73,6 @@
 		overflow: hidden;
 	}
 
-	&__parent.-expanded {
-		background: $color-neutral-background;
-	}
-
 	&__border {
 		@each $color, $value in $rich-list-item-border-colors {
 			&.-border-#{$color} {
@@ -64,30 +93,48 @@
 <script lang="ts">
 import { PropType } from 'vue';
 import {
-	RICH_LIST_GROUP_ITEM_BORDER_COLOR,
-	RichListGroupItemBorderColor,
-} from './RichListGroupItem.consts';
+	GROUP_RICH_LIST_ITEM_BACKGROUND_COLOR,
+	GROUP_RICH_LIST_ITEM_BORDER_COLOR,
+	GroupRichListItemBackgroundColor,
+	GroupRichListItemBorderColor,
+} from './GroupRichListItem.consts';
 
 export default {
-	name: 'RichListGroupItem',
+	name: 'GroupRichListItem',
 	props: {
 		isExpanded: {
 			type: Boolean,
 			default: false,
 		},
 		borderColor: {
-			type: String as PropType<RichListGroupItemBorderColor>,
+			type: String as PropType<GroupRichListItemBorderColor>,
 			default: null,
 			validator(borderColor) {
-				return Object.values(RICH_LIST_GROUP_ITEM_BORDER_COLOR).includes(borderColor);
+				return Object.values(GROUP_RICH_LIST_ITEM_BORDER_COLOR).includes(borderColor);
 			},
 		},
 		borderColorHex: {
 			type: String,
 			default: null,
 		},
+		backgroundColor: {
+			type: String as PropType<GroupRichListItemBackgroundColor>,
+			default: GROUP_RICH_LIST_ITEM_BACKGROUND_COLOR.NEUTRAL,
+			validator(backgroundColor) {
+				return Object.values(GROUP_RICH_LIST_ITEM_BACKGROUND_COLOR).includes(
+					backgroundColor,
+				);
+			},
+		},
 	},
 	computed: {
+		classList() {
+			return {
+				...(this.backgroundColor && {
+					[`-background-${this.backgroundColor}`]: true,
+				}),
+			};
+		},
 		borderColorClass() {
 			if (!this.borderColor || (this.borderColor && this.borderColorHex)) {
 				return;

package/lib/js/components/RichList/GroupRichListItem/index.ts

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

package/lib/js/components/RichList/RichListItem/RichListItem.consts.ts

@@ -19,24 +19,6 @@ export const RICH_LIST_ITEM_SIZE = {
 
 export type RichListItemSize = typeof RICH_LIST_ITEM_SIZE[keyof typeof RICH_LIST_ITEM_SIZE];
 
-export const RICH_LIST_ITEM_ICON_COLOR = {
-	DEFAULT: 'default',
-	INVERTED: 'inverted',
-	PRIMARY: 'primary',
-	PRIMARY_WEAK: 'primary-weak',
-	NEUTRAL: 'neutral',
-	NEUTRAL_WEAK: 'neutral-weak',
-	DANGER: 'danger',
-	FAIL: 'fail',
-	WARNING: 'warning',
-	SUCCESS: 'success',
-	INFO: 'info',
-	ACCENT: 'accent',
-} as const;
-
-export type RichListItemIconColor =
-	typeof RICH_LIST_ITEM_ICON_COLOR[keyof typeof RICH_LIST_ITEM_ICON_COLOR];
-
 export const RICH_LIST_ITEM_BORDER_COLOR = {
 	DEFAULT: 'default',
 	PRIMARY: 'primary',
@@ -62,3 +44,18 @@ export const RICH_LIST_ITEM_BORDER_COLOR = {
 
 export type RichListItemBorderColor =
 	typeof RICH_LIST_ITEM_BORDER_COLOR[keyof typeof RICH_LIST_ITEM_BORDER_COLOR];
+
+export const RICH_LIST_ITEM_BACKGROUND_COLOR = {
+	NEUTRAL: 'neutral',
+	NEUTRAL_WEAK: 'neutral-weak',
+} as const;
+
+export type RichListItemBackgroundColor =
+	typeof RICH_LIST_ITEM_BACKGROUND_COLOR[keyof typeof RICH_LIST_ITEM_BACKGROUND_COLOR];
+
+export const RICH_LIST_ITEM_ELEVATION = {
+	SMALL: 'small',
+} as const;
+
+export type RichListItemElevation =
+	typeof RICH_LIST_ITEM_ELEVATION[keyof typeof RICH_LIST_ITEM_ELEVATION];

package/lib/js/components/RichList/RichListItem/RichListItem.stories.ts

@@ -2,13 +2,14 @@ import RichListItem from './RichListItem.vue';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import {
+	RICH_LIST_ITEM_BACKGROUND_COLOR,
 	RICH_LIST_ITEM_BORDER_COLOR,
-	RICH_LIST_ITEM_ICON_COLOR,
+	RICH_LIST_ITEM_ELEVATION,
 	RICH_LIST_ITEM_SIZE,
 	RICH_LIST_ITEM_STATE,
 	RICH_LIST_ITEM_TYPE,
 } from './RichListItem.consts';
-import { ICONS } from '../../Icons/Icon';
+import { ICON_COLORS, ICONS } from '../../Icons/Icon';
 
 export default {
 	title: 'Components/RichList/RichListItem',
@@ -21,7 +22,7 @@ export default {
 	],
 } as Meta<typeof RichListItem>;
 
-const StoryTemplate: StoryFn<typeof RichListItem> = (args) => ({
+const StoryTemplate: StoryFn<typeof RichListItem> = (args, { updateArgs }) => ({
 	components: { RichListItem },
 	setup() {
 		return { ...args };
@@ -31,6 +32,11 @@ const StoryTemplate: StoryFn<typeof RichListItem> = (args) => ({
 			ICONS: Object.freeze(ICONS),
 		};
 	},
+	methods: {
+		updateIsSelected(isSelected) {
+			updateArgs({ isSelected });
+		},
+	},
 	template: `
     <rich-list-item
       :size="size"
@@ -45,6 +51,13 @@ const StoryTemplate: StoryFn<typeof RichListItem> = (args) => ({
       :border-color-hex="borderColorHex"
       :draggable-icon-class-name="draggableIconClassName"
       :state="state"
+      :background-color="backgroundColor"
+      :elevation="elevation"
+      :has-draggable-handler="hasDraggableHandler"
+      :has-actions-slot-divider="hasActionsSlotDivider"
+      :is-selectable="isSelectable"
+      :is-selected="isSelected"
+      @update:isSelected="updateIsSelected"
     >
       <template v-if="content" #content>
         <div v-html="content" />
@@ -52,8 +65,8 @@ const StoryTemplate: StoryFn<typeof RichListItem> = (args) => ({
       <template v-if="meta" #meta>
         <div v-html="meta" />
       </template>
-      <template v-if="trailing" #trailing>
-        <div v-html="trailing" />
+      <template v-if="actions" #actions>
+        <div v-html="actions" />
       </template>
     </rich-list-item>`,
 });
@@ -63,20 +76,26 @@ export const Interactive = StoryTemplate.bind({});
 const args = {
 	size: RICH_LIST_ITEM_SIZE.MEDIUM,
 	type: RICH_LIST_ITEM_TYPE.DEFAULT,
-	isInteractive: true,
+	backgroundColor: RICH_LIST_ITEM_BACKGROUND_COLOR.NEUTRAL,
+	elevation: null,
+	isDimmed: false,
 	isDraggable: true,
+	hasDraggableHandler: true,
 	icon: null,
-	iconColor: null,
+	iconColor: ICON_COLORS.NEUTRAL_WEAK,
 	iconColorHex: '',
-	isDimmed: false,
+	hasActionsSlotDivider: true,
+	isSelectable: true,
+	isSelected: true,
 	borderColor: null,
 	borderColorHex: '',
 	state: RICH_LIST_ITEM_STATE.DEFAULT,
+	isInteractive: true,
 	draggableIconClassName: 'draggableIconClassName-1',
 
 	content: 'Content Slot',
 	meta: 'Meta Slot',
-	trailing: 'X',
+	actions: 'ACS',
 } as Args;
 
 const argTypes = {
@@ -93,7 +112,7 @@ const argTypes = {
 		control: { type: 'select' },
 	},
 	iconColor: {
-		options: [null, ...Object.values(RICH_LIST_ITEM_ICON_COLOR)],
+		options: Object.values(ICON_COLORS),
 		control: { type: 'select' },
 	},
 	borderColor: {
@@ -116,21 +135,32 @@ const argTypes = {
 	meta: {
 		control: { type: 'text' },
 	},
-	trailing: {
+	actions: {
 		control: { type: 'text' },
 	},
 	draggableIconClassName: {
 		control: { type: 'text' },
 	},
+	backgroundColor: {
+		options: [null, ...Object.values(RICH_LIST_ITEM_BACKGROUND_COLOR)],
+		control: { type: 'select' },
+	},
+	elevation: {
+		options: [null, ...Object.values(RICH_LIST_ITEM_ELEVATION)],
+		control: { type: 'select' },
+	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;
 Interactive.args = args;
 
 Interactive.parameters = {
+	actions: {
+		handles: ['icon-click', 'click', 'update:isSelected'],
+	},
 	layout: 'fullscreen',
 	design: {
 		type: 'figma',
-		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=8673-2345&mode=design&t=LFrFv5yjxOpcJRzE-4',
+		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS-Components?type=design&node-id=8507-129603&mode=design&t=dC5vBzU9RlP1j7G2-4',
 	},
 };