@khanacademy/wonder-blocks-form 2.4.7 → 3.0.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 +23 -0
- package/dist/es/index.js +11 -11
- package/dist/index.js +232 -206
- package/docs.md +5 -1
- package/package.json +6 -6
- package/src/__docs__/_overview_.stories.mdx +15 -0
- package/src/__tests__/__snapshots__/custom-snapshot.test.js.snap +60 -60
- package/src/components/__docs__/checkbox-group.stories.js +0 -1
- package/src/components/__docs__/labeled-text-field.argtypes.js +2 -2
- package/src/components/__docs__/labeled-text-field.stories.js +25 -0
- package/src/components/__docs__/radio.stories.js +3 -2
- package/src/components/__tests__/checkbox-group.test.js +118 -67
- package/src/components/__tests__/field-heading.test.js +40 -0
- package/src/components/__tests__/radio-group.test.js +131 -58
- package/src/components/checkbox-group.js +5 -13
- package/src/components/checkbox.js +2 -2
- package/src/components/choice-internal.js +5 -3
- package/src/components/choice.js +2 -2
- package/src/components/field-heading.js +27 -43
- package/src/components/labeled-text-field.js +2 -3
- package/src/components/radio-group.js +2 -2
- package/src/components/radio.js +2 -2
- package/src/index.js +0 -2
- package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +0 -6126
- package/src/__tests__/generated-snapshot.test.js +0 -654
- package/src/components/checkbox-group.md +0 -200
- package/src/components/checkbox.md +0 -134
- package/src/components/field-heading.md +0 -43
- package/src/components/labeled-text-field.md +0 -535
- package/src/components/radio-group.md +0 -129
- package/src/components/radio.md +0 -26
- package/src/components/text-field.md +0 -770
package/dist/index.js
CHANGED
|
@@ -82,7 +82,7 @@ module.exports =
|
|
|
82
82
|
/******/
|
|
83
83
|
/******/
|
|
84
84
|
/******/ // Load entry module and return exports
|
|
85
|
-
/******/ return __webpack_require__(__webpack_require__.s =
|
|
85
|
+
/******/ return __webpack_require__(__webpack_require__.s = 22);
|
|
86
86
|
/******/ })
|
|
87
87
|
/************************************************************************/
|
|
88
88
|
/******/ ([
|
|
@@ -119,14 +119,37 @@ module.exports = require("@khanacademy/wonder-blocks-typography");
|
|
|
119
119
|
/* 5 */
|
|
120
120
|
/***/ (function(module, exports) {
|
|
121
121
|
|
|
122
|
-
|
|
122
|
+
function _extends() {
|
|
123
|
+
module.exports = _extends = Object.assign ? Object.assign.bind() : function (target) {
|
|
124
|
+
for (var i = 1; i < arguments.length; i++) {
|
|
125
|
+
var source = arguments[i];
|
|
126
|
+
|
|
127
|
+
for (var key in source) {
|
|
128
|
+
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
129
|
+
target[key] = source[key];
|
|
130
|
+
}
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
return target;
|
|
135
|
+
}, module.exports.__esModule = true, module.exports["default"] = module.exports;
|
|
136
|
+
return _extends.apply(this, arguments);
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
module.exports = _extends, module.exports.__esModule = true, module.exports["default"] = module.exports;
|
|
123
140
|
|
|
124
141
|
/***/ }),
|
|
125
142
|
/* 6 */
|
|
143
|
+
/***/ (function(module, exports) {
|
|
144
|
+
|
|
145
|
+
module.exports = require("aphrodite");
|
|
146
|
+
|
|
147
|
+
/***/ }),
|
|
148
|
+
/* 7 */
|
|
126
149
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
127
150
|
|
|
128
151
|
"use strict";
|
|
129
|
-
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
|
|
152
|
+
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(6);
|
|
130
153
|
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_0__);
|
|
131
154
|
/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(1);
|
|
132
155
|
/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_1__);
|
|
@@ -159,21 +182,22 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_0__["StyleSheet"].create({
|
|
|
159
182
|
/* harmony default export */ __webpack_exports__["a"] = (styles);
|
|
160
183
|
|
|
161
184
|
/***/ }),
|
|
162
|
-
/*
|
|
185
|
+
/* 8 */
|
|
163
186
|
/***/ (function(module, exports) {
|
|
164
187
|
|
|
165
188
|
module.exports = require("@khanacademy/wonder-blocks-layout");
|
|
166
189
|
|
|
167
190
|
/***/ }),
|
|
168
|
-
/*
|
|
191
|
+
/* 9 */
|
|
169
192
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
170
193
|
|
|
171
194
|
"use strict";
|
|
172
195
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Checkbox; });
|
|
173
|
-
/* harmony import */ var
|
|
174
|
-
/* harmony import */ var
|
|
175
|
-
/* harmony import */ var
|
|
176
|
-
|
|
196
|
+
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
|
|
197
|
+
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
|
|
198
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
|
|
199
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
200
|
+
/* harmony import */ var _choice_internal_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(11);
|
|
177
201
|
|
|
178
202
|
|
|
179
203
|
// Keep synced with ChoiceComponentProps in ../util/types.js
|
|
@@ -199,9 +223,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
199
223
|
* <Checkbox checked={checked} onChange={setChecked} />
|
|
200
224
|
* ```
|
|
201
225
|
*/
|
|
202
|
-
class Checkbox extends
|
|
226
|
+
class Checkbox extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
|
|
203
227
|
render() {
|
|
204
|
-
return /*#__PURE__*/
|
|
228
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_choice_internal_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
|
|
205
229
|
variant: "checkbox"
|
|
206
230
|
}, this.props));
|
|
207
231
|
}
|
|
@@ -212,56 +236,23 @@ Checkbox.defaultProps = {
|
|
|
212
236
|
error: false
|
|
213
237
|
};
|
|
214
238
|
|
|
215
|
-
/***/ }),
|
|
216
|
-
/* 9 */
|
|
217
|
-
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
218
|
-
|
|
219
|
-
"use strict";
|
|
220
|
-
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Radio; });
|
|
221
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
|
|
222
|
-
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
|
223
|
-
/* harmony import */ var _choice_internal_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(11);
|
|
224
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
// Keep synced with ChoiceComponentProps in ../util/types.js
|
|
228
|
-
|
|
229
|
-
/**
|
|
230
|
-
* 🔘 A nicely styled radio button for all your non-AMFM radio button needs. Can
|
|
231
|
-
* optionally take label and description props.
|
|
232
|
-
*
|
|
233
|
-
* This component should not really be used by itself because radio buttons are
|
|
234
|
-
* often grouped together. See RadioGroup.
|
|
235
|
-
*/
|
|
236
|
-
class Radio extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
237
|
-
render() {
|
|
238
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_choice_internal_js__WEBPACK_IMPORTED_MODULE_1__[/* default */ "a"], _extends({
|
|
239
|
-
variant: "radio"
|
|
240
|
-
}, this.props));
|
|
241
|
-
}
|
|
242
|
-
|
|
243
|
-
}
|
|
244
|
-
Radio.defaultProps = {
|
|
245
|
-
disabled: false,
|
|
246
|
-
error: false
|
|
247
|
-
};
|
|
248
|
-
|
|
249
239
|
/***/ }),
|
|
250
240
|
/* 10 */
|
|
251
241
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
252
242
|
|
|
253
243
|
"use strict";
|
|
254
|
-
/* harmony import */ var
|
|
255
|
-
/* harmony import */ var
|
|
256
|
-
/* harmony import */ var
|
|
257
|
-
/* harmony import */ var
|
|
258
|
-
/* harmony import */ var
|
|
259
|
-
/* harmony import */ var
|
|
260
|
-
/* harmony import */ var
|
|
261
|
-
/* harmony import */ var
|
|
262
|
-
/* harmony import */ var
|
|
263
|
-
/* harmony import */ var
|
|
264
|
-
|
|
244
|
+
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
|
|
245
|
+
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
|
|
246
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
|
|
247
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
248
|
+
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
|
|
249
|
+
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
|
|
250
|
+
/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
|
|
251
|
+
/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
|
|
252
|
+
/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(3);
|
|
253
|
+
/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4__);
|
|
254
|
+
/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(4);
|
|
255
|
+
/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__);
|
|
265
256
|
|
|
266
257
|
|
|
267
258
|
|
|
@@ -275,7 +266,7 @@ const defaultErrorMessage = "This field is required.";
|
|
|
275
266
|
/**
|
|
276
267
|
* A TextField is an element used to accept a single line of text from the user.
|
|
277
268
|
*/
|
|
278
|
-
class TextFieldInternal extends
|
|
269
|
+
class TextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
|
|
279
270
|
constructor(props) {
|
|
280
271
|
super(props);
|
|
281
272
|
this.state = {
|
|
@@ -388,8 +379,8 @@ class TextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
|
|
|
388
379
|
// Should only include Aria related props
|
|
389
380
|
...otherProps
|
|
390
381
|
} = this.props;
|
|
391
|
-
return /*#__PURE__*/
|
|
392
|
-
className: Object(
|
|
382
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("input", _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
|
|
383
|
+
className: Object(aphrodite__WEBPACK_IMPORTED_MODULE_2__["css"])([styles.input, _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_5__["styles"].LabelMedium, styles.default, // Prioritizes disabled, then focused, then error (if any)
|
|
393
384
|
disabled ? styles.disabled : this.state.focused ? [styles.focused, light && styles.defaultLight] : this.state.error && [styles.error, light && styles.errorLight], style && style]),
|
|
394
385
|
id: id,
|
|
395
386
|
type: type,
|
|
@@ -414,54 +405,54 @@ TextFieldInternal.defaultProps = {
|
|
|
414
405
|
disabled: false,
|
|
415
406
|
light: false
|
|
416
407
|
};
|
|
417
|
-
const styles =
|
|
408
|
+
const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
|
|
418
409
|
input: {
|
|
419
410
|
width: "100%",
|
|
420
411
|
height: 40,
|
|
421
412
|
borderRadius: 4,
|
|
422
413
|
boxSizing: "border-box",
|
|
423
|
-
paddingLeft:
|
|
414
|
+
paddingLeft: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_4___default.a.medium_16,
|
|
424
415
|
margin: 0,
|
|
425
416
|
outline: "none",
|
|
426
417
|
boxShadow: "none"
|
|
427
418
|
},
|
|
428
419
|
default: {
|
|
429
|
-
background:
|
|
430
|
-
border: `1px solid ${
|
|
431
|
-
color:
|
|
420
|
+
background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.white,
|
|
421
|
+
border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack16}`,
|
|
422
|
+
color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack,
|
|
432
423
|
"::placeholder": {
|
|
433
|
-
color:
|
|
424
|
+
color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack64
|
|
434
425
|
}
|
|
435
426
|
},
|
|
436
427
|
error: {
|
|
437
|
-
background: `${Object(
|
|
438
|
-
border: `1px solid ${
|
|
439
|
-
color:
|
|
428
|
+
background: `${Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["fade"])(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.red, 0.06), _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.white)}`,
|
|
429
|
+
border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.red}`,
|
|
430
|
+
color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack,
|
|
440
431
|
"::placeholder": {
|
|
441
|
-
color:
|
|
432
|
+
color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack64
|
|
442
433
|
}
|
|
443
434
|
},
|
|
444
435
|
disabled: {
|
|
445
|
-
background:
|
|
446
|
-
border: `1px solid ${
|
|
447
|
-
color:
|
|
436
|
+
background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offWhite,
|
|
437
|
+
border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack16}`,
|
|
438
|
+
color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack64,
|
|
448
439
|
"::placeholder": {
|
|
449
|
-
color:
|
|
440
|
+
color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack32
|
|
450
441
|
}
|
|
451
442
|
},
|
|
452
443
|
focused: {
|
|
453
|
-
background:
|
|
454
|
-
border: `1px solid ${
|
|
455
|
-
color:
|
|
444
|
+
background: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.white,
|
|
445
|
+
border: `1px solid ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.blue}`,
|
|
446
|
+
color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack,
|
|
456
447
|
"::placeholder": {
|
|
457
|
-
color:
|
|
448
|
+
color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack64
|
|
458
449
|
}
|
|
459
450
|
},
|
|
460
451
|
defaultLight: {
|
|
461
|
-
boxShadow: `0px 0px 0px 1px ${
|
|
452
|
+
boxShadow: `0px 0px 0px 1px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.blue}, 0px 0px 0px 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.white}`
|
|
462
453
|
},
|
|
463
454
|
errorLight: {
|
|
464
|
-
boxShadow: `0px 0px 0px 1px ${
|
|
455
|
+
boxShadow: `0px 0px 0px 1px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.red}, 0px 0px 0px 2px ${_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.white}`
|
|
465
456
|
}
|
|
466
457
|
});
|
|
467
458
|
|
|
@@ -482,7 +473,7 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
|
|
|
482
473
|
* />
|
|
483
474
|
* ```
|
|
484
475
|
*/
|
|
485
|
-
const TextField = /*#__PURE__*/
|
|
476
|
+
const TextField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["forwardRef"]((props, ref) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](TextFieldInternal, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, props, {
|
|
486
477
|
forwardedRef: ref
|
|
487
478
|
})));
|
|
488
479
|
/* harmony default export */ __webpack_exports__["a"] = (TextField);
|
|
@@ -493,25 +484,26 @@ const TextField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["forwardRef"](
|
|
|
493
484
|
|
|
494
485
|
"use strict";
|
|
495
486
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ChoiceInternal; });
|
|
496
|
-
/* harmony import */ var
|
|
497
|
-
/* harmony import */ var
|
|
498
|
-
/* harmony import */ var
|
|
499
|
-
/* harmony import */ var
|
|
500
|
-
/* harmony import */ var
|
|
501
|
-
/* harmony import */ var
|
|
502
|
-
/* harmony import */ var
|
|
503
|
-
/* harmony import */ var
|
|
504
|
-
/* harmony import */ var
|
|
505
|
-
/* harmony import */ var
|
|
506
|
-
/* harmony import */ var
|
|
507
|
-
/* harmony import */ var
|
|
508
|
-
/* harmony import */ var
|
|
509
|
-
/* harmony import */ var
|
|
510
|
-
/* harmony import */ var
|
|
511
|
-
/* harmony import */ var
|
|
512
|
-
/* harmony import */ var
|
|
513
|
-
/* harmony import */ var
|
|
514
|
-
|
|
487
|
+
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
|
|
488
|
+
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
|
|
489
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
|
|
490
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
491
|
+
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
|
|
492
|
+
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
|
|
493
|
+
/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
|
|
494
|
+
/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
|
|
495
|
+
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
|
|
496
|
+
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
|
|
497
|
+
/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(16);
|
|
498
|
+
/* harmony import */ var _khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5__);
|
|
499
|
+
/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(8);
|
|
500
|
+
/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_6___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_6__);
|
|
501
|
+
/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(3);
|
|
502
|
+
/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7__);
|
|
503
|
+
/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(4);
|
|
504
|
+
/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8__);
|
|
505
|
+
/* harmony import */ var _checkbox_core_js__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(17);
|
|
506
|
+
/* harmony import */ var _radio_core_js__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(19);
|
|
515
507
|
|
|
516
508
|
|
|
517
509
|
|
|
@@ -532,7 +524,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
532
524
|
* example, we can make onChange a required prop on Checkbox but not on Choice
|
|
533
525
|
* (because for Choice, that prop would be auto-populated by CheckboxGroup).
|
|
534
526
|
*/
|
|
535
|
-
class ChoiceInternal extends
|
|
527
|
+
class ChoiceInternal extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
|
|
536
528
|
constructor(...args) {
|
|
537
529
|
super(...args);
|
|
538
530
|
|
|
@@ -559,9 +551,9 @@ class ChoiceInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
|
559
551
|
|
|
560
552
|
getChoiceCoreComponent() {
|
|
561
553
|
if (this.props.variant === "radio") {
|
|
562
|
-
return
|
|
554
|
+
return _radio_core_js__WEBPACK_IMPORTED_MODULE_10__[/* default */ "a"];
|
|
563
555
|
} else {
|
|
564
|
-
return
|
|
556
|
+
return _checkbox_core_js__WEBPACK_IMPORTED_MODULE_9__[/* default */ "a"];
|
|
565
557
|
}
|
|
566
558
|
}
|
|
567
559
|
|
|
@@ -571,9 +563,9 @@ class ChoiceInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
|
571
563
|
id,
|
|
572
564
|
label
|
|
573
565
|
} = this.props;
|
|
574
|
-
return /*#__PURE__*/
|
|
566
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8__["LabelMedium"], {
|
|
575
567
|
style: [styles.label, disabled && styles.disabledLabel]
|
|
576
|
-
}, /*#__PURE__*/
|
|
568
|
+
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("label", {
|
|
577
569
|
htmlFor: id,
|
|
578
570
|
onClick: this.handleLabelClick
|
|
579
571
|
}, label));
|
|
@@ -583,7 +575,7 @@ class ChoiceInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
|
583
575
|
const {
|
|
584
576
|
description
|
|
585
577
|
} = this.props;
|
|
586
|
-
return /*#__PURE__*/
|
|
578
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_8__["LabelSmall"], {
|
|
587
579
|
style: styles.description,
|
|
588
580
|
id: id
|
|
589
581
|
}, description);
|
|
@@ -601,31 +593,31 @@ class ChoiceInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
|
601
593
|
...coreProps
|
|
602
594
|
} = this.props;
|
|
603
595
|
const ChoiceCore = this.getChoiceCoreComponent();
|
|
604
|
-
const ClickableBehavior = Object(
|
|
605
|
-
return /*#__PURE__*/
|
|
596
|
+
const ClickableBehavior = Object(_khanacademy_wonder_blocks_clickable__WEBPACK_IMPORTED_MODULE_5__["getClickableBehavior"])();
|
|
597
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["UniqueIDProvider"], {
|
|
606
598
|
mockOnFirstRender: true,
|
|
607
599
|
scope: "choice"
|
|
608
600
|
}, ids => {
|
|
609
|
-
const descriptionId = description
|
|
610
|
-
return /*#__PURE__*/
|
|
601
|
+
const descriptionId = description ? ids.get("description") : undefined;
|
|
602
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], {
|
|
611
603
|
style: style,
|
|
612
604
|
className: className
|
|
613
|
-
}, /*#__PURE__*/
|
|
605
|
+
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](ClickableBehavior, {
|
|
614
606
|
disabled: coreProps.disabled,
|
|
615
607
|
onClick: this.handleClick,
|
|
616
608
|
role: variant
|
|
617
609
|
}, (state, childrenProps) => {
|
|
618
|
-
return /*#__PURE__*/
|
|
610
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["View"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
|
|
619
611
|
style: styles.wrapper
|
|
620
612
|
}, childrenProps, {
|
|
621
613
|
// We are resetting the tabIndex=0 from handlers
|
|
622
614
|
// because the ChoiceCore component will receive
|
|
623
615
|
// focus on basis of it being an input element.
|
|
624
616
|
tabIndex: -1
|
|
625
|
-
}), /*#__PURE__*/
|
|
617
|
+
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](ChoiceCore, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, coreProps, state, {
|
|
626
618
|
"aria-describedby": descriptionId
|
|
627
|
-
})), /*#__PURE__*/
|
|
628
|
-
size:
|
|
619
|
+
})), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_6__["Strut"], {
|
|
620
|
+
size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default.a.xSmall_8
|
|
629
621
|
}), label && this.getLabel());
|
|
630
622
|
}), description && this.getDescription(descriptionId));
|
|
631
623
|
});
|
|
@@ -637,7 +629,7 @@ ChoiceInternal.defaultProps = {
|
|
|
637
629
|
disabled: false,
|
|
638
630
|
error: false
|
|
639
631
|
};
|
|
640
|
-
const styles =
|
|
632
|
+
const styles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
|
|
641
633
|
wrapper: {
|
|
642
634
|
flexDirection: "row",
|
|
643
635
|
alignItems: "flex-start",
|
|
@@ -652,13 +644,13 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
|
|
|
652
644
|
marginTop: -2
|
|
653
645
|
},
|
|
654
646
|
disabledLabel: {
|
|
655
|
-
color:
|
|
647
|
+
color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack32
|
|
656
648
|
},
|
|
657
649
|
description: {
|
|
658
650
|
// 16 for icon + 8 for spacing strut
|
|
659
|
-
marginLeft:
|
|
660
|
-
marginTop:
|
|
661
|
-
color:
|
|
651
|
+
marginLeft: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default.a.medium_16 + _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default.a.xSmall_8,
|
|
652
|
+
marginTop: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_7___default.a.xxxSmall_4,
|
|
653
|
+
color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.offBlack64
|
|
662
654
|
}
|
|
663
655
|
});
|
|
664
656
|
|
|
@@ -670,8 +662,8 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
|
|
|
670
662
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Choice; });
|
|
671
663
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
|
|
672
664
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
|
673
|
-
/* harmony import */ var _checkbox_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
|
|
674
|
-
/* harmony import */ var _radio_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(
|
|
665
|
+
/* harmony import */ var _checkbox_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(9);
|
|
666
|
+
/* harmony import */ var _radio_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(20);
|
|
675
667
|
|
|
676
668
|
|
|
677
669
|
|
|
@@ -780,13 +772,13 @@ Choice.defaultProps = {
|
|
|
780
772
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
|
781
773
|
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
|
|
782
774
|
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__);
|
|
783
|
-
/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(
|
|
775
|
+
/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8);
|
|
784
776
|
/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__);
|
|
785
777
|
/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
|
|
786
778
|
/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__);
|
|
787
779
|
/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(4);
|
|
788
780
|
/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__);
|
|
789
|
-
/* harmony import */ var _group_styles_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(
|
|
781
|
+
/* harmony import */ var _group_styles_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7);
|
|
790
782
|
|
|
791
783
|
|
|
792
784
|
|
|
@@ -861,11 +853,11 @@ class CheckboxGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
|
861
853
|
style: _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].fieldset
|
|
862
854
|
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__["View"], {
|
|
863
855
|
style: style
|
|
864
|
-
},
|
|
856
|
+
}, label && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledLegend, {
|
|
865
857
|
style: _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].legend
|
|
866
|
-
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelMedium"], null, label))
|
|
858
|
+
}, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelMedium"], null, label)), description && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelSmall"], {
|
|
867
859
|
style: _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].description
|
|
868
|
-
}, description)
|
|
860
|
+
}, description), errorMessage && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__["LabelSmall"], {
|
|
869
861
|
style: _group_styles_js__WEBPACK_IMPORTED_MODULE_5__[/* default */ "a"].error
|
|
870
862
|
}, errorMessage), (label || description || errorMessage) && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__["Strut"], {
|
|
871
863
|
size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default.a.small_12
|
|
@@ -900,13 +892,13 @@ class CheckboxGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
|
900
892
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
|
901
893
|
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(2);
|
|
902
894
|
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_1__);
|
|
903
|
-
/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(
|
|
895
|
+
/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(8);
|
|
904
896
|
/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_2__);
|
|
905
897
|
/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(3);
|
|
906
898
|
/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_3__);
|
|
907
899
|
/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(4);
|
|
908
900
|
/* harmony import */ var _khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_4__);
|
|
909
|
-
/* harmony import */ var _group_styles_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(
|
|
901
|
+
/* harmony import */ var _group_styles_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(7);
|
|
910
902
|
|
|
911
903
|
|
|
912
904
|
|
|
@@ -1006,13 +998,14 @@ class RadioGroup extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
|
1006
998
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
1007
999
|
|
|
1008
1000
|
"use strict";
|
|
1009
|
-
/* harmony import */ var
|
|
1010
|
-
/* harmony import */ var
|
|
1011
|
-
/* harmony import */ var
|
|
1012
|
-
/* harmony import */ var
|
|
1013
|
-
/* harmony import */ var
|
|
1014
|
-
/* harmony import */ var
|
|
1015
|
-
|
|
1001
|
+
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
|
|
1002
|
+
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
|
|
1003
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
|
|
1004
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
1005
|
+
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
|
|
1006
|
+
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__);
|
|
1007
|
+
/* harmony import */ var _field_heading_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(21);
|
|
1008
|
+
/* harmony import */ var _text_field_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(10);
|
|
1016
1009
|
|
|
1017
1010
|
|
|
1018
1011
|
|
|
@@ -1025,7 +1018,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
|
|
|
1025
1018
|
* A LabeledTextField is an element used to accept a single line of text
|
|
1026
1019
|
* from the user paired with a label, description, and error field elements.
|
|
1027
1020
|
*/
|
|
1028
|
-
class LabeledTextFieldInternal extends
|
|
1021
|
+
class LabeledTextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
|
|
1029
1022
|
constructor(props) {
|
|
1030
1023
|
super(props);
|
|
1031
1024
|
|
|
@@ -1095,14 +1088,14 @@ class LabeledTextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Compo
|
|
|
1095
1088
|
forwardedRef,
|
|
1096
1089
|
ariaDescribedby
|
|
1097
1090
|
} = this.props;
|
|
1098
|
-
return /*#__PURE__*/
|
|
1091
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["IDProvider"], {
|
|
1099
1092
|
id: id,
|
|
1100
1093
|
scope: "labeled-text-field"
|
|
1101
|
-
}, uniqueId => /*#__PURE__*/
|
|
1094
|
+
}, uniqueId => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_field_heading_js__WEBPACK_IMPORTED_MODULE_3__[/* default */ "a"], {
|
|
1102
1095
|
id: uniqueId,
|
|
1103
1096
|
testId: testId,
|
|
1104
1097
|
style: style,
|
|
1105
|
-
field: /*#__PURE__*/
|
|
1098
|
+
field: /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_text_field_js__WEBPACK_IMPORTED_MODULE_4__[/* default */ "a"], {
|
|
1106
1099
|
id: `${uniqueId}-field`,
|
|
1107
1100
|
"aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
|
|
1108
1101
|
"aria-invalid": this.state.error ? "true" : "false",
|
|
@@ -1159,7 +1152,7 @@ LabeledTextFieldInternal.defaultProps = {
|
|
|
1159
1152
|
* />
|
|
1160
1153
|
* ```
|
|
1161
1154
|
*/
|
|
1162
|
-
const LabeledTextField = /*#__PURE__*/
|
|
1155
|
+
const LabeledTextField = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["forwardRef"]((props, ref) => /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](LabeledTextFieldInternal, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, props, {
|
|
1163
1156
|
forwardedRef: ref
|
|
1164
1157
|
})));
|
|
1165
1158
|
/* harmony default export */ __webpack_exports__["a"] = (LabeledTextField);
|
|
@@ -1176,17 +1169,18 @@ module.exports = require("@khanacademy/wonder-blocks-clickable");
|
|
|
1176
1169
|
|
|
1177
1170
|
"use strict";
|
|
1178
1171
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return CheckboxCore; });
|
|
1179
|
-
/* harmony import */ var
|
|
1180
|
-
/* harmony import */ var
|
|
1181
|
-
/* harmony import */ var
|
|
1182
|
-
/* harmony import */ var
|
|
1183
|
-
/* harmony import */ var
|
|
1184
|
-
/* harmony import */ var
|
|
1185
|
-
/* harmony import */ var
|
|
1186
|
-
/* harmony import */ var
|
|
1187
|
-
/* harmony import */ var
|
|
1188
|
-
/* harmony import */ var
|
|
1189
|
-
|
|
1172
|
+
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
|
|
1173
|
+
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
|
|
1174
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
|
|
1175
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
1176
|
+
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
|
|
1177
|
+
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
|
|
1178
|
+
/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
|
|
1179
|
+
/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
|
|
1180
|
+
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
|
|
1181
|
+
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
|
|
1182
|
+
/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(18);
|
|
1183
|
+
/* harmony import */ var _khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5__);
|
|
1190
1184
|
|
|
1191
1185
|
|
|
1192
1186
|
|
|
@@ -1201,8 +1195,8 @@ const {
|
|
|
1201
1195
|
offBlack16,
|
|
1202
1196
|
offBlack32,
|
|
1203
1197
|
offBlack50
|
|
1204
|
-
} =
|
|
1205
|
-
const StyledInput = Object(
|
|
1198
|
+
} = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a;
|
|
1199
|
+
const StyledInput = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["addStyle"])("input");
|
|
1206
1200
|
const checkboxCheck = {
|
|
1207
1201
|
small: "M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z"
|
|
1208
1202
|
};
|
|
@@ -1210,7 +1204,7 @@ const checkboxCheck = {
|
|
|
1210
1204
|
* The internal stateless ☑️ Checkbox
|
|
1211
1205
|
*/
|
|
1212
1206
|
|
|
1213
|
-
class CheckboxCore extends
|
|
1207
|
+
class CheckboxCore extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
|
|
1214
1208
|
constructor(...args) {
|
|
1215
1209
|
super(...args);
|
|
1216
1210
|
|
|
@@ -1241,7 +1235,7 @@ class CheckboxCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
|
1241
1235
|
const props = {
|
|
1242
1236
|
"data-test-id": testId
|
|
1243
1237
|
};
|
|
1244
|
-
return /*#__PURE__*/
|
|
1238
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](StyledInput, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, sharedProps, {
|
|
1245
1239
|
type: "checkbox",
|
|
1246
1240
|
"aria-invalid": error,
|
|
1247
1241
|
checked: checked,
|
|
@@ -1252,7 +1246,7 @@ class CheckboxCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
|
1252
1246
|
,
|
|
1253
1247
|
onChange: this.handleChange,
|
|
1254
1248
|
style: defaultStyle
|
|
1255
|
-
}, props)), checked && /*#__PURE__*/
|
|
1249
|
+
}, props)), checked && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_khanacademy_wonder_blocks_icon__WEBPACK_IMPORTED_MODULE_5___default.a, {
|
|
1256
1250
|
color: disabled ? offBlack32 : white,
|
|
1257
1251
|
icon: checkboxCheck,
|
|
1258
1252
|
size: "small",
|
|
@@ -1262,7 +1256,7 @@ class CheckboxCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
|
1262
1256
|
|
|
1263
1257
|
}
|
|
1264
1258
|
const size = 16;
|
|
1265
|
-
const sharedStyles =
|
|
1259
|
+
const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
|
|
1266
1260
|
// Reset the default styled input element
|
|
1267
1261
|
inputReset: {
|
|
1268
1262
|
appearance: "none",
|
|
@@ -1292,10 +1286,10 @@ const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create
|
|
|
1292
1286
|
pointerEvents: "none"
|
|
1293
1287
|
}
|
|
1294
1288
|
});
|
|
1295
|
-
const fadedBlue = Object(
|
|
1296
|
-
const activeBlue = Object(
|
|
1297
|
-
const fadedRed = Object(
|
|
1298
|
-
const activeRed = Object(
|
|
1289
|
+
const fadedBlue = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["fade"])(blue, 0.16), white);
|
|
1290
|
+
const activeBlue = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(offBlack32, blue);
|
|
1291
|
+
const fadedRed = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["fade"])(red, 0.08), white);
|
|
1292
|
+
const activeRed = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(offBlack32, red);
|
|
1299
1293
|
const colors = {
|
|
1300
1294
|
default: {
|
|
1301
1295
|
faded: fadedBlue,
|
|
@@ -1354,7 +1348,7 @@ const _generateStyles = (checked, error) => {
|
|
|
1354
1348
|
};
|
|
1355
1349
|
}
|
|
1356
1350
|
|
|
1357
|
-
styles[styleKey] =
|
|
1351
|
+
styles[styleKey] = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create(newStyles);
|
|
1358
1352
|
return styles[styleKey];
|
|
1359
1353
|
};
|
|
1360
1354
|
|
|
@@ -1370,15 +1364,16 @@ module.exports = require("@khanacademy/wonder-blocks-icon");
|
|
|
1370
1364
|
|
|
1371
1365
|
"use strict";
|
|
1372
1366
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return RadioCore; });
|
|
1373
|
-
/* harmony import */ var
|
|
1374
|
-
/* harmony import */ var
|
|
1375
|
-
/* harmony import */ var
|
|
1376
|
-
/* harmony import */ var
|
|
1377
|
-
/* harmony import */ var
|
|
1378
|
-
/* harmony import */ var
|
|
1379
|
-
/* harmony import */ var
|
|
1380
|
-
/* harmony import */ var
|
|
1381
|
-
|
|
1367
|
+
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
|
|
1368
|
+
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
|
|
1369
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
|
|
1370
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
1371
|
+
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(6);
|
|
1372
|
+
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_2__);
|
|
1373
|
+
/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
|
|
1374
|
+
/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
|
|
1375
|
+
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(2);
|
|
1376
|
+
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__);
|
|
1382
1377
|
|
|
1383
1378
|
|
|
1384
1379
|
|
|
@@ -1392,13 +1387,13 @@ const {
|
|
|
1392
1387
|
offBlack16,
|
|
1393
1388
|
offBlack32,
|
|
1394
1389
|
offBlack50
|
|
1395
|
-
} =
|
|
1396
|
-
const StyledInput = Object(
|
|
1390
|
+
} = _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a;
|
|
1391
|
+
const StyledInput = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_4__["addStyle"])("input");
|
|
1397
1392
|
/**
|
|
1398
1393
|
* The internal stateless 🔘 Radio button
|
|
1399
1394
|
*/
|
|
1400
1395
|
|
|
1401
|
-
class RadioCore extends
|
|
1396
|
+
class RadioCore extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
|
|
1402
1397
|
constructor(...args) {
|
|
1403
1398
|
super(...args);
|
|
1404
1399
|
|
|
@@ -1429,7 +1424,7 @@ class RadioCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
|
1429
1424
|
const props = {
|
|
1430
1425
|
"data-test-id": testId
|
|
1431
1426
|
};
|
|
1432
|
-
return /*#__PURE__*/
|
|
1427
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](react__WEBPACK_IMPORTED_MODULE_1__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](StyledInput, _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({}, sharedProps, {
|
|
1433
1428
|
type: "radio",
|
|
1434
1429
|
"aria-invalid": error,
|
|
1435
1430
|
checked: checked,
|
|
@@ -1440,7 +1435,7 @@ class RadioCore extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
|
1440
1435
|
,
|
|
1441
1436
|
onChange: this.handleChange,
|
|
1442
1437
|
style: defaultStyle
|
|
1443
|
-
}, props)), disabled && checked && /*#__PURE__*/
|
|
1438
|
+
}, props)), disabled && checked && /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"]("span", {
|
|
1444
1439
|
style: disabledChecked
|
|
1445
1440
|
}));
|
|
1446
1441
|
}
|
|
@@ -1457,7 +1452,7 @@ const disabledChecked = {
|
|
|
1457
1452
|
borderRadius: "50%",
|
|
1458
1453
|
backgroundColor: offBlack32
|
|
1459
1454
|
};
|
|
1460
|
-
const sharedStyles =
|
|
1455
|
+
const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create({
|
|
1461
1456
|
// Reset the default styled input element
|
|
1462
1457
|
inputReset: {
|
|
1463
1458
|
appearance: "none",
|
|
@@ -1483,10 +1478,10 @@ const sharedStyles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create
|
|
|
1483
1478
|
borderWidth: 1
|
|
1484
1479
|
}
|
|
1485
1480
|
});
|
|
1486
|
-
const fadedBlue = Object(
|
|
1487
|
-
const activeBlue = Object(
|
|
1488
|
-
const fadedRed = Object(
|
|
1489
|
-
const activeRed = Object(
|
|
1481
|
+
const fadedBlue = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["fade"])(blue, 0.16), white);
|
|
1482
|
+
const activeBlue = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(offBlack32, blue);
|
|
1483
|
+
const fadedRed = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["fade"])(red, 0.08), white);
|
|
1484
|
+
const activeRed = Object(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__["mix"])(offBlack32, red);
|
|
1490
1485
|
const colors = {
|
|
1491
1486
|
default: {
|
|
1492
1487
|
faded: fadedBlue,
|
|
@@ -1546,7 +1541,7 @@ const _generateStyles = (checked, error) => {
|
|
|
1546
1541
|
};
|
|
1547
1542
|
}
|
|
1548
1543
|
|
|
1549
|
-
styles[styleKey] =
|
|
1544
|
+
styles[styleKey] = aphrodite__WEBPACK_IMPORTED_MODULE_2__["StyleSheet"].create(newStyles);
|
|
1550
1545
|
return styles[styleKey];
|
|
1551
1546
|
};
|
|
1552
1547
|
|
|
@@ -1554,17 +1549,52 @@ const _generateStyles = (checked, error) => {
|
|
|
1554
1549
|
/* 20 */
|
|
1555
1550
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
1556
1551
|
|
|
1552
|
+
"use strict";
|
|
1553
|
+
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Radio; });
|
|
1554
|
+
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(5);
|
|
1555
|
+
/* harmony import */ var _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0__);
|
|
1556
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(0);
|
|
1557
|
+
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_1__);
|
|
1558
|
+
/* harmony import */ var _choice_internal_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(11);
|
|
1559
|
+
|
|
1560
|
+
|
|
1561
|
+
// Keep synced with ChoiceComponentProps in ../util/types.js
|
|
1562
|
+
|
|
1563
|
+
/**
|
|
1564
|
+
* 🔘 A nicely styled radio button for all your non-AMFM radio button needs. Can
|
|
1565
|
+
* optionally take label and description props.
|
|
1566
|
+
*
|
|
1567
|
+
* This component should not really be used by itself because radio buttons are
|
|
1568
|
+
* often grouped together. See RadioGroup.
|
|
1569
|
+
*/
|
|
1570
|
+
class Radio extends react__WEBPACK_IMPORTED_MODULE_1__["Component"] {
|
|
1571
|
+
render() {
|
|
1572
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_1__["createElement"](_choice_internal_js__WEBPACK_IMPORTED_MODULE_2__[/* default */ "a"], _babel_runtime_helpers_extends__WEBPACK_IMPORTED_MODULE_0___default()({
|
|
1573
|
+
variant: "radio"
|
|
1574
|
+
}, this.props));
|
|
1575
|
+
}
|
|
1576
|
+
|
|
1577
|
+
}
|
|
1578
|
+
Radio.defaultProps = {
|
|
1579
|
+
disabled: false,
|
|
1580
|
+
error: false
|
|
1581
|
+
};
|
|
1582
|
+
|
|
1583
|
+
/***/ }),
|
|
1584
|
+
/* 21 */
|
|
1585
|
+
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
1586
|
+
|
|
1557
1587
|
"use strict";
|
|
1558
1588
|
/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return FieldHeading; });
|
|
1559
1589
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(0);
|
|
1560
1590
|
/* harmony import */ var react__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(react__WEBPACK_IMPORTED_MODULE_0__);
|
|
1561
|
-
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(
|
|
1591
|
+
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(6);
|
|
1562
1592
|
/* harmony import */ var aphrodite__WEBPACK_IMPORTED_MODULE_1___default = /*#__PURE__*/__webpack_require__.n(aphrodite__WEBPACK_IMPORTED_MODULE_1__);
|
|
1563
1593
|
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(2);
|
|
1564
1594
|
/* harmony import */ var _khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__);
|
|
1565
1595
|
/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(1);
|
|
1566
1596
|
/* harmony import */ var _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3__);
|
|
1567
|
-
/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(
|
|
1597
|
+
/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(8);
|
|
1568
1598
|
/* harmony import */ var _khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__);
|
|
1569
1599
|
/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(3);
|
|
1570
1600
|
/* harmony import */ var _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default = /*#__PURE__*/__webpack_require__.n(_khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5__);
|
|
@@ -1595,12 +1625,12 @@ class FieldHeading extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
|
1595
1625
|
style: styles.required,
|
|
1596
1626
|
"aria-hidden": true
|
|
1597
1627
|
}, " ", "*");
|
|
1598
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
|
|
1628
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__["LabelMedium"], {
|
|
1599
1629
|
style: styles.label,
|
|
1600
1630
|
tag: "label",
|
|
1601
1631
|
htmlFor: id && `${id}-field`,
|
|
1602
1632
|
testId: testId && `${testId}-label`
|
|
1603
|
-
}, label, required && requiredIcon)
|
|
1633
|
+
}, label, required && requiredIcon), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__["Strut"], {
|
|
1604
1634
|
size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xxxSmall_4
|
|
1605
1635
|
}));
|
|
1606
1636
|
}
|
|
@@ -1615,10 +1645,10 @@ class FieldHeading extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
|
1615
1645
|
return null;
|
|
1616
1646
|
}
|
|
1617
1647
|
|
|
1618
|
-
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null,
|
|
1648
|
+
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__["LabelSmall"], {
|
|
1619
1649
|
style: styles.description,
|
|
1620
1650
|
testId: testId && `${testId}-description`
|
|
1621
|
-
}, description)
|
|
1651
|
+
}, description), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__["Strut"], {
|
|
1622
1652
|
size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xxxSmall_4
|
|
1623
1653
|
}));
|
|
1624
1654
|
}
|
|
@@ -1636,12 +1666,12 @@ class FieldHeading extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
|
|
|
1636
1666
|
|
|
1637
1667
|
return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__["Strut"], {
|
|
1638
1668
|
size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.small_12
|
|
1639
|
-
}),
|
|
1669
|
+
}), /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__["LabelSmall"], {
|
|
1640
1670
|
style: styles.error,
|
|
1641
1671
|
role: "alert",
|
|
1642
1672
|
id: id && `${id}-error`,
|
|
1643
1673
|
testId: testId && `${testId}-error`
|
|
1644
|
-
}, error)
|
|
1674
|
+
}, error));
|
|
1645
1675
|
}
|
|
1646
1676
|
|
|
1647
1677
|
render() {
|
|
@@ -1673,32 +1703,28 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
|
|
|
1673
1703
|
});
|
|
1674
1704
|
|
|
1675
1705
|
/***/ }),
|
|
1676
|
-
/*
|
|
1706
|
+
/* 22 */
|
|
1677
1707
|
/***/ (function(module, __webpack_exports__, __webpack_require__) {
|
|
1678
1708
|
|
|
1679
1709
|
"use strict";
|
|
1680
1710
|
__webpack_require__.r(__webpack_exports__);
|
|
1681
|
-
/* harmony import */ var _components_checkbox_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(
|
|
1711
|
+
/* harmony import */ var _components_checkbox_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(9);
|
|
1682
1712
|
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Checkbox", function() { return _components_checkbox_js__WEBPACK_IMPORTED_MODULE_0__["a"]; });
|
|
1683
1713
|
|
|
1684
|
-
/* harmony import */ var
|
|
1685
|
-
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "
|
|
1686
|
-
|
|
1687
|
-
/* harmony import */ var _components_choice_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(12);
|
|
1688
|
-
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Choice", function() { return _components_choice_js__WEBPACK_IMPORTED_MODULE_2__["a"]; });
|
|
1689
|
-
|
|
1690
|
-
/* harmony import */ var _components_checkbox_group_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(13);
|
|
1691
|
-
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CheckboxGroup", function() { return _components_checkbox_group_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
|
|
1714
|
+
/* harmony import */ var _components_choice_js__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(12);
|
|
1715
|
+
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "Choice", function() { return _components_choice_js__WEBPACK_IMPORTED_MODULE_1__["a"]; });
|
|
1692
1716
|
|
|
1693
|
-
/* harmony import */ var
|
|
1694
|
-
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "
|
|
1717
|
+
/* harmony import */ var _components_checkbox_group_js__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(13);
|
|
1718
|
+
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "CheckboxGroup", function() { return _components_checkbox_group_js__WEBPACK_IMPORTED_MODULE_2__["a"]; });
|
|
1695
1719
|
|
|
1696
|
-
/* harmony import */ var
|
|
1697
|
-
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "
|
|
1720
|
+
/* harmony import */ var _components_radio_group_js__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(14);
|
|
1721
|
+
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "RadioGroup", function() { return _components_radio_group_js__WEBPACK_IMPORTED_MODULE_3__["a"]; });
|
|
1698
1722
|
|
|
1699
|
-
/* harmony import */ var
|
|
1700
|
-
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "
|
|
1723
|
+
/* harmony import */ var _components_text_field_js__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(10);
|
|
1724
|
+
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "TextField", function() { return _components_text_field_js__WEBPACK_IMPORTED_MODULE_4__["a"]; });
|
|
1701
1725
|
|
|
1726
|
+
/* harmony import */ var _components_labeled_text_field_js__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(15);
|
|
1727
|
+
/* harmony reexport (safe) */ __webpack_require__.d(__webpack_exports__, "LabeledTextField", function() { return _components_labeled_text_field_js__WEBPACK_IMPORTED_MODULE_5__["a"]; });
|
|
1702
1728
|
|
|
1703
1729
|
|
|
1704
1730
|
|