@brightspace-ui/core 2.30.0 → 2.31.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.
Files changed (8) hide show
  1. package/components/menu/README.md +1 -1
  2. package/components/object-property-list/README.md +118 -0
  3. package/components/object-property-list/demo/object-property-list.html +54 -0
  4. package/components/object-property-list/object-property-list-item-link.js +54 -0
  5. package/components/object-property-list/object-property-list-item.js +72 -0
  6. package/components/object-property-list/object-property-list.js +31 -0
  7. package/custom-elements.json +106 -0
  8. package/package.json +1 -1
package/components/menu/README.md CHANGED
@@ -62,7 +62,7 @@ To make your usage of `d2l-menu` accessible, use the following property:
62
62
 
63
63
  ## Menu Item [d2l-menu-item]
64
64
 
65
- The `d2l-menu item` component is used with JS handlers and can be wired-up to the `d2l-menu-item-select` event.
65
+ The `d2l-menu-item` component is used with JS handlers and can be wired-up to the `d2l-menu-item-select` event.
66
66
 
67
67
  <!-- docs: demo live name:d2l-menu-item -->
68
68
  ```html
package/components/object-property-list/README.md ADDED
@@ -0,0 +1,118 @@
1
+ # Object Property List
2
+
3
+ Object property lists are simple dot-separated lists of text, displayed sequentially on a single line. They are used to convey additional information or metadata about an object.
4
+
5
+ <!-- docs: demo -->
6
+ ```html
7
+ <script type="module">
8
+ import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
9
+ import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
10
+ import '@brightspace-ui/core/components/object-property-list/object-property-list-item-link.js';
11
+ </script>
12
+
13
+ <d2l-object-property-list>
14
+ <d2l-object-property-list-item text="Example item"></d2l-object-property-list-item>
15
+ <d2l-object-property-list-item text="Example item with icon" icon="tier1:grade"></d2l-object-property-list-item>
16
+ <d2l-object-property-list-item-link text="Example link" href="https://www.d2l.com/"></d2l-object-property-list-item-link>
17
+ <d2l-object-property-list-item-link text="Example link with icon" href="https://www.d2l.com/" icon="tier1:alert"></d2l-object-property-list-item-link>
18
+ </d2l-object-property-list>
19
+ ```
20
+
21
+ ## List [d2l-object-property-list]
22
+
23
+ An object property list can be defined using `d2l-object-property-list` and a combination of items (e.g., `d2l-object-property-list-item`, `d2l-object-property-list-item-link`).
24
+
25
+ <!-- docs: demo code -->
26
+ ```html
27
+ <script type="module">
28
+ import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
29
+ import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
30
+ import '@brightspace-ui/core/components/object-property-list/object-property-list-item-link.js';
31
+ </script>
32
+
33
+ <d2l-object-property-list>
34
+ <d2l-object-property-list-item text="Example item"></d2l-object-property-list-item>
35
+ <d2l-object-property-list-item-link text="Example link" href="https://www.d2l.com/"></d2l-object-property-list-item-link>
36
+ </d2l-object-property-list>
37
+ ```
38
+
39
+ ### Word wrap
40
+
41
+ The object property list is designed to wrap in an inline manner if the items are wider than the container.
42
+
43
+ <!-- docs: demo code -->
44
+ ```html
45
+ <script type="module">
46
+ import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
47
+ import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
48
+ </script>
49
+
50
+ <d2l-object-property-list>
51
+ <d2l-object-property-list-item icon="tier1:grade" text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat cum totam! Enim, sunt."></d2l-object-property-list-item>
52
+ <d2l-object-property-list-item icon="tier1:alert" text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat cum totam! Enim, sunt."></d2l-object-property-list-item>
53
+ </d2l-object-property-list>
54
+ ```
55
+
56
+ ## Text Item [d2l-object-property-list-item]
57
+
58
+ The `d2l-object-property-list-item` component is the basic type of item for an object property list, displaying text and an optional leading icon.
59
+
60
+
61
+ <!-- docs: demo code -->
62
+ ```html
63
+ <script type="module">
64
+ import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
65
+ import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
66
+ </script>
67
+
68
+ <d2l-object-property-list>
69
+ <d2l-object-property-list-item text="Example item"></d2l-object-property-list-item>
70
+ <d2l-object-property-list-item text="Example item with icon" icon="tier1:grade"></d2l-object-property-list-item>
71
+ </d2l-object-property-list>
72
+ ```
73
+
74
+ <!-- docs: start hidden content -->
75
+ ### Properties
76
+
77
+ | Property | Type | Description |
78
+ |--|--|--|
79
+ | `text` | String, required | Text displayed by the item |
80
+ | `icon` | String | [Preset icon key](../icons#preset-icons) (e.g. `tier1:gear`) |
81
+ <!-- docs: end hidden content -->
82
+
83
+ ## Link Item [d2l-object-property-list-item-link]
84
+
85
+ The `d2l-object-property-list-item-link` component is a link item for the object property list. It displays text as a hyperlink, with an optional leading icon.
86
+
87
+ <!-- docs: demo code -->
88
+ ```html
89
+ <script type="module">
90
+ import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
91
+ import '@brightspace-ui/core/components/object-property-list/object-property-list-item-link.js';
92
+ </script>
93
+
94
+ <d2l-object-property-list>
95
+ <d2l-object-property-list-item-link text="Example link" href="https://www.d2l.com/"></d2l-object-property-list-item-link>
96
+ <d2l-object-property-list-item-link text="Example link with icon" href="https://www.d2l.com/" icon="tier1:alert"></d2l-object-property-list-item-link>
97
+ </d2l-object-property-list>
98
+ ```
99
+
100
+ <!-- docs: start hidden content -->
101
+ ### Properties
102
+
103
+ | Property | Type | Description |
104
+ |--|--|--|
105
+ | `text` | String, required | Text displayed by the item |
106
+ | `icon` | String | [Preset icon key](../icons#preset-icons) (e.g. `tier1:gear`) |
107
+ | `download` | Boolean | Download a URL instead of navigating to it |
108
+ | `href` | String, required | The URL the item link navigates to |
109
+ | `target` | String | Where to display the linked URL |
110
+ <!-- docs: end hidden content -->
111
+
112
+ <!-- docs: start hidden content -->
113
+ ## Future Improvements
114
+
115
+ * add more types of items (specifically, a `tooltip-help` item)
116
+
117
+ Looking for an enhancement not listed here? Create a GitHub issue!
118
+ <!-- docs: end hidden content -->
package/components/object-property-list/demo/object-property-list.html ADDED
@@ -0,0 +1,54 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
+ <meta charset="UTF-8">
6
+ <link rel="stylesheet" href="../../demo/styles.css" type="text/css">
7
+ <script type="module">
8
+ import '../../demo/demo-page.js';
9
+
10
+ import '../object-property-list.js';
11
+ import '../object-property-list-item.js';
12
+ import '../object-property-list-item-link.js';
13
+ </script>
14
+ </head>
15
+ <body unresolved>
16
+ <d2l-demo-page page-title="d2l-object-property-list">
17
+
18
+ <h2>Object Property List: Single item</h2>
19
+
20
+ <d2l-demo-snippet>
21
+ <template>
22
+ <d2l-object-property-list>
23
+ <d2l-object-property-list-item text="Example item"></d2l-object-property-list-item>
24
+ </d2l-object-property-list>
25
+ </template>
26
+ </d2l-demo-snippet>
27
+
28
+ <h2>Object Property List: All item variants</h2>
29
+
30
+ <d2l-demo-snippet>
31
+ <template>
32
+ <d2l-object-property-list>
33
+ <d2l-object-property-list-item text="Example item"></d2l-object-property-list-item>
34
+ <d2l-object-property-list-item text="Example item with icon" icon="tier1:grade"></d2l-object-property-list-item>
35
+ <d2l-object-property-list-item-link text="Example link" href="https://www.d2l.com/"></d2l-object-property-list-item-link>
36
+ <d2l-object-property-list-item-link text="Example link with icon" href="https://www.d2l.com/" icon="tier1:alert"></d2l-object-property-list-item-link>
37
+ </d2l-object-property-list>
38
+ </template>
39
+ </d2l-demo-snippet>
40
+
41
+ <h2>Object Property List: Long items to demonstrate word-wrap</h2>
42
+
43
+ <d2l-demo-snippet>
44
+ <template>
45
+ <d2l-object-property-list>
46
+ <d2l-object-property-list-item icon="tier1:grade" text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat cum totam! Enim, sunt."></d2l-object-property-list-item>
47
+ <d2l-object-property-list-item icon="tier1:alert" text="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci repellat cum totam! Enim, sunt."></d2l-object-property-list-item>
48
+ </d2l-object-property-list>
49
+ </template>
50
+ </d2l-demo-snippet>
51
+
52
+ </d2l-demo-page>
53
+ </body>
54
+ </html>
package/components/object-property-list/object-property-list-item-link.js ADDED
@@ -0,0 +1,54 @@
1
+ import { html } from 'lit';
2
+ import { ifDefined } from 'lit/directives/if-defined.js';
3
+ import { linkStyles } from '../link/link.js';
4
+ import { ObjectPropertyListItem } from './object-property-list-item.js';
5
+
6
+ /**
7
+ * A single object property, to be used within an object-property-list,
8
+ * rendered as a link and with an optional icon.
9
+ */
10
+ class ObjectPropertyListItemLink extends ObjectPropertyListItem {
11
+ static get properties() {
12
+ return {
13
+ /**
14
+ * Download a URL instead of navigating to it
15
+ * @type {boolean}
16
+ */
17
+ download: { type: Boolean },
18
+ /**
19
+ * REQUIRED: URL or URL fragment of the link
20
+ * @type {string}
21
+ */
22
+ href: { type: String },
23
+ /**
24
+ * Where to display the linked URL
25
+ * @type {string}
26
+ */
27
+ target: { type: String },
28
+ };
29
+ }
30
+
31
+ static get styles() {
32
+ return [
33
+ ...super.styles,
34
+ linkStyles,
35
+ ];
36
+ }
37
+
38
+ render() {
39
+ return html`
40
+ ${this._renderIcon()}
41
+ <a
42
+ ?download="${this.download}"
43
+ class="d2l-link"
44
+ href="${ifDefined(this.href)}"
45
+ target="${ifDefined(this.target)}"
46
+ >
47
+ ${this.text}
48
+ </a>
49
+ ${this._renderSeparator()}
50
+ `;
51
+ }
52
+ }
53
+
54
+ customElements.define('d2l-object-property-list-item-link', ObjectPropertyListItemLink);
package/components/object-property-list/object-property-list-item.js ADDED
@@ -0,0 +1,72 @@
1
+ import '../colors/colors.js';
2
+ import '../icons/icon.js';
3
+ import { css, html, LitElement, nothing } from 'lit';
4
+ import { getSeparator } from '@brightspace-ui/intl/lib/list.js';
5
+ import { offscreenStyles } from '../offscreen/offscreen.js';
6
+ import { RtlMixin } from '../../mixins/rtl-mixin.js';
7
+
8
+ /**
9
+ * A single object property, to be used within an object-property-list,
10
+ * with an optional icon.
11
+ */
12
+ export class ObjectPropertyListItem extends RtlMixin(LitElement) {
13
+ static get properties() {
14
+ return {
15
+ /**
16
+ * Name of an optional icon to display
17
+ * @type {string}
18
+ */
19
+ icon: { type: String },
20
+ /**
21
+ * REQUIRED: Text to display on the item
22
+ * @type {string}
23
+ */
24
+ text: { type: String },
25
+ };
26
+ }
27
+
28
+ static get styles() {
29
+ return [offscreenStyles, css`
30
+ d2l-icon {
31
+ height: 0.9rem;
32
+ width: 0.9rem;
33
+ }
34
+ .separator {
35
+ display: var(--d2l-object-property-list-item-separator-display, inline);
36
+ margin: 0 0.05rem;
37
+ }
38
+ .separator d2l-icon {
39
+ color: var(--d2l-color-galena);
40
+ }
41
+ .item-icon {
42
+ margin: -0.1rem 0.3rem 0 0;
43
+ }
44
+ :host([dir="rtl"]) .item-icon {
45
+ margin: -0.1rem 0 0 0.3rem;
46
+ }
47
+ `];
48
+ }
49
+
50
+ render() {
51
+ return html`
52
+ ${this._renderIcon()}
53
+ <span>${this.text}</span>
54
+ ${this._renderSeparator()}
55
+ `;
56
+ }
57
+
58
+ _renderIcon() {
59
+ return this.icon ? html`<d2l-icon icon="${this.icon}" class="item-icon"></d2l-icon>` : nothing;
60
+ }
61
+
62
+ _renderSeparator() {
63
+ return html`
64
+ <span class="separator">
65
+ <span class="d2l-offscreen">${getSeparator({ nonBreaking: true })}</span>
66
+ <d2l-icon icon="tier1:bullet" aria-hidden="true"></d2l-icon>
67
+ </span>
68
+ `;
69
+ }
70
+ }
71
+
72
+ customElements.define('d2l-object-property-list-item', ObjectPropertyListItem);
package/components/object-property-list/object-property-list.js ADDED
@@ -0,0 +1,31 @@
1
+ import { css, html, LitElement } from 'lit';
2
+ import { bodySmallStyles } from '../typography/styles.js';
3
+
4
+ /**
5
+ * A dot-separated list of object properties.
6
+ * @slot - Items of the type d2l-object-property-list-item* to be added to the container
7
+ */
8
+ class ObjectPropertyList extends LitElement {
9
+ static get styles() {
10
+ return [bodySmallStyles, css`
11
+ :host {
12
+ display: contents;
13
+ }
14
+ :host([hidden]) {
15
+ display: none;
16
+ }
17
+ slot {
18
+ display: block;
19
+ }
20
+ ::slotted(:last-child) {
21
+ --d2l-object-property-list-item-separator-display: none;
22
+ }
23
+ `];
24
+ }
25
+
26
+ render() {
27
+ return html`<slot class="d2l-body-small"></slot>`;
28
+ }
29
+ }
30
+
31
+ customElements.define('d2l-object-property-list', ObjectPropertyList);
package/custom-elements.json CHANGED
@@ -8405,6 +8405,112 @@
8405
8405
  }
8406
8406
  ]
8407
8407
  },
8408
+ {
8409
+ "name": "d2l-object-property-list-item-link",
8410
+ "path": "./components/object-property-list/object-property-list-item-link.js",
8411
+ "description": "A single object property, to be used within an object-property-list,\nrendered as a link and with an optional icon.",
8412
+ "attributes": [
8413
+ {
8414
+ "name": "download",
8415
+ "description": "Download a URL instead of navigating to it",
8416
+ "type": "boolean"
8417
+ },
8418
+ {
8419
+ "name": "href",
8420
+ "description": "REQUIRED: URL or URL fragment of the link",
8421
+ "type": "string"
8422
+ },
8423
+ {
8424
+ "name": "target",
8425
+ "description": "Where to display the linked URL",
8426
+ "type": "string"
8427
+ },
8428
+ {
8429
+ "name": "icon",
8430
+ "description": "Name of an optional icon to display",
8431
+ "type": "string"
8432
+ },
8433
+ {
8434
+ "name": "text",
8435
+ "description": "REQUIRED: Text to display on the item",
8436
+ "type": "string"
8437
+ }
8438
+ ],
8439
+ "properties": [
8440
+ {
8441
+ "name": "download",
8442
+ "attribute": "download",
8443
+ "description": "Download a URL instead of navigating to it",
8444
+ "type": "boolean"
8445
+ },
8446
+ {
8447
+ "name": "href",
8448
+ "attribute": "href",
8449
+ "description": "REQUIRED: URL or URL fragment of the link",
8450
+ "type": "string"
8451
+ },
8452
+ {
8453
+ "name": "target",
8454
+ "attribute": "target",
8455
+ "description": "Where to display the linked URL",
8456
+ "type": "string"
8457
+ },
8458
+ {
8459
+ "name": "icon",
8460
+ "attribute": "icon",
8461
+ "description": "Name of an optional icon to display",
8462
+ "type": "string"
8463
+ },
8464
+ {
8465
+ "name": "text",
8466
+ "attribute": "text",
8467
+ "description": "REQUIRED: Text to display on the item",
8468
+ "type": "string"
8469
+ }
8470
+ ]
8471
+ },
8472
+ {
8473
+ "name": "d2l-object-property-list-item",
8474
+ "path": "./components/object-property-list/object-property-list-item.js",
8475
+ "description": "A single object property, to be used within an object-property-list,\nwith an optional icon.",
8476
+ "attributes": [
8477
+ {
8478
+ "name": "icon",
8479
+ "description": "Name of an optional icon to display",
8480
+ "type": "string"
8481
+ },
8482
+ {
8483
+ "name": "text",
8484
+ "description": "REQUIRED: Text to display on the item",
8485
+ "type": "string"
8486
+ }
8487
+ ],
8488
+ "properties": [
8489
+ {
8490
+ "name": "icon",
8491
+ "attribute": "icon",
8492
+ "description": "Name of an optional icon to display",
8493
+ "type": "string"
8494
+ },
8495
+ {
8496
+ "name": "text",
8497
+ "attribute": "text",
8498
+ "description": "REQUIRED: Text to display on the item",
8499
+ "type": "string"
8500
+ }
8501
+ ]
8502
+ },
8503
+ {
8504
+ "name": "d2l-object-property-list",
8505
+ "path": "./components/object-property-list/object-property-list.js",
8506
+ "description": "A dot-separated list of object properties.",
8507
+ "slots": [
8508
+ {
8509
+ "name": "",
8510
+ "description": "Items of the type d2l-object-property-list-item* to be added to the container"
8511
+ }
8512
+ ]
8513
+ },
8408
8514
  {
8409
8515
  "name": "d2l-offscreen-demo",
8410
8516
  "path": "./components/offscreen/demo/offscreen-demo.js"
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "2.30.0",
3
+ "version": "2.31.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",