@brightspace-ui/labs 2.28.0 → 2.29.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,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,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
|
```
|