add webui-notification 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.3.0",
+    "version": "2.4.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 Message from './modules/message';
 import Prose from './modules/prose';
 import RangeSlider from './modules/range-slider';
 import Search from './modules/search';
@@ -17,11 +16,11 @@ import demoAjaxFetchHTML from './modules/demo-ajax-fetch-html';
 import WebUIDisclosure from './web-components/webui-disclosure';
 import WebUIMakeClickable from './web-components/webui-make-clickable';
 import WebUIModal from './web-components/webui-modal';
+import WebUINotification from './web-components/webui-notification';
 import WebUIShare from './web-components/webui-share';
 
 export const uiInit = (): void => {
     FormValidate.start();
-    Message.start();
     RangeSlider.start();
     Search.start();
     Slider.start();
@@ -40,6 +39,8 @@ export const uiInit = (): void => {
         customElements.define('webui-make-clickable', WebUIMakeClickable);
     !customElements.get('webui-modal') &&
         customElements.define('webui-modal', WebUIModal);
+    !customElements.get('webui-notification') &&
+        customElements.define('webui-notification', WebUINotification);
     !customElements.get('webui-share') &&
         customElements.define('webui-share', WebUIShare);
 };

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

@@ -3,9 +3,7 @@ export default class WebUIMakeClickable extends HTMLElement {
 
     constructor() {
         super();
-
         this.link = this.querySelector('[data-url]') || this.querySelector('a');
-
         this.addEventListener('click', this);
     }
 

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

@@ -0,0 +1,14 @@
+export default class WebUIMakeNotification extends HTMLElement {
+    private btnClose: HTMLButtonElement | null;
+
+    constructor() {
+        super();
+        this.btnClose = this.querySelector('[data-close]');
+        this.btnClose?.addEventListener('click', this);
+    }
+
+    // Handle web component events from constructor().
+    handleEvent() {
+        this.setAttribute('hidden', '');
+    }
+}

ui/src/stylesheets/components/_index.scss

@@ -7,7 +7,6 @@
 @use 'card';
 @use 'image';
 @use 'image-gallery';
-@use 'message';
 @use 'nav';
 @use 'pagination';
 @use 'prose';

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

@@ -1,4 +1,5 @@
 @use 'webui-disclosure';
 @use 'webui-make-clickable';
 @use 'webui-modal';
+@use 'webui-notification';
 @use 'webui-share';

ui/src/stylesheets/components/_message.scss → ui/src/stylesheets/web-components/_webui-notification.scss

@@ -6,7 +6,7 @@ Dependencies.
 @use '../base' as *;
 @use '../mixins' as *;
 
-.message {
+webui-notification {
     align-items: flex-start;
     border: $border-width-s solid;
     display: flex;
@@ -17,22 +17,22 @@ Dependencies.
         max-inline-size: none;
     }
 
-    &--success {
+    &[data-success] {
         background: hsl(var(--color-accent-positive) / 15%);
         border-color: $color-success;
     }
 
-    &--warning {
+    &[data-warning] {
         background: hsl(var(--color-accent-neutral) / 15%);
         border-color: $color-notify;
     }
 
-    &--error {
+    &[data-error] {
         background: hsl(var(--color-accent-negative) / 15%);
         border-color: $color-error;
     }
 
-    &__close {
+    [data-close] {
         font-size: $icon-size-s;
         inset-block-start: calc($icon-size-s * -1);
         inset-inline-end: calc($icon-size-s * -1);

ui/stories/3. Layout/Flex/Flex.js

@@ -10,14 +10,13 @@ const style = `
 
 export const FlexHtml = (args) => `
 ${style}
-<div class="
-    flex
+<div class="flex
     ${args.growAllFlexItems === true ? 'flex--grow-all' : ''}
-    flex--${args.direction}
-    flex--${args.gap}
-    flex--${args.alignItems}
-    flex--${args.justifyContent}"
->
+    ${args.direction === undefined ? '' : `flex--${args.direction}`}
+    ${args.gap === undefined ? '' : `flex--${args.gap}`}
+    ${args.alignItems === undefined ? '' : `flex--${args.alignItems}`}
+    ${args.justifyContent === undefined ? '' : `flex--${args.justifyContent}`}
+">
     <div>Flex item 1 - lots more content<br><br>
     to demonstrate (default) equal height columns</div>
     <div>Flex item 2</div>

ui/stories/3. Layout/Grid/Grid.js

@@ -17,7 +17,7 @@ const style = `
 export const GridHtml = (args) => `
 ${style}
 <p>Try removing grid items via devtools to see how grid auto-arranges itself.</p>
-<div class=" grid grid--${args.gap}">
+<div class="grid ${args.gap === undefined ? '' : `${args.gap === undefined ? '' : `grid--${args.gap}`}`}">
     <div>Grid item 1 - lots more content<br><br>
     to demonstrate (default) equal height columns</div>
     <div>Grid item 2</div>
@@ -32,7 +32,7 @@ ${style}
 <p>Use semantic <code>&lt;ul&gt;</code> if it makes sense to have a <strong>list of related items</strong> rendered in a grid.</p>
 <p>For example, a gallery of images, or a collection of product cards.</p>
 
-<ul class="grid grid--${args.gap}">
+<ul class="grid ${args.gap === undefined ? '' : `grid--${args.gap}`}">
     <li>Grid item 1 - lots more content<br><br>
     to demonstrate (default) equal height columns</li>
     <li>Grid item 2</li>
@@ -45,22 +45,22 @@ ${style}
 export const Grid2EqualColsHtml = (args) => `
 ${style}
 <p>Divide a page (or section of a page) into <strong>equal width</strong> columns, etc.</p>
-<div class="grid grid--${args.gap}">
+<div class="grid ${args.gap === undefined ? '' : `grid--${args.gap}`}">
     <div>Col 1</div>
     <div>Col 2</div>
 </div>
 
 <br>
 <p>And here's another grid on same page.</p>
-<div class="grid grid--${args.gap}">
+<div class="grid ${args.gap === undefined ? '' : `grid--${args.gap}`}">
     <div>Col 1</div>
     <div>Col 2</div>
 </div>
 
 <br>
 <p>What if you <em>really</em> want 2 columns on small screens?<br>
 Use the <code>grid--2-cols@small</code> classname to override the <code>grid-template-columns</code>.</p>
-<div class="grid grid--2-cols@small grid--${args.gap}">
+<div class="grid grid--2-cols@small ${args.gap === undefined ? '' : `grid--${args.gap}`}">
     <div>Col 1</div>
     <div>Col 2</div>
 </div>
@@ -69,15 +69,15 @@ Use the <code>grid--2-cols@small</code> classname to override the <code>grid-tem
 export const Grid3EqualColsHtml = (args) => `
 ${style}
 <p>Divide a page (or section of a page) into <strong>equal width</strong> columns, etc.</p>
-<div class="grid grid--${args.gap}">
+<div class="grid ${args.gap === undefined ? '' : `grid--${args.gap}`}">
     <div>Col 1</div>
     <div>Col 2</div>
     <div>Col 3</div>
 </div>
 
 <br>
 <p>And here's another grid on same page.</p>
-<div class="grid grid--${args.gap}">
+<div class="grid ${args.gap === undefined ? '' : `grid--${args.gap}`}">
     <div>Col 1</div>
     <div>Col 2</div>
     <div>Col 3</div>
@@ -89,7 +89,7 @@ ${style}
 <p>All these examples use <code>container queries</code> in supported browsers, rather than <code>media queries</code>.<p>
 
 <div class="grid-container">
-    <div class="grid--asymmetric grid--${args.gap}">
+    <div class="grid--asymmetric ${args.gap === undefined ? '' : `grid--${args.gap}`}">
         <div>
             Asymmetric col 1<br>
             <b>Default width = 66.66%</b>
@@ -102,7 +102,7 @@ ${style}
 </div>
 
 <div class="grid-container">
-    <div class="grid--75-25 grid--${args.gap}">
+    <div class="grid--75-25 ${args.gap === undefined ? '' : `grid--${args.gap}`}">
         <div>
             Asymmetric col 1<br>
             Override width = 75%
@@ -115,7 +115,7 @@ ${style}
 </div>
 
 <div class="grid-container">
-    <div class="grid--25-75 grid--${args.gap}">
+    <div class="grid--25-75 ${args.gap === undefined ? '' : `grid--${args.gap}`}">
         <div>
             Asymmetric col 1<br>
             Override width = 25%

ui/stories/5. Components/Notification/Notification.mdx

@@ -0,0 +1,6 @@
+import { Meta } from '@storybook/blocks';
+
+<Meta title="Components/Notification" />
+
+# Notification
+- See the [`<webui-notification>`](/docs/web-components-or-custom-elements-webui-notification--docs) custom element.

ui/stories/5. Components/Message/Message.js → ui/stories/6. Web Components Or Custom Elements/WebUINotification/WebUINotification.js

@@ -1,5 +1,8 @@
-export const MessageTemplate = (args) => `
-<div class="message message--${args.messageType}" data-module="message">
+export const WebUINotificationHtml = (args) => `
+<webui-notification
+    ${args.notificationType === 'error' ? 'role="alert"' : 'role="status"'}
+    ${args.notificationType === undefined ? '' : `data-${args.notificationType}`}
+>
     <div class="stack">
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
         <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur?</p>
@@ -9,7 +12,7 @@ export const MessageTemplate = (args) => `
             ? `<button
             type="button"
             class="button button--icon message__close"
-            data-button="message-close"
+            data-close
         >
             <svg
                 aria-hidden="true"
@@ -22,5 +25,5 @@ export const MessageTemplate = (args) => `
         </button>`
             : ''
     }
-</div>
+</webui-notification>
 `;

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

@@ -0,0 +1,13 @@
+import { Meta, Canvas, Controls } from '@storybook/blocks';
+import * as WebUINotification from './WebUINotification.stories';
+
+<Meta of={WebUINotification} />
+
+# `<webui-notification>`
+
+## Accessibility considerations
+- Error notifications have an ARIA `role="error"`.
+- Other notifications have an ARIA `role="status"`.
+
+<Canvas of={WebUINotification.WebUINotification} />
+<Controls of={WebUINotification.WebUINotification} />

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

@@ -0,0 +1,24 @@
+import { WebUINotificationHtml } from './WebUINotification';
+
+export default {
+    title: 'Web Components Or Custom Elements/<webui-notification>',
+    parameters: {
+        status: {
+            type: 'stable',
+        },
+    },
+    argTypes: {
+        notificationType: {
+            control: 'select',
+            options: ['success', 'warning', 'error'],
+        },
+        hasCloseButton: {
+            control: 'boolean',
+        },
+    },
+};
+
+export const WebUINotification = {
+    render: (args) => WebUINotificationHtml(args),
+};
+WebUINotification.storyName = '<webui-notification>';