use webui-disclosure in navigation stories

basher · Apr 3, 2024 · 7a4ace3 · 7a4ace3
1 parent 9e0f2f4
commit 7a4ace3
Show file tree

Hide file tree

Showing 7 changed files with 252 additions and 277 deletions.
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": "2.1.4",
+    "version": "2.2.0",
     "license": "ISC",
     "repository": {
         "type": "git",

diff --git a/ui/src/stylesheets/components/_disclosure.scss b/ui/src/stylesheets/components/_disclosure.scss
diff --git a/ui/src/stylesheets/components/_index.scss b/ui/src/stylesheets/components/_index.scss
@@ -6,7 +6,6 @@
 @use 'button-group';
 @use 'card';
 @use 'clickable';
-@use 'disclosure';
 @use 'image';
 @use 'image-gallery';
 @use 'message';
@@ -16,7 +15,6 @@
 @use 'prose';
 @use 'responsive-media';
 @use 'search';
-@use 'share';
 @use 'skin';
 @use 'skiplinks';
 @use 'slider';

diff --git a/ui/src/stylesheets/components/_nav.scss b/ui/src/stylesheets/components/_nav.scss
@@ -44,6 +44,7 @@ Dependencies.
         border: $border-width-s solid;
         flex-direction: column;
         inset-block-start: 100%;
+        inset-inline-start: 0;
         padding: $gutter-m;
         position: absolute;
         z-index: z('popup');
@@ -84,7 +85,8 @@ Dependencies.
             flex-direction: column;
         }
 
-        &.is-js-enabled {
+        // Using <webui-disclosure> custom element.
+        webui-disclosure:defined {
             .nav__list {
                 background-color: $color-background;
                 border: $border-width-s solid;
@@ -95,19 +97,23 @@ Dependencies.
             }
         }
 
-        // With disclosure navigation.
+        // Hamburger with disclosure navigation.
         &.nav--disclosure {
-            > .nav__list {
-                align-items: unset;
-            }
-
-            .nav__item--has-dropdown {
-                display: unset;
-            }
-
-            .nav__list--dropdown {
-                border: 0;
-                position: relative;
+            webui-disclosure:defined {
+                /* stylelint-disable max-nesting-depth */
+                > .nav__list {
+                    align-items: unset;
+                }
+
+                .nav__item--has-dropdown {
+                    display: unset;
+                }
+
+                .nav__list--dropdown {
+                    border: 0;
+                    position: relative;
+                }
+                /* stylelint-enable max-nesting-depth */
             }
         }
     }

diff --git a/ui/src/stylesheets/components/_share.scss b/ui/src/stylesheets/components/_share.scss