From eccd7c45fed74e8c4ab2483a8bccd8161cb542d3 Mon Sep 17 00:00:00 2001 From: basher Date: Mon, 22 Apr 2024 08:58:23 +0100 Subject: [PATCH] custom storybook even for domcontentloaded no longer needed --- ui/.storybook/preview-head.html | 10 ---------- ui/package.json | 2 +- ui/src/javascript/index.ts | 8 -------- ui/stories/1. Storybook Intro/1-Introduction.mdx | 5 ++++- ui/stories/1. Storybook Intro/2-known-Issues.mdx | 15 --------------- .../2. Design System/Colours/Colours.stories.js | 3 +-- .../WebComponents.mdx | 2 +- 7 files changed, 7 insertions(+), 38 deletions(-) delete mode 100644 ui/stories/1. Storybook Intro/2-known-Issues.mdx diff --git a/ui/.storybook/preview-head.html b/ui/.storybook/preview-head.html index bd6bd0f..f623362 100644 --- a/ui/.storybook/preview-head.html +++ b/ui/.storybook/preview-head.html @@ -6,13 +6,3 @@ - - diff --git a/ui/package.json b/ui/package.json index 7606dc7..78dd7a5 100644 --- 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 index 86f88af..cc2989e 100644 --- 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 index 17a78aa..ef10c4a 100644 --- 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. 1 +- Some components are **progressively enhanced** with JavaScript and `WAI-ARIA` as appropriate. 1, 2 - 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. 😜 > 1 > 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`. +> 2 +> 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 deleted file mode 100644 index 3d7ea5d..0000000 --- a/ui/stories/1. Storybook Intro/2-known-Issues.mdx +++ /dev/null @@ -1,15 +0,0 @@ -import { Meta } from '@storybook/blocks'; - - - -# Known Storybook issues - -## 1. Component JavaScript doesn't always fire in `docs` mode. -That's actually OK, as it shows what is rendered if JavaScript is disabled or broken. - -## 2. Storybook fires `DOMContentLoaded` event more than once. -See [this issue on Github](https://github.com/storybookjs/storybook/issues/15753). - -To mitigate this, a `custom Storybook event` is fired in `.storybook\preview-head.html`. This event is handled in `src/javascript/index.ts` in order to re-initialise the JavaScript modules for some of the components. - -If JavaScript appears not to be working correctly, open the `docs` page then go back to `story` page. diff --git a/ui/stories/2. Design System/Colours/Colours.stories.js b/ui/stories/2. Design System/Colours/Colours.stories.js index a600266..823010f 100644 --- a/ui/stories/2. Design System/Colours/Colours.stories.js +++ b/ui/stories/2. Design System/Colours/Colours.stories.js @@ -80,8 +80,7 @@ ${ ${ - // 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 index 0fb3c35..10d3ce2 100644 --- 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'; > 1 > 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. -> 2 3 +> 2, 3 > The [``](/docs/web-components-or-custom-elements-webui-ajax-loader--docs) Web Component is entirely constructed via JavaScript, and uses the shadow DOM. ## Additional reading