Initialize sky nav JS for all prototypes that use the sky nav (#1503)

Author: calebeby

package-lock.json

@@ -1,4 +1,5 @@
 import singleArticlePrototype from './example/example.twig';
+import { useSkyNav } from '../use-sky-nav.ts';
 
 export default {
   title: 'Prototypes/Single Article',
@@ -7,4 +8,7 @@ export default {
   },
 };
 
-export const Example = () => singleArticlePrototype({});
+export const Example = () => {
+  useSkyNav();
+  return singleArticlePrototype({});
+};

src/prototypes/single-article/single-article.stories.js

@@ -1,6 +1,7 @@
 import singlePagePrototype from './example/example.twig';
 import './example/example.scss';
 import devices from './data/devices.json';
+import { useSkyNav } from '../use-sky-nav.ts';
 
 export default {
   title: 'Prototypes/Single Page',
@@ -9,7 +10,9 @@ export default {
   },
 };
 
-export const Example = () =>
-  singlePagePrototype({
+export const Example = () => {
+  useSkyNav();
+  return singlePagePrototype({
     devices,
   });
+};

src/prototypes/single-page/single-page.stories.js

@@ -3,6 +3,7 @@ import teamIndividualPrototype from './example/team-individual.twig';
 import teamArticlePage2 from './example/team-articles-page2.twig';
 import avatars from './data/avatars.json';
 import './example/team-individual.scss';
+import { useSkyNav } from '../use-sky-nav.ts';
 
 export default {
   title: 'Prototypes/Team Page',
@@ -12,14 +13,21 @@ export default {
   },
 };
 
-export const List = () =>
-  teamListPrototype({
+export const List = () => {
+  useSkyNav();
+  return teamListPrototype({
     avatars,
   });
+};
 
-export const IndividualBio = () =>
-  teamIndividualPrototype({
+export const IndividualBio = () => {
+  useSkyNav();
+  return teamIndividualPrototype({
     avatars,
   });
+};
 
-export const ArticlesPage2 = () => teamArticlePage2({});
+export const ArticlesPage2 = () => {
+  useSkyNav();
+  return teamArticlePage2({});
+};

src/prototypes/team/team.stories.js

@@ -0,0 +1,11 @@
+import { useEffect } from '@storybook/client-api';
+import { initSkyNav } from '../components/sky-nav/sky-nav';
+
+export const useSkyNav = () => {
+  useEffect(() => {
+    const { destroy } = initSkyNav(
+      document.querySelector('.js-sky-nav-menu-toggle')
+    );
+    return destroy;
+  }, []);
+}