@brightspace-ui/core 2.115.1 → 2.116.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);
@@ -26,7 +27,7 @@ const defaultHeading = 3;
  * @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 {
@@ -82,7 +83,7 @@ class CollapsiblePanel extends FocusMixin(RtlMixin(LitElement)) {
 	}
 
 	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 +102,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 {
@@ -123,9 +124,11 @@ class CollapsiblePanel extends FocusMixin(RtlMixin(LitElement)) {
 			}
 			.d2l-collapsible-panel-header {
 				border-radius: 0.4rem;
-				cursor: pointer;
 				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;
@@ -393,7 +396,7 @@ class CollapsiblePanel extends FocusMixin(RtlMixin(LitElement)) {
 						<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 +417,7 @@ class CollapsiblePanel extends FocusMixin(RtlMixin(LitElement)) {
 
 		const titleClasses = {
 			'd2l-collapsible-panel-title': true,
+			'd2l-skeletize': true,
 			[`d2l-heading-${headingStyle}`]: true,
 		};
 
@@ -449,6 +453,7 @@ class CollapsiblePanel extends FocusMixin(RtlMixin(LitElement)) {
 	}
 
 	_toggleExpand() {
+		if (this.skeleton) return;
 		this.expanded = !this.expanded;
 	}
 }

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": [

package/package.json

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