@bethinkpl/design-system 25.0.10 → 26.0.1

package/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts

@@ -3,30 +3,35 @@ import { SURVEY_TOGGLE_MEANINGS } from '../../SurveyToggle';
 import { SURVEY_QUESTION_SCALE_CONTAINERS, SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { useArgs } from '@storybook/preview-api';
 
 export default {
 	title: 'Components/SurveyQuestions/SurveyQuestionScale',
 	component: SurveyQuestionScale,
 } as Meta<typeof SurveyQuestionScale>;
 
-const StoryTemplate: StoryFn<typeof SurveyQuestionScale> = (args, { updateArgs }) => ({
-	components: { SurveyQuestionScale },
-	setup() {
-		return { ...args };
-	},
-	template:
-		'<survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :state="state" :containers="containers" @select-change="selectedValueUpdate" @elaboration-change="elaborationUpdate">' +
-		'<template v-if="explanation" #explanation><div v-html="explanation" /></template>' +
-		'</survey-question-scale>',
-	methods: {
-		elaborationUpdate(elaborationValue) {
-			updateArgs({ elaborationValue });
+const StoryTemplate: StoryFn<typeof SurveyQuestionScale> = (args) => {
+	const [_, updateArgs] = useArgs();
+
+	return {
+		components: { SurveyQuestionScale },
+		setup() {
+			return args;
 		},
-		selectedValueUpdate(selectedValue) {
-			updateArgs({ selectedValue });
+		template:
+			'<survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :state="state" :containers="containers" @select-change="selectedValueUpdate" @elaboration-change="elaborationUpdate">' +
+			'<template v-if="explanation" #explanation><div v-html="explanation" /></template>' +
+			'</survey-question-scale>',
+		methods: {
+			elaborationUpdate(elaborationValue) {
+				updateArgs({ elaborationValue });
+			},
+			selectedValueUpdate(selectedValue) {
+				updateArgs({ selectedValue });
+			},
 		},
-	},
-});
+	};
+};
 
 export const Interactive = StoryTemplate.bind({});
 
@@ -38,6 +43,7 @@ const args = {
 		'<h3 style="text-align: center; margin-bottom: 16px;">Jak ocenić, czy slajdy i diagramy były zrozumiałe?</h3>\n<div>Wyczerpujące materiały dają poczucie pełnego zrozumienia, przy jednoczesnym usystematyzowaniu informacji. Wpływa na to nie tylko ich jakość, ale też ilość.</div>',
 	placeholder: 'Wpisz swoją odpowiedź',
 	containers: SURVEY_QUESTION_SCALE_CONTAINERS.TWO,
+	selectedValue: null,
 	scaleOptions: [
 		{
 			value: '1',
@@ -70,20 +76,21 @@ const args = {
 			standalone: true,
 		},
 	],
+	state: SURVEY_QUESTION_STATES.DEFAULT,
 } as Args;
 
 const argTypes = {
-	elaborationValue: { control: { type: 'text' } },
+	elaborationValue: { control: 'text' },
 	selectedValue: { control: false },
-	explanation: { control: { type: 'text' } },
+	explanation: { control: 'text' },
 	containers: {
-		control: { type: 'select' },
+		control: 'select',
 		options: Object.values(SURVEY_QUESTION_SCALE_CONTAINERS),
 	},
-	scaleOptions: { control: { type: 'object' } },
+	scaleOptions: { control: 'object' },
 	state: {
-		control: { type: 'select', options: Object.values(SURVEY_QUESTION_STATES) },
-		defaultValue: SURVEY_QUESTION_STATES.DEFAULT,
+		control: 'select',
+		options: Object.values(SURVEY_QUESTION_STATES),
 	},
 } as ArgTypes;
 
@@ -110,30 +117,34 @@ const argTypesDisabled = {
 	'select-change': { control: false },
 } as ArgTypes;
 
-const StoryLimitedWidthTemplate: StoryFn<typeof SurveyQuestionScale> = (args, { updateArgs }) => ({
-	components: { SurveyQuestionScale },
-	setup() {
-		return { ...args };
-	},
-	template:
-		'<div style="max-width: 600px"><survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :containers="containers" :state="state" @select-change="selectedValueUpdate" @elaboration-change="elaborationUpdate">' +
-		'<template v-if="explanation" #explanation><div v-html="explanation" /></template>' +
-		'</survey-question-scale></div>',
-	methods: {
-		elaborationUpdate(elaborationValue) {
-			updateArgs({ elaborationValue });
+const StoryLimitedWidthTemplate: StoryFn<typeof SurveyQuestionScale> = (args) => {
+	const [_, updateArgs] = useArgs();
+
+	return {
+		components: { SurveyQuestionScale },
+		setup() {
+			return args;
 		},
-		selectedValueUpdate(selectedValue) {
-			updateArgs({ selectedValue });
+		template:
+			'<div style="max-width: 600px"><survey-question-scale :title="title" :scale-options="scaleOptions" :elaboration-value="elaborationValue" :elaborationLabel="elaborationLabel" :placeholder="placeholder" :selected-value="selectedValue" :containers="containers" :state="state" @select-change="selectedValueUpdate" @elaboration-change="elaborationUpdate">' +
+			'<template v-if="explanation" #explanation><div v-html="explanation" /></template>' +
+			'</survey-question-scale></div>',
+		methods: {
+			elaborationUpdate(elaborationValue) {
+				updateArgs({ elaborationValue });
+			},
+			selectedValueUpdate(selectedValue) {
+				updateArgs({ selectedValue });
+			},
 		},
-	},
-});
+	};
+};
 
 export const LimitedWidth = StoryLimitedWidthTemplate.bind({});
 LimitedWidth.argTypes = {
 	...argTypesDisabled,
 	containers: {
-		control: { type: 'select' },
+		control: 'select',
 		options: Object.values(SURVEY_QUESTION_SCALE_CONTAINERS),
 	},
 } as ArgTypes;
@@ -146,6 +157,8 @@ LimitedWidth.args = {
 		'<h3 class="modalHeader" style="text-align: center; margin-bottom: 16px;">Jak ocenić, czy slajdy i diagramy były zrozumiałe?</h3>\n<div>Wyczerpujące materiały dają poczucie pełnego zrozumienia, przy jednoczesnym usystematyzowaniu informacji. Wpływa na to nie tylko ich jakość, ale też ilość.</div>',
 	placeholder: 'Wpisz swoją odpowiedź',
 	containers: SURVEY_QUESTION_SCALE_CONTAINERS.TWO,
+	state: SURVEY_QUESTION_STATES.DEFAULT,
+	selectedValue: null,
 	scaleOptions: [
 		{
 			value: '1',
@@ -180,34 +193,39 @@ LimitedWidth.args = {
 	],
 } as Args;
 
-const StorySevenOptionsTemplate: StoryFn<typeof SurveyQuestionScale> = (args, { updateArgs }) => ({
-	components: { SurveyQuestionScale },
-	setup() {
-		return { ...args };
-	},
-	data() {
-		return { elaboration: '' };
-	},
-	template:
-		'<survey-question-scale title="title" :scale-options="scaleOptions" elaborationLabel="elaborationLabel" :elaboration-value="elaboration" :selected-value="selectedValue" :containers="containers" @select-change="selectedValueUpdate" />',
-	methods: {
-		selectedValueUpdate(selectedValue) {
-			updateArgs({ selectedValue });
+const StorySevenOptionsTemplate: StoryFn<typeof SurveyQuestionScale> = (args) => {
+	const [_, updateArgs] = useArgs();
+
+	return {
+		components: { SurveyQuestionScale },
+		setup() {
+			return args;
 		},
-	},
-});
+		data() {
+			return { elaboration: '' };
+		},
+		template:
+			'<survey-question-scale title="title" :scale-options="scaleOptions" elaborationLabel="elaborationLabel" :elaboration-value="elaboration" :selected-value="selectedValue" :containers="containers" @select-change="selectedValueUpdate" />',
+		methods: {
+			selectedValueUpdate(selectedValue) {
+				updateArgs({ selectedValue });
+			},
+		},
+	};
+};
 
 export const SevenOptions = StorySevenOptionsTemplate.bind({});
 SevenOptions.argTypes = {
 	...argTypesDisabled,
 	containers: {
-		control: { type: 'select' },
+		control: 'select',
 		options: Object.values(SURVEY_QUESTION_SCALE_CONTAINERS),
 	},
 } as ArgTypes;
 
 SevenOptions.args = {
 	containers: SURVEY_QUESTION_SCALE_CONTAINERS.ONE,
+	selectedValue: null,
 	scaleOptions: [
 		{
 			value: '1',

package/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.vue

@@ -244,7 +244,8 @@ import SurveyQuestionTextarea from '../';
 import { SurveyQuestionScaleOption } from '../SurveyQuestion.domain';
 import { randomString } from '../../../utils/string';
 
-export default {
+import { defineComponent } from 'vue';
+export default defineComponent({
 	name: 'SurveyQuestionScale',
 	components: {
 		SurveyQuestionTextarea,
@@ -327,5 +328,5 @@ export default {
 			this.$emit('select-change', this.selectedValue === value ? null : value);
 		},
 	},
-};
+});
 </script>

package/lib/js/components/SurveyQuestions/SurveyQuestionTextarea.vue

@@ -34,7 +34,9 @@
 </style>
 
 <script lang="ts">
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'SurveyQuestionTextarea',
 	props: {
 		value: {
@@ -67,5 +69,5 @@ export default {
 			this.$emit('input', evt.target.value);
 		},
 	},
-};
+});
 </script>

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

@@ -16,7 +16,7 @@ export default {
 const StoryTemplate: StoryFn<typeof SurveyToggle> = (args) => ({
 	components: { SurveyToggle },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<div style="background-color:#f6f6f8"><survey-toggle :label="label"  :meaning="meaning" :content-text="contentText" :selected-icon="ICONS[selectedIcon]" :status="status" :state="state" /></div>',
@@ -29,26 +29,33 @@ const StoryTemplate: StoryFn<typeof SurveyToggle> = (args) => ({
 
 export const Interactive = StoryTemplate.bind({});
 
-const args = {} as Args;
+const args = {
+	label: 'label',
+	contentText: '1',
+	meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
+	status: SURVEY_TOGGLE_STATUSES.DEFAULT,
+	state: SURVEY_TOGGLE_STATES.DEFAULT,
+	selectedIcon: 'FA_CHECK_SOLID',
+} as Args;
 
 const argTypes = {
-	label: { control: { type: 'text' }, defaultValue: 'label' },
-	contentText: { control: { type: 'text' }, defaultValue: '1' },
+	label: { control: 'text' },
+	contentText: { control: 'text' },
 	meaning: {
-		control: { type: 'select', options: Object.values(SURVEY_TOGGLE_MEANINGS) },
-		defaultValue: SURVEY_TOGGLE_MEANINGS.PRIMARY,
+		control: 'select',
+		options: Object.values(SURVEY_TOGGLE_MEANINGS),
 	},
 	status: {
-		control: { type: 'select', options: Object.values(SURVEY_TOGGLE_STATUSES) },
-		defaultValue: SURVEY_TOGGLE_STATUSES.DEFAULT,
+		control: 'select',
+		options: Object.values(SURVEY_TOGGLE_STATUSES),
 	},
 	state: {
-		control: { type: 'select', options: Object.values(SURVEY_TOGGLE_STATES) },
-		defaultValue: SURVEY_TOGGLE_STATES.DEFAULT,
+		control: 'select',
+		options: Object.values(SURVEY_TOGGLE_STATES),
 	},
 	selectedIcon: {
-		control: { type: 'select', options: Object.keys(ICONS) },
-		defaultValue: 'FA_CHECK_SOLID',
+		control: 'select',
+		options: Object.keys(ICONS),
 	},
 } as ArgTypes;
 

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;