@brightspace-ui/core 3.52.1 → 3.53.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 (9) hide show
  1. package/components/meter/README.md +1 -0
  2. package/components/meter/demo/meter.html +3 -3
  3. package/components/meter/meter-circle.js +29 -40
  4. package/components/meter/meter-mixin.js +6 -0
  5. package/components/meter/meter-radial.js +10 -41
  6. package/components/meter/meter-styles.js +40 -0
  7. package/custom-elements.json +39 -0
  8. package/mixins/rtl/README.md +2 -0
  9. package/package.json +1 -1
package/components/meter/README.md CHANGED
@@ -124,4 +124,5 @@ All `meter` components have a `foreground-light` style that ensures accessibl
124
124
  * `text` (String): Context information about what the meter is about. Adding one of the following between `{}` (e.g., `{x/y}`) causes replacements:
125
125
  * `%` in the string will be replaced with percentage value
126
126
  * `x/y` in the string will be replaced with fraction with the proper language support
127
+ * `text-hidden` (Boolean): Hides the text visually
127
128
  <!-- docs: end hidden content -->
package/components/meter/demo/meter.html CHANGED
@@ -90,14 +90,14 @@
90
90
  <d2l-meter-circle value="0" max="10"></d2l-meter-circle>
91
91
  <d2l-meter-circle value="5" max="13"></d2l-meter-circle>
92
92
  <d2l-meter-circle value="5" max="13" percent></d2l-meter-circle>
93
- <d2l-meter-circle value="10" max="10"></d2l-meter-circle>
93
+ <d2l-meter-circle value="10" max="10" text="Completed"></d2l-meter-circle>
94
94
  <d2l-meter-circle value="19" max="26" style="width: 25%;"></d2l-meter-circle>
95
95
  </div>
96
96
  <div class="dark-background">
97
97
  <d2l-meter-circle value="0" max="10" foreground-light></d2l-meter-circle>
98
98
  <d2l-meter-circle value="5" max="13" foreground-light></d2l-meter-circle>
99
- <d2l-meter-circle value="5" max="13" percent foreground-light></d2l-meter-circle>
100
- <d2l-meter-circle value="10" max="10" foreground-light></d2l-meter-circle>
99
+ <d2l-meter-circle value="5" max="13" percent foreground-light text="Made some progress" text-hidden></d2l-meter-circle>
100
+ <d2l-meter-circle value="10" max="10" foreground-light text="Completed"></d2l-meter-circle>
101
101
  <d2l-meter-circle value="19" max="26" style="width: 25%;" foreground-light></d2l-meter-circle>
102
102
  </div>
103
103
  </template>
package/components/meter/meter-circle.js CHANGED
@@ -1,8 +1,9 @@
1
1
  import '../colors/colors.js';
2
- import { css, html, LitElement } from 'lit';
3
- import { bodyStandardStyles } from '../typography/styles.js';
2
+ import { bodySmallStyles, bodyStandardStyles } from '../typography/styles.js';
3
+ import { css, html, LitElement, nothing } from 'lit';
4
4
  import { classMap } from 'lit/directives/class-map.js';
5
5
  import { MeterMixin } from './meter-mixin.js';
6
+ import { meterStyles } from './meter-styles.js';
6
7
  import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
7
8
 
8
9
  /**
@@ -10,40 +11,21 @@ import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
10
11
  */
11
12
  class MeterCircle extends MeterMixin(RtlMixin(LitElement)) {
12
13
  static get styles() {
13
- return [ bodyStandardStyles, css`
14
+ return [ bodySmallStyles, bodyStandardStyles, meterStyles, css`
14
15
  :host {
15
16
  display: inline-block;
16
17
  width: 2.4rem;
17
18
  }
18
- .d2l-meter-circle-full-bar,
19
- .d2l-meter-circle-progress-bar {
20
- fill: none;
21
- stroke-linecap: round;
19
+ .d2l-meter-full-bar,
20
+ .d2l-meter-progress-bar {
22
21
  stroke-width: 6;
23
22
  }
24
- .d2l-meter-circle-full-bar {
23
+ .d2l-meter-full-bar {
25
24
  fill: var(--d2l-meter-circle-fill, none);
26
- stroke: var(--d2l-color-gypsum);
27
25
  }
28
- :host([foreground-light]) .d2l-meter-circle-full-bar {
29
- stroke: rgba(255, 255, 255, 0.5);
30
- }
31
- .d2l-meter-circle-progress-bar {
32
- stroke: var(--d2l-color-celestine);
33
- }
34
- :host([foreground-light]) .d2l-meter-circle-progress-bar {
35
- stroke: white;
36
- }
37
- .d2l-meter-circle-text {
38
- fill: var(--d2l-color-ferrite);
26
+ .d2l-meter-text {
39
27
  font-size: 0.55rem;
40
28
  }
41
- :host([foreground-light]) .d2l-meter-circle-text {
42
- fill: white;
43
- }
44
- :host([dir="rtl"]) .d2l-meter-circle-text-ltr {
45
- direction: ltr;
46
- }
47
29
  ` ];
48
30
  }
49
31
 
@@ -58,26 +40,33 @@ class MeterCircle extends MeterMixin(RtlMixin(LitElement)) {
58
40
  const primary = this._primary(this.value, this.max) || '';
59
41
  const primaryAria = this._primary(this.value, this.max, true) || '';
60
42
  const secondaryAria = this._secondary(this.value, this.max, this.text, true);
43
+ const secondary = this._secondary(this.value, this.max, this.text);
44
+ const secondaryTextElement = this.text && !this.textHidden
45
+ ? html`<div class="d2l-body-small d2l-meter-text">${secondary}</div>`
46
+ : nothing;
61
47
  const textClasses = {
62
- 'd2l-meter-circle-text-ltr': !this.percent,
48
+ 'd2l-meter-text-ltr': !this.percent,
63
49
  'd2l-body-standard': true,
64
- 'd2l-meter-circle-text': true
50
+ 'd2l-meter-text': true
65
51
  };
66
52
 
67
53
  return html`
68
- <svg viewBox="0 0 48 48" shape-rendering="geometricPrecision" role="img" aria-label="${this._ariaLabel(primaryAria, secondaryAria)}">
69
- <circle class="d2l-meter-circle-full-bar" cx="24" cy="24" r="21"></circle>
70
- <circle
71
- class="d2l-meter-circle-progress-bar"
72
- cx="24" cy="24" r="21"
73
- stroke-dasharray="${progressFill} ${space}"
74
- stroke-dashoffset="${dashOffset}"
75
- visibility="${visibility}"></circle>
54
+ <div class="d2l-meter-container" aria-label="${this._ariaLabel(primaryAria, secondaryAria)}" role="img">
55
+ <svg viewBox="0 0 48 48" shape-rendering="geometricPrecision">
56
+ <circle class="d2l-meter-full-bar" cx="24" cy="24" r="21"></circle>
57
+ <circle
58
+ class="d2l-meter-progress-bar"
59
+ cx="24" cy="24" r="21"
60
+ stroke-dasharray="${progressFill} ${space}"
61
+ stroke-dashoffset="${dashOffset}"
62
+ visibility="${visibility}"></circle>
76
63
 
77
- <text class=${classMap(textClasses)} x="24" y="28" text-anchor="middle">
78
- ${primary}
79
- </text>
80
- </svg>
64
+ <text class=${classMap(textClasses)} x="24" y="28" text-anchor="middle">
65
+ ${primary}
66
+ </text>
67
+ </svg>
68
+ ${secondaryTextElement}
69
+ </div>
81
70
  `;
82
71
  }
83
72
  }
package/components/meter/meter-mixin.js CHANGED
@@ -21,6 +21,11 @@ export const MeterMixin = superclass => class extends LocalizeCoreElement(superc
21
21
  * @type {string}
22
22
  */
23
23
  text: { type: String },
24
+ /**
25
+ * Hides the text visually
26
+ * @type {boolean}
27
+ */
28
+ textHidden: { type: Boolean, attribute: 'text-hidden' },
24
29
  /**
25
30
  * REQUIRED: Current number of completed units.
26
31
  * Valid values: A number between 0 and max
@@ -34,6 +39,7 @@ export const MeterMixin = superclass => class extends LocalizeCoreElement(superc
34
39
  super();
35
40
  this.max = 100;
36
41
  this.percent = false;
42
+ this.textHidden = false;
37
43
  this.value = 0;
38
44
 
39
45
  this._namespace = 'components.meter-mixin';
package/components/meter/meter-radial.js CHANGED
@@ -3,6 +3,7 @@ import { bodySmallStyles, heading4Styles } from '../typography/styles.js';
3
3
  import { css, html, LitElement, nothing } from 'lit';
4
4
  import { classMap } from 'lit/directives/class-map.js';
5
5
  import { MeterMixin } from './meter-mixin.js';
6
+ import { meterStyles } from './meter-styles.js';
6
7
  import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
7
8
 
8
9
  /**
@@ -10,47 +11,15 @@ import { RtlMixin } from '../../mixins/rtl/rtl-mixin.js';
10
11
  */
11
12
  class MeterRadial extends MeterMixin(RtlMixin(LitElement)) {
12
13
  static get styles() {
13
- return [ heading4Styles, bodySmallStyles, css`
14
+ return [ heading4Styles, bodySmallStyles, meterStyles, css`
14
15
  :host {
15
16
  display: inline-block;
16
17
  width: 4.2rem;
17
18
  }
18
- .d2l-meter-radial {
19
- display: flex;
20
- flex-direction: column;
21
- justify-content: center;
22
- }
23
- .d2l-meter-radial-full-bar,
24
- .d2l-meter-radial-progress-bar {
25
- fill: none;
26
- stroke-linecap: round;
19
+ .d2l-meter-full-bar,
20
+ .d2l-meter-progress-bar {
27
21
  stroke-width: 9;
28
22
  }
29
- .d2l-meter-radial-full-bar {
30
- stroke: var(--d2l-color-gypsum);
31
- }
32
- :host([foreground-light]) .d2l-meter-radial-full-bar {
33
- stroke: rgba(255, 255, 255, 0.5);
34
- }
35
- .d2l-meter-radial-progress-bar {
36
- stroke: var(--d2l-color-celestine);
37
- }
38
- :host([foreground-light]) .d2l-meter-radial-progress-bar {
39
- stroke: white;
40
- }
41
- .d2l-meter-radial-text {
42
- color: var(--d2l-color-ferrite);
43
- fill: var(--d2l-color-ferrite);
44
- line-height: 0.8rem;
45
- text-align: center;
46
- }
47
- :host([foreground-light]) .d2l-meter-radial-text {
48
- color: white;
49
- fill: white;
50
- }
51
- :host([dir="rtl"]) .d2l-meter-radial-text-ltr {
52
- direction: ltr;
53
- }
54
23
  ` ];
55
24
  }
56
25
 
@@ -63,22 +32,22 @@ class MeterRadial extends MeterMixin(RtlMixin(LitElement)) {
63
32
  const secondary = this._secondary(this.value, this.max, this.text);
64
33
  const primaryAria = this._primary(this.value, this.max, true) || '';
65
34
  const secondaryAria = this._secondary(this.value, this.max, this.text, true) || '';
66
- const secondaryTextElement = this.text ? html`<div class="d2l-body-small d2l-meter-radial-text">${secondary}</div>` : nothing;
35
+ const secondaryTextElement = this.text ? html`<div class="d2l-body-small d2l-meter-text">${secondary}</div>` : nothing;
67
36
  const textClasses = {
68
- 'd2l-meter-radial-text-ltr': !this.percent,
37
+ 'd2l-meter-text-ltr': !this.percent,
69
38
  'd2l-heading-4': true,
70
- 'd2l-meter-radial-text': true
39
+ 'd2l-meter-text': true
71
40
  };
72
41
 
73
42
  return html `
74
43
  <div
75
- class="d2l-meter-radial"
44
+ class="d2l-meter-container"
76
45
  role="img"
77
46
  aria-label="${this._ariaLabel(primaryAria, secondaryAria)}">
78
47
  <svg viewBox="0 0 84 46">
79
- <path class="d2l-meter-radial-full-bar" d="M5 40a37 35 0 0 1 74 0" />
48
+ <path class="d2l-meter-full-bar" d="M5 40a37 35 0 0 1 74 0" />
80
49
  <path
81
- class="d2l-meter-radial-progress-bar"
50
+ class="d2l-meter-progress-bar"
82
51
  d="M5 40a37 35 0 0 1 74 0"
83
52
  stroke-dasharray="${progressFill} ${lengthOfLine}"
84
53
  stroke-dashoffset="0"
package/components/meter/meter-styles.js ADDED
@@ -0,0 +1,40 @@
1
+ import '../colors/colors.js';
2
+ import { css } from 'lit';
3
+
4
+ export const meterStyles = css`
5
+ .d2l-meter-container {
6
+ display: flex;
7
+ flex-direction: column;
8
+ justify-content: center;
9
+ }
10
+ .d2l-meter-full-bar,
11
+ .d2l-meter-progress-bar {
12
+ fill: none;
13
+ stroke-linecap: round;
14
+ }
15
+ .d2l-meter-full-bar {
16
+ stroke: var(--d2l-color-gypsum);
17
+ }
18
+ :host([foreground-light]) .d2l-meter-full-bar {
19
+ stroke: rgba(255, 255, 255, 0.5);
20
+ }
21
+ .d2l-meter-progress-bar {
22
+ stroke: var(--d2l-color-celestine);
23
+ }
24
+ :host([foreground-light]) .d2l-meter-progress-bar {
25
+ stroke: white;
26
+ }
27
+ .d2l-meter-text {
28
+ color: var(--d2l-color-ferrite);
29
+ fill: var(--d2l-color-ferrite);
30
+ line-height: 0.8rem;
31
+ text-align: center;
32
+ }
33
+ :host([foreground-light]) .d2l-meter-text {
34
+ color: white;
35
+ fill: white;
36
+ }
37
+ :host([dir="rtl"]) .d2l-meter-text-ltr {
38
+ direction: ltr;
39
+ }
40
+ `;
package/custom-elements.json CHANGED
@@ -9935,6 +9935,12 @@
9935
9935
  "type": "boolean",
9936
9936
  "default": "false"
9937
9937
  },
9938
+ {
9939
+ "name": "text-hidden",
9940
+ "description": "Hides the text visually",
9941
+ "type": "boolean",
9942
+ "default": "false"
9943
+ },
9938
9944
  {
9939
9945
  "name": "value",
9940
9946
  "description": "REQUIRED: Current number of completed units.\nValid values: A number between 0 and max",
@@ -9963,6 +9969,13 @@
9963
9969
  "type": "boolean",
9964
9970
  "default": "false"
9965
9971
  },
9972
+ {
9973
+ "name": "textHidden",
9974
+ "attribute": "text-hidden",
9975
+ "description": "Hides the text visually",
9976
+ "type": "boolean",
9977
+ "default": "false"
9978
+ },
9966
9979
  {
9967
9980
  "name": "value",
9968
9981
  "attribute": "value",
@@ -10000,6 +10013,12 @@
10000
10013
  "type": "boolean",
10001
10014
  "default": "false"
10002
10015
  },
10016
+ {
10017
+ "name": "text-hidden",
10018
+ "description": "Hides the text visually",
10019
+ "type": "boolean",
10020
+ "default": "false"
10021
+ },
10003
10022
  {
10004
10023
  "name": "value",
10005
10024
  "description": "REQUIRED: Current number of completed units.\nValid values: A number between 0 and max",
@@ -10035,6 +10054,13 @@
10035
10054
  "type": "boolean",
10036
10055
  "default": "false"
10037
10056
  },
10057
+ {
10058
+ "name": "textHidden",
10059
+ "attribute": "text-hidden",
10060
+ "description": "Hides the text visually",
10061
+ "type": "boolean",
10062
+ "default": "false"
10063
+ },
10038
10064
  {
10039
10065
  "name": "value",
10040
10066
  "attribute": "value",
@@ -10066,6 +10092,12 @@
10066
10092
  "type": "boolean",
10067
10093
  "default": "false"
10068
10094
  },
10095
+ {
10096
+ "name": "text-hidden",
10097
+ "description": "Hides the text visually",
10098
+ "type": "boolean",
10099
+ "default": "false"
10100
+ },
10069
10101
  {
10070
10102
  "name": "value",
10071
10103
  "description": "REQUIRED: Current number of completed units.\nValid values: A number between 0 and max",
@@ -10094,6 +10126,13 @@
10094
10126
  "type": "boolean",
10095
10127
  "default": "false"
10096
10128
  },
10129
+ {
10130
+ "name": "textHidden",
10131
+ "attribute": "text-hidden",
10132
+ "description": "Hides the text visually",
10133
+ "type": "boolean",
10134
+ "default": "false"
10135
+ },
10097
10136
  {
10098
10137
  "name": "value",
10099
10138
  "attribute": "value",
package/mixins/rtl/README.md CHANGED
@@ -1,5 +1,7 @@
1
1
  # RtlMixin
2
2
 
3
+ > **Obsolete:** new uses of `RtlMixin` should not be introduced. Instead, use [CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).
4
+
3
5
  The `RtlMixin` creates `dir` attributes on host elements based on the document's `dir`, enabling components to define RTL styles for elements within their shadow-DOMs via `:host([dir="rtl"])`. It is possible to opt-out our this behavior by explicitly setting a `dir` attribute (ex. for testing).
4
6
 
5
7
  ## Usage
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@brightspace-ui/core",
3
- "version": "3.52.1",
3
+ "version": "3.53.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",