@brightspace-ui/core 3.242.0 → 3.243.1

package/components/card/README.md

@@ -14,7 +14,7 @@ Used to surface pertinent information, cards make it easy for users to browse in
   import '@brightspace-ui/core/components/tooltip/tooltip.js';
 </script>
 
-<d2l-card align-center text="Biology" align-center style="width: 245px;">
+<d2l-card align-center text="Biology" style="width: 245px;">
   <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/7905e442-f009-46f6-8586-2c273a7c0158/banner-narrow-low-density-max-size.jpg">
   <div slot="content">
     <div>Biology</div>

package/components/page/page-main.js

@@ -0,0 +1,24 @@
+import { css, html, LitElement } from 'lit';
+import { PagePanelMixin, pagePanelStyles } from './page-panel-mixin.js';
+
+/**
+ * Component to be placed in the main default slot of d2l-page, providing a panel with optional header
+ * @slot - The main content of the main page panel
+ * @slot header-start - Optional start content of the main page header
+ * @slot header-end - Optional end content of the main page header
+ */
+class PageMain extends PagePanelMixin(LitElement) {
+
+	static styles = [pagePanelStyles, css`
+		.panel-header {
+			top: var(--d2l-page-header-height, 0);
+		}
+	`];
+
+	render() {
+		return this._renderPanel(html`<slot></slot>`);
+	}
+
+}
+
+customElements.define('d2l-page-main', PageMain);

package/components/page/page-panel-mixin.js

@@ -0,0 +1,74 @@
+import '../colors/colors.js';
+import { css, html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+
+export const pagePanelStyles = css`
+	.panel-header:not([hidden]) {
+		align-items: center;
+		display: flex;
+		flex-direction: row;
+		justify-content: space-between;
+	}
+	.panel-header {
+		background-color: white;
+		border-bottom: 1px solid var(--d2l-color-mica);
+		height: 70px;
+		overflow: hidden;
+		padding: 0 30px;
+		position: sticky;
+		top: 0;
+		z-index: 14; /* To be over sticky content of our core components, but not over the header shadow */
+	}
+
+	.header-start,
+	.header-end {
+		display: flex;
+		gap: 6px;
+	}
+
+	.panel {
+		padding: 30px;
+	}
+`;
+
+export const PagePanelMixin = superclass => class extends superclass {
+
+	static properties = {
+		_hasHeader: { state: true },
+		_slotVisibility: { state: true }
+	};
+
+	constructor() {
+		super();
+		this._hasHeader = false;
+		this._slotVisibility = {};
+	}
+
+	_renderPanel(content) {
+		const panelClasses = {
+			'panel': true,
+			'header-sticky': this._hasHeader
+		};
+		const header = html`
+			<div ?hidden="${!this._hasHeader}" class="panel-header">
+				<div class="header-start"><slot name="header-start" @slotchange="${this.#handleSlotVisibilityChange}"></slot></div>
+				<div class="header-end"><slot name="header-end" @slotchange="${this.#handleSlotVisibilityChange}"></slot></div>
+			</div>`;
+
+		return html`
+			<div>
+				${header}
+				<div class="${classMap(panelClasses)}">${content}</div>
+			</div>
+		`;
+	}
+
+	#handleSlotVisibilityChange(e) {
+		const key = e.target.name;
+		const nodes = e.target.assignedNodes();
+		this._slotVisibility = { ...this._slotVisibility, [key]: nodes.length !== 0 };
+
+		this._hasHeader = this._slotVisibility['header-start'] || this._slotVisibility['header-end'];
+	}
+
+};

package/components/page/page-side-nav.js

@@ -0,0 +1,19 @@
+import { html, LitElement } from 'lit';
+import { PagePanelMixin, pagePanelStyles } from './page-panel-mixin.js';
+
+/**
+ * Component to be placed in the side-nav slot of d2l-page, providing a panel with optional header
+ * @slot - The main content of the side-nav page panel
+ * @slot header-start - Optional start content of the side-nav page header
+ * @slot header-end - Optional end content of the side-nav page header
+ */
+class PageSideNav extends PagePanelMixin(LitElement) {
+
+	static styles = [pagePanelStyles];
+
+	render() {
+		return this._renderPanel(html`<slot></slot>`);
+	}
+}
+
+customElements.define('d2l-page-side-nav', PageSideNav);

package/components/page/page-supporting.js

@@ -0,0 +1,19 @@
+import { html, LitElement } from 'lit';
+import { PagePanelMixin, pagePanelStyles } from './page-panel-mixin.js';
+
+/**
+ * Component to be placed in the supporting slot of d2l-page, providing a panel with optional header
+ * @slot - The main content of the supporting page panel
+ * @slot header-start - Optional start content of the supporting page header
+ * @slot header-end - Optional end content of the supporting page header
+ */
+class PageSupporting extends PagePanelMixin(LitElement) {
+
+	static styles = [pagePanelStyles];
+
+	render() {
+		return this._renderPanel(html`<slot></slot>`);
+	}
+}
+
+customElements.define('d2l-page-supporting', PageSupporting);

package/components/page/page.js

@@ -44,10 +44,14 @@ class Page extends LocalizeCoreElement(LitElement) {
 			--d2l-page-footer-max-width: 100%;
 		}
 
+		.header {
+			position: relative;
+			z-index: 15; /* To be over sticky content of our core components */
+		}
+
 		.page.header-sticky .header {
 			position: sticky;
 			top: 0;
-			z-index: 15; /* To be over sticky content of our core components */
 		}
 
 		.content {

package/custom-elements.json

@@ -12270,8 +12270,8 @@
       "properties": [
         {
           "name": "properties",
-          "type": "{ demoMode: { type: BooleanConstructor; attribute: string; }; hasFooter: { type: BooleanConstructor; attribute: string; }; hasSideNavPanel: { type: BooleanConstructor; attribute: string; }; hasSupportingPanel: { ...; }; navType: { ...; }; widthType: { ...; }; _allowThreePanels: { ...; }; }",
-          "default": "{\"demoMode\":{\"type\":\"Boolean\",\"attribute\":\"demo-mode\"},\"hasFooter\":{\"type\":\"Boolean\",\"attribute\":\"has-footer\"},\"hasSideNavPanel\":{\"type\":\"Boolean\",\"attribute\":\"has-side-nav-panel\"},\"hasSupportingPanel\":{\"type\":\"Boolean\",\"attribute\":\"has-supporting-panel\"},\"navType\":{\"type\":\"String\",\"attribute\":\"nav-type\"},\"widthType\":{\"type\":\"String\",\"attribute\":\"width-type\"},\"_allowThreePanels\":{\"state\":true}}"
+          "type": "{ demoMode: { type: BooleanConstructor; attribute: string; }; hasFooter: { type: BooleanConstructor; attribute: string; }; hasMainHeader: { type: BooleanConstructor; attribute: string; }; ... 7 more ...; _demoDialogOpened: { ...; }; }",
+          "default": "{\"demoMode\":{\"type\":\"Boolean\",\"attribute\":\"demo-mode\"},\"hasFooter\":{\"type\":\"Boolean\",\"attribute\":\"has-footer\"},\"hasMainHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-main-header\"},\"hasSideNavHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-side-nav-header\"},\"hasSideNavPanel\":{\"type\":\"Boolean\",\"attribute\":\"has-side-nav-panel\"},\"hasSupportingHeader\":{\"type\":\"Boolean\",\"attribute\":\"has-supporting-header\"},\"hasSupportingPanel\":{\"type\":\"Boolean\",\"attribute\":\"has-supporting-panel\"},\"navType\":{\"type\":\"String\",\"attribute\":\"nav-type\"},\"widthType\":{\"type\":\"String\",\"attribute\":\"width-type\"},\"_allowThreePanels\":{\"state\":true},\"_demoDialogOpened\":{\"state\":true}}"
         },
         {
           "name": "styles",
@@ -12288,11 +12288,26 @@
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "hasMainHeader",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "hasSideNavHeader",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "hasSideNavPanel",
           "type": "boolean",
           "default": "false"
         },
+        {
+          "name": "hasSupportingHeader",
+          "type": "boolean",
+          "default": "false"
+        },
         {
           "name": "hasSupportingPanel",
           "type": "boolean",
@@ -12310,6 +12325,99 @@
         }
       ]
     },
+    {
+      "name": "d2l-page-main",
+      "path": "./components/page/page-main.js",
+      "description": "Component to be placed in the main default slot of d2l-page, providing a panel with optional header",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[\"pagePanelStyles\",null]"
+        },
+        {
+          "name": "properties",
+          "type": "{ _hasHeader: { state: boolean; }; _slotVisibility: { state: boolean; }; }",
+          "default": "{\"_hasHeader\":{\"state\":true},\"_slotVisibility\":{\"state\":true}}"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "The main content of the main page panel"
+        },
+        {
+          "name": "header-start",
+          "description": "Optional start content of the main page header"
+        },
+        {
+          "name": "header-end",
+          "description": "Optional end content of the main page header"
+        }
+      ]
+    },
+    {
+      "name": "d2l-page-side-nav",
+      "path": "./components/page/page-side-nav.js",
+      "description": "Component to be placed in the side-nav slot of d2l-page, providing a panel with optional header",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[\"pagePanelStyles\"]"
+        },
+        {
+          "name": "properties",
+          "type": "{ _hasHeader: { state: boolean; }; _slotVisibility: { state: boolean; }; }",
+          "default": "{\"_hasHeader\":{\"state\":true},\"_slotVisibility\":{\"state\":true}}"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "The main content of the side-nav page panel"
+        },
+        {
+          "name": "header-start",
+          "description": "Optional start content of the side-nav page header"
+        },
+        {
+          "name": "header-end",
+          "description": "Optional end content of the side-nav page header"
+        }
+      ]
+    },
+    {
+      "name": "d2l-page-supporting",
+      "path": "./components/page/page-supporting.js",
+      "description": "Component to be placed in the supporting slot of d2l-page, providing a panel with optional header",
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[\"pagePanelStyles\"]"
+        },
+        {
+          "name": "properties",
+          "type": "{ _hasHeader: { state: boolean; }; _slotVisibility: { state: boolean; }; }",
+          "default": "{\"_hasHeader\":{\"state\":true},\"_slotVisibility\":{\"state\":true}}"
+        }
+      ],
+      "slots": [
+        {
+          "name": "",
+          "description": "The main content of the supporting page panel"
+        },
+        {
+          "name": "header-start",
+          "description": "Optional start content of the supporting page header"
+        },
+        {
+          "name": "header-end",
+          "description": "Optional end content of the supporting page header"
+        }
+      ]
+    },
     {
       "name": "d2l-page",
       "path": "./components/page/page.js",
@@ -12323,7 +12431,7 @@
         {
           "name": "styles",
           "type": "CSSResult",
-          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(400px, 100%); /* Actual min width TBD */\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\theight: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tflex: none;\\n\\t\\t\\twidth: 4px;\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding: 0.75rem 0;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 10; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
+          "default": "\"css`\\n\\t\\t:host {\\n\\t\\t\\t--d2l-page-header-max-width: 1230px;\\n\\t\\t\\t--d2l-page-content-max-width: 1230px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1230px;\\n\\t\\t\\t--d2l-page-margin-inline: auto;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"wide\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 1440px;\\n\\t\\t\\t--d2l-page-content-max-width: 1440px;\\n\\t\\t\\t--d2l-page-footer-max-width: 1440px;\\n\\t\\t}\\n\\n\\t\\t:host([width-type=\\\"fullscreen\\\"]) {\\n\\t\\t\\t--d2l-page-header-max-width: 100%;\\n\\t\\t\\t--d2l-page-content-max-width: 100%;\\n\\t\\t\\t--d2l-page-footer-max-width: 100%;\\n\\t\\t}\\n\\n\\t\\t.header {\\n\\t\\t\\tposition: relative;\\n\\t\\t\\tz-index: 15; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\n\\t\\t.page.header-sticky .header {\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: 0;\\n\\t\\t}\\n\\n\\t\\t.content {\\n\\t\\t\\tdisplay: flex;\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-content-max-width, 100%);\\n\\t\\t\\tpadding-bottom: var(--d2l-page-footer-height, 0); /* Reserve space for fixed footer */\\n\\t\\t}\\n\\n\\t\\tmain {\\n\\t\\t\\tflex: 1;\\n\\t\\t\\tmin-width: min(400px, 100%); /* Actual min width TBD */\\n\\t\\t}\\n\\n\\t\\t.side-nav-panel,\\n\\t\\t.supporting-panel {\\n\\t\\t\\theight: calc(100vh - var(--d2l-page-header-height, 0) - var(--d2l-page-footer-height, 0));\\n\\t\\t\\toverflow: clip auto;\\n\\t\\t\\tposition: sticky;\\n\\t\\t\\ttop: var(--d2l-page-header-height, 0);\\n\\t\\t}\\n\\n\\t\\t.divider {\\n\\t\\t\\tbackground-color: var(--d2l-color-gypsum);\\n\\t\\t\\tflex: none;\\n\\t\\t\\twidth: 4px;\\n\\t\\t}\\n\\n\\t\\t.footer:not([hidden]),\\n\\t\\t.floating-buttons-container {\\n\\t\\t\\tdisplay: inline;\\n\\t\\t}\\n\\t\\t.fixed-footer {\\n\\t\\t\\tbackground-color: white;\\n\\t\\t\\tbox-shadow: 0 -2px 4px rgba(32, 33, 34, 0.2); /* ferrite */\\n\\t\\t\\tinset: auto 0 0;\\n\\t\\t\\tpadding: 0.75rem 0;\\n\\t\\t\\tposition: fixed;\\n\\t\\t\\tz-index: 10; /* To be over sticky content of our core components */\\n\\t\\t}\\n\\t\\t.footer-contents {\\n\\t\\t\\tmargin-inline: var(--d2l-page-margin-inline, 0);\\n\\t\\t\\tmax-width: var(--d2l-page-footer-max-width, 100%);\\n\\t\\t}\\n\\t`\""
         },
         {
           "name": "widthType",

package/helpers/prism.js

@@ -1,10 +1,7 @@
 import { css, unsafeCSS } from 'lit';
-import { getFlag } from './flags.js';
 import { svgToCSS } from './svg-to-css.js';
 
-const prismLocation = getFlag('shield-14201-update-prismjs-1-30', false)
-	? 'https://s.brightspace.com/lib/prismjs/1.30.0'
-	: 'https://s.brightspace.com/lib/prismjs/1.28.0';
+const prismLocation = 'https://s.brightspace.com/lib/prismjs/1.30.0';
 //const prismLocation = '/node_modules/prismjs'; // for local debugging
 
 // If adding a language, check its Prism dependencies and modify languageDependencies below if necessary
@@ -359,7 +356,7 @@ const languagesLoaded = {
 	plain: Promise.resolve()
 };
 
-const loadLanguage = async(key, location) => {
+const loadLanguage = async key => {
 	if (languagesLoaded[key]) return languagesLoaded[key];
 
 	// Prism languages can extend other anguages and must be loaded in order
@@ -373,7 +370,7 @@ const loadLanguage = async(key, location) => {
 		const script = document.createElement('script');
 		script.async = 'async';
 		script.onload = resolve;
-		script.src = `${location}/components/prism-${key}.min.js`;
+		script.src = `${prismLocation}/components/prism-${key}.min.js`;
 		document.head.appendChild(script);
 	});
 
@@ -382,14 +379,14 @@ const loadLanguage = async(key, location) => {
 
 const pluginsLoaded = {};
 
-const loadPlugin = async(plugin, location) => {
+const loadPlugin = async plugin => {
 	if (pluginsLoaded[plugin]) return pluginsLoaded[plugin];
 
 	pluginsLoaded[plugin] = new Promise(resolve => {
 		const script = document.createElement('script');
 		script.async = 'async';
 		script.onload = resolve;
-		script.src = `${location}/plugins/${plugin}/prism-${plugin}.min.js`;
+		script.src = `${prismLocation}/plugins/${plugin}/prism-${plugin}.min.js`;
 		document.head.appendChild(script);
 	});
 
@@ -400,17 +397,17 @@ const languageAddons = {
 	css: [{ key: 'css-extras', type: 'lang' }, { key: 'inline-color', type: 'plugin' }]
 };
 
-const loadLanguageAddons = async(key, location) => {
+const loadLanguageAddons = async key => {
 	if (!languageAddons[key]) return;
 	return Promise.all(languageAddons[key].map(addon => {
-		if (addon.type === 'lang') return loadLanguage(addon.key, location);
+		if (addon.type === 'lang') return loadLanguage(addon.key);
 		else return loadPlugin(addon.key, location);
 	}));
 };
 
 let prismLoaded;
 
-const loadPrism = (location) => {
+const loadPrism = () => {
 	if (prismLoaded) return prismLoaded;
 
 	// Set Prism to manual mode before loading to make sure
@@ -424,7 +421,7 @@ const loadPrism = (location) => {
 			const script = document.createElement('script');
 			script.async = 'async';
 			script.onload = resolve;
-			script.src = `${location}/prism.js`;
+			script.src = `${prismLocation}/prism.js`;
 			document.head.appendChild(script);
 		}),
 		new Promise(resolve => {
@@ -445,7 +442,7 @@ const getCodeElement = elem => {
 	return elem.querySelector('code');
 };
 
-export async function formatCodeElement(elem, forceVersionBump) {
+export async function formatCodeElement(elem) {
 	const code = getCodeElement(elem);
 
 	if (code.className.indexOf('language-') === -1) return;
@@ -453,14 +450,11 @@ export async function formatCodeElement(elem, forceVersionBump) {
 	const languageInfo = getLanguageInfo(code);
 	const lineNumbers = elem.classList.contains('line-numbers') || code.classList.contains('line-numbers');
 
-	// Remove when shield-14201-update-prismjs-1-30 is removed (remove pass-throughs and use prismLocation directly in loadLanguage, loadPrism, and loadPlugin)
-	const location = forceVersionBump ? 'https://s.brightspace.com/lib/prismjs/1.30.0' : prismLocation;
-
-	await loadPrism(location); // must be loaded before loading plugins or languages
+	await loadPrism(); // must be loaded before loading plugins or languages
 	await Promise.all([
-		loadLanguage(languageInfo.key, location),
-		loadLanguageAddons(languageInfo.key, location),
-		lineNumbers ? loadPlugin('line-numbers', location) : null
+		loadLanguage(languageInfo.key),
+		loadLanguageAddons(languageInfo.key),
+		lineNumbers ? loadPlugin('line-numbers') : null
 	]);
 
 	if (!elem.dataset.language && languageInfo.key !== 'plain') elem.dataset.language = languageInfo.desc;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "3.242.0",
+  "version": "3.243.1",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",