@1024pix/pix-ui 29.1.0 → 30.0.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 (11) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/addon/components/pix-stars.hbs +8 -12
  3. package/addon/components/pix-stars.js +6 -20
  4. package/addon/styles/_a11y.scss +1 -1
  5. package/addon/styles/_pix-modal.scss +2 -2
  6. package/addon/styles/_pix-stars.scss +25 -22
  7. package/addon/styles/_pix-tag.scss +10 -10
  8. package/addon/styles/pix-design-tokens/_colors.scss +1 -1
  9. package/app/stories/pix-stars.stories.js +4 -4
  10. package/app/stories/pix-stars.stories.mdx +1 -1
  11. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # Pix-UI Changelog
2
2
 
3
+ ## v30.0.0 (05/04/2023)
4
+
5
+
6
+ ### :rocket: Amélioration
7
+ - [#376](https://github.com/1024pix/pix-ui/pull/376) [FEATURE] Rendre PixStars adaptatif et plus accessible (PIX-7625).
8
+
9
+ ## v29.1.1 (31/03/2023)
10
+
11
+
12
+ ### :building_construction: Tech
13
+ - [#375](https://github.com/1024pix/pix-ui/pull/375) [TECH] Améliorer l'affichage des éléments en screen-reader-only ayant des sous élements (PIX-7623)
14
+
15
+ ### :bug: Correction
16
+ - [#373](https://github.com/1024pix/pix-ui/pull/373) [BUGFIX] Rendre les couleurs des tags cohérentes avec celles des maquettes (PIX-7582)
17
+ - [#374](https://github.com/1024pix/pix-ui/pull/374) [BUGFIX] Rendre les typographies de la modale cohérentes avec celles des maquettes (PIX-7615)
18
+
3
19
  ## v29.1.0 (28/03/2023)
4
20
 
5
21
 
package/addon/components/pix-stars.hbs CHANGED
@@ -1,20 +1,16 @@
1
- <div class={{this.pixStarsClass}} ...attributes>
1
+ <div class="pix-stars" ...attributes>
2
2
  <span class="screen-reader-only">{{@alt}}</span>
3
- {{#each this.stars as |star|}}
3
+ {{#each this.starsCount as |item index|}}
4
4
  <svg
5
- class="pix-stars__{{star}}"
6
- data-test-status={{star}}
7
- viewBox="0 0 36 36"
5
+ role="img"
6
+ class={{this.itemClasses}}
7
+ data-acquired={{lt index @count}}
8
8
  aria-hidden="true"
9
+ viewBox="0 0 36 36"
9
10
  >
10
- <defs>
11
- <linearGradient id="pix-stars-default" x1="68.643%" y1="0%" x2="68.643%" y2="100%">
12
- <stop stop-color="#FEDC41" offset="0%"></stop>
13
- <stop stop-color="#FF9F00" offset="100%"></stop>
14
- </linearGradient>
15
- </defs>
16
11
  <path
17
- d="M8.423 35.82c-.761.507-1.765-.125-1.635-1.03l1.619-11.335L.311 15.36a1.059 1.059 0 01.6-1.796l11.268-1.61L17.027.642c.367-.856 1.58-.856 1.946 0l4.848 11.31 11.269 1.61a1.059 1.059 0 01.599 1.797l-8.096 8.096 1.62 11.334c.129.906-.875 1.538-1.636 1.03L18 29.436 8.423 35.82z"
12
+ d="M19.2828 2.10285L19.2859 2.1094L19.2891 2.11591L23.2657 10.1293C23.7043 11.0131 24.5494 11.6248 25.5259 11.7652L34.3061 13.0281C34.3075 13.0283 34.3089 13.0285 34.3102 13.0287C35.2023 13.1692 35.6257 14.3013 34.8986 15.0326C34.8976 15.0336 34.8966 15.0346 34.8956 15.0356L28.5817 21.2292C27.8785 21.919 27.5588 22.9099 27.7261 23.8806L29.2294 32.5994C29.3684 33.5432 28.3298 34.2646 27.5175 33.8437C27.5166 33.8432 27.5157 33.8428 27.5148 33.8423L19.7026 29.6958C18.8261 29.2305 17.7761 29.2289 16.8981 29.6914L9.01736 33.8423C9.01683 33.8426 9.01631 33.8428 9.01578 33.8431C8.20337 34.2653 7.16367 33.5437 7.30279 32.5994L8.80604 23.8806C8.97339 22.9099 8.65362 21.919 7.95048 21.2292L1.63355 15.0326C0.90651 14.3014 1.32978 13.1695 2.22156 13.0288L11.0636 11.7656C12.0477 11.6251 12.8982 11.0062 13.3347 10.1131L17.2434 2.11512C17.6777 1.2532 18.8988 1.30004 19.2828 2.10285Z"
13
+ stroke-width="2"
18
14
  ></path>
19
15
  </svg>
20
16
  {{/each}}
package/addon/components/pix-stars.js CHANGED
@@ -1,27 +1,13 @@
1
1
  import Component from '@glimmer/component';
2
2
 
3
- const STAR_ACQUIRED = 'acquired';
4
- const STAR_UNACQUIRED = 'unacquired';
5
-
6
3
  export default class PixStars extends Component {
7
- get pixStarsClass() {
8
- if (!this.args.color) return 'pix-stars';
9
- return `pix-stars pix-stars--${this.args.color}`;
4
+ get starsCount() {
5
+ if (!this.args.total && !this.args.count) return [];
6
+ return this.args.total ? Array(this.args.total) : Array(this.args.count);
10
7
  }
11
8
 
12
- get stars() {
13
- const { count = 0, total = 0 } = this.args;
14
-
15
- const starsTotal = total || count;
16
-
17
- const stars = [];
18
- for (let index = 0; index < starsTotal; index++) {
19
- if (index < count) {
20
- stars[index] = STAR_ACQUIRED;
21
- } else {
22
- stars[index] = STAR_UNACQUIRED;
23
- }
24
- }
25
- return stars;
9
+ get itemClasses() {
10
+ if (!this.args.color) return 'pix-stars__item';
11
+ return `pix-stars__item pix-stars__item--color-${this.args.color}`;
26
12
  }
27
13
  }
package/addon/styles/_a11y.scss CHANGED
@@ -1,4 +1,4 @@
1
- .screen-reader-only {
1
+ .screen-reader-only, .screen-reader-only > * {
2
2
  position: absolute;
3
3
  width: 1px;
4
4
  height: 1px;
package/addon/styles/_pix-modal.scss CHANGED
@@ -68,7 +68,7 @@ $button-margin: 16px;
68
68
  }
69
69
 
70
70
  &__title {
71
- @extend %pix-title-s;
71
+ @extend %pix-title-xs;
72
72
 
73
73
  margin-bottom: 0;
74
74
  color: $pix-neutral-90;
@@ -80,7 +80,7 @@ $button-margin: 16px;
80
80
  }
81
81
 
82
82
  &__content {
83
- @extend %pix-body-m;
83
+ @extend %pix-body-s;
84
84
 
85
85
  padding: $modal-padding;
86
86
  color: $pix-neutral-90;
package/addon/styles/_pix-stars.scss CHANGED
@@ -1,33 +1,36 @@
1
1
  .pix-stars {
2
- line-height: 0;
2
+ display: flex;
3
+ height: 2.25rem;
3
4
 
4
- > svg {
5
- width: 36px;
6
- height: 36px;
7
- }
8
-
9
- &--blue > &__acquired {
10
- fill: $pix-primary;
5
+ & * + * {
6
+ margin-left: $pix-spacing-xxs;
11
7
  }
8
+ }
12
9
 
13
- &--blue > &__unacquired {
14
- fill: $pix-neutral-15;
15
- }
10
+ .pix-stars__item {
11
+ height: 100%;
12
+ fill: $pix-neutral-5;
13
+ stroke: $pix-neutral-40;
16
14
 
17
- &--grey > &__acquired {
18
- fill: $pix-neutral-40;
15
+ &[data-acquired] {
16
+ fill: $pix-secondary-40;
17
+ stroke: $pix-secondary-60;
19
18
  }
19
+ }
20
20
 
21
- &--grey > &__unacquired {
22
- fill: $pix-neutral-0;
23
- stroke: $pix-neutral-40;
24
- }
21
+ // Color variant : Blue
22
+ .pix-stars__item--color-blue[data-acquired] {
23
+ fill: $pix-primary-40;
24
+ stroke: $pix-primary-60;
25
+ }
25
26
 
26
- &__acquired {
27
- fill: url(#pix-stars-default);
28
- }
27
+ // Color variant : Grey
28
+ .pix-stars__item--color-grey {
29
+ fill: $pix-neutral-0;
30
+ stroke: $pix-neutral-40;
29
31
 
30
- &__unacquired {
31
- fill: $pix-neutral-15;
32
+ &[data-acquired] {
33
+ fill: $pix-neutral-40;
34
+ stroke: $pix-neutral-40;
32
35
  }
33
36
  }
package/addon/styles/_pix-tag.scss CHANGED
@@ -11,8 +11,8 @@
11
11
  background-color: $pix-primary;
12
12
 
13
13
  &--blue-light {
14
- color: darken($pix-primary, 10%);
15
- background-color: lighten($pix-primary, 30%);
14
+ color: $pix-primary-80;
15
+ background-color: $pix-primary-10;
16
16
  }
17
17
 
18
18
  &--green {
@@ -20,8 +20,8 @@
20
20
  }
21
21
 
22
22
  &--green-light {
23
- color: $pix-success-70;
24
- background-color: $pix-success-5;
23
+ color: $pix-success-80;
24
+ background-color: $pix-success-10;
25
25
  }
26
26
 
27
27
  &--purple {
@@ -39,8 +39,8 @@
39
39
  }
40
40
 
41
41
  &--yellow-light {
42
- color: darken($pix-warning-40, 25%);
43
- background-color: lighten($pix-warning-40, 35%);
42
+ color: $pix-warning-80;
43
+ background-color: $pix-warning-10;
44
44
  }
45
45
 
46
46
  &--orange {
@@ -48,8 +48,8 @@
48
48
  }
49
49
 
50
50
  &--orange-light {
51
- color: $pix-warning-70;
52
- background-color: $pix-warning-5;
51
+ color: $pix-warning-80;
52
+ background-color: $pix-warning-10;
53
53
  }
54
54
 
55
55
  &--grey {
@@ -58,8 +58,8 @@
58
58
  }
59
59
 
60
60
  &--grey-light {
61
- color: $pix-neutral-60;
62
- background-color: $pix-neutral-15;
61
+ color: $pix-neutral-90;
62
+ background-color: $pix-neutral-20;
63
63
  }
64
64
 
65
65
  &--compact {
package/addon/styles/pix-design-tokens/_colors.scss CHANGED
@@ -19,7 +19,7 @@ $pix-secondary-20: #FFE381;
19
19
  $pix-secondary: #FFD235;
20
20
  $pix-secondary-40: #FFBE00;
21
21
  $pix-secondary-50: #EAA600;
22
- $pix-secondary-60: #CE8900;
22
+ $pix-secondary-60: #D87016;
23
23
  $pix-secondary-70: #A95800;
24
24
  $pix-secondary-80: #874D00;
25
25
 
package/app/stories/pix-stars.stories.js CHANGED
@@ -12,7 +12,7 @@ stars.args = {
12
12
  count: 2,
13
13
  total: 5,
14
14
  alt: 'message alternatif',
15
- color: 'blue',
15
+ color: undefined,
16
16
  };
17
17
 
18
18
  export const argTypes = {
@@ -35,8 +35,8 @@ export const argTypes = {
35
35
  name: 'color',
36
36
  description: 'Couleur des étoiles',
37
37
  type: { name: 'string', required: false },
38
- table: { defaultValue: { summary: 'yellow' } },
39
- control: { type: 'select' },
40
- options: ['yellow', 'blue', 'grey'],
38
+ table: { defaultValue: { summary: undefined } },
39
+ control: { type: 'radio' },
40
+ options: [undefined, 'blue', 'grey'],
41
41
  },
42
42
  };
package/app/stories/pix-stars.stories.mdx CHANGED
@@ -10,7 +10,7 @@ Un texte alternatif peut être renseigné et différents styles sont pré-défin
10
10
  Pour ne pas afficher les étoiles vides, il suffit de ne pas donner le total d'étoiles.
11
11
 
12
12
  <Canvas>
13
- <Story name="PixStars" story={stories.stars} height={60} />
13
+ <Story name="PixStars" story={stories.stars} height={70} />
14
14
  </Canvas>
15
15
 
16
16
  ## Usage
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@1024pix/pix-ui",
3
- "version": "29.1.0",
3
+ "version": "30.0.0",
4
4
  "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
5
5
  "keywords": [
6
6
  "ember-addon"