@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.
Files changed (51) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/es/index.css +9 -245
  3. package/dist/es/index.js +138 -584
  4. package/dist/es/index.js.map +1 -1
  5. package/dist/index.css +9 -245
  6. package/dist/index.js +135 -581
  7. package/dist/index.js.map +1 -1
  8. package/package.json +36 -36
  9. package/src/__stories__/hints-renderer.stories.jsx +9 -1
  10. package/src/__testdata__/graphie_testdata.js +53 -0
  11. package/src/__tests__/__snapshots__/perseus-markdown_test.jsx.snap +0 -9
  12. package/src/__tests__/__snapshots__/renderer_test.jsx.snap +0 -9
  13. package/src/components/__stories__/graphie.stories.jsx +5 -1
  14. package/src/hint-renderer.jsx +11 -14
  15. package/src/perseus-api.jsx +0 -23
  16. package/src/perseus-markdown.jsx +0 -25
  17. package/src/styles/constants.js +0 -21
  18. package/src/styles/global-constants.js +0 -6
  19. package/src/styles/khan-exercise.css +9 -1
  20. package/src/styles/perseus-renderer.less +0 -259
  21. package/src/styles/variables.less +0 -11
  22. package/src/styles/variables.shared.less +0 -10
  23. package/src/types.js +0 -16
  24. package/src/widgets/__stories__/input-number.stories.jsx +0 -14
  25. package/src/widgets/__stories__/radio.stories.jsx +0 -3
  26. package/src/widgets/__tests__/__snapshots__/definition_test.js.snap +18 -28
  27. package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap +0 -9
  28. package/src/widgets/__tests__/__snapshots__/image_test.jsx.snap +0 -18
  29. package/src/widgets/__tests__/__snapshots__/numeric-input_test.jsx.snap +2 -440
  30. package/src/widgets/__tests__/__snapshots__/radio_test.jsx.snap +66 -3726
  31. package/src/widgets/__tests__/numeric-input_test.jsx +54 -118
  32. package/src/widgets/__tests__/radio/choice-icon_test.jsx +25 -75
  33. package/src/widgets/__tests__/radio_test.jsx +362 -394
  34. package/src/widgets/definition.jsx +27 -14
  35. package/src/widgets/input-number.jsx +2 -60
  36. package/src/widgets/numeric-input.jsx +17 -89
  37. package/src/widgets/radio/__stories__/base-radio.stories.jsx +1 -3
  38. package/src/widgets/radio/__stories__/choice-icon.stories.jsx +23 -105
  39. package/src/widgets/radio/__stories__/option-status.stories.jsx +0 -8
  40. package/src/widgets/radio/base-radio.jsx +13 -96
  41. package/src/widgets/radio/choice-icon/choice-icon.jsx +177 -50
  42. package/src/widgets/radio/choice-icon/cross-out-line.jsx +9 -13
  43. package/src/widgets/radio/choice-icon/shared-styles.js +2 -3
  44. package/src/widgets/radio/choice.jsx +5 -59
  45. package/src/widgets/radio/option-status.jsx +2 -14
  46. package/src/components/__stories__/possible-answers.stories.jsx +0 -22
  47. package/src/components/possible-answers.jsx +0 -36
  48. package/src/styles/widgets/definition.less +0 -86
  49. package/src/widgets/radio/__stories__/sat-styles.stories.jsx +0 -191
  50. package/src/widgets/radio/choice-icon/library-choice-icon.jsx +0 -225
  51. 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 { white-space: pre; }
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;