Fix useEffect() in sky nav (#1918)

cloudfour · Jul 7, 2022 · da3c096 · da3c096
1 parent 4e8ef04
commit da3c096
Show file tree

Hide file tree

Showing 14 changed files with 16 additions and 1,656 deletions.
diff --git a/src/components/sky-nav/sky-nav.stories.mdx b/src/components/sky-nav/sky-nav.stories.mdx
@@ -17,6 +17,17 @@ embedded examples.
 <Meta
   title="Components/Sky Nav"
   parameters={{ docs: { inlineStories: false } }}
+  decorators={[
+    (story) => {
+      useEffect(() => {
+        const { destroy } = initSkyNav(
+          document.querySelector('.js-sky-nav-menu-toggle')
+        );
+        return destroy;
+      }, []);
+      return story();
+    },
+  ]}
 />
 
 # Sky Nav
@@ -48,18 +59,10 @@ The Sky Nav is intended for use with our [our dark theme](/docs/design-themes--d
       },
     }}
   >
-    {() => {
-      useEffect(() => {
-        const { destroy } = initSkyNav(
-          document.querySelector('.js-sky-nav-menu-toggle')
-        );
-        return destroy;
-      }, []);
-      return template({
-        class: 't-dark',
-        ...basicStoryArgs,
-      });
-    }}
+    {template({
+      class: 't-dark',
+      ...basicStoryArgs,
+    })}
   </Story>
 </Canvas>
 
@@ -82,15 +85,7 @@ But it works without a theme, too, just in case:
       },
     }}
   >
-    {() => {
-      useEffect(() => {
-        const { destroy } = initSkyNav(
-          document.querySelector('.js-sky-nav-menu-toggle')
-        );
-        return destroy;
-      }, []);
-      return template(basicStoryArgs);
-    }}
+    {template(basicStoryArgs)}
   </Story>
 </Canvas>
 

diff --git a/src/prototypes/single-article/example/example.twig b/src/prototypes/single-article/example/example.twig
diff --git a/src/prototypes/single-article/single-article.stories.js b/src/prototypes/single-article/single-article.stories.js