@brightspace-ui/core 3.227.4 → 3.227.6

package/components/colors/demo/color-swatch.js

@@ -1,240 +0,0 @@
-import { css, html, LitElement } from 'lit';
-
-class ColorSwatch extends LitElement {
-
-	static get properties() {
-		return {
-			name: { type: String, reflect: true }
-		};
-	}
-
-	static get styles() {
-		return css`
-			:host {
-				border-radius: 8px;
-				box-sizing: border-box;
-				color: #ffffff;
-				display: block;
-				font-size: 0.7rem;
-				font-weight: 400;
-				margin: 0.3rem;
-				padding: 0.3rem;
-				width: 300px;
-			}
-			:host([name="regolith"]) {
-				background-color: var(--d2l-color-regolith);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="sylvite"]) {
-				background-color: var(--d2l-color-sylvite);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="gypsum"]) {
-				background-color: var(--d2l-color-gypsum);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="mica"]) {
-				background-color: var(--d2l-color-mica);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="corundum"]) {
-				background-color: var(--d2l-color-corundum);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="chromite"]) {
-				background-color: var(--d2l-color-chromite);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="galena"]) {
-				background-color: var(--d2l-color-galena);
-			}
-			:host([name="tungsten"]) {
-				background-color: var(--d2l-color-tungsten);
-			}
-			:host([name="ferrite"]) {
-				background-color: var(--d2l-color-ferrite);
-			}
-			:host([name="primary-accent-action"]) {
-				background-color: var(--d2l-color-primary-accent-action);
-			}
-			:host([name="primary-accent-indicator"]) {
-				background-color: var(--d2l-color-primary-accent-indicator);
-			}
-			:host([name="feedback-error"]) {
-				background-color: var(--d2l-color-feedback-error);
-			}
-			:host([name="feedback-warning"]) {
-				background-color: var(--d2l-color-feedback-warning);
-			}
-			:host([name="feedback-success"]) {
-				background-color: var(--d2l-color-feedback-success);
-			}
-			:host([name="feedback-action"]) {
-				background-color: var(--d2l-color-feedback-action);
-			}
-			:host([name="zircon-plus-2"]) {
-				background-color: var(--d2l-color-zircon-plus-2);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="zircon-plus-1"]) {
-				background-color: var(--d2l-color-zircon-plus-1);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="zircon"]) {
-				background-color: var(--d2l-color-zircon);
-			}
-			:host([name="zircon-minus-1"]) {
-				background-color: var(--d2l-color-zircon-minus-1);
-			}
-			:host([name="celestine-plus-2"]) {
-				background-color: var(--d2l-color-celestine-plus-2);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="celestine-plus-1"]) {
-				background-color: var(--d2l-color-celestine-plus-1);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="celestine"]) {
-				background-color: var(--d2l-color-celestine);
-			}
-			:host([name="celestine-minus-1"]) {
-				background-color: var(--d2l-color-celestine-minus-1);
-			}
-			:host([name="amethyst-plus-2"]) {
-				background-color: var(--d2l-color-amethyst-plus-2);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="amethyst-plus-1"]) {
-				background-color: var(--d2l-color-amethyst-plus-1);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="amethyst"]) {
-				background-color: var(--d2l-color-amethyst);
-			}
-			:host([name="amethyst-minus-1"]) {
-				background-color: var(--d2l-color-amethyst-minus-1);
-			}
-			:host([name="fluorite-plus-2"]) {
-				background-color: var(--d2l-color-fluorite-plus-2);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="fluorite-plus-1"]) {
-				background-color: var(--d2l-color-fluorite-plus-1);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="fluorite"]) {
-				background-color: var(--d2l-color-fluorite);
-			}
-			:host([name="fluorite-minus-1"]) {
-				background-color: var(--d2l-color-fluorite-minus-1);
-			}
-			:host([name="tourmaline-plus-2"]) {
-				background-color: var(--d2l-color-tourmaline-plus-2);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="tourmaline-plus-1"]) {
-				background-color: var(--d2l-color-tourmaline-plus-1);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="tourmaline"]) {
-				background-color: var(--d2l-color-tourmaline);
-			}
-			:host([name="tourmaline-minus-1"]) {
-				background-color: var(--d2l-color-tourmaline-minus-1);
-			}
-			:host([name="cinnabar-plus-2"]) {
-				background-color: var(--d2l-color-cinnabar-plus-2);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="cinnabar-plus-1"]) {
-				background-color: var(--d2l-color-cinnabar-plus-1);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="cinnabar"]) {
-				background-color: var(--d2l-color-cinnabar);
-			}
-			:host([name="cinnabar-minus-1"]) {
-				background-color: var(--d2l-color-cinnabar-minus-1);
-			}
-			:host([name="carnelian-plus-1"]) {
-				background-color: var(--d2l-color-carnelian-plus-1);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="carnelian"]) {
-				background-color: var(--d2l-color-carnelian);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="carnelian-minus-1"]) {
-				background-color: var(--d2l-color-carnelian-minus-1);
-			}
-			:host([name="carnelian-minus-2"]) {
-				background-color: var(--d2l-color-carnelian-minus-2);
-			}
-			:host([name="citrine-plus-1"]) {
-				background-color: var(--d2l-color-citrine-plus-1);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="citrine"]) {
-				background-color: var(--d2l-color-citrine);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="citrine-minus-1"]) {
-				background-color: var(--d2l-color-citrine-minus-1);
-			}
-			:host([name="citrine-minus-2"]) {
-				background-color: var(--d2l-color-citrine-minus-2);
-			}
-			:host([name="peridot-plus-1"]) {
-				background-color: var(--d2l-color-peridot-plus-1);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="peridot"]) {
-				background-color: var(--d2l-color-peridot);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="peridot-minus-1"]) {
-				background-color: var(--d2l-color-peridot-minus-1);
-			}
-			:host([name="peridot-minus-2"]) {
-				background-color: var(--d2l-color-peridot-minus-2);
-			}
-			:host([name="olivine-plus-1"]) {
-				background-color: var(--d2l-color-olivine-plus-1);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="olivine"]) {
-				background-color: var(--d2l-color-olivine);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="olivine-minus-1"]) {
-				background-color: var(--d2l-color-olivine-minus-1);
-			}
-			:host([name="olivine-minus-2"]) {
-				background-color: var(--d2l-color-olivine-minus-2);
-			}
-			:host([name="malachite-plus-1"]) {
-				background-color: var(--d2l-color-malachite-plus-1);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="malachite"]) {
-				background-color: var(--d2l-color-malachite);
-				color: var(--d2l-color-ferrite);
-			}
-			:host([name="malachite-minus-1"]) {
-				background-color: var(--d2l-color-malachite-minus-1);
-			}
-			:host([name="malachite-minus-2"]) {
-				background-color: var(--d2l-color-malachite-minus-2);
-			}
-		`;
-	}
-
-	render() {
-		return html`
-			<div>${this.name}</div>
-		`;
-	}
-
-}
-
-customElements.define('d2l-color-swatch', ColorSwatch);

package/components/colors/demo/colors.html

@@ -1,139 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<meta charset="UTF-8">
-		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
-		<script type="module">
-			import '../../demo/demo-page.js';
-			import './color-swatch.js';
-		</script>
-	</head>
-	<body unresolved>
-
-		<d2l-demo-page page-title="d2l-colors">
-
-			<h2>Basic Greys (lightest to darkest)</h2>
-
-			<d2l-demo-snippet>
-				<d2l-color-swatch name="regolith"></d2l-color-swatch>
-				<d2l-color-swatch name="sylvite"></d2l-color-swatch>
-				<d2l-color-swatch name="gypsum"></d2l-color-swatch>
-				<d2l-color-swatch name="mica"></d2l-color-swatch>
-				<d2l-color-swatch name="corundum"></d2l-color-swatch>
-				<d2l-color-swatch name="chromite"></d2l-color-swatch>
-				<d2l-color-swatch name="galena"></d2l-color-swatch>
-				<d2l-color-swatch name="tungsten"></d2l-color-swatch>
-				<d2l-color-swatch name="ferrite"></d2l-color-swatch>
-			</d2l-demo-snippet>
-
-			<h2>Primary Accent<h2>
-
-			<d2l-demo-snippet>
-				<d2l-color-swatch name="primary-accent-action"></d2l-color-swatch>
-				<d2l-color-swatch name="primary-accent-indicator"></d2l-color-swatch>
-			</d2l-demo-snippet>
-
-			<h2>Feedback<h2>
-
-			<d2l-demo-snippet>
-				<d2l-color-swatch name="feedback-error"></d2l-color-swatch>
-				<d2l-color-swatch name="feedback-warning"></d2l-color-swatch>
-				<d2l-color-swatch name="feedback-success"></d2l-color-swatch>
-				<d2l-color-swatch name="feedback-action"></d2l-color-swatch>
-			</d2l-demo-snippet>
-
-			<h2>Full Pallette</h2>
-
-			<h3>Zircon</h3>
-			<d2l-demo-snippet>
-				<d2l-color-swatch name="zircon-plus-2"></d2l-color-swatch>
-				<d2l-color-swatch name="zircon-plus-1"></d2l-color-swatch>
-				<d2l-color-swatch name="zircon"></d2l-color-swatch>
-				<d2l-color-swatch name="zircon-minus-1"></d2l-color-swatch>
-			</d2l-demo-snippet>
-
-			<h3>Celestine</h3>
-			<d2l-demo-snippet>
-				<d2l-color-swatch name="celestine-plus-2"></d2l-color-swatch>
-				<d2l-color-swatch name="celestine-plus-1"></d2l-color-swatch>
-				<d2l-color-swatch name="celestine"></d2l-color-swatch>
-				<d2l-color-swatch name="celestine-minus-1"></d2l-color-swatch>
-			</d2l-demo-snippet>
-
-			<h3>Amethyst</h3>
-			<d2l-demo-snippet>
-				<d2l-color-swatch name="amethyst-plus-2"></d2l-color-swatch>
-				<d2l-color-swatch name="amethyst-plus-1"></d2l-color-swatch>
-				<d2l-color-swatch name="amethyst"></d2l-color-swatch>
-				<d2l-color-swatch name="amethyst-minus-1"></d2l-color-swatch>
-			</d2l-demo-snippet>
-
-			<h3>Fluorite</h3>
-			<d2l-demo-snippet>
-				<d2l-color-swatch name="fluorite-plus-2"></d2l-color-swatch>
-				<d2l-color-swatch name="fluorite-plus-1"></d2l-color-swatch>
-				<d2l-color-swatch name="fluorite"></d2l-color-swatch>
-				<d2l-color-swatch name="fluorite-minus-1"></d2l-color-swatch>
-			</d2l-demo-snippet>
-
-			<h3>Tourmaline</h3>
-			<d2l-demo-snippet>
-				<d2l-color-swatch name="tourmaline-plus-2"></d2l-color-swatch>
-				<d2l-color-swatch name="tourmaline-plus-1"></d2l-color-swatch>
-				<d2l-color-swatch name="tourmaline"></d2l-color-swatch>
-				<d2l-color-swatch name="tourmaline-minus-1"></d2l-color-swatch>
-			</d2l-demo-snippet>
-
-			<h3>Cinnabar</h3>
-			<d2l-demo-snippet>
-				<d2l-color-swatch name="cinnabar-plus-2"></d2l-color-swatch>
-				<d2l-color-swatch name="cinnabar-plus-1"></d2l-color-swatch>
-				<d2l-color-swatch name="cinnabar"></d2l-color-swatch>
-				<d2l-color-swatch name="cinnabar-minus-1"></d2l-color-swatch>
-			</d2l-demo-snippet>
-
-			<h3>Carnelian</h3>
-			<d2l-demo-snippet>
-				<d2l-color-swatch name="carnelian-plus-1"></d2l-color-swatch>
-				<d2l-color-swatch name="carnelian"></d2l-color-swatch>
-				<d2l-color-swatch name="carnelian-minus-1"></d2l-color-swatch>
-				<d2l-color-swatch name="carnelian-minus-2"></d2l-color-swatch>
-			</d2l-demo-snippet>
-
-			<h3>Citrine</h3>
-			<d2l-demo-snippet>
-				<d2l-color-swatch name="citrine-plus-1"></d2l-color-swatch>
-				<d2l-color-swatch name="citrine"></d2l-color-swatch>
-				<d2l-color-swatch name="citrine-minus-1"></d2l-color-swatch>
-				<d2l-color-swatch name="citrine-minus-2"></d2l-color-swatch>
-			</d2l-demo-snippet>
-
-			<h3>Peridot</h3>
-			<d2l-demo-snippet>
-				<d2l-color-swatch name="peridot-plus-1"></d2l-color-swatch>
-				<d2l-color-swatch name="peridot"></d2l-color-swatch>
-				<d2l-color-swatch name="peridot-minus-1"></d2l-color-swatch>
-				<d2l-color-swatch name="peridot-minus-2"></d2l-color-swatch>
-			</d2l-demo-snippet>
-
-			<h3>Olivine</h3>
-			<d2l-demo-snippet>
-				<d2l-color-swatch name="olivine-plus-1"></d2l-color-swatch>
-				<d2l-color-swatch name="olivine"></d2l-color-swatch>
-				<d2l-color-swatch name="olivine-minus-1"></d2l-color-swatch>
-				<d2l-color-swatch name="olivine-minus-2"></d2l-color-swatch>
-			</d2l-demo-snippet>
-
-			<h3>Malachite</h3>
-			<d2l-demo-snippet>
-				<d2l-color-swatch name="malachite-plus-1"></d2l-color-swatch>
-				<d2l-color-swatch name="malachite"></d2l-color-swatch>
-				<d2l-color-swatch name="malachite-minus-1"></d2l-color-swatch>
-				<d2l-color-swatch name="malachite-minus-2"></d2l-color-swatch>
-			</d2l-demo-snippet>
-
-		</d2l-demo-page>
-
-	</body>
-</html>

package/components/count-badge/demo/count-badge-icon.html

@@ -1,48 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<meta charset="UTF-8">
-		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
-		<script type="module">
-			import '../../demo/demo-page.js';
-			import '../count-badge-icon.js';
-			import '../../button/button.js';
-        </script>
-	</head>
-	<body unresolved>
-		<d2l-demo-page page-title="d2l-count-badge-icon">
-			<h2>Small Badges with Icons</h2>
-			<d2l-demo-snippet>
-				<template>
-					<d2l-count-badge-icon size="small" tab-stop icon="tier1:gear" text="1 new notification." type="notification" number="1"></d2l-count-badge-icon>
-					<d2l-count-badge-icon size="small" tab-stop icon="tier2:gear" text="150 new notifications." type="notification" number="150"></d2l-count-badge-icon>
-					<d2l-count-badge-icon size="small" tab-stop icon="tier3:gear" text="1500000 new notifications." type="count" number="1500000"></d2l-count-badge-icon>
-				</template>
-			</d2l-demo-snippet>
-
-			<h2>Large Badges with Tooltip and Icons</h2>
-			<d2l-demo-snippet>
-				<template>
-					<d2l-count-badge-icon size="large" icon="tier1:gear" has-tooltip text="1 new notification." type="notification" number="1"></d2l-count-badge-icon>
-					<d2l-count-badge-icon size="large" icon="tier2:gear" has-tooltip text="150 new notifications." type="notification" number="150"></d2l-count-badge-icon>
-					<d2l-count-badge-icon size="large" hide-zero icon="tier3:gear" has-tooltip text="No new notifications." type="count" number="0"></d2l-count-badge-icon>
-				</template>
-			</d2l-demo-snippet>
-
-			<h2>Small Notification Badge with live region</h2>
-			<d2l-demo-snippet>
-				<template>
-					<d2l-count-badge-icon id="badge-announce-changes" size="small" icon="tier2:gear" announce-changes tab-stop text=" 1 new notification." type="notification" number="1"></d2l-count-badge-icon>
-					<d2l-button id="increment-count">Increment Count</d2l-button>
-				</template>
-			</d2l-demo-snippet>
-		</d2l-demo-page>
-		<script type="module">
-			document.getElementById('increment-count').addEventListener('click', () => {
-				document.getElementById('badge-announce-changes').number += 1;
-				document.getElementById('badge-announce-changes').text = `${document.getElementById('badge-announce-changes').number} new notifications.`;
-			});
-		</script>
-	</body>
-</html>

package/components/count-badge/demo/count-badge.html

@@ -1,73 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<meta charset="UTF-8">
-		<link rel="stylesheet" href="../../demo/styles.css" type="text/css">
-		<script type="module">
-			import '../../demo/demo-page.js';
-			import '../count-badge.js';
-			import '../../button/button.js';
-        </script>
-	</head>
-	<body unresolved>
-		<d2l-demo-page page-title="d2l-count-badge">
-
-			<h2>Small Notification Badge</h2>
-			<d2l-demo-snippet>
-				<template>
-					<d2l-count-badge size="small" tab-stop text=" 1 new notification." type="notification" number="1"></d2l-count-badge>
-					<d2l-count-badge size="small"  text="10 new notifications."  type="notification" number="10"></d2l-count-badge>
-					<d2l-count-badge size="small"  tab-stop text="100 new notifications." type="notification" number="100"></d2l-count-badge>
-				</template>
-			</d2l-demo-snippet>
-
-			<h2>Small Notification Badge with live region</h2>
-			<d2l-demo-snippet>
-				<template>
-					<d2l-count-badge id="badge-announce-changes"size="small" announce-changes tab-stop text=" 1 new notification." type="notification" number="1"></d2l-count-badge>
-					<d2l-button id="increment-count">Increment Count</d2l-button>
-					<script type="module">
-						document.getElementById('increment-count').addEventListener('click', () => {
-							document.getElementById('badge-announce-changes').number += 1;
-							document.getElementById('badge-announce-changes').text = `${document.getElementById('badge-announce-changes').number} new notifications.`;
-						});
-					</script>
-				</template>
-			</d2l-demo-snippet>
-
-			<h2>Large Count Badge</h2>
-			<d2l-demo-snippet>
-				<template>
-					<d2l-count-badge size="large" text="1 new notification." type="count" number="1"></d2l-count-badge>
-					<d2l-count-badge size="large" text="10 new notifications." type="count" number="10"></d2l-count-badge>
-					<d2l-count-badge size="large" text="100 new notifications." type="count" number="100"></d2l-count-badge>
-					<d2l-count-badge size="large" text="777777 new notifications." type="count" number="777777"></d2l-count-badge>
-					<d2l-count-badge size="large" text="777777 new notifications."type="count" number="777777" max-digits="5"></d2l-count-badge>
-				</template>
-			</d2l-demo-snippet>
-
-			<h2>Override Colorway of Count Badge</h2>
-			<d2l-demo-snippet>
-				<template>
-					<d2l-count-badge id="colorway-override" size="large" text="1 new notification." type="count" number="1"></d2l-count-badge>
-					<style>
-						#colorway-override {
-							--d2l-count-badge-background-color: purple;
-							--d2l-count-badge-foreground-color: #ffffff;
-						}
-					</style>
-				</template>
-			</d2l-demo-snippet>
-
-			<h2>Small Notification Badge with Tooltip</h2>
-			<d2l-demo-snippet>
-				<template>
-					<d2l-count-badge size="small" has-tooltip text=" 1 new notification." type="notification" number="1"></d2l-count-badge>
-					<d2l-count-badge size="small" has-tooltip text=" 2 new notifications." type="notification" number="2"></d2l-count-badge>
-				</template>
-			</d2l-demo-snippet>
-
-		</d2l-demo-page>
-	</body>
-</html>

package/components/demo/demo/demo-snippet.html

@@ -1,71 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-		<meta charset="UTF-8">
-		<link rel="stylesheet" href="../styles.css" type="text/css">
-		<script type="module">
-			import '../demo-page.js';
-			import '../../button/button-icon.js';
-		</script>
-	</head>
-	<body unresolved>
-
-		<d2l-demo-page page-title="d2l-demo">
-
-			<h2>Demo Snippet</h2>
-
-			<d2l-demo-snippet>
-					<d2l-button-icon icon="tier1:gear" text="Icon Button"></d2l-button-icon>
-			</d2l-demo-snippet>
-
-			<h2>Demo Snippet (custom width)</h2>
-
-			<d2l-demo-snippet style="max-width: 80%;">
-					<d2l-button-icon icon="tier1:gear" text="Icon Button"></d2l-button-icon>
-			</d2l-demo-snippet>
-
-			<h2>Demo Snippet (using template)</h2>
-
-			<d2l-demo-snippet>
-				<template>
-					<d2l-button-icon icon="tier1:gear" text="Icon Button"></d2l-button-icon>
-				</template>
-			</d2l-demo-snippet>
-
-			<h2>Code View</h2>
-
-			<d2l-code-view language="javascript">
-				function helloGrumpy(name) {
-					console.log(`Hi there ${name}.`);
-				}
-				helloGrumpy('Wizard');
-			</d2l-code-view>
-
-			<d2l-code-view language="css">
-				.grumpy > img {
-					height: 100%;
-					width: 100%;
-				}
-			</d2l-code-view>
-
-			<d2l-code-view language="json">
-				{
-					"jinxed": "gnomes",
-					"grumpy": [ "wizards" ]
-				}
-			</d2l-code-view>
-
-			<d2l-code-view language="shell">
-				#!/bin/bash
-				if [ -d $directory ]; then
-					echo "Directory exists"
-				else
-					echo "Directory does not exists"
-				fi
-			</d2l-code-view>
-
-		</d2l-demo-page>
-
-	</body>
-</html>