@khanacademy/perseus 0.3.4 → 0.4.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.
Files changed (52) hide show
  1. package/CHANGELOG.md +30 -0
  2. package/dist/es/index.css +436 -1
  3. package/dist/es/index.js +8232 -5591
  4. package/dist/es/index.js.map +1 -1
  5. package/dist/index.css +436 -1
  6. package/dist/index.js +17876 -15237
  7. package/dist/index.js.map +1 -1
  8. package/dist/strings.js +0 -1
  9. package/package.json +9 -8
  10. package/src/__tests__/__snapshots__/item-renderer_test.jsx.snap +2 -3
  11. package/src/__tests__/__snapshots__/server-item-renderer_test.jsx.snap +2 -3
  12. package/src/__tests__/renderer-api_test.jsx +3 -27
  13. package/src/components/__stories__/svg-image.stories.jsx +11 -0
  14. package/src/components/fixed-to-responsive.jsx +1 -0
  15. package/src/components/input-with-examples.jsx +3 -1
  16. package/src/components/svg-image.jsx +10 -7
  17. package/src/components/text-input.jsx +65 -16
  18. package/src/definition-context.js +59 -0
  19. package/src/index.js +5 -1
  20. package/src/multi-items/__tests__/__snapshots__/multi-renderer_test.js.snap +438 -523
  21. package/src/multi-items/__tests__/multi-renderer_test.js +9 -9
  22. package/src/renderer.jsx +13 -6
  23. package/src/types.js +3 -4
  24. package/src/widgets/__stories__/definition.stories.jsx +44 -0
  25. package/src/widgets/__tests__/__snapshots__/categorizer_test.jsx.snap +76 -8
  26. package/src/widgets/__tests__/__snapshots__/graded-group-set-jipt_test.jsx.snap +6 -9
  27. package/src/widgets/__tests__/__snapshots__/graded-group-set_test.jsx.snap +2 -3
  28. package/src/widgets/__tests__/__snapshots__/grapher_test.jsx.snap +19 -2
  29. package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap +338 -390
  30. package/src/widgets/__tests__/__snapshots__/image_test.jsx.snap +38 -4
  31. package/src/widgets/__tests__/__snapshots__/interactive-graph_test.jsx.snap +114 -12
  32. package/src/widgets/__tests__/__snapshots__/matrix_test.jsx.snap +120 -48
  33. package/src/widgets/__tests__/__snapshots__/numeric-input_test.jsx.snap +8 -12
  34. package/src/widgets/__tests__/__snapshots__/radio_test.jsx.snap +3615 -4517
  35. package/src/widgets/__tests__/graded-group-set-jipt_test.jsx +0 -1
  36. package/src/widgets/__tests__/grapher.cypress.jsx +236 -176
  37. package/src/widgets/__tests__/group_test.jsx +4 -4
  38. package/src/widgets/__tests__/interactive-graph.cypress.jsx +371 -291
  39. package/src/widgets/__tests__/radio_test.jsx +73 -114
  40. package/src/widgets/definition.jsx +34 -29
  41. package/src/widgets/numeric-input.jsx +2 -15
  42. package/src/widgets/radio/base-radio.jsx +1 -1
  43. package/src/widgets/radio/choice-icon.jsx +11 -10
  44. package/src/widgets/radio/choice.jsx +164 -396
  45. package/src/widgets/radio/cross-out-button.jsx +3 -5
  46. package/src/widgets/radio/option-status.jsx +4 -5
  47. package/src/widgets/radio/__stories__/cross-out-menu.stories.jsx +0 -59
  48. package/src/widgets/radio/__stories__/cross-out-tooltip.stories.jsx +0 -59
  49. package/src/widgets/radio/__stories__/toggleable-radio-button.stories.jsx +0 -28
  50. package/src/widgets/radio/cross-out-menu-wrapper.jsx +0 -492
  51. package/src/widgets/radio/cross-out-tooltip.jsx +0 -129
  52. package/src/widgets/radio/toggleable-radio-button.jsx +0 -133
package/dist/index.css CHANGED
@@ -1,4 +1,3 @@
1
- @import "../../../node_modules/mathquill/build/mathquill.css";
2
1
  .exercise, .vars, #next { display: none; }
3
2
  p.question { font-weight: bold; }
4
3
  var { font-style: normal; }
@@ -3918,6 +3917,442 @@ body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown
3918
3917
  opacity: 1 !important;
3919
3918
  transition: opacity 200ms ease-out !important;
3920
3919
  }
3920
+ /*
3921
+ * MathQuill v0.10.1 http://mathquill.com
3922
+ * by Han, Jeanine, and Mary maintainers@mathquill.com
3923
+ *
3924
+ * This Source Code Form is subject to the terms of the
3925
+ * Mozilla Public License, v. 2.0. If a copy of the MPL
3926
+ * was not distributed with this file, You can obtain
3927
+ * one at http://mozilla.org/MPL/2.0/.
3928
+ */
3929
+ @font-face {
3930
+ font-family: Symbola;
3931
+ src: url(/fonts/Symbola.eot);
3932
+ src: local("Symbola Regular"), local("Symbola"), url(/fonts/Symbola.woff2) format("woff2"), url(/fonts/Symbola.woff) format("woff"), url(/fonts/Symbola.ttf) format("truetype"), url(/fonts/Symbola.otf) format("opentype"), url(/fonts/Symbola.svg#Symbola) format("svg");
3933
+ }
3934
+ .mq-editable-field {
3935
+ display: -moz-inline-box;
3936
+ display: inline-block;
3937
+ }
3938
+ .mq-editable-field .mq-cursor {
3939
+ border-left: 1px solid black;
3940
+ margin-left: -1px;
3941
+ position: relative;
3942
+ z-index: 1;
3943
+ padding: 0;
3944
+ display: -moz-inline-box;
3945
+ display: inline-block;
3946
+ }
3947
+ .mq-editable-field .mq-cursor.mq-blink {
3948
+ visibility: hidden;
3949
+ }
3950
+ .mq-editable-field,
3951
+ .mq-math-mode .mq-editable-field {
3952
+ border: 1px solid gray;
3953
+ }
3954
+ .mq-editable-field.mq-focused,
3955
+ .mq-math-mode .mq-editable-field.mq-focused {
3956
+ -webkit-box-shadow: #8bd 0 0 1px 2px, inset #6ae 0 0 2px 0;
3957
+ -moz-box-shadow: #8bd 0 0 1px 2px, inset #6ae 0 0 2px 0;
3958
+ box-shadow: #8bd 0 0 1px 2px, inset #6ae 0 0 2px 0;
3959
+ border-color: #709AC0;
3960
+ border-radius: 1px;
3961
+ }
3962
+ .mq-math-mode .mq-editable-field {
3963
+ margin: 1px;
3964
+ }
3965
+ .mq-editable-field .mq-latex-command-input {
3966
+ color: inherit;
3967
+ font-family: "Courier New", monospace;
3968
+ border: 1px solid gray;
3969
+ padding-right: 1px;
3970
+ margin-right: 1px;
3971
+ margin-left: 2px;
3972
+ }
3973
+ .mq-editable-field .mq-latex-command-input.mq-empty {
3974
+ background: transparent;
3975
+ }
3976
+ .mq-editable-field .mq-latex-command-input.mq-hasCursor {
3977
+ border-color: ActiveBorder;
3978
+ }
3979
+ .mq-editable-field.mq-empty:after,
3980
+ .mq-editable-field.mq-text-mode:after,
3981
+ .mq-math-mode .mq-empty:after {
3982
+ visibility: hidden;
3983
+ content: 'c';
3984
+ }
3985
+ .mq-editable-field .mq-cursor:only-child:after,
3986
+ .mq-editable-field .mq-textarea + .mq-cursor:last-child:after {
3987
+ visibility: hidden;
3988
+ content: 'c';
3989
+ }
3990
+ .mq-editable-field .mq-text-mode .mq-cursor:only-child:after {
3991
+ content: '';
3992
+ }
3993
+ .mq-editable-field.mq-text-mode {
3994
+ overflow-x: auto;
3995
+ overflow-y: hidden;
3996
+ }
3997
+ .mq-root-block,
3998
+ .mq-math-mode .mq-root-block {
3999
+ display: -moz-inline-box;
4000
+ display: inline-block;
4001
+ width: 100%;
4002
+ padding: 2px;
4003
+ -webkit-box-sizing: border-box;
4004
+ -moz-box-sizing: border-box;
4005
+ box-sizing: border-box;
4006
+ white-space: nowrap;
4007
+ overflow: hidden;
4008
+ vertical-align: middle;
4009
+ }
4010
+ .mq-math-mode {
4011
+ font-variant: normal;
4012
+ font-weight: normal;
4013
+ font-style: normal;
4014
+ font-size: 115%;
4015
+ line-height: 1;
4016
+ display: -moz-inline-box;
4017
+ display: inline-block;
4018
+ }
4019
+ .mq-math-mode .mq-non-leaf,
4020
+ .mq-math-mode .mq-scaled {
4021
+ display: -moz-inline-box;
4022
+ display: inline-block;
4023
+ }
4024
+ .mq-math-mode var,
4025
+ .mq-math-mode .mq-text-mode,
4026
+ .mq-math-mode .mq-nonSymbola {
4027
+ font-family: "Times New Roman", Symbola, serif;
4028
+ line-height: .9;
4029
+ }
4030
+ .mq-math-mode * {
4031
+ font-size: inherit;
4032
+ line-height: inherit;
4033
+ margin: 0;
4034
+ padding: 0;
4035
+ border-color: black;
4036
+ -webkit-user-select: none;
4037
+ -moz-user-select: none;
4038
+ user-select: none;
4039
+ box-sizing: border-box;
4040
+ }
4041
+ .mq-math-mode .mq-empty {
4042
+ background: #ccc;
4043
+ }
4044
+ .mq-math-mode .mq-empty.mq-root-block {
4045
+ background: transparent;
4046
+ }
4047
+ .mq-math-mode.mq-empty {
4048
+ background: transparent;
4049
+ }
4050
+ .mq-math-mode .mq-text-mode {
4051
+ display: inline-block;
4052
+ }
4053
+ .mq-math-mode .mq-text-mode.mq-hasCursor {
4054
+ box-shadow: inset darkgray 0 .1em .2em;
4055
+ padding: 0 .1em;
4056
+ margin: 0 -0.1em;
4057
+ min-width: 1ex;
4058
+ }
4059
+ .mq-math-mode .mq-font {
4060
+ font: 1em "Times New Roman", Symbola, serif;
4061
+ }
4062
+ .mq-math-mode .mq-font * {
4063
+ font-family: inherit;
4064
+ font-style: inherit;
4065
+ }
4066
+ .mq-math-mode b,
4067
+ .mq-math-mode b.mq-font {
4068
+ font-weight: bolder;
4069
+ }
4070
+ .mq-math-mode var,
4071
+ .mq-math-mode i,
4072
+ .mq-math-mode i.mq-font {
4073
+ font-style: italic;
4074
+ }
4075
+ .mq-math-mode var.mq-f {
4076
+ margin-right: 0.2em;
4077
+ margin-left: 0.1em;
4078
+ }
4079
+ .mq-math-mode .mq-roman var.mq-f {
4080
+ margin: 0;
4081
+ }
4082
+ .mq-math-mode big {
4083
+ font-size: 200%;
4084
+ }
4085
+ .mq-math-mode .mq-roman {
4086
+ font-style: normal;
4087
+ }
4088
+ .mq-math-mode .mq-sans-serif {
4089
+ font-family: sans-serif, Symbola, serif;
4090
+ }
4091
+ .mq-math-mode .mq-monospace {
4092
+ font-family: monospace, Symbola, serif;
4093
+ }
4094
+ .mq-math-mode .mq-overline {
4095
+ border-top: 1px solid black;
4096
+ margin-top: 1px;
4097
+ }
4098
+ .mq-math-mode .mq-underline {
4099
+ border-bottom: 1px solid black;
4100
+ margin-bottom: 1px;
4101
+ }
4102
+ .mq-math-mode .mq-binary-operator {
4103
+ padding: 0 0.2em;
4104
+ display: -moz-inline-box;
4105
+ display: inline-block;
4106
+ }
4107
+ .mq-math-mode .mq-supsub {
4108
+ text-align: left;
4109
+ font-size: 90%;
4110
+ vertical-align: -0.5em;
4111
+ }
4112
+ .mq-math-mode .mq-supsub.mq-limit {
4113
+ font-size: 80%;
4114
+ vertical-align: -0.4em;
4115
+ }
4116
+ .mq-math-mode .mq-supsub.mq-sup-only {
4117
+ vertical-align: .5em;
4118
+ }
4119
+ .mq-math-mode .mq-supsub.mq-sup-only .mq-sup {
4120
+ display: inline-block;
4121
+ vertical-align: text-bottom;
4122
+ }
4123
+ .mq-math-mode .mq-supsub .mq-sup {
4124
+ display: block;
4125
+ }
4126
+ .mq-math-mode .mq-supsub .mq-sub {
4127
+ display: block;
4128
+ float: left;
4129
+ }
4130
+ .mq-math-mode .mq-supsub.mq-limit .mq-sub {
4131
+ margin-left: -0.25em;
4132
+ }
4133
+ .mq-math-mode .mq-supsub .mq-binary-operator {
4134
+ padding: 0 .1em;
4135
+ }
4136
+ .mq-math-mode .mq-supsub .mq-fraction {
4137
+ font-size: 70%;
4138
+ }
4139
+ .mq-math-mode sup.mq-nthroot {
4140
+ font-size: 80%;
4141
+ vertical-align: 0.8em;
4142
+ margin-right: -0.6em;
4143
+ margin-left: .2em;
4144
+ min-width: .5em;
4145
+ }
4146
+ .mq-math-mode .mq-paren {
4147
+ padding: 0 .1em;
4148
+ vertical-align: top;
4149
+ -webkit-transform-origin: center .06em;
4150
+ -moz-transform-origin: center .06em;
4151
+ -ms-transform-origin: center .06em;
4152
+ -o-transform-origin: center .06em;
4153
+ transform-origin: center .06em;
4154
+ }
4155
+ .mq-math-mode .mq-paren.mq-ghost {
4156
+ color: silver;
4157
+ }
4158
+ .mq-math-mode .mq-paren + span {
4159
+ margin-top: .1em;
4160
+ margin-bottom: .1em;
4161
+ }
4162
+ .mq-math-mode .mq-array {
4163
+ vertical-align: middle;
4164
+ text-align: center;
4165
+ }
4166
+ .mq-math-mode .mq-array > span {
4167
+ display: block;
4168
+ }
4169
+ .mq-math-mode .mq-operator-name {
4170
+ font-family: Symbola, "Times New Roman", serif;
4171
+ line-height: .9;
4172
+ font-style: normal;
4173
+ }
4174
+ .mq-math-mode var.mq-operator-name.mq-first {
4175
+ padding-left: .2em;
4176
+ }
4177
+ .mq-math-mode var.mq-operator-name.mq-last,
4178
+ .mq-math-mode .mq-supsub.mq-after-operator-name {
4179
+ padding-right: .2em;
4180
+ }
4181
+ .mq-math-mode .mq-fraction {
4182
+ font-size: 90%;
4183
+ text-align: center;
4184
+ vertical-align: -0.4em;
4185
+ padding: 0 .2em;
4186
+ }
4187
+ .mq-math-mode .mq-fraction,
4188
+ .mq-math-mode .mq-large-operator,
4189
+ .mq-math-mode x:-moz-any-link {
4190
+ display: -moz-groupbox;
4191
+ }
4192
+ .mq-math-mode .mq-fraction,
4193
+ .mq-math-mode .mq-large-operator,
4194
+ .mq-math-mode x:-moz-any-link,
4195
+ .mq-math-mode x:default {
4196
+ display: inline-block;
4197
+ }
4198
+ .mq-math-mode .mq-numerator,
4199
+ .mq-math-mode .mq-denominator {
4200
+ display: block;
4201
+ }
4202
+ .mq-math-mode .mq-numerator {
4203
+ padding: 0 0.1em;
4204
+ }
4205
+ .mq-math-mode .mq-denominator {
4206
+ border-top: 1px solid;
4207
+ float: right;
4208
+ width: 100%;
4209
+ padding: 0.1em;
4210
+ }
4211
+ .mq-math-mode .mq-sqrt-prefix {
4212
+ padding-top: 0;
4213
+ position: relative;
4214
+ top: 0.1em;
4215
+ vertical-align: top;
4216
+ -webkit-transform-origin: top;
4217
+ -moz-transform-origin: top;
4218
+ -ms-transform-origin: top;
4219
+ -o-transform-origin: top;
4220
+ transform-origin: top;
4221
+ }
4222
+ .mq-math-mode .mq-sqrt-stem {
4223
+ border-top: 1px solid;
4224
+ margin-top: 1px;
4225
+ padding-left: .15em;
4226
+ padding-right: .2em;
4227
+ margin-right: .1em;
4228
+ padding-top: 1px;
4229
+ }
4230
+ .mq-math-mode .mq-vector-prefix {
4231
+ display: block;
4232
+ text-align: center;
4233
+ line-height: .25em;
4234
+ margin-bottom: -0.1em;
4235
+ font-size: 0.75em;
4236
+ }
4237
+ .mq-math-mode .mq-vector-stem {
4238
+ display: block;
4239
+ }
4240
+ .mq-math-mode .mq-large-operator {
4241
+ vertical-align: -0.2em;
4242
+ padding: .2em;
4243
+ text-align: center;
4244
+ }
4245
+ .mq-math-mode .mq-large-operator .mq-from,
4246
+ .mq-math-mode .mq-large-operator big,
4247
+ .mq-math-mode .mq-large-operator .mq-to {
4248
+ display: block;
4249
+ }
4250
+ .mq-math-mode .mq-large-operator .mq-from,
4251
+ .mq-math-mode .mq-large-operator .mq-to {
4252
+ font-size: 80%;
4253
+ }
4254
+ .mq-math-mode .mq-large-operator .mq-from {
4255
+ float: right;
4256
+ /* take out of normal flow to manipulate baseline */
4257
+ width: 100%;
4258
+ }
4259
+ .mq-math-mode,
4260
+ .mq-math-mode .mq-editable-field {
4261
+ cursor: text;
4262
+ font-family: Symbola, "Times New Roman", serif;
4263
+ }
4264
+ .mq-math-mode .mq-overarrow {
4265
+ border-top: 1px solid black;
4266
+ margin-top: 1px;
4267
+ padding-top: 0.2em;
4268
+ }
4269
+ .mq-math-mode .mq-overarrow:before {
4270
+ display: block;
4271
+ position: relative;
4272
+ top: -0.34em;
4273
+ font-size: 0.5em;
4274
+ line-height: 0em;
4275
+ content: '\27A4';
4276
+ text-align: right;
4277
+ }
4278
+ .mq-math-mode .mq-overarrow.mq-arrow-left:before {
4279
+ -moz-transform: scaleX(-1);
4280
+ -o-transform: scaleX(-1);
4281
+ -webkit-transform: scaleX(-1);
4282
+ transform: scaleX(-1);
4283
+ filter: FlipH;
4284
+ -ms-filter: "FlipH";
4285
+ }
4286
+ .mq-math-mode .mq-selection,
4287
+ .mq-editable-field .mq-selection,
4288
+ .mq-math-mode .mq-selection .mq-non-leaf,
4289
+ .mq-editable-field .mq-selection .mq-non-leaf,
4290
+ .mq-math-mode .mq-selection .mq-scaled,
4291
+ .mq-editable-field .mq-selection .mq-scaled {
4292
+ background: #B4D5FE !important;
4293
+ background: Highlight !important;
4294
+ color: HighlightText;
4295
+ border-color: HighlightText;
4296
+ }
4297
+ .mq-math-mode .mq-selection .mq-matrixed,
4298
+ .mq-editable-field .mq-selection .mq-matrixed {
4299
+ background: #39F !important;
4300
+ }
4301
+ .mq-math-mode .mq-selection .mq-matrixed-container,
4302
+ .mq-editable-field .mq-selection .mq-matrixed-container {
4303
+ filter: progid:DXImageTransform.Microsoft.Chroma(color='#3399FF') !important;
4304
+ }
4305
+ .mq-math-mode .mq-selection.mq-blur,
4306
+ .mq-editable-field .mq-selection.mq-blur,
4307
+ .mq-math-mode .mq-selection.mq-blur .mq-non-leaf,
4308
+ .mq-editable-field .mq-selection.mq-blur .mq-non-leaf,
4309
+ .mq-math-mode .mq-selection.mq-blur .mq-scaled,
4310
+ .mq-editable-field .mq-selection.mq-blur .mq-scaled,
4311
+ .mq-math-mode .mq-selection.mq-blur .mq-matrixed,
4312
+ .mq-editable-field .mq-selection.mq-blur .mq-matrixed {
4313
+ background: #D4D4D4 !important;
4314
+ color: black;
4315
+ border-color: black;
4316
+ }
4317
+ .mq-math-mode .mq-selection.mq-blur .mq-matrixed-container,
4318
+ .mq-editable-field .mq-selection.mq-blur .mq-matrixed-container {
4319
+ filter: progid:DXImageTransform.Microsoft.Chroma(color='#D4D4D4') !important;
4320
+ }
4321
+ .mq-editable-field .mq-textarea,
4322
+ .mq-math-mode .mq-textarea {
4323
+ position: relative;
4324
+ -webkit-user-select: text;
4325
+ -moz-user-select: text;
4326
+ user-select: text;
4327
+ }
4328
+ .mq-editable-field .mq-textarea *,
4329
+ .mq-math-mode .mq-textarea *,
4330
+ .mq-editable-field .mq-selectable,
4331
+ .mq-math-mode .mq-selectable {
4332
+ -webkit-user-select: text;
4333
+ -moz-user-select: text;
4334
+ user-select: text;
4335
+ position: absolute;
4336
+ clip: rect(1em 1em 1em 1em);
4337
+ -webkit-transform: scale(0);
4338
+ -moz-transform: scale(0);
4339
+ -ms-transform: scale(0);
4340
+ -o-transform: scale(0);
4341
+ transform: scale(0);
4342
+ resize: none;
4343
+ width: 1px;
4344
+ height: 1px;
4345
+ }
4346
+ .mq-math-mode .mq-matrixed {
4347
+ background: white;
4348
+ display: -moz-inline-box;
4349
+ display: inline-block;
4350
+ }
4351
+ .mq-math-mode .mq-matrixed-container {
4352
+ filter: progid:DXImageTransform.Microsoft.Chroma(color='white');
4353
+ margin-top: -0.1em;
4354
+ }
4355
+
3921
4356
  .tabbar_item {
3922
4357
  background-color: red;
3923
4358
  }