refactor(navigation-secondary): rename rh-secondary-nav to `rh-navi… (

#746) * refactor(navigation-secondary): rename `rh-secondary-nav` to `rh-navigation-secondary` * docs(navigation-secondary): update docs link for demo * docs(navgiation-secondary): improve demos with context-provider changes * docs(navigation-secondary): relative docs demo url
RedHat-UX · Mar 2, 2023 · acbb034 · acbb034
1 parent 2831b7e
commit acbb034
Show file tree

Hide file tree

Showing 29 changed files with 808 additions and 669 deletions.
diff --git a/.changeset/fifty-colts-cross.md b/.changeset/fifty-colts-cross.md
@@ -0,0 +1,9 @@
+---
+"@rhds/elements": major
+---
+
+Renamed `rh-secondary-nav` to `rh-navigation-secondary` 
+
+ - Renamed all sub components `rh-secondary-nav-*` to `rh-navigation-secondary-*` 
+ - Renamed all css custom properties `--rh-secondary-nav-*` to `--rh-navigation-secondary-*`
+ - Deprecated usage of `rh-secondary-nav-*` tags
diff --git a/docs/components/navigation-secondary.njk b/docs/components/navigation-secondary.njk
@@ -22,7 +22,7 @@ tags:
   <p>View a live version of this component to see how it can be customized.</p>
 
   <rh-cta>
-    <a href="https://ux.redhat.com/components/secondary-nav/demo/" target="_blank">View this component in action</a>
+     <a href="./demo/" target="_blank">View this component in action</a>
   </rh-cta>
 
 {%- endcall %}

diff --git a/elements/rh-secondary-nav/README.md → elements/rh-navigation-secondary/README.md b/elements/rh-secondary-nav/README.md → elements/rh-navigation-secondary/README.md
@@ -1,100 +1,41 @@
-## `<rh-secondary-nav>` Red Hat Secondary Navigation
+## `<rh-navigation-secondary>` Red Hat Secondary Navigation
 
 A non-primary navigation for product and subcategory navigation.
 
-- Demo url: *project-localhost-here*`/components/secondary-nav/demo/`
-
-[Docs pending]
+- Demo: https://ux.redhat.com/components/navigation-secondary/demo/
 
 ## Installation
 If using npm/bundlers:
+
 ```bash
 npm install @rhds/elements
 ```
+
 ```js
-import '@rhds/elements/rh-secondary-nav/rh-secondary-nav.js';
-```
-```html
-<link rel="stylesheet" href="https://unpkg.com/@rhds/elements/elements/rh-secondary-nav/rh-secondary-nav-lightdom.css" />
+import '@rhds/elements/rh-navigation-secondary/rh-navigation-secondary.js';
 ```
 
-Via CDN with import maps (_recommended_):
 ```html
-<!--
-  JSPM Generator Import Map
-  Edit URL: https://generator.jspm.io/#Y2NhYGBkDM0rySzJSU1hcCjKSCnWT81JzU3NKyl2MNQz0DPQTUotSdQzNAUAgcdAtSsA
--->
-<script type="importmap">
-{
-  "imports": {
-    "@rhds/elements": "https://ga.jspm.io/npm:@rhds/[email protected]/rhds.min.js"
-  },
-  "scopes": {
-    "https://ga.jspm.io/": {
-      "@lit/reactive-element": "https://ga.jspm.io/npm:@lit/[email protected]/reactive-element.js",
-      "@lit/reactive-element/decorators/custom-element.js": "https://ga.jspm.io/npm:@lit/[email protected]/decorators/custom-element.js",
-      "@lit/reactive-element/decorators/event-options.js": "https://ga.jspm.io/npm:@lit/[email protected]/decorators/event-options.js",
-      "@lit/reactive-element/decorators/property.js": "https://ga.jspm.io/npm:@lit/[email protected]/decorators/property.js",
-      "@lit/reactive-element/decorators/query-all.js": "https://ga.jspm.io/npm:@lit/[email protected]/decorators/query-all.js",
-      "@lit/reactive-element/decorators/query-assigned-elements.js": "https://ga.jspm.io/npm:@lit/[email protected]/decorators/query-assigned-elements.js",
-      "@lit/reactive-element/decorators/query-assigned-nodes.js": "https://ga.jspm.io/npm:@lit/[email protected]/decorators/query-assigned-nodes.js",
-      "@lit/reactive-element/decorators/query-async.js": "https://ga.jspm.io/npm:@lit/[email protected]/decorators/query-async.js",
-      "@lit/reactive-element/decorators/query.js": "https://ga.jspm.io/npm:@lit/[email protected]/decorators/query.js",
-      "@lit/reactive-element/decorators/state.js": "https://ga.jspm.io/npm:@lit/[email protected]/decorators/state.js",
-      "@lrnwebcomponents/code-sample": "https://ga.jspm.io/npm:@lrnwebcomponents/[email protected]/code-sample.js",
-      "@patternfly/pfe-collapse/pfe-collapse-panel.js": 
-      "https://ga.jspm.io/npm:@patternfly/[email protected]/pfe-collapse-panel.js",
-      "@patternfly/pfe-core": "https://ga.jspm.io/npm:@patternfly/[email protected]/core.js",
-      "@patternfly/pfe-core/controllers/color-context.js": "https://ga.jspm.io/npm:@patternfly/[email protected]/controllers/color-context.js",
-      "@patternfly/pfe-core/controllers/logger.js": "https://ga.jspm.io/npm:@patternfly/[email protected]/controllers/logger.js",
-      "@patternfly/pfe-core/controllers/slot-controller.js": "https://ga.jspm.io/npm:@patternfly/[email protected]/controllers/slot-controller.js",
-      "@patternfly/pfe-core/decorators.js": "https://ga.jspm.io/npm:@patternfly/[email protected]/decorators.js",
-      "@patternfly/pfe-core/decorators/bound.js": "https://ga.jspm.io/npm:@patternfly/[email protected]/decorators/bound.js",
-      "@patternfly/pfe-core/decorators/observed.js": "https://ga.jspm.io/npm:@patternfly/[email protected]/decorators/observed.js",
-      "@patternfly/pfe-core/functions/deprecatedCustomEvent.js": "https://ga.jspm.io/npm:@patternfly/[email protected]/functions/deprecatedCustomEvent.js",
-      "@patternfly/pfe-core/functions/random.js": "https://ga.jspm.io/npm:@patternfly/[email protected]/functions/random.js",
-      "@patternfly/pf-icon": "https://ga.jspm.io/npm:@patternfly/[email protected]/pf-icon.js",
-      "@patternfly/pfe-modal": "https://ga.jspm.io/npm:@patternfly/[email protected]/pfe-modal.js",
-      "lit": "https://ga.jspm.io/npm:[email protected]/index.js",
-      "lit-element/lit-element.js": "https://ga.jspm.io/npm:[email protected]/lit-element.js",
-      "lit-html": "https://ga.jspm.io/npm:[email protected]/lit-html.js",
-      "lit-html/directives/class-map.js": "https://ga.jspm.io/npm:[email protected]/directives/class-map.js",
-      "lit-html/directives/if-defined.js": "https://ga.jspm.io/npm:[email protected]/directives/if-defined.js",
-      "lit-html/directives/style-map.js": "https://ga.jspm.io/npm:[email protected]/directives/style-map.js",
-      "lit-html/static.js": "https://ga.jspm.io/npm:[email protected]/static.js",
-      "lit/decorators.js": "https://ga.jspm.io/npm:[email protected]/decorators.js",
-      "lit/directives/class-map.js": "https://ga.jspm.io/npm:[email protected]/directives/class-map.js",
-      "lit/directives/if-defined.js": "https://ga.jspm.io/npm:[email protected]/directives/if-defined.js",
-      "lit/directives/style-map.js": "https://ga.jspm.io/npm:[email protected]/directives/style-map.js",
-      "lit/static-html.js": "https://ga.jspm.io/npm:[email protected]/static-html.js",
-      "tslib": "https://ga.jspm.io/npm:[email protected]/tslib.es6.js"
-    }
-  }
-}
-</script>
-
-<!-- ES Module Shims: Import maps polyfill for modules browsers without import maps support (all except Chrome 89+) -->
-<script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js" crossorigin="anonymous"></script>
+<link rel="stylesheet" href="node_modules/@rhds/elements/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css" />
 ```
 
 ## Questions and Feedback
 Questions? Comments? Feedback? Need help installing or implementing?
 Please [open a discussion thread](https://github.com/orgs/RedHat-UX/discussions/categories/q-a) here on GitHub. The Design Systems team will help 
 
-
 ## Example
 
 ```html
-<rh-secondary-nav role="navigation">
+<rh-navigation-secondary role="navigation">
   <a href="#" slot="logo">
     Red Hat Ansible Automation Platform
   </a>
   <ul slot="nav">
     <li>
-      <rh-secondary-nav-dropdown>
+      <rh-navigation-secondary-dropdown>
         <a href="#" slot="link">Explore</a>
-        <rh-secondary-nav-menu slot="menu">
-          <rh-secondary-nav-menu-section>
+        <rh-navigation-secondary-menu slot="menu">
+          <rh-navigation-secondary-menu-section>
             <h3 slot="header" id="ansible-platform">
               <a href="#">Why Red Hat Ansible Automation Platforms</a>
             </h3>
@@ -119,8 +60,8 @@ Please [open a discussion thread](https://github.com/orgs/RedHat-UX/discussions/
             <rh-cta slot="cta">
               <a href="#">Section Level CTA</a>
             </rh-cta>
-          </rh-secondary-nav-menu-section>
-          <rh-secondary-nav-menu-section>
+          </rh-navigation-secondary-menu-section>
+          <rh-navigation-secondary-menu-section>
             <h3 slot="header">
               <a href="#">Additional Features</a>
             </h3>
@@ -153,14 +94,14 @@ Please [open a discussion thread](https://github.com/orgs/RedHat-UX/discussions/
             <rh-cta slot="cta">
               <a href="#">Section Level CTA</a>
             </rh-cta>
-          </rh-secondary-nav-menu-section>
-        </rh-secondary-nav-menu>
-      </rh-secondary-nav-dropdown>
+          </rh-navigation-secondary-menu-section>
+        </rh-navigation-secondary-menu>
+      </rh-navigation-secondary-dropdown>
     </li>
      <li>
-      <rh-secondary-nav-dropdown>
+      <rh-navigation-secondary-dropdown>
         <a href="#" slot="link">Use cases</a>
-        <rh-secondary-nav-menu slot="menu">
+        <rh-navigation-secondary-menu slot="menu">
           <ul>
             <li>
               <a href="https://www.ansible.com/integrations/cloud">Cloud Automation <pf-icon icon="new-window" color="info" size="sm"></pf-icon></a>
@@ -175,18 +116,18 @@ Please [open a discussion thread](https://github.com/orgs/RedHat-UX/discussions/
               <a href="https://www.ansible.com/use-cases">See all <pf-icon icon="new-window" color="info" size="sm"></pf-icon></a>
             </li>
           </ul>
-        </rh-secondary-nav-menu>
-      </rh-secondary-nav-dropdown>
+        </rh-navigation-secondary-menu>
+      </rh-navigation-secondary-dropdown>
      </li>
     <li><a href="https://docs.ansible.com/">Documentation</a></li>
   </ul>
   <rh-cta slot="cta">
     <a href="https://www.redhat.com/en/technologies/management/ansible/get-started">Get started</a>
   </rh-cta>
-</rh-secondary-nav>
+</rh-navigation-secondary>
 ```
 
-## `<rh-secondary-nav>` 
+## `<rh-navigation-secondary>` 
 
 ### Slots
 
@@ -199,8 +140,8 @@ Please [open a discussion thread](https://github.com/orgs/RedHat-UX/discussions/
 ### Attributes
 | Name | Value | Description | Required | Example |
 |------|-------|-------------|----------|---------| 
-| **role** | navigation | Ensures an accessible experience before or on failed upgrade | Yes |  `<rh-secondary-nav role="navigation">` |
-| **color-palette** | "lighter" (default),  "dark" | Sets the color theme for the navigation | No | `<rh-secondary-nav color-palette="dark">` |
+| **role** | navigation | Ensures an accessible experience before or on failed upgrade | Yes |  `<rh-navigation-secondary role="navigation">` |
+| **color-palette** | "lighter" (default),  "dark" | Sets the color theme for the navigation | No | `<rh-navigation-secondary color-palette="dark">` |
 
 ### CSS Parts
 | Name | Description |
@@ -213,54 +154,54 @@ Please [open a discussion thread](https://github.com/orgs/RedHat-UX/discussions/
 
 | Name | Default Value |
 |------|-------------|
-| `--rh-secondary-nav-logo-max-width` | `10em` |
-| `--rh-secondary-nav-z-index` | `102` | 
-| `--rh-secondary-nav-overlay-z-index` | `-1` |
+| `--rh-navigation-secondary-logo-max-width` | `10em` |
+| `--rh-navigation-secondary-z-index` | `102` | 
+| `--rh-navigation-secondary-overlay-z-index` | `-1` |
 
 
 ### Minimum example
 
 ```html
-<rh-secondary-nav role="navigation">
+<rh-navigation-secondary role="navigation">
   <a href="#" slot="logo">Logo</a>
   <ul slot="nav">
     <li><a href="#">Link 1</a></li>
     <li><a href="#">Link 2</a></li>
     <li><a href="#">Link 3</a></li>
   </ul>
-</rh-secondary-nav>
+</rh-navigation-secondary>
 ```
 
-## `<rh-secondary-nav-dropdown>`
+## `<rh-navigation-secondary-dropdown>`
 
-An `optional` component which replaces an href in the unordered list in the nav slot of the parent `rh-secondary-nav` and is used with it's companion component `<rh-secondary-nav-menu>`
+An `optional` component which replaces an href in the unordered list in the nav slot of the parent `rh-navigation-secondary` and is used with it's companion component `<rh-navigation-secondary-menu>`
 
 ### Slots
 | Name | Description | Required | Example |
 |------|-------------|----------|---------|
 | **link** | Link to upgrade to a dropdown | Yes | `<a slot="link" href="#">Dropdown</a>` |
-| **menu** | rh-secondary-nav-menu component | Yes | `<rh-secondary-nav-menu slot="menu">...</rh-secondary-nav-menu>` |
+| **menu** | rh-navigation-secondary-menu component | Yes | `<rh-navigation-secondary-menu slot="menu">...</rh-navigation-secondary-menu>` |
 
 
 ### CSS Parts
 | Name | Description |
 |------|-------------|
 | **container** | Override wrapper container styles |
 
-## `<rh-secondary-nav-menu>` 
+## `<rh-navigation-secondary-menu>` 
 
 ### Slots
 | Name | Description | Required | Example |
 |------|-------------|----------|---------|
-| **default** | Default slot | Yes | `<rh-secondary-nav-menu><ul>...</ul></rh-secondary-nav-menu>` |
--  The default slot should be used with either a `<rh-secondary-nav-menu-section>` or an `<ul>` or `<ol>` list of links
+| **default** | Default slot | Yes | `<rh-navigation-secondary-menu><ul>...</ul></rh-navigation-secondary-menu>` |
+-  The default slot should be used with either a `<rh-navigation-secondary-menu-section>` or an `<ul>` or `<ol>` list of links
 
 
 ### Attributes
 
 | Name | Value | Required | Example |
 |------|-------------|----------|---------|
-| **layout** | `fixed-width`, `full-width` (default) | No | `<rh-secondary-nav-menu>Content</rh-secondary-nav-menu>` |
+| **layout** | `fixed-width`, `full-width` (default) | No | `<rh-navigation-secondary-menu>Content</rh-navigation-secondary-menu>` |
 
 -  The `fixed-width` menu layout only uses the horizontal space in which it's content needs.
 - The `full-width` layout style menu spans the entire horizontal space of the viewport.
@@ -269,9 +210,9 @@ An `optional` component which replaces an href in the unordered list in the nav
 
 | Name | Default Value |
 |------|-------------|
-| `--rh-secondary-nav-menu-section-grid` | `repeat(auto-fit, minmax(15.5em, 1fr))` | 
-| `--rh-secondary-nav-menu-section-grid-gap` | `2em` |
-| `--rh-secondary-nav-menu-content-max-width` | `1136px` |
+| `--rh-navigation-secondary-menu-section-grid` | `repeat(auto-fit, minmax(15.5em, 1fr))` | 
+| `--rh-navigation-secondary-menu-section-grid-gap` | `2em` |
+| `--rh-navigation-secondary-menu-content-max-width` | `1136px` |
 
 ### CSS Parts
 | Name | Description |
@@ -282,27 +223,27 @@ An `optional` component which replaces an href in the unordered list in the nav
 
 ### Minimum example
 ```html
-<rh-secondary-nav role="navigation">
+<rh-navigation-secondary role="navigation">
   <a href="#" slot="logo">Logo</a>
   <ul slot="nav">
     <li><a href="#">Link 1</a></li>
     <li>
-      <rh-secondary-nav-dropdown>
+      <rh-navigation-secondary-dropdown>
         <a slot="link">Link 2</a>
-        <rh-secondary-nav-menu slot="menu" layout="fixed-width"> <!-- layout attribute optional -->
+        <rh-navigation-secondary-menu slot="menu" layout="fixed-width"> <!-- layout attribute optional -->
           <ul>
             <li><a href="#">Link 2.1</a></li>
             <li><a href="#">Link 2.2</a></li>
           </ul>
-        </rh-secondary-nav-menu>
-      </rh-secondary-nav-dropdown>
+        </rh-navigation-secondary-menu>
+      </rh-navigation-secondary-dropdown>
     </li>
     <li><a href="#">Link 3</a></li>
   </ul>
-</rh-secondary-nav>
+</rh-navigation-secondary>
 ```
 
-## `<rh-secondary-nav-menu-section>` 
+## `<rh-navigation-secondary-menu-section>` 
 
 ### Slots
 | Name | Description | Required | Example |
@@ -319,25 +260,25 @@ An `optional` component which replaces an href in the unordered list in the nav
 
 ### Minimum example
 ```html
-<rh-secondary-nav role="navigation">
+<rh-navigation-secondary role="navigation">
   <a href="#" slot="logo">Logo</a>
   <ul slot="nav">
     <li><a href="#">Link 1</a></li>
     <li>
-      <rh-secondary-nav-dropdown>
+      <rh-navigation-secondary-dropdown>
         <a slot="link">Link 2</a>
-        <rh-secondary-nav-menu slot="menu" layout="fixed-width"> <!-- layout attribute optional -->
-          <rh-secondary-nav-menu-section>
+        <rh-navigation-secondary-menu slot="menu" layout="fixed-width"> <!-- layout attribute optional -->
+          <rh-navigation-secondary-menu-section>
             <h3 slot="header">Title of Links</h3>
             <ul slot="links">
               <li><a href="#">Link 2.1</a></li>
               <li><a href="#">Link 2.2</a></li>
             </ul>
-          </rh-secondary-nav-menu>
-        <rh-secondary-nav-menu-section>
-      </rh-secondary-nav-dropdown>
+          </rh-navigation-secondary-menu>
+        <rh-navigation-secondary-menu-section>
+      </rh-navigation-secondary-dropdown>
     </li>
     <li><a href="#">Link 3</a></li>
   </ul>
-</rh-secondary-nav>
+</rh-navigation-secondary>
 ```