@brightspace-ui/core 2.130.0 → 2.131.0

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

@@ -9,13 +9,20 @@ import { offscreenStyles } from '../offscreen/offscreen.js';
 import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
 import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
 
-const normalizeHeadingNumber = (number) => {
+const normalizeHeadingStyle = (number) => {
 	number = parseInt(number);
 	if (number < 1) { return 1; }
 	if (number > 4) { return 4; }
 	return number;
 };
 
+const normalizeHeadingLevel = (number) => {
+	number = parseInt(number);
+	if (number < 1) { return 1; }
+	if (number > 6) { return 6; }
+	return number;
+};
+
 const defaultHeading = 3;
 
 /**
@@ -38,8 +45,8 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 			 */
 			panelTitle: { attribute: 'panel-title', type: String, reflect: true },
 			/**
-			 * The semantic heading level (h1-h4)
-			 * @type {'1'|'2'|'3'|'4'}
+			 * The semantic heading level (h1-h6)
+			 * @type {'1'|'2'|'3'|'4'|'5'|'6'}
 			 * @default "3"
 			 */
 			headingLevel: { attribute: 'heading-level', type: String, reflect: true },
@@ -453,7 +460,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 
 	_renderPanelTitle() {
 		let headingStyle = (this.headingStyle === defaultHeading && this.headingLevel !== this.headingStyle) ? this.headingLevel : this.headingStyle;
-		headingStyle = normalizeHeadingNumber(headingStyle);
+		headingStyle = normalizeHeadingStyle(headingStyle);
 
 		const titleClasses = {
 			'd2l-collapsible-panel-title': true,
@@ -461,12 +468,14 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
 			[`d2l-heading-${headingStyle}`]: true,
 		};
 
-		const headingLevel = normalizeHeadingNumber(this.headingLevel);
+		const headingLevel = normalizeHeadingLevel(this.headingLevel);
 		switch (headingLevel) {
 			case 1: return html`<h1 class="${classMap(titleClasses)}">${this.panelTitle}</h1>`;
 			case 2: return html`<h2 class="${classMap(titleClasses)}">${this.panelTitle}</h2>`;
 			case 3: return html`<h3 class="${classMap(titleClasses)}">${this.panelTitle}</h3>`;
 			case 4: return html`<h4 class="${classMap(titleClasses)}">${this.panelTitle}</h4>`;
+			case 5: return html`<h5 class="${classMap(titleClasses)}">${this.panelTitle}</h5>`;
+			case 6: return html`<h6 class="${classMap(titleClasses)}">${this.panelTitle}</h6>`;
 		}
 	}
 

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

@@ -153,7 +153,8 @@
 			</d2l-demo-snippet>
 
 			<h2>Headings</h2>
-			<d2l-demo-snippet class="spacer">
+			<d2l-demo-snippet>
+				<d2l-collapsible-panel-group>
 					<d2l-collapsible-panel heading-level="1" panel-title="Heading Level 1">
 						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>
@@ -170,6 +171,14 @@
 						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>
 
+					<d2l-collapsible-panel heading-level="5" panel-title="Heading Level 5">
+						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>
+
+					<d2l-collapsible-panel heading-level="6" panel-title="Heading Level 6">
+						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>
+
 					<d2l-collapsible-panel heading-style="2" panel-title="Heading Style 2">
 						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>
@@ -177,6 +186,7 @@
 					<d2l-collapsible-panel heading-style="4" heading-level="2" panel-title="Heading Style 4">
 						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>
+				</d2l-collapsible-panel-group>
 			</d2l-demo-snippet>
 
 			<h2>Loooooong</h2>

package/custom-elements.json

@@ -1215,8 +1215,8 @@
         },
         {
           "name": "heading-level",
-          "description": "The semantic heading level (h1-h4)",
-          "type": "'1'|'2'|'3'|'4'",
+          "description": "The semantic heading level (h1-h6)",
+          "type": "'1'|'2'|'3'|'4'|'5'|'6'",
           "default": "\"\\\"3\\\"\""
         },
         {
@@ -1273,8 +1273,8 @@
         {
           "name": "headingLevel",
           "attribute": "heading-level",
-          "description": "The semantic heading level (h1-h4)",
-          "type": "'1'|'2'|'3'|'4'",
+          "description": "The semantic heading level (h1-h6)",
+          "type": "'1'|'2'|'3'|'4'|'5'|'6'",
           "default": "\"\\\"3\\\"\""
         },
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@brightspace-ui/core",
-  "version": "2.130.0",
+  "version": "2.131.0",
   "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
   "type": "module",
   "repository": "https://github.com/BrightspaceUI/core.git",
@@ -45,7 +45,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7",
     "@brightspace-ui/stylelint-config": "^0.8",
-    "@brightspace-ui/testing": "^0.7",
+    "@brightspace-ui/testing": "^0.9",
     "@open-wc/semantic-dom-diff": "^0.20",
     "@open-wc/testing": "^3",
     "@rollup/plugin-dynamic-import-vars": "^2",