@bethinkpl/design-system 25.0.10 → 26.0.1

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

@@ -2,16 +2,18 @@ import PageHeader from './PageHeader.vue';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import { PAGE_HEADER_MOBILE_LAYOUTS } from './PageHeader.consts';
+import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
 	title: 'Components/Headers/PageHeader',
 	component: PageHeader,
+	decorators: [withActions],
 } as Meta<typeof PageHeader>;
 
 const StoryTemplate: StoryFn<typeof PageHeader> = (args) => ({
 	components: { PageHeader },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<page-header' +
@@ -33,32 +35,28 @@ const args = {
 	pageTitle: 'Page title',
 	supportingInfo: 'Supporting info write here',
 	divider: true,
-	mobileLayout: 'vertical',
+	mobileLayout: PAGE_HEADER_MOBILE_LAYOUTS.VERTICAL,
 } as Args;
 
 const argTypes = {
 	breadcrumbs: {
-		control: { type: 'text' },
+		control: 'text',
 	},
 	actions: {
-		control: { type: 'text' },
+		control: 'text',
 	},
 	pageTitle: {
-		control: { type: 'text' },
+		control: 'text',
 	},
 	supportingInfo: {
-		control: { type: 'text' },
+		control: 'text',
 	},
 	divider: {
-		control: { type: 'boolean' },
-		defaultValue: true,
+		control: 'boolean',
 	},
 	mobileLayout: {
-		control: {
-			type: 'select',
-			options: Object.values(PAGE_HEADER_MOBILE_LAYOUTS),
-			defaultValue: PAGE_HEADER_MOBILE_LAYOUTS.VERTICAL,
-		},
+		control: 'select',
+		options: Object.values(PAGE_HEADER_MOBILE_LAYOUTS),
 	},
 } as ArgTypes;
 

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

@@ -96,7 +96,9 @@
 import DsDivider from '../../Divider';
 import { PAGE_HEADER_MOBILE_LAYOUTS } from './PageHeader.consts';
 
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'PageHeader',
 	components: {
 		DsDivider,
@@ -125,5 +127,5 @@ export default {
 			PAGE_HEADER_MOBILE_LAYOUTS: Object.freeze(PAGE_HEADER_MOBILE_LAYOUTS),
 		};
 	},
-};
+});
 </script>

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

@@ -7,51 +7,58 @@ import {
 import { ICONS } from '../../Icons/Icon';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { useArgs } from '@storybook/preview-api';
+import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
 	title: 'Components/Headers/SectionHeader',
 	component: SectionHeader,
+	decorators: [withActions],
 } as Meta<typeof SectionHeader>;
 
-const StoryTemplate: StoryFn<typeof SectionHeader> = (args, { updateArgs }) => ({
-	components: { SectionHeader },
-	setup() {
-		return { ...args };
-	},
-	data() {
-		return {
-			ICONS: Object.freeze(ICONS),
-		};
-	},
-	methods: {
-		onIsExpandedUpdated(isExpanded) {
-			updateArgs({
-				isExpanded,
-			});
+const StoryTemplate: StoryFn<typeof SectionHeader> = (args) => {
+	const [_, updateArgs] = useArgs();
+
+	return {
+		components: { SectionHeader },
+		setup() {
+			return args;
 		},
-	},
-	template:
-		'<section-header' +
-		' :is-expandable="isExpandable"' +
-		' :hide-slot-when-collapsed="hideSlotWhenCollapsed"' +
-		' :icon-left="ICONS[iconLeft]"' +
-		' :icon-left-color="iconLeftColor"' +
-		' :icon-right="ICONS[iconRight]"' +
-		' :icon-right-color="iconRightColor"' +
-		' :is-expanded="isExpanded"' +
-		' :size="size"' +
-		' :info="info"' +
-		' :title="title"' +
-		' :title-ellipsis="titleEllipsis"' +
-		' :eyebrow="eyebrow"' +
-		' :has-divider="hasDivider"' +
-		' :mobile-layout="mobileLayout"' +
-		' :supportingText="supportingText"' +
-		' @update:isExpanded="onIsExpandedUpdated"' +
-		'>' +
-		'<div style="border: 1px solid;">Slot content</div>' +
-		'</section-header>',
-});
+		data() {
+			return {
+				ICONS: Object.freeze(ICONS),
+			};
+		},
+		methods: {
+			onIsExpandedUpdated(isExpanded) {
+				updateArgs({
+					isExpanded,
+				});
+			},
+		},
+		template:
+			'<section-header' +
+			' :is-expandable="isExpandable"' +
+			' :hide-slot-when-collapsed="hideSlotWhenCollapsed"' +
+			' :icon-left="ICONS[iconLeft]"' +
+			' :icon-left-color="iconLeftColor"' +
+			' :icon-right="ICONS[iconRight]"' +
+			' :icon-right-color="iconRightColor"' +
+			' :is-expanded="isExpanded"' +
+			' :size="size"' +
+			' :info="info"' +
+			' :title="title"' +
+			' :title-ellipsis="titleEllipsis"' +
+			' :eyebrow="eyebrow"' +
+			' :has-divider="hasDivider"' +
+			' :mobile-layout="mobileLayout"' +
+			' :supportingText="supportingText"' +
+			' @update:isExpanded="onIsExpandedUpdated"' +
+			'>' +
+			'<div style="border: 1px solid;">Slot content</div>' +
+			'</section-header>',
+	};
+};
 
 export const Interactive = StoryTemplate.bind({});
 
@@ -62,11 +69,11 @@ const args = {
 	supportingText:
 		'Supporting text. Et doloribus aspernatur suscipit provident maiores. Natus natus et pariatur. Eligendi illo quo esse. Tenetur ad neque veniam.',
 	eyebrow: 'eyebrow text',
-	iconLeft: ICONS.FA_PLAY,
-	iconLeftColor: null,
-	iconRight: ICONS.FA_BOOK,
-	iconRightColor: null,
-	info: true,
+	iconLeft: null,
+	iconLeftColor: SECTION_HEADER_ICON_COLORS.NEUTRAL,
+	iconRight: null,
+	iconRightColor: SECTION_HEADER_ICON_COLORS.NEUTRAL,
+	info: false,
 	hasDivider: true,
 	isExpandable: false,
 	isExpanded: false,
@@ -76,41 +83,36 @@ 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',
 	},
 	mobileLayout: {
-		control: {
-			type: 'select',
-			options: Object.values(SECTION_HEADER_MOBILE_LAYOUTS),
-			defaultValue: SECTION_HEADER_MOBILE_LAYOUTS.VERTICAL,
-		},
+		control: 'select',
+		options: Object.values(SECTION_HEADER_MOBILE_LAYOUTS),
 	},
-	titleEllipsis: { control: { type: 'boolean' }, defaultValue: false },
+	titleEllipsis: { control: 'boolean' },
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;

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

@@ -21,9 +21,9 @@
 							:size="iconSize"
 						/>
 						<div class="ds-sectionHeader__titleContainer">
-							<div v-if="eyebrow" class="ds-sectionHeader__eyebrow">{{
-								eyebrow
-							}}</div>
+							<div v-if="eyebrow" class="ds-sectionHeader__eyebrow"
+								>{{ eyebrow }}
+							</div>
 							<div
 								class="ds-sectionHeader__title"
 								:class="{ '-ds-ellipsis': titleEllipsis }"
@@ -348,9 +348,9 @@ import {
 import DsIcon, { ICON_SIZES, IconItem, ICONS } from '../../Icons/Icon';
 import DsIconButton, { ICON_BUTTON_COLORS, ICON_BUTTON_SIZES } from '../../Buttons/IconButton';
 import DsDivider from '../../Divider';
-import { toRaw } from 'vue';
+import { defineComponent, toRaw } from 'vue';
 
-export default {
+export default defineComponent({
 	name: 'SectionHeader',
 	components: {
 		DsIcon,
@@ -491,5 +491,5 @@ export default {
 			this.$emit('update:isExpanded', this.isExpandedInternal);
 		},
 	},
-};
+});
 </script>

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

@@ -11,7 +11,7 @@ export default {
 const StoryTemplate: StoryFn<typeof IconText> = (args) => ({
 	components: { IconText },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 			<icon-text
@@ -43,18 +43,19 @@ Interactive.args = {
 
 const argTypes = {
 	color: {
-		control: { type: 'select' },
+		control: 'select',
 		options: Object.values(ICON_TEXT_COLORS),
 	},
 	icon: {
-		control: { type: 'select', options: Object.keys(ICONS) },
+		control: 'select',
+		options: Object.keys(ICONS),
 	},
 	size: {
-		control: { type: 'select' },
+		control: 'select',
 		options: Object.values(ICON_TEXT_SIZES),
 	},
 	state: {
-		control: { type: 'select' },
+		control: 'select',
 		options: Object.values(ICON_TEXT_STATES),
 	},
 } as ArgTypes;

package/lib/js/components/IconText/IconText.vue

@@ -124,9 +124,9 @@
 import Icon, { ICON_SIZES, ICONS } from '../Icons/Icon';
 import { ICON_TEXT_COLORS, ICON_TEXT_SIZES, ICON_TEXT_STATES } from './IconText.consts';
 import { Value } from '../../utils/type.utils';
-import { toRaw } from 'vue';
+import { defineComponent, toRaw } from 'vue';
 
-export default {
+export default defineComponent({
 	name: 'IconText',
 	components: {
 		Icon,
@@ -188,5 +188,5 @@ export default {
 			return ICON_SIZES.X_SMALL;
 		},
 	},
-};
+});
 </script>

package/lib/js/components/Icons/FeatureIcon/FeatureIcon.stories.ts

@@ -2,7 +2,7 @@ import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 
 import FeatureIcon from './FeatureIcon.vue';
 import { ICONS } from '../Icon';
-import { FEATURE_ICON_SIZES, FEATURE_ICON_COLOR } from './FeatureIcon.consts';
+import { FEATURE_ICON_COLOR, FEATURE_ICON_SIZES } from './FeatureIcon.consts';
 
 export default {
 	title: 'Components/Icons/FeatureIcon',
@@ -12,7 +12,7 @@ export default {
 const StoryTemplate: StoryFn<typeof FeatureIcon> = (args) => ({
 	components: { FeatureIcon },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<feature-icon :icon="ICONS[icon]" :size="size" :color="color" :doubleBackground="doubleBackground" />',
@@ -25,24 +25,28 @@ const StoryTemplate: StoryFn<typeof FeatureIcon> = (args) => ({
 
 export const Interactive = StoryTemplate.bind({});
 
-const args = {} as Args;
+const args = {
+	size: FEATURE_ICON_SIZES.X_LARGE,
+	icon: 'FA_CIRCLE_QUESTION',
+	color: FEATURE_ICON_COLOR.PRIMARY,
+	doubleBackground: true,
+} as Args;
 
 const argTypes = {
 	size: {
-		control: { type: 'select', options: Object.values(FEATURE_ICON_SIZES) },
-		defaultValue: FEATURE_ICON_SIZES.X_LARGE,
+		control: 'select',
+		options: Object.values(FEATURE_ICON_SIZES),
 	},
 	icon: {
-		control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
-		defaultValue: 'FA_CIRCLE_QUESTION',
+		control: 'select',
+		options: [null, ...Object.keys(ICONS)],
 	},
 	color: {
-		control: { type: 'select', options: Object.values(FEATURE_ICON_COLOR) },
-		defaultValue: FEATURE_ICON_COLOR.PRIMARY,
+		control: 'select',
+		options: Object.values(FEATURE_ICON_COLOR),
 	},
 	doubleBackground: {
-		control: { type: 'boolean' },
-		defaultValue: true,
+		control: 'boolean',
 	},
 } as ArgTypes;
 

package/lib/js/components/Icons/FeatureIcon/FeatureIcon.vue

@@ -120,9 +120,9 @@ $feature-icon-padding-large: 10px;
 <script lang="ts">
 import WnlIcon, { ICON_SIZES, ICONS } from '../Icon';
 import { FEATURE_ICON_COLOR, FEATURE_ICON_SIZES } from './FeatureIcon.consts';
-import { toRaw } from 'vue';
+import { defineComponent, toRaw } from 'vue';
 
-export default {
+export default defineComponent({
 	name: 'FeatureIcon',
 	components: {
 		WnlIcon,
@@ -175,5 +175,5 @@ export default {
 			return ICON_SIZES.MEDIUM;
 		},
 	},
-};
+});
 </script>

package/lib/js/components/Icons/Icon/Icon.stories.ts

@@ -2,16 +2,18 @@ import Icon from './Icon.vue';
 import { ICON_SIZES, ICONS } from './Icon.consts';
 
 import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { withActions } from '@storybook/addon-actions/decorator';
 
 export default {
 	title: 'Components/Icons/Icon',
 	component: Icon,
+	decorators: [withActions],
 } as Meta<typeof Icon>;
 
 const StoryTemplate: StoryFn<typeof Icon> = (args) => ({
 	components: { Icon },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<div class="sbIconList__singleIcon"><icon :icon="ICONS[icon]" :size="size" :touchable="touchable" :spinning="spinning" :rotation="rotation" :flipped-vertical="flippedVertical" :flipped-horizontal="flippedHorizontal" /></div>',
@@ -36,16 +38,16 @@ const args = {
 
 const argTypes = {
 	size: {
-		control: { type: 'select', options: Object.values(ICON_SIZES) },
-		defaultValue: ICON_SIZES.MEDIUM,
+		control: 'select',
+		options: Object.values(ICON_SIZES),
 	},
 	icon: {
-		control: { type: 'select', options: Object.keys(ICONS) },
-		defaultValue: 'HEAD_WITH_QUESTION_MARK',
+		control: 'select',
+		options: Object.keys(ICONS),
 	},
 	rotation: {
-		control: { type: 'select', options: [null, 90, 180, 270] },
-		defaultValue: null,
+		control: 'select',
+		options: [null, 90, 180, 270],
 	},
 } as ArgTypes;
 
@@ -65,7 +67,7 @@ Interactive.parameters = {
 const StoryAllIconsTemplate: StoryFn<typeof Icon> = (args) => ({
 	components: { Icon },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template:
 		'<div class="sbIconList">' +

package/lib/js/components/Icons/Icon/Icon.vue

@@ -23,9 +23,9 @@
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
 import { ICON_SIZES, ICONS } from './Icon.consts';
-import { toRaw } from 'vue';
+import { defineComponent, toRaw } from 'vue';
 
-export default {
+export default defineComponent({
 	name: 'Icon',
 	components: {
 		FontAwesomeIcon,
@@ -82,5 +82,5 @@ export default {
 			return `-ds-rotate${this.rotation}`;
 		},
 	},
-};
+});
 </script>

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

@@ -1,4 +1,4 @@
-import { Args, Meta, StoryFn } from '@storybook/vue3';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
 import DsImage from './Image.vue';
 import { IMAGE_FITS } from './Image.consts';
 
@@ -10,7 +10,7 @@ export default {
 const StoryTemplate: StoryFn<typeof DsImage> = (args) => ({
 	components: { DsImage },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<div style="height: 500px; width: 800px;">
@@ -30,7 +30,7 @@ Interactive.args = {
 
 Interactive.argTypes = {
 	fit: {
-		control: { type: 'select', options: Object.values(IMAGE_FITS) },
-		defaultValue: IMAGE_FITS.COVER,
+		control: 'select',
+		options: Object.values(IMAGE_FITS),
 	},
-};
+} as ArgTypes;

package/lib/js/components/Image/Image.vue

@@ -3,7 +3,6 @@
 		<img
 			class="ds-image__image"
 			:class="{
-				'-ds-accelerate': accelerate,
 				'-ds-contain': fit === IMAGE_FITS.CONTAIN,
 				'-ds-cover': fit === IMAGE_FITS.COVER,
 			}"
@@ -29,10 +28,6 @@
 		user-select: none;
 		width: 100%;
 
-		&.-ds-accelerate {
-			transform: translate3d(0, 0, 0);
-		}
-
 		&.-ds-contain {
 			object-fit: contain;
 		}
@@ -68,12 +63,6 @@ export default defineComponent({
 		DsSkeleton,
 	},
 	props: {
-		// Use when there are performance issues when other elements are overlayed
-		// on the image, e.g. a RichListItem border covers a part of the image
-		accelerate: {
-			type: Boolean,
-			default: false,
-		},
 		fit: {
 			type: String as PropType<ImageFit>,
 			default: IMAGE_FITS.COVER,

package/lib/js/components/Layouts/ThreeColumnLayout/ThreeColumnLayout.stories.ts

@@ -26,7 +26,7 @@ export default {
 const StoryTemplate: StoryFn<typeof ThreeColumnLayout> = (args) => ({
 	components: { ThreeColumnLayout },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `
 		<three-column-layout :rightColumnSize='rightColumnSize'
@@ -63,14 +63,14 @@ const args = {
 
 const argTypes = {
 	rightColumnSize: {
-		control: { type: 'select', options: Object.values(THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE) },
-		defaultValue: THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE.MEDIUM,
+		control: 'select',
+		options: Object.values(THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE),
 	},
-	leftColumnVisible: { control: { type: 'boolean' } },
-	rightColumnVisible: { control: { type: 'boolean' } },
-	initialMobileRightColumnVisibleState: { control: { type: 'boolean' } },
-	initialMobileLeftColumnVisibleState: { control: { type: 'boolean' } },
-	contentWithoutPadding: { control: { type: 'boolean' } },
+	leftColumnVisible: { control: 'boolean' },
+	rightColumnVisible: { control: 'boolean' },
+	initialMobileRightColumnVisibleState: { control: 'boolean' },
+	initialMobileLeftColumnVisibleState: { control: 'boolean' },
+	contentWithoutPadding: { control: 'boolean' },
 } as ArgTypes;
 
 Interactive.argTypes = argTypes;

package/lib/js/components/Layouts/ThreeColumnLayout/ThreeColumnLayout.vue

@@ -196,13 +196,13 @@ $right-column-large-l-max-width: $right-column-large-max-width;
 </style>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import {
 	THREE_COLUMN_LAYOUT_RIGHT_COLUMN_SIZE,
 	ThreeColumnLayoutRightColumnSize,
 } from './ThreeColumnLayout.consts';
 
-export default {
+export default defineComponent({
 	name: 'ThreeColumnLayout',
 	props: {
 		rightColumnSize: {
@@ -264,5 +264,5 @@ export default {
 		this.leftColumnVisibleMobile = this.initialMobileLeftColumnVisibleState;
 		this.rightColumnVisibleMobile = this.initialMobileRightColumnVisibleState;
 	},
-};
+});
 </script>

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

@@ -10,7 +10,7 @@ export default {
 const StoryTemplate: StoryFn<typeof LoadingBar> = (args) => ({
 	components: { DsLoadingBar: LoadingBar },
 	setup() {
-		return { ...args };
+		return args;
 	},
 	template: `<ds-loading-bar :size="size" :color="color" :time="time" />`,
 });
@@ -25,12 +25,12 @@ const args = {
 
 const argTypes = {
 	size: {
-		control: { type: 'select', options: Object.values(LOADING_BAR_SIZES) },
-		defaultValue: LOADING_BAR_SIZES.LARGE,
+		control: 'select',
+		options: Object.values(LOADING_BAR_SIZES),
 	},
 	color: {
-		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/LoadingBar/LoadingBar.vue

@@ -58,7 +58,7 @@
 </style>
 
 <script lang="ts">
-import { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
 import {
 	LOADING_BAR_COLORS,
 	LOADING_BAR_SIZES,
@@ -66,7 +66,7 @@ import {
 	LoadingBarSizes,
 } from './LoadingBar.consts';
 
-export default {
+export default defineComponent({
 	name: 'LoadingBar',
 	props: {
 		color: {
@@ -110,5 +110,5 @@ export default {
 			this.width = 100;
 		}, 0);
 	},
-};
+});
 </script>

package/lib/js/components/Modal/Modal.vue

@@ -106,7 +106,9 @@
 <script lang="ts">
 import WnlIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
 
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
 	name: 'Modal',
 	components: { WnlIcon },
 	props: {
@@ -128,5 +130,5 @@ export default {
 			ICON_SIZES: Object.freeze(ICON_SIZES),
 		};
 	},
-};
+});
 </script>