From af166656eed90ef1a49b23fb9fe5a08308c92cc4 Mon Sep 17 00:00:00 2001 From: Eddie Ferrer Date: Tue, 26 Nov 2024 10:09:43 -0700 Subject: [PATCH] fix: additional story refactoring for vue3 storybook 8 --- .../vue/stories/KvFlag.stories.js | 8 +- .../stories/KvLoanProgressGroup.stories.js | 4 +- .../vue/stories/KvLoanUse.stories.js | 12 +- .../vue/stories/KvMap.stories.js | 19 +- .../vue/stories/KvMaterialIcon.stories.js | 18 +- .../vue/stories/KvPagination.stories.js | 10 +- .../vue/stories/KvPieChart.stories.js | 6 +- .../vue/stories/KvProgressBar.stories.js | 11 +- .../vue/stories/KvSideSheet.stories.js | 3 +- .../vue/stories/KvTextLink.stories.js | 14 +- .../vue/stories/KvThemeProvider.stories.js | 13 +- .../vue/stories/KvToast.stories.js | 26 +- .../vue/stories/KvTreeMapChart.stories.js | 6 +- .../vue/stories/KvWideLoanCard.stories.js | 20 +- package-lock.json | 63426 +++++++--------- 15 files changed, 26693 insertions(+), 36903 deletions(-) diff --git a/@kiva/kv-components/vue/stories/KvFlag.stories.js b/@kiva/kv-components/vue/stories/KvFlag.stories.js index bdfe052f..15c9fd00 100644 --- a/@kiva/kv-components/vue/stories/KvFlag.stories.js +++ b/@kiva/kv-components/vue/stories/KvFlag.stories.js @@ -12,7 +12,9 @@ const story = (args) => { setup() { return { args: templateArgs }; }, template: `
- + + +
`, }); @@ -25,9 +27,9 @@ export const InlineSvg = story({ country: 'TO' }); // SVG based on the country code with custom width export const InlineSvgCustomWidth = story({ country: 'DE', widthOverride: '40px' }); -// SVG Sqaure based on the country code +// SVG Square based on the country code export const SquareInlineSvg = story({ country: 'ME', aspectRatio: '1x1', showName: true }); -// SVG Sqaure based on the country code with custom width +// SVG Square based on the country code with custom width export const SquareInlineSvgCustomWidth = story({ country: 'SA', inlineSvg: true, diff --git a/@kiva/kv-components/vue/stories/KvLoanProgressGroup.stories.js b/@kiva/kv-components/vue/stories/KvLoanProgressGroup.stories.js index b744e315..225404b1 100644 --- a/@kiva/kv-components/vue/stories/KvLoanProgressGroup.stories.js +++ b/@kiva/kv-components/vue/stories/KvLoanProgressGroup.stories.js @@ -24,6 +24,6 @@ const story = (args) => { export const Default = story(); -export const LowAmount = story({ moneyLeft: 5, progressPercent: 0.9 }); +export const LowAmount = story({ moneyLeft: '5', progressPercent: 0.9 }); -export const HighAmount = story({ moneyLeft: 150, progressPercent: 0.5 }); +export const HighAmount = story({ moneyLeft: '150', progressPercent: 0.5 }); diff --git a/@kiva/kv-components/vue/stories/KvLoanUse.stories.js b/@kiva/kv-components/vue/stories/KvLoanUse.stories.js index f0c1c794..e06bedf1 100644 --- a/@kiva/kv-components/vue/stories/KvLoanUse.stories.js +++ b/@kiva/kv-components/vue/stories/KvLoanUse.stories.js @@ -6,19 +6,13 @@ export default { }; const story = (args) => { - const template = (_args, { argTypes }) => ({ + const template = (templateArgs, { argTypes }) => ({ props: Object.keys(argTypes), components: { KvLoanUse }, + setup() { return { args: { ...templateArgs } }; }, template: ` `, }); diff --git a/@kiva/kv-components/vue/stories/KvMap.stories.js b/@kiva/kv-components/vue/stories/KvMap.stories.js index 4d03d5bb..39d9c0f3 100644 --- a/@kiva/kv-components/vue/stories/KvMap.stories.js +++ b/@kiva/kv-components/vue/stories/KvMap.stories.js @@ -18,26 +18,13 @@ export default { }, }; -const Template = (args, { argTypes }) => ({ +const Template = (templateArgs, { argTypes }) => ({ props: Object.keys(argTypes), components: { KvMap }, + setup() { return { args: { ...templateArgs } }; }, template: ``, }); diff --git a/@kiva/kv-components/vue/stories/KvMaterialIcon.stories.js b/@kiva/kv-components/vue/stories/KvMaterialIcon.stories.js index 47877dd7..70f088cc 100644 --- a/@kiva/kv-components/vue/stories/KvMaterialIcon.stories.js +++ b/@kiva/kv-components/vue/stories/KvMaterialIcon.stories.js @@ -49,9 +49,10 @@ Default.args = { icon: mdiCart, }; -export const Common = (args, { argTypes }) => ({ +export const Common = (templateArgs, { argTypes }) => ({ props: Object.keys(argTypes), components: { KvMaterialIcon }, + setup() { return { args: { ...templateArgs } }; }, template: `
({ }, }); -export const Colored = (args, { argTypes }) => ({ +export const Colored = (templateArgs, { argTypes }) => ({ props: Object.keys(argTypes), components: { KvMaterialIcon }, + setup() { return { args: { ...templateArgs } }; }, template: `

Use text-color to set the icon color

@@ -123,9 +125,10 @@ export const Colored = (args, { argTypes }) => ({ }, }); -export const InlineWithText = (args, { argTypes }) => ({ +export const InlineWithText = (templateArgs, { argTypes }) => ({ props: Object.keys(argTypes), components: { KvMaterialIcon }, + setup() { return { args: { ...templateArgs } }; }, template: ` He went thataway @@ -138,9 +141,10 @@ export const InlineWithText = (args, { argTypes }) => ({ }, }); -export const Sizing = (args, { argTypes }) => ({ +export const Sizing = (templateArgs, { argTypes }) => ({ props: Object.keys(argTypes), components: { KvMaterialIcon }, + setup() { return { args: { ...templateArgs } }; }, template: `

Icons can be sized using any of the standard sizing classes (.tw-w-2, .tw-w-3, .tw-w-full, etc.). By default they are 24 x 24 (.tw-w-3).

@@ -156,9 +160,10 @@ export const Sizing = (args, { argTypes }) => ({ }, }); -export const WithAccessibleText = (args, { argTypes }) => ({ +export const WithAccessibleText = (templateArgs, { argTypes }) => ({ props: Object.keys(argTypes), components: { KvMaterialIcon }, + setup() { return { args: { ...templateArgs } }; }, template: `

If you don't include text and your icon is not decorative, be sure to include screen-reader text

@@ -174,9 +179,10 @@ export const WithAccessibleText = (args, { argTypes }) => ({ }, }); -export const StarsDemo = (args, { argTypes }) => ({ +export const StarsDemo = (templateArgs, { argTypes }) => ({ props: Object.keys(argTypes), components: { KvMaterialIcon }, + setup() { return { args: { ...templateArgs } }; }, template: `