npm - @brightspace-ui/core - Versions diffs - 2.26.3 → 2.28.0 - Mend

@brightspace-ui/core 2.26.3 → 2.28.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (152) hide show

package/helpers/demo/prism.html ADDED Viewed

@@ -0,0 +1,417 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<title>Prism Helper</title>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<meta charset="UTF-8">
+		<link rel="stylesheet" href="../../components/demo/styles.css" type="text/css">
+		<script type="module">
+			import '../../components/colors/colors.js';
+			import '../../components/switch/switch.js';
+			import '../../components/typography/typography.js';
+			import { codeStyles, formatCodeElement } from '../prism.js';
+			import { css, html, LitElement } from 'lit';
+			import { classMap } from 'lit/directives/class-map.js';
+			class DemoPrism extends LitElement {
+				static get properties() {
+					return {
+						dark: { type: Boolean, reflect: true }
+					};
+				}
+				static get styles() {
+					return [codeStyles, css`
+						:host {
+							display: block;
+						}
+					`];
+				}
+				render() {
+					const classes = { 'd2l-code': true, 'd2l-code-dark': this.dark };
+					return html`
+<pre class="${classMap(classes)}"><code class="language-javascript line-numbers">function helloGrumpy(name) {
+	console.log(\`Hi there \${name}. Here's some really long text to test overflowing the bounding container.\`);
+}
+helloGrumpy('Wizard');
+</code></pre>
+<pre class="${classMap(classes)}"><code class="language-bash line-numbers">#!/bin/bash
+if [ -d $directory ]; then
+	echo "Directory exists"
+else
+	echo "Directory does not exists"
+fi</code></pre>
+<pre class="${classMap(classes)}"><code class="language-css line-numbers">.grumpy > img {
+	height: 100%;
+	width: 100%;
+}</code></pre>
+<pre class="${classMap(classes)}"><code class="language-json line-numbers">{
+	"jinxed": "gnomes",
+	"grumpy": [ "wizards" ]
+}
+</code></pre>
+<pre class="${classMap(classes)}"><code class="language-sql line-numbers">DECLARE @MyCounter INT; /* keyword, variable, punctuation */
+SELECT AVG(Calories) AS AverageCalories FROM Desserts; /* keyword, function */
+SELECT * FROM Desserts /* keyword, operator */
+SET ROWCOUNT 4; /* keyword, number */
+SET @Hidden = FALSE; /* keyword, variable, boolean */
+SET @Donuts = 'Yummy'; /* keyword, variable, string */
+</code></pre>
+					`;
+				}
+				updated(changedProperties) {
+					super.updated(changedProperties);
+					this.shadowRoot.querySelectorAll('pre').forEach(code => formatCodeElement(code));
+				}
+			}
+			customElements.define('d2l-demo-prism', DemoPrism);
+		</script>
+		<style>
+			html {
+				font-size: 20px;
+			}
+			body {
+				padding: 1rem;
+			}
+			.heading-container {
+				display: flex;
+			}
+			.heading-container > h1 {
+				flex: auto;
+			}
+			.heading-container > d2l-switch {
+				align-self: center;
+				flex: none;
+			}
+			table {
+				font-family: 'Lato', 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;
+				font-size: 16px;
+			}
+			th {
+				text-align: left;
+			}
+			tr > td:first-child {
+				width: 300px;
+			}
+		</style>
+	</head>
+	<body class="d2l-typography">
+		<!-- This page intentionally does not use d2l-demo-page so we can properly demo/test the loader without PrismJS being loaded by those components -->
+		<div class="heading-container">
+			<h1 class="d2l-heading-2">Prism Helper</h1>
+			<d2l-switch text="Dark" on text-position="start" on></d2l-switch>
+		</div>
+		<h2 class="d2l-heading-3">Tokens</h2>
+		<table style="width: 100%;">
+			<thead>
+				<tr>
+					<th>Token</th>
+					<th>Example</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>keyword</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-javascript">import { stuff } from 'some/where.js';</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>builtin</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-python">pi = round(float('3.14159'), 2)</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>class-name</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-javascript">class Wizard extends Human { /* ... */ }</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>function</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-javascript">function helloGrumpy(name) { /* ... */ }
+helloGrumpy('Wizard');</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>parameter</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-javascript">function helloGrumpy(name) { /* ... */ }</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>boolean</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-javascript">const wizardsLikeBeer = false;</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>number</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-javascript">const favouriteNumber = 3.14159;</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>string</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-javascript">const hiGrumpy = 'Hi Grumpy!';</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>template-string, template-punctuation</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-javascript">const hiGrumpy = `Hi Grumpy!`;</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>interpolation, interpolation-punctuation</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-javascript">console.log(`Hi there ${name}.`);</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>char</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-javascript"></code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>symbol</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-javascript"></code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>regex</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-javascript">let entity = /&amp;#x?[\da-f]{1,8};/;</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>url</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-css">body { background: url("wizard.png"); }</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>operator</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-javascript">x += (y + 4 &gt;&gt; -z === w) ? b ** c : ~a;</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>variable</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-sql">DECLARE @MyCounter INT;</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>constant</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-javascript">const PI = 3.14159;</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>property</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-css">.grumpy > img { height: 100%; }</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>punctuation</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-javascript">import { stuff } from 'some/where.js';</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>important</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-css">.grumpy > img { height: 100% !important; }</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>comment</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-javascript">/* grump wizards */</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>tag</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-markup">&lt;h1&gt;Grumpy Wizards&lt;/h1&gt;</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>attr-name, attr-value</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-markup">&lt;h1 class="dangerous"&gt;Grumpy Wizards&lt;/h1&gt;</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>namespace</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-java">throw new java.lang.UnsupportedOperationException();</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>prolog</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-markup">&lt?xml version="1.0" encoding="utf-8"?&gt;</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>doctype</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-markup">&lt;!DOCTYPE html&gt;</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>cdata</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-markup">&lt;![CDATA[ grumpy wizards eat donuts ]]&gt;</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>entity</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-markup">&amp;pound; &amp;#163;</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>atrule</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-css">@media (prefers-reduced-motion: reduce) { /* no animations */ }</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>selector</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-css">.grumpy > img { /* ... */ }</code></pre>
+					</td>
+				</tr>
+				<tr>
+					<td>null</td>
+					<td>
+						<pre class="d2l-code d2l-code-dark"><code class="language-json">{ "fritter": null }</code></pre>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+		<h2 class="d2l-heading-3">More Samples (Global Scope)</h2>
+<pre class="d2l-code"><code class="language-javascript line-numbers">// comment
+/* comment */
+import { stuff } from 'some/where.js'; // keyword, punctuation, string
+function helloGrumpy(name) { // keyword, function, parameter
+	console.log(`Hi there ${name}.`); // template-string, template-punctuation, interpolation, interpolation-punctuation
+}
+class Wizard extends Human { } // keyword, class-name
+const grumpy = new Wizard(); // keyword, operator, class-name
+let wizardFoods = [...donuts, ... cakes, ...pies]; // keyword, operator
+const wizardsLikeBeer = false; // keyword, operator, boolean
+const favouriteNumber = 3.14159; // keyword, operator, number
+const PI = 3.14159; // keyword, operator, constant
+const regex = /[^\w\s]/g; // keyword, operator, regex, regex-delimiter, regex-source, regex-flags
+</code></pre>
+<pre class="d2l-code"><code class="language-css line-numbers">.grumpy > img { /* selector */
+	background-image: url("smile.png"); /* property, url, string */
+	height: 100%; /* property, punctuation */
+	width: var(--some-var); /* property, punctuation, function */
+}
+@font-face { /* atrule, rule */
+	font-family: 'Lato'; /* property, punctuation, string */
+	font-style: normal;
+	src: local('Lato Regular'); /* property, function, string */
+}
+@media (prefers-reduced-motion: reduce) { /* atrule, rule, property */
+	:host([opened]), :host([opened-above]) {
+		animation: none !important; /* property, important */
+	}
+}
+</code></pre>
+<pre class="d2l-code"><code class="language-markup line-numbers">&lt;!DOCTYPE html&gt; &lt;!-- doctype, doctype-tag, name --&gt;
+&lt;html&gt; &lt;!-- tag, punctuation --&gt;
+	&lt;body class="typography"&gt; &lt;!-- attr-name, attr-value --&gt;
+		&lt;![CDATA[ some cdata section ]]&gt; &lt;!-- cdata --&gt;
+		&lt;div style="color: blue;"&gt; &lt;!-- attr-name, attr-value, attr-equals, value, css, property --&gt;
+			&amp;pound; &lt;!-- entity, named-entity --&gt;
+			&amp;#163; &lt;!-- entity --&gt;
+		&lt;/div&gt;
+	&lt;/body&gt;
+&lt;/html&gt;
+</code></pre>
+<pre class="d2l-code d2l-code-dark"><code class="language-sql line-numbers">DECLARE @MyCounter INT; /* keyword, variable, punctuation */
+SELECT AVG(Calories) AS AverageCalories FROM Desserts; /* keyword, function */
+SELECT * FROM Desserts /* keyword, operator */
+SET ROWCOUNT 4; /* keyword, number */
+SET @Hidden = FALSE; /* keyword, variable, boolean */
+SET @Donuts = 'Yummy'; /* keyword, variable, string */
+</code></pre>
+<pre class="d2l-code d2l-code-dark"><code class="language-json line-numbers">{ /* punctuation */
+	"jinxed": "gnomes", /* property, operator, string */
+	"grumpy": [ "wizards" ],
+	"jelly": 99, /* property, operator, number */
+	"donut": true, /* property, operator, boolean */
+	"fritter": null /* property, operator, null, keyword */
+}
+</code></pre>
+		<h2 class="d2l-heading-3">More Samples (Web Component Scope)</h2>
+		<d2l-demo-prism dark></d2l-demo-prism>
+		<script type="module">
+				import { formatCodeElement } from '../prism.js';
+				const formatCodeElements = () => {
+					const darkSwitch = document.querySelector('d2l-switch');
+					const codeElements = document.querySelectorAll('pre');
+					codeElements.forEach(codeElement => {
+						if (darkSwitch.on) codeElement.classList.add('d2l-code-dark');
+						else codeElement.classList.remove('d2l-code-dark');
+						formatCodeElement(codeElement);
+					});
+					document.querySelector('d2l-demo-prism').dark = darkSwitch.on;
+				};
+				formatCodeElements();
+				const darkSwitch = document.querySelector('d2l-switch');
+				darkSwitch.addEventListener('change', formatCodeElements);
+		</script>
+	</body>
+</html>