@brightspace-ui/core 2.127.2 → 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.
- package/components/collapsible-panel/README.md +31 -0
- package/components/collapsible-panel/collapsible-panel-group.js +71 -0
- package/components/collapsible-panel/collapsible-panel.js +6 -0
- package/components/collapsible-panel/demo/collapsible-panel.html +31 -28
- package/custom-elements.json +28 -0
- package/package.json +5 -6
|
@@ -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
|
|
@@ -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);
|
|
@@ -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
|
|
|
@@ -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
|
-
<
|
|
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
|
-
</
|
|
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
|
|
55
|
-
<d2l-collapsible-panel
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
<d2l-collapsible-panel-
|
|
61
|
-
|
|
62
|
-
|
|
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
|
|
69
|
-
|
|
70
|
-
|
|
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
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
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
|
|
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
|
-
|
|
83
|
-
|
|
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/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.
|
|
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
|
|
24
|
-
"test:headless:watch": "web-test-runner --group
|
|
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
|
-
"@
|
|
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",
|