add webui-make-clickable component

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": "2.2.0",
+    "version": "2.3.0",
     "license": "ISC",
     "repository": {
         "type": "git",

ui/src/javascript/ui-init.ts

@@ -1,7 +1,6 @@
 // Dependencies.
 // 1. Modules.
 import FormValidate from './modules/form-validate';
-import MakeClickable from './modules/make-clickable';
 import Message from './modules/message';
 import Modal from './modules/modal';
 import Prose from './modules/prose';
@@ -17,11 +16,11 @@ import demoAjaxFetchHTML from './modules/demo-ajax-fetch-html';
 
 // 3. Web components.
 import WebUIDisclosure from './web-components/webui-disclosure';
+import WebUIMakeClickable from './web-components/webui-make-clickable';
 import WebUIShare from './web-components/webui-share';
 
 export const uiInit = (): void => {
     FormValidate.start();
-    MakeClickable.start();
     Message.start();
     Modal.start();
     RangeSlider.start();
@@ -38,6 +37,8 @@ export const uiInit = (): void => {
     // Define Web Components
     !customElements.get('webui-disclosure') &&
         customElements.define('webui-disclosure', WebUIDisclosure);
+    !customElements.get('webui-make-clickable') &&
+        customElements.define('webui-make-clickable', WebUIMakeClickable);
     !customElements.get('webui-share') &&
         customElements.define('webui-share', WebUIShare);
 };

ui/src/javascript/web-components/webui-make-clickable.ts

@@ -0,0 +1,18 @@
+export default class WebUIMakeClickable extends HTMLElement {
+    private link: HTMLAnchorElement | null;
+
+    constructor() {
+        super();
+
+        this.link = this.querySelector('[data-url]') || this.querySelector('a');
+
+        this.addEventListener('click', this);
+    }
+
+    // Handle web component events from constructor().
+    handleEvent(e: MouseEvent) {
+        if (e.target !== this.link) {
+            this.link?.click();
+        }
+    }
+}

ui/src/javascript/web-components/webui-share.ts

@@ -26,6 +26,7 @@ export default class WebUIShare extends HTMLElement {
         this.btnCopy?.addEventListener('click', this);
     }
 
+    // Handle web component events from constructor().
     handleEvent(e: MouseEvent) {
         const target = e.currentTarget as HTMLButtonElement;
 

ui/src/stylesheets/components/_index.scss

@@ -5,7 +5,6 @@
 @use 'button';
 @use 'button-group';
 @use 'card';
-@use 'clickable';
 @use 'image';
 @use 'image-gallery';
 @use 'message';

ui/src/stylesheets/web-components/_index.scss

@@ -1,2 +1,3 @@
 @use 'webui-disclosure';
+@use 'webui-make-clickable';
 @use 'webui-share';

ui/src/stylesheets/components/_clickable.scss → ui/src/stylesheets/web-components/_webui-make-clickable.scss

@@ -11,7 +11,17 @@ Dependencies.
 Give affordance of "clickability" to a component/content.
 ----------------------------------------------------------------------------
 */
-.clickable {
+webui-make-clickable:defined {
+    display: inline-block;
+
+    &:hover {
+        cursor: pointer;
+
+        a {
+            text-decoration: none;
+        }
+    }
+
     &:focus-within {
         box-shadow: 0 0 0 $border-width-l $color-focus;
         outline: $border-width-l solid transparent; // So high contrast mode works.
@@ -27,15 +37,4 @@ Give affordance of "clickability" to a component/content.
         box-shadow: none;
         outline: $border-width-l solid transparent;
     }
-
-    // With JS enhancement.
-    &[data-module='make-clickable'] {
-        &:hover {
-            cursor: pointer;
-
-            a {
-                text-decoration: none;
-            }
-        }
-    }
 }

ui/stories/5. Components/MakeClickable/MakeClickable.mdx

@@ -1,10 +1,6 @@
-import { Meta, Canvas } from '@storybook/blocks';
-import * as MakeClickable from './MakeClickable.stories';
+import { Meta } from '@storybook/blocks';
 
-<Meta of={MakeClickable} />
+<Meta title='Components/Make Clickable' />
 
 # Make clickable
-- Utilises CSS `focus-within` to add a focus indicator to a component (e.g. card) when it, or any of its descendents, receives keyboard `focus`.
-- The entire component can be made clickable via JavaScript by adding a `data-module="make-clickable"` attribute to the component's HTML.
-
-<Canvas of={MakeClickable.MakeClickable} />
+- See the [`<webui-make-clickable>`](/docs/web-components-or-custom-elements-webui-make-clickable--docs) custom element.

ui/stories/6. Web Components Or Custom Elements/WebUIDisclosure/WebUIDisclosure.mdx

@@ -5,12 +5,12 @@ import * as WebUIDisclosure from './WebUIDisclosure.stories';
 
 # `<webui-disclosure>`
 - Shows/hides content using the HTML `hidden` attribute.
-- Use this component when [accordion](/story/components-accordion--accordion) or [tabs](/story/components-tabs--tabs) components cannot be used.
+- Use this custom element when [accordion](/story/components-accordion--accordion) or [tabs](/story/components-tabs--tabs) components cannot be used.
 - Also see the [ARIA APG disclosure pattern](https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/).
 
 ## Accessibility considerations
 - By adding the `data-bind-escape-key` attribute to the HTML, the `ESC` key can be used to hide the content.
-- Similarly, the `data-bind-click-outside` attribute hides the content when clicking anywhere outside the content.
+- Similarly, the `data-bind-click-outside` attribute hides the content when clicking anywhere outside the custom element.
 
 <Canvas of={WebUIDisclosure.WebUIDisclosure} />
 <Controls of={WebUIDisclosure.WebUIDisclosure} />

ui/stories/6. Web Components Or Custom Elements/WebUIMakeClickable/WebUIMakeClickable.js

@@ -0,0 +1,35 @@
+export const WebUIMakeClickableHtml = () => `
+<webui-make-clickable>
+    <article class="card">
+        <figure class="card__media">
+            <picture>
+                <source
+                    srcset="https://dummyimage.com/400x300"
+                    type="image/webp"
+                >
+                <img
+                    class="image"
+                    src="https://dummyimage.com/400x300"
+                    alt="[alt]"
+                    loading="lazy"
+                    height="300"
+                    width="400"
+                />
+            </picture>
+        </figure>
+        <div class="card__content stack">
+            <h3 class="card__title">
+                <a
+                    href="#"
+                    data-url
+                >
+                    Title is the primary link
+                </a>
+            </h3>
+            <p>This whole component is clickable.</p>
+            <p>This is a <a href="https://www.google.com">secondary link</a>.</p>
+            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat, totam molestiae. Soluta voluptatem deleniti excepturi laudantium. Officia at repudiandae quo nulla reiciendis optio modi nemo.</p>
+        </div>
+    </article>
+</webui-make-clickable>
+`;

ui/stories/6. Web Components Or Custom Elements/WebUIMakeClickable/WebUIMakeClickable.mdx

@@ -0,0 +1,11 @@
+import { Meta, Canvas } from '@storybook/blocks';
+import * as WebUIMakeClickable from './WebUIMakeClickable.stories';
+
+<Meta of={WebUIMakeClickable} />
+
+# `<webui-make-clickable>`
+- The entire custom element is made clickable via JavaScript.
+- The primary URL is mapped to either a `data-url` attribute on any link, or by the first link, inside the custom element.
+- CSS `focus-within` is utilised to add a focus indicator when the custom element, or any of its descendents, receives keyboard `focus`.
+
+<Canvas of={WebUIMakeClickable.WebUIMakeClickable} />

ui/stories/6. Web Components Or Custom Elements/WebUIMakeClickable/WebUIMakeClickable.stories.js

@@ -0,0 +1,15 @@
+import { WebUIMakeClickableHtml } from './WebUIMakeClickable';
+
+export default {
+    title: 'Web Components Or Custom Elements/<webui-make-clickable>',
+    parameters: {
+        status: {
+            type: 'stable',
+        },
+    },
+};
+
+export const WebUIMakeClickable = {
+    render: () => WebUIMakeClickableHtml(),
+};
+WebUIMakeClickable.storyName = '<webui-make-clickable>';