@brightspace-ui/labs 2.31.1 → 2.33.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,15 +1,27 @@
|
|
|
1
1
|
# File Uploader
|
|
2
|
-
Lit component for uploading files with drag and drop capability. This component does not perform the actual uploading work
|
|
2
|
+
Lit component for uploading files with drag and drop capability. This component does not perform the actual uploading work - it simply provides visual cues and exposes an event when files have been uploaded.
|
|
3
3
|
|
|
4
|
+
An official component for this is in progress. Please reach out before adding a new usage of this labs version!
|
|
4
5
|
|
|
5
|
-
##
|
|
6
|
+
## File Uploader [d2l-labs-file-uploader]
|
|
6
7
|
|
|
8
|
+
<!-- docs: demo code -->
|
|
7
9
|
```html
|
|
8
|
-
<
|
|
9
|
-
|
|
10
|
-
</
|
|
10
|
+
<script type="module">
|
|
11
|
+
import '@brightspace-ui/labs/components/file-uploader.js';
|
|
12
|
+
</script>
|
|
13
|
+
<d2l-labs-file-uploader label="profile picture"></d2l-labs-file-uploader>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
<!-- docs: demo code -->
|
|
17
|
+
```html
|
|
18
|
+
<script type="module">
|
|
19
|
+
import '@brightspace-ui/labs/components/file-uploader.js';
|
|
20
|
+
</script>
|
|
21
|
+
<d2l-labs-file-uploader multiple label="assignments"></d2l-labs-file-uploader>
|
|
11
22
|
```
|
|
12
23
|
|
|
24
|
+
<!-- docs: start hidden content -->
|
|
13
25
|
### Basic Usage with Accessible Label
|
|
14
26
|
|
|
15
27
|
It's important to always provide an accessible label which describes the purpose of the uploader using the `label` attribute. The label will be hidden visually but associated with the upload input for those using assistive technologies such as a screen reader.
|
|
@@ -81,3 +93,4 @@ document.getElementById('my-uploader')
|
|
|
81
93
|
});
|
|
82
94
|
</script>
|
|
83
95
|
```
|
|
96
|
+
<!-- docs: end hidden content -->
|
|
@@ -1,11 +1,18 @@
|
|
|
1
|
-
|
|
1
|
+
# Navigation
|
|
2
2
|
|
|
3
|
+
A series of web components for top level navigation used on D2L pages. The existing components are completed but there is additional functionality for these components on the backlog.
|
|
4
|
+
|
|
5
|
+
<!-- docs: start hidden content -->
|
|
6
|
+
> **Primary Components**
|
|
7
|
+
>
|
|
3
8
|
> These are the components that should be used in the **VAST MAJORITY** of use cases
|
|
9
|
+
<!-- docs: end hidden content -->
|
|
4
10
|
|
|
5
|
-
|
|
11
|
+
## Navigation [d2l-labs-navigation]
|
|
6
12
|
|
|
7
13
|
Add the `d2l-labs-navigation` component, and provide sub elements `d2l-labs-navigation-main-header` & `d2l-labs-navigation-main-footer` (along with their respective slot contents).
|
|
8
14
|
|
|
15
|
+
<!-- docs: demo code display:block -->
|
|
9
16
|
```html
|
|
10
17
|
<script type="module">
|
|
11
18
|
import '@brightspace-ui/labs/components/navigation/navigation.js';
|
|
@@ -13,38 +20,39 @@ Add the `d2l-labs-navigation` component, and provide sub elements `d2l-labs-navi
|
|
|
13
20
|
import '@brightspace-ui/labs/components/navigation/navigation-main-footer.js';
|
|
14
21
|
</script>
|
|
15
22
|
|
|
16
|
-
<d2l-labs-navigation>
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
</d2l-labs-navigation-main-footer>
|
|
23
|
+
<d2l-labs-navigation has-skip-nav>
|
|
24
|
+
<d2l-labs-navigation-main-header>
|
|
25
|
+
<div slot="left" class="d2l-labs-navigation-header-left" style="background-color: pink;">This should be on the left. As the width changes it shrinks as needed.</div>
|
|
26
|
+
<div slot="right" class="d2l-labs-navigation-header-right" style="background-color: lightblue;">This should be on the right. It doesn't shrink.</div>
|
|
27
|
+
</d2l-labs-navigation-main-header>
|
|
28
|
+
<d2l-labs-navigation-main-footer>
|
|
29
|
+
<div slot="main" class="d2l-labs-navigation-s-main-wrapper">Stuff goes in here (small border above and below)</div>
|
|
30
|
+
</d2l-labs-navigation-main-footer>
|
|
25
31
|
</d2l-labs-navigation>
|
|
26
32
|
```
|
|
27
33
|
|
|
28
34
|
***Relevant CSS class name:***
|
|
29
35
|
* `--d2l-labs-navigation-shadow-drop-border-display`: The default value is `block`, but this property can be used to hide the shadow by setting it to `none`.
|
|
30
36
|
|
|
31
|
-
|
|
37
|
+
## Immersive Navigation [d2l-labs-navigation-immersive]
|
|
32
38
|
|
|
33
39
|
Add the `d2l-labs-navigation-immersive` component, providing values for the `backLinkHref` & `backLinkText`. Additionally, you may override any of the 3 slots (`left`, `middle`, `right`).
|
|
34
40
|
Please note that overridding the `left` slot will prevent the Back link from displaying. This should only be done in very specialized cases.
|
|
35
41
|
|
|
42
|
+
<!-- docs: demo code -->
|
|
36
43
|
```html
|
|
37
44
|
<script type="module">
|
|
38
45
|
import '@brightspace-ui/labs/components/navigation/navigation-immersive.js';
|
|
46
|
+
import '@brightspace-ui/labs/components/navigation/navigation-iterator.js';
|
|
39
47
|
</script>
|
|
40
48
|
|
|
41
|
-
<d2l-labs-navigation-immersive back-link-href="https://www.
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
49
|
+
<d2l-labs-navigation-immersive back-link-href="https://www.example.org" back-link-text="Back to D2L">
|
|
50
|
+
<div class="d2l-typography d2l-body-standard" slot="middle">
|
|
51
|
+
<p>Economics 101</p>
|
|
52
|
+
</div>
|
|
53
|
+
<div slot="right">
|
|
54
|
+
<d2l-labs-navigation-iterator></d2l-labs-navigation-iterator>
|
|
55
|
+
</div>
|
|
48
56
|
</d2l-labs-navigation-immersive>
|
|
49
57
|
```
|
|
50
58
|
|
|
@@ -54,12 +62,15 @@ Optionally:
|
|
|
54
62
|
- Overflow can be enabled to facilitate components like dropdowns by including the `allow-overflow` boolean attribute
|
|
55
63
|
- A shorter version of the back text can be provided by setting the `back-link-text-short` attribute
|
|
56
64
|
|
|
57
|
-
|
|
65
|
+
---
|
|
58
66
|
|
|
67
|
+
<!-- docs: start hidden content -->
|
|
68
|
+
> **Secondary Components**
|
|
69
|
+
>
|
|
59
70
|
> These are the components that make up the Primary Components. There might be an edge case or two where it makes sense to use one of these in isolation,
|
|
60
71
|
> but **PLEASE STRONGLY CONSIDER** using a Primary Component instead.
|
|
61
72
|
|
|
62
|
-
|
|
73
|
+
## Navigation Band [d2l-labs-navigation-band]
|
|
63
74
|
|
|
64
75
|
```html
|
|
65
76
|
<script type="module">
|
|
@@ -75,9 +86,7 @@ The `d2l-labs-navigation-band` also includes a `slot` with a custom scrollbar an
|
|
|
75
86
|
* `--d2l-branding-primary-color`: Used to customize the colour of the top navigation band.
|
|
76
87
|
* `--d2l-labs-navigation-band-slot-height`: When using the slot, this is needed to setup the proper scrollbar and fading effects.
|
|
77
88
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
### d2l-labs-navigation-main-header
|
|
89
|
+
## Main Header [d2l-labs-navigation-main-header]
|
|
81
90
|
|
|
82
91
|
Add the `d2l-labs-navigation-main-header` component, and provide elements for the `left` and `right` slots.
|
|
83
92
|
|
|
@@ -87,8 +96,8 @@ Add the `d2l-labs-navigation-main-header` component, and provide elements for th
|
|
|
87
96
|
</script>
|
|
88
97
|
|
|
89
98
|
<d2l-labs-navigation-main-header>
|
|
90
|
-
|
|
91
|
-
|
|
99
|
+
<div slot="left"></div>
|
|
100
|
+
<div slot="right"></div>
|
|
92
101
|
</d2l-labs-navigation-main-header>
|
|
93
102
|
```
|
|
94
103
|
|
|
@@ -97,9 +106,7 @@ Add the `d2l-labs-navigation-main-header` component, and provide elements for th
|
|
|
97
106
|
* `left` (required): Secondary content (that will shrink with page size) oriented on the left side of the centre gutter (whitespace)
|
|
98
107
|
* `right` (required): Primary content (that will not shrink with page size) oriented on the right side of the centre gutter (whitespace)
|
|
99
108
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
### d2l-labs-navigation-main-footer
|
|
109
|
+
## Main Footer [d2l-labs-navigation-main-footer]
|
|
103
110
|
|
|
104
111
|
Add the `d2l-labs-navigation-main-footer` component, and provide elements for the `main` slot.
|
|
105
112
|
|
|
@@ -109,7 +116,7 @@ Add the `d2l-labs-navigation-main-footer` component, and provide elements for th
|
|
|
109
116
|
</script>
|
|
110
117
|
|
|
111
118
|
<d2l-labs-navigation-main-footer>
|
|
112
|
-
|
|
119
|
+
<div slot="main"></div>
|
|
113
120
|
</d2l-labs-navigation-main-footer>
|
|
114
121
|
```
|
|
115
122
|
|
|
@@ -119,19 +126,46 @@ Add the `d2l-labs-navigation-main-footer` component, and provide elements for th
|
|
|
119
126
|
|
|
120
127
|
---
|
|
121
128
|
|
|
122
|
-
|
|
129
|
+
> **Actions**
|
|
130
|
+
>
|
|
131
|
+
> Use these components inside of the navigation component slots.
|
|
132
|
+
|
|
133
|
+
<!-- docs: end hidden content -->
|
|
134
|
+
|
|
135
|
+
## Navigation Link [d2l-labs-navigation-link]
|
|
136
|
+
|
|
137
|
+
`<d2l-labs-navigation-link>` provides a link with the navigation focus effect.
|
|
123
138
|
|
|
124
|
-
|
|
139
|
+
<!-- docs: demo code -->
|
|
140
|
+
```html
|
|
141
|
+
<script type="module">
|
|
142
|
+
import '@brightspace-ui/labs/components/navigation/navigation-link.js';
|
|
143
|
+
</script>
|
|
144
|
+
<div style="border: 1px solid #999999; border-top: 4px solid slateblue; height: 90px; padding: 0 18px; width: 100%;">
|
|
145
|
+
<d2l-labs-navigation-link href="https://www.example.org">Settings</d2l-labs-navigation-link>
|
|
146
|
+
</div>
|
|
147
|
+
```
|
|
125
148
|
|
|
149
|
+
<!-- docs: start hidden content -->
|
|
126
150
|
***Relevant CSS class name:***
|
|
127
151
|
* `--d2l-labs-navigation-primary-color`: Used to customize the hover colour of the highlight links and buttons
|
|
152
|
+
<!-- docs: end hidden content -->
|
|
128
153
|
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
### d2l-labs-navigation-button-icon
|
|
154
|
+
## Navigation Button Icon [d2l-labs-navigation-button-icon]
|
|
132
155
|
|
|
133
156
|
`<d2l-labs-navigation-button-icon>` provides a button with an icon and optional text.
|
|
134
157
|
|
|
158
|
+
<!-- docs: demo code -->
|
|
159
|
+
```html
|
|
160
|
+
<script type="module">
|
|
161
|
+
import '@brightspace-ui/labs/components/navigation/navigation-button-icon.js';
|
|
162
|
+
</script>
|
|
163
|
+
<div style="border: 1px solid #999999; border-top: 4px solid slateblue; height: 90px; padding: 0 18px; width: 100%;">
|
|
164
|
+
<d2l-labs-navigation-button-icon icon="tier3:gear" text="Settings"></d2l-labs-navigation-button-icon>
|
|
165
|
+
</div>
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
<!-- docs: start hidden content -->
|
|
135
169
|
### Properties
|
|
136
170
|
|
|
137
171
|
| Property | Type | Description |
|
|
@@ -142,13 +176,23 @@ Add the `d2l-labs-navigation-main-footer` component, and provide elements for th
|
|
|
142
176
|
| `no-highlight-border` | Boolean | Visually hides the highlight border when hovered/focused |
|
|
143
177
|
| `text-hidden` | Boolean | Visually hides the text |
|
|
144
178
|
| `tooltip-position` | String | Position of the tooltip ( top\|bottom\|left\|right ); default is bottom |
|
|
179
|
+
<!-- docs: end hidden content -->
|
|
145
180
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
### d2l-labs-navigation-link-icon
|
|
181
|
+
## Navigation Link Icon [d2l-labs-navigation-link-icon]
|
|
149
182
|
|
|
150
183
|
Similar to `<d2l-labs-navigation-button-icon>`, a link that comes with an icon and optional text.
|
|
151
184
|
|
|
185
|
+
<!-- docs: demo code -->
|
|
186
|
+
```html
|
|
187
|
+
<script type="module">
|
|
188
|
+
import '@brightspace-ui/labs/components/navigation/navigation-link-icon.js';
|
|
189
|
+
</script>
|
|
190
|
+
<div style="border: 1px solid #999999; border-top: 4px solid slateblue; height: 90px; padding: 0 18px; width: 100%;">
|
|
191
|
+
<d2l-labs-navigation-link-icon href="https://www.example.org" icon="tier3:gear" text="Settings"></d2l-labs-navigation-link-icon>
|
|
192
|
+
</div>
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
<!-- docs: start hidden content -->
|
|
152
196
|
### Properties
|
|
153
197
|
|
|
154
198
|
| Property | Type | Description |
|
|
@@ -157,24 +201,54 @@ Similar to `<d2l-labs-navigation-button-icon>`, a link that comes with an icon a
|
|
|
157
201
|
| `text` | String, required | Text for the button |
|
|
158
202
|
| `icon` | String | Preset icon key (e.g. `tier1:gear`) |
|
|
159
203
|
| `text-hidden` | Boolean | Visually hides the text |
|
|
204
|
+
<!-- docs: end hidden content -->
|
|
160
205
|
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
### d2l-labs-navigation-iterator
|
|
206
|
+
## Navigation Dropdown Button Icon [d2l-labs-navigation-dropdown-button-icon]
|
|
164
207
|
|
|
208
|
+
<!-- docs: demo -->
|
|
165
209
|
```html
|
|
166
210
|
<script type="module">
|
|
167
|
-
import '@brightspace-ui/labs/components/navigation/navigation-
|
|
211
|
+
import '@brightspace-ui/labs/components/navigation/navigation-dropdown-button-icon.js';
|
|
168
212
|
</script>
|
|
213
|
+
<div style="border: 1px solid #999999; border-top: 4px solid slateblue; height: 90px; padding: 0 18px; width: 100%;">
|
|
214
|
+
<d2l-labs-navigation-dropdown-button-icon icon="tier3:discussions" text="Subscription alerts" has-notification notification-text="You have new subscription alerts"></d2l-labs-navigation-dropdown-button-icon>
|
|
215
|
+
</div>
|
|
216
|
+
```
|
|
169
217
|
|
|
170
|
-
|
|
218
|
+
## Navigation Dropdown Button Custom [d2l-labs-navigation-dropdown-button-custom]
|
|
219
|
+
|
|
220
|
+
<!-- docs: demo -->
|
|
221
|
+
```html
|
|
222
|
+
<script type="module">
|
|
223
|
+
import '@brightspace-ui/labs/components/navigation/navigation-dropdown-button-custom.js';
|
|
224
|
+
</script>
|
|
225
|
+
<div style="border: 1px solid #999999; border-top: 4px solid slateblue; height: 90px; padding: 0 18px; width: 100%;">
|
|
226
|
+
<d2l-labs-navigation-dropdown-button-custom opener-label="User Name, avatar">
|
|
227
|
+
<span slot="opener" style="align-items: center; display: flex; font-size: 0.7rem; gap: 10px;">
|
|
228
|
+
<span style="background-color: #ab578a; border-radius: 6px; height: 42px; width: 42px;"></span>
|
|
229
|
+
User Name
|
|
230
|
+
</span>
|
|
231
|
+
</d2l-labs-navigation-dropdown-button-custom>
|
|
232
|
+
</div>
|
|
171
233
|
```
|
|
172
234
|
|
|
235
|
+
## Navigation Iterator [d2l-labs-navigation-iterator]
|
|
236
|
+
|
|
237
|
+
<!-- docs: demo code -->
|
|
238
|
+
```html
|
|
239
|
+
<script type="module">
|
|
240
|
+
import '@brightspace-ui/labs/components/navigation/navigation-iterator.js';
|
|
241
|
+
</script>
|
|
242
|
+
<div style="border: 1px solid #999999; border-top: 4px solid slateblue; padding: 0 18px; width: 100%;">
|
|
243
|
+
<d2l-labs-navigation-iterator>User 1 of 17</d2l-labs-navigation-iterator>
|
|
244
|
+
</div>
|
|
245
|
+
```
|
|
246
|
+
<!-- docs: start hidden content -->
|
|
173
247
|
There is only one slot, and the default button text can be hidden with `hide-text`.
|
|
174
248
|
|
|
175
249
|
```html
|
|
176
250
|
<d2l-labs-navigation-iterator hide-text>
|
|
177
|
-
|
|
251
|
+
<span>User 1 of 17</span>
|
|
178
252
|
</d2l-labs-navigation-iterator>
|
|
179
253
|
```
|
|
180
254
|
|
|
@@ -190,3 +264,4 @@ The iterator buttons can be hidden completely with `no-next` or `no-previous`.
|
|
|
190
264
|
<d2l-labs-navigation-iterator no-next></d2l-labs-navigation-iterator>
|
|
191
265
|
<d2l-labs-navigation-iterator no-previous></d2l-labs-navigation-iterator>
|
|
192
266
|
```
|
|
267
|
+
<!-- docs: end hidden content -->
|