feat(navigation-universal): add <rh-navigation-universal>

elements/rh-navigation-universal/README.md

@@ -0,0 +1,34 @@
+# Universal Navigation
+
+A universal navigation is a navigation above the primary navigation
+that shows users links to highly trafficed Red Hat resources.
+
+## Installation
+
+If using npm/bundlers:
+
+```bash
+npm install @rhds/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@rhds/elements/rh-navigation-universal/rh-navigation-universal.js';
+```
+
+## Usage
+
+Generally, a universal navigation is placed directly after the page's
+skip to main content link. Populate it with the appropriate links. 
+
+```html
+<rh-navigation-universal>
+  <ul>
+    <li><a href="https://access.redhat.com/management/">Subscriptions</a></li>
+    <li><a href="https://access.redhat.com/downloads/">Downloads</a></li>
+    <li><a href="https://console.redhat.com/">Red Hat Console</a></li>
+    <li><a href="https://access.redhat.com/support/">Get Support</a></li>
+  </ul>
+</rh-navigation-universal>
+```

elements/rh-navigation-universal/demo/rh-navigation-universal.html

@@ -0,0 +1,106 @@
+<rh-navigation-universal>
+  <a slot="personalization-link" href="#">Large retailer delivers apps faster with Red Hat automation</a>
+  <ul>
+    <li><a href="https://access.redhat.com/">Support</a></li>
+    <li><a href="https://docs.redhat.com/en">Documentation</a></li>
+    <li><a href="https://cloud.redhat.com/">Console</a></li>
+    <li><a href="https://developers.redhat.com/">Developers</a></li>
+    <li><a href="https://www.redhat.com/en/products/trials">Start a trial</a></li>
+    <li>
+      <rh-navigation-universal-dropdown>
+        <ul>
+          <li>For customers
+            <ul>
+              <li><a href="https://access.redhat.com/">Customer support</a></li>
+              <li><a href="https://access.redhat.com/management">Subscription management</a></li>
+              <li><a href="https://access.redhat.com/support/cases">Support cases</a></li>
+              <li><a href="https://catalog.redhat.com/">Red Hat Ecosystem Catalog</a></li>
+              <li><a href="https://catalog.redhat.com/partners">Find a partner</a></li>
+            </ul>
+          </li>
+          <li>For partners
+            <ul>
+              <li><a href="https://connect.redhat.com/partner-admin/dashboard">Partner portal</a></li>
+              <li><a href="https://connect.redhat.com/en/support">Partner support</a></li>
+              <li><a href="https://connect.redhat.com/">Become a partner </a></li>
+            </ul>
+          </li>
+          <li>Try, buy, &amp; sell
+            <ul>
+              <li><a href="https://marketplace.redhat.com/en-us">Red Hat Marketplace</a></li>
+              <li><a href="https://www.redhat.com/en/store">Red Hat Store</a></li>
+              <li><a href="https://www.redhat.com/en/contact">Contact sales</a></li>
+              <li><a href="https://www.redhat.com/en/products/trials">Start a trial</a></li>
+            </ul>
+          </li>
+          <li>Learning resources
+            <ul>
+              <li><a href="https://docs.redhat.com/en">Documentation</a></li>
+              <li><a href="https://www.redhat.com/en/services/training-and-certification">Training and certification </a></li>
+              <li><a href="https://cloud.redhat.com/learn">Hybrid cloud learning hub</a></li>
+              <li><a href="https://www.redhat.com/en/interactive-labs">Interactive labs</a></li>
+              <li><a href="https://learn.redhat.com/">Learning community</a></li>
+              <li><a href="https://tv.redhat.com">Red Hat TV</a></li>
+            </ul>
+          </li>
+          <li>Open source communities
+            <ul>
+              <li><a href="https://www.ansible.com/community">Ansible</a></li>
+              <li><a href="https://access.redhat.com/accelerators">Global advocacy</a></li>
+              <li><a href="https://www.redhat.com/en/about/our-community-contributions">How we contribute</a></li>
+            </ul>
+          </li>
+        </ul>
+      </rh-navigation-universal-dropdown>
+    </li>
+  </ul>
+</rh-navigation-universal>
+
+<link rel="stylesheet" href="../rh-navigation-universal-lightdom.css">
+
+<script type="module">
+  import '@rhds/elements/rh-navigation-universal/rh-navigation-universal.js';
+</script>
+
+<style>
+  /* Sample styles for `<details>` dropdown links: */
+  rh-navigation-universal-dropdown ul {
+    padding-inline-start: 0;
+  }
+
+  @container nav-universal (min-width: 576px) {
+    rh-navigation-universal-dropdown > ul {
+      column-count: 2;
+    }
+  }
+
+  rh-navigation-universal-dropdown li {
+    font-size: var(--rh-font-size-body-text-md, 1rem) !important;
+    list-style-type: none;
+  }
+
+  rh-navigation-universal-dropdown > ul > li {
+    break-inside: avoid;
+    font-family: var(--rh-font-family-heading, RedHatDisplay, 'Red Hat Display', Helvetica, Arial, sans-serif) !important;
+    padding-block-start: 19px;
+  }
+
+  rh-navigation-universal-dropdown > ul > li > ul {
+    margin-block-end: var(--rh-space-lg, 16px);
+    padding-block-start: var(--rh-space-md, 8px);
+  }
+
+  rh-navigation-universal-dropdown > ul > li > ul > li {
+    line-height: var(--rh-line-height-body-text, 1.5);
+  }
+
+  rh-navigation-universal-dropdown > ul > li > ul a {
+    display: block;
+    padding-block: var(--rh-space-xs, 4px);
+    text-decoration: none;
+  }
+
+  rh-navigation-universal-dropdown > ul > li > ul :is(a:hover, a:focus) {
+    text-decoration: underline;
+  }
+</style>

elements/rh-navigation-universal/docs/00-overview.md

@@ -0,0 +1,8 @@
+## When to use
+
+  - ABCD
+  - XYZ0
+
+<div id="overview-image-description" class="visually-hidden">
+  Alt text for overview image goes here
+</div>

elements/rh-navigation-universal/docs/10-style.md

@@ -0,0 +1,11 @@
+## Style
+
+## Theme
+
+## Configuration
+
+## Placement
+
+## Space
+
+## Interaction states

elements/rh-navigation-universal/docs/20-guidelines.md

@@ -0,0 +1,3 @@
+## Usage
+
+A universal navigation is used to provide easy access to highly used links on every page of a site.

elements/rh-navigation-universal/docs/40-accessibility.md

@@ -0,0 +1,3 @@
+## Keyboard navigation
+
+Users will interact with the universal navigation using a keyboard.

elements/rh-navigation-universal/rh-navigation-universal-dropdown.css

@@ -0,0 +1,86 @@
+:host {
+  display: inline-block;
+  line-height: 1;
+}
+
+details {
+  color: var(--rh-color-white, #ffffff);
+  display: inline-block;
+  position: relative;
+}
+
+summary {
+  border-block-start: var(--rh-border-width-lg, 3px) solid transparent;
+  font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif);
+  font-size: var(--rh-font-size-body-text-sm, 0.875rem);
+  list-style-type: none;
+  padding: var(--rh-space-md, 8px);
+  position: relative;
+  user-select: none;
+  padding-inline-end: var(--rh-space-xl, 24px);
+}
+
+summary::-webkit-details-marker,
+summary::marker {
+  display: none;
+}
+
+summary:hover,
+details[open]:hover summary {
+  border-block-start-color: var(--rh-color-border-subtle);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+summary:focus-visible {
+  outline: var(--rh-border-width-sm, 1px) dashed var(--rh-color-white, #ffffff);
+  outline-offset: -1px;
+}
+
+summary:after {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M18.7 5.3c-.4-.4-1-.4-1.4 0L10 12.6 2.7 5.3c-.4-.4-1-.4-1.4 0-.4.4-.4 1 0 1.4s7.6 7.7 7.6 7.7c.3.3.7.4 1.1.4s.8-.1 1.1-.4l7.6-7.7c.4-.4.4-1 0-1.4Z' style='fill:%23fff'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-size: var(--_rh-navigation-universal-caret-size);
+  content: '';
+  display: inline-block;
+  block-size: var(--_rh-navigation-universal-caret-size);
+  inline-size: var(--_rh-navigation-universal-caret-size);
+  inset-block-start: 10px;
+  inset-inline-end: var(--rh-space-xs, 4px);
+  position: absolute;
+  transition: 0.2s;
+  will-change: rotate;
+}
+
+details[open] summary:after {
+  rotate: -180deg;
+}
+
+/* https://penote.com/html5/closing-html-details-tag-on-click-outside-with-only-css/ */
+details[open] summary:before {
+  content: '';
+  cursor: auto;
+  block-size: 100svh;
+  inline-size: 100svw;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+  position: fixed;
+}
+
+#details-content {
+  background-color: var(--rh-color-surface-lightest, #ffffff);
+  box-shadow: var(--rh-box-shadow-sm, 0 2px 4px 0 rgba(21, 21, 21, 0.2));
+  color: var(--rh-color-text-primary);
+  inset-block-start: 38px;
+  inset-inline-end: 0;
+  padding: var(--rh-space-xl, 24px);
+  position: absolute;
+  text-align: start;
+  inline-size: 300px;
+}
+
+@container nav-universal (min-width: 576px) {
+  #details-content {
+    inline-size: 500px;
+  }
+}

elements/rh-navigation-universal/rh-navigation-universal-dropdown.ts

@@ -0,0 +1,51 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators/custom-element.js';
+import { query } from 'lit/decorators/query.js';
+
+import styles from './rh-navigation-universal-dropdown.css';
+
+/**
+ * A universal navigation dropdown is an element that is slotted into
+ * the universal navigation. It uses the details and summary
+ * elements to create a dropdown menu inside universal navigation.
+ * @summary A dropdown sub component for universal navigation.
+ * @slot - Place content to display in the dropdown.
+ * @slot summary-label - The dropdown `<summary>` text. Defaults to "All Red Hat".
+ */
+
+@customElement('rh-navigation-universal-dropdown')
+export class RhNavigationUniversalDropdown extends LitElement {
+  static readonly styles = [styles];
+
+  @query('details') private detailsEl!: HTMLDetailsElement;
+  @query('summary') private summaryEl!: HTMLElement;
+
+  render() {
+    return html`
+      <details @keydown=${this.#closeDetails}>
+        <summary>
+          <slot name="summary-label">All Red Hat</slot>
+        </summary>
+        <div id="details-content">
+          <slot></slot>
+        </div>
+      </details>
+    `;
+  }
+
+  #closeDetails(event: KeyboardEvent): void {
+    if (!this.detailsEl.hasAttribute('open')) {
+      return;
+    }
+    if (event.code === 'Escape') {
+      this.summaryEl.focus();
+      this.detailsEl.removeAttribute('open');
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'rh-navigation-universal-dropdown': RhNavigationUniversalDropdown;
+  }
+}

elements/rh-navigation-universal/rh-navigation-universal-lightdom.css

@@ -0,0 +1,54 @@
+rh-navigation-universal {
+  --_rh-navigation-universal-caret-size: 12px;
+
+  container-name: nav-universal;
+  container-type: inline-size;
+}
+
+rh-navigation-universal > ul > li {
+  display: inline;
+  color: var(--rh-color-gray-20, #e0e0e0);
+}
+
+rh-navigation-universal-dropdown > ul > li {
+  color: var(--rh-color-gray-95, #151515);
+}
+
+rh-navigation-universal > ul > li:not(:last-child) {
+  border-inline-end: var(--rh-border-width-sm, 1px) solid var(--rh-color-gray-50, #707070);
+}
+
+rh-navigation-universal > ul > li > a {
+  border-block-start: var(--rh-border-width-lg, 3px) solid transparent;
+  color: var(--rh-color-white, #ffffff);
+  display: inline-block;
+  font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif);
+  font-size: var(--rh-font-size-body-text-sm, 0.875rem);
+  padding: var(--rh-space-md, 8px);
+  text-decoration: none;
+}
+
+rh-navigation-universal > ul > li > a:hover {
+  border-block-start-color: var(--rh-color-border-subtle);
+  cursor: pointer;
+}
+
+rh-navigation-universal > ul > li > a:focus-visible {
+  outline: var(--rh-border-width-sm, 1px) dashed var(--rh-color-white, #ffffff);
+  outline-offset: -1px;
+}
+
+rh-navigation-universal-dropdown :is(p, a, li) {
+  font-family: var(--rh-font-family-body-text, RedHatText, 'Red Hat Text', 'Noto Sans Arabic', 'Noto Sans Hebrew', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Malayalam', 'Noto Sans SC', 'Noto Sans TC', 'Noto Sans Thai', Helvetica, Arial, sans-serif);
+  font-size: var(--rh-font-size-body-text-sm, 0.875rem);
+}
+
+/* stylelint-disable-next-line no-descending-specificity */
+rh-navigation-universal [slot='personalization-link'] a {
+  color: white;
+  text-decoration: none;
+}
+
+rh-navigation-universal [slot='personalization-link'] a:is(:hover, :focus) {
+  text-decoration: underline;
+}