@bethinkpl/design-system 25.0.10 → 26.0.1

package/lib/js/components/Cards/Card/Card.stories.ts

@@ -12,9 +12,10 @@ export default {
 const StoryTemplate: StoryFn<typeof Card> = (args) => ({
 	components: { Card },
 	setup() {
-		return { ...args };
+		return args;
 	},
-	template: `<card :header-has-padding="headerHasPadding" 
+	template: `
+		<card :header-has-padding="headerHasPadding"
 			  :divider-under-header="dividerUnderHeader"
 			  :has-border="hasBorder"
 			  :border-position="borderPosition"
@@ -39,6 +40,9 @@ const StoryTemplate: StoryFn<typeof Card> = (args) => ({
 export const Interactive = StoryTemplate.bind({});
 
 const args = {
+	header: 'header slot',
+	content: 'content slot that supports <b>HTML markup</b>',
+	footer: 'footer slot',
 	headerHasPadding: false,
 	dividerUnderHeader: false,
 	hasBorder: false,
@@ -51,27 +55,26 @@ const args = {
 } as Args;
 
 const argTypes = {
-	header: { control: { type: 'text' }, defaultValue: 'header slot' },
+	header: { control: 'text' },
 	content: {
-		control: { type: 'text' },
-		defaultValue: 'content slot that supports <b>HTML markup</b>',
+		control: 'text',
 	},
-	footer: { control: { type: 'text' }, defaultValue: 'footer slot' },
+	footer: { control: 'text' },
 	borderPosition: {
-		control: { type: 'select', options: Object.values(CARD_BORDER_POSITIONS) },
-		defaultValue: CARD_BORDER_POSITIONS.TOP,
+		control: 'select',
+		options: Object.values(CARD_BORDER_POSITIONS),
 	},
 	borderSize: {
-		control: { type: 'select', options: Object.values(CARD_BORDER_SIZES) },
-		defaultValue: CARD_BORDER_SIZES.LARGE,
+		control: 'select',
+		options: Object.values(CARD_BORDER_SIZES),
 	},
 	borderColor: {
-		control: { type: 'select', options: Object.values(CARD_BORDER_COLORS) },
-		defaultValue: CARD_BORDER_COLORS.NEUTRAL_HEAVY,
+		control: 'select',
+		options: Object.values(CARD_BORDER_COLORS),
 	},
 	loadingBarColor: {
-		control: { type: 'select', options: Object.values(LOADING_BAR_COLORS) },
-		defaultValue: LOADING_BAR_COLORS.NEUTRAL_HEAVY,
+		control: 'select',
+		options: Object.values(LOADING_BAR_COLORS),
 	},
 } as ArgTypes;
 

package/lib/js/components/Cards/Card/Card.vue

@@ -137,7 +137,7 @@
 </style>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 
 import DsDivider from '../../Divider/Divider.vue';
 import DsLoadingBar, { LOADING_BAR_COLORS, LoadingBarColors } from '../../LoadingBar';
@@ -149,7 +149,8 @@ import {
 	CardBorderPositions,
 	CardBorderSizes,
 } from './Card.consts';
-export default {
+
+export default defineComponent({
 	name: 'Card',
 	components: { DsDivider, DsLoadingBar },
 	props: {
@@ -218,5 +219,5 @@ export default {
 			return `-ds-border-size-${this.borderSize}`;
 		},
 	},
-};
+});
 </script>

package/lib/js/components/Cards/CardExpandable/CardExpandable.stories.ts

@@ -10,7 +10,7 @@ export default {
 const StoryTemplate: StoryFn<typeof CardExpandable> = (args) => ({
 	components: { CardExpandable },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 			<card-expandable :is-expander-visible="isExpanderVisible" :expander-text-collapsed="expanderTextCollapsed"
@@ -32,6 +32,10 @@ const StoryTemplate: StoryFn<typeof CardExpandable> = (args) => ({
 export const Interactive = StoryTemplate.bind({});
 
 const args = {
+	header: 'header slot',
+	content: 'content slot that supports <b>HTML markup</b>',
+	expandedContent:
+		'Dodatkowa treść w slocie <code>expandedContent</code> widoczna po rozwinięciu',
 	isExpanderVisible: true,
 	expanderTextCollapsed: 'Rozwiń',
 	expanderTextExpanded: 'Zwiń',
@@ -41,15 +45,12 @@ const args = {
 } as Args;
 
 const argTypes = {
-	header: { control: { type: 'text' }, defaultValue: 'header slot' },
+	header: { control: 'text' },
 	content: {
-		control: { type: 'text' },
-		defaultValue: 'content slot that supports <b>HTML markup</b>',
+		control: 'text',
 	},
 	expandedContent: {
-		control: { type: 'text' },
-		defaultValue:
-			'Dodatkowa treść w slocie <code>expandedContent</code> widoczna po rozwinięciu',
+		control: 'text',
 	},
 } as ArgTypes;
 

package/lib/js/components/Cards/CardExpandable/CardExpandable.vue

@@ -69,10 +69,11 @@
 </style>
 
 <script lang="ts">
+import { defineComponent } from 'vue';
 import DsCard from '../Card/';
 import DsIcon, { ICON_SIZES, ICONS } from '../../../components/Icons/Icon';
 
-export default {
+export default defineComponent({
 	name: 'CardExpandable',
 	components: {
 		DsCard,
@@ -133,5 +134,5 @@ export default {
 			this.$emit('update:isExpanded', this.isExpandedInternal);
 		},
 	},
-};
+});
 </script>

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

@@ -12,7 +12,7 @@ export default {
 const StoryTemplate: StoryFn<typeof Chip> = (args) => ({
 	components: { Chip, LogoBadge },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<chip :label="label" :is-label-uppercase="isLabelUppercase" :left-icon="ICONS[leftIcon]" :is-removable="isRemovable" :size="size" :color="color" :color-hex="colorHex" :state="state" :radius="radius" />',
@@ -25,7 +25,7 @@ const StoryTemplate: StoryFn<typeof Chip> = (args) => ({
 const StoryTemplateWithAccessory: StoryFn<typeof Chip> = (args) => ({
 	components: { Chip, LogoBadge },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<chip :label="label" :is-label-uppercase="isLabelUppercase" :left-icon="ICONS[leftIcon]" :is-removable="isRemovable" :size="size" :color="color" :color-hex="colorHex" :state="state" :radius="radius">' +
@@ -58,24 +58,28 @@ const args = {
 	color: CHIP_COLORS.NEUTRAL,
 	colorHex: '',
 	isRemovable: false,
+	state: CHIP_STATES.DEFAULT,
 } as Args;
 const argTypes = {
 	leftIcon: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	size: {
-		control: { type: 'select', options: Object.values(CHIP_SIZES) },
+		control: 'select',
+		options: Object.values(CHIP_SIZES),
 	},
 	color: {
-		control: { type: 'select', options: Object.values(CHIP_COLORS) },
+		control: 'select',
+		options: Object.values(CHIP_COLORS),
 	},
 	state: {
-		control: { type: 'select', options: Object.values(CHIP_STATES) },
-		defaultValue: CHIP_STATES.DEFAULT,
+		control: 'select',
+		options: Object.values(CHIP_STATES),
 	},
 	radius: {
-		control: { type: 'select', options: Object.values(CHIP_RADIUSES) },
-		defaultValue: CHIP_RADIUSES.CAPSULE,
+		control: 'select',
+		options: Object.values(CHIP_RADIUSES),
 	},
 } as ArgTypes;
 

package/lib/js/components/Chip/Chip.vue

@@ -247,7 +247,7 @@ import IconButton, {
 import Icon, { ICON_SIZES, ICONS } from '../Icons/Icon';
 import { BUTTON_ELEVATIONS } from '../Buttons/Button';
 import { Value } from '../../utils/type.utils';
-import { toRaw } from 'vue';
+import { defineComponent, toRaw } from 'vue';
 
 const CHIP_ICON_BUTTONS_COLOR_MAP = {
 	[CHIP_COLORS.INVERTED]: ICON_BUTTON_COLORS.PRIMARY,
@@ -261,7 +261,7 @@ const CHIP_ICON_BUTTONS_COLOR_MAP = {
 	[CHIP_COLORS.INFO]: ICON_BUTTON_COLORS.INFO,
 };
 
-export default {
+export default defineComponent({
 	name: 'Chip',
 	components: { Icon, IconButton },
 	props: {
@@ -353,5 +353,5 @@ export default {
 			return CHIP_ICON_BUTTONS_COLOR_MAP[this.color] || ICON_BUTTON_COLORS.PRIMARY;
 		},
 	},
-};
+});
 </script>

package/lib/js/components/DatePickers/DatePicker/DatePicker.stories.ts

@@ -8,79 +8,82 @@ import {
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import { ICONS } from '../../Icons/Icon';
 import DsSwitch from '../../Switch';
+import { useArgs } from '@storybook/preview-api';
 
 export default {
 	title: 'Components/DatePickers/DatePicker',
 	component: DatePicker,
 } as Meta<typeof DatePicker>;
 
-const StoryTemplate: StoryFn<typeof DatePicker> = (args, { updateArgs }) => ({
-	components: { DatePicker, DsSwitch },
-	setup() {
-		return {
-			...args,
-		};
-	},
-	data() {
-		return {
-			ICONS: Object.freeze(ICONS),
-		};
-	},
-	methods: {
-		updateDate(date: Date) {
-			updateArgs({
-				date: `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`,
-			});
-		},
-	},
-	computed: {
-		formattedDate() {
-			if (!this.date) {
-				return null;
-			}
-			return new Date(this.date);
+const StoryTemplate: StoryFn<typeof DatePicker> = (args) => {
+	const [_, updateArgs] = useArgs();
+
+	return {
+		components: { DatePicker, DsSwitch },
+		setup() {
+			return args;
 		},
-		formattedMinDate() {
-			if (!this.minDate) {
-				return null;
-			}
-			return new Date(this.minDate);
+		data() {
+			return {
+				ICONS: Object.freeze(ICONS),
+			};
 		},
-		formattedMaxDate() {
-			if (!this.maxDate) {
-				return null;
-			}
-			return new Date(this.maxDate);
+		methods: {
+			updateDate(date: Date) {
+				updateArgs({
+					date: `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`,
+				});
+			},
 		},
-		formattedDisableDates() {
-			if (!this.disableDates || !this.disableDates.length) {
-				return null;
-			}
-			return this.disableDates.map((date) => new Date(date));
+		computed: {
+			formattedDate() {
+				if (!this.date) {
+					return null;
+				}
+				return new Date(this.date);
+			},
+			formattedMinDate() {
+				if (!this.minDate) {
+					return null;
+				}
+				return new Date(this.minDate);
+			},
+			formattedMaxDate() {
+				if (!this.maxDate) {
+					return null;
+				}
+				return new Date(this.maxDate);
+			},
+			formattedDisableDates() {
+				if (!this.disableDates || !this.disableDates.length) {
+					return null;
+				}
+				return this.disableDates.map((date) => new Date(date));
+			},
 		},
-	},
-	template: `
-		<date-picker
-			:trigger-type="triggerType"
-			:is-interactive="isInteractive"
-			:placeholder="placeholder"
-			:date="formattedDate"
-			:label="label"
-			:is-label-uppercase="isLabelUppercase"
-			:icon="icon ? ICONS[icon] : null"
-			:is-icon-hidden-on-mobile="isIconHiddenOnMobile"
-			:calendar-position="calendarPosition"
-			:error-message="errorMessage"
-			:state="state"
-			:color="color"
-			:disable-dates="formattedDisableDates"
-			:min-date="formattedMinDate"
-			:max-date="formattedMaxDate"
-			@update:date="updateDate"
-		>
-			<ds-switch  label-left="lewa" label-right="prawa" />
-		</date-picker>`,
-});
+		template: `
+			<date-picker
+				:trigger-type="triggerType"
+				:is-interactive="isInteractive"
+				:placeholder="placeholder"
+				:date="formattedDate"
+				:label="label"
+				:is-label-uppercase="isLabelUppercase"
+				:icon="icon ? ICONS[icon] : null"
+				:is-icon-hidden-on-mobile="isIconHiddenOnMobile"
+				:calendar-position="calendarPosition"
+				:error-message="errorMessage"
+				:state="state"
+				:color="color"
+				:disable-dates="formattedDisableDates"
+				:min-date="formattedMinDate"
+				:max-date="formattedMaxDate"
+				@update:date="updateDate"
+			>
+				<ds-switch  label-left="lewa" label-right="prawa" />
+			</date-picker>`,
+	};
+};
 
 export const Interactive = StoryTemplate.bind({});
 const now = Date.now();
@@ -123,7 +126,7 @@ const argTypes = {
 		options: Object.values(DATE_PICKER_COLORS),
 	},
 	disableDates: {
-		control: 'array',
+		control: 'object',
 	},
 } as ArgTypes;
 

package/lib/js/components/DatePickers/DatePicker/DatePicker.vue

@@ -117,7 +117,7 @@
 </style>
 
 <script lang="ts">
-import { PropType, toRaw } from 'vue';
+import { defineComponent, PropType, toRaw } from 'vue';
 
 import DsTile from '../../Tile';
 import { ICONS } from '../../Icons/Icon';
@@ -146,7 +146,7 @@ const FLATPICKR_POSITIONS = {
 	[DATE_PICKER_CALENDAR_POSITIONS.TOP]: 'above',
 };
 
-export default {
+export default defineComponent({
 	name: 'DatePicker',
 	components: {
 		DatePickerBox,
@@ -329,5 +329,5 @@ export default {
 			}
 		},
 	},
-};
+});
 </script>

package/lib/js/components/DatePickers/DatePickerBox/DatePickerBox.vue

@@ -222,9 +222,9 @@ import {
 	DatePickerColors,
 	DatePickerStates,
 } from '../DatePicker/DatePicker.consts';
-import { PropType, toRaw } from 'vue';
+import { defineComponent, PropType, toRaw } from 'vue';
 
-export default {
+export default defineComponent({
 	name: 'DatePickerBox',
 	components: {
 		DsIcon,
@@ -287,5 +287,5 @@ export default {
 			return this.placeholder;
 		},
 	},
-};
+});
 </script>

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

@@ -11,7 +11,7 @@ export default {
 const StoryTemplate: StoryFn<typeof Divider> = (args) => ({
 	components: { Divider },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<div style="height: 200px; width: 200px;">
@@ -29,12 +29,12 @@ const args = {
 
 const argTypes = {
 	prominence: {
-		control: { type: 'select', options: Object.values(DIVIDER_PROMINENCES) },
-		defaultValue: DIVIDER_PROMINENCES.DEFAULT,
+		control: 'select',
+		options: Object.values(DIVIDER_PROMINENCES),
 	},
 	size: {
-		control: { type: 'select', options: Object.values(DIVIDER_SIZES) },
-		defaultValue: DIVIDER_SIZES.S,
+		control: 'select',
+		options: Object.values(DIVIDER_SIZES),
 	},
 } as ArgTypes;
 

package/lib/js/components/Divider/Divider.vue

@@ -56,7 +56,9 @@
 <script lang="ts">
 import { DIVIDER_PROMINENCES, DIVIDER_SIZES } from './Divider.consts';
 
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'Divider',
 	props: {
 		isVertical: {
@@ -88,5 +90,5 @@ export default {
 			}[this.size];
 		},
 	},
-};
+});
 </script>

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

@@ -11,7 +11,7 @@ export default {
 const StoryTemplate: StoryFn<typeof Drawer> = (args) => ({
 	components: { Drawer },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `<div style="height: 300px; width: 200px;">
 		<drawer :position="position" :sticky-header="stickyHeader" :sticky-footer="stickyFooter">
@@ -32,8 +32,8 @@ const args = {
 
 const argTypes = {
 	position: {
-		control: { type: 'select', options: Object.values(DRAWER_POSITIONS) },
-		defaultValue: DRAWER_POSITIONS.RIGHT,
+		control: 'select',
+		options: Object.values(DRAWER_POSITIONS),
 	},
 } as ArgTypes;
 

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

@@ -71,11 +71,11 @@
 </style>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 
 import { DRAWER_POSITIONS, DrawerPosition } from './Drawer.consts';
 
-export default {
+export default defineComponent({
 	name: 'Drawer',
 	props: {
 		position: {
@@ -103,5 +103,5 @@ export default {
 			return '-ds-positionRight';
 		},
 	},
-};
+});
 </script>

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

@@ -10,7 +10,7 @@ export default {
 const StoryTemplate: StoryFn<typeof DrawerContent> = (args) => ({
 	components: { DrawerContent },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<drawer-content>

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

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

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

@@ -11,7 +11,7 @@ export default {
 const StoryTemplate: StoryFn<typeof DrawerDivider> = (args) => ({
 	components: { DrawerDivider },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<div style="height: 200px; width: 200px;">
@@ -28,12 +28,12 @@ const args = {
 
 const argTypes = {
 	prominence: {
-		control: { type: 'select', options: Object.values(DIVIDER_PROMINENCES) },
-		defaultValue: DIVIDER_PROMINENCES.DEFAULT,
+		control: 'select',
+		options: Object.values(DIVIDER_PROMINENCES),
 	},
 	size: {
-		control: { type: 'select', options: Object.values(DIVIDER_SIZES) },
-		defaultValue: DIVIDER_SIZES.S,
+		control: 'select',
+		options: Object.values(DIVIDER_SIZES),
 	},
 } as ArgTypes;
 

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

@@ -15,7 +15,9 @@
 <script lang="ts">
 import Divider, { DIVIDER_PROMINENCES, DIVIDER_SIZES } from '../../Divider';
 
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'DrawerDivider',
 	components: {
 		DsDivider: Divider,
@@ -32,5 +34,5 @@ export default {
 			validator: (value: string) => Object.values(DIVIDER_SIZES).includes(value),
 		},
 	},
-};
+});
 </script>

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

@@ -12,7 +12,7 @@ export default {
 const StoryTemplate: StoryFn<typeof DrawerHeader> = (args) => ({
 	components: { DrawerHeader },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	data() {
 		return {
@@ -61,25 +61,25 @@ const args = {
 } as Args;
 
 const argTypes = {
-	eyebrowText: { control: { type: 'text' }, defaultValue: 'eyebrow' },
-	isInteractiveEyebrow: { control: { type: 'boolean' }, defaultValue: false },
-	eyebrowEllipsis: { control: { type: 'boolean' }, defaultValue: false },
-	title: { control: { type: 'text' }, defaultValue: 'Header Title' },
-	titleEllipsis: { control: { type: 'boolean' }, defaultValue: false },
+	eyebrowText: { control: 'text' },
+	isInteractiveEyebrow: { control: 'boolean' },
+	eyebrowEllipsis: { control: 'boolean' },
+	title: { control: 'text' },
+	titleEllipsis: { control: 'boolean' },
 	titleColor: {
-		control: { type: 'select', options: Object.values(DRAWER_HEADER_TITLE_COLORS) },
-		defaultValue: DRAWER_HEADER_TITLE_COLORS.NEUTRAL_STRONG,
+		control: 'select',
+		options: Object.values(DRAWER_HEADER_TITLE_COLORS),
 	},
 	leftIcon: {
-		control: { type: 'select', options: [...Object.keys(ICONS), null] },
-		defaultValue: null,
+		control: 'select',
+		options: [...Object.keys(ICONS), null],
 	},
-	chipLabel: { control: { type: 'text' }, defaultValue: 'chip' },
-	hasDivider: { control: { type: 'boolean' }, defaultValue: false },
-	isSecondLevel: { control: { type: 'boolean' }, defaultValue: false },
-	isClosable: { control: { type: 'boolean' }, defaultValue: true },
-	actions: { control: { type: 'text' }, defaultValue: 'actions slot' },
-	titleTrailing: { control: { type: 'text' }, defaultValue: 'trailing slot' },
+	chipLabel: { control: 'text' },
+	hasDivider: { control: 'boolean' },
+	isSecondLevel: { control: 'boolean' },
+	isClosable: { control: 'boolean' },
+	actions: { control: 'text' },
+	titleTrailing: { control: 'text' },
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;

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

@@ -144,7 +144,7 @@ $minimal-drawer-header-height: 82px;
 </style>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 
 import Button from '../../Buttons/Button/Button.vue';
 import Divider from '../../Divider/Divider.vue';
@@ -157,7 +157,7 @@ import { DIVIDER_PROMINENCES, DIVIDER_SIZES } from '../../Divider';
 import { ICON_BUTTON_SIZES } from '../../Buttons/IconButton';
 import { DRAWER_HEADER_TITLE_COLORS, DrawerHeaderTitleColor } from './DrawerHeader.consts';
 
-export default {
+export default defineComponent({
 	name: 'DrawerHeader',
 	components: {
 		DsButton: Button,
@@ -225,5 +225,5 @@ export default {
 			ICON_SIZES: Object.freeze(ICON_SIZES),
 		};
 	},
-};
+});
 </script>