@brightspace-ui/labs 2.31.0 → 2.32.0

package/package.json

@@ -47,7 +47,7 @@
     "./components/pager-numeric.js": "./src/components/pagination/pager-numeric.js",
     "./components/view-toggle.js": "./src/components/view-toggle/view-toggle.js",
     "./components/wizard.js": "./src/components/wizard/wizard.js",
-    "./components/wizard-step.js": "./src/components/wizard/step.js",
+    "./components/wizard-step.js": "./src/components/wizard/wizard-step.js",
     "./controllers/computed-value.js": "./src/controllers/computed-values/computed-value.js",
     "./controllers/computed-values.js": "./src/controllers/computed-values/computed-values.js",
     "./controllers/language-listener.js": "./src/controllers/language-listener/language-listener.js",
@@ -114,5 +114,5 @@
     "resize-observer-polyfill": "^1",
     "webvtt-parser": "^2.1.2"
   },
-  "version": "2.31.0"
+  "version": "2.32.0"
 }

package/src/components/navigation/README.md

@@ -1,11 +1,18 @@
-## Usage: Primary Components
+# Navigation
 
+A series of web components for top level navigation used on D2L pages. The existing components are completed but there is additional functionality for these components on the backlog.
+
+<!-- docs: start hidden content -->
+> **Primary Components**
+>
 > These are the components that should be used in the **VAST MAJORITY** of use cases
+<!-- docs: end hidden content -->
 
-### d2l-labs-navigation
+## Navigation [d2l-labs-navigation]
 
 Add the `d2l-labs-navigation` component, and provide sub elements `d2l-labs-navigation-main-header` & `d2l-labs-navigation-main-footer` (along with their respective slot contents).
 
+<!-- docs: demo code display:block -->
 ```html
 <script type="module">
   import '@brightspace-ui/labs/components/navigation/navigation.js';
@@ -13,38 +20,39 @@ Add the `d2l-labs-navigation` component, and provide sub elements `d2l-labs-navi
   import '@brightspace-ui/labs/components/navigation/navigation-main-footer.js';
 </script>
 
-<d2l-labs-navigation>
-	<d2l-labs-navigation-main-header>
-		<div slot="left" class="d2l-labs-navigation-header-left">This should be on the left.  As the width changes it shrinks as needed.</div>
-
-		<div slot="right" class="d2l-labs-navigation-header-right">This should be on the right.  It doesn't shrink.</div>
-	</d2l-labs-navigation-main-header>
-	<d2l-labs-navigation-main-footer>
-		<div slot="main" class="d2l-labs-navigation-s-main-wrapper">Stuff goes in here (small border above and below)</div>
-	</d2l-labs-navigation-main-footer>
+<d2l-labs-navigation has-skip-nav>
+  <d2l-labs-navigation-main-header>
+    <div slot="left" class="d2l-labs-navigation-header-left" style="background-color: pink;">This should be on the left.  As the width changes it shrinks as needed.</div>
+    <div slot="right" class="d2l-labs-navigation-header-right" style="background-color: lightblue;">This should be on the right.  It doesn't shrink.</div>
+  </d2l-labs-navigation-main-header>
+  <d2l-labs-navigation-main-footer>
+    <div slot="main" class="d2l-labs-navigation-s-main-wrapper">Stuff goes in here (small border above and below)</div>
+  </d2l-labs-navigation-main-footer>
 </d2l-labs-navigation>
 ```
 
 ***Relevant CSS class name:***
 * `--d2l-labs-navigation-shadow-drop-border-display`: The default value is `block`, but this property can be used to hide the shadow by setting it to `none`.
 
-### d2l-labs-navigation-immersive
+## Immersive Navigation [d2l-labs-navigation-immersive]
 
 Add the `d2l-labs-navigation-immersive` component, providing values for the `backLinkHref` & `backLinkText`. Additionally, you may override any of the 3 slots (`left`, `middle`, `right`).
 Please note that overridding the `left` slot will prevent the Back link from displaying. This should only be done in very specialized cases.
 
+<!-- docs: demo code -->
 ```html
 <script type="module">
   import '@brightspace-ui/labs/components/navigation/navigation-immersive.js';
+  import '@brightspace-ui/labs/components/navigation/navigation-iterator.js';
 </script>
 
-<d2l-labs-navigation-immersive back-link-href="https://www.d2l.com" back-link-text="Back to D2L">
-	<div class="d2l-typography d2l-body-standard" slot="middle">
-		<p>Economics 101</p>
-	</div>
-	<div slot="right">
-		...
-	</div>
+<d2l-labs-navigation-immersive back-link-href="https://www.example.org" back-link-text="Back to D2L">
+  <div class="d2l-typography d2l-body-standard" slot="middle">
+    <p>Economics 101</p>
+  </div>
+  <div slot="right">
+    <d2l-labs-navigation-iterator></d2l-labs-navigation-iterator>
+  </div>
 </d2l-labs-navigation-immersive>
 ```
 
@@ -54,12 +62,15 @@ Optionally:
 - Overflow can be enabled to facilitate components like dropdowns by including the `allow-overflow` boolean attribute
 - A shorter version of the back text can be provided by setting the `back-link-text-short` attribute
 
-## Secondary Components
+---
 
+<!-- docs: start hidden content -->
+> **Secondary Components**
+>
 > These are the components that make up the Primary Components. There might be an edge case or two where it makes sense to use one of these in isolation,
 > but **PLEASE STRONGLY CONSIDER** using a Primary Component instead.
 
-### d2l-labs-navigation-band
+## Navigation Band [d2l-labs-navigation-band]
 
 ```html
 <script type="module">
@@ -75,9 +86,7 @@ The `d2l-labs-navigation-band` also includes a `slot` with a custom scrollbar an
 * `--d2l-branding-primary-color`: Used to customize the colour of the top navigation band.
 * `--d2l-labs-navigation-band-slot-height`: When using the slot, this is needed to setup the proper scrollbar and fading effects.
 
----
-
-### d2l-labs-navigation-main-header
+## Main Header [d2l-labs-navigation-main-header]
 
 Add the `d2l-labs-navigation-main-header` component, and provide elements for the `left` and `right` slots.
 
@@ -87,8 +96,8 @@ Add the `d2l-labs-navigation-main-header` component, and provide elements for th
 </script>
 
 <d2l-labs-navigation-main-header>
-	<div slot="left"></div>
-	<div slot="right"></div>
+  <div slot="left"></div>
+  <div slot="right"></div>
 </d2l-labs-navigation-main-header>
 ```
 
@@ -97,9 +106,7 @@ Add the `d2l-labs-navigation-main-header` component, and provide elements for th
 * `left` (required): Secondary content (that will shrink with page size) oriented on the left side of the centre gutter (whitespace)
 * `right` (required): Primary content (that will not shrink with page size) oriented on the right side of the centre gutter (whitespace)
 
----
-
-### d2l-labs-navigation-main-footer
+## Main Footer [d2l-labs-navigation-main-footer]
 
 Add the `d2l-labs-navigation-main-footer` component, and provide elements for the `main` slot.
 
@@ -109,7 +116,7 @@ Add the `d2l-labs-navigation-main-footer` component, and provide elements for th
 </script>
 
 <d2l-labs-navigation-main-footer>
-	<div slot="main"></div>
+  <div slot="main"></div>
 </d2l-labs-navigation-main-footer>
 ```
 
@@ -119,19 +126,46 @@ Add the `d2l-labs-navigation-main-footer` component, and provide elements for th
 
 ---
 
-### d2l-labs-navigation-link
+> **Actions**
+>
+> Use these components inside of the navigation component slots.
+
+<!-- docs: end hidden content -->
+
+## Navigation Link [d2l-labs-navigation-link]
+
+`<d2l-labs-navigation-link>` provides a link with the navigation focus effect.
 
-(Placeholder for now)
+<!-- docs: demo code -->
+```html
+<script type="module">
+  import '@brightspace-ui/labs/components/navigation/navigation-link.js';
+</script>
+<div style="border: 1px solid #999999; border-top: 4px solid slateblue; height: 90px; padding: 0 18px; width: 100%;">
+  <d2l-labs-navigation-link href="https://www.example.org">Settings</d2l-labs-navigation-link>
+</div>
+```
 
+<!-- docs: start hidden content -->
 ***Relevant CSS class name:***
 * `--d2l-labs-navigation-primary-color`: Used to customize the hover colour of the highlight links and buttons
+<!-- docs: end hidden content -->
 
----
-
-### d2l-labs-navigation-button-icon
+## Navigation Button Icon [d2l-labs-navigation-button-icon]
 
 `<d2l-labs-navigation-button-icon>` provides a button with an icon and optional text.
 
+<!-- docs: demo code -->
+```html
+<script type="module">
+  import '@brightspace-ui/labs/components/navigation/navigation-button-icon.js';
+</script>
+<div style="border: 1px solid #999999; border-top: 4px solid slateblue; height: 90px; padding: 0 18px; width: 100%;">
+  <d2l-labs-navigation-button-icon icon="tier3:gear" text="Settings"></d2l-labs-navigation-button-icon>
+</div>
+```
+
+<!-- docs: start hidden content -->
 ### Properties
 
 | Property | Type | Description |
@@ -142,13 +176,23 @@ Add the `d2l-labs-navigation-main-footer` component, and provide elements for th
 | `no-highlight-border` | Boolean | Visually hides the highlight border when hovered/focused |
 | `text-hidden` | Boolean | Visually hides the text |
 | `tooltip-position` | String | Position of the tooltip ( top\|bottom\|left\|right ); default is bottom |
+<!-- docs: end hidden content -->
 
----
-
-### d2l-labs-navigation-link-icon
+## Navigation Link Icon [d2l-labs-navigation-link-icon]
 
 Similar to `<d2l-labs-navigation-button-icon>`, a link that comes with an icon and optional text.
 
+<!-- docs: demo code -->
+```html
+<script type="module">
+  import '@brightspace-ui/labs/components/navigation/navigation-link-icon.js';
+</script>
+<div style="border: 1px solid #999999; border-top: 4px solid slateblue; height: 90px; padding: 0 18px; width: 100%;">
+  <d2l-labs-navigation-link-icon href="https://www.example.org" icon="tier3:gear" text="Settings"></d2l-labs-navigation-link-icon>
+</div>
+```
+
+<!-- docs: start hidden content -->
 ### Properties
 
 | Property | Type | Description |
@@ -157,24 +201,54 @@ Similar to `<d2l-labs-navigation-button-icon>`, a link that comes with an icon a
 | `text` | String, required | Text for the button |
 | `icon` | String | Preset icon key (e.g. `tier1:gear`) |
 | `text-hidden` | Boolean | Visually hides the text |
+<!-- docs: end hidden content -->
 
----
-
-### d2l-labs-navigation-iterator
+## Navigation Dropdown Button Icon [d2l-labs-navigation-dropdown-button-icon]
 
+<!-- docs: demo -->
 ```html
 <script type="module">
-  import '@brightspace-ui/labs/components/navigation/navigation-iterator.js';
+  import '@brightspace-ui/labs/components/navigation/navigation-dropdown-button-icon.js';
 </script>
+<div style="border: 1px solid #999999; border-top: 4px solid slateblue; height: 90px; padding: 0 18px; width: 100%;">
+  <d2l-labs-navigation-dropdown-button-icon icon="tier3:discussions" text="Subscription alerts" has-notification notification-text="You have new subscription alerts"></d2l-labs-navigation-dropdown-button-icon>
+</div>
+```
 
-<d2l-labs-navigation-iterator></d2l-labs-navigation-iterator>
+## Navigation Dropdown Button Custom [d2l-labs-navigation-dropdown-button-custom]
+
+<!-- docs: demo -->
+```html
+<script type="module">
+  import '@brightspace-ui/labs/components/navigation/navigation-dropdown-button-custom.js';
+</script>
+<div style="border: 1px solid #999999; border-top: 4px solid slateblue; height: 90px; padding: 0 18px; width: 100%;">
+  <d2l-labs-navigation-dropdown-button-custom opener-label="User Name, avatar">
+    <span slot="opener" style="align-items: center; display: flex; font-size: 0.7rem; gap: 10px;">
+      <span style="background-color: #ab578a; border-radius: 6px; height: 42px; width: 42px;"></span>
+      User Name
+    </span>
+  </d2l-labs-navigation-dropdown-button-custom>
+</div>
 ```
 
+## Navigation Iterator [d2l-labs-navigation-iterator]
+
+<!-- docs: demo code -->
+```html
+<script type="module">
+  import '@brightspace-ui/labs/components/navigation/navigation-iterator.js';
+</script>
+<div style="border: 1px solid #999999; border-top: 4px solid slateblue; padding: 0 18px; width: 100%;">
+  <d2l-labs-navigation-iterator>User 1 of 17</d2l-labs-navigation-iterator>
+</div>
+```
+<!-- docs: start hidden content -->
 There is only one slot, and the default button text can be hidden with `hide-text`.
 
 ```html
 <d2l-labs-navigation-iterator hide-text>
-	<span>User 1 of 17</span>
+  <span>User 1 of 17</span>
 </d2l-labs-navigation-iterator>
 ```
 
@@ -190,3 +264,4 @@ The iterator buttons can be hidden completely with `no-next` or `no-previous`.
 <d2l-labs-navigation-iterator no-next></d2l-labs-navigation-iterator>
 <d2l-labs-navigation-iterator no-previous></d2l-labs-navigation-iterator>
 ```
+<!-- docs: end hidden content -->