fix: more icons now work (sprites didn't work in storybook before eit…

…her)
kiva · Aug 14, 2024 · 329f527 · 329f527
1 parent dace761
commit 329f527
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 37 deletions.
diff --git a/.storybook/stories/KvCarousel.stories.js b/.storybook/stories/KvCarousel.stories.js
@@ -333,32 +333,32 @@ export const KivanSlider = () => ({
 				return [
 					{
 						left: [
-							['small', slidesImageRequire('./kivan-1a-std.jpg')],
-							['small retina', slidesImageRequire('./kivan-1a-retina.jpg')]
+							['small', slidesImageRequire('kivan-1a-std.jpg')],
+							['small retina', slidesImageRequire('kivan-1a-retina.jpg')]
 						],
 						right: [
-							['small', slidesImageRequire('./kivan-1b-std.jpg')],
-							['small retina', slidesImageRequire('./kivan-1b-retina.jpg')],
+							['small', slidesImageRequire('kivan-1b-std.jpg')],
+							['small retina', slidesImageRequire('kivan-1b-retina.jpg')],
 						]
 					},
 					{
 						left: [
-							['small', slidesImageRequire('./kivan-2a-std.jpg')],
+							['small', slidesImageRequire('kivan-2a-std.jpg')],
 							['small retina', slidesImageRequire('./kivan-2a-retina.jpg')],
 						],
 						right: [
-							['small', slidesImageRequire('./kivan-2b-std.jpg')],
-							['small retina', slidesImageRequire('./kivan-2b-retina.jpg')],
+							['small', slidesImageRequire('kivan-2b-std.jpg')],
+							['small retina', slidesImageRequire('kivan-2b-retina.jpg')],
 						]
 					},
 					{
 						left: [
-							['small', slidesImageRequire('./kivan-3a-std.jpg')],
-							['small retina', slidesImageRequire('./kivan-3a-retina.jpg')],
+							['small', slidesImageRequire('kivan-3a-std.jpg')],
+							['small retina', slidesImageRequire('kivan-3a-retina.jpg')],
 						],
 						right: [
-							['small', slidesImageRequire('./kivan-3b-std.jpg')],
-							['small retina', slidesImageRequire('./kivan-3b-retina.jpg')]
+							['small', slidesImageRequire('kivan-3b-std.jpg')],
+							['small retina', slidesImageRequire('kivan-3b-retina.jpg')]
 						]
 					}
 				]
@@ -413,16 +413,16 @@ export const ImagesOnlyLazyLoadLikeHomepage = () => ({
 		},
 		heroImages(number) {
 			return [
-				['small', imageRequire(`./hero-${number}-sm-std.jpg`)],
-				['small retina', imageRequire(`./hero-${number}-sm-retina.jpg`)],
-				['medium', imageRequire(`./hero-${number}-med-std.jpg`)],
-				['medium retina', imageRequire(`./hero-${number}-med-retina.jpg`)],
-				['large', imageRequire(`./hero-${number}-lg-std.jpg`)],
-				['large retina', imageRequire(`./hero-${number}-lg-retina.jpg`)],
-				['xga', imageRequire(`./hero-${number}-xga-std.jpg`)],
-				['xga retina', imageRequire(`./hero-${number}-xga-retina.jpg`)],
-				['wxga', imageRequire(`./hero-${number}-wxga-std.jpg`)],
-				['wxga retina', imageRequire(`./hero-${number}-wxga-retina.jpg`)],
+				['small', imageRequire(`hero-${number}-sm-std.jpg`)],
+				['small retina', imageRequire(`hero-${number}-sm-retina.jpg`)],
+				['medium', imageRequire(`hero-${number}-med-std.jpg`)],
+				['medium retina', imageRequire(`hero-${number}-med-retina.jpg`)],
+				['large', imageRequire(`hero-${number}-lg-std.jpg`)],
+				['large retina', imageRequire(`hero-${number}-lg-retina.jpg`)],
+				['xga', imageRequire(`hero-${number}-xga-std.jpg`)],
+				['xga retina', imageRequire(`hero-${number}-xga-retina.jpg`)],
+				['wxga', imageRequire(`hero-${number}-wxga-std.jpg`)],
+				['wxga retina', imageRequire(`hero-${number}-wxga-retina.jpg`)],
 			];
 		},
 	},

diff --git a/.storybook/stories/KvFlag.stories.js b/.storybook/stories/KvFlag.stories.js
@@ -67,6 +67,7 @@ export const Circular = (args, { argTypes }) => ({
 	components: {
 		KvFlag
 	},
+	setup() { return args; },
 	template: `
 		<div style="width: 32px;">
 			<component is="style">

diff --git a/.storybook/stories/KvHero.stories.js b/.storybook/stories/KvHero.stories.js
@@ -1,19 +1,21 @@
 import KvHero from '#src/components/Kv/KvHero';
 import KvButton from '#src/components/Kv/KvButton';
 import KvResponsiveImage from '#src/components/Kv/KvResponsiveImage';
+import { metaGlobReader } from '#src/util/importHelpers';
 
-const imagesRequire = require.context('#src/assets/images/mg-hero-slideshow', true);
+const imageGlob = import.meta.glob('/src/assets/images/mg-hero-slideshow/*.*', { eager: true });
+const imagesRequire = metaGlobReader(imageGlob, '/src/assets/images/mg-hero-slideshow/');
 const sampleResponsiveImageSet = [
-	['small', imagesRequire('./mg-hppromo-1-sm-std.jpg')],
-	['small retina', imagesRequire('./mg-hppromo-1-sm-retina.jpg')],
-	['medium', imagesRequire('./mg-hppromo-1-med-std.jpg')],
-	['medium retina', imagesRequire('./mg-hppromo-1-med-retina.jpg')],
-	['large', imagesRequire('./mg-hppromo-1-lg-std.jpg')],
-	['large retina', imagesRequire('./mg-hppromo-1-lg-retina.jpg')],
-	['xga', imagesRequire('./mg-hppromo-1-xga-std.jpg')],
-	['xga retina', imagesRequire('./mg-hppromo-1-xga-retina.jpg')],
-	['wxga', imagesRequire('./mg-hppromo-1-wxga-std.jpg')],
-	['wxga retina', imagesRequire('./mg-hppromo-1-wxga-retina.jpg')],
+	['small', imagesRequire('mg-hppromo-1-sm-std.jpg')],
+	['small retina', imagesRequire('mg-hppromo-1-sm-retina.jpg')],
+	['medium', imagesRequire('mg-hppromo-1-med-std.jpg')],
+	['medium retina', imagesRequire('mg-hppromo-1-med-retina.jpg')],
+	['large', imagesRequire('mg-hppromo-1-lg-std.jpg')],
+	['large retina', imagesRequire('mg-hppromo-1-lg-retina.jpg')],
+	['xga', imagesRequire('mg-hppromo-1-xga-std.jpg')],
+	['xga retina', imagesRequire('mg-hppromo-1-xga-retina.jpg')],
+	['wxga', imagesRequire('mg-hppromo-1-wxga-std.jpg')],
+	['wxga retina', imagesRequire('mg-hppromo-1-wxga-retina.jpg')],
 ];
 
 export default {

diff --git a/.storybook/stories/KvIcon.stories.js b/.storybook/stories/KvIcon.stories.js
@@ -1,9 +1,9 @@
 import KvIcon from '#src/components/Kv/KvIcon';
 
 function getFilenames(r) {
-	return r.keys().map((filename) => {
+	return Object.keys(r).map((filename) => {
 		let str = filename;
-		str = str.substring(2); // remove ./
+		str = str.substring(str.lastIndexOf('/') + 1); // remove leading path
 		str = str.substring(0, str.length - 4); // remove .svg
 		return str;
 	});
@@ -12,7 +12,7 @@ function getFilenames(r) {
 export default {
 	title: 'Kv/KvIcon',
 	component: KvIcon,
- };
+};
 
 export const Default = () => ({
 	components: {
@@ -25,13 +25,15 @@ export const Default = () => ({
 	`,
 });
 
+const iconGlob = import.meta.glob('/src/assets/icons/inline/*.*', { eager: true });
+
 export const inlined = () => ({
 	components: {
 		KvIcon
 	},
 	data() {
 		return {
-			iconNames: getFilenames(require.context('#src/assets/icons/inline/', true, /\.svg$/))
+			iconNames: getFilenames(iconGlob)
 		}
 	},
 	template: `
@@ -59,13 +61,15 @@ export const inlined = () => ({
 	`,
 });
 
+const spriteGlob = import.meta.glob('/src/assets/icons/sprite/*.*', { eager: true });
+
 export const fromSprite = () => ({
 	components: {
 		KvIcon
 	},
 	data() {
 		return {
-			iconNames: getFilenames(require.context('#src/assets/icons/sprite/', true, /\.svg$/))
+			iconNames: getFilenames(spriteGlob)
 		}
 	},
 	template: `