@brightspace-ui/core 1.190.0 → 1.192.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 (10) hide show
  1. package/components/card/README.md +45 -26
  2. package/components/card/card-footer-link.js +46 -73
  3. package/components/card/demo/card.html +42 -28
  4. package/components/count-badge/README.md +2 -0
  5. package/components/count-badge/count-badge-icon.js +5 -3
  6. package/components/count-badge/count-badge-mixin.js +10 -1
  7. package/components/count-badge/count-badge.js +5 -0
  8. package/components/html-block/html-block.js +100 -97
  9. package/custom-elements.json +57 -14
  10. package/package.json +1 -1
package/components/card/README.md CHANGED
@@ -19,10 +19,12 @@ Used to surface pertinent information, cards make it easy for users to browse in
19
19
  <d2l-card-content-meta>Science • Grade 11</d2l-card-content-meta>
20
20
  </div>
21
21
  <div slot="footer">
22
- <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2"></d2l-card-footer-link>
23
- <d2l-tooltip for="discussionsLink1">Discussions</d2l-tooltip>
24
- <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1"></d2l-card-footer-link>
25
- <d2l-tooltip position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
22
+ <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
23
+ <d2l-tooltip slot="tooltip" for="discussionsLink1">Discussions</d2l-tooltip>
24
+ </d2l-card-footer-link>
25
+ <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1">
26
+ <d2l-tooltip slot="tooltip" position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
27
+ </d2l-card-footer-link>
26
28
  </div>
27
29
  </d2l-card>
28
30
  ```
@@ -90,10 +92,12 @@ Cards are composed of 3 sections. Each card will have a content section but is n
90
92
  <d2l-card-content-meta>Science • Grade 11</d2l-card-content-meta>
91
93
  </div>
92
94
  <div slot="footer">
93
- <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2"></d2l-card-footer-link>
94
- <d2l-tooltip for="discussionsLink1">Discussions</d2l-tooltip>
95
- <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1"></d2l-card-footer-link>
96
- <d2l-tooltip position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
95
+ <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
96
+ <d2l-tooltip slot="tooltip" for="discussionsLink1">Discussions</d2l-tooltip>
97
+ </d2l-card-footer-link>
98
+ <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1">
99
+ <d2l-tooltip slot="tooltip" position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
100
+ </d2l-card-footer-link>
97
101
  </div>
98
102
  </d2l-card>
99
103
  </div>
@@ -122,10 +126,12 @@ The `d2l-card` element is a container that provides specific layout using severa
122
126
  <d2l-card-content-meta>Science • Grade 11</d2l-card-content-meta>
123
127
  </div>
124
128
  <div slot="footer">
125
- <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2"></d2l-card-footer-link>
126
- <d2l-tooltip for="discussionsLink1">Discussions</d2l-tooltip>
127
- <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1"></d2l-card-footer-link>
128
- <d2l-tooltip position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
129
+ <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
130
+ <d2l-tooltip slot="tooltip" for="discussionsLink1">Discussions</d2l-tooltip>
131
+ </d2l-card-footer-link>
132
+ <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1">
133
+ <d2l-tooltip slot="tooltip" position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
134
+ </d2l-card-footer-link>
129
135
  </div>
130
136
  </d2l-card>
131
137
  ```
@@ -175,10 +181,12 @@ The `d2l-card-content-title` element is a helper for providing layout/style for
175
181
  <d2l-card-content-title>Biology</d2l-card-content-title>
176
182
  </div>
177
183
  <div slot="footer">
178
- <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2"></d2l-card-footer-link>
179
- <d2l-tooltip for="discussionsLink1">Discussions</d2l-tooltip>
180
- <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1"></d2l-card-footer-link>
181
- <d2l-tooltip position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
184
+ <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
185
+ <d2l-tooltip slot="tooltip" for="discussionsLink1">Discussions</d2l-tooltip>
186
+ </d2l-card-footer-link>
187
+ <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1">
188
+ <d2l-tooltip slot="tooltip" position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
189
+ </d2l-card-footer-link>
182
190
  </div>
183
191
  </d2l-card>
184
192
  ```
@@ -202,10 +210,12 @@ The `d2l-card-content-meta` element is a helper for providing layout/style for a
202
210
  <d2l-card-content-meta>Science • Grade 11</d2l-card-content-meta>
203
211
  </div>
204
212
  <div slot="footer">
205
- <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2"></d2l-card-footer-link>
206
- <d2l-tooltip for="discussionsLink1">Discussions</d2l-tooltip>
207
- <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1"></d2l-card-footer-link>
208
- <d2l-tooltip position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
213
+ <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
214
+ <d2l-tooltip slot="tooltip" for="discussionsLink1">Discussions</d2l-tooltip>
215
+ </d2l-card-footer-link>
216
+ <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1">
217
+ <d2l-tooltip slot="tooltip" position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
218
+ </d2l-card-footer-link>
209
219
  </div>
210
220
  </d2l-card>
211
221
  ```
@@ -229,15 +239,23 @@ The `d2l-card-footer-link` element is an icon link that can be placed in the `fo
229
239
  <d2l-card-content-meta>Science • Grade 11</d2l-card-content-meta>
230
240
  </div>
231
241
  <div slot="footer">
232
- <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2"></d2l-card-footer-link>
233
- <d2l-tooltip for="discussionsLink1">Discussions</d2l-tooltip>
234
- <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1"></d2l-card-footer-link>
235
- <d2l-tooltip position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
242
+ <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
243
+ <d2l-tooltip slot="tooltip" for="discussionsLink1">Discussions</d2l-tooltip>
244
+ </d2l-card-footer-link>
245
+ <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="1">
246
+ <d2l-tooltip slot="tooltip" position="top" style="width: 100%;" for="assignmentsLink1">You have 1 assignments due tomorrow.</d2l-tooltip>
247
+ </d2l-card-footer-link>
236
248
  </div>
237
249
  </d2l-card>
238
250
  ```
239
251
 
240
252
  <!-- docs: start hidden content -->
253
+ ### Slots
254
+
255
+ | Slot | Type | Description |
256
+ |--|--|--|
257
+ | `tooltip` | required | The tooltip for the footer link. |
258
+
241
259
  ### Properties:
242
260
 
243
261
  | Property | Type | Description |
@@ -247,8 +265,9 @@ The `d2l-card-footer-link` element is an icon link that can be placed in the `fo
247
265
  | `download` | Boolean | Download a URL instead of navigating to it |
248
266
  | `href` | String | Location for the primary action/navigation |
249
267
  | `rel` | String | Relationship of the target object to the link object |
250
- | `secondary-text` | String | Text to display as a superscript on the icon |
251
- | `secondary-text-type` | String | Controls the style of the secondary text bubble; options are `notification` and `count` |
268
+ | `secondary-count` | Number | Count to display as a superscript on the icon |
269
+ | `secondary-count-type` | String | Controls the style of the secondary count bubble; options are `notification` and `count` |
270
+ | `secondary-count-max-digits` | Number | Overrides the default maximum digits of the secondary count bubble (2 for `notification` and no limit for `count` type) |
252
271
  | `target` | String | Where to display the linked URL |
253
272
 
254
273
  See the [anchor element docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) for more information on standard link attributes and their values.
package/components/card/card-footer-link.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import '../colors/colors.js';
2
+ import '../count-badge/count-badge-icon.js';
2
3
  import '../icons/icon.js';
3
4
  import { css, html, LitElement } from 'lit-element/lit-element.js';
4
5
  import { ifDefined } from 'lit-html/directives/if-defined.js';
@@ -7,6 +8,7 @@ import { RtlMixin } from '../../mixins/rtl-mixin.js';
7
8
 
8
9
  /**
9
10
  * An icon link that can be placed in the `footer` slot.
11
+ * @slot tooltip - slot for the link tooltip
10
12
  */
11
13
  class CardFooterLink extends RtlMixin(LitElement) {
12
14
 
@@ -25,7 +27,7 @@ class CardFooterLink extends RtlMixin(LitElement) {
25
27
  */
26
28
  hreflang: { type: String, reflect: true },
27
29
  /**
28
- * REQUIRED: Preset icon key (e.g. "tier1:gear")
30
+ * REQUIRED: Preset icon key (e.g. "tier1:gear"). Must be a tier 1 icon.
29
31
  */
30
32
  icon: { type: String, reflect: true },
31
33
  /**
@@ -33,13 +35,18 @@ class CardFooterLink extends RtlMixin(LitElement) {
33
35
  */
34
36
  rel: { type: String, reflect: true },
35
37
  /**
36
- * Secondary text to display as a superscript on the icon
38
+ * Secondary count to display as a count bubble on the icon
37
39
  */
38
- secondaryText: { type: String, attribute: 'secondary-text', reflect: true },
40
+ secondaryCount: { type: Number, attribute: 'secondary-count', reflect: true },
39
41
  /**
40
- * Controls the style of the secondary text bubble; options are 'notification' and 'count'
42
+ * Maximum digits to display in the secondary count. Defaults to no limit
41
43
  */
42
- secondaryTextType: { type: String, attribute: 'secondary-text-type', reflect: true },
44
+ secondaryCountMaxDigits: { type: String, attribute: 'secondary-count-max-digits' },
45
+ /**
46
+ * Controls the style of the secondary count bubble
47
+ * @type {'count'|'notification'}
48
+ */
49
+ secondaryCountType: { type: String, attribute: 'secondary-count-type', reflect: true },
43
50
  /**
44
51
  * Where to display the linked URL
45
52
  */
@@ -51,8 +58,7 @@ class CardFooterLink extends RtlMixin(LitElement) {
51
58
  /**
52
59
  * Specifies the media type in the form of a MIME type for the linked URL; purely advisory, with no built-in functionality
53
60
  */
54
- type: { type: String, reflect: true },
55
- _secondaryTextHidden: { type: Boolean }
61
+ type: { type: String, reflect: true }
56
62
  };
57
63
  }
58
64
 
@@ -73,64 +79,22 @@ class CardFooterLink extends RtlMixin(LitElement) {
73
79
  margin-right: 0;
74
80
  right: 0.15rem;
75
81
  }
76
- .d2l-card-footer-link-content {
77
- display: inline-block;
78
- line-height: 0;
79
- padding: 0.6rem;
80
- position: relative;
81
- text-align: center;
82
- }
83
82
  a {
84
83
  box-sizing: border-box;
85
84
  display: inline-block;
86
85
  height: 100%;
87
86
  outline: none;
88
- position: absolute;
89
87
  width: 100%;
90
- z-index: 1;
91
- }
92
- a[href]:focus + .d2l-card-footer-link-content > d2l-icon,
93
- a[href]:hover + .d2l-card-footer-link-content > d2l-icon {
94
- color: var(--d2l-color-celestine);
95
88
  }
96
- d2l-icon {
97
- height: 0.9rem;
98
- width: 0.9rem;
89
+ d2l-count-badge-icon {
90
+ text-align: initial;
99
91
  }
100
- .d2l-card-footer-link-secondary-text {
101
- border-radius: 0.75rem;
102
- box-shadow: 0 0 0 1px white;
103
- box-sizing: content-box;
104
- display: inline-block;
105
- font-size: 0.55rem;
106
- font-weight: 400;
107
- line-height: 100%;
108
- min-width: 0.5rem;
109
- padding: 2px;
110
- position: relative;
92
+ ::slotted(d2l-tooltip) {
93
+ left: calc(-50% + 11px) !important;
111
94
  }
112
- .d2l-card-footer-link-secondary-text-container {
113
- position: absolute;
114
- right: 1rem;
115
- top: 0;
116
- width: 1px;
117
- }
118
- :host([dir="rtl"]) .d2l-card-footer-link-secondary-text-container {
119
- left: 1rem;
120
- right: auto;
121
- }
122
- :host([secondary-text-type="notification"]) .d2l-card-footer-link-secondary-text {
123
- background-color: var(--d2l-color-carnelian-minus-1);
124
- border: 2px solid var(--d2l-color-carnelian-minus-1);
125
- color: white;
126
- }
127
- :host([secondary-text-type="count"]) .d2l-card-footer-link-secondary-text {
128
- background-color: var(--d2l-color-gypsum);
129
- border: 2px solid var(--d2l-color-gypsum);
130
- color: var(--d2l-color-ferrite);
131
- }
132
- [hidden].d2l-card-footer-link-secondary-text {
133
- display: none;
95
+ :host([dir="rtl"]) ::slotted(d2l-tooltip) {
96
+ left: 0;
97
+ right: calc(-50% + 11px) !important;
134
98
  }
135
99
  `];
136
100
  }
@@ -138,39 +102,48 @@ class CardFooterLink extends RtlMixin(LitElement) {
138
102
  constructor() {
139
103
  super();
140
104
  this.download = false;
141
- this.secondaryTextType = 'notification';
142
- this._secondaryTextHidden = true;
105
+ this.secondaryCountType = 'notification';
143
106
  }
144
107
 
145
108
  render() {
109
+ const noNumber = this.secondaryCount === undefined;
146
110
  return html`
147
- <a ?download="${this.download}"
111
+ <a @focus="${this._onFocus}"
112
+ @blur="${this._onBlur}"
113
+ ?download="${this.download}"
148
114
  href="${ifDefined(this.href)}"
149
115
  hreflang="${ifDefined(this.hreflang)}"
150
116
  rel="${ifDefined(this.rel)}"
151
117
  target="${ifDefined(this.target)}"
152
118
  type="${ifDefined(this.type)}">
153
119
  <span class="d2l-offscreen">${this.text}</span>
120
+ <d2l-count-badge-icon
121
+ aria-hidden="true"
122
+ icon="${this.icon}"
123
+ max-digits="${ifDefined(this.secondaryCountMaxDigits ? this.secondaryCountMaxDigits : undefined)}"
124
+ number="${noNumber ? 0 : this.secondaryCount}"
125
+ ?hide-zero="${noNumber}"
126
+ text="${this.text}"
127
+ type="${this._getType()}">
128
+ </d2l-count-badge-icon>
154
129
  </a>
155
- <div class="d2l-card-footer-link-content">
156
- <d2l-icon icon="${this.icon}"></d2l-icon>
157
- <div class="d2l-card-footer-link-secondary-text-container">
158
- <div class="d2l-card-footer-link-secondary-text" aria-hidden="true" ?hidden="${this._secondaryTextHidden}">${this.secondaryText}</div>
159
- </div>
160
- </div>
130
+ <slot name="tooltip"></slot>
161
131
  `;
162
132
  }
163
133
 
164
- updated(changedProperties) {
165
- super.updated(changedProperties);
166
- if (!changedProperties.has('secondaryText')) return;
167
- this._secondaryTextHidden = !(this.secondaryText && this.secondaryText.length > 0);
134
+ _getType() {
135
+ if (this.secondaryCountType === 'count') {
136
+ return this.secondaryCountType;
137
+ }
138
+ return 'notification';
139
+ }
140
+
141
+ _onBlur() {
142
+ this.shadowRoot.querySelector('d2l-count-badge-icon').forceFocusRing = false;
168
143
  }
169
144
 
170
- focus() {
171
- const elem = this.shadowRoot.querySelector('a');
172
- if (!elem) return;
173
- elem.focus();
145
+ _onFocus() {
146
+ this.shadowRoot.querySelector('d2l-count-badge-icon').forceFocusRing = true;
174
147
  }
175
148
 
176
149
  }
package/components/card/demo/card.html CHANGED
@@ -104,14 +104,18 @@
104
104
  <d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"></d2l-button-icon>
105
105
  <div slot="content"><div>Hydrology</div><d2l-card-content-meta>This is some extra meta data that will fill the content slot of the card.</d2l-card-content-meta></div>
106
106
  <div slot="footer">
107
- <d2l-card-footer-link id="googleDriveLink1" icon="tier1:google-drive" text="Google Drive" secondary-text="99+" href="https://www.google.ca/drive/"></d2l-card-footer-link>
108
- <d2l-tooltip for="googleDriveLink1">Go to Google Drive</d2l-tooltip>
109
- <d2l-card-footer-link id="rssFeedLink1" icon="tier1:rss" text="RSS Feed" secondary-text="1"></d2l-card-footer-link>
110
- <d2l-tooltip for="rssFeedLink1">RSS Feed</d2l-tooltip>
111
- <d2l-card-footer-link id="outcomesLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="5"></d2l-card-footer-link>
112
- <d2l-tooltip for="outcomesLink1">Outcomes</d2l-tooltip>
113
- <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-text="3"></d2l-card-footer-link>
114
- <d2l-tooltip position="top" style="width: 100%;" for="assignmentsLink1">You have 3 assignments due tomorrow.</d2l-tooltip>
107
+ <d2l-card-footer-link id="googleDriveLink1" icon="tier1:google-drive" text="Google Drive" secondary-count="100" href="https://www.google.ca/drive/">
108
+ <d2l-tooltip slot="tooltip" for="googleDriveLink1">Go to Google Drive</d2l-tooltip>
109
+ </d2l-card-footer-link>
110
+ <d2l-card-footer-link id="rssFeedLink1" icon="tier1:rss" text="RSS Feed" secondary-count="1">
111
+ <d2l-tooltip slot="tooltip" for="rssFeedLink1">RSS Feed</d2l-tooltip>
112
+ </d2l-card-footer-link>
113
+ <d2l-card-footer-link id="outcomesLink1" icon="tier1:outcomes" text="Outcomes" secondary-count="5">
114
+ <d2l-tooltip slot="tooltip" for="outcomesLink1">Outcomes</d2l-tooltip>
115
+ </d2l-card-footer-link>
116
+ <d2l-card-footer-link id="assignmentsLink1" icon="tier1:assignments" text="Assignments" secondary-count="3">
117
+ <d2l-tooltip slot="tooltip" position="top" style="width: 100%;" for="assignmentsLink1">You have 3 assignments due tomorrow.</d2l-tooltip>
118
+ </d2l-card-footer-link>
115
119
  </div>
116
120
  </d2l-card>
117
121
 
@@ -123,12 +127,15 @@
123
127
  <d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"></d2l-button-icon>
124
128
  <div slot="content">Grade 2</div>
125
129
  <div slot="footer">
126
- <d2l-card-footer-link id="googleDriveLink2" icon="tier1:google-drive" text="Google Drive" secondary-text="99+" href="https://www.google.ca/drive/"></d2l-card-footer-link>
127
- <d2l-tooltip for="googleDriveLink2">Go to Google Drive</d2l-tooltip>
128
- <d2l-card-footer-link id="rssFeedLink2" icon="tier1:rss" text="RSS Feed" secondary-text="1"></d2l-card-footer-link>
129
- <d2l-tooltip for="rssFeedLink2">RSS Feed</d2l-tooltip>
130
- <d2l-card-footer-link id="outcomesLink2" icon="tier1:outcomes" text="Outcomes" secondary-text="5"></d2l-card-footer-link>
131
- <d2l-tooltip for="outcomesLink2">Outcomes</d2l-tooltip>
130
+ <d2l-card-footer-link id="googleDriveLink2" icon="tier1:google-drive" text="Google Drive" secondary-count="100" href="https://www.google.ca/drive/">
131
+ <d2l-tooltip slot="tooltip" for="googleDriveLink2">Go to Google Drive</d2l-tooltip>
132
+ </d2l-card-footer-link>
133
+ <d2l-card-footer-link id="rssFeedLink2" icon="tier1:rss" text="RSS Feed" secondary-count="1">
134
+ <d2l-tooltip slot="tooltip" for="rssFeedLink2">RSS Feed</d2l-tooltip>
135
+ </d2l-card-footer-link>
136
+ <d2l-card-footer-link id="outcomesLink2" icon="tier1:outcomes" text="Outcomes" secondary-count="5">
137
+ <d2l-tooltip slot="tooltip" for="outcomesLink2">Outcomes</d2l-tooltip>
138
+ </d2l-card-footer-link>
132
139
  </div>
133
140
  </d2l-card>
134
141
 
@@ -192,14 +199,18 @@
192
199
  <d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"></d2l-button-icon>
193
200
  <div slot="content"><div>Hydrology</div><d2l-card-content-meta>This is some extra meta data that will fill the content slot of the card.</d2l-card-content-meta></div>
194
201
  <div slot="footer">
195
- <d2l-card-footer-link id="googleDriveLink3" icon="tier1:google-drive" text="Google Drive" secondary-text="99+" href="https://www.google.ca/drive/"></d2l-card-footer-link>
196
- <d2l-tooltip for="googleDriveLink3">Go to Google Drive</d2l-tooltip>
197
- <d2l-card-footer-link id="rssFeedLink3" icon="tier1:rss" text="RSS Feed" secondary-text="1"></d2l-card-footer-link>
198
- <d2l-tooltip for="rssFeedLink3">RSS Feed</d2l-tooltip>
199
- <d2l-card-footer-link id="outcomesLink3" icon="tier1:outcomes" text="Outcomes" secondary-text="5"></d2l-card-footer-link>
200
- <d2l-tooltip for="outcomesLink3">Outcomes</d2l-tooltip>
201
- <d2l-card-footer-link id="assignmentsLink3" icon="tier1:assignments" text="Assignments" secondary-text="3"></d2l-card-footer-link>
202
- <d2l-tooltip position="top" style="width: 100%;" for="assignmentsLink3">You have 3 assignments due tomorrow.</d2l-tooltip>
202
+ <d2l-card-footer-link id="googleDriveLink3" icon="tier1:google-drive" text="Google Drive" secondary-count="100" href="https://www.google.ca/drive/">
203
+ <d2l-tooltip slot="tooltip" for="googleDriveLink3">Go to Google Drive</d2l-tooltip>
204
+ </d2l-card-footer-link>
205
+ <d2l-card-footer-link id="rssFeedLink3" icon="tier1:rss" text="RSS Feed" secondary-count="1">
206
+ <d2l-tooltip slot="tooltip" for="rssFeedLink3">RSS Feed</d2l-tooltip>
207
+ </d2l-card-footer-link>
208
+ <d2l-card-footer-link id="outcomesLink3" icon="tier1:outcomes" text="Outcomes" secondary-count="5">
209
+ <d2l-tooltip slot="tooltip" for="outcomesLink3">Outcomes</d2l-tooltip>
210
+ </d2l-card-footer-link>
211
+ <d2l-card-footer-link id="assignmentsLink3" icon="tier1:assignments" text="Assignments" secondary-count="3">
212
+ <d2l-tooltip slot="tooltip" position="top" style="width: 100%;" for="assignmentsLink3">You have 3 assignments due tomorrow.</d2l-tooltip>
213
+ </d2l-card-footer-link>
203
214
  </div>
204
215
  </d2l-card>
205
216
 
@@ -221,12 +232,15 @@
221
232
  <d2l-button-icon slot="actions" translucent text="unpin" icon="tier1:pin-filled"></d2l-button-icon>
222
233
  <div slot="content">Grade 2</div>
223
234
  <div slot="footer">
224
- <d2l-card-footer-link id="googleDriveLink4" icon="tier1:google-drive" text="Google Drive" secondary-text-type="count" secondary-text="99+" href="https://www.google.ca/drive/"></d2l-card-footer-link>
225
- <d2l-tooltip for="googleDriveLink4">Go to Google Drive</d2l-tooltip>
226
- <d2l-card-footer-link id="rssFeedLink4" icon="tier1:rss" text="RSS Feed" secondary-text-type="count" secondary-text="1"></d2l-card-footer-link>
227
- <d2l-tooltip for="rssFeedLink4">RSS Feed</d2l-tooltip>
228
- <d2l-card-footer-link id="outcomesLink4" icon="tier1:outcomes" text="Outcomes" secondary-text-type="count" secondary-text="5"></d2l-card-footer-link>
229
- <d2l-tooltip for="outcomesLink4">Outcomes</d2l-tooltip>
235
+ <d2l-card-footer-link id="googleDriveLink4" icon="tier1:google-drive" text="Google Drive" secondary-count-type="count" secondary-count="100" href="https://www.google.ca/drive/">
236
+ <d2l-tooltip slot="tooltip" for="googleDriveLink4">Go to Google Drive</d2l-tooltip>
237
+ </d2l-card-footer-link>
238
+ <d2l-card-footer-link id="rssFeedLink4" icon="tier1:rss" text="RSS Feed" secondary-count-type="count" secondary-count="1">
239
+ <d2l-tooltip slot="tooltip" for="rssFeedLink4">RSS Feed</d2l-tooltip>
240
+ </d2l-card-footer-link>
241
+ <d2l-card-footer-link id="outcomesLink4" icon="tier1:outcomes" text="Outcomes" secondary-count-type="count" secondary-count="5">
242
+ <d2l-tooltip slot="tooltip" for="outcomesLink4">Outcomes</d2l-tooltip>
243
+ </d2l-card-footer-link>
230
244
  </div>
231
245
  </d2l-card>
232
246
 
package/components/count-badge/README.md CHANGED
@@ -28,6 +28,7 @@ The `d2l-count-badge` element is a web component to display a number count, eith
28
28
  | `tab-stop`, default: `false` | Boolean | Optionally choose to make the badge a tab stop. |
29
29
  | `announce-changes`, default: `false` | Boolean | Optionally choose to announce changes to the badge with an aria-live region. If the text property is changed, the text will be read by screen-readers. |
30
30
  | `has-tooltip`, default: `false` | Boolean | Optionally choose to have a tooltip below the badge. |
31
+ | `focus-ring`, default: `false` | Boolean | Optionally force a focus ring around the badge. This property can be used to highlight the badge when the parent element is focused. |
31
32
 
32
33
  ### Accessibility Properties
33
34
 
@@ -69,6 +70,7 @@ The `d2l-count-badge-icon` element is a web component to display a number count,
69
70
  | `tab-stop`, default: `false` | Boolean | Optionally choose to make the badge a tab stop. |
70
71
  | `announce-changes`, default: `false` | Boolean | Optionally choose to announce changes to the badge with an aria-live region. If the text property is changed, the text will be read by screen-readers. |
71
72
  | `has-tooltip`, default: `false` | Boolean | Optionally choose to have a tooltip below the badge. |
73
+ | `focus-ring`, default: `false` | Boolean | Optionally force a focus ring around the badge. This property can be used to highlight the badge when the parent element is focused. |
72
74
 
73
75
  ### Accessibility Properties
74
76
 
package/components/count-badge/count-badge-icon.js CHANGED
@@ -23,6 +23,7 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
23
23
  static get styles() {
24
24
  return [countBadgeStyles, css`
25
25
  :host(.focus-visible) d2l-icon,
26
+ :host([focus-ring]) d2l-icon,
26
27
  d2l-icon.focus-visible {
27
28
  box-shadow: 0 0 0 2px var(--d2l-color-celestine);
28
29
  outline: none;
@@ -47,13 +48,13 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
47
48
  margin-top: -0.55rem;
48
49
  }
49
50
 
50
- :host([icon^="tier1:"]) {
51
+ :host([icon*="tier1:"]) {
51
52
  --d2l-count-badge-icon-height: 18px;
52
53
  }
53
- :host([icon^="tier2:"]) {
54
+ :host([icon*="tier2:"]) {
54
55
  --d2l-count-badge-icon-height: 24px;
55
56
  }
56
- :host([icon^="tier3:"]) {
57
+ :host([icon*="tier3:"]) {
57
58
  --d2l-count-badge-icon-height: 30px;
58
59
  }
59
60
 
@@ -76,6 +77,7 @@ class CountBadgeIcon extends CountBadgeMixin(LitElement) {
76
77
  render() {
77
78
  const numberPadding = this.size === 'small' ? '0.55rem' : '0.7rem';
78
79
  const numberStyles = {
80
+ border: '2px solid white',
79
81
  position: 'relative',
80
82
  left: this.dir === 'rtl' ? 0 : 'var(--d2l-count-badge-icon-padding)',
81
83
  right: this.dir === 'rtl' ? 'var(--d2l-count-badge-icon-padding)' : 0,
package/components/count-badge/count-badge-mixin.js CHANGED
@@ -19,7 +19,6 @@ export const countBadgeStyles = [offscreenStyles, css`
19
19
  }
20
20
 
21
21
  .d2l-count-badge-number {
22
- border: 2px solid white;
23
22
  font-weight: bold;
24
23
  }
25
24
 
@@ -62,6 +61,15 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(R
62
61
  type: Boolean,
63
62
  attribute: 'announce-changes'
64
63
  },
64
+ /**
65
+ * Optionally choose to force the focus ring around the badge. Defaults to false.
66
+ * @type {boolean}
67
+ */
68
+ forceFocusRing: {
69
+ type: Boolean,
70
+ attribute: 'focus-ring',
71
+ reflect: true
72
+ },
65
73
  /**
66
74
  * Optionally add a tooltip on the badge. Defaults to false.
67
75
  * @type {boolean}
@@ -133,6 +141,7 @@ export const CountBadgeMixin = superclass => class extends LocalizeCoreElement(R
133
141
  constructor() {
134
142
  super();
135
143
  this.announceChanges = false;
144
+ this.forceFocusRing = false;
136
145
  this.hasTooltip = false;
137
146
  this.hideZero = false;
138
147
  this.size = 'small';
package/components/count-badge/count-badge.js CHANGED
@@ -9,10 +9,15 @@ class CountBadge extends CountBadgeMixin(LitElement) {
9
9
  static get styles() {
10
10
  return [countBadgeStyles, css`
11
11
  :host(.focus-visible) .d2l-count-badge-wrapper,
12
+ :host([focus-ring]) .d2l-count-badge-wrapper,
12
13
  .d2l-count-badge-wrapper.focus-visible {
13
14
  box-shadow: 0 0 0 2px var(--d2l-color-celestine);
14
15
  }
15
16
 
17
+ .d2l-count-badge-wrapper {
18
+ border: 2px solid transparent;
19
+ }
20
+
16
21
  :host([size="small"]) .d2l-count-badge-wrapper {
17
22
  border-radius: 0.65rem;
18
23
  outline: none;
package/components/html-block/html-block.js CHANGED
@@ -3,6 +3,104 @@ import { css, LitElement } from 'lit-element/lit-element.js';
3
3
  import { htmlBlockMathRenderer } from '../../helpers/mathjax.js';
4
4
  import { requestInstance } from '../../mixins/provider-mixin.js';
5
5
 
6
+ export const htmlBlockContentStyles = css`
7
+ h1, h2, h3, h4, h5, h6, b, strong, b *, strong * {
8
+ font-weight: bold;
9
+ }
10
+ h1 {
11
+ font-size: 2em;
12
+ line-height: 37px;
13
+ margin: 21.43px 0;
14
+ }
15
+ h2 {
16
+ font-size: 1.5em;
17
+ line-height: 27px;
18
+ margin: 19.92px 0;
19
+ }
20
+ h3 {
21
+ font-size: 1.2em;
22
+ line-height: 23px;
23
+ margin: 18.72px 0;
24
+ }
25
+ h4 {
26
+ font-size: 1em;
27
+ line-height: 20px;
28
+ margin: 21.28px 0;
29
+ }
30
+ h5 {
31
+ font-size: 0.83em;
32
+ line-height: 16px;
33
+ margin: 22.13px 0;
34
+ }
35
+ h6 {
36
+ font-size: 0.67em;
37
+ line-height: 13px;
38
+ margin: 24.97px 0;
39
+ }
40
+ pre {
41
+ font-family: Monospace;
42
+ font-size: 13px;
43
+ margin: 13px 0;
44
+ }
45
+ p {
46
+ margin: 0.5em 0 1em 0;
47
+ }
48
+ ul, ol {
49
+ list-style-position: outside;
50
+ margin: 1em 0;
51
+ padding-left: 3em;
52
+ }
53
+ ul, ul[type="disc"] {
54
+ list-style-type: disc;
55
+ }
56
+ ul ul, ul ol,
57
+ ol ul, ol ol {
58
+ margin-bottom: 0;
59
+ margin-top: 0;
60
+ }
61
+ ul ul, ol ul, ul[type="circle"] {
62
+ list-style-type: circle;
63
+ }
64
+ ul ul ul, ul ol ul,
65
+ ol ul ul, ol ol ul,
66
+ ul[type="square"] {
67
+ list-style-type: square;
68
+ }
69
+ a,
70
+ a:visited,
71
+ a:link,
72
+ a:active {
73
+ color: var(--d2l-color-celestine);
74
+ cursor: pointer;
75
+ text-decoration: none;
76
+ }
77
+ a:hover,
78
+ a:focus {
79
+ color: var(--d2l-color-celestine-minus-1);
80
+ outline-width: 0;
81
+ text-decoration: underline;
82
+ }
83
+ @media print {
84
+ a,
85
+ a:visited,
86
+ a:link,
87
+ a:active {
88
+ color: var(--d2l-color-ferrite);
89
+ }
90
+ }
91
+ mjx-assistive-mml math {
92
+ position: absolute;
93
+ }
94
+ :host([dir="rtl"]) {
95
+ text-align: right;
96
+ }
97
+ :host([dir="rtl"]) ul,
98
+ :host([dir="rtl"]) ol {
99
+ padding-left: 0;
100
+ padding-right: 3em;
101
+ }
102
+ `;
103
+
6
104
  let renderers;
7
105
 
8
106
  const getRenderers = () => {
@@ -19,7 +117,7 @@ const getRenderers = () => {
19
117
  class HtmlBlock extends LitElement {
20
118
 
21
119
  static get styles() {
22
- return css`
120
+ return [ htmlBlockContentStyles, css`
23
121
  :host {
24
122
  display: block;
25
123
  overflow-wrap: break-word;
@@ -34,102 +132,7 @@ class HtmlBlock extends LitElement {
34
132
  ::slotted(*) {
35
133
  display: none;
36
134
  }
37
- h1, h2, h3, h4, h5, h6, b, strong, b *, strong * {
38
- font-weight: bold;
39
- }
40
- h1 {
41
- font-size: 2em;
42
- line-height: 37px;
43
- margin: 21.43px 0;
44
- }
45
- h2 {
46
- font-size: 1.5em;
47
- line-height: 27px;
48
- margin: 19.92px 0;
49
- }
50
- h3 {
51
- font-size: 1.2em;
52
- line-height: 23px;
53
- margin: 18.72px 0;
54
- }
55
- h4 {
56
- font-size: 1em;
57
- line-height: 20px;
58
- margin: 21.28px 0;
59
- }
60
- h5 {
61
- font-size: 0.83em;
62
- line-height: 16px;
63
- margin: 22.13px 0;
64
- }
65
- h6 {
66
- font-size: 0.67em;
67
- line-height: 13px;
68
- margin: 24.97px 0;
69
- }
70
- pre {
71
- font-family: Monospace;
72
- font-size: 13px;
73
- margin: 13px 0;
74
- }
75
- p {
76
- margin: 0.5em 0 1em 0;
77
- }
78
- ul, ol {
79
- list-style-position: outside;
80
- margin: 1em 0;
81
- padding-left: 3em;
82
- }
83
- ul, ul[type="disc"] {
84
- list-style-type: disc;
85
- }
86
- ul ul, ul ol,
87
- ol ul, ol ol {
88
- margin-bottom: 0;
89
- margin-top: 0;
90
- }
91
- ul ul, ol ul, ul[type="circle"] {
92
- list-style-type: circle;
93
- }
94
- ul ul ul, ul ol ul,
95
- ol ul ul, ol ol ul,
96
- ul[type="square"] {
97
- list-style-type: square;
98
- }
99
- a,
100
- a:visited,
101
- a:link,
102
- a:active {
103
- color: var(--d2l-color-celestine);
104
- cursor: pointer;
105
- text-decoration: none;
106
- }
107
- a:hover,
108
- a:focus {
109
- color: var(--d2l-color-celestine-minus-1);
110
- outline-width: 0;
111
- text-decoration: underline;
112
- }
113
- @media print {
114
- a,
115
- a:visited,
116
- a:link,
117
- a:active {
118
- color: var(--d2l-color-ferrite);
119
- }
120
- }
121
- mjx-assistive-mml math {
122
- position: absolute;
123
- }
124
- :host([dir="rtl"]) {
125
- text-align: right;
126
- }
127
- :host([dir="rtl"]) ul,
128
- :host([dir="rtl"]) ol {
129
- padding-left: 0;
130
- padding-right: 3em;
131
- }
132
- `;
135
+ `];
133
136
  }
134
137
 
135
138
  disconnectedCallback() {
package/custom-elements.json CHANGED
@@ -717,7 +717,7 @@
717
717
  },
718
718
  {
719
719
  "name": "icon",
720
- "description": "REQUIRED: Preset icon key (e.g. \"tier1:gear\")",
720
+ "description": "REQUIRED: Preset icon key (e.g. \"tier1:gear\"). Must be a tier 1 icon.",
721
721
  "type": "string"
722
722
  },
723
723
  {
@@ -726,8 +726,13 @@
726
726
  "type": "string"
727
727
  },
728
728
  {
729
- "name": "secondary-text",
730
- "description": "Secondary text to display as a superscript on the icon",
729
+ "name": "secondary-count",
730
+ "description": "Secondary count to display as a count bubble on the icon",
731
+ "type": "number"
732
+ },
733
+ {
734
+ "name": "secondary-count-max-digits",
735
+ "description": "Maximum digits to display in the secondary count. Defaults to no limit",
731
736
  "type": "string"
732
737
  },
733
738
  {
@@ -752,9 +757,9 @@
752
757
  "default": "false"
753
758
  },
754
759
  {
755
- "name": "secondary-text-type",
756
- "description": "Controls the style of the secondary text bubble; options are 'notification' and 'count'",
757
- "type": "string",
760
+ "name": "secondary-count-type",
761
+ "description": "Controls the style of the secondary count bubble",
762
+ "type": "'count'|'notification'",
758
763
  "default": "\"notification\""
759
764
  }
760
765
  ],
@@ -774,7 +779,7 @@
774
779
  {
775
780
  "name": "icon",
776
781
  "attribute": "icon",
777
- "description": "REQUIRED: Preset icon key (e.g. \"tier1:gear\")",
782
+ "description": "REQUIRED: Preset icon key (e.g. \"tier1:gear\"). Must be a tier 1 icon.",
778
783
  "type": "string"
779
784
  },
780
785
  {
@@ -784,9 +789,15 @@
784
789
  "type": "string"
785
790
  },
786
791
  {
787
- "name": "secondaryText",
788
- "attribute": "secondary-text",
789
- "description": "Secondary text to display as a superscript on the icon",
792
+ "name": "secondaryCount",
793
+ "attribute": "secondary-count",
794
+ "description": "Secondary count to display as a count bubble on the icon",
795
+ "type": "number"
796
+ },
797
+ {
798
+ "name": "secondaryCountMaxDigits",
799
+ "attribute": "secondary-count-max-digits",
800
+ "description": "Maximum digits to display in the secondary count. Defaults to no limit",
790
801
  "type": "string"
791
802
  },
792
803
  {
@@ -815,12 +826,18 @@
815
826
  "default": "false"
816
827
  },
817
828
  {
818
- "name": "secondaryTextType",
819
- "attribute": "secondary-text-type",
820
- "description": "Controls the style of the secondary text bubble; options are 'notification' and 'count'",
821
- "type": "string",
829
+ "name": "secondaryCountType",
830
+ "attribute": "secondary-count-type",
831
+ "description": "Controls the style of the secondary count bubble",
832
+ "type": "'count'|'notification'",
822
833
  "default": "\"notification\""
823
834
  }
835
+ ],
836
+ "slots": [
837
+ {
838
+ "name": "tooltip",
839
+ "description": "slot for the link tooltip"
840
+ }
824
841
  ]
825
842
  },
826
843
  {
@@ -1029,6 +1046,12 @@
1029
1046
  "type": "boolean",
1030
1047
  "default": "false"
1031
1048
  },
1049
+ {
1050
+ "name": "focus-ring",
1051
+ "description": "Optionally choose to force the focus ring around the badge. Defaults to false.",
1052
+ "type": "boolean",
1053
+ "default": "false"
1054
+ },
1032
1055
  {
1033
1056
  "name": "has-tooltip",
1034
1057
  "description": "Optionally add a tooltip on the badge. Defaults to false.",
@@ -1092,6 +1115,13 @@
1092
1115
  "type": "boolean",
1093
1116
  "default": "false"
1094
1117
  },
1118
+ {
1119
+ "name": "forceFocusRing",
1120
+ "attribute": "focus-ring",
1121
+ "description": "Optionally choose to force the focus ring around the badge. Defaults to false.",
1122
+ "type": "boolean",
1123
+ "default": "false"
1124
+ },
1095
1125
  {
1096
1126
  "name": "hasTooltip",
1097
1127
  "attribute": "has-tooltip",
@@ -1156,6 +1186,12 @@
1156
1186
  "type": "boolean",
1157
1187
  "default": "false"
1158
1188
  },
1189
+ {
1190
+ "name": "focus-ring",
1191
+ "description": "Optionally choose to force the focus ring around the badge. Defaults to false.",
1192
+ "type": "boolean",
1193
+ "default": "false"
1194
+ },
1159
1195
  {
1160
1196
  "name": "has-tooltip",
1161
1197
  "description": "Optionally add a tooltip on the badge. Defaults to false.",
@@ -1213,6 +1249,13 @@
1213
1249
  "type": "boolean",
1214
1250
  "default": "false"
1215
1251
  },
1252
+ {
1253
+ "name": "forceFocusRing",
1254
+ "attribute": "focus-ring",
1255
+ "description": "Optionally choose to force the focus ring around the badge. Defaults to false.",
1256
+ "type": "boolean",
1257
+ "default": "false"
1258
+ },
1216
1259
  {
1217
1260
  "name": "hasTooltip",
1218
1261
  "attribute": "has-tooltip",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "1.190.0",
3
+ "version": "1.192.0",
4
4
  "description": "A collection of accessible, free, open-source web components for building Brightspace applications",
5
5
  "repository": "https://github.com/BrightspaceUI/core.git",
6
6
  "publishConfig": {