@brightspace-ui/core 2.145.1 → 2.146.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 (6) hide show
  1. package/components/calendar/calendar.js +16 -16
  2. package/components/card/README.md +47 -12
  3. package/components/empty-state/empty-state-illustrated.js +4 -2
  4. package/components/inputs/input-date.js +4 -4
  5. package/helpers/dateTime.js +1 -7
  6. package/package.json +1 -1
package/components/calendar/calendar.js CHANGED
@@ -2,10 +2,10 @@ import '../button/button-icon.js';
2
2
  import '../colors/colors.js';
3
3
  import { bodySmallStyles, heading4Styles } from '../typography/styles.js';
4
4
  import { css, html, LitElement } from 'lit';
5
- import { formatDateInISO, getClosestValidDate, getDateFromDateObj, getDateFromISODate, getDateTimeDescriptorShared, getToday, isDateInRange } from '../../helpers/dateTime.js';
5
+ import { formatDate, getDateTimeDescriptor } from '@brightspace-ui/intl/lib/dateTime.js';
6
+ import { formatDateInISO, getClosestValidDate, getDateFromDateObj, getDateFromISODate, getToday, isDateInRange } from '../../helpers/dateTime.js';
6
7
  import { classMap } from 'lit/directives/class-map.js';
7
8
  import { findComposedAncestor } from '../../helpers/dom.js';
8
- import { formatDate } from '@brightspace-ui/intl/lib/dateTime.js';
9
9
  import { getUniqueId } from '../../helpers/uniqueId.js';
10
10
  import { ifDefined } from 'lit/directives/if-defined.js';
11
11
  import { LocalizeCoreElement } from '../../helpers/localize-core-element.js';
@@ -29,15 +29,13 @@ const keyCodes = {
29
29
  const reduceMotion = matchMedia('(prefers-reduced-motion: reduce)').matches;
30
30
 
31
31
  let calendarData;
32
- function getCalendarData(refresh) {
33
- if (!calendarData) {
34
- calendarData = {};
35
- calendarData.descriptor = getDateTimeDescriptorShared(refresh);
36
- calendarData.firstDayOfWeek = calendarData.descriptor.calendar.firstDayOfWeek;
37
- calendarData.daysOfWeekIndex = [];
38
- for (let i = calendarData.firstDayOfWeek; i < calendarData.firstDayOfWeek + daysInWeek; i++) {
39
- calendarData.daysOfWeekIndex.push(i % daysInWeek);
40
- }
32
+ function getCalendarData() {
33
+ calendarData = {};
34
+ calendarData.descriptor = getDateTimeDescriptor();
35
+ calendarData.firstDayOfWeek = calendarData.descriptor.calendar.firstDayOfWeek;
36
+ calendarData.daysOfWeekIndex = [];
37
+ for (let i = calendarData.firstDayOfWeek; i < calendarData.firstDayOfWeek + daysInWeek; i++) {
38
+ calendarData.daysOfWeekIndex.push(i % daysInWeek);
41
39
  }
42
40
  return calendarData;
43
41
  }
@@ -339,8 +337,8 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
339
337
  background-color: var(--d2l-color-gypsum);
340
338
  }
341
339
 
342
- td:focus button:not(.d2l-calendar-date-selected):hover,
343
- td:focus button:not(.d2l-calendar-date-selected).d2l-calendar-date-hover {
340
+ td:focus button:not(.d2l-calendar-date-selected):not(:disabled):hover,
341
+ td:focus button:not(.d2l-calendar-date-selected):not(:disabled).d2l-calendar-date-hover {
344
342
  box-shadow: 0 0 0 2px var(--d2l-color-gypsum), 0 0 0 4px var(--d2l-color-celestine);
345
343
  transition: none;
346
344
  }
@@ -351,8 +349,11 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
351
349
 
352
350
  td:focus .d2l-calendar-date {
353
351
  border-radius: 0.16rem;
354
- box-shadow: 0 0 0 2px white, 0 0 0 4px var(--d2l-color-celestine);
355
352
  padding: 0;
353
+ }
354
+
355
+ td:focus .d2l-calendar-date:not(:disabled) {
356
+ box-shadow: 0 0 0 2px white, 0 0 0 4px var(--d2l-color-celestine);
356
357
  transition: none;
357
358
  }
358
359
 
@@ -423,8 +424,7 @@ class Calendar extends LocalizeCoreElement(RtlMixin(LitElement)) {
423
424
  this.addEventListener('blur', () => this._isInitialFocusDate = true);
424
425
 
425
426
  this.addEventListener('d2l-localize-resources-change', () => {
426
- calendarData = null;
427
- getCalendarData(true);
427
+ getCalendarData();
428
428
  this.requestUpdate();
429
429
  });
430
430
 
package/components/card/README.md CHANGED
@@ -9,14 +9,21 @@ Used to surface pertinent information, cards make it easy for users to browse in
9
9
  <script type="module">
10
10
  import '@brightspace-ui/core/components/card/card.js';
11
11
  import '@brightspace-ui/core/components/card/card-footer-link.js';
12
+ import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
13
+ import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
12
14
  import '@brightspace-ui/core/components/tooltip/tooltip.js';
13
15
  </script>
14
16
 
15
- <d2l-card align-center text="Biology" align-center style="height: 320px; width: 245px;">
17
+ <d2l-card align-center text="Biology" align-center style="width: 245px;">
16
18
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/7905e442-f009-46f6-8586-2c273a7c0158/banner-narrow-low-density-max-size.jpg">
17
19
  <div slot="content">
18
20
  <div>Biology</div>
19
- <d2l-card-content-meta>Science • Grade 11</d2l-card-content-meta>
21
+ <d2l-card-content-meta>
22
+ <d2l-object-property-list>
23
+ <d2l-object-property-list-item text="Science"></d2l-object-property-list-item>
24
+ <d2l-object-property-list-item text="Grade 11"></d2l-object-property-list-item>
25
+ </d2l-object-property-list>
26
+ </d2l-card-content-meta>
20
27
  </div>
21
28
  <div slot="footer">
22
29
  <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
@@ -56,6 +63,8 @@ Cards are composed of 3 sections. Each card will have a content section but is n
56
63
  <script type="module">
57
64
  import '@brightspace-ui/core/components/card/card.js';
58
65
  import '@brightspace-ui/core/components/card/card-footer-link.js';
66
+ import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
67
+ import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
59
68
  import '@brightspace-ui/core/components/tooltip/tooltip.js';
60
69
  </script>
61
70
 
@@ -78,18 +87,23 @@ Cards are composed of 3 sections. Each card will have a content section but is n
78
87
  <div id="header" class="active" style="height: 155px;">
79
88
  Header (optional)
80
89
  </div>
81
- <div id="content" style="height: 115px;">
90
+ <div id="content" style="height: 105px;">
82
91
  Content (required)
83
92
  </div>
84
93
  <div id="footer">
85
94
  Footer (optional)
86
95
  </div>
87
96
  </div>
88
- <d2l-card align-center text="Biology" align-center style="height: 320px; width: 245px;">
97
+ <d2l-card align-center text="Biology" align-center style="width: 245px;">
89
98
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/7905e442-f009-46f6-8586-2c273a7c0158/banner-narrow-low-density-max-size.jpg">
90
99
  <div slot="content">
91
100
  <div>Biology</div>
92
- <d2l-card-content-meta>Science • Grade 11</d2l-card-content-meta>
101
+ <d2l-card-content-meta>
102
+ <d2l-object-property-list>
103
+ <d2l-object-property-list-item text="Science"></d2l-object-property-list-item>
104
+ <d2l-object-property-list-item text="Grade 11"></d2l-object-property-list-item>
105
+ </d2l-object-property-list>
106
+ </d2l-card-content-meta>
93
107
  </div>
94
108
  <div slot="footer">
95
109
  <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
@@ -112,14 +126,21 @@ The `d2l-card` element is a container that provides specific layout using severa
112
126
  <script type="module">
113
127
  import '@brightspace-ui/core/components/card/card.js';
114
128
  import '@brightspace-ui/core/components/card/card-footer-link.js';
129
+ import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
130
+ import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
115
131
  import '@brightspace-ui/core/components/tooltip/tooltip.js';
116
132
  </script>
117
133
 
118
- <d2l-card align-center text="Biology" align-center href="#" style="height: 320px; width: 245px;">
134
+ <d2l-card align-center text="Biology" align-center href="#" style="width: 245px;">
119
135
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/7905e442-f009-46f6-8586-2c273a7c0158/banner-narrow-low-density-max-size.jpg">
120
136
  <div slot="content">
121
137
  <div>Biology</div>
122
- <d2l-card-content-meta>Science • Grade 11</d2l-card-content-meta>
138
+ <d2l-card-content-meta>
139
+ <d2l-object-property-list>
140
+ <d2l-object-property-list-item text="Science"></d2l-object-property-list-item>
141
+ <d2l-object-property-list-item text="Grade 11"></d2l-object-property-list-item>
142
+ </d2l-object-property-list>
143
+ </d2l-card-content-meta>
123
144
  </div>
124
145
  <div slot="footer">
125
146
  <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
@@ -171,7 +192,7 @@ The `d2l-card-content-title` element is a helper for providing layout/style for
171
192
  import '@brightspace-ui/core/components/card/card-content-title.js';
172
193
  </script>
173
194
 
174
- <d2l-card align-center text="Biology" align-center href="#" style="height: 320px; width: 245px;">
195
+ <d2l-card align-center text="Biology" align-center href="#" style="width: 245px;">
175
196
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/7905e442-f009-46f6-8586-2c273a7c0158/banner-narrow-low-density-max-size.jpg">
176
197
  <div slot="content">
177
198
  <d2l-card-content-title>Biology</d2l-card-content-title>
@@ -197,13 +218,20 @@ The `d2l-card-content-meta` element is a helper for providing layout/style for a
197
218
  import '@brightspace-ui/core/components/card/card.js';
198
219
  import '@brightspace-ui/core/components/card/card-content-meta.js';
199
220
  import '@brightspace-ui/core/components/card/card-footer-link.js';
221
+ import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
222
+ import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
200
223
  import '@brightspace-ui/core/components/tooltip/tooltip.js';
201
224
  </script>
202
- <d2l-card align-center text="Biology" align-center href="#" style="height: 320px; width: 245px;">
225
+ <d2l-card align-center text="Biology" align-center href="#" style="width: 245px;">
203
226
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/7905e442-f009-46f6-8586-2c273a7c0158/banner-narrow-low-density-max-size.jpg">
204
227
  <div slot="content">
205
228
  <div>Biology</div>
206
- <d2l-card-content-meta>Science • Grade 11</d2l-card-content-meta>
229
+ <d2l-card-content-meta>
230
+ <d2l-object-property-list>
231
+ <d2l-object-property-list-item text="Science"></d2l-object-property-list-item>
232
+ <d2l-object-property-list-item text="Grade 11"></d2l-object-property-list-item>
233
+ </d2l-object-property-list>
234
+ </d2l-card-content-meta>
207
235
  </div>
208
236
  <div slot="footer">
209
237
  <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
@@ -225,14 +253,21 @@ The `d2l-card-footer-link` element is an icon link that can be placed in the `fo
225
253
  <script type="module">
226
254
  import '@brightspace-ui/core/components/card/card.js';
227
255
  import '@brightspace-ui/core/components/card/card-footer-link.js';
256
+ import '@brightspace-ui/core/components/object-property-list/object-property-list.js';
257
+ import '@brightspace-ui/core/components/object-property-list/object-property-list-item.js';
228
258
  import '@brightspace-ui/core/components/tooltip/tooltip.js';
229
259
  </script>
230
260
 
231
- <d2l-card align-center text="Biology" align-center href="#" style="height: 320px; width: 245px;">
261
+ <d2l-card align-center text="Biology" align-center href="#" style="width: 245px;">
232
262
  <img slot="header" alt="" style="display: block; width: 100%;" src="https://s.brightspace.com/course-images/images/7905e442-f009-46f6-8586-2c273a7c0158/banner-narrow-low-density-max-size.jpg">
233
263
  <div slot="content">
234
264
  <div>Biology</div>
235
- <d2l-card-content-meta>Science • Grade 11</d2l-card-content-meta>
265
+ <d2l-card-content-meta>
266
+ <d2l-object-property-list>
267
+ <d2l-object-property-list-item text="Science"></d2l-object-property-list-item>
268
+ <d2l-object-property-list-item text="Grade 11"></d2l-object-property-list-item>
269
+ </d2l-object-property-list>
270
+ </d2l-card-content-meta>
236
271
  </div>
237
272
  <div slot="footer">
238
273
  <d2l-card-footer-link id="discussionsLink1" icon="tier1:outcomes" text="Outcomes" secondary-text="2">
package/components/empty-state/empty-state-illustrated.js CHANGED
@@ -120,8 +120,10 @@ class EmptyStateIllustrated extends LitElement {
120
120
  _onResize(entries) {
121
121
  if (!entries || entries.length === 0) return;
122
122
  const entry = entries[0];
123
- this._contentHeight = Math.min(entry.contentRect.right / illustrationAspectRatio, 330);
124
- this._titleSmall = entry.contentRect.right <= 615;
123
+ requestAnimationFrame(() => {
124
+ this._contentHeight = Math.min(entry.contentRect.right / illustrationAspectRatio, 330);
125
+ this._titleSmall = entry.contentRect.right <= 615;
126
+ });
125
127
  }
126
128
 
127
129
  _validateAttributes() {
package/components/inputs/input-date.js CHANGED
@@ -6,8 +6,8 @@ import '../icons/icon.js';
6
6
  import '../tooltip/tooltip.js';
7
7
  import './input-text.js';
8
8
  import { css, html, LitElement } from 'lit';
9
- import { formatDate, parseDate } from '@brightspace-ui/intl/lib/dateTime.js';
10
- import { formatDateInISO, getDateFromISODate, getDateTimeDescriptorShared, getToday } from '../../helpers/dateTime.js';
9
+ import { formatDate, getDateTimeDescriptor, parseDate } from '@brightspace-ui/intl/lib/dateTime.js';
10
+ import { formatDateInISO, getDateFromISODate, getToday } from '../../helpers/dateTime.js';
11
11
  import { FocusMixin } from '../../mixins/focus/focus-mixin.js';
12
12
  import { FormElementMixin } from '../form/form-element-mixin.js';
13
13
  import { getUniqueId } from '../../helpers/uniqueId.js';
@@ -165,7 +165,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
165
165
  this._showInfoTooltip = true;
166
166
  this._shownValue = '';
167
167
 
168
- this._dateTimeDescriptor = getDateTimeDescriptorShared();
168
+ this._dateTimeDescriptor = getDateTimeDescriptor();
169
169
  }
170
170
 
171
171
  static get focusElementSelector() {
@@ -208,7 +208,7 @@ class InputDate extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixin(
208
208
 
209
209
  this.addEventListener('blur', this._handleBlur);
210
210
  this.addEventListener('d2l-localize-resources-change', () => {
211
- this._dateTimeDescriptor = getDateTimeDescriptorShared(true);
211
+ this._dateTimeDescriptor = getDateTimeDescriptor();
212
212
  this.requestUpdate();
213
213
  this.updateComplete.then(() => tryUpdateHiddenContentWidth());
214
214
  });
package/helpers/dateTime.js CHANGED
@@ -1,4 +1,4 @@
1
- import { convertLocalToUTCDateTime, convertUTCToLocalDateTime, getDateTimeDescriptor } from '@brightspace-ui/intl/lib/dateTime.js';
1
+ import { convertLocalToUTCDateTime, convertUTCToLocalDateTime } from '@brightspace-ui/intl/lib/dateTime.js';
2
2
 
3
3
  // val is an object containing year, month, date
4
4
  export function formatDateInISO(val) {
@@ -139,12 +139,6 @@ export function getDateNoConversion(value) {
139
139
  return new Date(parsed.year, parsed.month - 1, parsed.date, parsed.hours, parsed.minutes, parsed.seconds);
140
140
  }
141
141
 
142
- let dateTimeDescriptor = null;
143
- export function getDateTimeDescriptorShared(refresh) {
144
- if (!dateTimeDescriptor || refresh) dateTimeDescriptor = getDateTimeDescriptor();
145
- return dateTimeDescriptor;
146
- }
147
-
148
142
  export function getLocalDateTimeFromUTCDateTime(dateTime) {
149
143
  const dateObj = parseISODateTime(dateTime);
150
144
  const localDateTime = convertUTCToLocalDateTime(dateObj);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "2.145.1",
3
+ "version": "2.146.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",