@brightspace-ui/core 2.127.1 → 2.128.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/components/collapsible-panel/README.md +31 -0
  2. package/components/collapsible-panel/collapsible-panel-group.js +71 -0
  3. package/components/collapsible-panel/collapsible-panel.js +6 -0
  4. package/components/collapsible-panel/demo/collapsible-panel.html +31 -28
  5. package/components/icons/icon.js +4 -5
  6. package/custom-elements.json +28 -0
  7. package/package.json +5 -6
package/components/collapsible-panel/README.md CHANGED
@@ -75,6 +75,7 @@ The collapsible panel is a container that can show or hide additional content. I
75
75
  * Use to progressively disclose information or settings to simplify a complex workflow
76
76
  * Keep the header consistent across the collapsed and expanded states of the panel
77
77
  * Use the subtle collapsible panel for backgrounds that aren't white
78
+ * Use [`d2l-collapsible-panel-group`](#d2l-collapsible-panel-group) to group multiple panels for better visual consistency
78
79
  <!-- docs: end dos -->
79
80
 
80
81
  <!-- docs: start donts -->
@@ -358,6 +359,36 @@ Collapsible panels have two optional slots, `header` and `actions` that can be u
358
359
  </d2l-collapsible-panel>
359
360
  ```
360
361
 
362
+ ## Group [d2l-collapsible-panel-group]
363
+
364
+ In situations with multiple collapsible panels, use the `d2l-collapsible-panel-group` component to automatically handle spacing and layout.
365
+
366
+ <!-- docs: demo live -->
367
+ ```html
368
+ <script type="module">
369
+ import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel.js';
370
+ import '@brightspace-ui/core/components/collapsible-panel/collapsible-panel-group.js';
371
+ </script>
372
+
373
+ <style>
374
+ d2l-collapsible-panel {
375
+ width: 800px;
376
+ }
377
+ </style>
378
+
379
+ <d2l-collapsible-panel-group>
380
+ <d2l-collapsible-panel panel-title="Submission 1">
381
+ <p>Sweet roll candy dessert caramels shortbread gummies toffee oat cake cookie. Wafer gummies shortbread sweet halvah jujubes sweet. Cake chocolate chocolate bar carrot cake marzipan. Icing chupa chups jujubes macaroon toffee chocolate bar wafer croissant.</p>
382
+ </d2l-collapsible-panel>
383
+ <d2l-collapsible-panel panel-title="Submission 2">
384
+ <p>Sweet roll candy dessert caramels shortbread gummies toffee oat cake cookie. Wafer gummies shortbread sweet halvah jujubes sweet. Cake chocolate chocolate bar carrot cake marzipan. Icing chupa chups jujubes macaroon toffee chocolate bar wafer croissant.</p>
385
+ </d2l-collapsible-panel>
386
+ <d2l-collapsible-panel panel-title="Submission 3">
387
+ <p>Sweet roll candy dessert caramels shortbread gummies toffee oat cake cookie. Wafer gummies shortbread sweet halvah jujubes sweet. Cake chocolate chocolate bar carrot cake marzipan. Icing chupa chups jujubes macaroon toffee chocolate bar wafer croissant.</p>
388
+ </d2l-collapsible-panel>
389
+ </d2l-collapsible-panel-group>
390
+ ```
391
+
361
392
  ## Accessibility
362
393
 
363
394
  ### Panel label
package/components/collapsible-panel/collapsible-panel-group.js ADDED
@@ -0,0 +1,71 @@
1
+ import { css, html, LitElement } from 'lit';
2
+ import { classMap } from 'lit/directives/class-map.js';
3
+ import { SkeletonMixin } from '../skeleton/skeleton-mixin.js';
4
+
5
+ /**
6
+ * A component that renders a container and layout for collapsible panels
7
+ * @slot default - Slot for panels. Only accepts `d2l-collapsible-panel`
8
+ */
9
+ class CollapsiblePanelGroup extends SkeletonMixin(LitElement) {
10
+
11
+ static get properties() {
12
+ return {
13
+ _panels: { state: true },
14
+ };
15
+ }
16
+
17
+ static get styles() {
18
+ return [super.styles, css`
19
+ :host ::slotted(*) {
20
+ display: none;
21
+ }
22
+ :host ::slotted(d2l-collapsible-panel) {
23
+ display: unset;
24
+ }
25
+ .spaced {
26
+ display: flex;
27
+ flex-direction: column;
28
+ row-gap: 0.5rem;
29
+ }
30
+ `];
31
+ }
32
+
33
+ constructor() {
34
+ super();
35
+ this._panels = [];
36
+ }
37
+
38
+ render() {
39
+ const classes = {
40
+ spaced: this._panels?.[0]?.type !== 'inline',
41
+ };
42
+
43
+ return html`<slot class="${classMap(classes)}" @slotchange="${this._handleSlotChange}"></slot>`;
44
+ }
45
+
46
+ async _getPanels() {
47
+ const slot = this.shadowRoot?.querySelector('slot');
48
+ if (!slot) return;
49
+
50
+ return slot.assignedNodes({ flatten: true }).filter((node) => node.nodeType === Node.ELEMENT_NODE);
51
+ }
52
+
53
+ async _handleSlotChange() {
54
+ this._panels = await this._getPanels();
55
+ this._updatePanelAttributes();
56
+ }
57
+
58
+ _updatePanelAttributes() {
59
+ if (!this._panels || this._panels.length === 0) return;
60
+
61
+ if (this._panels[0]?.type !== 'inline') return;
62
+
63
+ for (const panel of this._panels) {
64
+ panel._noBottomBorder = true;
65
+ }
66
+
67
+ this._panels[this._panels.length - 1]._noBottomBorder = false;
68
+ }
69
+ }
70
+
71
+ customElements.define('d2l-collapsible-panel-group', CollapsiblePanelGroup);
package/components/collapsible-panel/collapsible-panel.js CHANGED
@@ -80,6 +80,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
80
80
  _focused: { state: true },
81
81
  _hasBefore: { state: true },
82
82
  _hasSummary: { state: true },
83
+ _noBottomBorder: { state: true },
83
84
  _scrolled: { state: true },
84
85
  };
85
86
  }
@@ -118,6 +119,9 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
118
119
  border-right: none;
119
120
  outline-offset: -2px;
120
121
  }
122
+ :host([type="inline"]) .d2l-collapsible-panel.no-bottom-border {
123
+ border-bottom: none;
124
+ }
121
125
  :host([heading-style="1"]) {
122
126
  --d2l-collapsible-panel-header-spacing: 1.2rem;
123
127
  }
@@ -296,6 +300,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
296
300
  this.noSticky = false;
297
301
  this._focused = false;
298
302
  this._hasSummary = false;
303
+ this._noBottomBorder = false;
299
304
  this._scrolled = false;
300
305
  }
301
306
 
@@ -315,6 +320,7 @@ class CollapsiblePanel extends SkeletonMixin(FocusMixin(RtlMixin(LitElement))) {
315
320
  'has-summary': this._hasSummary,
316
321
  'has-before': this._hasBefore,
317
322
  'scrolled': this._scrolled,
323
+ 'no-bottom-border': this._noBottomBorder,
318
324
  };
319
325
  const expandCollapseLabel = this.expandCollapseLabel || this.panelTitle;
320
326
 
package/components/collapsible-panel/demo/collapsible-panel.html CHANGED
@@ -6,6 +6,7 @@
6
6
  <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
7
7
  <script type="module">
8
8
  import '../collapsible-panel.js';
9
+ import '../collapsible-panel-group.js';
9
10
  import '../collapsible-panel-summary-item.js';
10
11
  import '../../button/button-icon.js';
11
12
  import '../../button/button-subtle.js';
@@ -26,10 +27,6 @@
26
27
  margin: -18px;
27
28
  padding: 18px;
28
29
  }
29
-
30
- .spacer d2l-collapsible-panel {
31
- margin-bottom: 1rem;
32
- }
33
30
  </style>
34
31
  </head>
35
32
  <body unresolved>
@@ -37,7 +34,7 @@
37
34
  <d2l-demo-page page-title="d2l-collapsible-panel">
38
35
  <h2>Simple</h2>
39
36
  <d2l-demo-snippet>
40
- <div class="spacer">
37
+ <d2l-collapsible-panel-group>
41
38
  <d2l-collapsible-panel panel-title="Availability Dates and Conditions">
42
39
  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.
43
40
  </d2l-collapsible-panel>
@@ -46,44 +43,50 @@
46
43
  <d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
47
44
  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.
48
45
  </d2l-collapsible-panel>
49
- </div>
46
+ </d2l-collapsible-panel-group>
50
47
  </d2l-demo-snippet>
51
48
 
52
49
  <h2>Subtle</h2>
53
50
  <d2l-demo-snippet>
54
- <div class="background spacer">
55
- <d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="subtle">
56
- 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. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam. Integer sed facilisis mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut a volutpat lacus. Suspendisse potenti. Quisque egestas erat urna, et accumsan est accumsan sit amet. Sed luctus vestibulum lacus. Mauris nisi orci, rhoncus sed est sit amet, pretium facilisis felis.
57
- </d2l-collapsible-panel>
58
-
59
- <d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="subtle">
60
- <d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
61
- 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. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam. Integer sed facilisis mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut a volutpat lacus. Suspendisse potenti. Quisque egestas erat urna, et accumsan est accumsan sit amet. Sed luctus vestibulum lacus. Mauris nisi orci, rhoncus sed est sit amet, pretium facilisis felis.
62
- </d2l-collapsible-panel>
51
+ <div class="background">
52
+ <d2l-collapsible-panel-group>
53
+ <d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="subtle">
54
+ 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. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam. Integer sed facilisis mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut a volutpat lacus. Suspendisse potenti. Quisque egestas erat urna, et accumsan est accumsan sit amet. Sed luctus vestibulum lacus. Mauris nisi orci, rhoncus sed est sit amet, pretium facilisis felis.
55
+ </d2l-collapsible-panel>
56
+
57
+ <d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="subtle">
58
+ <d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
59
+ 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. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam. Integer sed facilisis mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut a volutpat lacus. Suspendisse potenti. Quisque egestas erat urna, et accumsan est accumsan sit amet. Sed luctus vestibulum lacus. Mauris nisi orci, rhoncus sed est sit amet, pretium facilisis felis.
60
+ </d2l-collapsible-panel>
61
+ </d2l-collapsible-panel-group>
63
62
  </div>
64
63
  </d2l-demo-snippet>
65
64
 
66
65
  <h2>Inline</h2>
67
66
  <d2l-demo-snippet>
68
- <d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="inline">
69
- 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. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam.
70
- </d2l-collapsible-panel>
67
+ <d2l-collapsible-panel-group>
68
+ <d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="inline">
69
+ 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. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam.
70
+ </d2l-collapsible-panel>
71
71
 
72
- <d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="inline">
73
- <d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
74
- 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. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam.
75
- </d2l-collapsible-panel>
72
+ <d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="inline">
73
+ <d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
74
+ 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. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam.
75
+ </d2l-collapsible-panel>
76
+ </d2l-collapsible-panel-group>
76
77
  </d2l-demo-snippet>
77
78
 
78
79
  <h2>Inline with large padding</h2>
79
80
  <d2l-demo-snippet>
80
- <d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="inline" padding-type="large">
81
+ <d2l-collapsible-panel-group>
82
+ <d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="inline" padding-type="large">
83
+ 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. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam.
84
+ </d2l-collapsible-panel>
85
+ <d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="inline" padding-type="large">
86
+ <d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
81
87
  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. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam.
82
- </d2l-collapsible-panel>
83
- <d2l-collapsible-panel panel-title="Availability Dates and Conditions" type="inline" padding-type="large">
84
- <d2l-collapsible-panel-summary-item slot="summary" text="Availability starts 8/16/2022 and ends 8/12/2022"></d2l-collapsible-panel-summary-item>
85
- 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. Praesent lobortis libero in libero sagittis consectetur. Maecenas ut velit efficitur, consectetur augue vitae, finibus turpis. In id tempor quam.
86
- </d2l-collapsible-panel>
88
+ </d2l-collapsible-panel>
89
+ </d2l-collapsible-panel-group>
87
90
  </d2l-demo-snippet>
88
91
 
89
92
  <h2>Multi-line summary and interactive content</h2>
package/components/icons/icon.js CHANGED
@@ -1,11 +1,12 @@
1
1
  import '../colors/colors.js';
2
- import { css, html, LitElement } from 'lit';
2
+ import { css, html, LitElement, noChange } from 'lit';
3
3
  import { fixSvg } from './fix-svg.js';
4
+ import { guard } from 'lit/directives/guard.js';
4
5
  import { iconStyles } from './icon-styles.js';
5
6
  import { loadSvg } from '../../generated/icons/presetIconLoader.js';
6
7
  import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
7
- import { runAsync } from '../../directives/run-async/run-async.js';
8
8
  import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
9
+ import { until } from 'lit/directives/until.js';
9
10
 
10
11
  class Icon extends RtlMixin(LitElement) {
11
12
 
@@ -36,9 +37,7 @@ class Icon extends RtlMixin(LitElement) {
36
37
  }
37
38
 
38
39
  render() {
39
- return html`${runAsync(this.icon, () => this._getIcon(), {
40
- success: (icon) => icon
41
- }, { pendingState: false })}`;
40
+ return guard([this.icon], () => until(this._getIcon(), noChange));
42
41
  }
43
42
 
44
43
  _fixSvg(svgStr) {
package/custom-elements.json CHANGED
@@ -1146,6 +1146,34 @@
1146
1146
  }
1147
1147
  ]
1148
1148
  },
1149
+ {
1150
+ "name": "d2l-collapsible-panel-group",
1151
+ "path": "./components/collapsible-panel/collapsible-panel-group.js",
1152
+ "description": "A component that renders a container and layout for collapsible panels",
1153
+ "attributes": [
1154
+ {
1155
+ "name": "skeleton",
1156
+ "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
1157
+ "type": "boolean",
1158
+ "default": "false"
1159
+ }
1160
+ ],
1161
+ "properties": [
1162
+ {
1163
+ "name": "skeleton",
1164
+ "attribute": "skeleton",
1165
+ "description": "Renders the input as a [skeleton loader](https://github.com/BrightspaceUI/core/tree/main/components/skeleton)",
1166
+ "type": "boolean",
1167
+ "default": "false"
1168
+ }
1169
+ ],
1170
+ "slots": [
1171
+ {
1172
+ "name": "default",
1173
+ "description": "Slot for panels. Only accepts `d2l-collapsible-panel`"
1174
+ }
1175
+ ]
1176
+ },
1149
1177
  {
1150
1178
  "name": "d2l-collapsible-panel-summary-item",
1151
1179
  "path": "./components/collapsible-panel/collapsible-panel-summary-item.js",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "2.127.1",
3
+ "version": "2.128.0",
4
4
  "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
5
5
  "type": "module",
6
6
  "repository": "https://github.com/BrightspaceUI/core.git",
@@ -20,8 +20,8 @@
20
20
  "start": "web-dev-server --node-resolve --watch --open",
21
21
  "test": "npm run lint && npm run test:translations && npm run test:headless && npm run test:axe",
22
22
  "test:axe": "web-test-runner --group aXe",
23
- "test:headless": "web-test-runner --group default",
24
- "test:headless:watch": "web-test-runner --group default --watch",
23
+ "test:headless": "web-test-runner --group unit",
24
+ "test:headless:watch": "web-test-runner --group unit --watch",
25
25
  "test:translations": "mfv -e -s en -p ./lang/ -i untranslated"
26
26
  },
27
27
  "files": [
@@ -45,14 +45,13 @@
45
45
  "devDependencies": {
46
46
  "@babel/eslint-parser": "^7",
47
47
  "@brightspace-ui/stylelint-config": "^0.8",
48
- "@open-wc/semantic-dom-diff": "^0.19.9",
48
+ "@brightspace-ui/testing": "^0.3",
49
+ "@open-wc/semantic-dom-diff": "^0.20",
49
50
  "@open-wc/testing": "^3",
50
51
  "@rollup/plugin-dynamic-import-vars": "^2",
51
52
  "@rollup/plugin-node-resolve": "^15",
52
53
  "@rollup/plugin-replace": "^5",
53
54
  "@web/dev-server": "^0.2",
54
- "@web/test-runner": "^0.16",
55
- "@web/test-runner-playwright": "^0.10",
56
55
  "axe-core": "^4",
57
56
  "chalk": "^5",
58
57
  "eslint": "^8",