@bethinkpl/design-system 25.0.10 → 26.0.1

package/lib/js/components/PopOver/PopOver.vue

@@ -26,8 +26,8 @@
 			>
 				<img v-if="headerImageUrl" class="ds-popOver__image" :src="headerImageUrl" alt="" />
 				<div class="ds-popOver__content">
-					<div v-if="titleText" class="ds-popOver__title"> {{ titleText }} </div>
-					<div v-if="subtitleText" class="ds-popOver__subtitle"> {{ subtitleText }} </div>
+					<div v-if="titleText" class="ds-popOver__title"> {{ titleText }}</div>
+					<div v-if="subtitleText" class="ds-popOver__subtitle"> {{ subtitleText }}</div>
 					<div class="ds-popOver__contentSlot" :class="{ '-ds-maxHeight': maxHeight }">
 						<slot :close="close" />
 					</div>
@@ -221,7 +221,9 @@ import {
 } from './PopOver.consts';
 import DsButton, { BUTTON_SIZES, BUTTON_TYPES } from '../Buttons/Button';
 
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'PopOver',
 	components: {
 		VuePopper,
@@ -335,5 +337,5 @@ export default {
 			this.key++;
 		},
 	},
-};
+});
 </script>

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

@@ -22,80 +22,87 @@ const StoryTemplate: StoryFn<typeof ProgressBar> = (args) => ({
 		return { args };
 	},
 	template: `
-			<progress-bar v-bind=args></progress-bar>`,
+		<progress-bar v-bind=args></progress-bar>`,
 });
 
 export const Interactive = StoryTemplate.bind({});
 
 const argTypes = {
 	size: {
-		control: { type: 'select', options: Object.values(PROGRESS_BAR_SIZES) },
-		defaultValue: PROGRESS_BAR_SIZES.SMALL,
+		control: 'select',
+		options: Object.values(PROGRESS_BAR_SIZES),
 	},
 	labelTextSize: {
-		control: { type: 'select', options: Object.values(PROGRESS_BAR_LABEL_TEXT_SIZES) },
-		defaultValue: PROGRESS_BAR_LABEL_TEXT_SIZES.SMALL,
+		control: 'select',
+		options: Object.values(PROGRESS_BAR_LABEL_TEXT_SIZES),
 	},
 	ranges: {
-		control: { type: 'array' },
-		defaultValue: [
-			{
-				color: PROGRESS_BAR_RANGE_COLORS.INFO,
-				start: 0,
-				length: 30,
-			} as ProgressBarRange,
-			{
-				color: PROGRESS_BAR_RANGE_COLORS.INFO_WEAK,
-				start: 30,
-				length: 10,
-			} as ProgressBarRange,
-			{
-				color: PROGRESS_BAR_RANGE_COLORS.INFO_GHOST,
-				start: 40,
-				length: 10,
-			} as ProgressBarRange,
-		],
+		control: 'object',
 	},
 	radius: {
-		control: { type: 'select', options: Object.values(PROGRESS_BAR_RADII) },
-		defaultValue: PROGRESS_BAR_RADII.DEFAULT,
+		control: 'select',
+		options: Object.values(PROGRESS_BAR_RADII),
 	},
 	layout: {
-		control: { type: 'select', options: Object.values(PROGRESS_BAR_LAYOUTS) },
-		defaultValue: PROGRESS_BAR_LAYOUTS.DEFAULT,
+		control: 'select',
+		options: Object.values(PROGRESS_BAR_LAYOUTS),
 	},
 	labelText: {
-		control: { type: 'text' },
-		defaultValue: 'Label text',
+		control: 'text',
 	},
 	labelData: {
-		control: { type: 'text' },
-		defaultValue: '30',
+		control: 'text',
 	},
 	labelDataSupporting: {
-		control: { type: 'text' },
-		defaultValue: '100',
+		control: 'text',
 	},
 	labelDataSuffix: {
-		control: { type: 'text' },
-		defaultValue: '(%)',
+		control: 'text',
 	},
 	badgePosition: {
 		// we use `text` type, because Storybook doesn't allow empty field in `number` type which imitates null
-		control: { type: 'text' },
-		defaultValue: '50',
+		control: 'text',
 	},
 	badgeColor: {
-		control: { type: 'select', options: Object.values(PROGRESS_BAR_BADGE_COLORS) },
-		defaultValue: PROGRESS_BAR_BADGE_COLORS.INFO,
+		control: 'select',
+		options: Object.values(PROGRESS_BAR_BADGE_COLORS),
 	},
 	labelTextEllipsis: {
-		control: { type: 'boolean' },
-		defaultValue: false,
+		control: 'boolean',
 	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;
+Interactive.args = {
+	size: PROGRESS_BAR_SIZES.SMALL,
+	labelTextSize: PROGRESS_BAR_LABEL_TEXT_SIZES.SMALL,
+	ranges: [
+		{
+			color: PROGRESS_BAR_RANGE_COLORS.INFO,
+			start: 0,
+			length: 30,
+		} as ProgressBarRange,
+		{
+			color: PROGRESS_BAR_RANGE_COLORS.INFO_WEAK,
+			start: 30,
+			length: 10,
+		} as ProgressBarRange,
+		{
+			color: PROGRESS_BAR_RANGE_COLORS.INFO_GHOST,
+			start: 40,
+			length: 10,
+		} as ProgressBarRange,
+	],
+	radius: PROGRESS_BAR_RADII.DEFAULT,
+	layout: PROGRESS_BAR_LAYOUTS.DEFAULT,
+	labelText: 'Label text',
+	labelData: '30',
+	labelDataSupporting: '100',
+	labelDataSuffix: '(%)',
+	badgePosition: '50',
+	badgeColor: PROGRESS_BAR_BADGE_COLORS.INFO,
+	labelTextEllipsis: false,
+} as Args;
 
 Interactive.parameters = {
 	design: {

package/lib/js/components/ProgressBar/ProgressBar.vue

@@ -306,7 +306,7 @@ $progress-bar-badge-colors: (
 </style>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import {
 	PROGRESS_BAR_BADGE_COLORS,
 	PROGRESS_BAR_LABEL_TEXT_SIZES,
@@ -318,7 +318,7 @@ import {
 
 import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
 
-export default {
+export default defineComponent({
 	name: 'ProgressBar',
 	components: {
 		DsIcon,
@@ -412,5 +412,5 @@ export default {
 			return this.labelData || this.labelDataSupporting || this.labelDataSuffix;
 		},
 	},
-};
+});
 </script>

package/lib/js/components/ProgressDonutChart/ProgressDonutChart.spec.ts

@@ -14,7 +14,7 @@ const createComponent = function ({
 	ranges = [],
 }: createComponentOptions) {
 	return shallowMount(ProgressDonutChart, {
-		propsData: {
+		props: {
 			label,
 			state,
 			ranges,

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

@@ -1,10 +1,9 @@
 import ProgressDonutChart from './ProgressDonutChart.vue';
 
-import { ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import {
 	PROGRESS_DONUT_CHART_RANGE_COLORS,
 	PROGRESS_DONUT_CHART_STATES,
-	ProgressDonutChartRange,
 } from './ProgressDonutChart.consts';
 
 export default {
@@ -25,38 +24,43 @@ const StoryTemplate: StoryFn<typeof ProgressDonutChart> = (args) => ({
 
 export const Interactive = StoryTemplate.bind({});
 
+const args = {
+	label: '70',
+	state: PROGRESS_DONUT_CHART_STATES.DEFAULT,
+	ranges: [
+		{
+			color: PROGRESS_DONUT_CHART_RANGE_COLORS.SUCCESS,
+			start: 0,
+			length: 30,
+		},
+		{
+			color: PROGRESS_DONUT_CHART_RANGE_COLORS.INFO,
+			start: 30,
+			length: 25,
+		},
+		{
+			color: PROGRESS_DONUT_CHART_RANGE_COLORS.FAIL_GHOST,
+			start: 55,
+			length: 25,
+		},
+	],
+} as Args;
+
 const argTypes = {
 	label: {
-		control: { type: 'text' },
-		defaultValue: '70',
+		control: 'text',
 	},
 	state: {
-		control: { type: 'select', options: Object.values(PROGRESS_DONUT_CHART_STATES) },
-		defaultValue: PROGRESS_DONUT_CHART_STATES.DEFAULT,
+		control: 'select',
+		options: Object.values(PROGRESS_DONUT_CHART_STATES),
 	},
 	ranges: {
-		control: { type: 'array' },
-		defaultValue: [
-			{
-				color: PROGRESS_DONUT_CHART_RANGE_COLORS.SUCCESS,
-				start: 0,
-				length: 30,
-			} as ProgressDonutChartRange,
-			{
-				color: PROGRESS_DONUT_CHART_RANGE_COLORS.INFO,
-				start: 30,
-				length: 25,
-			} as ProgressDonutChartRange,
-			{
-				color: PROGRESS_DONUT_CHART_RANGE_COLORS.FAIL_GHOST,
-				start: 55,
-				length: 25,
-			} as ProgressDonutChartRange,
-		],
+		control: 'object',
 	},
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;
+Interactive.args = args;
 
 Interactive.parameters = {
 	design: {

package/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue

@@ -226,7 +226,7 @@ import {
 	ProgressDonutChartRange,
 	ProgressDonutChartState,
 } from './ProgressDonutChart.consts';
-import { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
 
 const OFFSET_IN_DEGREES_OF_TRACK_START_POINT = 90; // 90 is to set starting point at the bottom
@@ -235,7 +235,8 @@ const PROGRESS_DONUT_CHART_STROKE_WIDTH = 4; // keep consider with $progress-don
 const PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT = PROGRESS_DONUT_CHART_SIZE / 2;
 const PROGRESS_DONUT_CHART_CIRCLE_RADIUS =
 	PROGRESS_DONUT_CHART_SIZE / 2 - PROGRESS_DONUT_CHART_STROKE_WIDTH / 2;
-export default {
+
+export default defineComponent({
 	name: 'ProgressDonutChart',
 	components: {
 		DsIcon,
@@ -285,5 +286,5 @@ export default {
 			});
 		},
 	},
-};
+});
 </script>

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

@@ -12,6 +12,8 @@ import {
 } from '../RichListItem';
 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/BasicRichListItem',
@@ -21,6 +23,7 @@ export default {
 			components: { story },
 			template: "<div style='display: flex;padding: 16px;'><story /></div>",
 		}),
+		withActions,
 	],
 } as Meta<typeof BasicRichListItem>;
 
@@ -28,11 +31,11 @@ const expandStory = (story: StoryFn<typeof BasicRichListItem>, 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,63 +43,63 @@ const expandStory = (story: StoryFn<typeof BasicRichListItem>, args = {}) => {
 		},
 		state: {
 			options: Object.values(RICH_LIST_ITEM_STATE),
-			control: { type: 'select' },
+			control: 'select',
 		},
 		iconColor: {
 			options: [null, ...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',
 		},
 		eyebrow: {
-			control: { type: 'text' },
+			control: 'text',
 		},
 		eyebrowEllipsis: {
-			control: { type: 'boolean' },
+			control: 'boolean',
 		},
 		isEyebrowUppercase: {
-			control: { type: 'boolean' },
+			control: 'boolean',
 		},
 		text: {
-			control: { type: 'text' },
+			control: 'text',
 		},
 		textEllipsis: {
-			control: { type: 'boolean' },
+			control: 'boolean',
 		},
 		supportingText: {
-			control: { type: 'text' },
+			control: 'text',
 		},
 		supportingTextEllipsis: {
-			control: { type: 'boolean' },
+			control: 'boolean',
 		},
 		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;
 
@@ -149,67 +152,73 @@ const expandStory = (story: StoryFn<typeof BasicRichListItem>, args = {}) => {
 	return story;
 };
 
-const InteractiveStoryTemplate: StoryFn<typeof BasicRichListItem> = (args, { updateArgs }) => ({
-	components: { BasicRichListItem },
-	setup() {
-		return { ...args };
-	},
-	data() {
-		return {
-			ICONS: Object.freeze(ICONS),
-		};
-	},
-	methods: {
-		updateIsSelected(isSelected) {
-			updateArgs({ isSelected });
+const InteractiveStoryTemplate: StoryFn<typeof BasicRichListItem> = (args) => {
+	const [_, updateArgs] = useArgs();
+
+	return {
+		components: { BasicRichListItem },
+		setup() {
+			return args;
 		},
-	},
-	template: `
-	<basic-rich-list-item
-		:size="size"
-		:type="type"
-		:layout="layout"
-		:is-interactive="isInteractive"
-		:is-draggable="isDraggable"
-		:icon="ICONS[icon]"
-		:icon-color="iconColor"
-		:icon-color-hex="iconColorHex"
-		:is-dimmed="isDimmed"
-		:border-color="borderColor"
-		:border-color-hex="borderColorHex"
-		:state="state"
-		:eyebrow="eyebrow === 'null' ? null : eyebrow"
-		:eyebrow-ellipsis="eyebrowEllipsis"
-		:is-eyebrow-uppercase="isEyebrowUppercase"
-		:text="text"
-		:text-ellipsis="textEllipsis"
-		:supporting-text="supportingText === 'null' ? null : supportingText"
-		:supporting-text-ellipsis="supportingTextEllipsis"
-		:background-color="backgroundColor"
-		:elevation="elevation"
-		:has-draggable-handler="hasDraggableHandler"
-		:has-actions-slot-divider="hasActionsSlotDivider"
-		:is-selectable="isSelectable"
-		:is-selected="isSelected"
-		@update:is-selected="updateIsSelected"
-	>
-		<template v-if="metadata" #metadata>
-			<div v-html="metadata" />
-		</template>
-		<template v-if="actions" #actions>
-			<div v-html="actions" />
-		</template>
-	</basic-rich-list-item>`,
-});
+		data() {
+			return {
+				ICONS: Object.freeze(ICONS),
+			};
+		},
+		methods: {
+			updateIsSelected(isSelected) {
+				updateArgs({ isSelected });
+			},
+		},
+		template: `
+		<basic-rich-list-item
+			:size="size"
+			:type="type"
+			:layout="layout"
+			:is-interactive="isInteractive"
+			:is-draggable="isDraggable"
+			:icon="ICONS[icon]"
+			:icon-color="iconColor"
+			:icon-color-hex="iconColorHex"
+			:is-dimmed="isDimmed"
+			:border-color="borderColor"
+			:border-color-hex="borderColorHex"
+			:state="state"
+			:eyebrow="eyebrow === 'null' ? null : eyebrow"
+			:eyebrow-ellipsis="eyebrowEllipsis"
+			:is-eyebrow-uppercase="isEyebrowUppercase"
+			:text="text"
+			:text-ellipsis="textEllipsis"
+			:supporting-text="supportingText === 'null' ? null : supportingText"
+			:supporting-text-ellipsis="supportingTextEllipsis"
+			:background-color="backgroundColor"
+			:elevation="elevation"
+			:has-draggable-handler="hasDraggableHandler"
+			:has-actions-slot-divider="hasActionsSlotDivider"
+			:is-selectable="isSelectable"
+			:is-selected="isSelected"
+			@update:is-selected="updateIsSelected"
+		>
+			<template v-if="metadata" #metadata>
+				<div v-html="metadata" />
+			</template>
+			<template v-if="actions" #actions>
+				<div v-html="actions" />
+			</template>
+		</basic-rich-list-item>`,
+	};
+};
 
 export const Interactive = InteractiveStoryTemplate.bind({});
 expandStory(Interactive);
 
-const WithMediaStoryTemplate: StoryFn<typeof BasicRichListItem> = (args, { updateArgs }) => {
+const WithMediaStoryTemplate: StoryFn<typeof BasicRichListItem> = (args) => {
+	const [_, updateArgs] = useArgs();
+
 	return {
 		components: { BasicRichListItem, DsImage },
 		setup() {
-			return { ...args };
+			return args;
 		},
 		data() {
 			return {

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

@@ -98,7 +98,7 @@ import RichListItem, {
 	RichListItemType,
 } from '../RichListItem';
 import DsTextGroup from '../../TextGroup/TextGroup.vue';
-import { PropType, toRaw } from 'vue';
+import { defineComponent, PropType, toRaw } from 'vue';
 import { ICON_COLORS, IconColor, IconItem, ICONS } from '../../Icons/Icon';
 import {
 	TEXT_GROUP_SIZES,
@@ -107,7 +107,7 @@ import {
 	TextGroupState,
 } from '../../TextGroup';
 
-export default {
+export default defineComponent({
 	name: 'BasicRichListItem',
 	components: {
 		DsTextGroup,
@@ -270,5 +270,5 @@ export default {
 			return TEXT_GROUP_STATES.DEFAULT;
 		},
 	},
-};
+});
 </script>