@bethinkpl/design-system 25.0.10 → 26.0.0

package/lib/js/components/SurveyToggle/SurveyToggle.vue

@@ -224,7 +224,9 @@ import {
 } from './SurveyToggle.consts';
 import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
 
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'SurveyToggle',
 	components: {
 		DsIcon,
@@ -314,5 +316,5 @@ export default {
 			return this.hovered;
 		},
 	},
-};
+});
 </script>

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

@@ -2,19 +2,21 @@ import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import DsSwitch from './Switch.vue';
 import Icon, { ICONS } from '../Icons/Icon';
 import { SWITCH_RADIUSES, SWITCH_SIDE, SWITCH_SIZES, SWITCH_STATE } from './Switch.consts';
+import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
 	title: 'Components/Switch',
 	component: DsSwitch,
+	decorators: [withActions],
 } as Meta<typeof DsSwitch>;
 
-const StoryTemplate: StoryFn<typeof DsSwitch> = (args, { updateArgs }) => ({
+const StoryTemplate: StoryFn<typeof DsSwitch> = (args) => ({
 	components: {
 		DsSwitch,
 		Icon,
 	},
 	setup() {
-		return { ...args };
+		return args;
 	},
 	methods: {
 		onSelectedUpdated(side) {
@@ -58,28 +60,28 @@ const args = {
 
 const argTypes = {
 	size: {
-		control: { type: 'select', options: Object.values(SWITCH_SIZES) },
-		defaultValue: SWITCH_SIZES.MEDIUM,
+		control: 'select',
+		options: Object.values(SWITCH_SIZES),
 	},
 	radius: {
-		control: { type: 'select', options: Object.values(SWITCH_RADIUSES) },
-		defaultValue: SWITCH_RADIUSES.CAPSULE,
+		control: 'select',
+		options: Object.values(SWITCH_RADIUSES),
 	},
 	iconLeft: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: null,
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	iconRight: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: null,
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	state: {
-		control: { type: 'select', options: Object.values(SWITCH_STATE) },
-		defaultValue: SWITCH_STATE.DEFAULT,
+		control: 'select',
+		options: Object.values(SWITCH_STATE),
 	},
 	selectedSide: {
-		control: { type: 'select', options: Object.values(SWITCH_SIDE) },
-		defaultValue: SWITCH_SIDE.LEFT,
+		control: 'select',
+		options: Object.values(SWITCH_SIDE),
 	},
 } as ArgTypes;
 

package/lib/js/components/Switch/Switch.vue

@@ -226,7 +226,7 @@ $switch-transition: all $default-transition-time ease-out;
 </style>
 
 <script lang="ts">
-import { PropType, toRaw } from 'vue';
+import { defineComponent, PropType, toRaw } from 'vue';
 import {
 	SWITCH_RADIUSES,
 	SWITCH_SIDE,
@@ -239,7 +239,7 @@ import {
 } from './Switch.consts';
 import DsIcon, { ICON_SIZES, IconItem, ICONS } from '../Icons/Icon';
 
-export default {
+export default defineComponent({
 	// eslint-disable-next-line vue/no-reserved-component-names
 	name: 'Switch',
 	components: {
@@ -346,5 +346,5 @@ export default {
 			this.$emit('update:selectedSide', this.currentSide);
 		},
 	},
-};
+});
 </script>

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

@@ -12,7 +12,7 @@ export default {
 const StoryTemplate: StoryFn<typeof TabItem> = (args) => ({
 	components: { TabItem },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<tab-item style="max-width: 150px" :icon="ICONS[icon]" :is-selected="isSelected" :label="label" :size="TAB_ITEM_SIZES[size]" :label-ellipsis="labelEllipsis" />',
@@ -27,29 +27,30 @@ const StoryTemplate: StoryFn<typeof TabItem> = (args) => ({
 export const Interactive = StoryTemplate.bind({});
 
 const args = {
+	icon: null,
+	size: 'MEDIUM',
+	label: 'Tab item',
 	isSelected: false,
+	labelEllipsis: false,
 } as Args;
 
 const argTypes = {
 	icon: {
-		control: { type: 'select', options: [...Object.keys(ICONS), null] },
-		defaultValue: null,
+		control: 'select',
+		options: [...Object.keys(ICONS), null],
 	},
 	size: {
-		control: { type: 'select', options: Object.keys(TAB_ITEM_SIZES) },
-		defaultValue: 'MEDIUM',
+		control: 'select',
+		options: Object.keys(TAB_ITEM_SIZES),
 	},
 	label: {
-		control: { type: 'text' },
-		defaultValue: 'Tab item',
+		control: 'text',
 	},
 	isSelected: {
-		control: { type: 'boolean' },
-		defaultValue: false,
+		control: 'boolean',
 	},
 	labelEllipsis: {
-		control: { type: 'boolean' },
-		defaultValue: false,
+		control: 'boolean',
 	},
 } as ArgTypes;
 

package/lib/js/components/TabItem/TabItem.vue

@@ -95,10 +95,10 @@
 
 <script lang="ts">
 import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
-import { toRaw } from 'vue';
+import { defineComponent, toRaw } from 'vue';
 import { TAB_ITEM_SIZES } from './TabItem.consts';
 
-export default {
+export default defineComponent({
 	name: 'TabItem',
 	components: {
 		DsIcon,
@@ -137,5 +137,5 @@ export default {
 			ICON_SIZES: Object.freeze(ICON_SIZES),
 		};
 	},
-};
+});
 </script>

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

@@ -1,4 +1,4 @@
-import { Args, Meta, StoryFn } from '@storybook/vue3';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import DsDivider from '../Divider/Divider.vue';
 import DsTextGroup from './TextGroup.vue';
 import {
@@ -16,7 +16,7 @@ export default {
 const StoryTemplate: StoryFn<typeof DsTextGroup> = (args) => ({
 	components: { DsDivider, DsTextGroup },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<ds-text-group
@@ -61,45 +61,49 @@ Interactive.args = {
 
 Interactive.argTypes = {
 	size: {
-		control: { type: 'select', options: Object.values(TEXT_GROUP_SIZES) },
+		control: 'select',
+		options: Object.values(TEXT_GROUP_SIZES),
 	},
 	color: {
-		control: { type: 'select', options: Object.values(TEXT_GROUP_COLORS) },
+		control: 'select',
+		options: Object.values(TEXT_GROUP_COLORS),
 	},
 	eyebrowText: {
-		control: { type: 'text' },
+		control: 'text',
 	},
 	eyebrowTextEllipsis: {
-		control: { type: 'boolean' },
+		control: 'boolean',
 	},
 	isEyebrowTextUppercase: {
-		control: { type: 'boolean' },
+		control: 'boolean',
 	},
 	mainText: {
-		control: { type: 'text' },
+		control: 'text',
 	},
 	mainTextEllipsis: {
-		control: { type: 'boolean' },
+		control: 'boolean',
 	},
 	supportingText: {
-		control: { type: 'text' },
+		control: 'text',
 	},
 	supportingTextEllipsis: {
-		control: { type: 'boolean' },
+		control: 'boolean',
 	},
 	isInteractive: {
-		control: { type: 'boolean' },
+		control: 'boolean',
 	},
 	skeletonLoadingSize: {
-		control: { type: 'select', options: Object.values(TEXT_GROUP_LOADING_SIZES) },
+		control: 'select',
+		options: Object.values(TEXT_GROUP_LOADING_SIZES),
 	},
 	isSelected: {
-		control: { type: 'boolean' },
+		control: 'boolean',
 	},
 	state: {
-		control: { type: 'select', options: Object.values(TEXT_GROUP_STATES) },
+		control: 'select',
+		options: Object.values(TEXT_GROUP_STATES),
 	},
-};
+} as ArgTypes;
 
 Interactive.parameters = {
 	design: {

package/lib/js/components/TextGroup/TextGroup.vue

@@ -59,7 +59,7 @@
 	</div>
 </template>
 
-<style lang="scss">
+<style lang="scss" scoped>
 @import '../../../styles/settings/typography/tokens';
 @import '../../../styles/settings/colors/tokens';
 @import '../../../styles/settings/spacings';

package/lib/js/components/Tile/Tile.sb.shared.ts

@@ -34,23 +34,24 @@ export const args = {
 	state: TILE_STATES.DEFAULT,
 	eyebrowEllipsis: true,
 	textEllipsis: true,
+	color: TILE_COLORS.NEUTRAL,
 } as Args;
 
 export const argTypes = {
 	iconLeft: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: null,
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	iconRight: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: null,
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	color: {
-		control: { type: 'select', options: [...Object.values(TILE_COLORS)] },
-		defaultValue: TILE_COLORS.NEUTRAL,
+		control: 'select',
+		options: [...Object.values(TILE_COLORS)],
 	},
 	state: {
-		control: { type: 'select', options: [...Object.values(TILE_STATES)] },
-		defaultValue: TILE_STATES.DEFAULT,
+		control: 'select',
+		options: [...Object.values(TILE_STATES)],
 	},
 } as ArgTypes;

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

@@ -1,57 +1,55 @@
+// SB8.0 Good code to copy when creating a new story - this code use new API
+
 import Tile from './Tile.vue';
 import { TILE_STATES } from './Tile.consts';
 
-import { Args, Meta, StoryFn } from '@storybook/vue3';
+import type { Args, Meta, StoryObj } from '@storybook/vue3';
 import { args, argTypes, data, template } from './Tile.sb.shared';
+import type { ComponentProps } from 'vue-component-type-helpers';
+import { withActions } from '@storybook/addon-actions/decorator';
+
+type TileProps = ComponentProps<typeof Tile>;
 
-export default {
+const meta: Meta<TileProps> = {
 	title: 'Components/Tile',
 	component: Tile,
-} as Meta<typeof Tile>;
-
-const StoryTemplate: StoryFn<typeof Tile> = (args) => ({
-	components: { Tile },
-	setup() {
-		return { ...args };
-	},
-	template: template('tile'),
-	data,
-});
-
-export const Interactive = StoryTemplate.bind({});
-
-Interactive.argTypes = argTypes;
-Interactive.args = args;
-
-Interactive.parameters = {
-	actions: {
-		handles: ['click'],
-	},
-	design: {
-		type: 'figma',
-		url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=1923%3A34378',
+	decorators: [withActions],
+	render: (args) => ({
+		components: { Tile },
+		setup() {
+			return args;
+		},
+		data,
+		template: template('tile'),
+	}),
+	argTypes,
+	parameters: {
+		actions: {
+			handles: ['click'],
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/izQdYyiBR1GQgFkaOIfIJI/LMS---DS---Components?node-id=1923%3A34378',
+		},
 	},
 };
+export default meta;
 
-const StoryStaticTemplate: StoryFn<typeof Tile> = (args) => ({
-	components: { Tile },
-	setup() {
-		return { ...args };
-	},
-	template: template('tile'),
-	data,
-});
-
-export const Static = StoryStaticTemplate.bind({});
+type Story = StoryObj<TileProps>;
 
-Static.argTypes = argTypes;
+export const Interactive: Story = {
+	args,
+};
 
-Static.args = {
-	interactive: false,
-	iconLeft: null,
-	iconRight: null,
-	text: 'this is a text text',
-	eyebrowText: 'this is an eyebrowText text',
-	additionalText: 'this is some additionalText',
-	state: TILE_STATES.DEFAULT,
-} as Args;
+export const Static: Story = {
+	args: {
+		...args,
+		interactive: false,
+		iconLeft: null,
+		iconRight: null,
+		text: 'this is a text text',
+		eyebrowText: 'this is an eyebrowText text',
+		additionalText: 'this is some additionalText',
+		state: TILE_STATES.DEFAULT,
+	} as Args,
+};

package/lib/js/components/Tile/Tile.vue

@@ -285,8 +285,9 @@ $tile-colors: (
 import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
 import { TILE_COLORS, TILE_STATES } from './Tile.consts';
 import { props } from './Tile.shared';
+import { defineComponent } from 'vue';
 
-export default {
+export default defineComponent({
 	name: 'Tile',
 	components: {
 		DsIcon,
@@ -319,5 +320,5 @@ export default {
 			}[this.state];
 		},
 	},
-};
+});
 </script>

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

@@ -2,16 +2,18 @@ import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import DsToast from './Toast.vue';
 import { TOAST_COLORS, TOAST_POSITIONS, TOAST_SIZES } from './Toast.consts';
 import { ICONS } from '../Icons/Icon';
+import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
 	title: 'Components/Toast',
 	component: DsToast,
+	decorators: [withActions],
 } as Meta<typeof DsToast>;
 
 const StoryTemplate: StoryFn<typeof DsToast> = (args) => ({
 	components: { DsToast },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	data() {
 		return {
@@ -63,35 +65,31 @@ const args = {
 
 const argTypes = {
 	size: {
-		control: { type: 'select' },
+		control: 'select',
 		options: Object.values(TOAST_SIZES),
-		defaultValue: TOAST_SIZES.MEDIUM,
 	},
 	position: {
-		control: { type: 'select' },
+		control: 'select',
 		options: Object.values(TOAST_POSITIONS),
-		defaultValue: TOAST_POSITIONS.CENTER,
 	},
 	boundariesSelector: {
-		control: { type: 'select' },
+		control: 'select',
 		options: [null, 'left', 'right'],
-		defaultValue: null,
 	},
 	color: {
-		control: { type: 'select' },
+		control: 'select',
 		options: Object.values(TOAST_COLORS),
-		defaultValue: TOAST_COLORS.INFO,
 	},
 	footerPrimaryButtonIcon: {
-		control: { type: 'select' },
+		control: 'select',
 		options: [null, ...Object.keys(ICONS)],
 	},
 	footerSecondaryButtonIcon: {
-		control: { type: 'select' },
+		control: 'select',
 		options: [null, ...Object.keys(ICONS)],
 	},
 	content: {
-		control: { type: 'text' },
+		control: 'text',
 	},
 } as ArgTypes;
 

package/lib/js/components/Toast/Toast.vue

@@ -98,7 +98,7 @@ import {
 	ToastPositions,
 	ToastSizes,
 } from './Toast.consts';
-import { PropType, toRaw } from 'vue';
+import { defineComponent, PropType, toRaw } from 'vue';
 import { ICONS } from '../Icons/Icon';
 
 const TOAST_OFFSET = 24;
@@ -126,7 +126,7 @@ function calculateBoundariesOffset(boundariesElement: HTMLElement) {
 	};
 }
 
-export default {
+export default defineComponent({
 	name: 'Toast',
 	components: {
 		DsButton,
@@ -279,5 +279,5 @@ export default {
 			}
 		},
 	},
-};
+});
 </script>

package/lib/js/components/Toggles/CounterToggle/CounterToggle.stories.ts

@@ -3,16 +3,18 @@ import { COUNTER_TOGGLE_COLORS } from './CounterToggle.consts';
 import { ICONS } from '../../Icons/Icon';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
 	title: 'Components/Toggles/CounterToggle',
 	component: CounterToggle,
+	decorators: [withActions],
 } as Meta<typeof CounterToggle>;
 
 const StoryTemplate: StoryFn<typeof CounterToggle> = (args) => ({
 	components: { CounterToggle },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<div :class="{ contrastBackground: isInverted }">' +
@@ -42,23 +44,21 @@ const args = {
 
 const argTypes = {
 	color: {
-		control: { type: 'select', options: Object.values(COUNTER_TOGGLE_COLORS) },
-		defaultValue: COUNTER_TOGGLE_COLORS.NEUTRAL_STRONG,
+		control: 'select',
+		options: Object.values(COUNTER_TOGGLE_COLORS),
 	},
 	icon: {
-		control: { type: 'select', options: Object.keys(ICONS) },
+		control: 'select',
+		options: Object.keys(ICONS),
 	},
 	counter: {
-		control: { type: 'text' },
-		defaultValue: null,
+		control: 'text',
 	},
 	isSelected: {
-		control: { type: 'boolean' },
-		defaultValue: false,
+		control: 'boolean',
 	},
 	isDisabled: {
-		control: { type: 'boolean' },
-		defaultValue: false,
+		control: 'boolean',
 	},
 } as ArgTypes;
 

package/lib/js/components/Toggles/CounterToggle/CounterToggle.vue

@@ -253,9 +253,9 @@ $counter-toggle-colors: (
 <script lang="ts">
 import { COUNTER_TOGGLE_COLORS } from './CounterToggle.consts';
 import Icon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
-import { toRaw } from 'vue';
+import { defineComponent, toRaw } from 'vue';
 
-export default {
+export default defineComponent({
 	name: 'CounterToggle',
 	components: {
 		Icon,
@@ -301,5 +301,5 @@ export default {
 			return this.counter !== null && this.counter !== '' && this.counter !== undefined;
 		},
 	},
-};
+});
 </script>

package/lib/js/components/Toggles/ToggleButton/ToggleButton.stories.ts

@@ -1,9 +1,9 @@
 import ToggleButton from './ToggleButton.vue';
 import {
-	TOGGLE_BUTTON_SIZES,
 	TOGGLE_BUTTON_COLORS,
-	TOGGLE_BUTTON_RADIUSES,
 	TOGGLE_BUTTON_LABEL_SIZES,
+	TOGGLE_BUTTON_RADIUSES,
+	TOGGLE_BUTTON_SIZES,
 	TOGGLE_BUTTON_STATES,
 } from './ToggleButton.consts';
 
@@ -18,7 +18,7 @@ export default {
 const StoryTemplate: StoryFn<typeof ToggleButton> = (args) => ({
 	components: { ToggleButton },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	data() {
 		return {
@@ -61,32 +61,32 @@ const args = {
 
 const argTypes = {
 	size: {
-		control: { type: 'select', options: Object.values(TOGGLE_BUTTON_SIZES) },
-		defaultValue: TOGGLE_BUTTON_SIZES.MEDIUM,
+		control: 'select',
+		options: Object.values(TOGGLE_BUTTON_SIZES),
 	},
 	color: {
-		control: { type: 'select', options: Object.values(TOGGLE_BUTTON_COLORS) },
-		defaultValue: TOGGLE_BUTTON_COLORS.NEUTRAL,
+		control: 'select',
+		options: Object.values(TOGGLE_BUTTON_COLORS),
 	},
 	radius: {
-		control: { type: 'select', options: Object.values(TOGGLE_BUTTON_RADIUSES) },
-		defaultValue: TOGGLE_BUTTON_RADIUSES.CAPSULE,
+		control: 'select',
+		options: Object.values(TOGGLE_BUTTON_RADIUSES),
 	},
 	labelSize: {
-		control: { type: 'select', options: Object.values(TOGGLE_BUTTON_LABEL_SIZES) },
-		defaultValue: TOGGLE_BUTTON_LABEL_SIZES.MEDIUM,
+		control: 'select',
+		options: Object.values(TOGGLE_BUTTON_LABEL_SIZES),
 	},
 	state: {
-		control: { type: 'select', options: Object.values(TOGGLE_BUTTON_STATES) },
-		defaultValue: TOGGLE_BUTTON_STATES.DEFAULT,
+		control: 'select',
+		options: Object.values(TOGGLE_BUTTON_STATES),
 	},
 	iconLeft: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: null,
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	iconRight: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: null,
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 } as ArgTypes;
 

package/lib/js/components/Toggles/ToggleButton/ToggleButton.vue

@@ -410,7 +410,7 @@ $toggle-button-colors: (
 
 <script lang="ts">
 import { Value } from '../../../utils/type.utils';
-import { PropType, toRaw } from 'vue';
+import { defineComponent, PropType, toRaw } from 'vue';
 
 import {
 	TOGGLE_BUTTON_COLORS,
@@ -427,7 +427,7 @@ import {
 import { ICON_SIZES, IconItem, ICONS, IconSize } from '../../Icons/Icon';
 import DsIcon from '../../Icons/Icon/Icon.vue';
 
-export default {
+export default defineComponent({
 	name: 'ToggleButton',
 	components: {
 		DsIcon,
@@ -530,5 +530,5 @@ export default {
 			return this.isInteractive;
 		},
 	},
-};
+});
 </script>