@bethinkpl/design-system 25.0.10 → 26.0.1

package/lib/js/components/Drawer/DrawerListItem/DrawerListItem.stories.ts

@@ -11,7 +11,7 @@ export default {
 const StoryTemplate: StoryFn<typeof DrawerListItem> = (args) => ({
 	components: { DrawerListItem },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `<div style="height: 300px; width: 200px;">
 		<drawer-list-item :label="label" :value-text="valueText" :state="state" />
@@ -23,12 +23,13 @@ export const Interactive = StoryTemplate.bind({});
 const args = {
 	label: 'Label',
 	valueText: 'value',
+	state: DRAWER_LIST_ITEM_STATES.DEFAULT,
 } as Args;
 
 const argTypes = {
 	state: {
-		control: { type: 'select', options: Object.values(DRAWER_LIST_ITEM_STATES) },
-		defaultValue: DRAWER_LIST_ITEM_STATES.DEFAULT,
+		control: 'select',
+		options: Object.values(DRAWER_LIST_ITEM_STATES),
 	},
 } as ArgTypes;
 

package/lib/js/components/Drawer/DrawerListItem/DrawerListItem.vue

@@ -45,12 +45,12 @@
 </style>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 
 import { DRAWER_LIST_ITEM_STATES, DrawerListItemState } from './DrawerListItem.consts';
 import Icon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
 
-export default {
+export default defineComponent({
 	name: 'DrawerListItem',
 	components: {
 		DsIcon: Icon,
@@ -79,5 +79,5 @@ export default {
 			ICON_SIZES: Object.freeze(ICON_SIZES),
 		};
 	},
-};
+});
 </script>

package/lib/js/components/Drawer/DrawerListItemGroup/DrawerListItemGroup.stories.ts

@@ -11,7 +11,7 @@ export default {
 const StoryTemplate: StoryFn<typeof DrawerListItemGroup> = (args) => ({
 	components: { DrawerListItemGroup, DrawerListItem },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
     <drawer-list-item-group>

package/lib/js/components/Drawer/DrawerListItemGroup/DrawerListItemGroup.vue

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

package/lib/js/components/Drawer/DrawerSection/DrawerSection.stories.ts

@@ -3,67 +3,72 @@ import DrawerSection from './DrawerSection.vue';
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import { SECTION_HEADER_ICON_COLORS, SECTION_HEADER_SIZES } from '../../Headers/SectionHeader';
 import { ICONS } from '../../Icons/Icon';
+import { useArgs } from '@storybook/preview-api';
 
 export default {
 	title: 'Components/Drawer/DrawerSection',
 	component: DrawerSection,
 } as Meta<typeof DrawerSection>;
 
-const StoryTemplate: StoryFn<typeof DrawerSection> = (args, { updateArgs }) => ({
-	components: { DrawerSection },
-	setup() {
-		return { ...args };
-	},
-	data() {
-		return {
-			ICONS: Object.freeze(ICONS),
-		};
-	},
-	methods: {
-		infoClicked() {
-			console.log('info clicked');
+const StoryTemplate: StoryFn<typeof DrawerSection> = (args) => {
+	const [_, updateArgs] = useArgs();
+
+	return {
+		components: { DrawerSection },
+		setup() {
+			return args;
 		},
-		isExpandedUpdated(isExpanded: boolean) {
-			updateArgs({
-				isExpanded,
-			});
+		data() {
+			return {
+				ICONS: Object.freeze(ICONS),
+			};
 		},
-	},
-	template: `
-		<drawer-section
-			:size="size"
-			:title="title"
-			:title-ellipsis="titleEllipsis"
-			:supporting-text="supportingText"
-			:eyebrow="eyebrow"
-			:icon-left="ICONS[iconLeft]"
-			:icon-left-color="iconLeftColor"
-			:icon-right="ICONS[iconRight]"
-			:icon-right-color="iconRightColor"
-			:info="info"
-			:has-divider="hasDivider"
-			:is-expandable="isExpandable"
-			:is-expanded="isExpanded"
-			@infoClick="infoClicked"
-			@update:isExpanded="isExpandedUpdated"
-		>
-			Default slot
-			<template #uncollapsible>Uncollapsible slot</template>
-		</drawer-section>`,
-});
+		methods: {
+			infoClicked() {
+				console.log('info clicked');
+			},
+			isExpandedUpdated(isExpanded: boolean) {
+				updateArgs({
+					isExpanded,
+				});
+			},
+		},
+		template: `
+			<drawer-section
+				:size="size"
+				:title="title"
+				:title-ellipsis="titleEllipsis"
+				:supporting-text="supportingText"
+				:eyebrow="eyebrow"
+				:icon-left="ICONS[iconLeft]"
+				:icon-left-color="iconLeftColor"
+				:icon-right="ICONS[iconRight]"
+				:icon-right-color="iconRightColor"
+				:info="info"
+				:has-divider="hasDivider"
+				:is-expandable="isExpandable"
+				:is-expanded="isExpanded"
+				@infoClick="infoClicked"
+				@update:isExpanded="isExpandedUpdated"
+			>
+				Default slot
+				<template #uncollapsible>Uncollapsible slot</template>
+			</drawer-section>`,
+	};
+};
 
 export const Interactive = StoryTemplate.bind({});
 
 const args = {
-	size: SECTION_HEADER_SIZES.XX_SMALL,
+	size: SECTION_HEADER_SIZES.MEDIUM,
 	title: 'Drawer Section Header',
 	titleEllipsis: false,
 	supportingText: '',
 	eyebrow: '',
 	iconLeft: null,
-	iconLeftColor: null,
+	iconLeftColor: SECTION_HEADER_ICON_COLORS.NEUTRAL,
 	iconRight: null,
-	iconRightColor: null,
+	iconRightColor: SECTION_HEADER_ICON_COLORS.NEUTRAL,
 	info: false,
 	hasDivider: true,
 	isExpandable: false,
@@ -72,32 +77,30 @@ const args = {
 
 const argTypes = {
 	iconLeft: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: null,
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	iconLeftColor: {
-		control: { type: 'select', options: [null, ...Object.values(SECTION_HEADER_ICON_COLORS)] },
-		defaultValue: SECTION_HEADER_ICON_COLORS.NEUTRAL,
+		control: 'select',
+		options: [null, ...Object.values(SECTION_HEADER_ICON_COLORS)],
 	},
 	iconRight: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: null,
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	iconRightColor: {
-		control: { type: 'select', options: [null, ...Object.values(SECTION_HEADER_ICON_COLORS)] },
-		defaultValue: SECTION_HEADER_ICON_COLORS.NEUTRAL,
+		control: 'select',
+		options: [null, ...Object.values(SECTION_HEADER_ICON_COLORS)],
 	},
 	size: {
-		control: { type: 'select', options: Object.values(SECTION_HEADER_SIZES) },
-		defaultValue: SECTION_HEADER_SIZES.MEDIUM,
+		control: 'select',
+		options: Object.values(SECTION_HEADER_SIZES),
 	},
 	hasDivider: {
-		control: { type: 'boolean' },
-		defaultValue: true,
+		control: 'boolean',
 	},
 	info: {
-		control: { type: 'boolean' },
-		defaultValue: false,
+		control: 'boolean',
 	},
 } as ArgTypes;
 

package/lib/js/components/Drawer/DrawerSection/DrawerSection.vue

@@ -33,9 +33,9 @@ import SectionHeader, {
 	SECTION_HEADER_SIZES,
 	SectionHeaderIconColor,
 } from '../../Headers/SectionHeader';
-import { toRaw } from 'vue';
+import { defineComponent, toRaw } from 'vue';
 
-export default {
+export default defineComponent({
 	name: 'DrawerSection',
 	components: {
 		DsSectionHeader: SectionHeader,
@@ -139,5 +139,5 @@ export default {
 			this.$emit('info-click');
 		},
 	},
-};
+});
 </script>

package/lib/js/components/Drawer/DrawerTile/DrawerTile.stories.ts

@@ -11,7 +11,7 @@ export default {
 const StoryTemplate: StoryFn<typeof DrawerTile> = (args) => ({
 	components: { DrawerTile },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: template('drawer-tile'),
 	data,

package/lib/js/components/Drawer/DrawerTile/DrawerTile.vue

@@ -16,7 +16,9 @@
 import Tile from '../../Tile/Tile.vue';
 import { props } from '../../Tile/Tile.shared';
 
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'DrawerTile',
 	components: {
 		DsTile: Tile,
@@ -26,5 +28,5 @@ export default {
 	// TODO fix me when touching this file
 	// eslint-disable-next-line vue/require-emit-validator
 	emits: ['click'],
-};
+});
 </script>

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

@@ -17,7 +17,7 @@ export default {
 const StoryTemplate: StoryFn<typeof Dropdown> = (args) => ({
 	components: { Dropdown, SelectList, SelectListItem },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
     <div style="position: relative">
@@ -47,24 +47,24 @@ const args = {
 	forceShow: false,
 	sameWidth: false,
 	maxHeight: '',
+	placement: DROPDOWN_PLACEMENTS.BOTTOM_START,
 } as Args;
 
 const argTypes = {
 	triggerAction: {
-		control: { type: 'select', options: Object.values(DROPDOWN_TRIGGER_ACTIONS) },
-		defaultValue: DROPDOWN_TRIGGER_ACTIONS.CLICK,
+		control: 'select',
+		options: Object.values(DROPDOWN_TRIGGER_ACTIONS),
 	},
 	radius: {
-		control: { type: 'select', options: Object.values(DROPDOWN_RADIUSES) },
-		defaultValue: DROPDOWN_RADIUSES.BOTH,
+		control: 'select',
+		options: Object.values(DROPDOWN_RADIUSES),
 	},
 	placement: {
-		control: { type: 'select', options: Object.values(DROPDOWN_PLACEMENTS) },
-		defaultValue: DROPDOWN_PLACEMENTS.BOTTOM_START,
+		control: 'select',
+		options: Object.values(DROPDOWN_PLACEMENTS),
 	},
 	maxHeight: {
-		control: { type: 'text' },
-		defaultValue: '',
+		control: 'text',
 	},
 } as ArgTypes;
 

package/lib/js/components/Dropdown/Dropdown.vue

@@ -87,7 +87,9 @@ import {
 	DROPDOWN_TRIGGER_ACTIONS,
 } from './Dropdown.consts';
 
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'Dropdown',
 	components: {
 		VuePopper,
@@ -195,5 +197,5 @@ export default {
 			this.$emit('show');
 		},
 	},
-};
+});
 </script>

package/lib/js/components/Form/Checkbox/Checkbox.stories.ts

@@ -3,32 +3,39 @@ import Checkbox from './Checkbox.vue';
 import { Meta, StoryFn } from '@storybook/vue3';
 import { args, argTypes, template } from '../SelectionControl/SelectionControl.sb.shared';
 import { CHECKBOX_SIZE, CHECKBOX_STATE } from './Checkbox.consts';
+import { useArgs } from '@storybook/preview-api';
+import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
 	title: 'Components/Form/Checkbox',
 	component: Checkbox,
+	decorators: [withActions],
 } as Meta<typeof Checkbox>;
 
-const StoryTemplate: StoryFn<typeof Checkbox> = (args, { updateArgs }) => ({
-	components: { Checkbox },
-	setup() {
-		return { args };
-	},
-	methods: {
-		onIsSelectedUpdated(isSelected) {
-			updateArgs({
-				isSelected,
-			});
+const StoryTemplate: StoryFn<typeof Checkbox> = (args) => {
+	const [_, updateArgs] = useArgs();
+
+	return {
+		components: { Checkbox },
+		setup() {
+			return { args };
 		},
-	},
-	template: template('checkbox'),
-});
+		methods: {
+			onIsSelectedUpdated(isSelected) {
+				updateArgs({
+					isSelected,
+				});
+			},
+		},
+		template: template('checkbox'),
+	};
+};
 
 export const Interactive = StoryTemplate.bind({});
 
 Interactive.argTypes = argTypes(CHECKBOX_SIZE, CHECKBOX_STATE);
 
-Interactive.args = args;
+Interactive.args = args(CHECKBOX_SIZE, CHECKBOX_STATE);
 
 Interactive.parameters = {
 	actions: {

package/lib/js/components/Form/Checkbox/Checkbox.vue

@@ -14,13 +14,13 @@
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import { CHECKBOX_SIZE, CHECKBOX_STATE, CheckboxSize, CheckboxState } from './Checkbox.consts';
 import SelectionControl from '../SelectionControl/SelectionControl.vue';
 import { ICONS } from '../../Icons/Icon';
 import { SELECTION_CONTROL_TYPE } from '../SelectionControl/SelectionControl.consts';
 
-export default {
+export default defineComponent({
 	name: 'Checkbox',
 	components: { SelectionControl },
 	props: {
@@ -56,5 +56,5 @@ export default {
 			ICONS: Object.freeze(ICONS),
 		};
 	},
-};
+});
 </script>

package/lib/js/components/Form/RadioButton/RadioButton.stories.ts

@@ -3,32 +3,39 @@ import RadioButton from './RadioButton.vue';
 import { Meta, StoryFn } from '@storybook/vue3';
 import { args, argTypes, template } from '../SelectionControl/SelectionControl.sb.shared';
 import { RADIO_BUTTON_SIZE, RADIO_BUTTON_STATE } from './RadioButton.consts';
+import { useArgs } from '@storybook/preview-api';
+import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
 	title: 'Components/Form/RadioButton',
 	component: RadioButton,
+	decorators: [withActions],
 } as Meta<typeof RadioButton>;
 
-const StoryTemplate: StoryFn<typeof RadioButton> = (args, { updateArgs }) => ({
-	components: { RadioButton },
-	setup() {
-		return { args };
-	},
-	methods: {
-		onIsSelectedUpdated(isSelected) {
-			updateArgs({
-				isSelected,
-			});
+const StoryTemplate: StoryFn<typeof RadioButton> = (args) => {
+	const [_, updateArgs] = useArgs();
+
+	return {
+		components: { RadioButton },
+		setup() {
+			return { args };
 		},
-	},
-	template: template('radio-button'),
-});
+		methods: {
+			onIsSelectedUpdated(isSelected) {
+				updateArgs({
+					isSelected,
+				});
+			},
+		},
+		template: template('radio-button'),
+	};
+};
 
 export const Interactive = StoryTemplate.bind({});
 
 Interactive.argTypes = argTypes(RADIO_BUTTON_SIZE, RADIO_BUTTON_STATE);
 
-Interactive.args = args;
+Interactive.args = args(RADIO_BUTTON_SIZE, RADIO_BUTTON_STATE);
 
 Interactive.parameters = {
 	actions: {

package/lib/js/components/Form/RadioButton/RadioButton.vue

@@ -14,7 +14,7 @@
 </template>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import {
 	RADIO_BUTTON_SIZE,
 	RADIO_BUTTON_STATE,
@@ -25,7 +25,7 @@ import SelectionControl from '../SelectionControl/SelectionControl.vue';
 import { ICONS } from '../../Icons/Icon';
 import { SELECTION_CONTROL_TYPE } from '../SelectionControl/SelectionControl.consts';
 
-export default {
+export default defineComponent({
 	name: 'RadioButton',
 	components: { SelectionControl },
 	props: {
@@ -61,5 +61,5 @@ export default {
 			SELECTION_CONTROL_TYPE: Object.freeze(SELECTION_CONTROL_TYPE),
 		};
 	},
-};
+});
 </script>

package/lib/js/components/Form/SelectionControl/SelectionControl.sb.shared.ts

@@ -6,18 +6,21 @@ export const template = (componentTag: string) => `
 export const argTypes = (size, state) =>
 	({
 		size: {
-			control: { type: 'select', options: Object.values(size) },
-			defaultValue: size.SMALL,
+			control: 'select',
+			options: Object.values(size),
 		},
-		label: { control: { type: 'text' } },
-		isSelected: { control: { type: 'boolean' } },
+		label: { control: 'text' },
+		isSelected: { control: 'boolean' },
 		state: {
-			control: { type: 'select', options: Object.values(state) },
-			defaultValue: state.DEFAULT,
+			control: 'select',
+			options: Object.values(state),
 		},
 	} as ArgTypes);
 
-export const args = {
-	label: 'Example label',
-	isSelected: false,
-} as Args;
+export const args = (size, state) =>
+	({
+		label: 'Example label',
+		isSelected: false,
+		size: size.SMALL,
+		state: state.DEFAULT,
+	} as Args);

package/lib/js/components/Form/SelectionControl/SelectionControl.vue

@@ -228,7 +228,7 @@ $selection-control-sizes: (
 </style>
 
 <script lang="ts">
-import { PropType, toRaw } from 'vue';
+import { defineComponent, PropType, toRaw } from 'vue';
 import {
 	SELECTION_CONTROL_SIZE,
 	SELECTION_CONTROL_STATE,
@@ -240,7 +240,7 @@ import {
 import Icon from '../../Icons/Icon/Icon.vue';
 import { ICON_SIZES, ICONS } from '../../Icons/Icon';
 
-export default {
+export default defineComponent({
 	name: 'SelectionControl',
 	components: { Icon },
 	props: {
@@ -334,5 +334,5 @@ export default {
 			this.$emit('input:blur');
 		},
 	},
-};
+});
 </script>

package/lib/js/components/Headers/OverlayHeader/OverlayHeader.stories.ts

@@ -25,7 +25,7 @@ const StoryTemplate: StoryFn<typeof OverlayHeader> = (args) => ({
 		};
 	},
 	template: `
-			<div style="height: 300px">
+		<div style="height: 300px">
 			<overlay-header v-bind=args :dropdown-icon="ICONS[args.dropdownIcon]" @close="onClose">
 				<template v-if="args.accessorySlot" #accessory>
 					<div style="background: var(--raw-gray-300); height: 100%">{{ args.accessorySlot }}</div>
@@ -64,22 +64,22 @@ const args = {
 	titleLeadingSlot: 'leading',
 	titleTrailingSlot: 'trailing',
 	isTitleInteractive: false,
+	borderColor: OVERLAY_HEADER_BORDER_COLORS.NEUTRAL_GHOST,
+	state: OVERLAY_HEADER_STATES.DEFAULT,
 } as Args;
 
 const argTypes = {
 	borderColor: {
-		control: {
-			type: 'select',
-			options: Object.values(OVERLAY_HEADER_BORDER_COLORS),
-		},
-		defaultValue: OVERLAY_HEADER_BORDER_COLORS.NEUTRAL_GHOST,
+		control: 'select',
+		options: Object.values(OVERLAY_HEADER_BORDER_COLORS),
 	},
 	state: {
-		control: { type: 'select', options: Object.values(OVERLAY_HEADER_STATES) },
-		defaultValue: OVERLAY_HEADER_STATES.DEFAULT,
+		control: 'select',
+		options: Object.values(OVERLAY_HEADER_STATES),
 	},
 	dropdownIcon: {
-		control: { type: 'select', options: Object.keys(ICONS) },
+		control: 'select',
+		options: Object.keys(ICONS),
 	},
 } as ArgTypes;
 

package/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue

@@ -330,7 +330,9 @@ import { Value } from '../../../utils/type.utils';
 import { isElementEditable } from '../../../utils/shortcut-keys';
 import { toRaw } from 'vue';
 
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'OverlayHeader',
 	components: { DsIconButton, DsDivider, DsDropdown, DsSkeleton, DsTooltip },
 	props: {
@@ -364,7 +366,7 @@ export default {
 		},
 		dropdownIcon: {
 			type: Object,
-			default: ICONS.FA_ELLIPSIS_VERTICAL,
+			default: () => ICONS.FA_ELLIPSIS_VERTICAL,
 			validator(icon) {
 				return Object.values(ICONS).includes(toRaw(icon));
 			},
@@ -418,5 +420,5 @@ export default {
 			}
 		},
 	},
-};
+});
 </script>