@bethinkpl/design-system 25.0.10 → 26.0.1

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

@@ -6,51 +6,56 @@ import {
 	SELECT_LIST_ITEM_SIZES,
 	SELECT_LIST_ITEM_STATES,
 } from '../SelectListItem/SelectListItem.consts';
+import { useArgs } from '@storybook/preview-api';
 
 export default {
 	title: 'Components/SelectList/SelectListItemToggle',
 	component: SelectListItemToggle,
 } as Meta<typeof SelectListItemToggle>;
 
-const StoryTemplate: StoryFn<typeof SelectListItemToggle> = (args, { updateArgs }) => ({
-	components: { SelectListItemToggle },
-	setup() {
-		return { ...args };
-	},
-	template: `
-			<select-list-item-toggle
-					:icon-off="ICONS[iconOff]"
-					:icon-on="ICONS[iconOn]"
-					:is-on="isOn"
-					:label-off="labelOff"
-					:label-on="labelOn"
-					:size="size"
-					:state="state"
-					@click.native="onClick"
-			/>
-    `,
-	data() {
-		return {
-			ICONS: Object.freeze(ICONS),
-		};
-	},
-	methods: {
-		onClick() {
-			updateArgs({
-				isLoading: true,
-			});
-			setTimeout(
-				() =>
-					updateArgs({
-						isLoading: false,
-						// @ts-ignore
-						isOn: !this.isOn,
-					}),
-				1000,
-			);
+const StoryTemplate: StoryFn<typeof SelectListItemToggle> = (args) => {
+	const [_, updateArgs] = useArgs();
+
+	return {
+		components: { SelectListItemToggle },
+		setup() {
+			return args;
 		},
-	},
-});
+		template: `
+				<select-list-item-toggle
+						:icon-off="ICONS[iconOff]"
+						:icon-on="ICONS[iconOn]"
+						:is-on="isOn"
+						:label-off="labelOff"
+						:label-on="labelOn"
+						:size="size"
+						:state="state"
+						@click.native="onClick"
+				/>
+		`,
+		data() {
+			return {
+				ICONS: Object.freeze(ICONS),
+			};
+		},
+		methods: {
+			onClick() {
+				updateArgs({
+					isLoading: true,
+				});
+				setTimeout(
+					() =>
+						updateArgs({
+							isLoading: false,
+							// @ts-ignore
+							isOn: !this.isOn,
+						}),
+					1000,
+				);
+			},
+		},
+	};
+};
 
 export const Interactive = StoryTemplate.bind({});
 
@@ -66,16 +71,20 @@ const args = {
 
 const argTypes = {
 	iconOff: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	iconOn: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	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/SelectListItemToggle/SelectListItemToggle.vue

@@ -17,9 +17,9 @@ import {
 } from '../SelectListItem/SelectListItem.consts';
 import { IconItem, ICONS } from '../../Icons/Icon';
 import SelectListItem from '../SelectListItem/SelectListItem.vue';
-import { toRaw } from 'vue';
+import { defineComponent, toRaw } from 'vue';
 
-export default {
+export default defineComponent({
 	name: 'SelectListItemToggle',
 	components: {
 		SelectListItem,
@@ -80,5 +80,5 @@ export default {
 			return this.isOn ? this.labelOn : this.labelOff;
 		},
 	},
-};
+});
 </script>

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

@@ -1,7 +1,7 @@
 import SelectListSectionTitle from './SelectListSectionTitle.vue';
 
 import SelectList from './../SelectList.vue';
-import { ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 export default {
 	title: 'Components/SelectList/SelectListSectionTitle',
@@ -11,26 +11,28 @@ export default {
 const StoryTemplate: StoryFn<typeof SelectListSectionTitle> = (args) => ({
 	components: { SelectList, SelectListSectionTitle },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
-			<select-list>
-				<select-list-section-title :label="label" :is-uppercase="isUppercase" /> 
-			</select-list>`,
+		<select-list>
+			<select-list-section-title :label="label" :is-uppercase="isUppercase" />
+		</select-list>`,
 });
 
 const argTypes = {
 	label: {
-		control: { type: 'text' },
-		defaultValue: 'Select List Section Title',
+		control: 'text',
 	},
 	isUppercase: {
-		control: { type: 'boolean' },
-		defaultValue: true,
+		control: 'boolean',
 	},
 } as ArgTypes;
 export const Interactive = StoryTemplate.bind({});
 
+Interactive.args = {
+	label: 'Select List Section Title',
+	isUppercase: true,
+} as Args;
 Interactive.argTypes = argTypes;
 Interactive.parameters = {
 	design: {

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

@@ -27,7 +27,9 @@
 </style>
 
 <script lang="ts">
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'SelectListSectionTitle',
 	props: {
 		label: {
@@ -39,5 +41,5 @@ export default {
 			default: true,
 		},
 	},
-};
+});
 </script>

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

@@ -3,6 +3,8 @@ import SelectionTile from './SelectionTile.vue';
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import { SELECTION_TILE_STATE, SELECTION_TILE_TYPE } from './SelectionTile.consts';
 import { ICONS } from '../Icons/Icon';
+import { useArgs } from '@storybook/preview-api';
+import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
 	title: 'Components/SelectionTile',
@@ -12,58 +14,64 @@ export default {
 			components: { story },
 			template: "<div style='display: flex; max-width: 300px;'><story /></div>",
 		}),
+		withActions,
 	],
 } as Meta<typeof SelectionTile>;
 
-const StoryTemplate: StoryFn<typeof SelectionTile> = (args, { updateArgs }) => ({
-	components: { SelectionTile },
-	setup() {
-		return { ...args };
-	},
-	methods: {
-		onIsSelectedUpdated(isSelected) {
-			updateArgs({
-				isSelected,
-			});
+const StoryTemplate: StoryFn<typeof SelectionTile> = (args) => {
+	const [_, updateArgs] = useArgs();
+
+	return {
+		components: { SelectionTile },
+		setup() {
+			return args;
 		},
-		onIconClick() {
-			alert('Klik w ikonę');
+		methods: {
+			onIsSelectedUpdated(isSelected) {
+				updateArgs({
+					isSelected,
+				});
+			},
+			onIconClick() {
+				alert('Klik w ikonę');
+			},
 		},
-	},
-	data() {
-		return {
-			ICONS: Object.freeze(ICONS),
-		};
-	},
-	template: `
-		<SelectionTile
-			:title="title"
-			:supporting-text="supportingText"
-			:type="type"
-			:icon="ICONS[icon]"
-			:is-selected="isSelected"
-			:state="state"
-			@icon-click="onIconClick"
-			@update:is-selected="onIsSelectedUpdated"
-		/>`,
-});
+		data() {
+			return {
+				ICONS: Object.freeze(ICONS),
+			};
+		},
+		template: `
+			<SelectionTile
+				:title="title"
+				:supporting-text="supportingText"
+				:type="type"
+				:icon="ICONS[icon]"
+				:is-selected="isSelected"
+				:state="state"
+				@icon-click="onIconClick"
+				@update:is-selected="onIsSelectedUpdated"
+			/>`,
+	};
+};
 
 export const Interactive = StoryTemplate.bind({});
 
 Interactive.argTypes = {
 	type: {
-		control: { type: 'select', options: Object.values(SELECTION_TILE_TYPE) },
-		defaultValue: SELECTION_TILE_TYPE.RADIO_BUTTON,
+		control: 'select',
+		options: Object.values(SELECTION_TILE_TYPE),
 	},
-	title: { control: { type: 'text' } },
-	supportingText: { control: { type: 'text' } },
+	title: { control: 'text' },
+	supportingText: { control: 'text' },
 	icon: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
-	isSelected: { control: { type: 'boolean' } },
+	isSelected: { control: 'boolean' },
 	state: {
-		control: { type: 'select', options: Object.values(SELECTION_TILE_STATE) },
-		defaultValue: SELECTION_TILE_STATE.DEFAULT,
+		control: 'select',
+		options: Object.values(SELECTION_TILE_STATE),
 	},
 } as ArgTypes;
 

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

@@ -1,4 +1,4 @@
-import { Args, Meta, StoryFn } from '@storybook/vue3';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import DsSkeleton from './Skeleton.vue';
 import { SKELETON_RADIUS_SIZES } from './Skeleton.consts';
 
@@ -10,7 +10,7 @@ export default {
 const StoryTemplate: StoryFn<typeof DsSkeleton> = (args) => ({
 	components: { DsSkeleton },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<div style="height: 200px; width: 300px;">
@@ -28,10 +28,10 @@ Interactive.args = {
 
 Interactive.argTypes = {
 	radius: {
-		control: { type: 'select', options: Object.values(SKELETON_RADIUS_SIZES) },
-		defaultValue: SKELETON_RADIUS_SIZES.MEDIUM,
+		control: 'select',
+		options: Object.values(SKELETON_RADIUS_SIZES),
 	},
-};
+} as ArgTypes;
 
 Interactive.parameters = {
 	design: {

package/lib/js/components/Statuses/AccessStatus/AccessStatus.stories.ts

@@ -11,7 +11,7 @@ export default {
 const StoryTemplate: StoryFn<typeof AccessStatus> = (args) => ({
 	components: { AccessStatus },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `<access-status :status="status" />`,
 });
@@ -24,8 +24,8 @@ const args = {
 
 const argTypes = {
 	status: {
-		control: { type: 'select', options: Object.values(COURSE_ACCESS_STATUS) },
-		defaultValue: COURSE_ACCESS_STATUS.ACTIVE,
+		control: 'select',
+		options: Object.values(COURSE_ACCESS_STATUS),
 	},
 } as ArgTypes;
 

package/lib/js/components/Statuses/AccessStatus/AccessStatus.vue

@@ -45,10 +45,11 @@
 </style>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import Icon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
 import { COURSE_ACCESS_STATUS } from '../../../consts/user';
 
-export default {
+export default defineComponent({
 	name: 'AccessStatus',
 	components: {
 		Icon,
@@ -97,5 +98,5 @@ export default {
 			return 'Zakończony';
 		},
 	},
-};
+});
 </script>

package/lib/js/components/Statuses/BlockadeStatus/BlockadeStatus.vue

@@ -24,6 +24,7 @@
 
 	&.-ds-active {
 		color: $color-danger-text;
+
 		#{$self}__icon {
 			color: $color-danger-icon;
 		}
@@ -36,10 +37,11 @@
 </style>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import Icon, { ICON_SIZES, ICONS } from '../../Icons/Icon';
 import { COURSE_BLOCKADE_ACCESS_STATUS } from '../../../consts/user';
 
-export default {
+export default defineComponent({
 	name: 'BlockadeStatus',
 	components: {
 		Icon,
@@ -76,5 +78,5 @@ export default {
 			return 'Blokada zakończona';
 		},
 	},
-};
+});
 </script>

package/lib/js/components/Statuses/BlockadeStatus/BlockedeStatus.stories.ts

@@ -11,7 +11,7 @@ export default {
 const StoryTemplate: StoryFn<typeof BlockadeStatus> = (args) => ({
 	components: { BlockadeStatus },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `<blockade-status :status="status" />`,
 });
@@ -24,8 +24,8 @@ const args = {
 
 const argTypes = {
 	status: {
-		control: { type: 'select', options: Object.values(COURSE_BLOCKADE_ACCESS_STATUS) },
-		defaultValue: COURSE_BLOCKADE_ACCESS_STATUS.ACTIVE,
+		control: 'select',
+		options: Object.values(COURSE_BLOCKADE_ACCESS_STATUS),
 	},
 } as ArgTypes;
 

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

@@ -2,28 +2,33 @@ import SurveyQuestionOpenEnded from './SurveyQuestionOpenEnded.vue';
 import { 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/SurveyQuestionOpenEnded',
 	component: SurveyQuestionOpenEnded,
 } as Meta<typeof SurveyQuestionOpenEnded>;
 
-const StoryTemplate: StoryFn<typeof SurveyQuestionOpenEnded> = (args, { updateArgs }) => ({
-	components: { SurveyQuestionOpenEnded },
-	setup() {
-		return { ...args };
-	},
-	// TODO typing in textarea looses focus
-	template:
-		'<survey-question-open-ended  :title="title" :value="value" :state="state" :placeholder="placeholder" @input="explanationUpdate">' +
-		'<template v-if="explanation" #explanation><div v-html="explanation" /></template>' +
-		'</survey-question-open-ended>',
-	methods: {
-		explanationUpdate(value) {
-			updateArgs({ value });
+const StoryTemplate: StoryFn<typeof SurveyQuestionOpenEnded> = (args) => {
+	const [_, updateArgs] = useArgs();
+
+	return {
+		components: { SurveyQuestionOpenEnded },
+		setup() {
+			return args;
 		},
-	},
-});
+		// TODO typing in textarea looses focus
+		template:
+			'<survey-question-open-ended  :title="title" :value="value" :state="state" :placeholder="placeholder" @input="explanationUpdate">' +
+			'<template v-if="explanation" #explanation><div v-html="explanation" /></template>' +
+			'</survey-question-open-ended>',
+		methods: {
+			explanationUpdate(value) {
+				updateArgs({ value });
+			},
+		},
+	};
+};
 
 export const Interactive = StoryTemplate.bind({});
 
@@ -37,8 +42,8 @@ const args = {
 } as Args;
 
 const argTypes = {
-	explanation: { control: { type: 'text' } },
-	state: { control: { type: 'select', options: Object.values(SURVEY_QUESTION_STATES) } },
+	explanation: { control: 'text' },
+	state: { control: 'select', options: Object.values(SURVEY_QUESTION_STATES) },
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;

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

@@ -91,7 +91,9 @@ import { SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
 import SurveyQuestionTextarea from '../SurveyQuestionTextarea.vue';
 import { randomString } from '../../../utils/string';
 
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'SurveyQuestionOpenEnded',
 	components: {
 		SurveyQuestionTextarea,
@@ -135,5 +137,5 @@ export default {
 			SURVEY_QUESTION_STATES: Object.freeze(SURVEY_QUESTION_STATES),
 		};
 	},
-};
+});
 </script>