@khanacademy/perseus 1.4.0 → 2.0.0

package/src/styles/perseus-renderer.less

@@ -443,7 +443,6 @@
 }
 
 @import "./widgets/categorizer.less";
-@import "./widgets/definition.less";
 @import "./widgets/dropdown.less";
 @import "./widgets/expression.less";
 @import "./widgets/grapher.less";
@@ -722,264 +721,6 @@
 @satTopSpacingForTwoColumnLayout: 48px;
 @satTwoColumnLayoutSideMargin: 32px;
 
-// #sat-mission (below) matches when we're inside the SAT MVP product,
-// basically internal-only and in flux.
-#sat-mission {
-    @satContentWidth: 592px;
-
-    .content-area > div {
-        margin-left: auto;
-        margin-right: auto;
-        width: @satContentWidth;
-        .perseus-input-with-label {
-            display: flex;
-            align-items: center;
-            .perseus-input-label {
-                font-weight: 600;
-                padding-right: 10px;
-            }
-        }
-        .perseus-input-with-answer-blurb {
-            // numeric-inputs widgets use labels whereas input-number widgets
-            // use spans.
-            > span, > label {
-                display: inline-block;
-            }
-
-            .perseus-possible-answers {
-                color: rgb(0, 153, 0);
-                display: inline-block;
-                padding-right: 4px;
-
-                dt, dd {
-                    // If you just use inline, then screen readers (or at least
-                    // ChromeVox) won't read the answers as distinct items;
-                    // if 2 and 4 were both correct, then it would read them
-                    // concatenated as "twenty-four".
-                    display: inline-block;
-                }
-
-                dt {
-                    padding: 0 5px 0 13px;
-                    color: rgb(18, 18, 18);
-                    text-transform: uppercase;
-                }
-
-                dt::after {
-                    content: ":";
-                }
-
-                dd:not(:last-child)::after {
-                    // TODO(johnsullivan): Figure out a better way to do this list
-                    // joining.
-                    // TODO(mattdr): Joining in CSS makes semantic sense here
-                    // (they're definition list entries that we happen to be
-                    // rendering as a line of text joined by "or"), but CSS is
-                    // more difficult to internationalize. SAT is English-only
-                    // for now, though.
-                    content: "or";
-                    padding: 0 5px;
-                    color: rgb(18, 18, 18);
-                }
-            }
-        }
-
-        input.perseus-incorrect {
-            color: @satIncorrectColor;
-            background-color: @satIncorrectBackgroundColor;
-            border: solid 1px @satIncorrectBorderColor;
-        }
-
-        input.perseus-correct {
-            color: @satCorrectColor;
-            background-color: @satCorrectBackgroundColor;
-            border: solid 1px @satCorrectBorderColor;
-        }
-
-        input.perseus-unanswered {
-            background-color: #eee;
-            border: solid 1px #999;
-        }
-
-        &.perseus-renderer-two-columns {
-            width: 1024px;
-
-            // This prevents a strange blank space from appearing above
-            // passages.
-            // TODO(johnsullivan): Try and get rid of the wrapping div that's
-            // causing this instead of modifying its margin like this.
-            & > .paragraph {
-                margin: 0;
-            }
-
-            .perseus-two-columns {
-                display: flex;
-                justify-content: center;
-            }
-
-            .perseus-column {
-                // NOTE(emily): For some reason, these prefixes aren't being
-                // added by our auto-prefixer, and we need these prefixes to
-                // work in Safari <= 8.
-                display: -webkit-flex;
-                -webkit-flex-direction: column;
-
-                display: flex;
-                flex-direction: column;
-                // Should this be @articleMaxWidthTablet? or is this
-                // conceptually a different value?
-                width: 512px;
-
-                &:nth-child(1) {
-                    background: #eee;
-                    border-right: 1px solid #ddd;
-                    box-sizing: border-box;
-
-                    .perseus-column-content {
-                        padding-top: @satTopSpacingForTwoColumnLayout;
-                        padding-bottom: 22px;
-                        padding-left: 46px;
-                        padding-right: @satTwoColumnLayoutSideMargin;
-                    }
-
-                    .perseus-widget-passage-container {
-                        position: relative;
-                        .perseus-widget-passage-instructions div.paragraph {
-                            margin-top: 0;
-                        }
-                    }
-                    .perseus-widget-passage {
-                        // We've replaced the margin here with padding in the
-                        // parent element to stay consistent with non-passage
-                        // two-column mode.
-                        margin: 0;
-                    }
-
-                    & > .paragraph {
-                        margin-right: 40px;
-                    }
-
-                    blockquote {
-                        padding: 0;
-                        margin-right: 22px;
-
-                        & > .paragraph:nth-child(1) {
-                            margin-top: 0;
-                        }
-                    }
-                }
-
-                &:nth-child(2) {
-                    .perseus-column-content {
-                        padding-left: @satTwoColumnLayoutSideMargin;
-                        padding-right: @satTwoColumnLayoutSideMargin;
-                    }
-
-                    .perseus-group {
-                        margin-bottom: 20px;
-                    }
-                }
-            }
-
-            .perseus-column-content {
-                flex: 1 1 auto;
-                overflow-y: auto;
-
-                & > .paragraph {
-                    margin-top: 0;
-                }
-            }
-
-        }
-    }
-
-    input[type=text],
-    input[type=number] {
-        border: 1px solid #aaa;
-        font-family: @boldFontFamily;
-        font-size: 14px;
-        margin: 10px 0;
-        padding: 5px;
-
-        &:focus {
-            border-color: @satBlue;
-            box-shadow: 0 0 10px fade(@satBlue, 80%);
-            outline: none;
-        }
-    }
-
-    .valid-answer-mixin() {
-        input[type=text]:valid, input[type=number]:valid {
-            border: 1px solid @satBlue;
-            background: @satSelectedBackgroundColor;
-            color: initial;
-
-            &:focus {
-                box-shadow: 0 0 10px fade(@satBlue, 80%);
-            }
-        }
-    }
-
-    .invalid-answer-mixin() {
-        input[type=text]:valid, input[type=number]:valid {
-            color: @satIncorrectColor;
-            background-color: @satIncorrectBackgroundColor;
-            border: solid 1px @satIncorrectBorderColor;
-
-            &:focus {
-                box-shadow: 0 0 10px fade(@satIncorrectBorderColor, 80%);
-            }
-        }
-    }
-
-    // If a textbox appears inside a Perseus group widget, then the group
-    // widget's validity should override the item's validity when styling that
-    // item.
-    //
-    // That is, if a group widget is valid, but the item as a whole is
-    // invalid, inputs inside the valid group widget should still render as
-    // valid.
-    //
-    // This is implemented as a mixin and mixed into .valid-answer and
-    // .invalid-answer, in order to ensure that there's no ambiguity as to
-    // which selector takes precedence. Additionally, this ensures that these
-    // styles will only be applied when validity is relevant to the user (i.e.
-    // not in review mode).
-    .perseus-group-validity-override() {
-        .perseus-group-valid-answer {
-            .valid-answer-mixin();
-        }
-        .perseus-group-invalid-answer {
-            .invalid-answer-mixin();
-        }
-    }
-
-    .valid-answer {
-        .valid-answer-mixin();
-        .perseus-group-validity-override();
-    }
-    .invalid-answer {
-        .invalid-answer-mixin();
-        .perseus-group-validity-override();
-    }
-
-    #sat-route-task, #sat-route-section {
-        .content-area > .perseus-renderer-two-columns {
-            // Override column top margin to 0 (the first column will get
-            // the desired spacing by adding padding - to preserve the
-            // gray background)
-            margin-top: 0;
-
-            // Add spacing to the second column, by way of its first child.
-            // We want the margins to auto collapse, and so we can't add
-            // it to perseus-column because it's floated.
-            .perseus-column:nth-child(2) > .perseus-column-content > :first-child {
-                margin-top: @satTopSpacingForTwoColumnLayout;
-            }
-        }
-    }
-}
-
 .perseus-error {
     background: @red;
     border: 2px solid red;

package/src/styles/variables.less

@@ -41,17 +41,6 @@
 @pure-md-max: (@pure-lg-min - 1);
 @pure-lg-max: (@pure-xl-min - 1);
 
-// SAT variables
-@satBlue:               #0084ce;
-@satSelectedBackgroundColor: #e4f3f9;
-@satActiveBackgroundColor: #d0edf4;
-@satCorrectColor:       #009900;
-@satCorrectBorderColor: #00cc00;
-@satCorrectBackgroundColor: #e4f7e4;
-@satIncorrectColor:     #990000;
-@satIncorrectBorderColor: #cc5252;
-@satIncorrectBackgroundColor: #f2ebeb;
-
 // Layer variables
 @zIndexScratchPad: 1;
 @zIndexAboveScratchpad: @zIndexScratchPad + 1;

package/src/styles/variables.shared.less

@@ -311,16 +311,6 @@
 @collegeCareersMoreLinkColor:      @collegeCareersMoreDomainColor;
 @collegeCareersMoreLinkHoverColor: @collegeCareersMoreTopicColor;
 
-// NOTE(johnsullivan): SAT isn't really a part of the domain system so doesn't
-// get included in the .applyToDomains mixin. Currently these variables are
-// only used for KUI buttons.
-@satDomainColor:    #0084ce;
-@satSubjectColor:   #0084ce;
-@satTopicColor:     #0084ce;
-@satHoverColor:     @satDomainColor;
-@satLinkColor:      @satDomainColor;
-@satLinkHoverColor: @satTopicColor;
-
 // Exercise Colors
 // If you update these colours, please update thumbnail_handler.py's
 // get_domain_color method.

package/src/types.js

@@ -142,7 +142,6 @@ type StubTagEditorType = $FlowFixMe; // from "./components/stub-tag-editor.jsx";
 export type APIOptions = $ReadOnly<{|
     isArticle?: boolean,
 
-    satStyling?: boolean,
     // This should actually be required since renderer.jsx sets defaults for
     // any missing properties in this object using this.getApiOptions() before
     // passing the prop on to other components.
@@ -232,19 +231,6 @@ export type APIOptions = $ReadOnly<{|
     // Whether to use the Draft.js editor or the legacy textarea
     useDraftEditor?: boolean,
 
-    // Styling options that control the visual behavior of Perseus
-    // items.
-    // TODO(mdr): If we adopt this pattern, we'll need to think about
-    //     how to make individual `styling` options be optional, and
-    //     how to set their default values without overwriting provided
-    //     values. For now, though, you must either specify all fields
-    //     of `styling`, or omit the `styling` option entirely.
-    styling?: {|
-        // TODO(Nicole): Remove this after landing wonderblock-ifying
-        // the radio widget
-        primaryProductColor?: string,
-    |},
-
     // The color used for the hint progress indicator (eg. 1 / 3)
     hintProgressColor?: string,
 
@@ -399,13 +385,11 @@ export type APIOptionsWithDefaults = $ReadOnly<{|
     onFocusChange: $NonMaybeType<APIOptions["onFocusChange"]>,
     onInputError: $NonMaybeType<APIOptions["onInputError"]>,
     readOnly: $NonMaybeType<APIOptions["readOnly"]>,
-    satStyling: $NonMaybeType<APIOptions["satStyling"]>,
     setDrawingAreaAvailable: $NonMaybeType<
         APIOptions["setDrawingAreaAvailable"],
     >,
     showAlignmentOptions: $NonMaybeType<APIOptions["showAlignmentOptions"]>,
     staticRender: $NonMaybeType<APIOptions["staticRender"]>,
-    styling: $NonMaybeType<APIOptions["styling"]>,
     useDraftEditor: $NonMaybeType<APIOptions["useDraftEditor"]>,
 |}>;
 

package/src/widgets/__stories__/input-number.stories.jsx

@@ -100,17 +100,3 @@ export const Percent = (args: InputNumberOptions): React.Node => {
     return <RendererWithDebugUI question={question} />;
 };
 Percent.args = question3.widgets["input-number 1"].options;
-
-export const RationalWithSatStyling = (
-    args: InputNumberOptions,
-): React.Node => {
-    const question = updateWidgetOptions(question1, "input-number 1", args);
-    return (
-        <RendererWithDebugUI
-            question={question}
-            apiOptions={{satStyling: true}}
-            reviewMode={true}
-        />
-    );
-};
-Rational.args = question1.widgets["input-number 1"].options;

package/src/widgets/__stories__/radio.stories.jsx

@@ -17,7 +17,6 @@ type StoryArgs = {|
     static: boolean,
 
     // API Options
-    satStyling: boolean,
     crossOutEnabled: boolean,
 
     // Renderer Options
@@ -33,7 +32,6 @@ export default ({
     title: "Perseus/Widgets/Radio",
     args: {
         static: false,
-        satStyling: false,
         crossOutEnabled: false,
         reviewMode: false,
     },
@@ -57,7 +55,6 @@ const applyStoryArgs = (
 
 const buildApiOptions = (args: StoryArgs): APIOptions => {
     return {
-        satStyling: args.satStyling,
         crossOutEnabled: args.crossOutEnabled,
     };
 };

package/src/widgets/__tests__/__snapshots__/definition_test.js.snap

@@ -29,25 +29,20 @@ exports[`Definition widget should have a default snapshot: first render 1`] = `
           <div
             class="perseus-widget-container widget-nohighlight widget-inline"
           >
-            <span
+            <button
               aria-controls="uid-popover-0-wb-id"
+              aria-disabled="false"
               aria-expanded="false"
-              class="perseus-widget-definition"
+              class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4"
               id="uid-popover-0-wb-id-anchor"
+              type="button"
             >
-              <button
-                aria-disabled="false"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1hl5pu8"
-                role="button"
-                type="button"
+              <span
+                style="color: rgb(24, 101, 242);"
               >
-                <span
-                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_m8a8ki-o_O-textWithFocus_e296pg"
-                >
-                  the Pequots
-                </span>
-              </button>
-            </span>
+                the Pequots
+              </span>
+            </button>
           </div>
           , upon these conditions.
         </div>
@@ -86,25 +81,20 @@ exports[`Definition widget should have an open state snapshot: open state 1`] =
           <div
             class="perseus-widget-container widget-nohighlight widget-inline"
           >
-            <span
+            <button
               aria-controls="uid-popover-1-wb-id"
+              aria-disabled="false"
               aria-expanded="true"
-              class="perseus-widget-definition"
+              class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4"
               id="uid-popover-1-wb-id-anchor"
+              type="button"
             >
-              <button
-                aria-disabled="false"
-                class="button_vr44p2-o_O-shared_lwskrm-o_O-default_1hl5pu8"
-                role="button"
-                type="button"
+              <span
+                style="color: rgb(24, 101, 242); border-bottom: 2px solid #1865f2;"
               >
-                <span
-                  class="text_f1191h-o_O-LabelLarge_5s82ln-o_O-text_m8a8ki-o_O-textWithFocus_e296pg-o_O-focus_15mc0l2"
-                >
-                  the Pequots
-                </span>
-              </button>
-            </span>
+                the Pequots
+              </span>
+            </button>
           </div>
           , upon these conditions.
         </div>

package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap

@@ -58,15 +58,9 @@ exports[`group widget should snapshot: initial render 1`] = `
           <div
             class="perseus-column"
           >
-            <div
-              class="sat-header-grafting-area"
-            />
             <div
               class="perseus-column-content"
             >
-              <div
-                class="sat-skill-subscore-grafting-area"
-              />
               <div
                 class="paragraph"
               >
@@ -1270,9 +1264,6 @@ exports[`group widget should snapshot: initial render 1`] = `
                   </div>
                 </div>
               </div>
-              <div
-                class="sat-grafting-area"
-              />
             </div>
           </div>
         </div>

package/src/widgets/__tests__/__snapshots__/image_test.jsx.snap

@@ -117,15 +117,9 @@ exports[`image widget - isMobile %b should snapshot: first render 1`] = `
           <div
             class="perseus-column"
           >
-            <div
-              class="sat-header-grafting-area"
-            />
             <div
               class="perseus-column-content"
             >
-              <div
-                class="sat-skill-subscore-grafting-area"
-              />
               <div
                 class="paragraph"
               >
@@ -191,9 +185,6 @@ exports[`image widget - isMobile %b should snapshot: first render 1`] = `
                 </span>
                 ?
               </div>
-              <div
-                class="sat-grafting-area"
-              />
             </div>
           </div>
         </div>
@@ -335,15 +326,9 @@ exports[`image widget - isMobile %b should snapshot: first render 2`] = `
           <div
             class="perseus-column"
           >
-            <div
-              class="sat-header-grafting-area"
-            />
             <div
               class="perseus-column-content"
             >
-              <div
-                class="sat-skill-subscore-grafting-area"
-              />
               <div
                 class="paragraph"
               >
@@ -409,9 +394,6 @@ exports[`image widget - isMobile %b should snapshot: first render 2`] = `
                 </span>
                 ?
               </div>
-              <div
-                class="sat-grafting-area"
-              />
             </div>
           </div>
         </div>