@khanacademy/wonder-blocks-labeled-field 2.0.2 → 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 +160 -140
- 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,318 +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
|
+
|
|
3
23
|
## 2.0.2
|
|
4
24
|
|
|
5
25
|
### Patch Changes
|
|
6
26
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
-
|
|
10
|
-
-
|
|
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
|
|
11
31
|
|
|
12
32
|
## 2.0.1
|
|
13
33
|
|
|
14
34
|
### Patch Changes
|
|
15
35
|
|
|
16
|
-
-
|
|
17
|
-
-
|
|
18
|
-
-
|
|
19
|
-
-
|
|
36
|
+
- Updated dependencies [8cfaeab0]
|
|
37
|
+
- Updated dependencies [c162abb4]
|
|
38
|
+
- @khanacademy/wonder-blocks-tokens@4.1.0
|
|
39
|
+
- @khanacademy/wonder-blocks-layout@3.0.7
|
|
20
40
|
|
|
21
41
|
## 2.0.0
|
|
22
42
|
|
|
23
43
|
### Major Changes
|
|
24
44
|
|
|
25
|
-
-
|
|
45
|
+
- 8d26588f: Remove `light` variant/prop from `LabeledField` as it is no longer needed/recommended.
|
|
26
46
|
|
|
27
47
|
### Patch Changes
|
|
28
48
|
|
|
29
|
-
-
|
|
30
|
-
-
|
|
31
|
-
-
|
|
49
|
+
- Updated dependencies [0de25cd8]
|
|
50
|
+
- @khanacademy/wonder-blocks-tokens@4.0.0
|
|
51
|
+
- @khanacademy/wonder-blocks-layout@3.0.6
|
|
32
52
|
|
|
33
53
|
## 1.1.1
|
|
34
54
|
|
|
35
55
|
### Patch Changes
|
|
36
56
|
|
|
37
|
-
-
|
|
57
|
+
- dce7d780: Make labeled-field package public
|
|
38
58
|
|
|
39
59
|
## 1.1.0
|
|
40
60
|
|
|
41
61
|
### Minor Changes
|
|
42
62
|
|
|
43
|
-
-
|
|
44
|
-
-
|
|
45
|
-
-
|
|
46
|
-
-
|
|
47
|
-
-
|
|
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
|
|
48
68
|
|
|
49
69
|
### Patch Changes
|
|
50
70
|
|
|
51
|
-
-
|
|
52
|
-
-
|
|
53
|
-
-
|
|
54
|
-
-
|
|
55
|
-
-
|
|
56
|
-
-
|
|
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
|
|
57
77
|
|
|
58
78
|
## 1.0.5
|
|
59
79
|
|
|
60
80
|
### Patch Changes
|
|
61
81
|
|
|
62
|
-
-
|
|
63
|
-
-
|
|
64
|
-
-
|
|
65
|
-
-
|
|
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
|
|
66
86
|
|
|
67
87
|
## 1.0.4
|
|
68
88
|
|
|
69
89
|
### Patch Changes
|
|
70
90
|
|
|
71
|
-
-
|
|
72
|
-
-
|
|
73
|
-
-
|
|
74
|
-
-
|
|
75
|
-
-
|
|
76
|
-
-
|
|
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
|
|
77
97
|
|
|
78
98
|
## 1.0.3
|
|
79
99
|
|
|
80
100
|
### Patch Changes
|
|
81
101
|
|
|
82
|
-
-
|
|
83
|
-
-
|
|
84
|
-
-
|
|
85
|
-
-
|
|
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
|
|
86
106
|
|
|
87
107
|
## 1.0.2
|
|
88
108
|
|
|
89
109
|
### Patch Changes
|
|
90
110
|
|
|
91
|
-
-
|
|
92
|
-
-
|
|
93
|
-
-
|
|
94
|
-
-
|
|
95
|
-
-
|
|
96
|
-
-
|
|
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
|
|
97
117
|
|
|
98
118
|
## 1.0.1
|
|
99
119
|
|
|
100
120
|
### Patch Changes
|
|
101
121
|
|
|
102
|
-
-
|
|
103
|
-
-
|
|
104
|
-
-
|
|
105
|
-
-
|
|
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
|
|
106
126
|
|
|
107
127
|
## 1.0.0
|
|
108
128
|
|
|
109
129
|
### Major Changes
|
|
110
130
|
|
|
111
|
-
-
|
|
131
|
+
- e6abdd17: Upgrade to React 18
|
|
112
132
|
|
|
113
133
|
### Patch Changes
|
|
114
134
|
|
|
115
|
-
-
|
|
116
|
-
-
|
|
117
|
-
-
|
|
118
|
-
-
|
|
119
|
-
-
|
|
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
|
|
120
140
|
|
|
121
141
|
## 0.1.21
|
|
122
142
|
|
|
123
143
|
### Patch Changes
|
|
124
144
|
|
|
125
|
-
-
|
|
126
|
-
-
|
|
127
|
-
-
|
|
145
|
+
- Updated dependencies [6999fd39]
|
|
146
|
+
- @khanacademy/wonder-blocks-tokens@2.1.0
|
|
147
|
+
- @khanacademy/wonder-blocks-layout@2.2.2
|
|
128
148
|
|
|
129
149
|
## 0.1.20
|
|
130
150
|
|
|
131
151
|
### Patch Changes
|
|
132
152
|
|
|
133
|
-
-
|
|
134
|
-
-
|
|
135
|
-
-
|
|
136
|
-
-
|
|
137
|
-
-
|
|
138
|
-
-
|
|
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
|
|
139
159
|
|
|
140
160
|
## 0.1.19
|
|
141
161
|
|
|
142
162
|
### Patch Changes
|
|
143
163
|
|
|
144
|
-
-
|
|
145
|
-
-
|
|
146
|
-
-
|
|
147
|
-
-
|
|
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
|
|
148
168
|
|
|
149
169
|
## 0.1.18
|
|
150
170
|
|
|
151
171
|
### Patch Changes
|
|
152
172
|
|
|
153
|
-
-
|
|
154
|
-
-
|
|
155
|
-
-
|
|
156
|
-
-
|
|
173
|
+
- Updated dependencies [f17dc1ee]
|
|
174
|
+
- Updated dependencies [991eb43f]
|
|
175
|
+
- @khanacademy/wonder-blocks-tokens@2.0.0
|
|
176
|
+
- @khanacademy/wonder-blocks-layout@2.1.3
|
|
157
177
|
|
|
158
178
|
## 0.1.17
|
|
159
179
|
|
|
160
180
|
### Patch Changes
|
|
161
181
|
|
|
162
|
-
-
|
|
163
|
-
-
|
|
164
|
-
-
|
|
165
|
-
-
|
|
166
|
-
-
|
|
167
|
-
-
|
|
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
|
|
168
188
|
|
|
169
189
|
## 0.1.16
|
|
170
190
|
|
|
171
191
|
### Patch Changes
|
|
172
192
|
|
|
173
|
-
-
|
|
174
|
-
-
|
|
175
|
-
-
|
|
176
|
-
-
|
|
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
|
|
177
197
|
|
|
178
198
|
## 0.1.15
|
|
179
199
|
|
|
180
200
|
### Patch Changes
|
|
181
201
|
|
|
182
|
-
-
|
|
183
|
-
-
|
|
202
|
+
- Updated dependencies [47a758b6]
|
|
203
|
+
- @khanacademy/wonder-blocks-layout@2.1.0
|
|
184
204
|
|
|
185
205
|
## 0.1.14
|
|
186
206
|
|
|
187
207
|
### Patch Changes
|
|
188
208
|
|
|
189
|
-
-
|
|
190
|
-
-
|
|
191
|
-
-
|
|
192
|
-
-
|
|
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
|
|
193
213
|
|
|
194
214
|
## 0.1.13
|
|
195
215
|
|
|
196
216
|
### Patch Changes
|
|
197
217
|
|
|
198
|
-
-
|
|
199
|
-
-
|
|
200
|
-
-
|
|
218
|
+
- Updated dependencies [9bfeead9]
|
|
219
|
+
- @khanacademy/wonder-blocks-tokens@1.3.0
|
|
220
|
+
- @khanacademy/wonder-blocks-layout@2.0.32
|
|
201
221
|
|
|
202
222
|
## 0.1.12
|
|
203
223
|
|
|
204
224
|
### Patch Changes
|
|
205
225
|
|
|
206
|
-
-
|
|
207
|
-
-
|
|
208
|
-
-
|
|
209
|
-
-
|
|
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
|
|
210
230
|
|
|
211
231
|
## 0.1.11
|
|
212
232
|
|
|
213
233
|
### Patch Changes
|
|
214
234
|
|
|
215
|
-
-
|
|
216
|
-
-
|
|
217
|
-
-
|
|
218
|
-
-
|
|
219
|
-
-
|
|
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
|
|
220
240
|
|
|
221
241
|
## 0.1.10
|
|
222
242
|
|
|
223
243
|
### Patch Changes
|
|
224
244
|
|
|
225
|
-
-
|
|
226
|
-
-
|
|
245
|
+
- Updated dependencies [c39bfd29]
|
|
246
|
+
- @khanacademy/wonder-blocks-layout@2.0.29
|
|
227
247
|
|
|
228
248
|
## 0.1.9
|
|
229
249
|
|
|
230
250
|
### Patch Changes
|
|
231
251
|
|
|
232
|
-
-
|
|
233
|
-
-
|
|
234
|
-
-
|
|
252
|
+
- Updated dependencies [4cfb4977]
|
|
253
|
+
- @khanacademy/wonder-blocks-tokens@1.1.0
|
|
254
|
+
- @khanacademy/wonder-blocks-layout@2.0.28
|
|
235
255
|
|
|
236
256
|
## 0.1.8
|
|
237
257
|
|
|
238
258
|
### Patch Changes
|
|
239
259
|
|
|
240
|
-
-
|
|
241
|
-
-
|
|
242
|
-
-
|
|
260
|
+
- Updated dependencies [e83f8991]
|
|
261
|
+
- @khanacademy/wonder-blocks-tokens@1.0.0
|
|
262
|
+
- @khanacademy/wonder-blocks-layout@2.0.27
|
|
243
263
|
|
|
244
264
|
## 0.1.7
|
|
245
265
|
|
|
246
266
|
### Patch Changes
|
|
247
267
|
|
|
248
|
-
-
|
|
249
|
-
-
|
|
250
|
-
-
|
|
251
|
-
-
|
|
252
|
-
-
|
|
253
|
-
-
|
|
254
|
-
-
|
|
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
|
|
255
275
|
|
|
256
276
|
## 0.1.6
|
|
257
277
|
|
|
258
278
|
### Patch Changes
|
|
259
279
|
|
|
260
|
-
-
|
|
261
|
-
-
|
|
262
|
-
-
|
|
263
|
-
-
|
|
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
|
|
264
284
|
|
|
265
285
|
## 0.1.5
|
|
266
286
|
|
|
267
287
|
### Patch Changes
|
|
268
288
|
|
|
269
|
-
-
|
|
270
|
-
-
|
|
271
|
-
-
|
|
272
|
-
-
|
|
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
|
|
273
293
|
|
|
274
294
|
## 0.1.4
|
|
275
295
|
|
|
276
296
|
### Patch Changes
|
|
277
297
|
|
|
278
|
-
-
|
|
279
|
-
-
|
|
298
|
+
- Updated dependencies [b6fbd635]
|
|
299
|
+
- @khanacademy/wonder-blocks-layout@2.0.23
|
|
280
300
|
|
|
281
301
|
## 0.1.3
|
|
282
302
|
|
|
283
303
|
### Patch Changes
|
|
284
304
|
|
|
285
|
-
-
|
|
286
|
-
-
|
|
305
|
+
- Updated dependencies [48d3c7e9]
|
|
306
|
+
- @khanacademy/wonder-blocks-color@3.0.0
|
|
287
307
|
|
|
288
308
|
## 0.1.2
|
|
289
309
|
|
|
290
310
|
### Patch Changes
|
|
291
311
|
|
|
292
|
-
-
|
|
293
|
-
-
|
|
294
|
-
-
|
|
295
|
-
-
|
|
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
|
|
296
316
|
|
|
297
317
|
## 0.1.1
|
|
298
318
|
|
|
299
319
|
### Patch Changes
|
|
300
320
|
|
|
301
|
-
-
|
|
302
|
-
-
|
|
303
|
-
-
|
|
304
|
-
-
|
|
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
|
|
305
325
|
|
|
306
326
|
## 0.1.0
|
|
307
327
|
|
|
308
328
|
### Minor Changes
|
|
309
329
|
|
|
310
|
-
-
|
|
330
|
+
- db74f86f: Add skeleton for new labeled field package
|
|
311
331
|
|
|
312
332
|
### Patch Changes
|
|
313
333
|
|
|
314
|
-
-
|
|
315
|
-
-
|
|
316
|
-
-
|
|
317
|
-
-
|
|
318
|
-
-
|
|
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
|
}
|