make webpack alias to better resolve storybook-only helpers and assets

metmuseum · Jan 7, 2022 · 8bbe4a6 · 8bbe4a6
1 parent 34b25a4
commit 8bbe4a6
Show file tree

Hide file tree

Showing 55 changed files with 99 additions and 97 deletions.
diff --git a/.storybook/helpers/index.js b/.storybook/helpers/index.js
@@ -1,5 +1,9 @@
+import backgroundOverride from "./backgroundOverride";
+import exampleComponent from "./exampleComponent";
 import html from "./html";
+import idHelper from "./idHelper";
+import parentWrapper from "./parentWrapper";
 import repeat from "./repeat";
-import backgroundOverride from "./backgroundOverride";
+import scalingRuleWrapper from "./scalingRuleWrapper";
 
-export { html, repeat, backgroundOverride };
+export { backgroundOverride, exampleComponent, idHelper, html, parentWrapper, repeat, scalingRuleWrapper };
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -20,6 +20,10 @@ module.exports = {
 			include: path.resolve(__dirname, "../"),
 		});
 
+		config.resolve ||= {}
+		config.resolve.alias ||= {}
+		config.resolve.alias[".storybook"] = path.resolve(__dirname)
+
 		// Return the altered config
 		return config;
 	},

diff --git a/dist/marble.js b/dist/marble.js
diff --git a/dist/marble.js.map b/dist/marble.js.map
diff --git a/src/components/audio-player/audio-player-story-helpers.js b/src/components/audio-player/audio-player-story-helpers.js
@@ -1,6 +1,6 @@
 import { text } from "@storybook/addon-knobs";
 import AudioPlayer from "./audio-player.js";
-import greekHall1x1 from "../../../.storybook/assets/images/greek-hall/1x1";
+import greekHall1x1 from ".storybook/assets/images/greek-hall/1x1";
 
 const exampleResponse = [{
 	id: "C0276F7DFD034191B37BB04E9048BB03",

diff --git a/src/components/audio-player/audio-player.stories.js b/src/components/audio-player/audio-player.stories.js
@@ -1,7 +1,7 @@
-import html from "../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 import { useEffect } from "@storybook/client-api";
 import { withKnobs, boolean, select } from "@storybook/addon-knobs";
-import { playIcon, pauseIcon, rewindTenSecondsIcon, forwardTenSecondsIcon, upCaretIcon } from "../../../.storybook/assets/svg";
+import { playIcon, pauseIcon, rewindTenSecondsIcon, forwardTenSecondsIcon, upCaretIcon } from ".storybook/assets/svg";
 import coverImageTemplate from "./cover-image-template";
 import { initializeAudioPlayers, track, example } from "./audio-player-story-helpers";
 

diff --git a/src/components/banner/banner-editorial/banner-editorial.stories.js b/src/components/banner/banner-editorial/banner-editorial.stories.js
@@ -1,12 +1,12 @@
-import { html } from "../../../../.storybook/helpers";
+import { html } from ".storybook/helpers";
 import he from "he";
 import vimeoTemplate from "../../vimeo-player/vimeo-player";
 import vimeoControls from "../../vimeo-player/vimeo-controls";
 import { useEffect } from "@storybook/client-api";
 import { withKnobs, color, text } from "@storybook/addon-knobs";
 
-import image448 from "../../../../.storybook/assets/images/misc/The-Met_150th_Events_Promo_448w.jpg";
-import image896 from "../../../../.storybook/assets/images/misc/The-Met_150th_Events_Promo_896w.jpg";
+import image448 from ".storybook/assets/images/misc/The-Met_150th_Events_Promo_448w.jpg";
+import image896 from ".storybook/assets/images/misc/The-Met_150th_Events_Promo_896w.jpg";
 
 export default { title: "Banner", decorators: [withKnobs] };
 

diff --git a/src/components/banner/banner.stories.js b/src/components/banner/banner.stories.js
@@ -1,11 +1,11 @@
-import { html } from "../../../.storybook/helpers";
+import { html } from ".storybook/helpers";
 import vimeoTemplate from "../vimeo-player/vimeo-player";
 import vimeoControls from "../vimeo-player/vimeo-controls.js";
 import { useEffect } from "@storybook/client-api";
 import { withKnobs, color, text } from "@storybook/addon-knobs";
 import he from "he";
-import image712 from "../../../.storybook/assets/images/misc/150HubBannerMobile_712w.jpg";
-import image1231 from "../../../.storybook/assets/images/misc/150HubBannerMobile_1231w.jpg";
+import image712 from ".storybook/assets/images/misc/150HubBannerMobile_712w.jpg";
+import image1231 from ".storybook/assets/images/misc/150HubBannerMobile_1231w.jpg";
 
 export default { title: "Banner", decorators: [withKnobs] };
 

diff --git a/src/components/byline/byline.stories.js b/src/components/byline/byline.stories.js
@@ -1,4 +1,4 @@
-import { html, repeat } from "../../../.storybook/helpers";
+import { html, repeat } from ".storybook/helpers";
 import { number, withKnobs } from "@storybook/addon-knobs";
 
 export default { title: "Components/Byline", decorators: [withKnobs] };

diff --git a/src/components/card/card-article/card-article.stories.js b/src/components/card/card-article/card-article.stories.js
@@ -1,10 +1,10 @@
-import html from "../../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 import { Byline } from "../../byline/byline.stories";
 import { text, withKnobs } from "@storybook/addon-knobs";
 
-import image768 from "../../../../.storybook/assets/images/full-width-image/seurat_circus_sideshow.jpg";
-import image960 from "../../../../.storybook/assets/images/full-width-image/seurat_circus_sideshow-960.jpg";
-import image1440 from "../../../../.storybook/assets/images/full-width-image/seurat_circus_sideshow-1440.jpg";
+import image768 from ".storybook/assets/images/full-width-image/seurat_circus_sideshow.jpg";
+import image960 from ".storybook/assets/images/full-width-image/seurat_circus_sideshow-960.jpg";
+import image1440 from ".storybook/assets/images/full-width-image/seurat_circus_sideshow-1440.jpg";
 
 export default {
 	title: "Cards/Article Card",

diff --git a/src/components/card/card-editorial/card-editorial.stories.js b/src/components/card/card-editorial/card-editorial.stories.js
@@ -1,8 +1,8 @@
-import html from "../../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 
 export default { title: "Cards" };
 
-import image1920 from "../../../../.storybook/assets/images/misc/2020_Met_Stories_Ep_01_4k_NEW-3.jpg";
+import image1920 from ".storybook/assets/images/misc/2020_Met_Stories_Ep_01_4k_NEW-3.jpg";
 
 const data = {
 	header: "Large Editorial Card",

diff --git a/src/components/card/card-multiple/card-multiple.stories.js b/src/components/card/card-multiple/card-multiple.stories.js
@@ -1,6 +1,6 @@
 import { withKnobs } from "@storybook/addon-knobs";
 
-import image1920 from "../../../../.storybook/assets/images/misc/2020_Met_Stories_Ep_01_4k_NEW-3.jpg";
+import image1920 from ".storybook/assets/images/misc/2020_Met_Stories_Ep_01_4k_NEW-3.jpg";
 
 export default {
 	title: "Cards",

diff --git a/src/components/card/card.stories.js b/src/components/card/card.stories.js
@@ -1,7 +1,7 @@
-import html from "../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 export default { title: "Cards" };
 
-import image1920 from "../../../.storybook/assets/images/misc/2020_Met_Stories_Ep_01_4k_NEW-3.jpg";
+import image1920 from ".storybook/assets/images/misc/2020_Met_Stories_Ep_01_4k_NEW-3.jpg";
 
 const data = {
 	header: "Base Card",

diff --git a/src/components/card/content-card/content-card.stories.js b/src/components/card/content-card/content-card.stories.js
@@ -1,12 +1,12 @@
-import html from "../../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
 
 import scssExports from "../../../global/exports.scss";
 
-import image768 from "../../../../.storybook/assets/images/full-width-image/seurat_circus_sideshow.jpg";
-import image960 from "../../../../.storybook/assets/images/full-width-image/seurat_circus_sideshow-960.jpg";
-import image1440 from "../../../../.storybook/assets/images/full-width-image/seurat_circus_sideshow-1440.jpg";
-import image2160 from "../../../../.storybook/assets/images/full-width-image/seurat_circus_sideshow-2160.jpg";
+import image768 from ".storybook/assets/images/full-width-image/seurat_circus_sideshow.jpg";
+import image960 from ".storybook/assets/images/full-width-image/seurat_circus_sideshow-960.jpg";
+import image1440 from ".storybook/assets/images/full-width-image/seurat_circus_sideshow-1440.jpg";
+import image2160 from ".storybook/assets/images/full-width-image/seurat_circus_sideshow-2160.jpg";
 
 const imageWidth = 3920;
 const imageHeight = 2621;

diff --git a/src/components/card/event-card/event-card-story-helpers.js b/src/components/card/event-card/event-card-story-helpers.js
@@ -1,5 +1,5 @@
 import { text, boolean } from "@storybook/addon-knobs";
-import image16x9 from "../../../../.storybook/assets/images/greek-hall/16x9/index.js";
+import image16x9 from ".storybook/assets/images/greek-hall/16x9/index.js";
 
 const defaultData = ({opened=false, inSitu=true}) => {
 	const isOpened = boolean("Is Opened", opened, "Display");

diff --git a/src/components/card/event-card/event-card.stories.js b/src/components/card/event-card/event-card.stories.js
@@ -1,10 +1,10 @@
-import html from "../../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 import { useEffect } from "@storybook/client-api";
 
 import EventCard from "./event-card.js";
 import { defaultData } from "./event-card-story-helpers.js";
 import { withKnobs } from "@storybook/addon-knobs";
-import SVGs from "../../../../.storybook/assets/svg";
+import SVGs from ".storybook/assets/svg";
 
 export default {
 	title: "Cards/Event Card",

diff --git a/src/components/card/exhibition-card/exhibition-card.stories.js b/src/components/card/exhibition-card/exhibition-card.stories.js
@@ -1,6 +1,6 @@
 import { withKnobs, number } from "@storybook/addon-knobs";
 
-import image1920 from "../../../../.storybook/assets/images/misc/2020_Met_Stories_Ep_01_4k_NEW-3.jpg";
+import image1920 from ".storybook/assets/images/misc/2020_Met_Stories_Ep_01_4k_NEW-3.jpg";
 
 export default {
 	title: "Cards",

diff --git a/src/components/card/simple-card/simple-card.stories.js b/src/components/card/simple-card/simple-card.stories.js
@@ -1,8 +1,8 @@
-import html from "../../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 import { withKnobs, text, boolean } from "@storybook/addon-knobs";
 
-import image600 from "../../../../.storybook/assets/images/misc/150Hub_SimpleCard2_600w.jpg";
-import image1200 from "../../../../.storybook/assets/images/misc/150Hub_SimpleCard2_1200w.jpg";
+import image600 from ".storybook/assets/images/misc/150Hub_SimpleCard2_600w.jpg";
+import image1200 from ".storybook/assets/images/misc/150Hub_SimpleCard2_1200w.jpg";
 
 export default {
 	title: "Cards",

diff --git a/src/components/card/tour-card/tour-card.stories.js b/src/components/card/tour-card/tour-card.stories.js
@@ -1,6 +1,6 @@
-import html from "../../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 import { withKnobs, text } from "@storybook/addon-knobs";
-import image16x9 from "../../../../.storybook/assets/images/greek-hall/16x9/index.js";
+import image16x9 from ".storybook/assets/images/greek-hall/16x9/index.js";
 
 export default {
 	title: "Cards/Tour Card",

diff --git a/src/components/carousel/carousel.stories.js b/src/components/carousel/carousel.stories.js
@@ -1,4 +1,4 @@
-import html from "../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 import { CarouselSlide } from "./slide/carousel-slide.stories.js";
 import carousel, { flickityDefaults } from "./carousel.js";
 import { useEffect } from "@storybook/client-api";

diff --git a/src/components/carousel/slide/carousel-slide.stories.js b/src/components/carousel/slide/carousel-slide.stories.js
@@ -1,8 +1,8 @@
-import html from "../../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 import videoSlide from "./video-slide.js";
 import { useEffect } from "@storybook/client-api";
-import image1920 from "../../../../.storybook/assets/images/misc/2020_Met_Stories_Ep_01_4k_NEW-3.jpg";
-import video from "../../../../.storybook/assets/video/stock-footage-a-nice-bee-walking-and-foraging-a-pretty-yellow-flower-and-a-little-push-by-another-bee-to-fly-away.mp4";
+import image1920 from ".storybook/assets/images/misc/2020_Met_Stories_Ep_01_4k_NEW-3.jpg";
+import video from ".storybook/assets/video/stock-footage-a-nice-bee-walking-and-foraging-a-pretty-yellow-flower-and-a-little-push-by-another-bee-to-fly-away.mp4";
 
 export default { title: "Carousel/Carousel Slide" };
 

diff --git a/src/components/exhibition-badge/exhibition-badge.stories.js b/src/components/exhibition-badge/exhibition-badge.stories.js
@@ -1,4 +1,4 @@
-import html from "../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 export default { title: "Components/ExhibitionBadge" };
 
 const exhibitionBadgeMarkUp = ({ closingSoon, hover }) => html`

diff --git a/src/components/featured-banner/featured-banner.stories.js b/src/components/featured-banner/featured-banner.stories.js
@@ -1,13 +1,13 @@
-import html from "../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 import he from "he";
 import { withKnobs, text, boolean } from "@storybook/addon-knobs";
 import scssExports from "../../global/exports.scss";
 
-import image768 from "../../../.storybook/assets/images/full-width-image/seurat_circus_sideshow.jpg";
-import image960 from "../../../.storybook/assets/images/full-width-image/seurat_circus_sideshow-960.jpg";
-import image1440 from "../../../.storybook/assets/images/full-width-image/seurat_circus_sideshow-1440.jpg";
-import image2160 from "../../../.storybook/assets/images/full-width-image/seurat_circus_sideshow-2160.jpg";
-import image3240 from "../../../.storybook/assets/images/full-width-image/seurat_circus_sideshow-3240.jpg";
+import image768 from ".storybook/assets/images/full-width-image/seurat_circus_sideshow.jpg";
+import image960 from ".storybook/assets/images/full-width-image/seurat_circus_sideshow-960.jpg";
+import image1440 from ".storybook/assets/images/full-width-image/seurat_circus_sideshow-1440.jpg";
+import image2160 from ".storybook/assets/images/full-width-image/seurat_circus_sideshow-2160.jpg";
+import image3240 from ".storybook/assets/images/full-width-image/seurat_circus_sideshow-3240.jpg";
 
 export default {
 	title: "Featured",

diff --git a/src/components/featured-card/featured-card.stories.js b/src/components/featured-card/featured-card.stories.js
@@ -1,4 +1,4 @@
-import html from "../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 import he from "he";
 import { withKnobs, text, boolean } from "@storybook/addon-knobs";
 import { fullWidth } from "../image-container/image-container.stories.js";

diff --git a/src/components/featured-module/featured-module.stories.js b/src/components/featured-module/featured-module.stories.js
@@ -1,4 +1,4 @@
-import html from "../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 import he from "he";
 import { withKnobs, text, boolean } from "@storybook/addon-knobs";
 import { fullWidth } from "../image-container/image-container.stories.js";

diff --git a/src/components/filter/filter-set.stories.js b/src/components/filter/filter-set.stories.js
@@ -1,4 +1,4 @@
-import html from "../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 import { withKnobs, boolean, array } from "@storybook/addon-knobs";
 import options from "./options";
 import markup from "./markup";

diff --git a/src/components/filter/inline-modal-trigger-styled-as-filter.js b/src/components/filter/inline-modal-trigger-styled-as-filter.js
@@ -1,4 +1,4 @@
-import html from "../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 
 export default (checked) => {
 	return html`

diff --git a/src/components/filter/markup.js b/src/components/filter/markup.js
@@ -1,5 +1,4 @@
-import html from "../../../.storybook/helpers/html";
-import idHelper from "../../../.storybook/helpers/idHelper";
+import { html, idHelper } from ".storybook/helpers";
 
 const markup = ({ checked, classHelpers, filterName, label }) => {
 	const filterId = idHelper(label);

diff --git a/src/components/image-container/image-container.stories.js b/src/components/image-container/image-container.stories.js
@@ -1,5 +1,5 @@
-import html from "../../../.storybook/helpers/html";
-import defaultImage from "../../../.storybook/assets/images/full-width-image";
+import { html } from ".storybook/helpers";
+import defaultImage from ".storybook/assets/images/full-width-image";
 
 export default {
 	title: "Image Containers",

diff --git a/src/components/inputs/inputs.stories.js b/src/components/inputs/inputs.stories.js
@@ -1,4 +1,4 @@
-import html from "../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 import { withKnobs, text, boolean} from "@storybook/addon-knobs";
 
 export default {

diff --git a/src/components/jumplink-banner/jumplink-banner.stories.js b/src/components/jumplink-banner/jumplink-banner.stories.js
@@ -1,4 +1,4 @@
-import html from "../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 import he from "he";
 import { withKnobs, text, boolean } from "@storybook/addon-knobs";
 import { fullWidth } from "../image-container/image-container.stories.js";

diff --git a/src/components/navigation/navigation.stories.js b/src/components/navigation/navigation.stories.js
@@ -1,4 +1,4 @@
-import html from "../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 import bareNav from "./navigation-bare/navigation-bare.js";
 import { useEffect } from "@storybook/client-api";
 

diff --git a/src/components/notification-banner/notification-banner.stories.js b/src/components/notification-banner/notification-banner.stories.js
@@ -1,4 +1,4 @@
-import html from "../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 import { withKnobs, radios, color, text } from "@storybook/addon-knobs";
 import he from "he";
 export default { title: "Notification Banner", decorators: [withKnobs] };

diff --git a/src/components/plan-your-visit/plan-your-visit.stories.js b/src/components/plan-your-visit/plan-your-visit.stories.js
@@ -1,10 +1,10 @@
-import html from "../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 import { withKnobs, text} from "@storybook/addon-knobs";
 
 import { passIcon, dateIcon, locationIcon } from "./helper-icons.js";
 
-import image712 from "../../../.storybook/assets/images/misc/150HubBannerMobile_712w.jpg";
-import image1231 from "../../../.storybook/assets/images/misc/150HubBannerMobile_1231w.jpg";
+import image712 from ".storybook/assets/images/misc/150HubBannerMobile_712w.jpg";
+import image1231 from ".storybook/assets/images/misc/150HubBannerMobile_1231w.jpg";
 
 
 export default {

diff --git a/src/components/quotes-list/quotes-list.stories.js b/src/components/quotes-list/quotes-list.stories.js
@@ -1,4 +1,4 @@
-import { html, repeat } from "../../../.storybook/helpers";
+import { html, repeat } from ".storybook/helpers";
 import { withKnobs, number, text } from "@storybook/addon-knobs";
 export default {
 	title: "Exhibition/Quotes List",

diff --git a/src/components/rte-components/rte-components.stories.js b/src/components/rte-components/rte-components.stories.js
@@ -1,6 +1,6 @@
-import html from "../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 import { withKnobs, text } from "@storybook/addon-knobs";
-import metStoriesImage from "../../../.storybook/assets/images/misc/2020_Met_Stories_Ep_01_4k_NEW-3.jpg";
+import metStoriesImage from ".storybook/assets/images/misc/2020_Met_Stories_Ep_01_4k_NEW-3.jpg";
 export default {
 	title: "RTE Components/All",
 	decorators: [withKnobs],

diff --git a/src/components/section-heading/section-heading.html.js b/src/components/section-heading/section-heading.html.js
@@ -1,4 +1,4 @@
-import html from "../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 import he from "he";
 
 const sectionHeadingMarkup = ({

diff --git a/src/components/section-heading/section-heading.stories.js b/src/components/section-heading/section-heading.stories.js
@@ -1,5 +1,4 @@
-import html from "../../../.storybook/helpers/html";
-import exampleComponent from "../../../.storybook/helpers/exampleComponent";
+import { html, exampleComponent } from ".storybook/helpers";
 import { withKnobs, text, boolean, radios } from "@storybook/addon-knobs";
 import sectionHeadingMarkup from "./section-heading.html.js";
 

diff --git a/src/components/tab-controls/tab-controls.stories.js b/src/components/tab-controls/tab-controls.stories.js
@@ -1,4 +1,4 @@
-import html from "../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 
 export default {
 	title: "Components/Wayfinding/Tab Controls",

diff --git a/src/components/tile/tile.stories.js b/src/components/tile/tile.stories.js
@@ -1,7 +1,6 @@
-import html from "../../../.storybook/helpers/html";
-import repeat from "../../../.storybook/helpers/repeat";
+import { html, repeat } from ".storybook/helpers";
 import { sizesTemplate } from "../image-container/image-container.stories";
-import greekHall from "../../../.storybook/assets/images/greek-hall";
+import greekHall from ".storybook/assets/images/greek-hall";
 
 const { image16x9 } = greekHall;
 

diff --git a/src/components/tooltip/tooltip.stories.js b/src/components/tooltip/tooltip.stories.js
@@ -1,4 +1,4 @@
-import html from "../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 
 import { withKnobs } from "@storybook/addon-knobs";
 

diff --git a/src/components/topics-slider/topic-card.stories.js b/src/components/topics-slider/topic-card.stories.js
@@ -1,8 +1,8 @@
-import html from "../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 
-import image768 from "../../../.storybook/assets/images/full-width-image/seurat_circus_sideshow.jpg";
-import image960 from "../../../.storybook/assets/images/full-width-image/seurat_circus_sideshow-960.jpg";
-import image1440 from "../../../.storybook/assets/images/full-width-image/seurat_circus_sideshow-1440.jpg";
+import image768 from ".storybook/assets/images/full-width-image/seurat_circus_sideshow.jpg";
+import image960 from ".storybook/assets/images/full-width-image/seurat_circus_sideshow-960.jpg";
+import image1440 from ".storybook/assets/images/full-width-image/seurat_circus_sideshow-1440.jpg";
 
 
 export default { title: "Components/Topic Card" };

diff --git a/src/components/topics-slider/topics-slider.stories.js b/src/components/topics-slider/topics-slider.stories.js
@@ -1,4 +1,4 @@
-import { html, repeat } from "../../../.storybook/helpers";
+import { html, repeat } from ".storybook/helpers";
 import { TopicCard } from "./topic-card.stories.js";
 import carousel, { flickityDefaults } from "../carousel/carousel.js";
 import { useEffect } from "@storybook/client-api";

diff --git a/src/components/vimeo-player/vimeo-player.js b/src/components/vimeo-player/vimeo-player.js
@@ -1,4 +1,4 @@
-import html from "../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 
 const videoTemplate = html`<div
 	class="js-vimeo-container vimeo-container is-visible"

diff --git a/src/global/buttons/primary/primary.stories.js b/src/global/buttons/primary/primary.stories.js
@@ -1,4 +1,4 @@
-import html from "../../../../.storybook/helpers/html";
+import { html } from ".storybook/helpers";
 import "../_sb-only.scss";
 
 const permutations = {

diff --git a/src/global/buttons/secondary/secondary.stories.js b/src/global/buttons/secondary/secondary.stories.js
@@ -1,4 +1,4 @@
-import { html, backgroundOverride } from "../../../../.storybook/helpers";
+import { html, backgroundOverride } from ".storybook/helpers";
 import "../_sb-only.scss";
 
 const permutations = {