@@ -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:
' = (args) => ({
components: { IconButton },
setup() {
- return { ...args };
+ return args;
},
template:
' = (args) => ({
components: { IconButton },
setup() {
- return { ...args };
+ return args;
},
template:
' = (args) => ({
components: { IconButton },
setup() {
- return { ...args };
+ return args;
},
template:
' = (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 = (args) => ({
components: { Chip, LogoBadge },
setup() {
- return { ...args };
+ return args;
},
template:
' = (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: `
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
@@ -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: `
= (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: `
-
+
;
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:
- '' +
- '' +
+ '
{{ 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 MetaSlot 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"
/>
-
{{
- eyebrow
- }}
+ {{ eyebrow }}
+
diff --git a/lib/js/components/IconText/IconText.stories.ts b/lib/js/components/IconText/IconText.stories.ts
index 72cbb4bdc..8c92a97de 100644
--- a/lib/js/components/IconText/IconText.stories.ts
+++ b/lib/js/components/IconText/IconText.stories.ts
@@ -11,7 +11,7 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { IconText },
setup() {
- return { ...args };
+ return args;
},
template: `
diff --git a/lib/js/components/Icons/FeatureIcon/FeatureIcon.stories.ts b/lib/js/components/Icons/FeatureIcon/FeatureIcon.stories.ts
index 555c1a35f..8d663b973 100644
--- a/lib/js/components/Icons/FeatureIcon/FeatureIcon.stories.ts
+++ b/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 = (args) => ({
components: { FeatureIcon },
setup() {
- return { ...args };
+ return args;
},
template:
' = (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;
diff --git a/lib/js/components/Icons/FeatureIcon/FeatureIcon.vue b/lib/js/components/Icons/FeatureIcon/FeatureIcon.vue
index 35df99917..8ac8cb8d5 100644
--- a/lib/js/components/Icons/FeatureIcon/FeatureIcon.vue
+++ b/lib/js/components/Icons/FeatureIcon/FeatureIcon.vue
@@ -120,9 +120,9 @@ $feature-icon-padding-large: 10px;
diff --git a/lib/js/components/Icons/Icon/Icon.stories.ts b/lib/js/components/Icons/Icon/Icon.stories.ts
index c423350a8..a437b0419 100644
--- a/lib/js/components/Icons/Icon/Icon.stories.ts
+++ b/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;
const StoryTemplate: StoryFn = (args) => ({
components: { Icon },
setup() {
- return { ...args };
+ return args;
},
template:
' = (args) => ({
components: { Icon },
setup() {
- return { ...args };
+ return args;
},
template:
'
' +
diff --git a/lib/js/components/Icons/Icon/Icon.vue b/lib/js/components/Icons/Icon/Icon.vue
index 9dca0e5fe..57fa382d2 100644
--- a/lib/js/components/Icons/Icon/Icon.vue
+++ b/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}`;
},
},
-};
+});
diff --git a/lib/js/components/Image/Image.stories.ts b/lib/js/components/Image/Image.stories.ts
index d67fadc97..4b9d09914 100644
--- a/lib/js/components/Image/Image.stories.ts
+++ b/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 = (args) => ({
components: { DsImage },
setup() {
- return { ...args };
+ return args;
},
template: `
@@ -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;
diff --git a/lib/js/components/Layouts/ThreeColumnLayout/ThreeColumnLayout.stories.ts b/lib/js/components/Layouts/ThreeColumnLayout/ThreeColumnLayout.stories.ts
index 4c2eb630d..a365b1cf9 100644
--- a/lib/js/components/Layouts/ThreeColumnLayout/ThreeColumnLayout.stories.ts
+++ b/lib/js/components/Layouts/ThreeColumnLayout/ThreeColumnLayout.stories.ts
@@ -26,7 +26,7 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { ThreeColumnLayout },
setup() {
- return { ...args };
+ return args;
},
template: `
diff --git a/lib/js/components/LoadingBar/LoadingBar.stories.ts b/lib/js/components/LoadingBar/LoadingBar.stories.ts
index 4a37468fd..6e80bf427 100644
--- a/lib/js/components/LoadingBar/LoadingBar.stories.ts
+++ b/lib/js/components/LoadingBar/LoadingBar.stories.ts
@@ -10,7 +10,7 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { DsLoadingBar: LoadingBar },
setup() {
- return { ...args };
+ return args;
},
template: ` = (args) => ({
components: { Modal },
setup() {
- return { ...args };
+ return args;
},
template:
'
diff --git a/lib/js/components/Modals/ModalDialog/ModalDialog.stories.ts b/lib/js/components/Modals/ModalDialog/ModalDialog.stories.ts
index 3b45ca3d9..760ea7ea0 100644
--- a/lib/js/components/Modals/ModalDialog/ModalDialog.stories.ts
+++ b/lib/js/components/Modals/ModalDialog/ModalDialog.stories.ts
@@ -13,7 +13,7 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { ModalDialog },
setup() {
- return { ...args };
+ return args;
},
template:
'
diff --git a/lib/js/components/NumberInCircle/NumberInCircle.stories.ts b/lib/js/components/NumberInCircle/NumberInCircle.stories.ts
index 6c6e4d458..b0defcbff 100644
--- a/lib/js/components/NumberInCircle/NumberInCircle.stories.ts
+++ b/lib/js/components/NumberInCircle/NumberInCircle.stories.ts
@@ -11,7 +11,7 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { NumberInCircle },
setup() {
- return { ...args };
+ return args;
},
template:
'{{slotText}} ',
@@ -22,16 +22,16 @@ export const Interactive = StoryTemplate.bind({});
const args = {
slotText: '1',
index: 1,
- color: NUMBER_IN_CIRCLE_COLORS.PRIMARY,
+ color: NUMBER_IN_CIRCLE_COLORS.DEFAULT,
medium: false,
} as Args;
const argTypes = {
color: {
- control: { type: 'select', options: Object.values(NUMBER_IN_CIRCLE_COLORS) },
- defaultValue: NUMBER_IN_CIRCLE_COLORS.DEFAULT,
+ control: 'select',
+ options: Object.values(NUMBER_IN_CIRCLE_COLORS),
},
- slotText: { control: { type: 'text' } },
+ slotText: { control: 'text' },
} as ArgTypes;
Interactive.argTypes = argTypes;
diff --git a/lib/js/components/NumberInCircle/NumberInCircle.vue b/lib/js/components/NumberInCircle/NumberInCircle.vue
index bc78ac683..23be633be 100644
--- a/lib/js/components/NumberInCircle/NumberInCircle.vue
+++ b/lib/js/components/NumberInCircle/NumberInCircle.vue
@@ -88,7 +88,9 @@
diff --git a/lib/js/components/Outline/OutlineDivider/OutlineDivider.stories.ts b/lib/js/components/Outline/OutlineDivider/OutlineDivider.stories.ts
index b802e9383..54a65e35f 100644
--- a/lib/js/components/Outline/OutlineDivider/OutlineDivider.stories.ts
+++ b/lib/js/components/Outline/OutlineDivider/OutlineDivider.stories.ts
@@ -1,5 +1,5 @@
import OutlineDivider from './OutlineDivider.vue';
-import { ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
import { DIVIDER_PROMINENCES, DIVIDER_SIZES } from '../../Divider';
export default {
@@ -10,24 +10,29 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { OutlineDivider },
setup() {
- return { ...args };
+ return args;
},
- template: ` = (args) => ({
components: { OutlineItem, DsChip },
setup() {
- return { ...args };
+ return args;
},
data() {
return {
@@ -41,60 +41,71 @@ const StoryTemplate: StoryFn = (args) => ({
export const Interactive = StoryTemplate.bind({});
-const args = {} as Args;
+const args = {
+ additionalText: '',
+ defaultSlot: '10 / 20',
+ labelSlot: 'Outline Item label in slot',
+ size: OUTLINE_ITEM_SIZES.SMALL,
+ backgroundColor: OUTLINE_ITEM_BACKGROUND_COLORS.NEUTRAL_WEAK,
+ iconLeft: null,
+ iconRight: null,
+ iconRightRotation: null,
+ index: null,
+ label: 'Outline Item label',
+ isLabelUppercase: false,
+ state: OUTLINE_ITEM_STATES.DEFAULT,
+ isSelected: false,
+ isDone: false,
+ hasSelectedIconsColorPrimary: true,
+ isSelectedInteractive: false,
+} as Args;
const argTypes = {
- defaultSlot: { control: { type: 'text' }, defaultValue: '10 / 20' },
- labelSlot: { control: { type: 'text' }, defaultValue: 'Outline Item label in slot' },
+ defaultSlot: { control: 'text' },
+ labelSlot: { control: 'text' },
size: {
- control: { type: 'select', options: Object.values(OUTLINE_ITEM_SIZES) },
- defaultValue: OUTLINE_ITEM_SIZES.SMALL,
+ control: 'select',
+ options: Object.values(OUTLINE_ITEM_SIZES),
},
backgroundColor: {
- control: { type: 'select', options: Object.values(OUTLINE_ITEM_BACKGROUND_COLORS) },
- defaultValue: OUTLINE_ITEM_BACKGROUND_COLORS.NEUTRAL_WEAK,
+ control: 'select',
+ options: Object.values(OUTLINE_ITEM_BACKGROUND_COLORS),
},
iconLeft: {
- control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
- defaultValue: null,
+ control: 'select',
+ options: [null, ...Object.keys(ICONS)],
},
iconRight: {
- control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
- defaultValue: null,
+ control: 'select',
+ options: [null, ...Object.keys(ICONS)],
},
iconRightRotation: {
- control: { type: 'select', options: [null, 90, 180, 270] },
- defaultValue: null,
+ control: 'select',
+ options: [null, 90, 180, 270],
},
index: {
control: { type: 'number' },
- defaultValue: null,
},
- label: { control: { type: 'text' }, defaultValue: 'Outline Item label' },
+ label: { control: 'text' },
isLabelUppercase: {
- control: { type: 'boolean' },
- defaultValue: false,
+ control: 'boolean',
},
- additionalText: { control: { type: 'text' }, defaultValue: '' },
+ additionalText: { control: 'text' },
state: {
- control: { type: 'select', options: Object.values(OUTLINE_ITEM_STATES) },
- defaultValue: OUTLINE_ITEM_STATES.DEFAULT,
+ control: 'select',
+ options: Object.values(OUTLINE_ITEM_STATES),
},
isSelected: {
- control: { type: 'boolean' },
- defaultValue: false,
+ control: 'boolean',
},
isDone: {
- control: { type: 'boolean' },
- defaultValue: false,
+ control: 'boolean',
},
hasSelectedIconsColorPrimary: {
- control: { type: 'boolean' },
- defaultValue: true,
+ control: 'boolean',
},
isSelectedInteractive: {
- control: { type: 'boolean' },
- defaultValue: false,
+ control: 'boolean',
},
} as ArgTypes;
diff --git a/lib/js/components/Outline/OutlineItem/OutlineItem.vue b/lib/js/components/Outline/OutlineItem/OutlineItem.vue
index 91f04e3b9..89d37b091 100644
--- a/lib/js/components/Outline/OutlineItem/OutlineItem.vue
+++ b/lib/js/components/Outline/OutlineItem/OutlineItem.vue
@@ -216,14 +216,14 @@
diff --git a/lib/js/components/Outline/OutlineSectionHeader/OutlineSectionHeader.stories.ts b/lib/js/components/Outline/OutlineSectionHeader/OutlineSectionHeader.stories.ts
index 5c07ff4e3..ae0620cd1 100644
--- a/lib/js/components/Outline/OutlineSectionHeader/OutlineSectionHeader.stories.ts
+++ b/lib/js/components/Outline/OutlineSectionHeader/OutlineSectionHeader.stories.ts
@@ -1,5 +1,5 @@
import OutlineSectionHeader from './OutlineSectionHeader.vue';
-import { ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
export default {
title: 'Components/Outline/OutlineSectionHeader',
@@ -9,7 +9,7 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { OutlineSectionHeader },
setup() {
- return { ...args };
+ return args;
},
template: `;
-const StoryTemplate: StoryFn = (args, { updateArgs }) => ({
- components: { Pagination },
- setup() {
- return { args };
- },
- methods: {
- onChangePage(currentPage) {
- updateArgs({ currentPage });
+const StoryTemplate: StoryFn = (args) => {
+ const [_, updateArgs] = useArgs();
+
+ return {
+ components: { Pagination },
+ setup() {
+ return { args };
},
- },
- template: `
+ methods: {
+ onChangePage(currentPage) {
+ updateArgs({ currentPage });
+ },
+ },
+ template: `
-
-
-
+
+
+
`,
-});
+ };
+};
export const Interactive = StoryTemplate.bind({});
const argTypes = {
- currentPage: { control: { type: 'number', min: 1 }, defaultValue: 1 },
- forceCompact: { control: { type: 'boolean' }, defaultValue: false },
- isCentered: { control: { type: 'boolean' }, defaultValue: false },
- itemsPerPage: { control: { type: 'number', min: 1 }, defaultValue: 30 },
- itemsTotalAmount: { control: { type: 'number', min: 1 }, defaultValue: 600 },
- accessory: { control: { type: 'text' }, defaultValue: 'accessory slot' },
+ currentPage: { control: { type: 'number', min: 1 } },
+ forceCompact: { control: 'boolean' },
+ isCentered: { control: 'boolean' },
+ itemsPerPage: { control: { type: 'number', min: 1 } },
+ itemsTotalAmount: { control: { type: 'number', min: 1 } },
+ accessory: { control: 'text' },
} as ArgTypes;
Interactive.argTypes = argTypes;
+Interactive.args = {
+ currentPage: 1,
+ forceCompact: false,
+ isCentered: false,
+ itemsPerPage: 30,
+ itemsTotalAmount: 600,
+ accessory: 'accessory slot',
+} as Args;
Interactive.parameters = {
design: {
diff --git a/lib/js/components/Pagination/Pagination.vue b/lib/js/components/Pagination/Pagination.vue
index e5a0e012d..438750faf 100644
--- a/lib/js/components/Pagination/Pagination.vue
+++ b/lib/js/components/Pagination/Pagination.vue
@@ -270,12 +270,13 @@ import Dropdown from '../Dropdown/Dropdown.vue';
import SelectList from '../SelectList/SelectList.vue';
import SelectListItem from '../SelectList/SelectListItem/SelectListItem.vue';
+import { defineComponent } from 'vue';
const MAX_NAVIGATION_ITEMS = 7;
const ELLIPSIS_FILL = 'ellipsis';
const FIRST_PAGE_NUMBER = 1;
-export default {
+export default defineComponent({
name: 'Pagination',
components: { IconButton, Dropdown, SelectListItem, SelectList },
props: {
@@ -412,5 +413,5 @@ export default {
close();
},
},
-};
+});
diff --git a/lib/js/components/PopOver/PopOver.stories.ts b/lib/js/components/PopOver/PopOver.stories.ts
index e5e9ac1ec..39f5d0b47 100644
--- a/lib/js/components/PopOver/PopOver.stories.ts
+++ b/lib/js/components/PopOver/PopOver.stories.ts
@@ -16,7 +16,7 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { PopOver },
setup() {
- return { ...args };
+ return args;
},
template:
'
' +
@@ -47,20 +47,20 @@ Interactive.args = {
const argTypes = {
size: {
- control: { type: 'select', options: Object.values(POP_OVER_SIZES) },
- defaultValue: POP_OVER_SIZES.SMALL,
+ control: 'select',
+ options: Object.values(POP_OVER_SIZES),
},
placement: {
- control: { type: 'select', options: Object.values(POP_OVER_PLACEMENTS) },
- defaultValue: POP_OVER_PLACEMENTS.BOTTOM,
+ control: 'select',
+ options: Object.values(POP_OVER_PLACEMENTS),
},
color: {
- control: { type: 'select', options: Object.values(POP_OVER_COLORS) },
- defaultValue: POP_OVER_COLORS.DEFAULT,
+ control: 'select',
+ options: Object.values(POP_OVER_COLORS),
},
triggerAction: {
- control: { type: 'select', options: Object.values(POP_OVER_TRIGGER_ACTIONS) },
- defaultValue: POP_OVER_TRIGGER_ACTIONS.CLICK,
+ control: 'select',
+ options: Object.values(POP_OVER_TRIGGER_ACTIONS),
},
} as ArgTypes;
diff --git a/lib/js/components/PopOver/PopOver.vue b/lib/js/components/PopOver/PopOver.vue
index 83f2a7b98..d56cd3f0f 100644
--- a/lib/js/components/PopOver/PopOver.vue
+++ b/lib/js/components/PopOver/PopOver.vue
@@ -26,8 +26,8 @@
>
![]()
-
= (args) => ({
return { args };
},
template: `
- = (args) => ({
export const Interactive = StoryTemplate.bind({});
+const args = {
+ label: '70',
+ state: PROGRESS_DONUT_CHART_STATES.DEFAULT,
+ ranges: [
+ {
+ color: PROGRESS_DONUT_CHART_RANGE_COLORS.SUCCESS,
+ start: 0,
+ length: 30,
+ },
+ {
+ color: PROGRESS_DONUT_CHART_RANGE_COLORS.INFO,
+ start: 30,
+ length: 25,
+ },
+ {
+ color: PROGRESS_DONUT_CHART_RANGE_COLORS.FAIL_GHOST,
+ start: 55,
+ length: 25,
+ },
+ ],
+} as Args;
+
const argTypes = {
label: {
- control: { type: 'text' },
- defaultValue: '70',
+ control: 'text',
},
state: {
- control: { type: 'select', options: Object.values(PROGRESS_DONUT_CHART_STATES) },
- defaultValue: PROGRESS_DONUT_CHART_STATES.DEFAULT,
+ control: 'select',
+ options: Object.values(PROGRESS_DONUT_CHART_STATES),
},
ranges: {
- control: { type: 'array' },
- defaultValue: [
- {
- color: PROGRESS_DONUT_CHART_RANGE_COLORS.SUCCESS,
- start: 0,
- length: 30,
- } as ProgressDonutChartRange,
- {
- color: PROGRESS_DONUT_CHART_RANGE_COLORS.INFO,
- start: 30,
- length: 25,
- } as ProgressDonutChartRange,
- {
- color: PROGRESS_DONUT_CHART_RANGE_COLORS.FAIL_GHOST,
- start: 55,
- length: 25,
- } as ProgressDonutChartRange,
- ],
+ control: 'object',
},
} as ArgTypes;
Interactive.argTypes = argTypes;
+Interactive.args = args;
Interactive.parameters = {
design: {
diff --git a/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue b/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue
index 1249b8f24..8e10e5e57 100644
--- a/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue
+++ b/lib/js/components/ProgressDonutChart/ProgressDonutChart.vue
@@ -226,7 +226,7 @@ import {
ProgressDonutChartRange,
ProgressDonutChartState,
} from './ProgressDonutChart.consts';
-import { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
const OFFSET_IN_DEGREES_OF_TRACK_START_POINT = 90; // 90 is to set starting point at the bottom
@@ -235,7 +235,8 @@ const PROGRESS_DONUT_CHART_STROKE_WIDTH = 4; // keep consider with $progress-don
const PROGRESS_DONUT_CHART_CIRCLE_CENTER_POINT = PROGRESS_DONUT_CHART_SIZE / 2;
const PROGRESS_DONUT_CHART_CIRCLE_RADIUS =
PROGRESS_DONUT_CHART_SIZE / 2 - PROGRESS_DONUT_CHART_STROKE_WIDTH / 2;
-export default {
+
+export default defineComponent({
name: 'ProgressDonutChart',
components: {
DsIcon,
@@ -285,5 +286,5 @@ export default {
});
},
},
-};
+});
diff --git a/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.stories.ts b/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.stories.ts
index a94ae5278..d7d0cba9a 100644
--- a/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.stories.ts
+++ b/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.stories.ts
@@ -12,6 +12,8 @@ import {
} from '../RichListItem';
import { ICON_COLORS, ICONS } from '../../Icons/Icon';
import { DsImage } from '../../../index';
+import { useArgs } from '@storybook/preview-api';
+import { withActions } from '@storybook/addon-actions/decorator';
export default {
title: 'Components/RichList/BasicRichListItem',
@@ -21,6 +23,7 @@ export default {
components: { story },
template: ";
@@ -28,11 +31,11 @@ const expandStory = (story: StoryFn, args = {}) => {
story.argTypes = {
type: {
options: Object.values(RICH_LIST_ITEM_TYPE),
- control: { type: 'select' },
+ control: 'select',
},
size: {
options: Object.values(RICH_LIST_ITEM_SIZE),
- control: { type: 'select' },
+ control: 'select',
},
layout: {
options: Object.values(RICH_LIST_ITEM_LAYOUT),
@@ -40,63 +43,63 @@ const expandStory = (story: StoryFn, args = {}) => {
},
state: {
options: Object.values(RICH_LIST_ITEM_STATE),
- control: { type: 'select' },
+ control: 'select',
},
iconColor: {
options: [null, ...Object.values(ICON_COLORS)],
- control: { type: 'select' },
+ control: 'select',
},
borderColor: {
options: [null, ...Object.values(RICH_LIST_ITEM_BORDER_COLOR)],
- control: { type: 'select' },
+ control: 'select',
},
icon: {
options: [null, ...Object.keys(ICONS)],
- control: { type: 'select' },
+ control: 'select',
},
iconColorHex: {
- control: { type: 'text' },
+ control: 'text',
},
borderColorHex: {
- control: { type: 'text' },
+ control: 'text',
},
eyebrow: {
- control: { type: 'text' },
+ control: 'text',
},
eyebrowEllipsis: {
- control: { type: 'boolean' },
+ control: 'boolean',
},
isEyebrowUppercase: {
- control: { type: 'boolean' },
+ control: 'boolean',
},
text: {
- control: { type: 'text' },
+ control: 'text',
},
textEllipsis: {
- control: { type: 'boolean' },
+ control: 'boolean',
},
supportingText: {
- control: { type: 'text' },
+ control: 'text',
},
supportingTextEllipsis: {
- control: { type: 'boolean' },
+ control: 'boolean',
},
metadata: {
- control: { type: 'text' },
+ control: 'text',
},
actions: {
- control: { type: 'text' },
+ control: 'text',
},
draggableIconClassName: {
- control: { type: 'text' },
+ control: 'text',
},
backgroundColor: {
options: [null, ...Object.values(RICH_LIST_ITEM_BACKGROUND_COLOR)],
- control: { type: 'select' },
+ control: 'select',
},
elevation: {
options: [null, ...Object.values(RICH_LIST_ITEM_ELEVATION)],
- control: { type: 'select' },
+ control: 'select',
},
} as ArgTypes;
@@ -149,67 +152,73 @@ const expandStory = (story: StoryFn, args = {}) => {
return story;
};
-const InteractiveStoryTemplate: StoryFn = (args, { updateArgs }) => ({
- components: { BasicRichListItem },
- setup() {
- return { ...args };
- },
- data() {
- return {
- ICONS: Object.freeze(ICONS),
- };
- },
- methods: {
- updateIsSelected(isSelected) {
- updateArgs({ isSelected });
+const InteractiveStoryTemplate: StoryFn = (args) => {
+ const [_, updateArgs] = useArgs();
+
+ return {
+ components: { BasicRichListItem },
+ setup() {
+ return args;
},
- },
- template: `
-
-
-
-
-
-
-
- `,
-});
+ data() {
+ return {
+ ICONS: Object.freeze(ICONS),
+ };
+ },
+ methods: {
+ updateIsSelected(isSelected) {
+ updateArgs({ isSelected });
+ },
+ },
+ template: `
+
+
+
+
+
+
+
+ `,
+ };
+};
export const Interactive = InteractiveStoryTemplate.bind({});
expandStory(Interactive);
-const WithMediaStoryTemplate: StoryFn = (args, { updateArgs }) => {
+const WithMediaStoryTemplate: StoryFn = (args) => {
+ const [_, updateArgs] = useArgs();
+
return {
components: { BasicRichListItem, DsImage },
setup() {
- return { ...args };
+ return args;
},
data() {
return {
diff --git a/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue b/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue
index 54e1ec722..7b303f91a 100644
--- a/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue
+++ b/lib/js/components/RichList/BasicRichListItem/BasicRichListItem.vue
@@ -98,7 +98,7 @@ import RichListItem, {
RichListItemType,
} from '../RichListItem';
import DsTextGroup from '../../TextGroup/TextGroup.vue';
-import { PropType, toRaw } from 'vue';
+import { defineComponent, PropType, toRaw } from 'vue';
import { ICON_COLORS, IconColor, IconItem, ICONS } from '../../Icons/Icon';
import {
TEXT_GROUP_SIZES,
@@ -107,7 +107,7 @@ import {
TextGroupState,
} from '../../TextGroup';
-export default {
+export default defineComponent({
name: 'BasicRichListItem',
components: {
DsTextGroup,
@@ -270,5 +270,5 @@ export default {
return TEXT_GROUP_STATES.DEFAULT;
},
},
-};
+});
diff --git a/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.stories.ts b/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.stories.ts
index 87fbc3c27..35c9c9cd4 100644
--- a/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.stories.ts
+++ b/lib/js/components/RichList/GroupRichListItem/GroupRichListItem.stories.ts
@@ -6,6 +6,7 @@ import RichListItem, {
RICH_LIST_ITEM_TYPE,
} from '../RichListItem';
import Divider from '../../Divider';
+import { useArgs } from '@storybook/preview-api';
import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
import {
@@ -34,6 +35,7 @@ const args = {
parent_size: RICH_LIST_ITEM_SIZE.MEDIUM,
parent_elevation: null,
parent_isDimmed: false,
+ parent_isDraggable: false,
parent_hasDraggableHandler: true,
parent_icon: null,
parent_iconColor: ICON_COLORS.NEUTRAL_WEAK,
@@ -47,6 +49,7 @@ const args = {
child_size: RICH_LIST_ITEM_SIZE.MEDIUM,
child_elevation: null,
child_isDimmed: false,
+ child_isDraggable: false,
child_hasDraggableHandler: true,
child_icon: null,
child_iconColor: ICON_COLORS.NEUTRAL_WEAK,
@@ -61,62 +64,62 @@ const args = {
const argTypes = {
borderColor: {
options: [null, ...Object.values(GROUP_RICH_LIST_ITEM_BORDER_COLOR)],
- control: { type: 'select' },
+ control: 'select',
},
borderColorHex: {
- control: { type: 'text' },
+ control: 'text',
},
backgroundColor: {
options: Object.values(GROUP_RICH_LIST_ITEM_BACKGROUND_COLOR),
- control: { type: 'select' },
+ control: 'select',
},
parent_state: {
options: Object.values(RICH_LIST_ITEM_STATE),
- control: { type: 'select' },
+ control: 'select',
},
parent_size: {
options: Object.values(RICH_LIST_ITEM_SIZE),
- control: { type: 'select' },
+ control: 'select',
},
parent_iconColor: {
options: Object.values(ICON_COLORS),
- control: { type: 'select' },
+ control: 'select',
},
parent_icon: {
options: [null, ...Object.keys(ICONS)],
- control: { type: 'select' },
+ control: 'select',
},
parent_iconColorHex: {
- control: { type: 'text' },
+ control: 'text',
},
parent_elevation: {
options: [null, ...Object.values(RICH_LIST_ITEM_ELEVATION)],
- control: { type: 'select' },
+ control: 'select',
},
child_state: {
options: Object.values(RICH_LIST_ITEM_STATE),
- control: { type: 'select' },
+ control: 'select',
},
child_size: {
options: Object.values(RICH_LIST_ITEM_SIZE),
- control: { type: 'select' },
+ control: 'select',
},
child_iconColor: {
options: Object.values(ICON_COLORS),
- control: { type: 'select' },
+ control: 'select',
},
child_icon: {
options: [null, ...Object.keys(ICONS)],
- control: { type: 'select' },
+ control: 'select',
},
child_iconColorHex: {
- control: { type: 'text' },
+ control: 'text',
},
child_elevation: {
options: [null, ...Object.values(RICH_LIST_ITEM_ELEVATION)],
- control: { type: 'select' },
+ control: 'select',
},
} as ArgTypes;
@@ -136,11 +139,13 @@ const expandStory = (story) => {
};
// # OneChild
-const OneChildStoryTemplate: StoryFn = (args, { updateArgs }) => {
+const OneChildStoryTemplate: StoryFn = (args) => {
+ const [_, updateArgs] = useArgs();
+
return {
components: { GroupRichListItem, RichListItem, Divider },
setup() {
- return { ...args };
+ return args;
},
data() {
return {
@@ -217,11 +222,13 @@ const OneChildStoryTemplate: StoryFn = (args, { update
export const OneChild = expandStory(OneChildStoryTemplate.bind({}));
// # MultipleChild
-const MultipleChildStoryTemplate: StoryFn = (args, { updateArgs }) => {
+const MultipleChildStoryTemplate: StoryFn = (args) => {
+ const [_, updateArgs] = useArgs();
+
return {
components: { GroupRichListItem, RichListItem, Divider },
setup() {
- return { ...args };
+ return args;
},
data() {
return {
@@ -246,7 +253,6 @@ const MultipleChildStoryTemplate: StoryFn = (args, { u
template: `
diff --git a/lib/js/components/RichList/RichListItem/RichListItem.stories.ts b/lib/js/components/RichList/RichListItem/RichListItem.stories.ts
index 09b396099..89c13d522 100644
--- a/lib/js/components/RichList/RichListItem/RichListItem.stories.ts
+++ b/lib/js/components/RichList/RichListItem/RichListItem.stories.ts
@@ -12,6 +12,8 @@ import {
} from './RichListItem.consts';
import { ICON_COLORS, ICONS } from '../../Icons/Icon';
import { DsImage } from '../../../index';
+import { useArgs } from '@storybook/preview-api';
+import { withActions } from '@storybook/addon-actions/decorator';
export default {
title: 'Components/RichList/RichListItem',
@@ -21,6 +23,7 @@ export default {
components: { story },
template: ";
@@ -28,11 +31,11 @@ const expandStory = (story: StoryFn, args = {}) => {
story.argTypes = {
type: {
options: Object.values(RICH_LIST_ITEM_TYPE),
- control: { type: 'select' },
+ control: 'select',
},
size: {
options: Object.values(RICH_LIST_ITEM_SIZE),
- control: { type: 'select' },
+ control: 'select',
},
layout: {
options: Object.values(RICH_LIST_ITEM_LAYOUT),
@@ -40,45 +43,45 @@ const expandStory = (story: StoryFn, args = {}) => {
},
state: {
options: Object.values(RICH_LIST_ITEM_STATE),
- control: { type: 'select' },
+ control: 'select',
},
iconColor: {
options: Object.values(ICON_COLORS),
- control: { type: 'select' },
+ control: 'select',
},
borderColor: {
options: [null, ...Object.values(RICH_LIST_ITEM_BORDER_COLOR)],
- control: { type: 'select' },
+ control: 'select',
},
icon: {
options: [null, ...Object.keys(ICONS)],
- control: { type: 'select' },
+ control: 'select',
},
iconColorHex: {
- control: { type: 'text' },
+ control: 'text',
},
borderColorHex: {
- control: { type: 'text' },
+ control: 'text',
},
content: {
- control: { type: 'text' },
+ control: 'text',
},
metadata: {
- control: { type: 'text' },
+ control: 'text',
},
actions: {
- control: { type: 'text' },
+ control: 'text',
},
draggableIconClassName: {
- control: { type: 'text' },
+ control: 'text',
},
backgroundColor: {
options: [null, ...Object.values(RICH_LIST_ITEM_BACKGROUND_COLOR)],
- control: { type: 'select' },
+ control: 'select',
},
elevation: {
options: [null, ...Object.values(RICH_LIST_ITEM_ELEVATION)],
- control: { type: 'select' },
+ control: 'select',
},
} as ArgTypes;
@@ -123,11 +126,13 @@ const expandStory = (story: StoryFn, args = {}) => {
return story;
};
-const InteractiveStoryTemplate: StoryFn = (args, { updateArgs }) => {
+const InteractiveStoryTemplate: StoryFn = (args) => {
+ const [_, updateArgs] = useArgs();
+
return {
components: { RichListItem },
setup() {
- return { ...args };
+ return args;
},
data() {
return {
@@ -178,11 +183,13 @@ const InteractiveStoryTemplate: StoryFn = (args, { updateAr
export const Interactive = InteractiveStoryTemplate.bind({});
expandStory(Interactive);
-const WithMediaStoryTemplate: StoryFn = (args, { updateArgs }) => {
+const WithMediaStoryTemplate: StoryFn = (args) => {
+ const [_, updateArgs] = useArgs();
+
return {
components: { RichListItem, DsImage },
setup() {
- return { ...args };
+ return args;
},
data() {
return {
diff --git a/lib/js/components/RichList/RichListItem/RichListItem.vue b/lib/js/components/RichList/RichListItem/RichListItem.vue
index 271a473dd..f23e26bbd 100644
--- a/lib/js/components/RichList/RichListItem/RichListItem.vue
+++ b/lib/js/components/RichList/RichListItem/RichListItem.vue
@@ -453,7 +453,7 @@ import DsIcon, {
IconItem,
ICONS,
} from '../../../components/Icons/Icon';
-import { PropType, toRaw } from 'vue';
+import { defineComponent, PropType, toRaw } from 'vue';
import {
RICH_LIST_ITEM_BACKGROUND_COLOR,
RICH_LIST_ITEM_BORDER_COLOR,
@@ -471,7 +471,7 @@ import {
RichListItemType,
} from './RichListItem.consts';
-export default {
+export default defineComponent({
name: 'RichListItem',
components: {
DsCheckbox,
@@ -659,5 +659,5 @@ export default {
return !!this.$slots.media;
},
},
-};
+});
diff --git a/lib/js/components/SectionTitle/SectionTitle.stories.ts b/lib/js/components/SectionTitle/SectionTitle.stories.ts
index c8e1c9bab..a7a93750b 100644
--- a/lib/js/components/SectionTitle/SectionTitle.stories.ts
+++ b/lib/js/components/SectionTitle/SectionTitle.stories.ts
@@ -8,10 +8,10 @@ export default {
component: SectionTitle,
} as Meta;
-const StoryTemplate: StoryFn = (args, { updateArgs }) => ({
+const StoryTemplate: StoryFn = (args) => ({
components: { SectionTitle },
setup() {
- return { ...args };
+ return args;
},
template: ` = (args) => ({
SelectListSectionTitle,
},
setup() {
- return { ...args };
+ return args;
},
template: `
diff --git a/lib/js/components/SelectList/SelectList.vue b/lib/js/components/SelectList/SelectList.vue
index c62eb35a3..fda5e5b84 100644
--- a/lib/js/components/SelectList/SelectList.vue
+++ b/lib/js/components/SelectList/SelectList.vue
@@ -13,7 +13,9 @@
diff --git a/lib/js/components/SelectList/SelectListItem/SelectListItem.stories.ts b/lib/js/components/SelectList/SelectListItem/SelectListItem.stories.ts
index 4343b86d6..b269a9e65 100644
--- a/lib/js/components/SelectList/SelectListItem/SelectListItem.stories.ts
+++ b/lib/js/components/SelectList/SelectListItem/SelectListItem.stories.ts
@@ -16,7 +16,7 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { SelectListItem },
setup() {
- return { ...args };
+ return args;
},
template: `
diff --git a/lib/js/components/SelectList/SelectListItemDivider/SelectListItemDivider.vue b/lib/js/components/SelectList/SelectListItemDivider/SelectListItemDivider.vue
index 0b1c7c763..d0a3db15a 100644
--- a/lib/js/components/SelectList/SelectListItemDivider/SelectListItemDivider.vue
+++ b/lib/js/components/SelectList/SelectListItemDivider/SelectListItemDivider.vue
@@ -17,10 +17,12 @@
diff --git a/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.stories.ts b/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.stories.ts
index 2af3a3b92..8ef8d5655 100644
--- a/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.stories.ts
+++ b/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.stories.ts
@@ -3,16 +3,18 @@ import { TILE_STATES } from '../../Tile';
import { Args, Meta, StoryFn } from '@storybook/vue3';
import { args, argTypes, data, template } from '../../Tile/Tile.sb.shared';
+import { withActions } from '@storybook/addon-actions/decorator';
export default {
title: 'Components/SelectList/SelectListItemTile',
component: SelectListItemTile,
+ decorators: [withActions],
} as Meta;
const StoryTemplate: StoryFn = (args) => ({
components: { SelectListItemTile },
setup() {
- return { ...args };
+ return args;
},
template: template('select-list-item-tile'),
data,
@@ -36,7 +38,7 @@ Interactive.parameters = {
const StoryStaticTemplate: StoryFn = (args) => ({
components: { SelectListItemTile },
setup() {
- return { ...args };
+ return args;
},
template: template('select-list-item-tile'),
data,
@@ -47,6 +49,7 @@ export const Static = StoryStaticTemplate.bind({});
Static.argTypes = argTypes;
Static.args = {
+ ...args,
interactive: false,
iconLeft: null,
iconRight: null,
diff --git a/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.vue b/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.vue
index 562195a63..6e9e2af2a 100644
--- a/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.vue
+++ b/lib/js/components/SelectList/SelectListItemTile/SelectListItemTile.vue
@@ -28,11 +28,13 @@
import Tile from '../../Tile';
import { props } from '../../Tile/Tile.shared';
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
name: 'SelectListItemTile',
components: {
DsTile: Tile,
},
props,
-};
+});
diff --git a/lib/js/components/SelectList/SelectListItemToggle/SelectListItemToggle.stories.ts b/lib/js/components/SelectList/SelectListItemToggle/SelectListItemToggle.stories.ts
index 750234805..70e8d8a14 100644
--- a/lib/js/components/SelectList/SelectListItemToggle/SelectListItemToggle.stories.ts
+++ b/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;
-const StoryTemplate: StoryFn = (args, { updateArgs }) => ({
- components: { SelectListItemToggle },
- setup() {
- return { ...args };
- },
- template: `
- = (args) => {
+ const [_, updateArgs] = useArgs();
+
+ return {
+ components: { SelectListItemToggle },
+ setup() {
+ return args;
},
- },
-});
+ template: `
+ = (args) => ({
components: { SelectList, SelectListSectionTitle },
setup() {
- return { ...args };
+ return args;
},
template: `
-
- `,
+
+ `,
});
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: {
diff --git a/lib/js/components/SelectList/SelectListSectionTitle/SelectListSectionTitle.vue b/lib/js/components/SelectList/SelectListSectionTitle/SelectListSectionTitle.vue
index 36bd975d4..87f6e5ca1 100644
--- a/lib/js/components/SelectList/SelectListSectionTitle/SelectListSectionTitle.vue
+++ b/lib/js/components/SelectList/SelectListSectionTitle/SelectListSectionTitle.vue
@@ -27,7 +27,9 @@
diff --git a/lib/js/components/SelectionTile/SelectionTile.stories.ts b/lib/js/components/SelectionTile/SelectionTile.stories.ts
index 5f5e12d97..58080a216 100644
--- a/lib/js/components/SelectionTile/SelectionTile.stories.ts
+++ b/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: ";
-const StoryTemplate: StoryFn = (args, { updateArgs }) => ({
- components: { SelectionTile },
- setup() {
- return { ...args };
- },
- methods: {
- onIsSelectedUpdated(isSelected) {
- updateArgs({
- isSelected,
- });
+const StoryTemplate: StoryFn = (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: `
- = (args) => ({
components: { DsSkeleton },
setup() {
- return { ...args };
+ return args;
},
template: `
{{ titleText }}
- {{ subtitleText }}
+ {{ titleText }}
+ {{ subtitleText }}
@@ -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: {
diff --git a/lib/js/components/Statuses/AccessStatus/AccessStatus.stories.ts b/lib/js/components/Statuses/AccessStatus/AccessStatus.stories.ts
index a3f2237ff..d71229734 100644
--- a/lib/js/components/Statuses/AccessStatus/AccessStatus.stories.ts
+++ b/lib/js/components/Statuses/AccessStatus/AccessStatus.stories.ts
@@ -11,7 +11,7 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { AccessStatus },
setup() {
- return { ...args };
+ return args;
},
template: ` = (args) => ({
components: { BlockadeStatus },
setup() {
- return { ...args };
+ return args;
},
template: `;
-const StoryTemplate: StoryFn = (args, { updateArgs }) => ({
- components: { SurveyQuestionOpenEnded },
- setup() {
- return { ...args };
- },
- // TODO typing in textarea looses focus
- template:
- '' +
- '' +
- ' ',
- methods: {
- explanationUpdate(value) {
- updateArgs({ value });
+const StoryTemplate: StoryFn = (args) => {
+ const [_, updateArgs] = useArgs();
+
+ return {
+ components: { SurveyQuestionOpenEnded },
+ setup() {
+ return args;
},
- },
-});
+ // TODO typing in textarea looses focus
+ template:
+ '' +
+ '' +
+ ' ',
+ 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;
diff --git a/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue b/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue
index 83dbe8905..7b5071ef2 100644
--- a/lib/js/components/SurveyQuestions/SurveyQuestionOpenEnded/SurveyQuestionOpenEnded.vue
+++ b/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),
};
},
-};
+});
diff --git a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts
index 0df378bc9..491a784ca 100644
--- a/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts
+++ b/lib/js/components/SurveyQuestions/SurveyQuestionScale/SurveyQuestionScale.stories.ts
@@ -3,30 +3,35 @@ import { SURVEY_TOGGLE_MEANINGS } from '../../SurveyToggle';
import { SURVEY_QUESTION_SCALE_CONTAINERS, SURVEY_QUESTION_STATES } from '../SurveyQuestion.consts';
import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
+import { useArgs } from '@storybook/preview-api';
export default {
title: 'Components/SurveyQuestions/SurveyQuestionScale',
component: SurveyQuestionScale,
} as Meta;
-const StoryTemplate: StoryFn = (args, { updateArgs }) => ({
- components: { SurveyQuestionScale },
- setup() {
- return { ...args };
- },
- template:
- '' +
- '' +
- ' ',
- methods: {
- elaborationUpdate(elaborationValue) {
- updateArgs({ elaborationValue });
+const StoryTemplate: StoryFn = (args) => {
+ const [_, updateArgs] = useArgs();
+
+ return {
+ components: { SurveyQuestionScale },
+ setup() {
+ return args;
},
- selectedValueUpdate(selectedValue) {
- updateArgs({ selectedValue });
+ template:
+ '' +
+ '' +
+ ' ',
+ methods: {
+ elaborationUpdate(elaborationValue) {
+ updateArgs({ elaborationValue });
+ },
+ selectedValueUpdate(selectedValue) {
+ updateArgs({ selectedValue });
+ },
},
- },
-});
+ };
+};
export const Interactive = StoryTemplate.bind({});
@@ -38,6 +43,7 @@ const args = {
' = (args, { updateArgs }) => ({
- components: { SurveyQuestionScale },
- setup() {
- return { ...args };
- },
- template:
- '' +
- '' +
- ' ',
- methods: {
- elaborationUpdate(elaborationValue) {
- updateArgs({ elaborationValue });
+const StoryLimitedWidthTemplate: StoryFn = (args) => {
+ const [_, updateArgs] = useArgs();
+
+ return {
+ components: { SurveyQuestionScale },
+ setup() {
+ return args;
},
- selectedValueUpdate(selectedValue) {
- updateArgs({ selectedValue });
+ template:
+ '' +
+ '' +
+ ' ',
+ methods: {
+ elaborationUpdate(elaborationValue) {
+ updateArgs({ elaborationValue });
+ },
+ selectedValueUpdate(selectedValue) {
+ updateArgs({ selectedValue });
+ },
},
- },
-});
+ };
+};
export const LimitedWidth = StoryLimitedWidthTemplate.bind({});
LimitedWidth.argTypes = {
...argTypesDisabled,
containers: {
- control: { type: 'select' },
+ control: 'select',
options: Object.values(SURVEY_QUESTION_SCALE_CONTAINERS),
},
} as ArgTypes;
@@ -146,6 +157,8 @@ LimitedWidth.args = {
' = (args, { updateArgs }) => ({
- components: { SurveyQuestionScale },
- setup() {
- return { ...args };
- },
- data() {
- return { elaboration: '' };
- },
- template:
- ' = (args) => {
+ const [_, updateArgs] = useArgs();
+
+ return {
+ components: { SurveyQuestionScale },
+ setup() {
+ return args;
},
- },
-});
+ data() {
+ return { elaboration: '' };
+ },
+ template:
+ ' = (args) => ({
components: { SurveyToggle },
setup() {
- return { ...args };
+ return args;
},
template:
' = (args) => ({
export const Interactive = StoryTemplate.bind({});
-const args = {} as Args;
+const args = {
+ label: 'label',
+ contentText: '1',
+ meaning: SURVEY_TOGGLE_MEANINGS.PRIMARY,
+ status: SURVEY_TOGGLE_STATUSES.DEFAULT,
+ state: SURVEY_TOGGLE_STATES.DEFAULT,
+ selectedIcon: 'FA_CHECK_SOLID',
+} as Args;
const argTypes = {
- label: { control: { type: 'text' }, defaultValue: 'label' },
- contentText: { control: { type: 'text' }, defaultValue: '1' },
+ label: { control: 'text' },
+ contentText: { control: 'text' },
meaning: {
- control: { type: 'select', options: Object.values(SURVEY_TOGGLE_MEANINGS) },
- defaultValue: SURVEY_TOGGLE_MEANINGS.PRIMARY,
+ control: 'select',
+ options: Object.values(SURVEY_TOGGLE_MEANINGS),
},
status: {
- control: { type: 'select', options: Object.values(SURVEY_TOGGLE_STATUSES) },
- defaultValue: SURVEY_TOGGLE_STATUSES.DEFAULT,
+ control: 'select',
+ options: Object.values(SURVEY_TOGGLE_STATUSES),
},
state: {
- control: { type: 'select', options: Object.values(SURVEY_TOGGLE_STATES) },
- defaultValue: SURVEY_TOGGLE_STATES.DEFAULT,
+ control: 'select',
+ options: Object.values(SURVEY_TOGGLE_STATES),
},
selectedIcon: {
- control: { type: 'select', options: Object.keys(ICONS) },
- defaultValue: 'FA_CHECK_SOLID',
+ control: 'select',
+ options: Object.keys(ICONS),
},
} as ArgTypes;
diff --git a/lib/js/components/SurveyToggle/SurveyToggle.vue b/lib/js/components/SurveyToggle/SurveyToggle.vue
index 087e860d1..2990c9c01 100644
--- a/lib/js/components/SurveyToggle/SurveyToggle.vue
+++ b/lib/js/components/SurveyToggle/SurveyToggle.vue
@@ -224,7 +224,9 @@ import {
} from './SurveyToggle.consts';
import DsIcon, { ICON_SIZES, ICONS } from '../Icons/Icon';
-export default {
+import { defineComponent } from 'vue';
+
+export default defineComponent({
name: 'SurveyToggle',
components: {
DsIcon,
@@ -314,5 +316,5 @@ export default {
return this.hovered;
},
},
-};
+});
diff --git a/lib/js/components/Switch/Switch.stories.ts b/lib/js/components/Switch/Switch.stories.ts
index 9785c6885..9db21e997 100644
--- a/lib/js/components/Switch/Switch.stories.ts
+++ b/lib/js/components/Switch/Switch.stories.ts
@@ -2,19 +2,21 @@ import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
import DsSwitch from './Switch.vue';
import Icon, { ICONS } from '../Icons/Icon';
import { SWITCH_RADIUSES, SWITCH_SIDE, SWITCH_SIZES, SWITCH_STATE } from './Switch.consts';
+import { withActions } from '@storybook/addon-actions/decorator';
export default {
title: 'Components/Switch',
component: DsSwitch,
+ decorators: [withActions],
} as Meta;
-const StoryTemplate: StoryFn = (args, { updateArgs }) => ({
+const StoryTemplate: StoryFn = (args) => ({
components: {
DsSwitch,
Icon,
},
setup() {
- return { ...args };
+ return args;
},
methods: {
onSelectedUpdated(side) {
@@ -58,28 +60,28 @@ const args = {
const argTypes = {
size: {
- control: { type: 'select', options: Object.values(SWITCH_SIZES) },
- defaultValue: SWITCH_SIZES.MEDIUM,
+ control: 'select',
+ options: Object.values(SWITCH_SIZES),
},
radius: {
- control: { type: 'select', options: Object.values(SWITCH_RADIUSES) },
- defaultValue: SWITCH_RADIUSES.CAPSULE,
+ control: 'select',
+ options: Object.values(SWITCH_RADIUSES),
},
iconLeft: {
- control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
- defaultValue: null,
+ control: 'select',
+ options: [null, ...Object.keys(ICONS)],
},
iconRight: {
- control: { type: 'select', options: [null, ...Object.keys(ICONS)] },
- defaultValue: null,
+ control: 'select',
+ options: [null, ...Object.keys(ICONS)],
},
state: {
- control: { type: 'select', options: Object.values(SWITCH_STATE) },
- defaultValue: SWITCH_STATE.DEFAULT,
+ control: 'select',
+ options: Object.values(SWITCH_STATE),
},
selectedSide: {
- control: { type: 'select', options: Object.values(SWITCH_SIDE) },
- defaultValue: SWITCH_SIDE.LEFT,
+ control: 'select',
+ options: Object.values(SWITCH_SIDE),
},
} as ArgTypes;
diff --git a/lib/js/components/Switch/Switch.vue b/lib/js/components/Switch/Switch.vue
index 4d1c82190..7a2042c11 100644
--- a/lib/js/components/Switch/Switch.vue
+++ b/lib/js/components/Switch/Switch.vue
@@ -226,7 +226,7 @@ $switch-transition: all $default-transition-time ease-out;
diff --git a/lib/js/components/TabItem/TabItem.stories.ts b/lib/js/components/TabItem/TabItem.stories.ts
index 80b75f83b..20277b1c8 100644
--- a/lib/js/components/TabItem/TabItem.stories.ts
+++ b/lib/js/components/TabItem/TabItem.stories.ts
@@ -12,7 +12,7 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { TabItem },
setup() {
- return { ...args };
+ return args;
},
template:
' = (args) => ({
export const Interactive = StoryTemplate.bind({});
const args = {
+ icon: null,
+ size: 'MEDIUM',
+ label: 'Tab item',
isSelected: false,
+ labelEllipsis: false,
} as Args;
const argTypes = {
icon: {
- control: { type: 'select', options: [...Object.keys(ICONS), null] },
- defaultValue: null,
+ control: 'select',
+ options: [...Object.keys(ICONS), null],
},
size: {
- control: { type: 'select', options: Object.keys(TAB_ITEM_SIZES) },
- defaultValue: 'MEDIUM',
+ control: 'select',
+ options: Object.keys(TAB_ITEM_SIZES),
},
label: {
- control: { type: 'text' },
- defaultValue: 'Tab item',
+ control: 'text',
},
isSelected: {
- control: { type: 'boolean' },
- defaultValue: false,
+ control: 'boolean',
},
labelEllipsis: {
- control: { type: 'boolean' },
- defaultValue: false,
+ control: 'boolean',
},
} as ArgTypes;
diff --git a/lib/js/components/TabItem/TabItem.vue b/lib/js/components/TabItem/TabItem.vue
index f470038e0..627508e72 100644
--- a/lib/js/components/TabItem/TabItem.vue
+++ b/lib/js/components/TabItem/TabItem.vue
@@ -95,10 +95,10 @@
diff --git a/lib/js/components/TextGroup/TextGroup.stories.ts b/lib/js/components/TextGroup/TextGroup.stories.ts
index 6f6ae5ce8..5079febc7 100644
--- a/lib/js/components/TextGroup/TextGroup.stories.ts
+++ b/lib/js/components/TextGroup/TextGroup.stories.ts
@@ -1,4 +1,4 @@
-import { Args, Meta, StoryFn } from '@storybook/vue3';
+import { Args, ArgTypes, Meta, StoryFn } from '@storybook/vue3';
import DsDivider from '../Divider/Divider.vue';
import DsTextGroup from './TextGroup.vue';
import {
@@ -16,7 +16,7 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { DsDivider, DsTextGroup },
setup() {
- return { ...args };
+ return args;
},
template: `
-
@@ -66,9 +67,9 @@ import { ItemsListsItem, TOKENS_TYPES } from './TokenTypes';
import { Value } from '../utils/type.utils';
import ItemsColor from './ItemsColor.vue';
import ItemsTypography from './ItemsTypography.vue';
-import { PropType } from 'vue';
+import { defineComponent, PropType } from 'vue';
-export default {
+export default defineComponent({
name: 'ItemsList',
components: {
ItemsColor,
@@ -110,5 +111,5 @@ export default {
return itemsLocal;
},
},
-};
+});
diff --git a/lib/js/styles/ItemsTypography.vue b/lib/js/styles/ItemsTypography.vue
index a574e8c16..e3d4bd921 100644
--- a/lib/js/styles/ItemsTypography.vue
+++ b/lib/js/styles/ItemsTypography.vue
@@ -27,12 +27,12 @@
diff --git a/lib/js/styles/TypographyTokensLms/TypographyTokensLms.stories.ts b/lib/js/styles/TypographyTokensLms/TypographyTokensLms.stories.ts
index 23663eba2..d0827e470 100644
--- a/lib/js/styles/TypographyTokensLms/TypographyTokensLms.stories.ts
+++ b/lib/js/styles/TypographyTokensLms/TypographyTokensLms.stories.ts
@@ -12,7 +12,7 @@ export default {
const StoryTemplate: StoryFn = (args) => ({
components: { ItemsList },
setup() {
- return { ...args };
+ return args;
},
template: `
= (args) => ({
components: { ItemsList },
setup() {
- return { ...args };
+ return args;
},
template: `
Jak ocenić, czy slajdy i diagramy były zrozumiałe?
\nWyczerpujące materiały dają poczucie pełnego zrozumienia, przy jednoczesnym usystematyzowaniu informacji. Wpływa na to nie tylko ich jakość, ale też ilość.
',
placeholder: 'Wpisz swoją odpowiedź',
containers: SURVEY_QUESTION_SCALE_CONTAINERS.TWO,
+ selectedValue: null,
scaleOptions: [
{
value: '1',
@@ -70,20 +76,21 @@ const args = {
standalone: true,
},
],
+ state: SURVEY_QUESTION_STATES.DEFAULT,
} as Args;
const argTypes = {
- elaborationValue: { control: { type: 'text' } },
+ elaborationValue: { control: 'text' },
selectedValue: { control: false },
- explanation: { control: { type: 'text' } },
+ explanation: { control: 'text' },
containers: {
- control: { type: 'select' },
+ control: 'select',
options: Object.values(SURVEY_QUESTION_SCALE_CONTAINERS),
},
- scaleOptions: { control: { type: 'object' } },
+ scaleOptions: { control: 'object' },
state: {
- control: { type: 'select', options: Object.values(SURVEY_QUESTION_STATES) },
- defaultValue: SURVEY_QUESTION_STATES.DEFAULT,
+ control: 'select',
+ options: Object.values(SURVEY_QUESTION_STATES),
},
} as ArgTypes;
@@ -110,30 +117,34 @@ const argTypesDisabled = {
'select-change': { control: false },
} as ArgTypes;
-const StoryLimitedWidthTemplate: StoryFnJak ocenić, czy slajdy i diagramy były zrozumiałe?
\nWyczerpujące materiały dają poczucie pełnego zrozumienia, przy jednoczesnym usystematyzowaniu informacji. Wpływa na to nie tylko ich jakość, ale też ilość.
',
placeholder: 'Wpisz swoją odpowiedź',
containers: SURVEY_QUESTION_SCALE_CONTAINERS.TWO,
+ state: SURVEY_QUESTION_STATES.DEFAULT,
+ selectedValue: null,
scaleOptions: [
{
value: '1',
@@ -180,34 +193,39 @@ LimitedWidth.args = {
],
} as Args;
-const StorySevenOptionsTemplate: StoryFn