@brightspace-ui/core 2.115.1 → 2.117.0

package/components/collapsible-panel/collapsible-panel-summary-item.js

@@ -1,11 +1,12 @@
 import '../colors/colors.js';
 import { css, html, LitElement } from 'lit';
 import { bodySmallStyles } from '../typography/styles.js';
+import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 /**
  * A component for a "summary item" child component that describes the content in a collapsible panel.
  */
-class CollapsiblePanelSummaryItem extends LitElement {
+class CollapsiblePanelSummaryItem extends SkeletonMixin(LitElement) {
 
 	static get properties() {
 		return {
@@ -18,7 +19,7 @@ class CollapsiblePanelSummaryItem extends LitElement {
 	}
 
 	static get styles() {
-		return [bodySmallStyles, css`
+		return [super.styles, bodySmallStyles, css`
 			:host {
 				color: var(--d2l-color-galena);
 				display: block;
@@ -38,7 +39,7 @@ class CollapsiblePanelSummaryItem extends LitElement {
 	}
 
 	render() {
-		return html`<p class="d2l-body-small">${this.text}</p>`;
+		return html`<p class="d2l-body-small d2l-skeletize">${this.text}</p>`;
 	}
 }
 

package/components/collapsible-panel/collapsible-panel.js

@@ -7,6 +7,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
 import { offscreenStyles } from '../offscreen/offscreen.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
+import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
 const normalizeHeadingNumber = (number) => {
 	number = parseInt(number);
@@ -20,13 +21,14 @@ const defaultHeading = 3;
 /**
  * A container with a title that can be expanded/collapsed to show/hide content.
  * @slot header - Slot for supporting header content
+ * @slot before - Slot for content to be placed at the left side of the header, aligned with the title and header slot
  * @slot summary - Slot for the summary of the expanded content. Only accepts `d2l-collapsible-panel-summary-item`
  * @slot default - Slot for the expanded content
  * @slot actions - Slot for buttons and dropdown openers to be placed in top right corner of header
  * @fires d2l-collapsible-panel-expand - Dispatched when the panel is expanded
  * @fires d2l-collapsible-panel-collapse - Dispatched when the panel is collapsed
  */
-class CollapsiblePanel extends FocusMixin(RtlMixin(LitElement)) {
+class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 
 	static get properties() {
 		return {
@@ -76,13 +78,14 @@ class CollapsiblePanel extends FocusMixin(RtlMixin(LitElement)) {
 			 */
 			noSticky: { attribute: 'no-sticky', type: Boolean },
 			_focused: { state: true },
+			_hasBefore: { state: true },
 			_hasSummary: { state: true },
 			_scrolled: { state: true },
 		};
 	}
 
 	static get styles() {
-		return [heading1Styles, heading2Styles, heading3Styles, heading4Styles, offscreenStyles, css`
+		return [super.styles, heading1Styles, heading2Styles, heading3Styles, heading4Styles, offscreenStyles, css`
 			:host {
 				--d2l-collapsible-panel-focus-outline: solid 2px var(--d2l-color-celestine);
 				--d2l-collapsible-panel-spacing-inline: 0.9rem;
@@ -101,7 +104,7 @@ class CollapsiblePanel extends FocusMixin(RtlMixin(LitElement)) {
 				border: 1px solid var(--d2l-color-mica);
 				border-radius: 0.4rem;
 			}
-			:host(:not([expanded])) .d2l-collapsible-panel {
+			:host(:not([expanded]):not([skeleton])) .d2l-collapsible-panel {
 				cursor: pointer;
 			}
 			:host([type="subtle"]) .d2l-collapsible-panel {
@@ -121,11 +124,24 @@ class CollapsiblePanel extends FocusMixin(RtlMixin(LitElement)) {
 			:host([heading-style="4"]) {
 				--d2l-collapsible-panel-header-spacing: 0.3rem;
 			}
+			.d2l-collapsible-panel-before {
+				grid-row: 1/-1;
+			}
+			.d2l-collapsible-panel.has-before .d2l-collapsible-panel-before {
+				margin: 0.3rem 0;
+				margin-inline-start: var(--d2l-collapsible-panel-spacing-inline);
+			}
 			.d2l-collapsible-panel-header {
 				border-radius: 0.4rem;
 				cursor: pointer;
+				display: grid;
+				grid-template-columns: auto 1fr;
+				grid-template-rows: auto auto;
 				padding: var(--d2l-collapsible-panel-header-spacing) 0;
 			}
+			:host(:not([skeleton])) .d2l-collapsible-panel-header {
+				cursor: pointer;
+			}
 			:host([type="inline"]) .d2l-collapsible-panel-header {
 				border-radius: 0;
 				outline-offset: -2px;
@@ -152,6 +168,9 @@ class CollapsiblePanel extends FocusMixin(RtlMixin(LitElement)) {
 				overflow-y: hidden;
 				user-select: none;
 			}
+			.d2l-collapsible-panel.has-before .d2l-collapsible-panel-title {
+				margin-inline-start: 0.75rem;
+			}
 
 			.d2l-collapsible-panel.focused {
 				outline: var(--d2l-collapsible-panel-focus-outline);
@@ -169,8 +188,12 @@ class CollapsiblePanel extends FocusMixin(RtlMixin(LitElement)) {
 			}
 			.d2l-collapsible-panel-header-secondary {
 				display: flex;
+				margin-inline-end: var(--d2l-collapsible-panel-spacing-inline);
 				margin-inline-start: var(--d2l-collapsible-panel-spacing-inline);
 			}
+			.d2l-collapsible-panel.has-before .d2l-collapsible-panel-header-secondary {
+				margin-inline-start: 0.75rem;
+			}
 			.d2l-collapsible-panel-header-secondary ::slotted(*) {
 				cursor: default;
 			}
@@ -286,6 +309,7 @@ class CollapsiblePanel extends FocusMixin(RtlMixin(LitElement)) {
 			'd2l-collapsible-panel': true,
 			'focused': this._focused,
 			'has-summary': this._hasSummary,
+			'has-before': this._hasBefore,
 			'scrolled': this._scrolled,
 		};
 		const expandCollapseLabel = this.expandCollapseLabel || this.panelTitle;
@@ -341,6 +365,12 @@ class CollapsiblePanel extends FocusMixin(RtlMixin(LitElement)) {
 		}
 	}
 
+	_handleBeforeSlotChange(e) {
+		const content = e.target.assignedNodes({ flatten: true });
+
+		this._hasBefore = content?.length > 0;
+	}
+
 	_handleExpandCollapse(e) {
 		const eventPromise = this.expanded ? e.detail.expandComplete : e.detail.collapseComplete;
 		const event = `d2l-collapsible-panel-${this.expanded ? 'expand' : 'collapse' }`;
@@ -387,13 +417,16 @@ class CollapsiblePanel extends FocusMixin(RtlMixin(LitElement)) {
 	_renderHeader() {
 		return html`
 			<div class="d2l-collapsible-panel-header" @click="${this._handleHeaderClick}">
+				<div class="d2l-collapsible-panel-before">
+					<slot name="before" @slotchange="${this._handleBeforeSlotChange}"></slot>
+				</div>
 				<div class="d2l-collapsible-panel-header-primary">
 					${this._renderPanelTitle()}
 					<div class="d2l-collapsible-panel-header-actions" @click="${this._handleActionsClick}">
 						<slot name="actions"></slot>
 					</div>
 					<div class="d2l-collapsible-panel-opener">
-						<d2l-icon-custom size="tier1">
+						<d2l-icon-custom size="tier1" class="d2l-skeletize">
 							<svg xmlns="http://www.w3.org/2000/svg" width="10" height="18" fill="none" viewBox="0 0 10 18">
 								<path stroke="var(--d2l-color-tungsten)" stroke-linejoin="round" stroke-width="2" d="m9 9-8 8V1l8 8Z"/>
 							</svg>
@@ -414,6 +447,7 @@ class CollapsiblePanel extends FocusMixin(RtlMixin(LitElement)) {
 
 		const titleClasses = {
 			'd2l-collapsible-panel-title': true,
+			'd2l-skeletize': true,
 			[`d2l-heading-${headingStyle}`]: true,
 		};
 
@@ -449,6 +483,7 @@ class CollapsiblePanel extends FocusMixin(RtlMixin(LitElement)) {
 	}
 
 	_toggleExpand() {
+		if (this.skeleton) return;
 		this.expanded = !this.expanded;
 	}
 }

package/components/collapsible-panel/demo/collapsible-panel.html

@@ -106,9 +106,10 @@
 				</d2l-collapsible-panel>
 			</d2l-demo-snippet>
 
-			<h2>With custom action and header content</h2>
+			<h2>With custom action, before and header content</h2>
 			<d2l-demo-snippet>
 					<d2l-collapsible-panel panel-title="Session: January 1, 2021: 10:00 AM" expand-collapse-label="Session on January 1">
+						<d2l-icon icon="tier3:assignments" slot="before"></d2l-icon>
 						<d2l-button-icon slot="actions" icon="tier1:fullscreen"></d2l-button-icon><d2l-button-icon slot="actions" icon="tier1:download"></d2l-button-icon><d2l-dropdown-more slot="actions">
 							<d2l-dropdown-menu>
 								<d2l-menu>

package/custom-elements.json

@@ -1156,6 +1156,12 @@
           "description": "REQUIRED: Text that is displayed",
           "type": "string",
           "default": "\"\""
+        },
+        {
+          "name": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -1165,6 +1171,13 @@
           "description": "REQUIRED: Text that is displayed",
           "type": "string",
           "default": "\"\""
+        },
+        {
+          "name": "skeleton",
+          "attribute": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
         }
       ]
     },
@@ -1218,6 +1231,12 @@
           "description": "Disables sticky positioning for the header",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "properties": [
@@ -1274,6 +1293,13 @@
           "description": "Disables sticky positioning for the header",
           "type": "boolean",
           "default": "false"
+        },
+        {
+          "name": "skeleton",
+          "attribute": "skeleton",
+          "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
+          "type": "boolean",
+          "default": "false"
         }
       ],
       "events": [
@@ -1291,6 +1317,10 @@
           "name": "header",
           "description": "Slot for supporting header content"
         },
+        {
+          "name": "before",
+          "description": "Slot for content to be placed at the left side of the header, aligned with the title and header slot"
+        },
         {
           "name": "summary",
           "description": "Slot for the summary of the expanded content. Only accepts `d2l-collapsible-panel-summary-item`"

package/package.json

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