@bethinkpl/design-system 25.0.10 → 26.0.1

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

@@ -6,6 +6,7 @@ import RichListItem, {
 	RICH_LIST_ITEM_TYPE,
 } from '../RichListItem';
 import Divider from '../../Divider';
+import { useArgs } from '@storybook/preview-api';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import {
@@ -34,6 +35,7 @@ const args = {
 	parent_size: RICH_LIST_ITEM_SIZE.MEDIUM,
 	parent_elevation: null,
 	parent_isDimmed: false,
+	parent_isDraggable: false,
 	parent_hasDraggableHandler: true,
 	parent_icon: null,
 	parent_iconColor: ICON_COLORS.NEUTRAL_WEAK,
@@ -47,6 +49,7 @@ const args = {
 	child_size: RICH_LIST_ITEM_SIZE.MEDIUM,
 	child_elevation: null,
 	child_isDimmed: false,
+	child_isDraggable: false,
 	child_hasDraggableHandler: true,
 	child_icon: null,
 	child_iconColor: ICON_COLORS.NEUTRAL_WEAK,
@@ -61,62 +64,62 @@ const args = {
 const argTypes = {
 	borderColor: {
 		options: [null, ...Object.values(GROUP_RICH_LIST_ITEM_BORDER_COLOR)],
-		control: { type: 'select' },
+		control: 'select',
 	},
 	borderColorHex: {
-		control: { type: 'text' },
+		control: 'text',
 	},
 	backgroundColor: {
 		options: Object.values(GROUP_RICH_LIST_ITEM_BACKGROUND_COLOR),
-		control: { type: 'select' },
+		control: 'select',
 	},
 
 	parent_state: {
 		options: Object.values(RICH_LIST_ITEM_STATE),
-		control: { type: 'select' },
+		control: 'select',
 	},
 	parent_size: {
 		options: Object.values(RICH_LIST_ITEM_SIZE),
-		control: { type: 'select' },
+		control: 'select',
 	},
 	parent_iconColor: {
 		options: Object.values(ICON_COLORS),
-		control: { type: 'select' },
+		control: 'select',
 	},
 	parent_icon: {
 		options: [null, ...Object.keys(ICONS)],
-		control: { type: 'select' },
+		control: 'select',
 	},
 	parent_iconColorHex: {
-		control: { type: 'text' },
+		control: 'text',
 	},
 	parent_elevation: {
 		options: [null, ...Object.values(RICH_LIST_ITEM_ELEVATION)],
-		control: { type: 'select' },
+		control: 'select',
 	},
 
 	child_state: {
 		options: Object.values(RICH_LIST_ITEM_STATE),
-		control: { type: 'select' },
+		control: 'select',
 	},
 	child_size: {
 		options: Object.values(RICH_LIST_ITEM_SIZE),
-		control: { type: 'select' },
+		control: 'select',
 	},
 	child_iconColor: {
 		options: Object.values(ICON_COLORS),
-		control: { type: 'select' },
+		control: 'select',
 	},
 	child_icon: {
 		options: [null, ...Object.keys(ICONS)],
-		control: { type: 'select' },
+		control: 'select',
 	},
 	child_iconColorHex: {
-		control: { type: 'text' },
+		control: 'text',
 	},
 	child_elevation: {
 		options: [null, ...Object.values(RICH_LIST_ITEM_ELEVATION)],
-		control: { type: 'select' },
+		control: 'select',
 	},
 } as ArgTypes;
 
@@ -136,11 +139,13 @@ const expandStory = (story) => {
 };
 
 // # OneChild
-const OneChildStoryTemplate: StoryFn<typeof GroupRichListItem> = (args, { updateArgs }) => {
+const OneChildStoryTemplate: StoryFn<typeof GroupRichListItem> = (args) => {
+	const [_, updateArgs] = useArgs();
+
 	return {
 		components: { GroupRichListItem, RichListItem, Divider },
 		setup() {
-			return { ...args };
+			return args;
 		},
 		data() {
 			return {
@@ -217,11 +222,13 @@ const OneChildStoryTemplate: StoryFn<typeof GroupRichListItem> = (args, { update
 export const OneChild = expandStory(OneChildStoryTemplate.bind({}));
 
 // # MultipleChild
-const MultipleChildStoryTemplate: StoryFn<typeof GroupRichListItem> = (args, { updateArgs }) => {
+const MultipleChildStoryTemplate: StoryFn<typeof GroupRichListItem> = (args) => {
+	const [_, updateArgs] = useArgs();
+
 	return {
 		components: { GroupRichListItem, RichListItem, Divider },
 		setup() {
-			return { ...args };
+			return args;
 		},
 		data() {
 			return {
@@ -246,7 +253,6 @@ const MultipleChildStoryTemplate: StoryFn<typeof GroupRichListItem> = (args, { u
 		template: `
       <group-rich-list-item
         :is-expanded="isExpanded"
-        :is-dimmed="isDimmed"
         :border-color="borderColor"
         :border-color-hex="borderColorHex"
         :background-color="backgroundColor"

package/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.vue

@@ -91,7 +91,7 @@ $group-rich-list-background-colors: (
 </style>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import {
 	GROUP_RICH_LIST_ITEM_BACKGROUND_COLOR,
 	GROUP_RICH_LIST_ITEM_BORDER_COLOR,
@@ -99,7 +99,7 @@ import {
 	GroupRichListItemBorderColor,
 } from './GroupRichListItem.consts';
 
-export default {
+export default defineComponent({
 	name: 'GroupRichListItem',
 	props: {
 		isExpanded: {
@@ -150,5 +150,5 @@ export default {
 			};
 		},
 	},
-};
+});
 </script>

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

@@ -2,21 +2,18 @@ export const RICH_LIST_ITEM_TYPE = {
 	DEFAULT: 'default',
 	FLAT: 'flat',
 } as const;
-
 export type RichListItemType = typeof RICH_LIST_ITEM_TYPE[keyof typeof RICH_LIST_ITEM_TYPE];
 
 export const RICH_LIST_ITEM_STATE = {
 	DEFAULT: 'default',
 	LOADING: 'loading',
 } as const;
-
 export type RichListItemState = typeof RICH_LIST_ITEM_STATE[keyof typeof RICH_LIST_ITEM_STATE];
 
 export const RICH_LIST_ITEM_SIZE = {
 	SMALL: 'small',
 	MEDIUM: 'medium',
 } as const;
-
 export type RichListItemSize = typeof RICH_LIST_ITEM_SIZE[keyof typeof RICH_LIST_ITEM_SIZE];
 
 export const RICH_LIST_ITEM_BORDER_COLOR = {
@@ -41,7 +38,6 @@ export const RICH_LIST_ITEM_BORDER_COLOR = {
 	ACCENT: 'accent',
 	ACCENT_WEAK: 'accent-weak',
 } as const;
-
 export type RichListItemBorderColor =
 	typeof RICH_LIST_ITEM_BORDER_COLOR[keyof typeof RICH_LIST_ITEM_BORDER_COLOR];
 
@@ -49,19 +45,21 @@ 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];
+
 export const RICH_LIST_ITEM_LAYOUT = {
 	HORIZONTAL: 'horizontal',
 	VERTICAL: 'vertical',
 } as const;
-
 export type RichListItemLayout = typeof RICH_LIST_ITEM_LAYOUT[keyof typeof RICH_LIST_ITEM_LAYOUT];
+
+// Keep in sync with $rich-list-item-media-horizontal-width and -height
+export const RICH_LIST_ITEM_MEDIA_HORIZONTAL_WIDTH = 100;
+export const RICH_LIST_ITEM_MEDIA_HORIZONTAL_HEIGHT = 80;

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

@@ -12,6 +12,8 @@ import {
 } from './RichListItem.consts';
 import { ICON_COLORS, ICONS } from '../../Icons/Icon';
 import { DsImage } from '../../../index';
+import { useArgs } from '@storybook/preview-api';
+import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
 	title: 'Components/RichList/RichListItem',
@@ -21,6 +23,7 @@ export default {
 			components: { story },
 			template: "<div style='display: flex;padding: 16px;'><story /></div>",
 		}),
+		withActions,
 	],
 } as Meta<typeof RichListItem>;
 
@@ -28,11 +31,11 @@ const expandStory = (story: StoryFn<typeof RichListItem>, args = {}) => {
 	story.argTypes = {
 		type: {
 			options: Object.values(RICH_LIST_ITEM_TYPE),
-			control: { type: 'select' },
+			control: 'select',
 		},
 		size: {
 			options: Object.values(RICH_LIST_ITEM_SIZE),
-			control: { type: 'select' },
+			control: 'select',
 		},
 		layout: {
 			options: Object.values(RICH_LIST_ITEM_LAYOUT),
@@ -40,45 +43,45 @@ const expandStory = (story: StoryFn<typeof RichListItem>, args = {}) => {
 		},
 		state: {
 			options: Object.values(RICH_LIST_ITEM_STATE),
-			control: { type: 'select' },
+			control: 'select',
 		},
 		iconColor: {
 			options: Object.values(ICON_COLORS),
-			control: { type: 'select' },
+			control: 'select',
 		},
 		borderColor: {
 			options: [null, ...Object.values(RICH_LIST_ITEM_BORDER_COLOR)],
-			control: { type: 'select' },
+			control: 'select',
 		},
 		icon: {
 			options: [null, ...Object.keys(ICONS)],
-			control: { type: 'select' },
+			control: 'select',
 		},
 		iconColorHex: {
-			control: { type: 'text' },
+			control: 'text',
 		},
 		borderColorHex: {
-			control: { type: 'text' },
+			control: 'text',
 		},
 		content: {
-			control: { type: 'text' },
+			control: 'text',
 		},
 		metadata: {
-			control: { type: 'text' },
+			control: 'text',
 		},
 		actions: {
-			control: { type: 'text' },
+			control: 'text',
 		},
 		draggableIconClassName: {
-			control: { type: 'text' },
+			control: 'text',
 		},
 		backgroundColor: {
 			options: [null, ...Object.values(RICH_LIST_ITEM_BACKGROUND_COLOR)],
-			control: { type: 'select' },
+			control: 'select',
 		},
 		elevation: {
 			options: [null, ...Object.values(RICH_LIST_ITEM_ELEVATION)],
-			control: { type: 'select' },
+			control: 'select',
 		},
 	} as ArgTypes;
 
@@ -123,11 +126,13 @@ const expandStory = (story: StoryFn<typeof RichListItem>, args = {}) => {
 	return story;
 };
 
-const InteractiveStoryTemplate: StoryFn<typeof RichListItem> = (args, { updateArgs }) => {
+const InteractiveStoryTemplate: StoryFn<typeof RichListItem> = (args) => {
+	const [_, updateArgs] = useArgs();
+
 	return {
 		components: { RichListItem },
 		setup() {
-			return { ...args };
+			return args;
 		},
 		data() {
 			return {
@@ -178,11 +183,13 @@ const InteractiveStoryTemplate: StoryFn<typeof RichListItem> = (args, { updateAr
 export const Interactive = InteractiveStoryTemplate.bind({});
 expandStory(Interactive);
 
-const WithMediaStoryTemplate: StoryFn<typeof RichListItem> = (args, { updateArgs }) => {
+const WithMediaStoryTemplate: StoryFn<typeof RichListItem> = (args) => {
+	const [_, updateArgs] = useArgs();
+
 	return {
 		components: { RichListItem, DsImage },
 		setup() {
-			return { ...args };
+			return args;
 		},
 		data() {
 			return {

package/lib/js/components/RichList/RichListItem/RichListItem.vue

@@ -95,6 +95,10 @@ $rich-list-item-background-colors: (
 	),
 );
 
+// Keep in sync with RICH_LIST_ITEM_MEDIA_HORIZONTAL_WIDTH and _HEIGHT
+$rich-list-item-media-horizontal-width: 100px;
+$rich-list-item-media-horizontal-height: 80px;
+
 .ds-richListItem {
 	$root: &;
 
@@ -364,9 +368,9 @@ $rich-list-item-background-colors: (
 	}
 
 	&__mediaHorizontal {
-		height: 80px;
+		height: $rich-list-item-media-horizontal-height;
 		margin-right: $space-3xs;
-		width: 100px;
+		width: $rich-list-item-media-horizontal-width;
 	}
 
 	&__mediaVertical {
@@ -453,7 +457,7 @@ import DsIcon, {
 	IconItem,
 	ICONS,
 } from '../../../components/Icons/Icon';
-import { PropType, toRaw } from 'vue';
+import { defineComponent, PropType, toRaw } from 'vue';
 import {
 	RICH_LIST_ITEM_BACKGROUND_COLOR,
 	RICH_LIST_ITEM_BORDER_COLOR,
@@ -471,7 +475,7 @@ import {
 	RichListItemType,
 } from './RichListItem.consts';
 
-export default {
+export default defineComponent({
 	name: 'RichListItem',
 	components: {
 		DsCheckbox,
@@ -659,5 +663,5 @@ export default {
 			return !!this.$slots.media;
 		},
 	},
-};
+});
 </script>

package/lib/js/components/SectionTitle/SectionTitle.stories.ts

@@ -8,10 +8,10 @@ export default {
 	component: SectionTitle,
 } as Meta<typeof SectionTitle>;
 
-const StoryTemplate: StoryFn<typeof SectionTitle> = (args, { updateArgs }) => ({
+const StoryTemplate: StoryFn<typeof SectionTitle> = (args) => ({
 	components: { SectionTitle },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `<section-title :size="size" :supporting-text="supportingText" :title-text="titleText" />`,
 });
@@ -21,12 +21,13 @@ export const Interactive = StoryTemplate.bind({});
 const args = {
 	supportingText: '',
 	titleText: 'Title',
+	size: SECTION_TITLE_SIZES.XS,
 } as Args;
 
 const argTypes = {
 	size: {
-		control: { type: 'select', options: Object.values(SECTION_TITLE_SIZES) },
-		defaultValue: SECTION_TITLE_SIZES.XS,
+		control: 'select',
+		options: Object.values(SECTION_TITLE_SIZES),
 	},
 } as ArgTypes;
 

package/lib/js/components/SectionTitle/SectionTitle.vue

@@ -32,9 +32,10 @@
 </style>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import { SECTION_TITLE_SIZES } from './SectionTitle.consts';
 
-export default {
+export default defineComponent({
 	name: 'SectionTitle',
 	props: {
 		// It's unused for now but we want to have the prop already
@@ -54,5 +55,5 @@ export default {
 			required: true,
 		},
 	},
-};
+});
 </script>

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

@@ -26,7 +26,7 @@ export const Mix: StoryFn<typeof SelectList> = (args) => ({
 		SelectListSectionTitle,
 	},
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 			<select-list>

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

@@ -13,7 +13,9 @@
 </style>
 
 <script lang="ts">
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'SelectList',
-};
+});
 </script>

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

@@ -16,7 +16,7 @@ export default {
 const StoryTemplate: StoryFn<typeof SelectListItem> = (args) => ({
 	components: { SelectListItem },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 			<select-list-item
@@ -52,16 +52,20 @@ const args = {
 
 const argTypes = {
 	iconLeft: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	selectionMode: {
-		control: { type: 'select', options: Object.values(SELECT_LIST_ITEM_SELECTION_MODE) },
+		control: 'select',
+		options: Object.values(SELECT_LIST_ITEM_SELECTION_MODE),
 	},
 	size: {
-		control: { type: 'select', options: Object.values(SELECT_LIST_ITEM_SIZES) },
+		control: 'select',
+		options: Object.values(SELECT_LIST_ITEM_SIZES),
 	},
 	state: {
-		control: { type: 'select', options: Object.values(SELECT_LIST_ITEM_STATES) },
+		control: 'select',
+		options: Object.values(SELECT_LIST_ITEM_STATES),
 	},
 } as ArgTypes;
 

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

@@ -167,9 +167,9 @@ import {
 	SELECT_LIST_ITEM_STATES,
 } from './SelectListItem.consts';
 import DsIcon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
-import { toRaw } from 'vue';
+import { defineComponent, toRaw } from 'vue';
 
-export default {
+export default defineComponent({
 	name: 'SelectListItem',
 	components: {
 		DsIcon,
@@ -236,5 +236,5 @@ export default {
 			return this.state === SELECT_LIST_ITEM_STATES.DISABLED;
 		},
 	},
-};
+});
 </script>

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

@@ -17,10 +17,12 @@
 <script lang="ts">
 import Divider from '../../Divider/Divider.vue';
 
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'SelectListItemDivider',
 	components: {
 		Divider,
 	},
-};
+});
 </script>

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

@@ -3,16 +3,18 @@ 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 };
+		return args;
 	},
 	template: template('select-list-item-tile'),
 	data,
@@ -36,7 +38,7 @@ Interactive.parameters = {
 const StoryStaticTemplate: StoryFn<typeof SelectListItemTile> = (args) => ({
 	components: { SelectListItemTile },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: template('select-list-item-tile'),
 	data,
@@ -47,6 +49,7 @@ export const Static = StoryStaticTemplate.bind({});
 Static.argTypes = argTypes;
 
 Static.args = {
+	...args,
 	interactive: false,
 	iconLeft: null,
 	iconRight: null,

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

@@ -28,11 +28,13 @@
 import Tile from '../../Tile';
 import { props } from '../../Tile/Tile.shared';
 
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'SelectListItemTile',
 	components: {
 		DsTile: Tile,
 	},
 	props,
-};
+});
 </script>