custom storybook even for domcontentloaded no longer needed

basher · Apr 22, 2024 · eccd7c4 · eccd7c4
1 parent 128d8c4
commit eccd7c4
Show file tree

Hide file tree

Showing 7 changed files with 7 additions and 38 deletions.
diff --git a/ui/.storybook/preview-head.html b/ui/.storybook/preview-head.html
@@ -6,13 +6,3 @@
 
 <!-- Overrides for Storybook Docs and UI. -->
 <link href="storybook-overrides.css" rel="stylesheet" />
-
-<script>
-    // Custom event for Parcel UI to listen to in order to instantiate UI component JavaScript when Storybook iframe loads for each story.
-    const eventStorybook = new Event('StorybookLoaded');
-
-    document.addEventListener('DOMContentLoaded', () => {
-        console.log('Storybook DOMContentLoaded... ');
-        window.dispatchEvent(eventStorybook);
-    }, false);
-</script>
diff --git a/ui/package.json b/ui/package.json
@@ -2,7 +2,7 @@
     "name": "web-ui-boilerplate",
     "description": "UI boilerplate for websites/webapps using vanilla HTML/CSS/JavaScript, powered by Storybook, bundled by Parcel.",
     "author": "basher",
-    "version": "3.1.3",
+    "version": "3.1.4",
     "license": "ISC",
     "repository": {
         "type": "git",

diff --git a/ui/src/javascript/index.ts b/ui/src/javascript/index.ts
@@ -14,11 +14,3 @@ if (browserSupportsAllFeatures()) {
         .then(() => uiInit())
         .catch((e) => console.error(e));
 }
-
-// Run UI module instantition ONCE when each Storybook story has loaded.
-const storybookUIinit = (): void => {
-    console.log('Storybook custom event fired...');
-    uiInit();
-};
-// 'StorybookLoaded' is an event that is dispatched from Storybook.
-window.addEventListener('StorybookLoaded', storybookUIinit, false);
diff --git a/ui/stories/1. Storybook Intro/1-Introduction.mdx b/ui/stories/1. Storybook Intro/1-Introduction.mdx
@@ -18,7 +18,7 @@ Just plain vanilla code. 😜
 
 ## Code authoring guidelines & accessibility
 - All UI components are authored with **semantic HTML5** markup.
-- Some components are **progressively enhanced** with JavaScript and `WAI-ARIA` as appropriate. <sup>1</sup>
+- Some components are **progressively enhanced** with JavaScript and `WAI-ARIA` as appropriate. <sup>1, 2</sup>
 - The HTML markup uses the `BEM` methodology to provide CSS namespacing.
 - Visual styling is minimal & unopinionated.
 - The CSS is authored with as little code as necessary, making full use of the CSS cascade and inheritance.
@@ -27,6 +27,9 @@ Just plain vanilla code. 😜
 > <sup>1</sup>
 > The JavaScript-enhanced components have been authored as [HTML Web Components](/docs/web-components-or-custom-elements-using-web-components--docs), also known as `custom elements`.
 
+> <sup>2</sup>
+> To test how these enhanced components behave with JavaScript disabled, comment out the call to `uiInit()` in `src/javascript/index.ts`.
+
 ### Accessibility testing
 Storybook comes with 2 default accessibility testing tools:
 - `Accessibility addon`. This is in the Storybook `addons` toolbar, and is built on the same [AxeCore API](https://www.deque.com/axe/) that Lighthouse uses.

diff --git a/ui/stories/1. Storybook Intro/2-known-Issues.mdx b/ui/stories/1. Storybook Intro/2-known-Issues.mdx
diff --git a/ui/stories/2. Design System/Colours/Colours.stories.js b/ui/stories/2. Design System/Colours/Colours.stories.js
@@ -80,8 +80,7 @@ ${
 </div>
 
 ${
-    // Output computed HSL colours when 'StorybookLoaded' custom event has fired.
-    window.addEventListener('StorybookLoaded',
+    window.addEventListener('DOMContentLoaded',
         () => {
             const styledSpan = document.querySelectorAll('.styled');
             styledSpan.forEach((span) => {

diff --git a/ui/stories/6. Web Components Or Custom Elements/WebComponents.mdx b/ui/stories/6. Web Components Or Custom Elements/WebComponents.mdx
@@ -10,7 +10,7 @@ import { Meta } from '@storybook/blocks';
 > <sup>1</sup>
 > Global CSS is inherited by the Web Components because they contain regular HTML markup. Additional CSS scoping & encapsulation is provided by the custom element names, enabling styles not to "leak" out into the global scope.
 
-> <sup>2</sup> <sup>3</sup>
+> <sup>2, 3</sup>
 > The [`<webui-ajax-loader>`](/docs/web-components-or-custom-elements-webui-ajax-loader--docs) Web Component is entirely constructed via JavaScript, and uses the shadow DOM.
 
 ## Additional reading