@brightspace-ui/core 3.52.1 → 3.53.0

Sign up to get free protection for your applications and to get access to all the features.
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",