@entur/chip 0.4.16 → 0.4.20

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.
package/CHANGELOG.md CHANGED
@@ -3,6 +3,22 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [0.4.20](https://bitbucket.org/enturas/design-system/compare/@entur/chip@0.4.19...@entur/chip@0.4.20) (2021-12-10)
7
+
8
+ **Note:** Version bump only for package @entur/chip
9
+
10
+ ## [0.4.19](https://bitbucket.org/enturas/design-system/compare/@entur/chip@0.4.18...@entur/chip@0.4.19) (2021-11-17)
11
+
12
+ **Note:** Version bump only for package @entur/chip
13
+
14
+ ## [0.4.18](https://bitbucket.org/enturas/design-system/compare/@entur/chip@0.4.17...@entur/chip@0.4.18) (2021-10-25)
15
+
16
+ **Note:** Version bump only for package @entur/chip
17
+
18
+ ## [0.4.17](https://bitbucket.org/enturas/design-system/compare/@entur/chip@0.4.16...@entur/chip@0.4.17) (2021-10-18)
19
+
20
+ **Note:** Version bump only for package @entur/chip
21
+
6
22
  ## [0.4.16](https://bitbucket.org/enturas/design-system/compare/@entur/chip@0.4.15...@entur/chip@0.4.16) (2021-09-23)
7
23
 
8
24
  **Note:** Version bump only for package @entur/chip
package/dist/styles.css CHANGED
@@ -2,32 +2,6 @@
2
2
  --eds-chip: 1;
3
3
  }/* DO NOT CHANGE!*/
4
4
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
- .eds-action-chip {
6
- cursor: pointer;
7
- }
8
- .eds-action-chip:focus {
9
- outline: none;
10
- box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
11
- outline-offset: 0.125rem;
12
- }
13
- .eds-contrast .eds-action-chip:focus {
14
- box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
15
- }
16
- .eds-action-chip:hover {
17
- border-color: #181c56;
18
- }
19
- .eds-contrast .eds-action-chip:hover {
20
- background-color: #54568c;
21
- border-color: #54568c;
22
- }
23
- .eds-action-chip:active {
24
- background: #d1d4e3;
25
- }
26
- .eds-contrast .eds-action-chip:active {
27
- background-color: #292b6a;
28
- border-color: #292b6a;
29
- }/* DO NOT CHANGE!*/
30
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
31
5
  .eds-chip {
32
6
  background: #ebebf1;
33
7
  border: 0.0625rem solid #d1d4e3;
@@ -57,40 +31,78 @@
57
31
  margin-left: 0.5rem;
58
32
  }/* DO NOT CHANGE!*/
59
33
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
60
- .eds-tag-chip {
61
- cursor: default;
62
- padding-right: 0.25rem;
34
+ .eds-filter-chip {
35
+ cursor: pointer;
36
+ user-select: none;
37
+ padding-left: 0.25rem;
63
38
  width: fit-content;
64
39
  }
65
- .eds-tag-chip__close-button {
66
- appearance: none;
67
- background: none;
68
- border: none;
69
- border-radius: 50%;
70
- color: #181c56;
71
- cursor: pointer;
72
- display: flex;
73
- font-size: 0.875rem;
74
- padding: 0.25rem;
75
- margin-left: 0.25rem;
76
- transition: box-shadow 0.1s ease-in-out, background 0.1s ease-in-out;
40
+ .eds-filter-chip__input {
41
+ position: absolute;
42
+ opacity: 0;
43
+ height: 0;
44
+ width: 0;
77
45
  }
78
- .eds-contrast .eds-tag-chip__close-button {
79
- color: #ffffff;
46
+ .eds-filter-chip__input:checked + .eds-filter-chip__icon .eds-filter-chip-icon {
47
+ visibility: visible;
80
48
  }
81
- .eds-tag-chip__close-button:hover {
82
- background: #babbcf;
49
+ .eds-filter-chip__input:checked + .eds-filter-chip__icon .eds-filter-chip-icon__path {
50
+ stroke: #181c56;
51
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
83
52
  }
84
- .eds-contrast .eds-tag-chip__close-button:hover {
85
- background: #54568c;
53
+ .eds-contrast .eds-filter-chip__input:checked + .eds-filter-chip__icon .eds-filter-chip-icon__path {
54
+ stroke: #5ac39a;
86
55
  }
87
- .eds-tag-chip__close-button:focus {
88
- outline-offset: 0.125rem;
56
+ .eds-filter-chip:focus-within {
89
57
  outline: none;
90
58
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
59
+ outline-offset: 0.125rem;
91
60
  }
92
- .eds-contrast .eds-tag-chip__close-button:focus {
61
+ .eds-contrast .eds-filter-chip:focus-within {
93
62
  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
63
+ }
64
+ .eds-filter-chip:hover {
65
+ border-color: #181c56;
66
+ }
67
+ .eds-contrast .eds-filter-chip:hover {
68
+ background-color: #54568c;
69
+ border-color: #54568c;
70
+ }
71
+ .eds-filter-chip__icon {
72
+ display: inline-flex;
73
+ justify-content: center;
74
+ align-items: center;
75
+ position: relative;
76
+ margin-right: 0.5rem;
77
+ height: 1.5rem;
78
+ width: 1.5rem;
79
+ border: 0.125rem solid transparent;
80
+ border-radius: 50%;
81
+ background-color: #ffffff;
82
+ color: #ffffff;
83
+ }
84
+ .eds-contrast .eds-filter-chip__icon {
85
+ background-color: #181c56;
86
+ }
87
+ .eds-filter-chip__icon .eds-filter-chip-icon {
88
+ height: 1rem;
89
+ width: 1rem;
90
+ visibility: hidden;
91
+ }
92
+ .eds-contrast .eds-filter-chip__icon .eds-filter-chip-icon {
93
+ color: #ffffff;
94
+ }
95
+ .eds-filter-chip__icon .eds-filter-chip-icon__path {
96
+ transform-origin: 50% 50%;
97
+ stroke-dasharray: 48;
98
+ stroke-dashoffset: 48;
99
+ stroke-width: 0.375rem;
100
+ }
101
+
102
+ @keyframes stroke {
103
+ 100% {
104
+ stroke-dashoffset: 0;
105
+ }
94
106
  }/* DO NOT CHANGE!*/
95
107
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
96
108
  .eds-choice-chip {
@@ -163,76 +175,64 @@
163
175
  color: #babbcf;
164
176
  }/* DO NOT CHANGE!*/
165
177
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
166
- .eds-filter-chip {
178
+ .eds-action-chip {
167
179
  cursor: pointer;
168
- user-select: none;
169
- padding-left: 0.25rem;
170
- width: fit-content;
171
- }
172
- .eds-filter-chip__input {
173
- position: absolute;
174
- opacity: 0;
175
- height: 0;
176
- width: 0;
177
- }
178
- .eds-filter-chip__input:checked + .eds-filter-chip__icon .eds-filter-chip-icon {
179
- visibility: visible;
180
- }
181
- .eds-filter-chip__input:checked + .eds-filter-chip__icon .eds-filter-chip-icon__path {
182
- stroke: #181c56;
183
- animation: stroke ease-in-out 0.2s 0.1s forwards;
184
- }
185
- .eds-contrast .eds-filter-chip__input:checked + .eds-filter-chip__icon .eds-filter-chip-icon__path {
186
- stroke: #5ac39a;
187
180
  }
188
- .eds-filter-chip:focus-within {
181
+ .eds-action-chip:focus {
189
182
  outline: none;
190
183
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
191
184
  outline-offset: 0.125rem;
192
185
  }
193
- .eds-contrast .eds-filter-chip:focus-within {
186
+ .eds-contrast .eds-action-chip:focus {
194
187
  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
195
188
  }
196
- .eds-filter-chip:hover {
189
+ .eds-action-chip:hover {
197
190
  border-color: #181c56;
198
191
  }
199
- .eds-contrast .eds-filter-chip:hover {
192
+ .eds-contrast .eds-action-chip:hover {
200
193
  background-color: #54568c;
201
194
  border-color: #54568c;
202
195
  }
203
- .eds-filter-chip__icon {
204
- display: inline-flex;
205
- justify-content: center;
206
- align-items: center;
207
- position: relative;
208
- margin-right: 0.5rem;
209
- height: 1.5rem;
210
- width: 1.5rem;
211
- border: 0.125rem solid transparent;
212
- border-radius: 50%;
213
- background-color: #ffffff;
214
- color: #ffffff;
196
+ .eds-action-chip:active {
197
+ background: #d1d4e3;
215
198
  }
216
- .eds-contrast .eds-filter-chip__icon {
217
- background-color: #181c56;
199
+ .eds-contrast .eds-action-chip:active {
200
+ background-color: #292b6a;
201
+ border-color: #292b6a;
202
+ }/* DO NOT CHANGE!*/
203
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
204
+ .eds-tag-chip {
205
+ cursor: default;
206
+ padding-right: 0.25rem;
207
+ width: fit-content;
218
208
  }
219
- .eds-filter-chip__icon .eds-filter-chip-icon {
220
- height: 1rem;
221
- width: 1rem;
222
- visibility: hidden;
209
+ .eds-tag-chip__close-button {
210
+ appearance: none;
211
+ background: none;
212
+ border: none;
213
+ border-radius: 50%;
214
+ color: #181c56;
215
+ cursor: pointer;
216
+ display: flex;
217
+ font-size: 0.875rem;
218
+ padding: 0.25rem;
219
+ margin-left: 0.25rem;
220
+ transition: box-shadow 0.1s ease-in-out, background 0.1s ease-in-out;
223
221
  }
224
- .eds-contrast .eds-filter-chip__icon .eds-filter-chip-icon {
222
+ .eds-contrast .eds-tag-chip__close-button {
225
223
  color: #ffffff;
226
224
  }
227
- .eds-filter-chip__icon .eds-filter-chip-icon__path {
228
- transform-origin: 50% 50%;
229
- stroke-dasharray: 48;
230
- stroke-dashoffset: 48;
231
- stroke-width: 0.375rem;
225
+ .eds-tag-chip__close-button:hover {
226
+ background: #babbcf;
232
227
  }
233
-
234
- @keyframes stroke {
235
- 100% {
236
- stroke-dashoffset: 0;
237
- }
228
+ .eds-contrast .eds-tag-chip__close-button:hover {
229
+ background: #54568c;
230
+ }
231
+ .eds-tag-chip__close-button:focus {
232
+ outline-offset: 0.125rem;
233
+ outline: none;
234
+ box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
235
+ }
236
+ .eds-contrast .eds-tag-chip__close-button:focus {
237
+ box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
238
238
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/chip",
3
- "version": "0.4.16",
3
+ "version": "0.4.20",
4
4
  "license": "EUPL-1.2",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/chip.esm.js",
@@ -27,10 +27,10 @@
27
27
  "react-dom": ">=16.8.0"
28
28
  },
29
29
  "dependencies": {
30
- "@entur/form": "^5.1.1",
31
- "@entur/tokens": "^3.2.1",
30
+ "@entur/form": "^5.1.5",
31
+ "@entur/tokens": "^3.3.0",
32
32
  "@entur/utils": "^0.4.2",
33
33
  "classnames": "^2.3.1"
34
34
  },
35
- "gitHead": "d3611d9b3374c6aafc0b95b9ebac011f7b1a7785"
35
+ "gitHead": "4344fc544585636bf5e7f20a1783cb1807082081"
36
36
  }