@khanacademy/perseus 1.1.0 → 1.1.2
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 +16 -0
- package/dist/es/index.css +3 -0
- package/dist/es/index.js +15385 -15345
- package/dist/es/index.js.map +1 -1
- package/dist/index.css +3 -0
- package/dist/index.js +15309 -15269
- package/dist/index.js.map +1 -1
- package/dist/strings.js +1 -0
- package/package.json +1 -1
- package/src/__stories__/hints-renderer.stories.jsx +52 -0
- 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/hints-renderer.jsx +13 -4
- package/src/mixins/__tests__/widget-prop-blacklist_test.js +23 -0
- package/src/mixins/widget-prop-blacklist.js +15 -1
- package/src/multi-items/__tests__/__snapshots__/multi-renderer_test.js.snap +30 -10
- package/src/styles/widgets/matrix.less +2 -0
- package/src/styles/widgets/passage.less +1 -0
- package/src/types.js +1 -1
- package/src/widgets/__stories__/numeric-input.stories.jsx +53 -7
- package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt_test.jsx.snap +18 -9
- package/src/widgets/__tests__/__snapshots__/graded-group-set_test.jsx.snap +12 -3
- package/src/widgets/__tests__/__snapshots__/graded-group_test.jsx.snap +6 -3
- package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap +32 -12
- 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/__tests__/__snapshots__/passage-ref_test.jsx.snap +3 -3
- package/src/widgets/__tests__/__snapshots__/passage_test.jsx.snap +6 -6
- package/src/widgets/__tests__/__snapshots__/radio_test.jsx.snap +300 -218
- package/src/widgets/__tests__/radio/base-radio_test.jsx +90 -6
- package/src/widgets/__tests__/radio/choice-icon_test.jsx +74 -0
- package/src/widgets/__tests__/radio/choice_test.jsx +39 -30
- package/src/widgets/__tests__/radio_test.jsx +228 -22
- package/src/widgets/graded-group-set.jsx +8 -1
- package/src/widgets/graded-group.jsx +7 -2
- package/src/widgets/matrix.jsx +17 -1
- package/src/widgets/numeric-input.jsx +12 -6
- package/src/widgets/passage-ref.jsx +21 -5
- package/src/widgets/passage.jsx +3 -1
- package/src/widgets/radio/__stories__/base-radio.stories.jsx +7 -3
- package/src/widgets/radio/base-radio.jsx +3 -1
- package/src/widgets/radio/choice-icon/cross-out-line.jsx +3 -2
- package/src/widgets/radio/choice-icon/library-choice-icon.jsx +17 -6
- package/src/widgets/radio/choice.jsx +2 -1
|
@@ -153,11 +153,13 @@ function LibraryChoiceIcon(props: LibraryChoiceIconProps): React.Node {
|
|
|
153
153
|
// radio icon
|
|
154
154
|
data-is-radio-icon={true}
|
|
155
155
|
>
|
|
156
|
-
<
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
156
|
+
<div className={css(styles.innerWrapper)}>
|
|
157
|
+
<ChoiceInner
|
|
158
|
+
letter={letter}
|
|
159
|
+
showCorrectness={showCorrectness}
|
|
160
|
+
correct={correct}
|
|
161
|
+
/>
|
|
162
|
+
</div>
|
|
161
163
|
</div>
|
|
162
164
|
</FocusRing>
|
|
163
165
|
{crossedOut && <CrossOutLine color={dynamicStyles.borderColor} />}
|
|
@@ -166,6 +168,15 @@ function LibraryChoiceIcon(props: LibraryChoiceIconProps): React.Node {
|
|
|
166
168
|
}
|
|
167
169
|
|
|
168
170
|
const styles = StyleSheet.create({
|
|
171
|
+
innerWrapper: {
|
|
172
|
+
width: LIBRARY_ICON_SIZE,
|
|
173
|
+
height: LIBRARY_ICON_SIZE,
|
|
174
|
+
|
|
175
|
+
// Center the contents of the icon.
|
|
176
|
+
display: "flex",
|
|
177
|
+
alignItems: "center",
|
|
178
|
+
justifyContent: "center",
|
|
179
|
+
},
|
|
169
180
|
circle: {
|
|
170
181
|
// Make the circle
|
|
171
182
|
width: LIBRARY_ICON_SIZE,
|
|
@@ -182,7 +193,7 @@ const styles = StyleSheet.create({
|
|
|
182
193
|
fontWeight: "bold",
|
|
183
194
|
fontSize: 12,
|
|
184
195
|
|
|
185
|
-
// Center the
|
|
196
|
+
// Center the icon wrapper.
|
|
186
197
|
display: "flex",
|
|
187
198
|
alignItems: "center",
|
|
188
199
|
justifyContent: "center",
|
|
@@ -241,6 +241,7 @@ function Choice(props: ChoicePropsWithForwardRef): React.Node {
|
|
|
241
241
|
alignContent: "center",
|
|
242
242
|
paddingTop: Spacing.xSmall_8,
|
|
243
243
|
paddingBottom: Spacing.xSmall_8,
|
|
244
|
+
paddingLeft: Spacing.xSmall_8,
|
|
244
245
|
}}
|
|
245
246
|
>
|
|
246
247
|
<ChoiceIcon
|
|
@@ -412,7 +413,7 @@ const styles = StyleSheet.create({
|
|
|
412
413
|
nonSatRationale: {
|
|
413
414
|
padding: intermediateCheckboxPadding,
|
|
414
415
|
paddingTop: 0,
|
|
415
|
-
marginLeft:
|
|
416
|
+
marginLeft: 54,
|
|
416
417
|
[mediaQueries.smOrSmaller]: {
|
|
417
418
|
padding: intermediateCheckboxPaddingPhone,
|
|
418
419
|
paddingTop: 0,
|