@1024pix/pix-ui 55.32.2 → 55.33.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 (7) hide show
  1. package/addon/components/pix-tag.gjs +15 -0
  2. package/addon/styles/_pix-icon-button.scss +6 -0
  3. package/addon/styles/_pix-tag.scss +49 -7
  4. package/addon/translations/en.js +3 -0
  5. package/addon/translations/fr.js +3 -0
  6. package/addon/translations/nl.js +3 -0
  7. package/package.json +1 -1
package/addon/components/pix-tag.gjs CHANGED
@@ -1,5 +1,8 @@
1
1
  import Component from '@glimmer/component';
2
2
 
3
+ import { formatMessage } from '../translations';
4
+ import PixIconButton from './pix-icon-button';
5
+
3
6
  export default class PixTag extends Component {
4
7
  get classes() {
5
8
  const { color } = this.args;
@@ -8,9 +11,21 @@ export default class PixTag extends Component {
8
11
  return classes.join(' ');
9
12
  }
10
13
 
14
+ get ariaLabel() {
15
+ return formatMessage(this.args.locale || 'fr', 'tag.removeButton');
16
+ }
17
+
11
18
  <template>
12
19
  <div class="pix-tag {{this.classes}}" ...attributes>
13
20
  {{yield}}
21
+ {{#if @displayRemoveButton}}
22
+ <PixIconButton
23
+ @ariaLabel={{this.ariaLabel}}
24
+ @iconName="close"
25
+ @size="xsmall"
26
+ @triggerAction={{@onRemove}}
27
+ />
28
+ {{/if}}
14
29
  </div>
15
30
  </template>
16
31
  }
package/addon/styles/_pix-icon-button.scss CHANGED
@@ -54,4 +54,10 @@
54
54
  min-width: 2rem;
55
55
  height: 2rem;
56
56
  }
57
+
58
+ &--xsmall {
59
+ width: 1rem;
60
+ min-width: 1rem;
61
+ height: 1rem;
62
+ }
57
63
  }
package/addon/styles/_pix-tag.scss CHANGED
@@ -1,9 +1,11 @@
1
- @use "pix-design-tokens/typography";
1
+ @use 'pix-design-tokens/typography';
2
2
 
3
3
  .pix-tag {
4
4
  @extend %pix-body-s;
5
5
 
6
- display: inline-block;
6
+ display: inline-flex;
7
+ gap: 0.5rem;
8
+ align-items: center;
7
9
  padding: var(--pix-spacing-1x) var(--pix-spacing-4x);
8
10
  color: var(--pix-primary-900);
9
11
  font-weight: var(--pix-font-medium);
@@ -14,11 +16,19 @@
14
16
  border: 1px solid transparent;
15
17
  border-radius: 0.95rem;
16
18
 
19
+ .pix-icon-button {
20
+ color: var(--pix-primary-900);
21
+ }
22
+
17
23
  &--grey-light,
18
24
  &--neutral,
19
25
  &--grey {
20
26
  color: var(--pix-neutral-900);
21
27
  background-color: var(--pix-neutral-100);
28
+
29
+ .pix-icon-button {
30
+ color: var(--pix-neutral-900);
31
+ }
22
32
  }
23
33
 
24
34
  &--yellow-light,
@@ -26,49 +36,81 @@
26
36
  &--yellow {
27
37
  color: var(--pix-secondary-900);
28
38
  background-color: var(--pix-secondary-100);
39
+
40
+ .pix-icon-button {
41
+ color: var(--pix-secondary-900);
42
+ }
29
43
  }
30
44
 
31
- &--purple-light,
32
- &--tertiary,
45
+ &--purple-light,
46
+ &--tertiary,
33
47
  &--blue {
34
48
  color: var(--pix-tertiary-900);
35
49
  background-color: var(--pix-tertiary-100);
50
+
51
+ .pix-icon-button {
52
+ color: var(--pix-tertiary-900);
53
+ }
36
54
  }
37
55
 
38
56
  &--green-light,
39
- &--success,
57
+ &--success,
40
58
  &--green {
41
59
  color: var(--pix-success-900);
42
60
  background-color: var(--pix-success-100);
61
+
62
+ .pix-icon-button {
63
+ color: var(--pix-success-900);
64
+ }
43
65
  }
44
66
 
45
67
  &--error {
46
68
  color: var(--pix-error-900);
47
69
  background-color: var(--pix-error-100);
70
+
71
+ .pix-icon-button {
72
+ color: var(--pix-error-900);
73
+ }
48
74
  }
49
75
 
50
76
  &--purple {
51
77
  color: var(--pix-primary-900);
52
78
  background-color: var(--pix-primary-100);
79
+
80
+ .pix-icon-button {
81
+ color: var(--pix-primary-900);
82
+ }
53
83
  }
54
84
 
55
85
  &--dark {
56
86
  color: var(--pix-neutral-0);
57
87
  background-color: var(--pix-neutral-800);
58
- }
88
+
89
+ .pix-icon-button {
90
+ color: var(--pix-neutral-0);
91
+ }
92
+ }
59
93
 
60
94
  &--blue-light {
61
95
  color: var(--pix-primary-900);
62
96
  background-color: var(--pix-info-50);
97
+
98
+ .pix-icon-button {
99
+ color: var(--pix-primary-900);
100
+ }
63
101
  }
64
102
 
65
103
  &--white {
66
104
  color: var(--pix-neutral-900);
67
105
  background-color: var(--pix-neutral-0);
106
+
107
+ .pix-icon-button {
108
+ color: var(--pix-neutral-900);
109
+ }
68
110
  }
69
111
 
70
112
  &--orga {
71
- /** Deprecated color **/
113
+ /** Deprecated color **/
72
114
  color: var(--pix-orga-50);
73
115
  background-color: var(--pix-orga-500);
74
116
  }
package/addon/translations/en.js CHANGED
@@ -9,4 +9,7 @@ export default {
9
9
  pageNumber: 'Page {current, number} / {total, number}',
10
10
  nextPageLabel: 'Go to next page',
11
11
  },
12
+ tag: {
13
+ removeButton: 'Remove',
14
+ },
12
15
  };
package/addon/translations/fr.js CHANGED
@@ -15,4 +15,7 @@ export default {
15
15
  pageNumber: 'Page {current, number} / {total, number}',
16
16
  nextPageLabel: 'Aller à la page suivante',
17
17
  },
18
+ tag: {
19
+ removeButton: 'Supprimer',
20
+ },
18
21
  };
package/addon/translations/nl.js CHANGED
@@ -9,4 +9,7 @@ export default {
9
9
  pageNumber: 'Pagina {current, number} / {total, number}',
10
10
  nextPageLabel: 'Ga naar volgende pagina',
11
11
  },
12
+ tag: {
13
+ removeButton: 'Verwijderen',
14
+ },
12
15
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@1024pix/pix-ui",
3
- "version": "55.32.2",
3
+ "version": "55.33.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"