@brightspace-ui/labs 2.7.0 → 2.9.0

package/package.json

@@ -7,9 +7,29 @@
     "./components/accessibility-disability-simulator.js": "./src/components/accessibility-disability-simulator/accessibility-disability-simulator.js",
     "./components/attribute-picker.js": "./src/components/attribute-picker/attribute-picker.js",
     "./components/checkbox-drawer.js": "./src/components/checkbox-drawer/checkbox-drawer.js",
+    "./components/card-overlay.js": "./src/components/card-overlay/card-overlay.js",
     "./components/community-button.js": "./src/components/community/community-button.js",
     "./components/community-link.js": "./src/components/community/community-link.js",
     "./components/community-url-factory.js": "./src/components/community/community-url-factory.js",
+    "./components/navigation/navigation-band.js": "./src/components/navigation/navigation-band.js",
+    "./components/navigation/navigation-button-icon.js": "./src/components/navigation/navigation-button-icon.js",
+    "./components/navigation/navigation-dropdown-button-custom.js": "./src/components/navigation/navigation-dropdown-button-custom.js",
+    "./components/navigation/navigation-dropdown-button-icon.js": "./src/components/navigation/navigation-dropdown-button-icon.js",
+    "./components/navigation/navigation-immersive.js": "./src/components/navigation/navigation-immersive.js",
+    "./components/navigation/navigation-iterator.js": "./src/components/navigation/navigation-iterator.js",
+    "./components/navigation/navigation-link-back.js": "./src/components/navigation/navigation-link-back.js",
+    "./components/navigation/navigation-link-icon.js": "./src/components/navigation/navigation-link-icon.js",
+    "./components/navigation/navigation-link-image.js": "./src/components/navigation/navigation-link-image.js",
+    "./components/navigation/navigation-link.js": "./src/components/navigation/navigation-link.js",
+    "./components/navigation/navigation-main-footer.js": "./src/components/navigation/navigation-main-footer.js",
+    "./components/navigation/navigation-main-header.js": "./src/components/navigation/navigation-main-header.js",
+    "./components/navigation/navigation-notification-icon.js": "./src/components/navigation/navigation-notification-icon.js",
+    "./components/navigation/navigation-separator.js": "./src/components/navigation/navigation-separator.js",
+    "./components/navigation/navigation-shared-styles.js": "./src/components/navigation/navigation-shared-styles.js",
+    "./components/navigation/navigation-skip-main.js": "./src/components/navigation/navigation-skip-main.js",
+    "./components/navigation/navigation-skip.js": "./src/components/navigation/navigation-skip.js",
+    "./components/navigation/navigation-styles.js": "./src/components/navigation/navigation-styles.js",
+    "./components/navigation/navigation.js": "./src/components/navigation/navigation.js",
     "./components/opt-in-flyout.js": "./src/components/opt-in-flyout/opt-in-flyout.js",
     "./components/opt-out-flyout.js": "./src/components/opt-in-flyout/opt-out-flyout.js",
     "./components/opt-out-reason.js": "./src/components/opt-in-flyout/opt-out-reason.js",
@@ -56,5 +76,5 @@
     "@brightspace-ui/core": "^3",
     "lit": "^3"
   },
-  "version": "2.7.0"
+  "version": "2.9.0"
 }

package/src/components/card-overlay/README.md

@@ -0,0 +1,12 @@
+# Card Overlay
+
+A placeholder when an actual card component is loading
+
+## Usage
+
+```html
+<script type="module">
+  import '@brightspace-ui/labs/components/card-overlay.js';
+</script>
+<d2l-labs-card-overlay>My element</d2l-labs-card-overlay>
+```

package/src/components/card-overlay/card-overlay.js

@@ -0,0 +1,79 @@
+import { css, html, LitElement, nothing } from 'lit';
+import { bodyStandardStyles } from '@brightspace-ui/core/components/typography/styles.js';
+import { SkeletonMixin } from '@brightspace-ui/core/components/skeleton/skeleton-mixin.js';
+
+class CardOverlay extends SkeletonMixin(LitElement) {
+
+	static get styles() {
+		return [super.styles, bodyStandardStyles, css`
+			:host {
+				display: block;
+				left: 0;
+				position: absolute;
+				top: 0;
+			}
+			:host([skeleton]) {
+				height: 100%;
+				width: 100%;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			.d2l-insights-card-overlay-container {
+				background-color: white;
+				border-radius: 15px;
+				display: flex;
+				flex-direction: column;
+				height: calc(100% - 20px);
+				justify-content: center;
+				padding-left: 7px;
+				padding-top: 20px;
+				width: calc(100% - 28px);
+			}
+			.d2l-insights-card-overlay-title {
+				margin-left: 15px;
+				margin-right: 15px;
+				margin-top: 10px;
+				width: 100%;
+			}
+			.d2l-insights-card-overlay-body {
+				align-items: center;
+				display: flex;
+				height: 100%;
+				margin-bottom: 25px;
+			}
+			.d2l-insights-card-overlay-body > div {
+				flex-shrink: 0;
+				height: 70px;
+				margin: 0 15px;
+				width: 70px;
+			}
+			.d2l-insights-card-overlay-message {
+				display: inline-block;
+				font-size: 14px;
+				line-height: 1rem;
+				margin: 10px;
+				margin-left: 5px;
+				margin-right: 0;
+				vertical-align: middle;
+			}
+		`];
+	}
+
+	render() {
+		if (!this.skeleton) {
+			return nothing;
+		}
+
+		return html`
+			<div class="d2l-insights-card-overlay-container" aria-hidden="true">
+				<div class="d2l-insights-card-overlay-title d2l-skeletize d2l-skeletize-45 d2l-body-standard">A title. Do not localize.</div>
+				<div class="d2l-insights-card-overlay-body">
+					<div class="d2l-skeletize"></div>
+					<span class="d2l-insights-card-overlay-message d2l-body-standard d2l-skeletize-paragraph-3">A text that triggers CSS styling. Do not localize.</span>
+				</div>
+			</div>`;
+	}
+
+}
+customElements.define('d2l-labs-card-overlay', CardOverlay);

package/src/components/navigation/README.md

@@ -0,0 +1,192 @@
+## Usage: Primary Components
+
+> These are the components that should be used in the **VAST MAJORITY** of use cases
+
+### 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).
+
+```html
+<script type="module">
+  import '@brightspace-ui/labs/navigation/navigation.js';
+  import '@brightspace-ui/labs/navigation/navigation-main-header.js';
+  import '@brightspace-ui/labs/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>
+```
+
+***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
+
+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.
+
+```html
+<script type="module">
+  import '@brightspace-ui/labs/navigation/navigation-immersive.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>
+```
+
+Optionally:
+
+- The max-width can be configured to match the max-width used by the LE by setting `widthType` to `normal`
+- 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
+
+> 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
+
+```html
+<script type="module">
+  import '@brightspace-ui/labs/navigation/navigation-band.js';
+</script>
+
+<d2l-labs-navigation-band></d2l-labs-navigation-band>
+```
+
+The `d2l-labs-navigation-band` also includes a `slot` with a custom scrollbar and fading effects, but this has only been designed for the `d2l-organization-consortium-tabs` and should not be used for anything else right now.
+
+***Relevant CSS class name:***
+* `--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
+
+Add the `d2l-labs-navigation-main-header` component, and provide elements for the `left` and `right` slots.
+
+```html
+<script type="module">
+  import '@brightspace-ui/labs/navigation/navigation-main-header.js';
+</script>
+
+<d2l-labs-navigation-main-header>
+	<div slot="left"></div>
+	<div slot="right"></div>
+</d2l-labs-navigation-main-header>
+```
+
+***Slots:***
+
+* `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
+
+Add the `d2l-labs-navigation-main-footer` component, and provide elements for the `main` slot.
+
+```html
+<script type="module">
+  import '@brightspace-ui/labs/navigation/navigation-main-footer.js';
+</script>
+
+<d2l-labs-navigation-main-footer>
+	<div slot="main"></div>
+</d2l-labs-navigation-main-footer>
+```
+
+***Slots:***
+
+* `main` (required): Primary content of the footer. The footer will change in size to accommodate its contents
+
+---
+
+### d2l-labs-navigation-link
+
+(Placeholder for now)
+
+***Relevant CSS class name:***
+* `--d2l-labs-navigation-primary-color`: Used to customize the hover colour of the highlight links and buttons
+
+---
+
+### d2l-labs-navigation-button-icon
+
+`<d2l-labs-navigation-button-icon>` provides a button with an icon and optional text.
+
+### Properties
+
+| Property | Type | Description |
+|--|--|--|
+| `disabled` | Boolean | Disables the button |
+| `text` | String, required | Text for the button |
+| `icon` | String | Preset icon key (e.g. `tier1:gear`) |
+| `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 |
+
+---
+
+### d2l-labs-navigation-link-icon
+
+Similar to `<d2l-labs-navigation-button-icon>`, a link that comes with an icon and optional text.
+
+### Properties
+
+| Property | Type | Description |
+|--|--|--|
+| `href` | String, required | URL or URL fragment of the link |
+| `text` | String, required | Text for the button |
+| `icon` | String | Preset icon key (e.g. `tier1:gear`) |
+| `text-hidden` | Boolean | Visually hides the text |
+
+---
+
+### d2l-labs-navigation-iterator
+
+```html
+<script type="module">
+  import '@brightspace-ui/labs/navigation/navigation-iterator.js';
+</script>
+
+<d2l-labs-navigation-iterator></d2l-labs-navigation-iterator>
+```
+
+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>
+</d2l-labs-navigation-iterator>
+```
+
+The iterator button labels can be customized with `previous-text` and `next-text`.
+
+```html
+<d2l-labs-navigation-iterator previous-text="Back" next-text="Forward"></d2l-labs-navigation-iterator>
+```
+
+The iterator buttons can be hidden completely with `no-next` or `no-previous`.
+
+```html
+<d2l-labs-navigation-iterator no-next></d2l-labs-navigation-iterator>
+<d2l-labs-navigation-iterator no-previous></d2l-labs-navigation-iterator>
+```

package/src/components/navigation/navigation-band.js

@@ -0,0 +1,134 @@
+import '@brightspace-ui/core/components/colors/colors.js';
+import { centererStyles, guttersStyles } from './navigation-styles.js';
+import { css, html, LitElement } from 'lit';
+
+function useCustomScroll() {
+	const userAgent = navigator.userAgent.toLowerCase();
+	return (userAgent.indexOf('win') > -1 && userAgent.indexOf('mobile') === -1);
+}
+
+class NavigationBand extends LitElement {
+
+	static get styles() {
+		return [centererStyles, guttersStyles, css`
+			:host {
+				background: linear-gradient(180deg, var(--d2l-branding-primary-color, var(--d2l-color-celestine)) var(--d2l-labs-navigation-band-slot-height, 1.5rem), #ffffff 0%);
+				display: block;
+				min-height: 4px;
+				position: relative; /* Needed for Firefox */
+			}
+			:host([hidden]) {
+				display: none;
+			}
+
+			.d2l-labs-navigation-scroll {
+				overflow-x: auto;
+				overflow-y: hidden;
+				scroll-behavior: smooth;
+			}
+
+			.d2l-labs-navigation-scroll[data-custom-scroll] {
+				/* Firefox Styles */
+				scrollbar-color: var(--d2l-color-galena) var(--d2l-color-sylvite);
+				scrollbar-width: thin;
+			}
+			/* Webkit Styles */
+			.d2l-labs-navigation-scroll[data-custom-scroll]::-webkit-scrollbar {
+				background-color: var(--d2l-color-sylvite);
+				border-radius: 8px;
+				height: 9px;
+			}
+			.d2l-labs-navigation-scroll[data-custom-scroll]::-webkit-scrollbar-thumb {
+				background-color: var(--d2l-color-galena);
+				border-bottom: 1px solid var(--d2l-color-sylvite);
+				border-radius: 8px;
+				border-top: 1px solid var(--d2l-color-sylvite);
+			}
+			/* Faded edges styles */
+			.d2l-labs-navigation-scroll-before,
+			.d2l-labs-navigation-scroll-after {
+				height: 100%;
+				max-height: var(--d2l-labs-navigation-band-slot-height, 1.5rem);
+				pointer-events: none;
+				position: absolute;
+				top: 0;
+				width: 2.439%; /* should match gutter width */
+				z-index: 2;
+			}
+			.d2l-labs-navigation-scroll-before {
+				background: linear-gradient(to right, var(--d2l-branding-primary-color, var(--d2l-color-celestine)), transparent);
+				left: 0;
+			}
+			.d2l-labs-navigation-scroll-after {
+				background: linear-gradient(to left, var(--d2l-branding-primary-color, var(--d2l-color-celestine)), transparent);
+				right: 0;
+			}
+			/* Styles to ensure the right padding is respected when scrolling */
+			.d2l-labs-navigation-centerer {
+				line-height: 0;
+				position: relative;
+			}
+			.d2l-labs-navigation-gutters {
+				display: inline-block;
+				position: unset;
+				vertical-align: top;
+			}
+			@media (max-width: 615px) {
+				.d2l-labs-navigation-scroll-before,
+				.d2l-labs-navigation-scroll-after {
+					width: 15px;
+				}
+			}
+			@media (min-width: 1230px) {
+				.d2l-labs-navigation-scroll-before,
+				.d2l-labs-navigation-scroll-after {
+					width: 30px;
+				}
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		this._customScroll = useCustomScroll();
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this.addEventListener('d2l-labs-navigation-band-slot-scroll-request', this._handleScrollRequest);
+	}
+
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this.removeEventListener('d2l-labs-navigation-band-slot-scroll-request', this._handleScrollRequest);
+	}
+
+	render() {
+		return html`
+			<div class="d2l-labs-navigation-centerer">
+				<div class="d2l-labs-navigation-scroll" ?data-custom-scroll="${this._customScroll}">
+					<div class="d2l-labs-navigation-scroll-before"></div>
+					<div class="d2l-labs-navigation-scroll-after"></div>
+					<div class="d2l-labs-navigation-gutters">
+						<slot></slot>
+					</div>
+				</div>
+			</div>
+		`;
+	}
+
+	_handleScrollRequest(e) {
+		e.stopPropagation();
+		const dir = document.documentElement.getAttribute('dir') || 'ltr';
+		if (dir.toLowerCase() === 'rtl') {
+			return; // We turn off this feature in RTL due to browser inconsistencies
+		}
+
+		const scroll = this.shadowRoot.querySelector('.d2l-labs-navigation-scroll');
+		requestAnimationFrame(() => {
+			scroll.scrollLeft = e.detail.pointToCenter - 0.5 * scroll.offsetWidth;
+		});
+	}
+}
+
+customElements.define('d2l-labs-navigation-band', NavigationBand);

package/src/components/navigation/navigation-button-icon.js

@@ -0,0 +1,120 @@
+import '@brightspace-ui/core/components/colors/colors.js';
+import '@brightspace-ui/core/components/icons/icon.js';
+import '@brightspace-ui/core/components/tooltip/tooltip.js';
+import { css, html, LitElement, nothing } from 'lit';
+import { highlightBorderStyles, highlightButtonStyles } from './navigation-styles.js';
+import { FocusMixin } from '@brightspace-ui/core/mixins/focus-mixin.js';
+import { getUniqueId } from '@brightspace-ui/core/helpers/uniqueId.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+
+/**
+ * Navigation button with an icon and text.
+ */
+class NavigationButtonIcon extends FocusMixin(LitElement) {
+
+	static get properties() {
+		return {
+			/**
+			 * Disables the button
+			 * @type {boolean}
+			 */
+			disabled: { reflect: true, type: Boolean },
+			/**
+			 * REQUIRED: Preset icon key (e.g. "tier1:gear")
+			 * @type {string}
+			 */
+			icon: { type: String },
+			/**
+			 * Position of the icon.
+			 * @type {'start'|'end'}
+			 */
+			iconPosition: { attribute: 'icon-position', type: String },
+			/**
+			 * Visually hides the highlight border when hovered/focused
+			 * @type {boolean}
+			 */
+			noHighlightBorder: { attribute: 'no-highlight-border', type: Boolean },
+			/**
+			 * REQUIRED: Text for the button
+			 * @type {string}
+			 */
+			text: { type: String },
+			/**
+			 * Visually hides the text but still accessible
+			 * @type {boolean}
+			 */
+			textHidden: { attribute: 'text-hidden', type: Boolean },
+			/**
+			 * Offset of the tooltip
+			 * @type {Number}
+			 */
+			tooltipOffset: { attribute: 'tooltip-offset', type: Number },
+			/**
+			 * Position of the tooltip
+			 * @type {'top'|'bottom'|'left'|'right'}
+			 */
+			tooltipPosition: { attribute: 'tooltip-position', type: String }
+		};
+	}
+
+	static get styles() {
+		return [highlightBorderStyles, highlightButtonStyles, css`
+			:host {
+				display: inline-block;
+				height: 100%;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+		`];
+	}
+
+	constructor() {
+		super();
+		this.disabled = false;
+		this.iconPosition = 'start';
+		this.noHighlightBorder = false;
+		this.textHidden = false;
+		this._buttonId = getUniqueId();
+		this.tooltipPosition = 'bottom';
+	}
+
+	static get focusElementSelector() {
+		return 'button';
+	}
+
+	render() {
+		const { ariaLabel, id, text, tooltip } = this._getRenderSettings();
+		const highlightBorder = (!this.disabled && !this.noHighlightBorder) ? html`<span class="d2l-labs-navigation-highlight-border"></span>` : nothing;
+		const icon = html`<d2l-icon icon="${this.icon}"></d2l-icon>`;
+		return html`
+			<button id="${ifDefined(id)}" ?disabled="${this.disabled}" aria-label="${ifDefined(ariaLabel)}" type="button">
+				${highlightBorder}
+				${this.iconPosition === 'start' ? icon : nothing}
+				${text}
+				${this.iconPosition === 'end' ? icon : nothing}
+			</button>
+			${tooltip}
+		`;
+	}
+
+	_getRenderSettings() {
+		if (this.textHidden) {
+			return {
+				ariaLabel: this.text,
+				id: this._buttonId,
+				text: nothing,
+				tooltip: html`<d2l-tooltip close-on-click for="${this._buttonId}" for-type="label" position="${this.tooltipPosition}" offset="${ifDefined(this.tooltipOffset)}" class="vdiff-target">${this.text}</d2l-tooltip>`
+			};
+		}
+		return {
+			ariaLabel: undefined,
+			id: undefined,
+			text: this.text,
+			tooltip: nothing
+		};
+	}
+
+}
+
+customElements.define('d2l-labs-navigation-button-icon', NavigationButtonIcon);

package/src/components/navigation/navigation-dropdown-button-custom.js

@@ -0,0 +1,35 @@
+import { css, html, LitElement } from 'lit';
+import { highlightBorderStyles, highlightButtonStyles } from './navigation-styles.js';
+import { DropdownOpenerMixin } from '@brightspace-ui/core/components/dropdown/dropdown-opener-mixin.js';
+
+class NavigationDropdownButtonCustom extends DropdownOpenerMixin(LitElement) {
+
+	static get styles() {
+		return [highlightBorderStyles, highlightButtonStyles, css`
+			:host {
+				display: inline-block;
+				height: 100%;
+				position: relative;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+		`];
+	}
+
+	render() {
+		return html`
+			<button type="button">
+				<span class="d2l-labs-navigation-highlight-border"></span>
+				<slot name="opener"></slot>
+			</button>
+			<slot></slot>
+		`;
+	}
+
+	getOpenerElement() {
+		return this.shadowRoot?.querySelector('button');
+	}
+}
+
+customElements.define('d2l-labs-navigation-dropdown-button-custom', NavigationDropdownButtonCustom);