diff --git a/ui/package.json b/ui/package.json index d389715..b9409e2 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": "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 deleted file mode 100644 index b9bed02..0000000 --- a/ui/src/stylesheets/components/_disclosure.scss +++ /dev/null @@ -1,11 +0,0 @@ -/* ----------------------------------------------------------------------------- -Dependencies. ----------------------------------------------------------------------------- -*/ -// @use '../base' as *; -// @use '../mixins' as *; - -.disclosure { - // -} diff --git a/ui/src/stylesheets/components/_index.scss b/ui/src/stylesheets/components/_index.scss index dda30be..6a8aeb4 100644 --- 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 index 524acc6..d022604 100644 --- 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 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 deleted file mode 100644 index 8877c05..0000000 --- a/ui/src/stylesheets/components/_share.scss +++ /dev/null @@ -1,22 +0,0 @@ -/* ----------------------------------------------------------------------------- -Dependencies. ----------------------------------------------------------------------------- -*/ -@use '../base' as *; -@use '../mixins' as *; - -.share { - display: none; - position: relative; - - &.is-js-enabled { - display: block; - } - - &__fallback { - align-items: center; - display: flex; - gap: $gutter-s; - } -} diff --git a/ui/stories/5. Components/Navigation/Navigation.js b/ui/stories/5. Components/Navigation/Navigation.js index 7a87105..04e893b 100644 --- a/ui/stories/5. Components/Navigation/Navigation.js +++ b/ui/stories/5. Components/Navigation/Navigation.js @@ -29,50 +29,52 @@ export const HamburgerNavigationHtml = () => ` class="nav nav--hamburger" id="navigation" aria-label="Primary" - data-module="disclosure" - data-disclosure-escape-key - data-disclosure-click-outside > - + + + Toggle menu + - + +
@@ -86,47 +88,47 @@ export const DisclosureNavigationHtml = () => ` aria-label="Primary" > +
diff --git a/ui/stories/5. Components/Navigation/Navigation.mdx b/ui/stories/5. Components/Navigation/Navigation.mdx index cf4a9d8..9630e92 100644 --- a/ui/stories/5. Components/Navigation/Navigation.mdx +++ b/ui/stories/5. Components/Navigation/Navigation.mdx @@ -21,14 +21,14 @@ import * as Navigation from './Navigation.stories'; ## Hamburger (with simple navigation) -- Uses the [disclosure](/story/components-disclosure-or-show-hide--disclosure) pattern to show/hide the navigation. +- Uses the [``](/docs/web-components-or-custom-elements-webui-disclosure--docs) custom element to show/hide the navigation. - The `ESC` key and clicking outside the navigation both close the hamburger navigation. - The disclosure button is placed **inside** the navigation region, allowing screen reader users who move to the `