@brightspace-ui/core 2.78.0 → 2.78.2

package/components/collapsible-panel/README.md

@@ -97,17 +97,16 @@ The `d2l-collapsible-panel` element is a container that provides specific layout
 
 <style>
 	d2l-collapsible-panel {
-		width: 500px;
-		margin-block: 2rem;
+		width: 800px;
 	}
 	/* TODO: remove this when daylight demo resizing is fixed */
 	d2l-collapsible-panel:not([expanded]) {
-		margin-bottom: 8rem;
+		margin-bottom: 14rem;
 	}
 </style>
 
-<d2l-collapsible-panel panel-title="Cake Decoration">
-	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas odio ligula, aliquam efficitur sollicitudin non, dignissim quis nisl. Nullam rutrum, lectus sed finibus consectetur, dolor leo blandit lorem, vitae consectetur arcu enim ornare tortor.
+<d2l-collapsible-panel panel-title="Collapsible Panel">
+	The collapsible panel is also nicknamed caketray! Team Polaris coined this nickname back in 2020 while creating a labs component for a tool called Learning Paths (which is now replaced with the collapsible panel). They wanted to distinguish this labs component from d2l-card, but they didn't know what to call it, so they named it caketray to serve as a reminder to change the name later. Caketray caught on around the company, so much so that we had to make it an official nickname so some teams could find it! You'll see some other cake-related examples throughout this documentation to pay tribute to the collapsible panel's heritage.
 </d2l-collapsible-panel>
 ```
 
@@ -204,9 +203,7 @@ Use an inline collapsible panel to progressively disclose sections of a complex
 ## Summary Items [d2l-collapsible-panel-summary-item]
 An optional summary can help the user understand what’s inside the collapsible panel without having to expand it. This can be helpful if the user needs more than the heading to explain what’s inside.
 
-More than one d2l-collapsible-panel-summary-item can be added to the summary slot, and each will appear on its own line.
-
-<!-- docs: demo live -->
+<!-- docs: demo -->
 ```html
 <script type="module">
 import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';
@@ -234,7 +231,7 @@ class CollapsiblePanelDaylightDemo extends LitElement {
 			}
 			/* TODO: remove this when daylight demo resizing is fixed */
 			d2l-collapsible-panel:not([expanded]) {
-				margin-bottom: 13rem;
+				margin-bottom: 12rem;
 			}
 		`];
 	}
@@ -292,9 +289,26 @@ customElements.define('d2l-collapsible-panel-daylight-demo', CollapsiblePanelDay
 <d2l-collapsible-panel-daylight-demo></d2l-collapsible-panel-daylight-demo>
 ```
 
-## Optional slots
+More than one `d2l-collapsible-panel-summary-item` can be added to the `summary` slot, and each will appear on its own line.
+
+```html
+<script type="module">
+	import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';
+	import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel-summary-item.js';
+</script>
+
+<d2l-collapsible-panel panel-title="Cake Decoration">
+	<d2l-collapsible-panel-summary-item slot="summary" text="Buttercream icing"></d2l-collapsible-panel-summary-item>
+	<d2l-collapsible-panel-summary-item slot="summary" text="Personalized name"></d2l-collapsible-panel-summary-item>
+	<d2l-collapsible-panel-summary-item slot="summary" text="Candles"></d2l-collapsible-panel-summary-item>
+	<d2l-collapsible-panel-summary-item slot="summary" text="Plates and Forks"></d2l-collapsible-panel-summary-item>
+	Expanded content
+</d2l-collapsible-panel>
+```
+
+## Header and actions slots
 
-Collapsible panels have two optional slots, `actions` and `header` that can be used to add more information to the header area.
+Collapsible panels have two optional slots, `header` and `actions` that can be used to add more information to the header area.
 
 
 <!-- docs: demo live -->
@@ -302,6 +316,7 @@ Collapsible panels have two optional slots, `actions` and `header` that can be u
 <script type="module">
 	import '@brightspace-ui/core/components/button/button-icon.js';
 	import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';
+	import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel-summary-item.js';
 	import '@brightspace-ui/core/components/dropdown/dropdown-more.js';
 	import '@brightspace-ui/core/components/dropdown/dropdown-menu.js';
 	import '@brightspace-ui/core/components/link/link.js';
@@ -314,10 +329,6 @@ Collapsible panels have two optional slots, `actions` and `header` that can be u
 	d2l-collapsible-panel {
 		width: 800px;
 	}
-	/* TODO: remove this when daylight demo resizing is fixed */
-	d2l-collapsible-panel:not([expanded]) {
-		margin-bottom: 4rem;
-	}
 </style>
 
 <d2l-collapsible-panel panel-title="Submission 1">
@@ -336,6 +347,8 @@ Collapsible panels have two optional slots, `actions` and `header` that can be u
 		<p class="d2l-body-small">Submitted On: Jul 20, 2021 - 2:23 PM</p>
 		<d2l-link small href="https://www.d2l.com" target="blank">Link to post</d2l-link>
 	</div>
+	<d2l-collapsible-panel-summary-item slot="summary" text="Week 2 Lab (PDF) attached"></d2l-collapsible-panel-summary-item>
+	<d2l-collapsible-panel-summary-item slot="summary" text="1 comment"></d2l-collapsible-panel-summary-item>
 	Expanded content
 </d2l-collapsible-panel>
 ```

package/package.json

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