@khanacademy/perseus 1.4.0 → 2.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 +22 -0
- package/dist/es/index.css +9 -245
- package/dist/es/index.js +138 -584
- package/dist/es/index.js.map +1 -1
- package/dist/index.css +9 -245
- package/dist/index.js +135 -581
- package/dist/index.js.map +1 -1
- package/package.json +36 -36
- package/src/__stories__/hints-renderer.stories.jsx +9 -1
- package/src/__testdata__/graphie_testdata.js +53 -0
- package/src/__tests__/__snapshots__/perseus-markdown_test.jsx.snap +0 -9
- package/src/__tests__/__snapshots__/renderer_test.jsx.snap +0 -9
- package/src/components/__stories__/graphie.stories.jsx +5 -1
- package/src/hint-renderer.jsx +11 -14
- package/src/perseus-api.jsx +0 -23
- package/src/perseus-markdown.jsx +0 -25
- package/src/styles/constants.js +0 -21
- package/src/styles/global-constants.js +0 -6
- package/src/styles/khan-exercise.css +9 -1
- package/src/styles/perseus-renderer.less +0 -259
- package/src/styles/variables.less +0 -11
- package/src/styles/variables.shared.less +0 -10
- package/src/types.js +0 -16
- package/src/widgets/__stories__/input-number.stories.jsx +0 -14
- package/src/widgets/__stories__/radio.stories.jsx +0 -3
- package/src/widgets/__tests__/__snapshots__/definition_test.js.snap +18 -28
- package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap +0 -9
- package/src/widgets/__tests__/__snapshots__/image_test.jsx.snap +0 -18
- package/src/widgets/__tests__/__snapshots__/numeric-input_test.jsx.snap +2 -440
- package/src/widgets/__tests__/__snapshots__/radio_test.jsx.snap +66 -3726
- package/src/widgets/__tests__/numeric-input_test.jsx +54 -118
- package/src/widgets/__tests__/radio/choice-icon_test.jsx +25 -75
- package/src/widgets/__tests__/radio_test.jsx +362 -394
- package/src/widgets/definition.jsx +27 -14
- package/src/widgets/input-number.jsx +2 -60
- package/src/widgets/numeric-input.jsx +17 -89
- package/src/widgets/radio/__stories__/base-radio.stories.jsx +1 -3
- package/src/widgets/radio/__stories__/choice-icon.stories.jsx +23 -105
- package/src/widgets/radio/__stories__/option-status.stories.jsx +0 -8
- package/src/widgets/radio/base-radio.jsx +13 -96
- package/src/widgets/radio/choice-icon/choice-icon.jsx +177 -50
- package/src/widgets/radio/choice-icon/cross-out-line.jsx +9 -13
- package/src/widgets/radio/choice-icon/shared-styles.js +2 -3
- package/src/widgets/radio/choice.jsx +5 -59
- package/src/widgets/radio/option-status.jsx +2 -14
- package/src/components/__stories__/possible-answers.stories.jsx +0 -22
- package/src/components/possible-answers.jsx +0 -36
- package/src/styles/widgets/definition.less +0 -86
- package/src/widgets/radio/__stories__/sat-styles.stories.jsx +0 -191
- package/src/widgets/radio/choice-icon/library-choice-icon.jsx +0 -225
- package/src/widgets/radio/choice-icon/sat-choice-icon.jsx +0 -120
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,27 @@
|
|
|
1
1
|
# @khanacademy/perseus
|
|
2
2
|
|
|
3
|
+
## 2.0.0
|
|
4
|
+
|
|
5
|
+
### Major Changes
|
|
6
|
+
|
|
7
|
+
- b850ebee: Remove `satStyling` from `APIOptions`
|
|
8
|
+
- b850ebee: Remove `styling` from `APIOptions`
|
|
9
|
+
|
|
10
|
+
### Patch Changes
|
|
11
|
+
|
|
12
|
+
- 55841525: Fix graphie font-size to a specific size
|
|
13
|
+
- a325f740: Switch Definition's prompt from Button to Clickable to resolve text not matching
|
|
14
|
+
|
|
15
|
+
## 1.4.1
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- a1b4ab3c: Update wonder-blocks and wonder-stuff deps to fix an issue with wonder-stuff's generated flow types
|
|
20
|
+
- Updated dependencies [a1b4ab3c]
|
|
21
|
+
- @khanacademy/math-input@0.6.7
|
|
22
|
+
- @khanacademy/perseus-linter@0.2.5
|
|
23
|
+
- @khanacademy/pure-markdown@0.1.5
|
|
24
|
+
|
|
3
25
|
## 1.4.0
|
|
4
26
|
|
|
5
27
|
### Minor Changes
|
package/dist/es/index.css
CHANGED
|
@@ -372,7 +372,15 @@ body.debug .graphie { outline: 1px dashed #fdd; }
|
|
|
372
372
|
#issue fieldset label { display: inline; }
|
|
373
373
|
#issue fieldset li { margin-top: 0px; margin-bottom: 0px; }
|
|
374
374
|
|
|
375
|
-
var, div.graphie {
|
|
375
|
+
var, div.graphie {
|
|
376
|
+
white-space: pre;
|
|
377
|
+
/**
|
|
378
|
+
* Graphie didn't have a fixed font-size and was just using
|
|
379
|
+
* the surrounding font-size. However some labels are banking on
|
|
380
|
+
* specific dimensions, so we need to lock it to a specific size.
|
|
381
|
+
*/
|
|
382
|
+
font-size: 14px;
|
|
383
|
+
}
|
|
376
384
|
|
|
377
385
|
#spinner { position: relative; top: 4px; left: 4px; }
|
|
378
386
|
#issue-spinner { position: relative; top: 3px; }
|
|
@@ -2552,54 +2560,6 @@ body.mobile .categorizer-container td.category input[type="radio"] + span:active
|
|
|
2552
2560
|
color: #666;
|
|
2553
2561
|
content: "\f111";
|
|
2554
2562
|
}
|
|
2555
|
-
.framework-perseus:not(.perseus-article):not(.perseus-mobile) .perseus-widget-definition {
|
|
2556
|
-
font-size: 14px;
|
|
2557
|
-
line-height: 19.6px;
|
|
2558
|
-
}
|
|
2559
|
-
@media (max-width: 767px) {
|
|
2560
|
-
.framework-perseus:not(.perseus-article).perseus-mobile .perseus-widget-definition {
|
|
2561
|
-
font-size: 18px;
|
|
2562
|
-
line-height: 1.4;
|
|
2563
|
-
}
|
|
2564
|
-
}
|
|
2565
|
-
@media (min-width: 768px) and (max-width: 1199px) {
|
|
2566
|
-
.framework-perseus:not(.perseus-article).perseus-mobile .perseus-widget-definition {
|
|
2567
|
-
font-size: 20px;
|
|
2568
|
-
line-height: 1.5;
|
|
2569
|
-
}
|
|
2570
|
-
}
|
|
2571
|
-
@media (min-width: 1200px) {
|
|
2572
|
-
.framework-perseus:not(.perseus-article).perseus-mobile .perseus-widget-definition {
|
|
2573
|
-
font-size: 22px;
|
|
2574
|
-
line-height: 1.4;
|
|
2575
|
-
}
|
|
2576
|
-
}
|
|
2577
|
-
.bibliotron-article.framework-perseus.perseus-article .perseus-widget-definition {
|
|
2578
|
-
font-size: 18px;
|
|
2579
|
-
line-height: 1.4;
|
|
2580
|
-
}
|
|
2581
|
-
.bibliotron-article.framework-perseus.perseus-article:not(.perseus-mobile) .perseus-widget-definition {
|
|
2582
|
-
font-size: 20px;
|
|
2583
|
-
line-height: 30px;
|
|
2584
|
-
}
|
|
2585
|
-
@media (max-width: 767px) {
|
|
2586
|
-
.bibliotron-article.framework-perseus.perseus-article.perseus-mobile .perseus-widget-definition {
|
|
2587
|
-
font-size: 18px;
|
|
2588
|
-
line-height: 1.4;
|
|
2589
|
-
}
|
|
2590
|
-
}
|
|
2591
|
-
@media (min-width: 768px) and (max-width: 1199px) {
|
|
2592
|
-
.bibliotron-article.framework-perseus.perseus-article.perseus-mobile .perseus-widget-definition {
|
|
2593
|
-
font-size: 20px;
|
|
2594
|
-
line-height: 1.5;
|
|
2595
|
-
}
|
|
2596
|
-
}
|
|
2597
|
-
@media (min-width: 1200px) {
|
|
2598
|
-
.bibliotron-article.framework-perseus.perseus-article.perseus-mobile .perseus-widget-definition {
|
|
2599
|
-
font-size: 22px;
|
|
2600
|
-
line-height: 1.4;
|
|
2601
|
-
}
|
|
2602
|
-
}
|
|
2603
2563
|
.perseus-widget-dropdown {
|
|
2604
2564
|
position: relative;
|
|
2605
2565
|
}
|
|
@@ -3566,202 +3526,6 @@ body.mobile .framework-perseus table.perseus-widget-table-of-values.non-markdown
|
|
|
3566
3526
|
.renderer-widget-error {
|
|
3567
3527
|
background-color: #fcc;
|
|
3568
3528
|
}
|
|
3569
|
-
#sat-mission .content-area > div {
|
|
3570
|
-
margin-left: auto;
|
|
3571
|
-
margin-right: auto;
|
|
3572
|
-
width: 592px;
|
|
3573
|
-
}
|
|
3574
|
-
#sat-mission .content-area > div .perseus-input-with-label {
|
|
3575
|
-
display: flex;
|
|
3576
|
-
align-items: center;
|
|
3577
|
-
}
|
|
3578
|
-
#sat-mission .content-area > div .perseus-input-with-label .perseus-input-label {
|
|
3579
|
-
font-weight: 600;
|
|
3580
|
-
padding-right: 10px;
|
|
3581
|
-
}
|
|
3582
|
-
#sat-mission .content-area > div .perseus-input-with-answer-blurb > span,
|
|
3583
|
-
#sat-mission .content-area > div .perseus-input-with-answer-blurb > label {
|
|
3584
|
-
display: inline-block;
|
|
3585
|
-
}
|
|
3586
|
-
#sat-mission .content-area > div .perseus-input-with-answer-blurb .perseus-possible-answers {
|
|
3587
|
-
color: #009900;
|
|
3588
|
-
display: inline-block;
|
|
3589
|
-
padding-right: 4px;
|
|
3590
|
-
}
|
|
3591
|
-
#sat-mission .content-area > div .perseus-input-with-answer-blurb .perseus-possible-answers dt,
|
|
3592
|
-
#sat-mission .content-area > div .perseus-input-with-answer-blurb .perseus-possible-answers dd {
|
|
3593
|
-
display: inline-block;
|
|
3594
|
-
}
|
|
3595
|
-
#sat-mission .content-area > div .perseus-input-with-answer-blurb .perseus-possible-answers dt {
|
|
3596
|
-
padding: 0 5px 0 13px;
|
|
3597
|
-
color: #121212;
|
|
3598
|
-
text-transform: uppercase;
|
|
3599
|
-
}
|
|
3600
|
-
#sat-mission .content-area > div .perseus-input-with-answer-blurb .perseus-possible-answers dt::after {
|
|
3601
|
-
content: ":";
|
|
3602
|
-
}
|
|
3603
|
-
#sat-mission .content-area > div .perseus-input-with-answer-blurb .perseus-possible-answers dd:not(:last-child)::after {
|
|
3604
|
-
content: "or";
|
|
3605
|
-
padding: 0 5px;
|
|
3606
|
-
color: #121212;
|
|
3607
|
-
}
|
|
3608
|
-
#sat-mission .content-area > div input.perseus-incorrect {
|
|
3609
|
-
color: #990000;
|
|
3610
|
-
background-color: #f2ebeb;
|
|
3611
|
-
border: solid 1px #cc5252;
|
|
3612
|
-
}
|
|
3613
|
-
#sat-mission .content-area > div input.perseus-correct {
|
|
3614
|
-
color: #009900;
|
|
3615
|
-
background-color: #e4f7e4;
|
|
3616
|
-
border: solid 1px #00cc00;
|
|
3617
|
-
}
|
|
3618
|
-
#sat-mission .content-area > div input.perseus-unanswered {
|
|
3619
|
-
background-color: #eee;
|
|
3620
|
-
border: solid 1px #999;
|
|
3621
|
-
}
|
|
3622
|
-
#sat-mission .content-area > div.perseus-renderer-two-columns {
|
|
3623
|
-
width: 1024px;
|
|
3624
|
-
}
|
|
3625
|
-
#sat-mission .content-area > div.perseus-renderer-two-columns > .paragraph {
|
|
3626
|
-
margin: 0;
|
|
3627
|
-
}
|
|
3628
|
-
#sat-mission .content-area > div.perseus-renderer-two-columns .perseus-two-columns {
|
|
3629
|
-
display: flex;
|
|
3630
|
-
justify-content: center;
|
|
3631
|
-
}
|
|
3632
|
-
#sat-mission .content-area > div.perseus-renderer-two-columns .perseus-column {
|
|
3633
|
-
display: -webkit-flex;
|
|
3634
|
-
-webkit-flex-direction: column;
|
|
3635
|
-
display: flex;
|
|
3636
|
-
flex-direction: column;
|
|
3637
|
-
width: 512px;
|
|
3638
|
-
}
|
|
3639
|
-
#sat-mission .content-area > div.perseus-renderer-two-columns .perseus-column:nth-child(1) {
|
|
3640
|
-
background: #eee;
|
|
3641
|
-
border-right: 1px solid #ddd;
|
|
3642
|
-
box-sizing: border-box;
|
|
3643
|
-
}
|
|
3644
|
-
#sat-mission .content-area > div.perseus-renderer-two-columns .perseus-column:nth-child(1) .perseus-column-content {
|
|
3645
|
-
padding-top: 48px;
|
|
3646
|
-
padding-bottom: 22px;
|
|
3647
|
-
padding-left: 46px;
|
|
3648
|
-
padding-right: 32px;
|
|
3649
|
-
}
|
|
3650
|
-
#sat-mission .content-area > div.perseus-renderer-two-columns .perseus-column:nth-child(1) .perseus-widget-passage-container {
|
|
3651
|
-
position: relative;
|
|
3652
|
-
}
|
|
3653
|
-
#sat-mission .content-area > div.perseus-renderer-two-columns .perseus-column:nth-child(1) .perseus-widget-passage-container .perseus-widget-passage-instructions div.paragraph {
|
|
3654
|
-
margin-top: 0;
|
|
3655
|
-
}
|
|
3656
|
-
#sat-mission .content-area > div.perseus-renderer-two-columns .perseus-column:nth-child(1) .perseus-widget-passage {
|
|
3657
|
-
margin: 0;
|
|
3658
|
-
}
|
|
3659
|
-
#sat-mission .content-area > div.perseus-renderer-two-columns .perseus-column:nth-child(1) > .paragraph {
|
|
3660
|
-
margin-right: 40px;
|
|
3661
|
-
}
|
|
3662
|
-
#sat-mission .content-area > div.perseus-renderer-two-columns .perseus-column:nth-child(1) blockquote {
|
|
3663
|
-
padding: 0;
|
|
3664
|
-
margin-right: 22px;
|
|
3665
|
-
}
|
|
3666
|
-
#sat-mission .content-area > div.perseus-renderer-two-columns .perseus-column:nth-child(1) blockquote > .paragraph:nth-child(1) {
|
|
3667
|
-
margin-top: 0;
|
|
3668
|
-
}
|
|
3669
|
-
#sat-mission .content-area > div.perseus-renderer-two-columns .perseus-column:nth-child(2) .perseus-column-content {
|
|
3670
|
-
padding-left: 32px;
|
|
3671
|
-
padding-right: 32px;
|
|
3672
|
-
}
|
|
3673
|
-
#sat-mission .content-area > div.perseus-renderer-two-columns .perseus-column:nth-child(2) .perseus-group {
|
|
3674
|
-
margin-bottom: 20px;
|
|
3675
|
-
}
|
|
3676
|
-
#sat-mission .content-area > div.perseus-renderer-two-columns .perseus-column-content {
|
|
3677
|
-
flex: 1 1 auto;
|
|
3678
|
-
overflow-y: auto;
|
|
3679
|
-
}
|
|
3680
|
-
#sat-mission .content-area > div.perseus-renderer-two-columns .perseus-column-content > .paragraph {
|
|
3681
|
-
margin-top: 0;
|
|
3682
|
-
}
|
|
3683
|
-
#sat-mission input[type=text],
|
|
3684
|
-
#sat-mission input[type=number] {
|
|
3685
|
-
border: 1px solid #aaa;
|
|
3686
|
-
font-family: "Proxima Nova Semibold", sans-serif;
|
|
3687
|
-
font-size: 14px;
|
|
3688
|
-
margin: 10px 0;
|
|
3689
|
-
padding: 5px;
|
|
3690
|
-
}
|
|
3691
|
-
#sat-mission input[type=text]:focus,
|
|
3692
|
-
#sat-mission input[type=number]:focus {
|
|
3693
|
-
border-color: #0084ce;
|
|
3694
|
-
box-shadow: 0 0 10px rgba(0, 132, 206, 0.8);
|
|
3695
|
-
outline: none;
|
|
3696
|
-
}
|
|
3697
|
-
#sat-mission .valid-answer input[type=text]:valid,
|
|
3698
|
-
#sat-mission .valid-answer input[type=number]:valid {
|
|
3699
|
-
border: 1px solid #0084ce;
|
|
3700
|
-
background: #e4f3f9;
|
|
3701
|
-
color: initial;
|
|
3702
|
-
}
|
|
3703
|
-
#sat-mission .valid-answer input[type=text]:valid:focus,
|
|
3704
|
-
#sat-mission .valid-answer input[type=number]:valid:focus {
|
|
3705
|
-
box-shadow: 0 0 10px rgba(0, 132, 206, 0.8);
|
|
3706
|
-
}
|
|
3707
|
-
#sat-mission .valid-answer .perseus-group-valid-answer input[type=text]:valid,
|
|
3708
|
-
#sat-mission .valid-answer .perseus-group-valid-answer input[type=number]:valid {
|
|
3709
|
-
border: 1px solid #0084ce;
|
|
3710
|
-
background: #e4f3f9;
|
|
3711
|
-
color: initial;
|
|
3712
|
-
}
|
|
3713
|
-
#sat-mission .valid-answer .perseus-group-valid-answer input[type=text]:valid:focus,
|
|
3714
|
-
#sat-mission .valid-answer .perseus-group-valid-answer input[type=number]:valid:focus {
|
|
3715
|
-
box-shadow: 0 0 10px rgba(0, 132, 206, 0.8);
|
|
3716
|
-
}
|
|
3717
|
-
#sat-mission .valid-answer .perseus-group-invalid-answer input[type=text]:valid,
|
|
3718
|
-
#sat-mission .valid-answer .perseus-group-invalid-answer input[type=number]:valid {
|
|
3719
|
-
color: #990000;
|
|
3720
|
-
background-color: #f2ebeb;
|
|
3721
|
-
border: solid 1px #cc5252;
|
|
3722
|
-
}
|
|
3723
|
-
#sat-mission .valid-answer .perseus-group-invalid-answer input[type=text]:valid:focus,
|
|
3724
|
-
#sat-mission .valid-answer .perseus-group-invalid-answer input[type=number]:valid:focus {
|
|
3725
|
-
box-shadow: 0 0 10px rgba(204, 82, 82, 0.8);
|
|
3726
|
-
}
|
|
3727
|
-
#sat-mission .invalid-answer input[type=text]:valid,
|
|
3728
|
-
#sat-mission .invalid-answer input[type=number]:valid {
|
|
3729
|
-
color: #990000;
|
|
3730
|
-
background-color: #f2ebeb;
|
|
3731
|
-
border: solid 1px #cc5252;
|
|
3732
|
-
}
|
|
3733
|
-
#sat-mission .invalid-answer input[type=text]:valid:focus,
|
|
3734
|
-
#sat-mission .invalid-answer input[type=number]:valid:focus {
|
|
3735
|
-
box-shadow: 0 0 10px rgba(204, 82, 82, 0.8);
|
|
3736
|
-
}
|
|
3737
|
-
#sat-mission .invalid-answer .perseus-group-valid-answer input[type=text]:valid,
|
|
3738
|
-
#sat-mission .invalid-answer .perseus-group-valid-answer input[type=number]:valid {
|
|
3739
|
-
border: 1px solid #0084ce;
|
|
3740
|
-
background: #e4f3f9;
|
|
3741
|
-
color: initial;
|
|
3742
|
-
}
|
|
3743
|
-
#sat-mission .invalid-answer .perseus-group-valid-answer input[type=text]:valid:focus,
|
|
3744
|
-
#sat-mission .invalid-answer .perseus-group-valid-answer input[type=number]:valid:focus {
|
|
3745
|
-
box-shadow: 0 0 10px rgba(0, 132, 206, 0.8);
|
|
3746
|
-
}
|
|
3747
|
-
#sat-mission .invalid-answer .perseus-group-invalid-answer input[type=text]:valid,
|
|
3748
|
-
#sat-mission .invalid-answer .perseus-group-invalid-answer input[type=number]:valid {
|
|
3749
|
-
color: #990000;
|
|
3750
|
-
background-color: #f2ebeb;
|
|
3751
|
-
border: solid 1px #cc5252;
|
|
3752
|
-
}
|
|
3753
|
-
#sat-mission .invalid-answer .perseus-group-invalid-answer input[type=text]:valid:focus,
|
|
3754
|
-
#sat-mission .invalid-answer .perseus-group-invalid-answer input[type=number]:valid:focus {
|
|
3755
|
-
box-shadow: 0 0 10px rgba(204, 82, 82, 0.8);
|
|
3756
|
-
}
|
|
3757
|
-
#sat-mission #sat-route-task .content-area > .perseus-renderer-two-columns,
|
|
3758
|
-
#sat-mission #sat-route-section .content-area > .perseus-renderer-two-columns {
|
|
3759
|
-
margin-top: 0;
|
|
3760
|
-
}
|
|
3761
|
-
#sat-mission #sat-route-task .content-area > .perseus-renderer-two-columns .perseus-column:nth-child(2) > .perseus-column-content > :first-child,
|
|
3762
|
-
#sat-mission #sat-route-section .content-area > .perseus-renderer-two-columns .perseus-column:nth-child(2) > .perseus-column-content > :first-child {
|
|
3763
|
-
margin-top: 48px;
|
|
3764
|
-
}
|
|
3765
3529
|
.perseus-error {
|
|
3766
3530
|
background: #cf5044;
|
|
3767
3531
|
border: 2px solid red;
|