@khanacademy/perseus 1.1.0 → 1.1.1
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 +8 -0
- package/dist/es/index.css +2 -0
- package/dist/es/index.js +33 -29
- package/dist/es/index.js.map +1 -1
- package/dist/index.css +2 -0
- package/dist/index.js +32 -29
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
- package/src/components/__stories__/input-with-examples.stories.jsx +1 -0
- package/src/components/input-with-examples.jsx +41 -24
- package/src/components/text-input.jsx +5 -3
- package/src/styles/widgets/matrix.less +2 -0
- package/src/widgets/__stories__/numeric-input.stories.jsx +53 -7
- package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt_test.jsx.snap +15 -6
- package/src/widgets/__tests__/__snapshots__/graded-group-set_test.jsx.snap +5 -2
- package/src/widgets/__tests__/__snapshots__/graded-group_test.jsx.snap +4 -1
- package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap +2 -2
- package/src/widgets/__tests__/__snapshots__/matrix_test.jsx.snap +24 -24
- package/src/widgets/__tests__/__snapshots__/numeric-input_test.jsx.snap +4 -4
- package/src/widgets/graded-group.jsx +5 -1
- package/src/widgets/matrix.jsx +17 -1
- package/src/widgets/numeric-input.jsx +12 -6
package/package.json
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
/* eslint-disable react/sort-comp */
|
|
2
2
|
// @flow
|
|
3
3
|
import * as PerseusLinter from "@khanacademy/perseus-linter";
|
|
4
|
-
import PropTypes from "prop-types";
|
|
5
4
|
import * as React from "react";
|
|
6
5
|
import _ from "underscore";
|
|
7
6
|
|
|
@@ -14,42 +13,59 @@ import MathOutput from "./math-output.jsx";
|
|
|
14
13
|
import TextInput from "./text-input.jsx";
|
|
15
14
|
import Tooltip from "./tooltip.jsx";
|
|
16
15
|
|
|
16
|
+
import type {LinterContextProps} from "../types.js";
|
|
17
|
+
|
|
17
18
|
const {captureScratchpadTouchStart} = Util;
|
|
18
19
|
const MATH = "math";
|
|
19
20
|
const TEXT = "text";
|
|
20
21
|
const TEX = "tex";
|
|
21
22
|
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
23
|
+
type Props = {|
|
|
24
|
+
type: "math" | "text" | "tex",
|
|
25
|
+
value: string,
|
|
26
|
+
onChange: $FlowFixMe,
|
|
27
|
+
className: string,
|
|
28
|
+
examples: $ReadOnlyArray<string>,
|
|
29
|
+
shouldShowExamples: boolean,
|
|
30
|
+
convertDotToTimes?: boolean,
|
|
31
|
+
buttonSet?: string,
|
|
32
|
+
buttonsVisible?: "always" | "never" | "focused",
|
|
33
|
+
labelText?: string,
|
|
34
|
+
onFocus: () => void,
|
|
35
|
+
onBlur: () => void,
|
|
36
|
+
disabled: boolean,
|
|
37
|
+
style?: $FlowFixMe,
|
|
38
|
+
id: string,
|
|
39
|
+
linterContext: LinterContextProps,
|
|
40
|
+
|};
|
|
41
|
+
|
|
42
|
+
type DefaultProps = {|
|
|
43
|
+
type: Props["type"],
|
|
44
|
+
shouldShowExamples: Props["shouldShowExamples"],
|
|
45
|
+
onFocus: Props["onFocus"],
|
|
46
|
+
onBlur: Props["onBlur"],
|
|
47
|
+
disabled: Props["disabled"],
|
|
48
|
+
linterContext: Props["linterContext"],
|
|
49
|
+
className: Props["className"],
|
|
50
|
+
|};
|
|
51
|
+
|
|
52
|
+
type State = {|
|
|
53
|
+
focused: boolean,
|
|
54
|
+
showExamples: boolean,
|
|
55
|
+
|};
|
|
56
|
+
|
|
57
|
+
class InputWithExamples extends React.Component<Props, State> {
|
|
58
|
+
static defaultProps: DefaultProps = {
|
|
44
59
|
type: TEXT,
|
|
45
60
|
shouldShowExamples: true,
|
|
46
61
|
onFocus: function () {},
|
|
47
62
|
onBlur: function () {},
|
|
48
63
|
disabled: false,
|
|
49
64
|
linterContext: PerseusLinter.linterContextDefault,
|
|
65
|
+
className: "",
|
|
50
66
|
};
|
|
51
67
|
|
|
52
|
-
state:
|
|
68
|
+
state: State = {
|
|
53
69
|
focused: false,
|
|
54
70
|
showExamples: false,
|
|
55
71
|
};
|
|
@@ -89,6 +105,7 @@ class InputWithExamples extends React.Component<$FlowFixMe, $FlowFixMe> {
|
|
|
89
105
|
onFocus: this._handleFocus,
|
|
90
106
|
onBlur: this._handleBlur,
|
|
91
107
|
disabled: this.props.disabled,
|
|
108
|
+
style: this.props.style,
|
|
92
109
|
};
|
|
93
110
|
|
|
94
111
|
if (this.props.type === TEX) {
|
|
@@ -4,6 +4,8 @@ import {TextField} from "@khanacademy/wonder-blocks-form";
|
|
|
4
4
|
import * as React from "react";
|
|
5
5
|
import ReactDOM from "react-dom";
|
|
6
6
|
|
|
7
|
+
import type {StyleType} from "@khanacademy/wonder-blocks-core";
|
|
8
|
+
|
|
7
9
|
type Props = {|
|
|
8
10
|
value: string | number | null,
|
|
9
11
|
onChange: (any) => void,
|
|
@@ -15,9 +17,7 @@ type Props = {|
|
|
|
15
17
|
id?: string,
|
|
16
18
|
placeholder?: string,
|
|
17
19
|
onKeyDown?: () => void,
|
|
18
|
-
|
|
19
|
-
// TODO: Remove this
|
|
20
|
-
style?: $FlowFixMe,
|
|
20
|
+
style?: StyleType,
|
|
21
21
|
|};
|
|
22
22
|
|
|
23
23
|
type DefaultProps = {|
|
|
@@ -57,6 +57,7 @@ class TextInput extends React.Component<Props> {
|
|
|
57
57
|
disabled,
|
|
58
58
|
placeholder,
|
|
59
59
|
onKeyDown,
|
|
60
|
+
style,
|
|
60
61
|
} = this.props;
|
|
61
62
|
|
|
62
63
|
const formattedValue = value === null ? "" : value.toString();
|
|
@@ -64,6 +65,7 @@ class TextInput extends React.Component<Props> {
|
|
|
64
65
|
return (
|
|
65
66
|
// $FlowIgnore
|
|
66
67
|
<TextField
|
|
68
|
+
style={style}
|
|
67
69
|
disabled={disabled}
|
|
68
70
|
id={this.id}
|
|
69
71
|
value={formattedValue}
|
|
@@ -43,11 +43,13 @@
|
|
|
43
43
|
&.bracket-left {
|
|
44
44
|
border-color: @bracketColor;
|
|
45
45
|
border-left-width: @borderWidth;
|
|
46
|
+
border-right-width: 0;
|
|
46
47
|
left: 3px;
|
|
47
48
|
}
|
|
48
49
|
|
|
49
50
|
&.bracket-right {
|
|
50
51
|
border-color: @bracketColor;
|
|
52
|
+
border-left-width: 0;
|
|
51
53
|
border-right-width: @borderWidth;
|
|
52
54
|
margin-left: (1px - 2 * @borderWidth);
|
|
53
55
|
}
|
|
@@ -7,12 +7,10 @@ import {question1} from "../__testdata__/numeric-input_testdata.js";
|
|
|
7
7
|
import {NumericInput} from "../numeric-input.jsx";
|
|
8
8
|
|
|
9
9
|
type StoryArgs = {|
|
|
10
|
+
coefficient: boolean,
|
|
10
11
|
currentValue: string,
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
type Story = {|
|
|
14
|
-
title: string,
|
|
15
|
-
args: StoryArgs,
|
|
12
|
+
rightAlign: boolean,
|
|
13
|
+
size: "normal" | "small",
|
|
16
14
|
|};
|
|
17
15
|
|
|
18
16
|
function generateProps(overwrite) {
|
|
@@ -21,6 +19,7 @@ function generateProps(overwrite) {
|
|
|
21
19
|
answers: [],
|
|
22
20
|
containerSizeClass: "medium",
|
|
23
21
|
isLastUsedWidget: true,
|
|
22
|
+
coefficient: false,
|
|
24
23
|
currentValue: "",
|
|
25
24
|
problemNum: 0,
|
|
26
25
|
reviewModeRubric: {
|
|
@@ -30,6 +29,8 @@ function generateProps(overwrite) {
|
|
|
30
29
|
coefficient: false,
|
|
31
30
|
static: false,
|
|
32
31
|
},
|
|
32
|
+
rightAlign: false,
|
|
33
|
+
size: "normal",
|
|
33
34
|
static: false,
|
|
34
35
|
widgetId: "widgetId",
|
|
35
36
|
findWidgets: action("findWidgets"),
|
|
@@ -42,12 +43,21 @@ function generateProps(overwrite) {
|
|
|
42
43
|
return {...base, ...overwrite};
|
|
43
44
|
}
|
|
44
45
|
|
|
45
|
-
export default
|
|
46
|
+
export default {
|
|
46
47
|
title: "Perseus/Widgets/NumericInput",
|
|
47
48
|
args: {
|
|
49
|
+
coefficient: false,
|
|
48
50
|
currentValue: "8675309",
|
|
51
|
+
rightAlign: false,
|
|
52
|
+
},
|
|
53
|
+
argTypes: {
|
|
54
|
+
size: {
|
|
55
|
+
options: ["normal", "small"],
|
|
56
|
+
control: {type: "radio"},
|
|
57
|
+
defaultValue: "normal",
|
|
58
|
+
},
|
|
49
59
|
},
|
|
50
|
-
}
|
|
60
|
+
};
|
|
51
61
|
|
|
52
62
|
export const Question1 = (): React.Node => {
|
|
53
63
|
return <RendererWithDebugUI question={question1} />;
|
|
@@ -58,3 +68,39 @@ export const Interactive = (args: StoryArgs): React.Node => {
|
|
|
58
68
|
|
|
59
69
|
return <NumericInput {...props} />;
|
|
60
70
|
};
|
|
71
|
+
|
|
72
|
+
export const Sizes = (args: StoryArgs): React.Node => {
|
|
73
|
+
const smallProps = generateProps({...args, size: "small"});
|
|
74
|
+
const normalProps = generateProps({...args, size: "normal"});
|
|
75
|
+
|
|
76
|
+
return (
|
|
77
|
+
<div>
|
|
78
|
+
<label>
|
|
79
|
+
Small:
|
|
80
|
+
<NumericInput {...smallProps} />
|
|
81
|
+
</label>
|
|
82
|
+
<label>
|
|
83
|
+
Normal:
|
|
84
|
+
<NumericInput {...normalProps} />
|
|
85
|
+
</label>
|
|
86
|
+
</div>
|
|
87
|
+
);
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
export const TextAlignment = (args: StoryArgs): React.Node => {
|
|
91
|
+
const leftProps = generateProps({...args, rightAlign: false});
|
|
92
|
+
const rightProps = generateProps({...args, rightAlign: true});
|
|
93
|
+
|
|
94
|
+
return (
|
|
95
|
+
<div>
|
|
96
|
+
<label>
|
|
97
|
+
Left:
|
|
98
|
+
<NumericInput {...leftProps} />
|
|
99
|
+
</label>
|
|
100
|
+
<label>
|
|
101
|
+
Right:
|
|
102
|
+
<NumericInput {...rightProps} />
|
|
103
|
+
</label>
|
|
104
|
+
</div>
|
|
105
|
+
);
|
|
106
|
+
};
|
|
@@ -73,7 +73,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
|
|
|
73
73
|
autocapitalize="off"
|
|
74
74
|
autocomplete="off"
|
|
75
75
|
autocorrect="off"
|
|
76
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
76
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_19vw1dn"
|
|
77
77
|
id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
|
|
78
78
|
type="text"
|
|
79
79
|
value=""
|
|
@@ -242,7 +242,10 @@ exports[`graded-group-set should render all graded groups 1`] = `
|
|
|
242
242
|
</div>
|
|
243
243
|
</div>
|
|
244
244
|
</span>
|
|
245
|
-
<p
|
|
245
|
+
<p
|
|
246
|
+
aria-live="polite"
|
|
247
|
+
role="status"
|
|
248
|
+
/>
|
|
246
249
|
<button
|
|
247
250
|
aria-disabled="false"
|
|
248
251
|
class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1w5v67"
|
|
@@ -307,7 +310,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
|
|
|
307
310
|
autocapitalize="off"
|
|
308
311
|
autocomplete="off"
|
|
309
312
|
autocorrect="off"
|
|
310
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
313
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_19vw1dn"
|
|
311
314
|
id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
|
|
312
315
|
type="text"
|
|
313
316
|
value=""
|
|
@@ -476,7 +479,10 @@ exports[`graded-group-set should render all graded groups 1`] = `
|
|
|
476
479
|
</div>
|
|
477
480
|
</div>
|
|
478
481
|
</span>
|
|
479
|
-
<p
|
|
482
|
+
<p
|
|
483
|
+
aria-live="polite"
|
|
484
|
+
role="status"
|
|
485
|
+
/>
|
|
480
486
|
<button
|
|
481
487
|
aria-disabled="false"
|
|
482
488
|
class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1w5v67"
|
|
@@ -541,7 +547,7 @@ exports[`graded-group-set should render all graded groups 1`] = `
|
|
|
541
547
|
autocapitalize="off"
|
|
542
548
|
autocomplete="off"
|
|
543
549
|
autocorrect="off"
|
|
544
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
550
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_19vw1dn"
|
|
545
551
|
id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
|
|
546
552
|
type="text"
|
|
547
553
|
value=""
|
|
@@ -710,7 +716,10 @@ exports[`graded-group-set should render all graded groups 1`] = `
|
|
|
710
716
|
</div>
|
|
711
717
|
</div>
|
|
712
718
|
</span>
|
|
713
|
-
<p
|
|
719
|
+
<p
|
|
720
|
+
aria-live="polite"
|
|
721
|
+
role="status"
|
|
722
|
+
/>
|
|
714
723
|
<button
|
|
715
724
|
aria-disabled="false"
|
|
716
725
|
class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1w5v67"
|
|
@@ -99,7 +99,7 @@ exports[`graded group widget should snapshot 1`] = `
|
|
|
99
99
|
autocapitalize="off"
|
|
100
100
|
autocomplete="off"
|
|
101
101
|
autocorrect="off"
|
|
102
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
102
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_19vw1dn"
|
|
103
103
|
id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
|
|
104
104
|
type="text"
|
|
105
105
|
value=""
|
|
@@ -268,7 +268,10 @@ exports[`graded group widget should snapshot 1`] = `
|
|
|
268
268
|
</div>
|
|
269
269
|
</div>
|
|
270
270
|
</span>
|
|
271
|
-
<p
|
|
271
|
+
<p
|
|
272
|
+
aria-live="polite"
|
|
273
|
+
role="status"
|
|
274
|
+
/>
|
|
272
275
|
<button
|
|
273
276
|
aria-disabled="false"
|
|
274
277
|
class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1w5v67"
|
|
@@ -463,7 +463,10 @@ exports[`graded-group should snapshot: initial render (mobile: false) 1`] = `
|
|
|
463
463
|
</div>
|
|
464
464
|
</div>
|
|
465
465
|
</span>
|
|
466
|
-
<p
|
|
466
|
+
<p
|
|
467
|
+
aria-live="polite"
|
|
468
|
+
role="status"
|
|
469
|
+
/>
|
|
467
470
|
<button
|
|
468
471
|
aria-disabled="false"
|
|
469
472
|
class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1w5v67"
|
|
@@ -801,7 +801,7 @@ exports[`group widget should snapshot: initial render 1`] = `
|
|
|
801
801
|
autocapitalize="off"
|
|
802
802
|
autocomplete="off"
|
|
803
803
|
autocorrect="off"
|
|
804
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
804
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_19vw1dn"
|
|
805
805
|
id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
|
|
806
806
|
type="text"
|
|
807
807
|
value=""
|
|
@@ -1011,7 +1011,7 @@ exports[`group widget should snapshot: initial render 1`] = `
|
|
|
1011
1011
|
autocapitalize="off"
|
|
1012
1012
|
autocomplete="off"
|
|
1013
1013
|
autocorrect="off"
|
|
1014
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
1014
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_19vw1dn"
|
|
1015
1015
|
id="input-with-examples-bnVtZXJpYy1pbnB1dCAy"
|
|
1016
1016
|
type="text"
|
|
1017
1017
|
value=""
|
|
@@ -94,7 +94,7 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
|
|
|
94
94
|
autocapitalize="off"
|
|
95
95
|
autocomplete="off"
|
|
96
96
|
autocorrect="off"
|
|
97
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
97
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1qo22fw"
|
|
98
98
|
id="input-13"
|
|
99
99
|
type="text"
|
|
100
100
|
value=""
|
|
@@ -107,7 +107,7 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
|
|
|
107
107
|
autocapitalize="off"
|
|
108
108
|
autocomplete="off"
|
|
109
109
|
autocorrect="off"
|
|
110
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
110
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
111
111
|
id="input-14"
|
|
112
112
|
type="text"
|
|
113
113
|
value=""
|
|
@@ -120,7 +120,7 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
|
|
|
120
120
|
autocapitalize="off"
|
|
121
121
|
autocomplete="off"
|
|
122
122
|
autocorrect="off"
|
|
123
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
123
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
124
124
|
id="input-15"
|
|
125
125
|
type="text"
|
|
126
126
|
value=""
|
|
@@ -133,7 +133,7 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
|
|
|
133
133
|
autocapitalize="off"
|
|
134
134
|
autocomplete="off"
|
|
135
135
|
autocorrect="off"
|
|
136
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
136
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
137
137
|
id="input-16"
|
|
138
138
|
type="text"
|
|
139
139
|
value=""
|
|
@@ -150,7 +150,7 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
|
|
|
150
150
|
autocapitalize="off"
|
|
151
151
|
autocomplete="off"
|
|
152
152
|
autocorrect="off"
|
|
153
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
153
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
154
154
|
id="input-17"
|
|
155
155
|
type="text"
|
|
156
156
|
value=""
|
|
@@ -163,7 +163,7 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
|
|
|
163
163
|
autocapitalize="off"
|
|
164
164
|
autocomplete="off"
|
|
165
165
|
autocorrect="off"
|
|
166
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
166
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
167
167
|
id="input-18"
|
|
168
168
|
type="text"
|
|
169
169
|
value=""
|
|
@@ -176,7 +176,7 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
|
|
|
176
176
|
autocapitalize="off"
|
|
177
177
|
autocomplete="off"
|
|
178
178
|
autocorrect="off"
|
|
179
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
179
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
180
180
|
id="input-19"
|
|
181
181
|
type="text"
|
|
182
182
|
value=""
|
|
@@ -189,7 +189,7 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
|
|
|
189
189
|
autocapitalize="off"
|
|
190
190
|
autocomplete="off"
|
|
191
191
|
autocorrect="off"
|
|
192
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
192
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
193
193
|
id="input-20"
|
|
194
194
|
type="text"
|
|
195
195
|
value=""
|
|
@@ -206,7 +206,7 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
|
|
|
206
206
|
autocapitalize="off"
|
|
207
207
|
autocomplete="off"
|
|
208
208
|
autocorrect="off"
|
|
209
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
209
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
210
210
|
id="input-21"
|
|
211
211
|
type="text"
|
|
212
212
|
value=""
|
|
@@ -219,7 +219,7 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
|
|
|
219
219
|
autocapitalize="off"
|
|
220
220
|
autocomplete="off"
|
|
221
221
|
autocorrect="off"
|
|
222
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
222
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
223
223
|
id="input-22"
|
|
224
224
|
type="text"
|
|
225
225
|
value=""
|
|
@@ -232,7 +232,7 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
|
|
|
232
232
|
autocapitalize="off"
|
|
233
233
|
autocomplete="off"
|
|
234
234
|
autocorrect="off"
|
|
235
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
235
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
236
236
|
id="input-23"
|
|
237
237
|
type="text"
|
|
238
238
|
value=""
|
|
@@ -245,7 +245,7 @@ exports[`matrix widget should snapshot on mobile: first mobile render 1`] = `
|
|
|
245
245
|
autocapitalize="off"
|
|
246
246
|
autocomplete="off"
|
|
247
247
|
autocorrect="off"
|
|
248
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
248
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
249
249
|
id="input-24"
|
|
250
250
|
type="text"
|
|
251
251
|
value=""
|
|
@@ -352,7 +352,7 @@ exports[`matrix widget should snapshot: first render 1`] = `
|
|
|
352
352
|
autocapitalize="off"
|
|
353
353
|
autocomplete="off"
|
|
354
354
|
autocorrect="off"
|
|
355
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
355
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1qo22fw"
|
|
356
356
|
id="input-1"
|
|
357
357
|
type="text"
|
|
358
358
|
value=""
|
|
@@ -365,7 +365,7 @@ exports[`matrix widget should snapshot: first render 1`] = `
|
|
|
365
365
|
autocapitalize="off"
|
|
366
366
|
autocomplete="off"
|
|
367
367
|
autocorrect="off"
|
|
368
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
368
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
369
369
|
id="input-2"
|
|
370
370
|
type="text"
|
|
371
371
|
value=""
|
|
@@ -378,7 +378,7 @@ exports[`matrix widget should snapshot: first render 1`] = `
|
|
|
378
378
|
autocapitalize="off"
|
|
379
379
|
autocomplete="off"
|
|
380
380
|
autocorrect="off"
|
|
381
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
381
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
382
382
|
id="input-3"
|
|
383
383
|
type="text"
|
|
384
384
|
value=""
|
|
@@ -391,7 +391,7 @@ exports[`matrix widget should snapshot: first render 1`] = `
|
|
|
391
391
|
autocapitalize="off"
|
|
392
392
|
autocomplete="off"
|
|
393
393
|
autocorrect="off"
|
|
394
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
394
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
395
395
|
id="input-4"
|
|
396
396
|
type="text"
|
|
397
397
|
value=""
|
|
@@ -408,7 +408,7 @@ exports[`matrix widget should snapshot: first render 1`] = `
|
|
|
408
408
|
autocapitalize="off"
|
|
409
409
|
autocomplete="off"
|
|
410
410
|
autocorrect="off"
|
|
411
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
411
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
412
412
|
id="input-5"
|
|
413
413
|
type="text"
|
|
414
414
|
value=""
|
|
@@ -421,7 +421,7 @@ exports[`matrix widget should snapshot: first render 1`] = `
|
|
|
421
421
|
autocapitalize="off"
|
|
422
422
|
autocomplete="off"
|
|
423
423
|
autocorrect="off"
|
|
424
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
424
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
425
425
|
id="input-6"
|
|
426
426
|
type="text"
|
|
427
427
|
value=""
|
|
@@ -434,7 +434,7 @@ exports[`matrix widget should snapshot: first render 1`] = `
|
|
|
434
434
|
autocapitalize="off"
|
|
435
435
|
autocomplete="off"
|
|
436
436
|
autocorrect="off"
|
|
437
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
437
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
438
438
|
id="input-7"
|
|
439
439
|
type="text"
|
|
440
440
|
value=""
|
|
@@ -447,7 +447,7 @@ exports[`matrix widget should snapshot: first render 1`] = `
|
|
|
447
447
|
autocapitalize="off"
|
|
448
448
|
autocomplete="off"
|
|
449
449
|
autocorrect="off"
|
|
450
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
450
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
451
451
|
id="input-8"
|
|
452
452
|
type="text"
|
|
453
453
|
value=""
|
|
@@ -464,7 +464,7 @@ exports[`matrix widget should snapshot: first render 1`] = `
|
|
|
464
464
|
autocapitalize="off"
|
|
465
465
|
autocomplete="off"
|
|
466
466
|
autocorrect="off"
|
|
467
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
467
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
468
468
|
id="input-9"
|
|
469
469
|
type="text"
|
|
470
470
|
value=""
|
|
@@ -477,7 +477,7 @@ exports[`matrix widget should snapshot: first render 1`] = `
|
|
|
477
477
|
autocapitalize="off"
|
|
478
478
|
autocomplete="off"
|
|
479
479
|
autocorrect="off"
|
|
480
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
480
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
481
481
|
id="input-10"
|
|
482
482
|
type="text"
|
|
483
483
|
value=""
|
|
@@ -490,7 +490,7 @@ exports[`matrix widget should snapshot: first render 1`] = `
|
|
|
490
490
|
autocapitalize="off"
|
|
491
491
|
autocomplete="off"
|
|
492
492
|
autocorrect="off"
|
|
493
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
493
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
494
494
|
id="input-11"
|
|
495
495
|
type="text"
|
|
496
496
|
value=""
|
|
@@ -503,7 +503,7 @@ exports[`matrix widget should snapshot: first render 1`] = `
|
|
|
503
503
|
autocapitalize="off"
|
|
504
504
|
autocomplete="off"
|
|
505
505
|
autocorrect="off"
|
|
506
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
506
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_1simu8f"
|
|
507
507
|
id="input-12"
|
|
508
508
|
type="text"
|
|
509
509
|
value=""
|
|
@@ -103,7 +103,7 @@ exports[`numeric-input widget (options: {"satStyling":false}) question Should re
|
|
|
103
103
|
autocapitalize="off"
|
|
104
104
|
autocomplete="off"
|
|
105
105
|
autocorrect="off"
|
|
106
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-focused_1z0d9ul"
|
|
106
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-focused_1z0d9ul-o_O-input_19vw1dn"
|
|
107
107
|
id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
|
|
108
108
|
type="text"
|
|
109
109
|
value="1252"
|
|
@@ -314,7 +314,7 @@ exports[`numeric-input widget (options: {"satStyling":false}) question Should re
|
|
|
314
314
|
autocapitalize="off"
|
|
315
315
|
autocomplete="off"
|
|
316
316
|
autocorrect="off"
|
|
317
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
317
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_19vw1dn"
|
|
318
318
|
id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
|
|
319
319
|
type="text"
|
|
320
320
|
value=""
|
|
@@ -533,7 +533,7 @@ exports[`numeric-input widget (options: {"satStyling":true}) question Should ren
|
|
|
533
533
|
autocapitalize="off"
|
|
534
534
|
autocomplete="off"
|
|
535
535
|
autocorrect="off"
|
|
536
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-focused_1z0d9ul"
|
|
536
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-focused_1z0d9ul-o_O-input_19vw1dn"
|
|
537
537
|
id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
|
|
538
538
|
type="text"
|
|
539
539
|
value="1252"
|
|
@@ -752,7 +752,7 @@ exports[`numeric-input widget (options: {"satStyling":true}) question Should ren
|
|
|
752
752
|
autocapitalize="off"
|
|
753
753
|
autocomplete="off"
|
|
754
754
|
autocorrect="off"
|
|
755
|
-
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3"
|
|
755
|
+
class="input_1t4b01j-o_O-LabelMedium_1rew30o-o_O-default_1r2dwp3-o_O-input_19vw1dn"
|
|
756
756
|
id="input-with-examples-bnVtZXJpYy1pbnB1dCAx"
|
|
757
757
|
type="text"
|
|
758
758
|
value=""
|
|
@@ -294,7 +294,11 @@ class GradedGroup extends React.Component<Props, State> {
|
|
|
294
294
|
{gradeStatus}
|
|
295
295
|
</div>
|
|
296
296
|
)}
|
|
297
|
-
{!apiOptions.isMobile &&
|
|
297
|
+
{!apiOptions.isMobile && (
|
|
298
|
+
<p role="status" aria-live="polite">
|
|
299
|
+
{this.state.message}
|
|
300
|
+
</p>
|
|
301
|
+
)}
|
|
298
302
|
{!apiOptions.isMobile && (
|
|
299
303
|
<Button
|
|
300
304
|
kind="secondary"
|