@1024pix/pix-ui 60.0.0 → 60.0.2

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 (3) hide show
  1. package/addon/components/pix-progress-bar.gjs +10 -31
  2. package/addon/styles/_pix-progress-bar.scss +24 -24
  3. package/package.json +2 -2
package/addon/components/pix-progress-bar.gjs CHANGED
@@ -5,9 +5,6 @@ import Component from '@glimmer/component';
5
5
  export default class PixProgressBar extends Component {
6
6
  constructor(...args) {
7
7
  super(...args);
8
- warn('PixProgressBar: you need to provide a locale', this.args.locale, {
9
- id: 'pix-progress-bar.locale.required',
10
- });
11
8
 
12
9
  warn(
13
10
  'PixProgressBar: you need to provide a number value between 0 and 1',
@@ -17,21 +14,11 @@ export default class PixProgressBar extends Component {
17
14
  },
18
15
  );
19
16
 
20
- this.id = guidFor(this);
21
- }
22
-
23
- get percentageValue() {
24
- return Number(this.clampValue).toLocaleString(this.args.locale, { style: 'percent' });
25
- }
26
-
27
- get label() {
28
- const hasLabel = this.args.label && this.args.label.trim().length > 0;
29
-
30
- warn('PixProgressBar: you need to provide a valid label', hasLabel || this.args.isDecorative, {
17
+ warn('PixProgressBar: you need to provide a valid label', this.args.label, {
31
18
  id: 'pix-progress-bar.label.required',
32
19
  });
33
20
 
34
- return this.args.label;
21
+ this.id = guidFor(this);
35
22
  }
36
23
 
37
24
  get themeMode() {
@@ -42,7 +29,7 @@ export default class PixProgressBar extends Component {
42
29
  ? this.args.themeMode
43
30
  : 'light';
44
31
 
45
- return `progress-bar--theme-${themeMode}`;
32
+ return `pix-progress-bar--theme-${themeMode}`;
46
33
  }
47
34
 
48
35
  get colorClass() {
@@ -59,32 +46,24 @@ export default class PixProgressBar extends Component {
59
46
  const color =
60
47
  this.args.color && availableColor.includes(this.args.color) ? this.args.color : 'primary';
61
48
 
62
- return `progress-bar--content-${color}`;
63
- }
64
-
65
- get clampValue() {
66
- return Math.max(Math.min(this.args.value, 1), 0);
49
+ return `pix-progress-bar--content-${color}`;
67
50
  }
68
51
 
69
52
  <template>
70
- <div
71
- class="progress-bar {{this.themeMode}} {{this.colorClass}}"
72
- aria-hidden={{if @isDecorative "true"}}
73
- ...attributes
74
- >
53
+ <div class="pix-progress-bar {{this.themeMode}} {{this.colorClass}}" ...attributes>
75
54
  {{#unless @hidePercentage}}
76
- <div class="progress-bar__text" role="presentation">{{this.percentageValue}}</div>
55
+ <div class="pix-progress-bar__text" role="presentation">{{@percentageValue}}</div>
77
56
  {{/unless}}
78
57
  <label for={{this.id}} class="screen-reader-only">{{@label}}</label>
79
58
  <progress
80
- class="progress-bar__bar"
59
+ class="pix-progress-bar__bar"
81
60
  id={{this.id}}
82
61
  max="1"
83
62
  min="0"
84
- value={{this.clampValue}}
85
- >{{this.percentageValue}}</progress>
63
+ value={{@value}}
64
+ >{{@percentageValue}}</progress>
86
65
  {{#if @subtitle}}
87
- <p class="progress-bar__sub-title">{{@subtitle}}</p>
66
+ <p class="pix-progress-bar__sub-title">{{@subtitle}}</p>
88
67
  {{/if}}
89
68
  </div>
90
69
  </template>
package/addon/styles/_pix-progress-bar.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use "pix-design-tokens/typography";
2
2
 
3
- .progress-bar {
3
+ .pix-progress-bar {
4
4
  position: relative;
5
5
  display: grid;
6
6
  grid-template-areas:
@@ -62,68 +62,68 @@
62
62
  }
63
63
 
64
64
  // THEME DARK
65
- .progress-bar--theme-dark {
66
- .progress-bar__bar {
65
+ .pix-progress-bar--theme-dark {
66
+ .pix-progress-bar__bar {
67
67
  border: 2px solid var(--pix-neutral-0);
68
68
  }
69
69
 
70
- .progress-bar__bar::-webkit-progress-bar {
70
+ .pix-progress-bar__bar::-webkit-progress-bar {
71
71
  background-color: var(--pix-neutral-0);
72
72
  }
73
73
 
74
- .progress-bar__text,
75
- .progress-bar__sub-title {
74
+ .pix-progress-bar__text,
75
+ .pix-progress-bar__sub-title {
76
76
  color: var(--pix-neutral-0);
77
77
  }
78
78
  }
79
79
 
80
80
  // SPECIFIC BAR COLORS
81
- .progress-bar--content-blue, .progress-bar--content-primary {
82
- .progress-bar__bar::-webkit-progress-value {
81
+ .pix-progress-bar--content-blue, .pix-progress-bar--content-primary {
82
+ .pix-progress-bar__bar::-webkit-progress-value {
83
83
  background-color: var(--pix-primary-500);
84
84
  }
85
85
 
86
- .progress-bar__bar::-moz-progress-bar {
86
+ .pix-progress-bar__bar::-moz-progress-bar {
87
87
  background-color: var(--pix-primary-500);
88
88
  }
89
89
 
90
- &:not(.progress-bar--theme-dark) {
91
- .progress-bar__text,
92
- .progress-bar__sub-title {
90
+ &:not(.pix-progress-bar--theme-dark) {
91
+ .pix-progress-bar__text,
92
+ .pix-progress-bar__sub-title {
93
93
  color: var(--pix-primary-500);
94
94
  }
95
95
  }
96
96
  }
97
97
 
98
- .progress-bar--content-green, .progress-bar--content-success {
99
- .progress-bar__bar::-webkit-progress-value {
98
+ .pix-progress-bar--content-green, .pix-progress-bar--content-success {
99
+ .pix-progress-bar__bar::-webkit-progress-value {
100
100
  background-color: var(--pix-success-700);
101
101
  }
102
102
 
103
- .progress-bar__bar::-moz-progress-bar {
103
+ .pix-progress-bar__bar::-moz-progress-bar {
104
104
  background-color: var(--pix-success-700);
105
105
  }
106
106
 
107
- &:not(.progress-bar--theme-dark) {
108
- .progress-bar__text,
109
- .progress-bar__sub-title {
107
+ &:not(.pix-progress-bar--theme-dark) {
108
+ .pix-progress-bar__text,
109
+ .pix-progress-bar__sub-title {
110
110
  color: var(--pix-success-700);
111
111
  }
112
112
  }
113
113
  }
114
114
 
115
- .progress-bar--content-purple, .progress-bar--content-tertiary {
116
- .progress-bar__bar::-webkit-progress-value {
115
+ .pix-progress-bar--content-purple, .pix-progress-bar--content-tertiary {
116
+ .pix-progress-bar__bar::-webkit-progress-value {
117
117
  background-color: var(--pix-tertiary-900);
118
118
  }
119
119
 
120
- .progress-bar__bar::-moz-progress-bar {
120
+ .pix-progress-bar__bar::-moz-progress-bar {
121
121
  background-color: var(--pix-tertiary-900);
122
122
  }
123
123
 
124
- &:not(.progress-bar--theme-dark) {
125
- .progress-bar__text,
126
- .progress-bar__sub-title {
124
+ &:not(.pix-progress-bar--theme-dark) {
125
+ .pix-progress-bar__text,
126
+ .pix-progress-bar__sub-title {
127
127
  color: var(--pix-tertiary-900);
128
128
  }
129
129
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@1024pix/pix-ui",
3
- "version": "60.0.0",
3
+ "version": "60.0.2",
4
4
  "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
5
5
  "keywords": [
6
6
  "ember-addon"
@@ -92,7 +92,7 @@
92
92
  "@storybook/addon-controls": "^8.4.7",
93
93
  "@storybook/addon-docs": "^8.4.7",
94
94
  "@storybook/addon-essentials": "^8.4.7",
95
- "@storybook/addon-webpack5-compiler-babel": "^3.0.5",
95
+ "@storybook/addon-webpack5-compiler-babel": "^4.0.0",
96
96
  "@storybook/blocks": "^8.4.7",
97
97
  "@storybook/builder-webpack5": "^8.4.7",
98
98
  "@storybook/ember": "^8.4.7",