diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html index 63999e440..451944bf4 100644 --- a/docs/_layouts/default.html +++ b/docs/_layouts/default.html @@ -27,7 +27,7 @@
@@ -41,12 +41,12 @@ Jump to main content - @@ -92,7 +92,7 @@
  • Breadcrumbs
  • Buttons
  • Cards
    • -
  • Contextual menu
    Updated
    • +
  • Contextual menu
  • Grid
  • Heading icon
  • Icons
    • @@ -106,7 +106,7 @@
  • Media object
  • Modal
  • Muted heading
    • -
  • Navigation
    • +
  • Navigation
    Updated
  • Notifications
  • Pagination
  • Quotes
    • diff --git a/docs/component-status.md b/docs/component-status.md index f7305080a..f406a82c0 100644 --- a/docs/component-status.md +++ b/docs/component-status.md @@ -10,14 +10,42 @@ context: When we add, make significant updates, or deprecate a component we update their status so that it’s clear what’s available to use. Check back here anytime to see current status information. -### What's new in Vanilla 2.7 +### What's new in Vanilla 2.8 - - - + + + + + + + + + + + + + + + + + + + + +
    ComponentStatusNotesComponentStatusVersionNotes
    Navigation
    Updated
    		2.8.0New navigation classes (p-navigation__items, p-navigation__item, p-navigation__link) were added to replace existing (p-navigation__links, p-navigation__link, and classless <a>).
    Navigation
    Deprecated
    		2.8.0Navigation classes p-navigation__links, p-navigation__link, and classless <a> are deprecated and will be removed in future release v3.0. Please use new class names (p-navigation__items, p-navigation__item, p-navigation__link) instead.
    + +#### Previously in Vanilla + + + + + + + + @@ -25,96 +53,84 @@ When we add, make significant updates, or deprecate a component we update their + + + - -
    ComponentStatusVersionNotes
    Contextual menu
    Updated
    		2.7.0 Added dark theme to contextual menu.
    Heading classes
    Updated
    		2.7.0 New heading classes with numbers (p-heading--1, ...) were added for consistency with other class names we use.
    Heading classes
    Deprecated
    		2.7.0 Heading classes with numbers as words (p-heading--one, --two, ...) are deprecated and will be removed in future release v3.0. Please use class names with numbers (p-heading--1, --2, ...) instead.
    -#### Previously in Vanilla 2.6 - - - - - - - - - - + + + - -
    ComponentStatusNotes
    Range input
    New
    		2.6.0 Styling of Slider component was added to all <input type="range"> elements by default. This makes p-slider class optional for styling range inputs.
    Checkbox, radio button
    Updated
    		2.6.0 New `is-table-header` added to properly align checkboxes and radio buttons used in table headers.
    Slider
    Updated
    		2.6.0 Styling of Slider component was added to all <input type="range"> elements by default. This makes p-slider class optional for styling range inputs.
    -#### Previously in Vanilla 2.5 - - - - - - - - - - + + + + + + + +
    ComponentStatusNotes
    Contextual menu
    New
    		2.5.0 Optional state indicator was added to contextual menu
    Font metrics
    New
    		2.5.0 Added u-visualise-font-metrics utility to visualise font metrics
    Line length
    New
    		2.5.0 Added $max-width--default variable and u-no-max-width utility to control line length
    Table cell padding overlap
    New
    		2.5.0 Added u-table-cell-padding-overlap utility to overlap table cell padding
    Truncation
    New
    		2.5.0 Added u-truncate utility to truncate text with ellipsis
    Social icons
    Updated
    		2.5.0 Updated style of social icons. Added new .p-icon--rss and p-icon--email icons.
    Social icons
    Deprecated
    		2.5.0 We will be removing p-icon--canonical and p-icon--ubuntu from social icon set in future release v3.0
    diff --git a/docs/examples/patterns/navigation/_script.js b/docs/examples/patterns/navigation/_script.js new file mode 100644 index 000000000..e980e4862 --- /dev/null +++ b/docs/examples/patterns/navigation/_script.js @@ -0,0 +1,80 @@ +/** + Toggles visibility of given subnav by toggling is-active class to it + and setting aria-hidden attribute on dropdown contents. + @param {HTMLElement} subnav Root element of subnavigation to open. +*/ +function toggleSubnav(subnav, open) { + if (open) { + subnav.classList.add('is-active'); + } else { + subnav.classList.remove('is-active'); + } + + var toggle = subnav.querySelector('.p-subnav__toggle'); + + if (toggle) { + var dropdown = document.getElementById(toggle.getAttribute('aria-controls')); + + if (dropdown) { + dropdown.setAttribute('aria-hidden', open ? 'true' : false); + } + } +} + +/** + Closes all subnavs on the page. +*/ +function closeAllSubnavs() { + var subnavs = document.querySelectorAll('.p-subnav'); + for (var i = 0, l = subnavs.length; i < l; i++) { + toggleSubnav(subnavs[i], false); + } +} + +/** + Attaches click event listener to subnav toggle. + @param {HTMLElement} subnavToggle Toggle element of subnavigation. +*/ +function setupSubnavToggle(subnavToggle) { + subnavToggle.addEventListener('click', function(event) { + event.preventDefault(); + event.stopPropagation(); + + var subnav = subnavToggle.parentElement; + var isActive = subnav.classList.contains('is-active'); + + closeAllSubnavs(); + if (!isActive) { + toggleSubnav(subnav, true); + } + }); +} + +// Setup all subnav toggles on the page +var subnavToggles = document.querySelectorAll('.p-subnav__toggle'); + +for (var i = 0, l = subnavToggles.length; i < l; i++) { + setupSubnavToggle(subnavToggles[i]); +} + +// Close all menus if anything else on the page is clicked +document.addEventListener('click', function(event) { + var target = event.target; + + if (target.closest) { + if (!target.closest('.p-subnav__toggle') && !target.closest('.p-subnav__item')) { + closeAllSubnavs(); + } + } else if (target.msMatchesSelector) { + // IE friendly `Element.closest` equivalent + // as in https://developer.mozilla.org/en-US/docs/Web/API/Element/closest + do { + if (target.msMatchesSelector('.p-subnav__toggle') || target.msMatchesSelector('.p-subnav__item')) { + return; + } + target = target.parentElement || target.parentNode; + } while (target !== null && target.nodeType === 1); + + closeAllSubnavs(); + } +}); diff --git a/docs/examples/patterns/navigation/default-dark.html b/docs/examples/patterns/navigation/default-dark.html index 1effa55d8..9dbfbb422 100644 --- a/docs/examples/patterns/navigation/default-dark.html +++ b/docs/examples/patterns/navigation/default-dark.html @@ -8,7 +8,7 @@
    @@ -19,18 +19,18 @@ Jump to main content -