@brightspace-ui/labs 2.28.0 → 2.30.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/package.json
CHANGED
|
@@ -1,19 +1,53 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Accordion
|
|
2
2
|
|
|
3
3
|
A Lit-based widget that displays a list of collapsible components. When a collapsible component is clicked, it expands or collapses the associated content.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Accordion [d2l-labs-accordion]
|
|
6
6
|
|
|
7
|
+
The accordion panel to manage multiple accordions.
|
|
8
|
+
|
|
9
|
+
<!-- docs: demo code display:block autoSize:false size:medium -->
|
|
7
10
|
```html
|
|
8
11
|
<script type="module">
|
|
9
|
-
|
|
10
|
-
|
|
12
|
+
import '@brightspace-ui/labs/components/accordion.js';
|
|
13
|
+
import '@brightspace-ui/labs/components/accordion-collapse.js';
|
|
11
14
|
</script>
|
|
15
|
+
<d2l-labs-accordion auto-close>
|
|
16
|
+
<d2l-labs-accordion-collapse label="AutoClose">
|
|
17
|
+
<d2l-labs-accordion-collapse label="Child 1">Demo</d2l-labs-accordion-collapse>
|
|
18
|
+
<d2l-labs-accordion-collapse label="Child 2">Demo</d2l-labs-accordion-collapse>
|
|
19
|
+
</d2l-labs-accordion-collapse>
|
|
20
|
+
</d2l-labs-accordion>
|
|
12
21
|
<d2l-labs-accordion>
|
|
13
|
-
|
|
22
|
+
<d2l-labs-accordion-collapse label="No AutoClose">
|
|
23
|
+
<d2l-labs-accordion-collapse label="- Child 1">Demo</d2l-labs-accordion-collapse>
|
|
24
|
+
<d2l-labs-accordion-collapse label="- Child 2">Demo </d2l-labs-accordion-collapse>
|
|
25
|
+
</d2l-labs-accordion-collapse>
|
|
14
26
|
</d2l-labs-accordion>
|
|
15
27
|
```
|
|
16
28
|
|
|
29
|
+
## Accordion Collapse [d2l-labs-accordion-collapse]
|
|
30
|
+
|
|
31
|
+
The accordion component that expands or collapses the content.
|
|
32
|
+
|
|
33
|
+
<!-- docs: demo code display:block autoSize:false size:medium -->
|
|
34
|
+
```html
|
|
35
|
+
<script type="module">
|
|
36
|
+
import '@brightspace-ui/labs/components/accordion-collapse.js';
|
|
37
|
+
</script>
|
|
38
|
+
<d2l-labs-accordion-collapse label="Summary" flex>
|
|
39
|
+
<ul slot="summary" style="list-style-type: none; padding-left: 0;">
|
|
40
|
+
<li>Availability starts 4/13/2020 and ends 4/23/2020</li>
|
|
41
|
+
<li>One release condition</li>
|
|
42
|
+
<li>Special access</li>
|
|
43
|
+
</ul>
|
|
44
|
+
<p>More info here!</p>
|
|
45
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lectus erat, dignissim quis efficitur non, iaculis nec ante. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam fringilla eu orci sed tristique. Aliquam pellentesque turpis ut vehicula volutpat. Quisque euismod felis nec dolor scelerisque, ullamcorper gravida ante suscipit. Nam eget libero vel mauris tincidunt molestie. Maecenas tortor purus, sodales vel lacus vel, molestie tempor tellus.</p>
|
|
46
|
+
</d2l-labs-accordion-collapse>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
<!-- docs: start hidden content -->
|
|
50
|
+
|
|
17
51
|
## Lit components:
|
|
18
52
|
### **d2l-labs-accordion** - accordion panel.
|
|
19
53
|
#### Attributes:
|
|
@@ -106,4 +140,6 @@ Example 6:
|
|
|
106
140
|
<a href="https://www.d2l.com/">D2L</a>
|
|
107
141
|
</span>
|
|
108
142
|
</d2l-labs-accordion-collapse>
|
|
109
|
-
```
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
<!-- docs: end hidden content -->
|
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
# Card Overlay
|
|
2
2
|
|
|
3
|
-
A placeholder when
|
|
3
|
+
A skeleton placeholder for when a card component is loading. The overlay layout is specific to summary cards in Insights repos. For further information on skeletons, see the BrightspaceUI/core SkeletonMixin.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Card Overlay [d2l-labs-card-overlay]
|
|
6
6
|
|
|
7
|
+
<!-- docs: demo code -->
|
|
7
8
|
```html
|
|
8
9
|
<script type="module">
|
|
9
10
|
import '@brightspace-ui/labs/components/card-overlay.js';
|
|
10
11
|
</script>
|
|
11
|
-
<d2l-labs-card-overlay>My
|
|
12
|
+
<d2l-labs-card-overlay skeleton>My card</d2l-labs-card-overlay>
|
|
12
13
|
```
|
|
@@ -1,6 +1,46 @@
|
|
|
1
1
|
# Opt-in/Opt-out Flyouts
|
|
2
2
|
|
|
3
|
-
The
|
|
3
|
+
The opt-in and opt-out flyouts can be used in applications to enable users to opt-in or out of new experiences and workflows.
|
|
4
|
+
|
|
5
|
+
## Opt-in Flyout [d2l-labs-opt-in-flyout]
|
|
6
|
+
|
|
7
|
+
<!-- docs: demo code -->
|
|
8
|
+
```html
|
|
9
|
+
<script type="module">
|
|
10
|
+
import '@brightspace-ui/labs/components/opt-in-flyout.js';
|
|
11
|
+
</script>
|
|
12
|
+
<div style="height: 450px; position: relative; width: 100%;">
|
|
13
|
+
<d2l-labs-opt-in-flyout
|
|
14
|
+
opened
|
|
15
|
+
flyout-title="Flyout Demo Opt-in"
|
|
16
|
+
short-description="This is a <b>short</b> description"
|
|
17
|
+
long-description="This is a <b>long</b> description"
|
|
18
|
+
tab-position="right"
|
|
19
|
+
tutorial-link="https://www.example.com#tutorial"
|
|
20
|
+
help-docs-link="https://www.example.com#documentation">
|
|
21
|
+
</d2l-labs-opt-in-flyout>
|
|
22
|
+
</div>
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Opt-out Flyout [d2l-labs-opt-out-flyout]
|
|
26
|
+
|
|
27
|
+
<!-- docs: demo code -->
|
|
28
|
+
```html
|
|
29
|
+
<script type="module">
|
|
30
|
+
import '@brightspace-ui/labs/components/opt-out-flyout.js';
|
|
31
|
+
</script>
|
|
32
|
+
<div style="height: 450px; position: relative; width: 100%;">
|
|
33
|
+
<d2l-labs-opt-out-flyout
|
|
34
|
+
opened
|
|
35
|
+
flyout-title="Flyout Demo Opt-out"
|
|
36
|
+
short-description="This is a <b>short</b> description"
|
|
37
|
+
long-description="This is a <b>long</b> description"
|
|
38
|
+
tab-position="right"
|
|
39
|
+
tutorial-link="https://www.example.com#tutorial"
|
|
40
|
+
help-docs-link="https://www.example.com#documentation">
|
|
41
|
+
</d2l-labs-opt-out-flyout>
|
|
42
|
+
</div>
|
|
43
|
+
```
|
|
4
44
|
|
|
5
45
|
<!-- docs: start hidden content -->
|
|
6
46
|
### Properties
|
|
@@ -30,7 +70,28 @@ If both `hide-reason` _and_ `hide-feedback` are specified, the opt-out dialog wi
|
|
|
30
70
|
* `opt-out`: *Leave it off* / *Turn it off* button was clicked
|
|
31
71
|
<!-- docs: end hidden content -->
|
|
32
72
|
|
|
33
|
-
## Opt-out Reasons
|
|
73
|
+
## Opt-out Reasons [d2l-labs-opt-out-reason]
|
|
74
|
+
|
|
75
|
+
<!-- docs: demo code -->
|
|
76
|
+
```html
|
|
77
|
+
<script type="module">
|
|
78
|
+
import '@brightspace-ui/labs/components/opt-out-flyout.js';
|
|
79
|
+
import '@brightspace-ui/labs/components/opt-out-reason.js';
|
|
80
|
+
</script>
|
|
81
|
+
<div style="height: 450px; position: relative; width: 100%;">
|
|
82
|
+
<d2l-labs-opt-out-flyout
|
|
83
|
+
opened
|
|
84
|
+
flyout-title="Flyout Demo Opt-out - Custom Reasons"
|
|
85
|
+
short-description="This is a <b>short</b> description"
|
|
86
|
+
long-description="This is a <b>long</b> description"
|
|
87
|
+
tab-position="right"
|
|
88
|
+
tutorial-link="https://www.example.com#tutorial"
|
|
89
|
+
help-docs-link="https://www.example.com#documentation">
|
|
90
|
+
<d2l-labs-opt-out-reason key="test-1" text="Test Option 1"></d2l-labs-opt-out-reason>
|
|
91
|
+
<d2l-labs-opt-out-reason key="test-2" text="Test Option 2"></d2l-labs-opt-out-reason>
|
|
92
|
+
</d2l-labs-opt-out-flyout>
|
|
93
|
+
</div>
|
|
94
|
+
```
|
|
34
95
|
|
|
35
96
|
By default, `<d2l-labs-opt-out-flyout>` will make the following opt-out reasons available to the user, in addition to "other":
|
|
36
97
|
|
|
@@ -50,9 +111,10 @@ To provide custom reasons, place `<d2l-labs-opt-out-reason>` elements as childre
|
|
|
50
111
|
|---|---|---|
|
|
51
112
|
| `key` | String, required | Uniquely identifies the opt-out reason |
|
|
52
113
|
| `text` | String, required | Text that will be displayed to the user |
|
|
53
|
-
<!-- docs: end hidden content -->
|
|
54
114
|
|
|
55
115
|
When the `opt-out` event is fired from `<d2l-labs-opt-out-flyout>`, its `detail` will contain:
|
|
56
116
|
|
|
57
117
|
* `reason`: unique identifier for the opt-out reason
|
|
58
118
|
* `feedback`: optional feedback provided by the user
|
|
119
|
+
|
|
120
|
+
<!-- docs: end hidden content -->
|
|
@@ -1,16 +1,32 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Pagination
|
|
2
2
|
|
|
3
|
-
A component to indicate the existence of and provide navigation for multiple pages of content.
|
|
3
|
+
A numeric paging component to indicate the existence of and provide navigation for multiple pages of content. For Load More Paging, see the [`core` component](https://daylight.d2l.dev/components/paging/).
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## Numeric Pager [d2l-labs-pager-numeric]
|
|
6
6
|
|
|
7
|
+
<!-- docs: demo code -->
|
|
7
8
|
```html
|
|
8
9
|
<script type="module">
|
|
9
|
-
|
|
10
|
+
import '@brightspace-ui/labs/components/pager-numeric.js';
|
|
11
|
+
// <!-- docs: start hidden content -->
|
|
12
|
+
requestAnimationFrame(() => {
|
|
13
|
+
const pager = document.querySelector('d2l-labs-pager-numeric');
|
|
14
|
+
pager.addEventListener('d2l-labs-pager-numeric-page-change', (e) => {
|
|
15
|
+
e.target.pageNumber = e.detail.page;
|
|
16
|
+
});
|
|
17
|
+
});
|
|
18
|
+
// <!-- docs: end hidden content -->
|
|
10
19
|
</script>
|
|
11
|
-
<d2l-labs-pager-numeric
|
|
20
|
+
<d2l-labs-pager-numeric
|
|
21
|
+
max-page-number="5"
|
|
22
|
+
show-page-size-selector
|
|
23
|
+
page-sizes="[1,10,20,100,250,1000]"
|
|
24
|
+
page-size="10">
|
|
25
|
+
</d2l-labs-pager-numeric>
|
|
12
26
|
```
|
|
13
27
|
|
|
28
|
+
<!-- docs: start hidden content -->
|
|
29
|
+
|
|
14
30
|
## Properties
|
|
15
31
|
|
|
16
32
|
| Property | Type | Description |
|
|
@@ -27,3 +43,5 @@ A component to indicate the existence of and provide navigation for multiple pag
|
|
|
27
43
|
* `page`: the new page number value
|
|
28
44
|
* `d2l-labs-pager-numeric-page-size-change`: dispatched when the item count selector's value is changed. Event `detail` includes:
|
|
29
45
|
* `itemCount`: the value the item count selector was just set to
|
|
46
|
+
|
|
47
|
+
<!-- docs: end hidden content -->
|
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
#
|
|
1
|
+
# View Toggle
|
|
2
2
|
|
|
3
3
|
A Lit element component for toggling between views.
|
|
4
4
|
|
|
5
|
-
##
|
|
5
|
+
## View Toggle [d2l-labs-view-toggle]
|
|
6
6
|
|
|
7
|
+
<!-- docs: demo code -->
|
|
7
8
|
```html
|
|
8
9
|
<script type="module">
|
|
9
|
-
|
|
10
|
+
import '@brightspace-ui/labs/components/view-toggle.js';
|
|
10
11
|
</script>
|
|
11
12
|
<d2l-labs-view-toggle
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
13
|
+
toggle-options='[{"text":"Bananas","val":"overall"},{"text":"Minions","val":"minios"},{"text":"Pyjamas","val":"subject"}]'
|
|
14
|
+
text="Toggle: ">
|
|
15
|
+
</d2l-labs-view-toggle>
|
|
15
16
|
```
|