@entur/chip 0.4.23 → 0.4.24

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,10 @@
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.24](https://bitbucket.org/enturas/design-system/compare/@entur/chip@0.4.23...@entur/chip@0.4.24) (2022-03-01)
7
+
8
+ **Note:** Version bump only for package @entur/chip
9
+
6
10
  ## [0.4.23](https://bitbucket.org/enturas/design-system/compare/@entur/chip@0.4.22...@entur/chip@0.4.23) (2022-02-09)
7
11
 
8
12
  **Note:** Version bump only for package @entur/chip
package/dist/styles.css CHANGED
@@ -2,6 +2,35 @@
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-chip {
6
+ background: #ebebf1;
7
+ border: 0.0625rem solid #d1d4e3;
8
+ border-radius: 1rem;
9
+ color: inherit;
10
+ font-family: inherit;
11
+ font-size: 0.875rem;
12
+ height: 2rem;
13
+ min-width: 3rem;
14
+ padding: 0 0.75rem;
15
+ transition: background 0.1s ease-out, border 0.1s ease-out;
16
+ display: flex;
17
+ justify-content: center;
18
+ align-items: center;
19
+ }
20
+ .eds-chip svg {
21
+ font-size: 0.875rem;
22
+ }
23
+ .eds-contrast .eds-chip {
24
+ background-color: #393d79;
25
+ border-color: transparent;
26
+ }
27
+ .eds-chip--leading-icon .eds-icon {
28
+ margin-right: 0.5rem;
29
+ }
30
+ .eds-chip--trailing-icon .eds-icon {
31
+ margin-left: 0.5rem;
32
+ }/* DO NOT CHANGE!*/
33
+ /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
5
34
  .eds-tag-chip {
6
35
  cursor: default;
7
36
  padding-right: 0.25rem;
@@ -38,59 +67,78 @@
38
67
  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
39
68
  }/* DO NOT CHANGE!*/
40
69
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
41
- .eds-chip {
42
- background: #ebebf1;
43
- border: 0.0625rem solid #d1d4e3;
44
- border-radius: 1rem;
45
- color: inherit;
46
- font-family: inherit;
47
- font-size: 0.875rem;
48
- height: 2rem;
49
- min-width: 3rem;
50
- padding: 0 0.75rem;
51
- transition: background 0.1s ease-out, border 0.1s ease-out;
52
- display: flex;
53
- justify-content: center;
54
- align-items: center;
70
+ .eds-filter-chip {
71
+ cursor: pointer;
72
+ user-select: none;
73
+ padding-left: 0.25rem;
74
+ width: fit-content;
55
75
  }
56
- .eds-chip svg {
57
- font-size: 0.875rem;
76
+ .eds-filter-chip__input {
77
+ position: absolute;
78
+ opacity: 0;
79
+ height: 0;
80
+ width: 0;
58
81
  }
59
- .eds-contrast .eds-chip {
60
- background-color: #393d79;
61
- border-color: transparent;
82
+ .eds-filter-chip__input:checked + .eds-filter-chip__icon .eds-filter-chip-icon {
83
+ visibility: visible;
62
84
  }
63
- .eds-chip--leading-icon .eds-icon {
64
- margin-right: 0.5rem;
85
+ .eds-filter-chip__input:checked + .eds-filter-chip__icon .eds-filter-chip-icon__path {
86
+ stroke: #181c56;
87
+ animation: stroke ease-in-out 0.2s 0.1s forwards;
65
88
  }
66
- .eds-chip--trailing-icon .eds-icon {
67
- margin-left: 0.5rem;
68
- }/* DO NOT CHANGE!*/
69
- /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
70
- .eds-action-chip {
71
- cursor: pointer;
89
+ .eds-contrast .eds-filter-chip__input:checked + .eds-filter-chip__icon .eds-filter-chip-icon__path {
90
+ stroke: #5ac39a;
72
91
  }
73
- .eds-action-chip:focus {
92
+ .eds-filter-chip:focus-within {
74
93
  outline: none;
75
94
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
76
95
  outline-offset: 0.125rem;
77
96
  }
78
- .eds-contrast .eds-action-chip:focus {
97
+ .eds-contrast .eds-filter-chip:focus-within {
79
98
  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
80
99
  }
81
- .eds-action-chip:hover {
100
+ .eds-filter-chip:hover {
82
101
  border-color: #181c56;
83
102
  }
84
- .eds-contrast .eds-action-chip:hover {
103
+ .eds-contrast .eds-filter-chip:hover {
85
104
  background-color: #54568c;
86
105
  border-color: #54568c;
87
106
  }
88
- .eds-action-chip:active {
89
- background: #d1d4e3;
107
+ .eds-filter-chip__icon {
108
+ display: inline-flex;
109
+ justify-content: center;
110
+ align-items: center;
111
+ position: relative;
112
+ margin-right: 0.5rem;
113
+ height: 1.5rem;
114
+ width: 1.5rem;
115
+ border: 0.125rem solid transparent;
116
+ border-radius: 50%;
117
+ background-color: #ffffff;
118
+ color: #ffffff;
90
119
  }
91
- .eds-contrast .eds-action-chip:active {
92
- background-color: #292b6a;
93
- border-color: #292b6a;
120
+ .eds-contrast .eds-filter-chip__icon {
121
+ background-color: #181c56;
122
+ }
123
+ .eds-filter-chip__icon .eds-filter-chip-icon {
124
+ height: 1rem;
125
+ width: 1rem;
126
+ visibility: hidden;
127
+ }
128
+ .eds-contrast .eds-filter-chip__icon .eds-filter-chip-icon {
129
+ color: #ffffff;
130
+ }
131
+ .eds-filter-chip__icon .eds-filter-chip-icon__path {
132
+ transform-origin: 50% 50%;
133
+ stroke-dasharray: 48;
134
+ stroke-dashoffset: 48;
135
+ stroke-width: 0.375rem;
136
+ }
137
+
138
+ @keyframes stroke {
139
+ 100% {
140
+ stroke-dashoffset: 0;
141
+ }
94
142
  }/* DO NOT CHANGE!*/
95
143
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
96
144
  .eds-choice-chip {
@@ -163,76 +211,28 @@
163
211
  color: #babbcf;
164
212
  }/* DO NOT CHANGE!*/
165
213
  /* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
166
- .eds-filter-chip {
214
+ .eds-action-chip {
167
215
  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
216
  }
188
- .eds-filter-chip:focus-within {
217
+ .eds-action-chip:focus {
189
218
  outline: none;
190
219
  box-shadow: 0 0 0 0.125rem #ffffff, 0 0 0 0.25rem #181c56;
191
220
  outline-offset: 0.125rem;
192
221
  }
193
- .eds-contrast .eds-filter-chip:focus-within {
222
+ .eds-contrast .eds-action-chip:focus {
194
223
  box-shadow: 0 0 0 0.125rem #181c56, 0 0 0 0.25rem #ffffff;
195
224
  }
196
- .eds-filter-chip:hover {
225
+ .eds-action-chip:hover {
197
226
  border-color: #181c56;
198
227
  }
199
- .eds-contrast .eds-filter-chip:hover {
228
+ .eds-contrast .eds-action-chip:hover {
200
229
  background-color: #54568c;
201
230
  border-color: #54568c;
202
231
  }
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;
215
- }
216
- .eds-contrast .eds-filter-chip__icon {
217
- background-color: #181c56;
218
- }
219
- .eds-filter-chip__icon .eds-filter-chip-icon {
220
- height: 1rem;
221
- width: 1rem;
222
- visibility: hidden;
223
- }
224
- .eds-contrast .eds-filter-chip__icon .eds-filter-chip-icon {
225
- color: #ffffff;
226
- }
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;
232
+ .eds-action-chip:active {
233
+ background: #d1d4e3;
232
234
  }
233
-
234
- @keyframes stroke {
235
- 100% {
236
- stroke-dashoffset: 0;
237
- }
235
+ .eds-contrast .eds-action-chip:active {
236
+ background-color: #292b6a;
237
+ border-color: #292b6a;
238
238
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@entur/chip",
3
- "version": "0.4.23",
3
+ "version": "0.4.24",
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.2.2",
30
+ "@entur/form": "^5.2.3",
31
31
  "@entur/tokens": "^3.3.1",
32
32
  "@entur/utils": "^0.4.3",
33
33
  "classnames": "^2.3.1"
34
34
  },
35
- "gitHead": "61e643371cfc5653c93160b7c220152e5b2bafeb"
35
+ "gitHead": "bf06a9d451cb7f978946c05ce04bb4e6f63379af"
36
36
  }