@khanacademy/wonder-blocks-labeled-field 2.0.1 → 2.1.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.
- package/CHANGELOG.md +165 -136
- package/LICENSE +21 -0
- package/dist/es/index.js +1 -63
- package/dist/index.js +18 -88
- package/package.json +10 -11
package/CHANGELOG.md
CHANGED
|
@@ -1,309 +1,338 @@
|
|
|
1
1
|
# @khanacademy/wonder-blocks-labeled-field
|
|
2
2
|
|
|
3
|
+
## 2.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- f03298f: Tooling:
|
|
8
|
+
|
|
9
|
+
- Switching to `pnpm`.
|
|
10
|
+
- Upgrading `rollup` to v4 and `@babel/runtime` to match the current webapp version.
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- bb2a026: pnpm: Switch to workspace protocol to handle dependency versions with changesets on monorepo setup"
|
|
15
|
+
- Updated dependencies [969864b]
|
|
16
|
+
- Updated dependencies [bb2a026]
|
|
17
|
+
- Updated dependencies [f03298f]
|
|
18
|
+
- @khanacademy/wonder-blocks-core@12.1.0
|
|
19
|
+
- @khanacademy/wonder-blocks-typography@3.1.0
|
|
20
|
+
- @khanacademy/wonder-blocks-layout@3.1.0
|
|
21
|
+
- @khanacademy/wonder-blocks-tokens@4.2.0
|
|
22
|
+
|
|
23
|
+
## 2.0.2
|
|
24
|
+
|
|
25
|
+
### Patch Changes
|
|
26
|
+
|
|
27
|
+
- Updated dependencies [0199324d]
|
|
28
|
+
- @khanacademy/wonder-blocks-core@12.0.0
|
|
29
|
+
- @khanacademy/wonder-blocks-layout@3.0.8
|
|
30
|
+
- @khanacademy/wonder-blocks-typography@3.0.6
|
|
31
|
+
|
|
3
32
|
## 2.0.1
|
|
4
33
|
|
|
5
34
|
### Patch Changes
|
|
6
35
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
36
|
+
- Updated dependencies [8cfaeab0]
|
|
37
|
+
- Updated dependencies [c162abb4]
|
|
38
|
+
- @khanacademy/wonder-blocks-tokens@4.1.0
|
|
39
|
+
- @khanacademy/wonder-blocks-layout@3.0.7
|
|
11
40
|
|
|
12
41
|
## 2.0.0
|
|
13
42
|
|
|
14
43
|
### Major Changes
|
|
15
44
|
|
|
16
|
-
-
|
|
45
|
+
- 8d26588f: Remove `light` variant/prop from `LabeledField` as it is no longer needed/recommended.
|
|
17
46
|
|
|
18
47
|
### Patch Changes
|
|
19
48
|
|
|
20
|
-
-
|
|
21
|
-
-
|
|
22
|
-
-
|
|
49
|
+
- Updated dependencies [0de25cd8]
|
|
50
|
+
- @khanacademy/wonder-blocks-tokens@4.0.0
|
|
51
|
+
- @khanacademy/wonder-blocks-layout@3.0.6
|
|
23
52
|
|
|
24
53
|
## 1.1.1
|
|
25
54
|
|
|
26
55
|
### Patch Changes
|
|
27
56
|
|
|
28
|
-
-
|
|
57
|
+
- dce7d780: Make labeled-field package public
|
|
29
58
|
|
|
30
59
|
## 1.1.0
|
|
31
60
|
|
|
32
61
|
### Minor Changes
|
|
33
62
|
|
|
34
|
-
-
|
|
35
|
-
-
|
|
36
|
-
-
|
|
37
|
-
-
|
|
38
|
-
-
|
|
63
|
+
- 0869c5ee: - Update `LabeledField` styling to use semantic tokens to match Figma specs
|
|
64
|
+
- Add error icon to the error message. This addresses accessibility issues related to color being the only way to communicate information
|
|
65
|
+
- Add a labels prop so that a translated label for the error icon can be passed in
|
|
66
|
+
- Handle long text overflow with and without word breaks
|
|
67
|
+
- dea7c71e: LabeledField: Wire up attributes for elements and apply attributes to the field element
|
|
39
68
|
|
|
40
69
|
### Patch Changes
|
|
41
70
|
|
|
42
|
-
-
|
|
43
|
-
-
|
|
44
|
-
-
|
|
45
|
-
-
|
|
46
|
-
-
|
|
47
|
-
-
|
|
71
|
+
- fd29f864: LabeledField: Refactor from class component to function component
|
|
72
|
+
- ed8fb7bd: Makes sure custom required messages passed into `LabeledField` or the `field` prop are displayed
|
|
73
|
+
- d9bc865b: Set required, error and light props for LabeledField and field component if it is set on either LabeledField or field component
|
|
74
|
+
- d9bc865b: Use `errorMessage` prop instead of `error` prop for consistency (`error` prop is used for boolean props in form field components).
|
|
75
|
+
- d9bc865b: LabeledField: Let `required` prop be a boolean or string so it can be passed down to the field prop
|
|
76
|
+
- daf459a1: Sets up the initial implementation for LabeledField based on the internal FieldHeading component in the form package
|
|
48
77
|
|
|
49
78
|
## 1.0.5
|
|
50
79
|
|
|
51
80
|
### Patch Changes
|
|
52
81
|
|
|
53
|
-
-
|
|
54
|
-
-
|
|
55
|
-
-
|
|
56
|
-
-
|
|
82
|
+
- Updated dependencies [7516b239]
|
|
83
|
+
- @khanacademy/wonder-blocks-core@11.1.0
|
|
84
|
+
- @khanacademy/wonder-blocks-layout@3.0.5
|
|
85
|
+
- @khanacademy/wonder-blocks-typography@3.0.5
|
|
57
86
|
|
|
58
87
|
## 1.0.4
|
|
59
88
|
|
|
60
89
|
### Patch Changes
|
|
61
90
|
|
|
62
|
-
-
|
|
63
|
-
-
|
|
64
|
-
-
|
|
65
|
-
-
|
|
66
|
-
-
|
|
67
|
-
-
|
|
91
|
+
- 11a0f5c6: No functional changes. Adding prepublishOnly script.
|
|
92
|
+
- Updated dependencies [11a0f5c6]
|
|
93
|
+
- @khanacademy/wonder-blocks-typography@3.0.4
|
|
94
|
+
- @khanacademy/wonder-blocks-layout@3.0.4
|
|
95
|
+
- @khanacademy/wonder-blocks-tokens@3.0.1
|
|
96
|
+
- @khanacademy/wonder-blocks-core@11.0.1
|
|
68
97
|
|
|
69
98
|
## 1.0.3
|
|
70
99
|
|
|
71
100
|
### Patch Changes
|
|
72
101
|
|
|
73
|
-
-
|
|
74
|
-
-
|
|
75
|
-
-
|
|
76
|
-
-
|
|
102
|
+
- Updated dependencies [d23c9c5f]
|
|
103
|
+
- @khanacademy/wonder-blocks-core@11.0.0
|
|
104
|
+
- @khanacademy/wonder-blocks-layout@3.0.3
|
|
105
|
+
- @khanacademy/wonder-blocks-typography@3.0.3
|
|
77
106
|
|
|
78
107
|
## 1.0.2
|
|
79
108
|
|
|
80
109
|
### Patch Changes
|
|
81
110
|
|
|
82
|
-
-
|
|
83
|
-
-
|
|
84
|
-
-
|
|
85
|
-
-
|
|
86
|
-
-
|
|
87
|
-
-
|
|
111
|
+
- Updated dependencies [b6009b77]
|
|
112
|
+
- Updated dependencies [897686bc]
|
|
113
|
+
- Updated dependencies [56d961f1]
|
|
114
|
+
- @khanacademy/wonder-blocks-core@10.0.0
|
|
115
|
+
- @khanacademy/wonder-blocks-layout@3.0.2
|
|
116
|
+
- @khanacademy/wonder-blocks-typography@3.0.2
|
|
88
117
|
|
|
89
118
|
## 1.0.1
|
|
90
119
|
|
|
91
120
|
### Patch Changes
|
|
92
121
|
|
|
93
|
-
-
|
|
94
|
-
-
|
|
95
|
-
-
|
|
96
|
-
-
|
|
122
|
+
- Updated dependencies [f4abd572]
|
|
123
|
+
- @khanacademy/wonder-blocks-core@9.0.0
|
|
124
|
+
- @khanacademy/wonder-blocks-layout@3.0.1
|
|
125
|
+
- @khanacademy/wonder-blocks-typography@3.0.1
|
|
97
126
|
|
|
98
127
|
## 1.0.0
|
|
99
128
|
|
|
100
129
|
### Major Changes
|
|
101
130
|
|
|
102
|
-
-
|
|
131
|
+
- e6abdd17: Upgrade to React 18
|
|
103
132
|
|
|
104
133
|
### Patch Changes
|
|
105
134
|
|
|
106
|
-
-
|
|
107
|
-
-
|
|
108
|
-
-
|
|
109
|
-
-
|
|
110
|
-
-
|
|
135
|
+
- Updated dependencies [e6abdd17]
|
|
136
|
+
- @khanacademy/wonder-blocks-core@8.0.0
|
|
137
|
+
- @khanacademy/wonder-blocks-layout@3.0.0
|
|
138
|
+
- @khanacademy/wonder-blocks-tokens@3.0.0
|
|
139
|
+
- @khanacademy/wonder-blocks-typography@3.0.0
|
|
111
140
|
|
|
112
141
|
## 0.1.21
|
|
113
142
|
|
|
114
143
|
### Patch Changes
|
|
115
144
|
|
|
116
|
-
-
|
|
117
|
-
-
|
|
118
|
-
-
|
|
145
|
+
- Updated dependencies [6999fd39]
|
|
146
|
+
- @khanacademy/wonder-blocks-tokens@2.1.0
|
|
147
|
+
- @khanacademy/wonder-blocks-layout@2.2.2
|
|
119
148
|
|
|
120
149
|
## 0.1.20
|
|
121
150
|
|
|
122
151
|
### Patch Changes
|
|
123
152
|
|
|
124
|
-
-
|
|
125
|
-
-
|
|
126
|
-
-
|
|
127
|
-
-
|
|
128
|
-
-
|
|
129
|
-
-
|
|
153
|
+
- 02a1b298: Make sure we don't package tsconfig and tsbuildinfo files
|
|
154
|
+
- Updated dependencies [02a1b298]
|
|
155
|
+
- @khanacademy/wonder-blocks-core@7.0.1
|
|
156
|
+
- @khanacademy/wonder-blocks-layout@2.2.1
|
|
157
|
+
- @khanacademy/wonder-blocks-tokens@2.0.1
|
|
158
|
+
- @khanacademy/wonder-blocks-typography@2.1.16
|
|
130
159
|
|
|
131
160
|
## 0.1.19
|
|
132
161
|
|
|
133
162
|
### Patch Changes
|
|
134
163
|
|
|
135
|
-
-
|
|
136
|
-
-
|
|
137
|
-
-
|
|
138
|
-
-
|
|
164
|
+
- Updated dependencies [07f7f407]
|
|
165
|
+
- @khanacademy/wonder-blocks-core@7.0.0
|
|
166
|
+
- @khanacademy/wonder-blocks-layout@2.2.0
|
|
167
|
+
- @khanacademy/wonder-blocks-typography@2.1.15
|
|
139
168
|
|
|
140
169
|
## 0.1.18
|
|
141
170
|
|
|
142
171
|
### Patch Changes
|
|
143
172
|
|
|
144
|
-
-
|
|
145
|
-
-
|
|
146
|
-
-
|
|
147
|
-
-
|
|
173
|
+
- Updated dependencies [f17dc1ee]
|
|
174
|
+
- Updated dependencies [991eb43f]
|
|
175
|
+
- @khanacademy/wonder-blocks-tokens@2.0.0
|
|
176
|
+
- @khanacademy/wonder-blocks-layout@2.1.3
|
|
148
177
|
|
|
149
178
|
## 0.1.17
|
|
150
179
|
|
|
151
180
|
### Patch Changes
|
|
152
181
|
|
|
153
|
-
-
|
|
154
|
-
-
|
|
155
|
-
-
|
|
156
|
-
-
|
|
157
|
-
-
|
|
158
|
-
-
|
|
182
|
+
- 559e82d5: Update to build tooling, generating smaller output
|
|
183
|
+
- Updated dependencies [559e82d5]
|
|
184
|
+
- @khanacademy/wonder-blocks-core@6.4.3
|
|
185
|
+
- @khanacademy/wonder-blocks-layout@2.1.2
|
|
186
|
+
- @khanacademy/wonder-blocks-tokens@1.3.1
|
|
187
|
+
- @khanacademy/wonder-blocks-typography@2.1.14
|
|
159
188
|
|
|
160
189
|
## 0.1.16
|
|
161
190
|
|
|
162
191
|
### Patch Changes
|
|
163
192
|
|
|
164
|
-
-
|
|
165
|
-
-
|
|
166
|
-
-
|
|
167
|
-
-
|
|
193
|
+
- Updated dependencies [eab37b8b]
|
|
194
|
+
- @khanacademy/wonder-blocks-core@6.4.2
|
|
195
|
+
- @khanacademy/wonder-blocks-layout@2.1.1
|
|
196
|
+
- @khanacademy/wonder-blocks-typography@2.1.13
|
|
168
197
|
|
|
169
198
|
## 0.1.15
|
|
170
199
|
|
|
171
200
|
### Patch Changes
|
|
172
201
|
|
|
173
|
-
-
|
|
174
|
-
-
|
|
202
|
+
- Updated dependencies [47a758b6]
|
|
203
|
+
- @khanacademy/wonder-blocks-layout@2.1.0
|
|
175
204
|
|
|
176
205
|
## 0.1.14
|
|
177
206
|
|
|
178
207
|
### Patch Changes
|
|
179
208
|
|
|
180
|
-
-
|
|
181
|
-
-
|
|
182
|
-
-
|
|
183
|
-
-
|
|
209
|
+
- Updated dependencies [5dfac06e]
|
|
210
|
+
- @khanacademy/wonder-blocks-core@6.4.1
|
|
211
|
+
- @khanacademy/wonder-blocks-layout@2.0.33
|
|
212
|
+
- @khanacademy/wonder-blocks-typography@2.1.12
|
|
184
213
|
|
|
185
214
|
## 0.1.13
|
|
186
215
|
|
|
187
216
|
### Patch Changes
|
|
188
217
|
|
|
189
|
-
-
|
|
190
|
-
-
|
|
191
|
-
-
|
|
218
|
+
- Updated dependencies [9bfeead9]
|
|
219
|
+
- @khanacademy/wonder-blocks-tokens@1.3.0
|
|
220
|
+
- @khanacademy/wonder-blocks-layout@2.0.32
|
|
192
221
|
|
|
193
222
|
## 0.1.12
|
|
194
223
|
|
|
195
224
|
### Patch Changes
|
|
196
225
|
|
|
197
|
-
-
|
|
198
|
-
-
|
|
199
|
-
-
|
|
200
|
-
-
|
|
226
|
+
- Updated dependencies [58075352]
|
|
227
|
+
- @khanacademy/wonder-blocks-core@6.4.0
|
|
228
|
+
- @khanacademy/wonder-blocks-layout@2.0.31
|
|
229
|
+
- @khanacademy/wonder-blocks-typography@2.1.11
|
|
201
230
|
|
|
202
231
|
## 0.1.11
|
|
203
232
|
|
|
204
233
|
### Patch Changes
|
|
205
234
|
|
|
206
|
-
-
|
|
207
|
-
-
|
|
208
|
-
-
|
|
209
|
-
-
|
|
210
|
-
-
|
|
235
|
+
- Updated dependencies [874081aa]
|
|
236
|
+
- Updated dependencies [874081aa]
|
|
237
|
+
- Updated dependencies [a9bf603a]
|
|
238
|
+
- @khanacademy/wonder-blocks-tokens@1.2.0
|
|
239
|
+
- @khanacademy/wonder-blocks-layout@2.0.30
|
|
211
240
|
|
|
212
241
|
## 0.1.10
|
|
213
242
|
|
|
214
243
|
### Patch Changes
|
|
215
244
|
|
|
216
|
-
-
|
|
217
|
-
-
|
|
245
|
+
- Updated dependencies [c39bfd29]
|
|
246
|
+
- @khanacademy/wonder-blocks-layout@2.0.29
|
|
218
247
|
|
|
219
248
|
## 0.1.9
|
|
220
249
|
|
|
221
250
|
### Patch Changes
|
|
222
251
|
|
|
223
|
-
-
|
|
224
|
-
-
|
|
225
|
-
-
|
|
252
|
+
- Updated dependencies [4cfb4977]
|
|
253
|
+
- @khanacademy/wonder-blocks-tokens@1.1.0
|
|
254
|
+
- @khanacademy/wonder-blocks-layout@2.0.28
|
|
226
255
|
|
|
227
256
|
## 0.1.8
|
|
228
257
|
|
|
229
258
|
### Patch Changes
|
|
230
259
|
|
|
231
|
-
-
|
|
232
|
-
-
|
|
233
|
-
-
|
|
260
|
+
- Updated dependencies [e83f8991]
|
|
261
|
+
- @khanacademy/wonder-blocks-tokens@1.0.0
|
|
262
|
+
- @khanacademy/wonder-blocks-layout@2.0.27
|
|
234
263
|
|
|
235
264
|
## 0.1.7
|
|
236
265
|
|
|
237
266
|
### Patch Changes
|
|
238
267
|
|
|
239
|
-
-
|
|
240
|
-
-
|
|
241
|
-
-
|
|
242
|
-
-
|
|
243
|
-
-
|
|
244
|
-
-
|
|
245
|
-
-
|
|
268
|
+
- 60aba5b8: Update internal spacing references (from wb-spacing to wb-tokens)
|
|
269
|
+
- 7c51f377: Migrate wb-color imports to use tokens.color
|
|
270
|
+
- Updated dependencies [60aba5b8]
|
|
271
|
+
- Updated dependencies [7cd7f6cc]
|
|
272
|
+
- Updated dependencies [7c51f377]
|
|
273
|
+
- @khanacademy/wonder-blocks-layout@2.0.26
|
|
274
|
+
- @khanacademy/wonder-blocks-tokens@0.2.0
|
|
246
275
|
|
|
247
276
|
## 0.1.6
|
|
248
277
|
|
|
249
278
|
### Patch Changes
|
|
250
279
|
|
|
251
|
-
-
|
|
252
|
-
-
|
|
253
|
-
-
|
|
254
|
-
-
|
|
280
|
+
- Updated dependencies [6df21f71]
|
|
281
|
+
- @khanacademy/wonder-blocks-core@6.3.1
|
|
282
|
+
- @khanacademy/wonder-blocks-layout@2.0.25
|
|
283
|
+
- @khanacademy/wonder-blocks-typography@2.1.10
|
|
255
284
|
|
|
256
285
|
## 0.1.5
|
|
257
286
|
|
|
258
287
|
### Patch Changes
|
|
259
288
|
|
|
260
|
-
-
|
|
261
|
-
-
|
|
262
|
-
-
|
|
263
|
-
-
|
|
289
|
+
- Updated dependencies [7055ca94]
|
|
290
|
+
- @khanacademy/wonder-blocks-core@6.3.0
|
|
291
|
+
- @khanacademy/wonder-blocks-layout@2.0.24
|
|
292
|
+
- @khanacademy/wonder-blocks-typography@2.1.9
|
|
264
293
|
|
|
265
294
|
## 0.1.4
|
|
266
295
|
|
|
267
296
|
### Patch Changes
|
|
268
297
|
|
|
269
|
-
-
|
|
270
|
-
-
|
|
298
|
+
- Updated dependencies [b6fbd635]
|
|
299
|
+
- @khanacademy/wonder-blocks-layout@2.0.23
|
|
271
300
|
|
|
272
301
|
## 0.1.3
|
|
273
302
|
|
|
274
303
|
### Patch Changes
|
|
275
304
|
|
|
276
|
-
-
|
|
277
|
-
-
|
|
305
|
+
- Updated dependencies [48d3c7e9]
|
|
306
|
+
- @khanacademy/wonder-blocks-color@3.0.0
|
|
278
307
|
|
|
279
308
|
## 0.1.2
|
|
280
309
|
|
|
281
310
|
### Patch Changes
|
|
282
311
|
|
|
283
|
-
-
|
|
284
|
-
-
|
|
285
|
-
-
|
|
286
|
-
-
|
|
312
|
+
- Updated dependencies [4b97b9a2]
|
|
313
|
+
- @khanacademy/wonder-blocks-core@6.2.0
|
|
314
|
+
- @khanacademy/wonder-blocks-layout@2.0.22
|
|
315
|
+
- @khanacademy/wonder-blocks-typography@2.1.8
|
|
287
316
|
|
|
288
317
|
## 0.1.1
|
|
289
318
|
|
|
290
319
|
### Patch Changes
|
|
291
320
|
|
|
292
|
-
-
|
|
293
|
-
-
|
|
294
|
-
-
|
|
295
|
-
-
|
|
321
|
+
- Updated dependencies [2871f0a9]
|
|
322
|
+
- @khanacademy/wonder-blocks-core@6.1.1
|
|
323
|
+
- @khanacademy/wonder-blocks-layout@2.0.21
|
|
324
|
+
- @khanacademy/wonder-blocks-typography@2.1.7
|
|
296
325
|
|
|
297
326
|
## 0.1.0
|
|
298
327
|
|
|
299
328
|
### Minor Changes
|
|
300
329
|
|
|
301
|
-
-
|
|
330
|
+
- db74f86f: Add skeleton for new labeled field package
|
|
302
331
|
|
|
303
332
|
### Patch Changes
|
|
304
333
|
|
|
305
|
-
-
|
|
306
|
-
-
|
|
307
|
-
-
|
|
308
|
-
-
|
|
309
|
-
-
|
|
334
|
+
- Updated dependencies [efb59c29]
|
|
335
|
+
- Updated dependencies [8bc40ed2]
|
|
336
|
+
- @khanacademy/wonder-blocks-core@6.1.0
|
|
337
|
+
- @khanacademy/wonder-blocks-layout@2.0.20
|
|
338
|
+
- @khanacademy/wonder-blocks-typography@2.1.6
|
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2018 Khan Academy
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/es/index.js
CHANGED
|
@@ -5,69 +5,7 @@ import { addStyle, View } from '@khanacademy/wonder-blocks-core';
|
|
|
5
5
|
import { Strut } from '@khanacademy/wonder-blocks-layout';
|
|
6
6
|
import { semanticColor, spacing } from '@khanacademy/wonder-blocks-tokens';
|
|
7
7
|
import { LabelMedium, LabelSmall } from '@khanacademy/wonder-blocks-typography';
|
|
8
|
-
import
|
|
9
|
-
import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
|
|
10
|
-
|
|
11
|
-
const viewportPixelsForSize = size => ({
|
|
12
|
-
small: 16,
|
|
13
|
-
medium: 24,
|
|
14
|
-
large: 48,
|
|
15
|
-
xlarge: 96
|
|
16
|
-
})[size];
|
|
17
|
-
const _excluded = ["color", "icon", "size", "style", "testId", "className", "role"];
|
|
18
|
-
const StyledIcon = addStyle("span");
|
|
19
|
-
const PhosphorIcon = React.forwardRef(function PhosphorIcon(props, ref) {
|
|
20
|
-
const {
|
|
21
|
-
color = "currentColor",
|
|
22
|
-
icon,
|
|
23
|
-
size = "small",
|
|
24
|
-
style,
|
|
25
|
-
testId,
|
|
26
|
-
className,
|
|
27
|
-
role
|
|
28
|
-
} = props,
|
|
29
|
-
sharedProps = _objectWithoutPropertiesLoose(props, _excluded);
|
|
30
|
-
const pixelSize = viewportPixelsForSize(size);
|
|
31
|
-
const classNames = `${className != null ? className : ""}`;
|
|
32
|
-
const iconStyles = _generateStyles(color, pixelSize);
|
|
33
|
-
return React.createElement(StyledIcon, _extends({}, sharedProps, {
|
|
34
|
-
className: classNames,
|
|
35
|
-
style: [styles$1.svg, iconStyles.icon, {
|
|
36
|
-
maskImage: `url(${icon})`
|
|
37
|
-
}, style],
|
|
38
|
-
"data-testid": testId,
|
|
39
|
-
ref: ref,
|
|
40
|
-
role: (role != null ? role : sharedProps["aria-label"]) ? "img" : undefined
|
|
41
|
-
}));
|
|
42
|
-
});
|
|
43
|
-
const dynamicStyles = {};
|
|
44
|
-
const _generateStyles = (color, size) => {
|
|
45
|
-
const iconStyle = `${color}-${size}`;
|
|
46
|
-
if (styles$1[iconStyle]) {
|
|
47
|
-
return styles$1[iconStyle];
|
|
48
|
-
}
|
|
49
|
-
const newStyles = {
|
|
50
|
-
icon: {
|
|
51
|
-
backgroundColor: color,
|
|
52
|
-
width: size,
|
|
53
|
-
height: size
|
|
54
|
-
}
|
|
55
|
-
};
|
|
56
|
-
dynamicStyles[iconStyle] = StyleSheet.create(newStyles);
|
|
57
|
-
return dynamicStyles[iconStyle];
|
|
58
|
-
};
|
|
59
|
-
const styles$1 = StyleSheet.create({
|
|
60
|
-
svg: {
|
|
61
|
-
display: "inline-block",
|
|
62
|
-
verticalAlign: "text-bottom",
|
|
63
|
-
flexShrink: 0,
|
|
64
|
-
flexGrow: 0,
|
|
65
|
-
maskSize: "100%",
|
|
66
|
-
maskRepeat: "no-repeat",
|
|
67
|
-
maskPosition: "center"
|
|
68
|
-
}
|
|
69
|
-
});
|
|
70
|
-
PhosphorIcon.displayName = "PhosphorIcon";
|
|
8
|
+
import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
|
|
71
9
|
|
|
72
10
|
const defaultLabeledFieldLabels = {
|
|
73
11
|
errorIconAriaLabel: "Error:"
|
package/dist/index.js
CHANGED
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
3
|
var React = require('react');
|
|
6
4
|
var aphrodite = require('aphrodite');
|
|
7
5
|
var WarningCircle = require('@phosphor-icons/core/bold/warning-circle-bold.svg');
|
|
@@ -9,94 +7,26 @@ var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
|
|
|
9
7
|
var wonderBlocksLayout = require('@khanacademy/wonder-blocks-layout');
|
|
10
8
|
var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
|
|
11
9
|
var wonderBlocksTypography = require('@khanacademy/wonder-blocks-typography');
|
|
12
|
-
var
|
|
13
|
-
var _objectWithoutPropertiesLoose = require('@babel/runtime/helpers/objectWithoutPropertiesLoose');
|
|
14
|
-
|
|
15
|
-
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
10
|
+
var wonderBlocksIcon = require('@khanacademy/wonder-blocks-icon');
|
|
16
11
|
|
|
17
|
-
function
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
12
|
+
function _interopNamespaceDefault(e) {
|
|
13
|
+
var n = Object.create(null);
|
|
14
|
+
if (e) {
|
|
15
|
+
Object.keys(e).forEach(function (k) {
|
|
16
|
+
if (k !== 'default') {
|
|
17
|
+
var d = Object.getOwnPropertyDescriptor(e, k);
|
|
18
|
+
Object.defineProperty(n, k, d.get ? d : {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () { return e[k]; }
|
|
21
|
+
});
|
|
22
|
+
}
|
|
27
23
|
});
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
n["default"] = e;
|
|
32
|
-
return Object.freeze(n);
|
|
24
|
+
}
|
|
25
|
+
n.default = e;
|
|
26
|
+
return Object.freeze(n);
|
|
33
27
|
}
|
|
34
28
|
|
|
35
|
-
var React__namespace = /*#__PURE__*/
|
|
36
|
-
var WarningCircle__default = /*#__PURE__*/_interopDefaultLegacy(WarningCircle);
|
|
37
|
-
var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
|
|
38
|
-
var _objectWithoutPropertiesLoose__default = /*#__PURE__*/_interopDefaultLegacy(_objectWithoutPropertiesLoose);
|
|
39
|
-
|
|
40
|
-
const viewportPixelsForSize = size => ({
|
|
41
|
-
small: 16,
|
|
42
|
-
medium: 24,
|
|
43
|
-
large: 48,
|
|
44
|
-
xlarge: 96
|
|
45
|
-
})[size];
|
|
46
|
-
const _excluded = ["color", "icon", "size", "style", "testId", "className", "role"];
|
|
47
|
-
const StyledIcon = wonderBlocksCore.addStyle("span");
|
|
48
|
-
const PhosphorIcon = React__namespace.forwardRef(function PhosphorIcon(props, ref) {
|
|
49
|
-
const {
|
|
50
|
-
color = "currentColor",
|
|
51
|
-
icon,
|
|
52
|
-
size = "small",
|
|
53
|
-
style,
|
|
54
|
-
testId,
|
|
55
|
-
className,
|
|
56
|
-
role
|
|
57
|
-
} = props,
|
|
58
|
-
sharedProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
|
|
59
|
-
const pixelSize = viewportPixelsForSize(size);
|
|
60
|
-
const classNames = `${className != null ? className : ""}`;
|
|
61
|
-
const iconStyles = _generateStyles(color, pixelSize);
|
|
62
|
-
return React__namespace.createElement(StyledIcon, _extends__default["default"]({}, sharedProps, {
|
|
63
|
-
className: classNames,
|
|
64
|
-
style: [styles$1.svg, iconStyles.icon, {
|
|
65
|
-
maskImage: `url(${icon})`
|
|
66
|
-
}, style],
|
|
67
|
-
"data-testid": testId,
|
|
68
|
-
ref: ref,
|
|
69
|
-
role: (role != null ? role : sharedProps["aria-label"]) ? "img" : undefined
|
|
70
|
-
}));
|
|
71
|
-
});
|
|
72
|
-
const dynamicStyles = {};
|
|
73
|
-
const _generateStyles = (color, size) => {
|
|
74
|
-
const iconStyle = `${color}-${size}`;
|
|
75
|
-
if (styles$1[iconStyle]) {
|
|
76
|
-
return styles$1[iconStyle];
|
|
77
|
-
}
|
|
78
|
-
const newStyles = {
|
|
79
|
-
icon: {
|
|
80
|
-
backgroundColor: color,
|
|
81
|
-
width: size,
|
|
82
|
-
height: size
|
|
83
|
-
}
|
|
84
|
-
};
|
|
85
|
-
dynamicStyles[iconStyle] = aphrodite.StyleSheet.create(newStyles);
|
|
86
|
-
return dynamicStyles[iconStyle];
|
|
87
|
-
};
|
|
88
|
-
const styles$1 = aphrodite.StyleSheet.create({
|
|
89
|
-
svg: {
|
|
90
|
-
display: "inline-block",
|
|
91
|
-
verticalAlign: "text-bottom",
|
|
92
|
-
flexShrink: 0,
|
|
93
|
-
flexGrow: 0,
|
|
94
|
-
maskSize: "100%",
|
|
95
|
-
maskRepeat: "no-repeat",
|
|
96
|
-
maskPosition: "center"
|
|
97
|
-
}
|
|
98
|
-
});
|
|
99
|
-
PhosphorIcon.displayName = "PhosphorIcon";
|
|
29
|
+
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
100
30
|
|
|
101
31
|
const defaultLabeledFieldLabels = {
|
|
102
32
|
errorIconAriaLabel: "Error:"
|
|
@@ -156,8 +86,8 @@ function LabeledField(props) {
|
|
|
156
86
|
testId: testId && `${testId}-error`,
|
|
157
87
|
"aria-live": "assertive",
|
|
158
88
|
"aria-atomic": "true"
|
|
159
|
-
}, errorMessage && React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(PhosphorIcon, {
|
|
160
|
-
icon:
|
|
89
|
+
}, errorMessage && React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksIcon.PhosphorIcon, {
|
|
90
|
+
icon: WarningCircle,
|
|
161
91
|
style: [styles.errorIcon, styles.error],
|
|
162
92
|
role: "img",
|
|
163
93
|
"aria-label": labels.errorIconAriaLabel
|
package/package.json
CHANGED
|
@@ -1,26 +1,22 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@khanacademy/wonder-blocks-labeled-field",
|
|
3
|
-
"version": "2.0
|
|
3
|
+
"version": "2.1.0",
|
|
4
4
|
"design": "v1",
|
|
5
5
|
"description": "LabeledField handles accessibility and layout for associating labels with form components.",
|
|
6
6
|
"main": "dist/index.js",
|
|
7
7
|
"module": "dist/es/index.js",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
9
|
-
"scripts": {
|
|
10
|
-
"test": "echo \"Error: no test specified\" && exit 1",
|
|
11
|
-
"prepublishOnly": "../../utils/publish/package-pre-publish-check.sh"
|
|
12
|
-
},
|
|
13
9
|
"author": "",
|
|
14
10
|
"license": "MIT",
|
|
15
11
|
"publishConfig": {
|
|
16
12
|
"access": "public"
|
|
17
13
|
},
|
|
18
14
|
"dependencies": {
|
|
19
|
-
"@babel/runtime": "^7.
|
|
20
|
-
"@khanacademy/wonder-blocks-core": "
|
|
21
|
-
"@khanacademy/wonder-blocks-layout": "
|
|
22
|
-
"@khanacademy/wonder-blocks-tokens": "
|
|
23
|
-
"@khanacademy/wonder-blocks-typography": "
|
|
15
|
+
"@babel/runtime": "^7.24.5",
|
|
16
|
+
"@khanacademy/wonder-blocks-core": "12.1.0",
|
|
17
|
+
"@khanacademy/wonder-blocks-layout": "3.1.0",
|
|
18
|
+
"@khanacademy/wonder-blocks-tokens": "4.2.0",
|
|
19
|
+
"@khanacademy/wonder-blocks-typography": "3.1.0"
|
|
24
20
|
},
|
|
25
21
|
"peerDependencies": {
|
|
26
22
|
"@phosphor-icons/core": "^2.0.2",
|
|
@@ -28,6 +24,9 @@
|
|
|
28
24
|
"react": "18.2.0"
|
|
29
25
|
},
|
|
30
26
|
"devDependencies": {
|
|
31
|
-
"@khanacademy/wb-dev-build-settings": "
|
|
27
|
+
"@khanacademy/wb-dev-build-settings": "2.1.0"
|
|
28
|
+
},
|
|
29
|
+
"scripts": {
|
|
30
|
+
"test": "echo \"Error: no test specified\" && exit 1"
|
|
32
31
|
}
|
|
33
32
|
}
|