@brightspace-ui/core 2.47.2 → 2.47.3
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.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
# Description List
|
|
2
|
-
A Description List displays
|
|
2
|
+
A Description List displays static pairs of terms and definitions in a vertical list. In the standard HTML element `dl` these are called "terms" `dt` and "definitions" `dd`.
|
|
3
3
|
|
|
4
4
|
<!-- docs: demo -->
|
|
5
5
|
```html
|
|
@@ -10,16 +10,20 @@ A Description List displays information in a vertical list of key-value pairs. C
|
|
|
10
10
|
```
|
|
11
11
|
|
|
12
12
|
## Best Practices
|
|
13
|
+
|
|
13
14
|
<!-- docs: start best practices -->
|
|
14
15
|
<!-- docs: start dos -->
|
|
15
|
-
*
|
|
16
|
+
* Keep terms short and scannable
|
|
17
|
+
* Use terms of similar lengths since definitions are aligned to the longest term
|
|
18
|
+
* Use title case for terms and sentence case for definitions
|
|
19
|
+
* Adjust the [responsive breakpoint](#responsive-behavior) to suit your content since longer values may need a higher breakpoint
|
|
16
20
|
<!-- docs: end dos -->
|
|
17
21
|
|
|
18
22
|
<!-- docs: start donts -->
|
|
19
|
-
*
|
|
20
|
-
* Don't
|
|
21
|
-
* Don't
|
|
22
|
-
* Don't
|
|
23
|
+
* Avoid using multiple description lists on one page
|
|
24
|
+
* Don't use empty terms or definitions, both are required
|
|
25
|
+
* Don't use colons in the labels, they're unnecessary
|
|
26
|
+
* Don't end a definition with a period unless it has multiple sentences
|
|
23
27
|
<!-- docs: end donts -->
|
|
24
28
|
<!-- docs: end best practices -->
|
|
25
29
|
|
|
@@ -42,11 +46,14 @@ When the component width is less than the `breakpoint` property, the side-by-sid
|
|
|
42
46
|
return html`
|
|
43
47
|
<d2l-dl-wrapper breakpoint="600">
|
|
44
48
|
<dl>
|
|
45
|
-
<dt>
|
|
46
|
-
<dd>
|
|
49
|
+
<dt>Active Course</dt>
|
|
50
|
+
<dd>Inactive courses are invisible, regardless of start or end dates unless the user’s role has the permission "Can View Inactive Courses"</dd>
|
|
51
|
+
|
|
52
|
+
<dt>Start Date</dt>
|
|
53
|
+
<dd>The start date determines when a course becomes available to learners. Users with the "Can View Course Before Start Date" permission are excluded from this restriction.</dd>
|
|
47
54
|
|
|
48
|
-
<dt>
|
|
49
|
-
<dd>The
|
|
55
|
+
<dt>End Date</dt>
|
|
56
|
+
<dd>The end date determines when a course becomes unavailable to learners. Users with the "Can View Course After End Date" permission are excluded from this restriction.</dd>
|
|
50
57
|
</dl>
|
|
51
58
|
</d2l-dl-wrapper>
|
|
52
59
|
`;
|
|
@@ -60,9 +67,9 @@ When the component width is less than the `breakpoint` property, the side-by-sid
|
|
|
60
67
|
|
|
61
68
|
## Description List Wrapper [d2l-dl-wrapper]
|
|
62
69
|
|
|
63
|
-
The `d2l-dl-wrapper` can be combined with `descriptionListStyles` to apply styling and resize behavior to native `dl` elements.
|
|
70
|
+
The `d2l-dl-wrapper` component can be combined with `descriptionListStyles` to apply styling and resize behavior to native `dl` elements.
|
|
64
71
|
|
|
65
|
-
<!-- docs: demo live name:d2l-test-dl -->
|
|
72
|
+
<!-- docs: demo live name:d2l-test-dl display:block -->
|
|
66
73
|
```html
|
|
67
74
|
<script type="module">
|
|
68
75
|
import { html, LitElement } from 'lit';
|
|
@@ -84,11 +91,17 @@ The `d2l-dl-wrapper` can be combined with `descriptionListStyles` to apply styli
|
|
|
84
91
|
return html`
|
|
85
92
|
<d2l-dl-wrapper breakpoint="${this.breakpoint}">
|
|
86
93
|
<dl>
|
|
87
|
-
<dt>Course
|
|
88
|
-
<dd>
|
|
94
|
+
<dt>Course Name</dt>
|
|
95
|
+
<dd>Brightspace 101B</dd>
|
|
96
|
+
|
|
97
|
+
<dt>Course Code</dt>
|
|
98
|
+
<dd>BSPC 101B</dd>
|
|
99
|
+
|
|
100
|
+
<dt>Start Date</dt>
|
|
101
|
+
<dd>June 14 2022</dd>
|
|
89
102
|
|
|
90
|
-
<dt>
|
|
91
|
-
<dd>
|
|
103
|
+
<dt>Semester</dt>
|
|
104
|
+
<dd>2022 Summer</dd>
|
|
92
105
|
</dl>
|
|
93
106
|
</d2l-dl-wrapper>
|
|
94
107
|
`;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@brightspace-ui/core",
|
|
3
|
-
"version": "2.47.
|
|
3
|
+
"version": "2.47.3",
|
|
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",
|