@brightspace-ui/core 3.125.0 → 3.126.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 (5) hide show
  1. package/components/colors/colors.js +1 -1
  2. package/components/typography/styles.js +81 -84
  3. package/components/typography/typography.js +2 -38
  4. package/helpers/flags.js +1 -1
  5. package/package.json +1 -1
package/components/colors/colors.js CHANGED
@@ -1,4 +1,4 @@
1
- if (!document.head.querySelector('#d2l-colors')) {
1
+ if (globalThis.document !== undefined && !globalThis.document.head.querySelector('#d2l-colors')) {
2
2
  const style = document.createElement('style');
3
3
  style.id = 'd2l-colors';
4
4
  style.textContent = `
package/components/typography/styles.js CHANGED
@@ -283,41 +283,40 @@ export const _generateLabelStyles = (selector) => {
283
283
 
284
284
  export const labelStyles = _generateLabelStyles('.d2l-label-text');
285
285
 
286
- export const blockquoteStyles = css`
287
- .d2l-blockquote {
288
- font-size: 0.8rem;
289
- font-weight: 400;
290
- line-height: 1.4rem;
291
- margin: 0;
292
- margin-right: 1.2rem;
293
- padding: 0;
294
- padding-left: 1.2rem;
295
- padding-top: 0.5rem;
296
- position: relative;
297
- }
298
- .d2l-blockquote::before {
299
- content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAyMiAyMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48L2RlZnM+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEgLTEpIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNhIi8+PC9tYXNrPjxwYXRoIGQ9Ik02IDIyLjY2N0E0LjY2NyA0LjY2NyAwIDAgMCAxMC42NjcgMThjMC0xLjIyNy0uNTU5LTIuNS0xLjMzNC0zLjMzM0M4LjQ4MSAxMy43NSA3LjM1IDEzLjMzMyA2IDEzLjMzM2MtLjQxMSAwIDEuMzMzLTYuNjY2IDMtOSAxLjY2Ny0yLjMzMyAxLjMzMy0zIC4zMzMtM0M4IDEuMzMzIDUuMjUzIDQuNTg2IDQgNy4yNTUgMS43NzMgMTIgMS4zMzMgMTUuMzkyIDEuMzMzIDE4QTQuNjY3IDQuNjY3IDAgMCAwIDYgMjIuNjY3em0xMiAwQTQuNjY3IDQuNjY3IDAgMCAwIDIyLjY2NyAxOGMwLTEuMjI3LS41NTktMi41LTEuMzM0LTMuMzMzLS44NTItLjkxNy0xLjk4My0xLjMzNC0zLjMzMy0xLjMzNC0uNDExIDAgMS4zMzMtNi42NjYgMy05IDEuNjY3LTIuMzMzIDEuMzMzLTMgLjMzMy0zLTEuMzMzIDAtNC4wOCAzLjI1My01LjMzMyA1LjkyMkMxMy43NzMgMTIgMTMuMzMzIDE1LjM5MiAxMy4zMzMgMThBNC42NjcgNC42NjcgMCAwIDAgMTggMjIuNjY3eiIgZmlsbD0iI0QzRDlFMyIgbWFzaz0idXJsKCNiKSIvPjwvZz48L3N2Zz4=");
300
- left: 0;
301
- position: absolute;
302
- top: 0;
303
- }
304
- :host([dir="rtl"]) .d2l-blockquote {
305
- margin-left: 1.2rem;
306
- margin-right: 0;
307
- padding-left: 0;
308
- padding-right: 1.2rem;
309
- }
310
- :host([dir="rtl"]) .d2l-blockquote::before {
311
- left: initial;
312
- right: 0;
313
- transform: scaleX(-1);
314
- }
315
- @media (max-width: 615px) {
316
- .d2l-blockquote {
317
- line-height: 1.2rem;
286
+ /**
287
+ * A private helper method that should not be used by general consumers
288
+ */
289
+ export const _generateBlockquoteStyles = (selector) => {
290
+ if (!_isValidCssSelector(selector)) return;
291
+
292
+ selector = unsafeCSS(selector);
293
+ return css`
294
+ ${selector} {
295
+ font-size: 0.8rem;
296
+ font-weight: 400;
297
+ line-height: 1.4rem;
298
+ margin-block: 0;
299
+ margin-inline: 0 1.2rem;
300
+ padding-block: 0.5rem 0;
301
+ padding-inline: 1.2rem 0;
302
+ position: relative;
318
303
  }
319
- }
320
- `;
304
+ ${selector}::before {
305
+ content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAyMiAyMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48L2RlZnM+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEgLTEpIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNhIi8+PC9tYXNrPjxwYXRoIGQ9Ik02IDIyLjY2N0E0LjY2NyA0LjY2NyAwIDAgMCAxMC42NjcgMThjMC0xLjIyNy0uNTU5LTIuNS0xLjMzNC0zLjMzM0M4LjQ4MSAxMy43NSA3LjM1IDEzLjMzMyA2IDEzLjMzM2MtLjQxMSAwIDEuMzMzLTYuNjY2IDMtOSAxLjY2Ny0yLjMzMyAxLjMzMy0zIC4zMzMtM0M4IDEuMzMzIDUuMjUzIDQuNTg2IDQgNy4yNTUgMS43NzMgMTIgMS4zMzMgMTUuMzkyIDEuMzMzIDE4QTQuNjY3IDQuNjY3IDAgMCAwIDYgMjIuNjY3em0xMiAwQTQuNjY3IDQuNjY3IDAgMCAwIDIyLjY2NyAxOGMwLTEuMjI3LS41NTktMi41LTEuMzM0LTMuMzMzLS44NTItLjkxNy0xLjk4My0xLjMzNC0zLjMzMy0xLjMzNC0uNDExIDAgMS4zMzMtNi42NjYgMy05IDEuNjY3LTIuMzMzIDEuMzMzLTMgLjMzMy0zLTEuMzMzIDAtNC4wOCAzLjI1My01LjMzMyA1LjkyMkMxMy43NzMgMTIgMTMuMzMzIDE1LjM5MiAxMy4zMzMgMThBNC42NjcgNC42NjcgMCAwIDAgMTggMjIuNjY3eiIgZmlsbD0iI0QzRDlFMyIgbWFzaz0idXJsKCNiKSIvPjwvZz48L3N2Zz4=");
306
+ inset-block-start: 0;
307
+ inset-inline-start: 0;
308
+ position: absolute;
309
+ transform: var(--d2l-mirror-transform, ${document.dir === 'rtl' ? css`scale(-1, 1)` : css`none`}); /* stylelint-disable-line @stylistic/string-quotes, @stylistic/function-whitespace-after */
310
+ }
311
+ @media (max-width: 615px) {
312
+ ${selector} {
313
+ line-height: 1.2rem;
314
+ }
315
+ }
316
+ `;
317
+ };
318
+
319
+ export const blockquoteStyles = _generateBlockquoteStyles('.d2l-blockquote');
321
320
 
322
321
  const importUrl = 'https://s.brightspace.com/lib/fonts/0.6.1/assets/';
323
322
  const fonts = {
@@ -330,53 +329,51 @@ const fonts = {
330
329
  BCSansItalic: 'BCSans-Italic',
331
330
  BCSansBoldItalic: 'BCSans-BoldItalic'
332
331
  };
333
- export const fontFacesCss = `
334
- @font-face {
335
- font-family: 'Lato';
336
- font-style: normal;
337
- font-weight: 400;
338
- src: local('Lato Regular'), local('Lato-Regular'), url(${new URL(`${fonts.LatoRegular}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.LatoRegular}.woff`, importUrl)}) format('woff'), url(${new URL(`${fonts.LatoRegular}.ttf`, importUrl)}) format('truetype');
339
- }
340
- @font-face {
341
- font-family: 'Lato';
342
- font-style: normal;
343
- font-weight: 700;
344
- src: local('Lato Bold'), local('Lato-Bold'), url(${new URL(`${fonts.LatoBold}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.LatoBold}.woff`, importUrl)}) format('woff'), url(${new URL(`${fonts.LatoBold}.ttf`, importUrl)}) format('truetype');
345
- }
346
- @font-face {
347
- font-family: 'BC Sans';
348
- font-style: normal;
349
- font-weight: 300;
350
- src: url(${new URL(`${fonts.BCSansLight}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansLight}.woff`, importUrl)}) format('woff');
351
- }
352
- @font-face {
353
- font-family: 'BC Sans';
354
- font-style: normal;
355
- font-weight: 400;
356
- src: url(${new URL(`${fonts.BCSansRegular}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansRegular}.woff`, importUrl)}) format('woff');
357
- }
358
- @font-face {
359
- font-family: 'BC Sans';
360
- font-style: normal;
361
- font-weight: 700;
362
- src: url(${new URL(`${fonts.BCSansBold}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansBold}.woff`, importUrl)}) format('woff');
363
- }
364
- @font-face {
365
- font-family: 'BC Sans';
366
- font-style: italic;
367
- font-weight: 300;
368
- src: url(${new URL(`${fonts.BCSansLightItalic}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansLightItalic}.woff`, importUrl)}) format('woff');
369
- }
370
- @font-face {
371
- font-family: 'BC Sans';
372
- font-style: italic;
373
- font-weight: 400;
374
- src: url(${new URL(`${fonts.BCSansItalic}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansItalic}.woff`, importUrl)}) format('woff');
375
- }
376
- @font-face {
377
- font-family: 'BC Sans';
378
- font-style: italic;
379
- font-weight: 700;
380
- src: url(${new URL(`${fonts.BCSansBoldItalic}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansBoldItalic}.woff`, importUrl)}) format('woff');
381
- }
382
- `;
332
+ export const fontFacesCss = `@font-face {
333
+ font-family: 'Lato';
334
+ font-style: normal;
335
+ font-weight: 400;
336
+ src: url(${new URL(`${fonts.LatoRegular}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.LatoRegular}.woff`, importUrl)}) format('woff');
337
+ }
338
+ @font-face {
339
+ font-family: 'Lato';
340
+ font-style: normal;
341
+ font-weight: 700;
342
+ src: url(${new URL(`${fonts.LatoBold}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.LatoBold}.woff`, importUrl)}) format('woff');
343
+ }
344
+ @font-face {
345
+ font-family: 'BC Sans';
346
+ font-style: normal;
347
+ font-weight: 300;
348
+ src: url(${new URL(`${fonts.BCSansLight}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansLight}.woff`, importUrl)}) format('woff');
349
+ }
350
+ @font-face {
351
+ font-family: 'BC Sans';
352
+ font-style: normal;
353
+ font-weight: 400;
354
+ src: url(${new URL(`${fonts.BCSansRegular}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansRegular}.woff`, importUrl)}) format('woff');
355
+ }
356
+ @font-face {
357
+ font-family: 'BC Sans';
358
+ font-style: normal;
359
+ font-weight: 700;
360
+ src: url(${new URL(`${fonts.BCSansBold}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansBold}.woff`, importUrl)}) format('woff');
361
+ }
362
+ @font-face {
363
+ font-family: 'BC Sans';
364
+ font-style: italic;
365
+ font-weight: 300;
366
+ src: url(${new URL(`${fonts.BCSansLightItalic}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansLightItalic}.woff`, importUrl)}) format('woff');
367
+ }
368
+ @font-face {
369
+ font-family: 'BC Sans';
370
+ font-style: italic;
371
+ font-weight: 400;
372
+ src: url(${new URL(`${fonts.BCSansItalic}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansItalic}.woff`, importUrl)}) format('woff');
373
+ }
374
+ @font-face {
375
+ font-family: 'BC Sans';
376
+ font-style: italic;
377
+ font-weight: 700;
378
+ src: url(${new URL(`${fonts.BCSansBoldItalic}.woff2`, importUrl)}) format('woff2'), url(${new URL(`${fonts.BCSansBoldItalic}.woff`, importUrl)}) format('woff');
379
+ }`;
package/components/typography/typography.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import '../colors/colors.js';
2
- import { fontFacesCss } from './styles.js';
2
+ import { _generateBlockquoteStyles, fontFacesCss } from './styles.js';
3
3
  import { getFlag } from '../../helpers/flags.js';
4
4
 
5
5
  if (!document.head.querySelector('#d2l-typography-font-face')) {
@@ -108,39 +108,7 @@ if (!document.head.querySelector('#d2l-typography-font-face')) {
108
108
  margin: 1.5rem 0 1.5rem 0;
109
109
  }
110
110
 
111
- .d2l-typography .d2l-blockquote {
112
- font-size: 0.8rem;
113
- font-weight: 400;
114
- line-height: 1.4rem;
115
- margin: 0;
116
- margin-right: 1.2rem;
117
- padding: 0;
118
- padding-left: 1.2rem;
119
- padding-top: 0.5rem;
120
- position: relative;
121
- }
122
-
123
- .d2l-typography .d2l-blockquote::before {
124
- position: absolute;
125
- content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTEiIGhlaWdodD0iMTEiIHZpZXdCb3g9IjAgMCAyMiAyMiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGRlZnM+PHBhdGggaWQ9ImEiIGQ9Ik0wIDBoMjR2MjRIMHoiLz48L2RlZnM+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEgLTEpIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPjxtYXNrIGlkPSJiIiBmaWxsPSIjZmZmIj48dXNlIHhsaW5rOmhyZWY9IiNhIi8+PC9tYXNrPjxwYXRoIGQ9Ik02IDIyLjY2N0E0LjY2NyA0LjY2NyAwIDAgMCAxMC42NjcgMThjMC0xLjIyNy0uNTU5LTIuNS0xLjMzNC0zLjMzM0M4LjQ4MSAxMy43NSA3LjM1IDEzLjMzMyA2IDEzLjMzM2MtLjQxMSAwIDEuMzMzLTYuNjY2IDMtOSAxLjY2Ny0yLjMzMyAxLjMzMy0zIC4zMzMtM0M4IDEuMzMzIDUuMjUzIDQuNTg2IDQgNy4yNTUgMS43NzMgMTIgMS4zMzMgMTUuMzkyIDEuMzMzIDE4QTQuNjY3IDQuNjY3IDAgMCAwIDYgMjIuNjY3em0xMiAwQTQuNjY3IDQuNjY3IDAgMCAwIDIyLjY2NyAxOGMwLTEuMjI3LS41NTktMi41LTEuMzM0LTMuMzMzLS44NTItLjkxNy0xLjk4My0xLjMzNC0zLjMzMy0xLjMzNC0uNDExIDAgMS4zMzMtNi42NjYgMy05IDEuNjY3LTIuMzMzIDEuMzMzLTMgLjMzMy0zLTEuMzMzIDAtNC4wOCAzLjI1My01LjMzMyA1LjkyMkMxMy43NzMgMTIgMTMuMzMzIDE1LjM5MiAxMy4zMzMgMThBNC42NjcgNC42NjcgMCAwIDAgMTggMjIuNjY3eiIgZmlsbD0iI0QzRDlFMyIgbWFzaz0idXJsKCNiKSIvPjwvZz48L3N2Zz4=");
126
- top: 0;
127
- left: 0;
128
- }
129
-
130
- [dir="rtl"] .d2l-typography .d2l-blockquote,
131
- .d2l-typography .d2l-blockquote[dir="rtl"] {
132
- margin-left: 1.2rem;
133
- margin-right: 0;
134
- padding-left: 0;
135
- padding-right: 1.2rem;
136
- }
137
-
138
- [dir="rtl"] .d2l-typography .d2l-blockquote::before,
139
- .d2l-typography .d2l-blockquote[dir="rtl"]::before {
140
- left: initial;
141
- right: 0;
142
- transform: scaleX(-1);
143
- }
111
+ ${_generateBlockquoteStyles('.d2l-typography .d2l-blockquote')}
144
112
 
145
113
  @media (max-width: 615px) {
146
114
 
@@ -170,10 +138,6 @@ if (!document.head.querySelector('#d2l-typography-font-face')) {
170
138
  line-height: 1.2rem;
171
139
  }
172
140
 
173
- .d2l-typography .d2l-blockquote {
174
- line-height: 1.2rem;
175
- }
176
-
177
141
  }
178
142
  `;
179
143
  document.head.appendChild(style);
package/helpers/flags.js CHANGED
@@ -4,7 +4,7 @@ export function getFlag(key, defaultValue) {
4
4
  if (flagOverrides.has(key)) {
5
5
  return flagOverrides.get(key);
6
6
  }
7
- return window.D2L?.LP?.Web?.UI?.Flags.Flag(key, defaultValue) ?? defaultValue;
7
+ return globalThis.D2L?.LP?.Web?.UI?.Flags.Flag(key, defaultValue) ?? defaultValue;
8
8
  }
9
9
 
10
10
  export function mockFlag(key, value) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.125.0",
3
+ "version": "3.126.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",