@@ -52,40 +54,48 @@ export const Interactive = StoryTemplate.bind({});
const args = {
slotText: 'Hello',
+ size: BUTTON_SIZES.MEDIUM,
+ type: BUTTON_TYPES.FILLED,
+ color: BUTTON_COLORS.PRIMARY,
+ radius: BUTTON_RADIUSES.CAPSULE,
+ state: BUTTON_STATES.DEFAULT,
+ elevation: BUTTON_ELEVATIONS.NONE,
+ iconLeft: 'FA_CHEVRON_LEFT',
+ iconRight: null,
} as Args;
const argTypes = {
size: {
- control: { type: 'select', options: Object.values(BUTTON_SIZES) },
- defaultValue: BUTTON_SIZES.MEDIUM,
+ control: 'select',
+ options: Object.values(BUTTON_SIZES),
},
type: {
- control: { type: 'select', options: Object.values(BUTTON_TYPES) },
- defaultValue: BUTTON_TYPES.FILLED,
+ control: 'select',
+ options: Object.values(BUTTON_TYPES),
},
color: {
- control: { type: 'select', options: Object.values(BUTTON_COLORS) },
- defaultValue: BUTTON_COLORS.PRIMARY,
+ control: 'select',
+ options: Object.values(BUTTON_COLORS),
},
radius: {
- control: { type: 'select', options: Object.values(BUTTON_RADIUSES) },
- defaultValue: BUTTON_RADIUSES.CAPSULE,
+ control: 'select',
+ options: Object.values(BUTTON_RADIUSES),
},
state: {
- control: { type: 'select', options: Object.values(BUTTON_STATES) },
- defaultValue: BUTTON_STATES.DEFAULT,
+ control: 'select',
+ options: Object.values(BUTTON_STATES),
},
elevation: {
- control: { type: 'select', options: Object.values(BUTTON_ELEVATIONS) },
- defaultValue: BUTTON_ELEVATIONS.NONE,
+ control: 'select',
+ options: Object.values(BUTTON_ELEVATIONS),
},
iconLeft: {
- control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
- defaultValue: 'FA_CHEVRON_LEFT',
+ 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;
diff --git a/lib/js/components/Buttons/Button/Button.vue b/lib/js/components/Buttons/Button/Button.vue
index 541d0810e..1a4c828b7 100644
--- a/lib/js/components/Buttons/Button/Button.vue
+++ b/lib/js/components/Buttons/Button/Button.vue
@@ -45,9 +45,7 @@
-
+
diff --git a/lib/js/components/Buttons/IconButton/IconButton.stories.ts b/lib/js/components/Buttons/IconButton/IconButton.stories.ts
index 9e6f82186..2d83b0525 100644
--- a/lib/js/components/Buttons/IconButton/IconButton.stories.ts
+++ b/lib/js/components/Buttons/IconButton/IconButton.stories.ts
@@ -1,25 +1,27 @@
import IconButton from './IconButton.vue';
import {
- ICON_BUTTON_SIZES,
ICON_BUTTON_COLOR_SCHEMES,
- ICON_BUTTON_TYPES,
ICON_BUTTON_COLORS,
+ ICON_BUTTON_SIZES,
ICON_BUTTON_STATES,
+ ICON_BUTTON_TYPES,
} from './IconButton.consts';
import { BUTTON_ELEVATIONS, BUTTON_RADIUSES } from '../Button';
import { ICONS } from '../../Icons/Icon';
import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { withActions } from '@storybook/addon-actions/decorator';
export default {
title: 'Components/Buttons/IconButton',
component: IconButton,
+ decorators: [withActions],
} as Meta
;
const StoryTemplate: StoryFn = (args) => ({
components: { IconButton },
setup() {
- return { ...args };
+ return args;
},
computed: {
isInverted() {
@@ -59,40 +61,41 @@ const args = {
elevation: BUTTON_ELEVATIONS.NONE,
color: 'primary',
state: ICON_BUTTON_STATES.DEFAULT,
+ icon: 'FA_XMARK',
} as Args;
const argTypes = {
size: {
- control: { type: 'select', options: Object.values(ICON_BUTTON_SIZES) },
- defaultValue: ICON_BUTTON_SIZES.LARGE,
+ control: 'select',
+ options: Object.values(ICON_BUTTON_SIZES),
},
type: {
- control: { type: 'select', options: Object.values(ICON_BUTTON_TYPES) },
- defaultValue: ICON_BUTTON_TYPES.ICON_ONLY,
+ control: 'select',
+ options: Object.values(ICON_BUTTON_TYPES),
},
radius: {
- control: { type: 'select', options: Object.values(BUTTON_RADIUSES) },
- defaultValue: BUTTON_RADIUSES.CAPSULE,
+ control: 'select',
+ options: Object.values(BUTTON_RADIUSES),
},
icon: {
- control: { type: 'select', options: Object.keys(ICONS) },
- defaultValue: 'FA_XMARK',
+ control: 'select',
+ options: Object.keys(ICONS),
},
color: {
- control: { type: 'select', options: Object.values(ICON_BUTTON_COLORS) },
- defaultValue: 'primary',
+ control: 'select',
+ options: Object.values(ICON_BUTTON_COLORS),
},
colorScheme: {
- control: { type: 'select', options: Object.values(ICON_BUTTON_COLOR_SCHEMES) },
- defaultValue: ICON_BUTTON_COLOR_SCHEMES.ALL_IN_COLOR,
+ control: 'select',
+ options: Object.values(ICON_BUTTON_COLOR_SCHEMES),
},
elevation: {
- control: { type: 'select', options: Object.values(BUTTON_ELEVATIONS) },
- defaultValue: BUTTON_ELEVATIONS.NONE,
+ control: 'select',
+ options: Object.values(BUTTON_ELEVATIONS),
},
state: {
- control: { type: 'select', options: Object.values(ICON_BUTTON_STATES) },
- defaultValue: ICON_BUTTON_STATES.DEFAULT,
+ control: 'select',
+ options: Object.values(ICON_BUTTON_STATES),
},
} as ArgTypes;
@@ -111,41 +114,41 @@ Interactive.parameters = {
const argTypesDisabled = {
size: {
- control: { type: null },
+ disable: true,
},
type: {
- control: { type: null },
+ disable: true,
},
radius: {
- control: { type: null },
+ disable: true,
},
icon: {
- control: { type: null },
+ disable: true,
},
color: {
- control: { type: null },
+ disable: true,
},
colorScheme: {
- control: { type: null },
+ disable: true,
},
elevation: {
- control: { type: null },
+ disable: true,
},
state: {
- control: { type: null },
+ disable: true,
},
touchable: {
- control: { type: null },
+ disable: true,
},
default: {
- control: { type: null },
+ disable: true,
},
} as ArgTypes;
const StoryFilledWithLabelTemplate: StoryFn = (args) => ({
components: { IconButton },
setup() {
- return { ...args };
+ return args;
},
template:
'Zamknij',
@@ -163,7 +166,7 @@ FilledWithLabel.argTypes = argTypesDisabled;
const StoryOutlinedRoundedTemplate: StoryFn = (args) => ({
components: { IconButton },
setup() {
- return { ...args };
+ return args;
},
template:
'',
@@ -182,7 +185,7 @@ OutlinedRounded.argTypes = argTypesDisabled;
const StoryFilledPrimaryTemplate: StoryFn = (args) => ({
components: { IconButton },
setup() {
- return { ...args };
+ return args;
},
template:
'',
@@ -202,7 +205,7 @@ FilledPrimary.argTypes = argTypesDisabled;
const StoryIconOnlyInfoTemplate: StoryFn = (args) => ({
components: { IconButton },
setup() {
- return { ...args };
+ return args;
},
template:
'',
@@ -221,7 +224,7 @@ IconOnlyInfo.argTypes = argTypesDisabled;
const StoryIconOnlyWarningTemplate: StoryFn = (args) => ({
components: { IconButton },
setup() {
- return { ...args };
+ return args;
},
template:
'',
diff --git a/lib/js/components/Buttons/IconButton/IconButton.vue b/lib/js/components/Buttons/IconButton/IconButton.vue
index 36ce69156..5f8fbdd38 100644
--- a/lib/js/components/Buttons/IconButton/IconButton.vue
+++ b/lib/js/components/Buttons/IconButton/IconButton.vue
@@ -273,7 +273,7 @@ import {
ICON_BUTTON_TYPES,
} from './IconButton.consts';
import { Value } from '../../../utils/type.utils';
-import { toRaw } from 'vue';
+import { defineComponent, toRaw } from 'vue';
const ICON_ONLY_ICON_SIZES_MAP = {
[ICON_BUTTON_SIZES.XX_SMALL]: ICON_SIZES.XXX_SMALL,
@@ -283,7 +283,7 @@ const ICON_ONLY_ICON_SIZES_MAP = {
[ICON_BUTTON_SIZES.LARGE]: ICON_SIZES.MEDIUM,
} as const;
-export default {
+export default defineComponent({
name: 'IconButton',
components: {
WnlIcon,
@@ -402,5 +402,5 @@ export default {
return `-ds-color-${this.color}`;
},
},
-};
+});
diff --git a/lib/js/components/Cards/Card/Card.stories.ts b/lib/js/components/Cards/Card/Card.stories.ts
index f20f92fdb..52362a687 100644
--- a/lib/js/components/Cards/Card/Card.stories.ts
+++ b/lib/js/components/Cards/Card/Card.stories.ts
@@ -12,9 +12,10 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { Card },
setup() {
- return { ...args };
+ return args;
},
- template: ` = (args) => ({
export const Interactive = StoryTemplate.bind({});
const args = {
+ header: 'header slot',
+ content: 'content slot that supports HTML markup',
+ 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 HTML markup',
+ 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;
diff --git a/lib/js/components/Cards/Card/Card.vue b/lib/js/components/Cards/Card/Card.vue
index ea5b49b94..4c5074758 100644
--- a/lib/js/components/Cards/Card/Card.vue
+++ b/lib/js/components/Cards/Card/Card.vue
@@ -137,7 +137,7 @@
diff --git a/lib/js/components/Cards/CardExpandable/CardExpandable.stories.ts b/lib/js/components/Cards/CardExpandable/CardExpandable.stories.ts
index 415ba5397..df95f9d00 100644
--- a/lib/js/components/Cards/CardExpandable/CardExpandable.stories.ts
+++ b/lib/js/components/Cards/CardExpandable/CardExpandable.stories.ts
@@ -10,7 +10,7 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { CardExpandable },
setup() {
- return { ...args };
+ return args;
},
template: `
= (args) => ({
export const Interactive = StoryTemplate.bind({});
const args = {
+ header: 'header slot',
+ content: 'content slot that supports HTML markup',
+ expandedContent:
+ 'Dodatkowa treść w slocie expandedContent
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 HTML markup',
+ control: 'text',
},
expandedContent: {
- control: { type: 'text' },
- defaultValue:
- 'Dodatkowa treść w slocie expandedContent
widoczna po rozwinięciu',
+ control: 'text',
},
} as ArgTypes;
diff --git a/lib/js/components/Cards/CardExpandable/CardExpandable.vue b/lib/js/components/Cards/CardExpandable/CardExpandable.vue
index f289aa654..9321ac36a 100644
--- a/lib/js/components/Cards/CardExpandable/CardExpandable.vue
+++ b/lib/js/components/Cards/CardExpandable/CardExpandable.vue
@@ -69,10 +69,11 @@
diff --git a/lib/js/components/Chip/Chip.stories.ts b/lib/js/components/Chip/Chip.stories.ts
index e8e8b5f3c..538f2c1be 100644
--- a/lib/js/components/Chip/Chip.stories.ts
+++ b/lib/js/components/Chip/Chip.stories.ts
@@ -12,7 +12,7 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { Chip, LogoBadge },
setup() {
- return { ...args };
+ return args;
},
template:
'',
@@ -25,7 +25,7 @@ const StoryTemplate: StoryFn = (args) => ({
const StoryTemplateWithAccessory: StoryFn = (args) => ({
components: { Chip, LogoBadge },
setup() {
- return { ...args };
+ return args;
},
template:
'' +
@@ -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;
diff --git a/lib/js/components/Chip/Chip.vue b/lib/js/components/Chip/Chip.vue
index 8b057f570..ee0b63795 100644
--- a/lib/js/components/Chip/Chip.vue
+++ b/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;
},
},
-};
+});
diff --git a/lib/js/components/DatePickers/DatePicker/DatePicker.stories.ts b/lib/js/components/DatePickers/DatePicker/DatePicker.stories.ts
index 1db15ec88..669ad2eba 100644
--- a/lib/js/components/DatePickers/DatePicker/DatePicker.stories.ts
+++ b/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;
-const StoryTemplate: StoryFn = (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 = (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: `
-
-
- `,
-});
+ template: `
+
+
+ `,
+ };
+};
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;
diff --git a/lib/js/components/DatePickers/DatePicker/DatePicker.vue b/lib/js/components/DatePickers/DatePicker/DatePicker.vue
index 802664173..83d19a887 100644
--- a/lib/js/components/DatePickers/DatePicker/DatePicker.vue
+++ b/lib/js/components/DatePickers/DatePicker/DatePicker.vue
@@ -117,7 +117,7 @@
diff --git a/lib/js/components/DatePickers/DatePickerBox/DatePickerBox.vue b/lib/js/components/DatePickers/DatePickerBox/DatePickerBox.vue
index 0dc161913..25bae423c 100644
--- a/lib/js/components/DatePickers/DatePickerBox/DatePickerBox.vue
+++ b/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;
},
},
-};
+});
diff --git a/lib/js/components/Divider/Divider.stories.ts b/lib/js/components/Divider/Divider.stories.ts
index 010fcc9d6..001dd6620 100644
--- a/lib/js/components/Divider/Divider.stories.ts
+++ b/lib/js/components/Divider/Divider.stories.ts
@@ -11,7 +11,7 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { Divider },
setup() {
- return { ...args };
+ return args;
},
template: `
@@ -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;
diff --git a/lib/js/components/Divider/Divider.vue b/lib/js/components/Divider/Divider.vue
index c50265fb0..0bcde04a1 100644
--- a/lib/js/components/Divider/Divider.vue
+++ b/lib/js/components/Divider/Divider.vue
@@ -56,7 +56,9 @@
diff --git a/lib/js/components/Drawer/Drawer.stories.ts b/lib/js/components/Drawer/Drawer.stories.ts
index bd9addd94..e6f2704e9 100644
--- a/lib/js/components/Drawer/Drawer.stories.ts
+++ b/lib/js/components/Drawer/Drawer.stories.ts
@@ -11,7 +11,7 @@ export default {
const StoryTemplate: StoryFn
= (args) => ({
components: { Drawer },
setup() {
- return { ...args };
+ return args;
},
template: `
@@ -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;
diff --git a/lib/js/components/Drawer/Drawer.vue b/lib/js/components/Drawer/Drawer.vue
index a44a74e9d..0f3de1811 100644
--- a/lib/js/components/Drawer/Drawer.vue
+++ b/lib/js/components/Drawer/Drawer.vue
@@ -71,11 +71,11 @@
diff --git a/lib/js/components/Drawer/DrawerContent/DrawerContent.stories.ts b/lib/js/components/Drawer/DrawerContent/DrawerContent.stories.ts
index 25f2fbe32..7ab152462 100644
--- a/lib/js/components/Drawer/DrawerContent/DrawerContent.stories.ts
+++ b/lib/js/components/Drawer/DrawerContent/DrawerContent.stories.ts
@@ -10,7 +10,7 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { DrawerContent },
setup() {
- return { ...args };
+ return args;
},
template: `
diff --git a/lib/js/components/Drawer/DrawerContent/DrawerContent.vue b/lib/js/components/Drawer/DrawerContent/DrawerContent.vue
index 80cba6d89..84248d0c8 100644
--- a/lib/js/components/Drawer/DrawerContent/DrawerContent.vue
+++ b/lib/js/components/Drawer/DrawerContent/DrawerContent.vue
@@ -16,7 +16,9 @@
diff --git a/lib/js/components/Drawer/DrawerDivider/DrawerDivider.stories.ts b/lib/js/components/Drawer/DrawerDivider/DrawerDivider.stories.ts
index d3ffedef1..7b490ff26 100644
--- a/lib/js/components/Drawer/DrawerDivider/DrawerDivider.stories.ts
+++ b/lib/js/components/Drawer/DrawerDivider/DrawerDivider.stories.ts
@@ -11,7 +11,7 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { DrawerDivider },
setup() {
- return { ...args };
+ return args;
},
template: `
@@ -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;
diff --git a/lib/js/components/Drawer/DrawerDivider/DrawerDivider.vue b/lib/js/components/Drawer/DrawerDivider/DrawerDivider.vue
index 6c1ea3614..f598c77af 100644
--- a/lib/js/components/Drawer/DrawerDivider/DrawerDivider.vue
+++ b/lib/js/components/Drawer/DrawerDivider/DrawerDivider.vue
@@ -15,7 +15,9 @@
diff --git a/lib/js/components/Drawer/DrawerHeader/DrawerHeader.stories.ts b/lib/js/components/Drawer/DrawerHeader/DrawerHeader.stories.ts
index 335256101..98424d9b3 100644
--- a/lib/js/components/Drawer/DrawerHeader/DrawerHeader.stories.ts
+++ b/lib/js/components/Drawer/DrawerHeader/DrawerHeader.stories.ts
@@ -12,7 +12,7 @@ export default {
const StoryTemplate: StoryFn
= (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;
diff --git a/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue b/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue
index 718e3eabe..9d8b1d296 100644
--- a/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue
+++ b/lib/js/components/Drawer/DrawerHeader/DrawerHeader.vue
@@ -144,7 +144,7 @@ $minimal-drawer-header-height: 82px;
diff --git a/lib/js/components/Drawer/DrawerListItem/DrawerListItem.stories.ts b/lib/js/components/Drawer/DrawerListItem/DrawerListItem.stories.ts
index d8caeca61..7cfe45c87 100644
--- a/lib/js/components/Drawer/DrawerListItem/DrawerListItem.stories.ts
+++ b/lib/js/components/Drawer/DrawerListItem/DrawerListItem.stories.ts
@@ -11,7 +11,7 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { DrawerListItem },
setup() {
- return { ...args };
+ return args;
},
template: `
@@ -23,12 +23,13 @@ export const Interactive = StoryTemplate.bind({});
const args = {
label: 'Label',
valueText: 'value',
+ state: DRAWER_LIST_ITEM_STATES.DEFAULT,
} as Args;
const argTypes = {
state: {
- control: { type: 'select', options: Object.values(DRAWER_LIST_ITEM_STATES) },
- defaultValue: DRAWER_LIST_ITEM_STATES.DEFAULT,
+ control: 'select',
+ options: Object.values(DRAWER_LIST_ITEM_STATES),
},
} as ArgTypes;
diff --git a/lib/js/components/Drawer/DrawerListItem/DrawerListItem.vue b/lib/js/components/Drawer/DrawerListItem/DrawerListItem.vue
index 793f6812d..15fffa720 100644
--- a/lib/js/components/Drawer/DrawerListItem/DrawerListItem.vue
+++ b/lib/js/components/Drawer/DrawerListItem/DrawerListItem.vue
@@ -45,12 +45,12 @@
diff --git a/lib/js/components/Drawer/DrawerListItemGroup/DrawerListItemGroup.stories.ts b/lib/js/components/Drawer/DrawerListItemGroup/DrawerListItemGroup.stories.ts
index 1970e2e16..28351a8b0 100644
--- a/lib/js/components/Drawer/DrawerListItemGroup/DrawerListItemGroup.stories.ts
+++ b/lib/js/components/Drawer/DrawerListItemGroup/DrawerListItemGroup.stories.ts
@@ -11,7 +11,7 @@ export default {
const StoryTemplate: StoryFn
= (args) => ({
components: { DrawerListItemGroup, DrawerListItem },
setup() {
- return { ...args };
+ return args;
},
template: `
diff --git a/lib/js/components/Drawer/DrawerListItemGroup/DrawerListItemGroup.vue b/lib/js/components/Drawer/DrawerListItemGroup/DrawerListItemGroup.vue
index 6861eec97..7944fc771 100644
--- a/lib/js/components/Drawer/DrawerListItemGroup/DrawerListItemGroup.vue
+++ b/lib/js/components/Drawer/DrawerListItemGroup/DrawerListItemGroup.vue
@@ -13,7 +13,9 @@
diff --git a/lib/js/components/Drawer/DrawerSection/DrawerSection.stories.ts b/lib/js/components/Drawer/DrawerSection/DrawerSection.stories.ts
index d1a927729..1e64cf073 100644
--- a/lib/js/components/Drawer/DrawerSection/DrawerSection.stories.ts
+++ b/lib/js/components/Drawer/DrawerSection/DrawerSection.stories.ts
@@ -3,67 +3,72 @@ import DrawerSection from './DrawerSection.vue';
import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
import { SECTION_HEADER_ICON_COLORS, SECTION_HEADER_SIZES } from '../../Headers/SectionHeader';
import { ICONS } from '../../Icons/Icon';
+import { useArgs } from '@storybook/preview-api';
export default {
title: 'Components/Drawer/DrawerSection',
component: DrawerSection,
} as Meta;
-const StoryTemplate: StoryFn = (args, { updateArgs }) => ({
- components: { DrawerSection },
- setup() {
- return { ...args };
- },
- data() {
- return {
- ICONS: Object.freeze(ICONS),
- };
- },
- methods: {
- infoClicked() {
- console.log('info clicked');
+const StoryTemplate: StoryFn = (args) => {
+ const [_, updateArgs] = useArgs();
+
+ return {
+ components: { DrawerSection },
+ setup() {
+ return args;
},
- isExpandedUpdated(isExpanded: boolean) {
- updateArgs({
- isExpanded,
- });
+ data() {
+ return {
+ ICONS: Object.freeze(ICONS),
+ };
},
- },
- template: `
-
- Default slot
- Uncollapsible slot
- `,
-});
+ methods: {
+ infoClicked() {
+ console.log('info clicked');
+ },
+ isExpandedUpdated(isExpanded: boolean) {
+ updateArgs({
+ isExpanded,
+ });
+ },
+ },
+ template: `
+
+ Default slot
+ Uncollapsible slot
+ `,
+ };
+};
export const Interactive = StoryTemplate.bind({});
const args = {
- size: SECTION_HEADER_SIZES.XX_SMALL,
+ size: SECTION_HEADER_SIZES.MEDIUM,
title: 'Drawer Section Header',
titleEllipsis: false,
supportingText: '',
eyebrow: '',
iconLeft: null,
- iconLeftColor: null,
+ iconLeftColor: SECTION_HEADER_ICON_COLORS.NEUTRAL,
iconRight: null,
- iconRightColor: null,
+ iconRightColor: SECTION_HEADER_ICON_COLORS.NEUTRAL,
info: false,
hasDivider: true,
isExpandable: false,
@@ -72,32 +77,30 @@ 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',
},
} as ArgTypes;
diff --git a/lib/js/components/Drawer/DrawerSection/DrawerSection.vue b/lib/js/components/Drawer/DrawerSection/DrawerSection.vue
index 49a007f69..30987a75a 100644
--- a/lib/js/components/Drawer/DrawerSection/DrawerSection.vue
+++ b/lib/js/components/Drawer/DrawerSection/DrawerSection.vue
@@ -33,9 +33,9 @@ import SectionHeader, {
SECTION_HEADER_SIZES,
SectionHeaderIconColor,
} from '../../Headers/SectionHeader';
-import { toRaw } from 'vue';
+import { defineComponent, toRaw } from 'vue';
-export default {
+export default defineComponent({
name: 'DrawerSection',
components: {
DsSectionHeader: SectionHeader,
@@ -139,5 +139,5 @@ export default {
this.$emit('info-click');
},
},
-};
+});
diff --git a/lib/js/components/Drawer/DrawerTile/DrawerTile.stories.ts b/lib/js/components/Drawer/DrawerTile/DrawerTile.stories.ts
index dbb78c9a1..8e7a91ad1 100644
--- a/lib/js/components/Drawer/DrawerTile/DrawerTile.stories.ts
+++ b/lib/js/components/Drawer/DrawerTile/DrawerTile.stories.ts
@@ -11,7 +11,7 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { DrawerTile },
setup() {
- return { ...args };
+ return args;
},
template: template('drawer-tile'),
data,
diff --git a/lib/js/components/Drawer/DrawerTile/DrawerTile.vue b/lib/js/components/Drawer/DrawerTile/DrawerTile.vue
index 616f5186f..19e7b420f 100644
--- a/lib/js/components/Drawer/DrawerTile/DrawerTile.vue
+++ b/lib/js/components/Drawer/DrawerTile/DrawerTile.vue
@@ -16,7 +16,9 @@
import Tile from '../../Tile/Tile.vue';
import { props } from '../../Tile/Tile.shared';
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
name: 'DrawerTile',
components: {
DsTile: Tile,
@@ -26,5 +28,5 @@ export default {
// TODO fix me when touching this file
// eslint-disable-next-line vue/require-emit-validator
emits: ['click'],
-};
+});
diff --git a/lib/js/components/Dropdown/Dropdown.stories.ts b/lib/js/components/Dropdown/Dropdown.stories.ts
index aee506fec..6cea4c29b 100644
--- a/lib/js/components/Dropdown/Dropdown.stories.ts
+++ b/lib/js/components/Dropdown/Dropdown.stories.ts
@@ -17,7 +17,7 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { Dropdown, SelectList, SelectListItem },
setup() {
- return { ...args };
+ return args;
},
template: `
@@ -47,24 +47,24 @@ const args = {
forceShow: false,
sameWidth: false,
maxHeight: '',
+ placement: DROPDOWN_PLACEMENTS.BOTTOM_START,
} as Args;
const argTypes = {
triggerAction: {
- control: { type: 'select', options: Object.values(DROPDOWN_TRIGGER_ACTIONS) },
- defaultValue: DROPDOWN_TRIGGER_ACTIONS.CLICK,
+ control: 'select',
+ options: Object.values(DROPDOWN_TRIGGER_ACTIONS),
},
radius: {
- control: { type: 'select', options: Object.values(DROPDOWN_RADIUSES) },
- defaultValue: DROPDOWN_RADIUSES.BOTH,
+ control: 'select',
+ options: Object.values(DROPDOWN_RADIUSES),
},
placement: {
- control: { type: 'select', options: Object.values(DROPDOWN_PLACEMENTS) },
- defaultValue: DROPDOWN_PLACEMENTS.BOTTOM_START,
+ control: 'select',
+ options: Object.values(DROPDOWN_PLACEMENTS),
},
maxHeight: {
- control: { type: 'text' },
- defaultValue: '',
+ control: 'text',
},
} as ArgTypes;
diff --git a/lib/js/components/Dropdown/Dropdown.vue b/lib/js/components/Dropdown/Dropdown.vue
index 5f9240e9b..b0e0414ff 100644
--- a/lib/js/components/Dropdown/Dropdown.vue
+++ b/lib/js/components/Dropdown/Dropdown.vue
@@ -87,7 +87,9 @@ import {
DROPDOWN_TRIGGER_ACTIONS,
} from './Dropdown.consts';
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
name: 'Dropdown',
components: {
VuePopper,
@@ -195,5 +197,5 @@ export default {
this.$emit('show');
},
},
-};
+});
diff --git a/lib/js/components/Form/Checkbox/Checkbox.stories.ts b/lib/js/components/Form/Checkbox/Checkbox.stories.ts
index 3751e6076..2c340e36d 100644
--- a/lib/js/components/Form/Checkbox/Checkbox.stories.ts
+++ b/lib/js/components/Form/Checkbox/Checkbox.stories.ts
@@ -3,32 +3,39 @@ import Checkbox from './Checkbox.vue';
import { Meta, StoryFn } from '@storybook/vue3';
import { args, argTypes, template } from '../SelectionControl/SelectionControl.sb.shared';
import { CHECKBOX_SIZE, CHECKBOX_STATE } from './Checkbox.consts';
+import { useArgs } from '@storybook/preview-api';
+import { withActions } from '@storybook/addon-actions/decorator';
export default {
title: 'Components/Form/Checkbox',
component: Checkbox,
+ decorators: [withActions],
} as Meta
;
-const StoryTemplate: StoryFn = (args, { updateArgs }) => ({
- components: { Checkbox },
- setup() {
- return { args };
- },
- methods: {
- onIsSelectedUpdated(isSelected) {
- updateArgs({
- isSelected,
- });
+const StoryTemplate: StoryFn = (args) => {
+ const [_, updateArgs] = useArgs();
+
+ return {
+ components: { Checkbox },
+ setup() {
+ return { args };
},
- },
- template: template('checkbox'),
-});
+ methods: {
+ onIsSelectedUpdated(isSelected) {
+ updateArgs({
+ isSelected,
+ });
+ },
+ },
+ template: template('checkbox'),
+ };
+};
export const Interactive = StoryTemplate.bind({});
Interactive.argTypes = argTypes(CHECKBOX_SIZE, CHECKBOX_STATE);
-Interactive.args = args;
+Interactive.args = args(CHECKBOX_SIZE, CHECKBOX_STATE);
Interactive.parameters = {
actions: {
diff --git a/lib/js/components/Form/Checkbox/Checkbox.vue b/lib/js/components/Form/Checkbox/Checkbox.vue
index 556c6cb60..6b2d49b2f 100644
--- a/lib/js/components/Form/Checkbox/Checkbox.vue
+++ b/lib/js/components/Form/Checkbox/Checkbox.vue
@@ -14,13 +14,13 @@
diff --git a/lib/js/components/Form/RadioButton/RadioButton.stories.ts b/lib/js/components/Form/RadioButton/RadioButton.stories.ts
index 9f0e23aa0..06b31bd95 100644
--- a/lib/js/components/Form/RadioButton/RadioButton.stories.ts
+++ b/lib/js/components/Form/RadioButton/RadioButton.stories.ts
@@ -3,32 +3,39 @@ import RadioButton from './RadioButton.vue';
import { Meta, StoryFn } from '@storybook/vue3';
import { args, argTypes, template } from '../SelectionControl/SelectionControl.sb.shared';
import { RADIO_BUTTON_SIZE, RADIO_BUTTON_STATE } from './RadioButton.consts';
+import { useArgs } from '@storybook/preview-api';
+import { withActions } from '@storybook/addon-actions/decorator';
export default {
title: 'Components/Form/RadioButton',
component: RadioButton,
+ decorators: [withActions],
} as Meta;
-const StoryTemplate: StoryFn = (args, { updateArgs }) => ({
- components: { RadioButton },
- setup() {
- return { args };
- },
- methods: {
- onIsSelectedUpdated(isSelected) {
- updateArgs({
- isSelected,
- });
+const StoryTemplate: StoryFn = (args) => {
+ const [_, updateArgs] = useArgs();
+
+ return {
+ components: { RadioButton },
+ setup() {
+ return { args };
},
- },
- template: template('radio-button'),
-});
+ methods: {
+ onIsSelectedUpdated(isSelected) {
+ updateArgs({
+ isSelected,
+ });
+ },
+ },
+ template: template('radio-button'),
+ };
+};
export const Interactive = StoryTemplate.bind({});
Interactive.argTypes = argTypes(RADIO_BUTTON_SIZE, RADIO_BUTTON_STATE);
-Interactive.args = args;
+Interactive.args = args(RADIO_BUTTON_SIZE, RADIO_BUTTON_STATE);
Interactive.parameters = {
actions: {
diff --git a/lib/js/components/Form/RadioButton/RadioButton.vue b/lib/js/components/Form/RadioButton/RadioButton.vue
index 7d4ff89dc..a0d53d165 100644
--- a/lib/js/components/Form/RadioButton/RadioButton.vue
+++ b/lib/js/components/Form/RadioButton/RadioButton.vue
@@ -14,7 +14,7 @@
diff --git a/lib/js/components/Form/SelectionControl/SelectionControl.sb.shared.ts b/lib/js/components/Form/SelectionControl/SelectionControl.sb.shared.ts
index 94ac05602..7c2e49eb0 100644
--- a/lib/js/components/Form/SelectionControl/SelectionControl.sb.shared.ts
+++ b/lib/js/components/Form/SelectionControl/SelectionControl.sb.shared.ts
@@ -6,18 +6,21 @@ export const template = (componentTag: string) => `
export const argTypes = (size, state) =>
({
size: {
- control: { type: 'select', options: Object.values(size) },
- defaultValue: size.SMALL,
+ control: 'select',
+ options: Object.values(size),
},
- label: { control: { type: 'text' } },
- isSelected: { control: { type: 'boolean' } },
+ label: { control: 'text' },
+ isSelected: { control: 'boolean' },
state: {
- control: { type: 'select', options: Object.values(state) },
- defaultValue: state.DEFAULT,
+ control: 'select',
+ options: Object.values(state),
},
} as ArgTypes);
-export const args = {
- label: 'Example label',
- isSelected: false,
-} as Args;
+export const args = (size, state) =>
+ ({
+ label: 'Example label',
+ isSelected: false,
+ size: size.SMALL,
+ state: state.DEFAULT,
+ } as Args);
diff --git a/lib/js/components/Form/SelectionControl/SelectionControl.vue b/lib/js/components/Form/SelectionControl/SelectionControl.vue
index aa09223eb..27e86d6f0 100644
--- a/lib/js/components/Form/SelectionControl/SelectionControl.vue
+++ b/lib/js/components/Form/SelectionControl/SelectionControl.vue
@@ -228,7 +228,7 @@ $selection-control-sizes: (
diff --git a/lib/js/components/Headers/OverlayHeader/OverlayHeader.stories.ts b/lib/js/components/Headers/OverlayHeader/OverlayHeader.stories.ts
index 6886288d0..6c952d221 100644
--- a/lib/js/components/Headers/OverlayHeader/OverlayHeader.stories.ts
+++ b/lib/js/components/Headers/OverlayHeader/OverlayHeader.stories.ts
@@ -25,7 +25,7 @@ const StoryTemplate: StoryFn = (args) => ({
};
},
template: `
-
+
{{ args.accessorySlot }}
@@ -64,22 +64,22 @@ const args = {
titleLeadingSlot: 'leading',
titleTrailingSlot: 'trailing',
isTitleInteractive: false,
+ borderColor: OVERLAY_HEADER_BORDER_COLORS.NEUTRAL_GHOST,
+ state: OVERLAY_HEADER_STATES.DEFAULT,
} as Args;
const argTypes = {
borderColor: {
- control: {
- type: 'select',
- options: Object.values(OVERLAY_HEADER_BORDER_COLORS),
- },
- defaultValue: OVERLAY_HEADER_BORDER_COLORS.NEUTRAL_GHOST,
+ control: 'select',
+ options: Object.values(OVERLAY_HEADER_BORDER_COLORS),
},
state: {
- control: { type: 'select', options: Object.values(OVERLAY_HEADER_STATES) },
- defaultValue: OVERLAY_HEADER_STATES.DEFAULT,
+ control: 'select',
+ options: Object.values(OVERLAY_HEADER_STATES),
},
dropdownIcon: {
- control: { type: 'select', options: Object.keys(ICONS) },
+ control: 'select',
+ options: Object.keys(ICONS),
},
} as ArgTypes;
diff --git a/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue b/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue
index 4cdcbe5f4..2d35fa22d 100644
--- a/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue
+++ b/lib/js/components/Headers/OverlayHeader/OverlayHeader.vue
@@ -330,7 +330,9 @@ import { Value } from '../../../utils/type.utils';
import { isElementEditable } from '../../../utils/shortcut-keys';
import { toRaw } from 'vue';
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
name: 'OverlayHeader',
components: { DsIconButton, DsDivider, DsDropdown, DsSkeleton, DsTooltip },
props: {
@@ -364,7 +366,7 @@ export default {
},
dropdownIcon: {
type: Object,
- default: ICONS.FA_ELLIPSIS_VERTICAL,
+ default: () => ICONS.FA_ELLIPSIS_VERTICAL,
validator(icon) {
return Object.values(ICONS).includes(toRaw(icon));
},
@@ -418,5 +420,5 @@ export default {
}
},
},
-};
+});
diff --git a/lib/js/components/Headers/PageHeader/PageHeader.stories.ts b/lib/js/components/Headers/PageHeader/PageHeader.stories.ts
index dccd45f29..3716e69bb 100644
--- a/lib/js/components/Headers/PageHeader/PageHeader.stories.ts
+++ b/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;
const StoryTemplate: StoryFn = (args) => ({
components: { PageHeader },
setup() {
- return { ...args };
+ return args;
},
template:
'
diff --git a/lib/js/components/Headers/SectionHeader/SectionHeader.stories.ts b/lib/js/components/Headers/SectionHeader/SectionHeader.stories.ts
index 4f1de804f..7223dc9b0 100644
--- a/lib/js/components/Headers/SectionHeader/SectionHeader.stories.ts
+++ b/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;
-const StoryTemplate: StoryFn = (args, { updateArgs }) => ({
- components: { SectionHeader },
- setup() {
- return { ...args };
- },
- data() {
- return {
- ICONS: Object.freeze(ICONS),
- };
- },
- methods: {
- onIsExpandedUpdated(isExpanded) {
- updateArgs({
- isExpanded,
- });
+const StoryTemplate: StoryFn = (args) => {
+ const [_, updateArgs] = useArgs();
+
+ return {
+ components: { SectionHeader },
+ setup() {
+ return args;
},
- },
- template:
- '' +
- 'Slot content
' +
- '',
-});
+ data() {
+ return {
+ ICONS: Object.freeze(ICONS),
+ };
+ },
+ methods: {
+ onIsExpandedUpdated(isExpanded) {
+ updateArgs({
+ isExpanded,
+ });
+ },
+ },
+ template:
+ '' +
+ 'Slot content
' +
+ '',
+ };
+};
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;
diff --git a/lib/js/components/Headers/SectionHeader/SectionHeader.vue b/lib/js/components/Headers/SectionHeader/SectionHeader.vue
index 7d73ceade..43b2b1a44 100644
--- a/lib/js/components/Headers/SectionHeader/SectionHeader.vue
+++ b/lib/js/components/Headers/SectionHeader/SectionHeader.vue
@@ -21,9 +21,9 @@
:size="iconSize"
/>