@khanacademy/perseus 4.0.1 → 5.0.0

package/src/components/__stories__/fixed-to-responsive.stories.tsx

@@ -21,8 +21,8 @@ export default {
     title: "Perseus/Components/Fixed to Responsive",
 } as Story;
 
-export const SmallImageWithSmallContainer: React.FC<StoryArgs> = (
-    args,
+export const SmallImageWithSmallContainer = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <FixedToResponsive width={width} height={sizeSmall}>
@@ -36,8 +36,8 @@ export const SmallImageWithSmallContainer: React.FC<StoryArgs> = (
     );
 };
 
-export const SmallImageWithMediumContainer: React.FC<StoryArgs> = (
-    args,
+export const SmallImageWithMediumContainer = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <FixedToResponsive width={width} height={sizeMedium}>
@@ -51,8 +51,8 @@ export const SmallImageWithMediumContainer: React.FC<StoryArgs> = (
     );
 };
 
-export const LargeImageWithLargeContainer: React.FC<StoryArgs> = (
-    args,
+export const LargeImageWithLargeContainer = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <FixedToResponsive width={width} height={sizeLarge}>
@@ -66,8 +66,8 @@ export const LargeImageWithLargeContainer: React.FC<StoryArgs> = (
     );
 };
 
-export const LargeImageWithSmallerContainer: React.FC<StoryArgs> = (
-    args,
+export const LargeImageWithSmallerContainer = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <FixedToResponsive width={width} height={sizeSmall}>
@@ -81,9 +81,9 @@ export const LargeImageWithSmallerContainer: React.FC<StoryArgs> = (
     );
 };
 
-export const TwoOverlayedImagesInsteadOneResponsiveContainer: React.FC<
-    StoryArgs
-> = (args): React.ReactElement => {
+export const TwoOverlayedImagesInsteadOneResponsiveContainer = (
+    args: StoryArgs,
+): React.ReactElement => {
     return (
         <FixedToResponsive width={width} height={sizeSmall}>
             <img
@@ -104,8 +104,8 @@ export const TwoOverlayedImagesInsteadOneResponsiveContainer: React.FC<
     );
 };
 
-export const HeightConstrainingAnImage: React.FC<StoryArgs> = (
-    args,
+export const HeightConstrainingAnImage = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <FixedToResponsive
@@ -123,9 +123,7 @@ export const HeightConstrainingAnImage: React.FC<StoryArgs> = (
     );
 };
 
-export const AllowingFullBleed: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const AllowingFullBleed = (args: StoryArgs): React.ReactElement => {
     return (
         <FixedToResponsive
             width={width}

package/src/components/__stories__/graph.stories.tsx

@@ -15,15 +15,13 @@ export default {
     title: "Perseus/Components/Graph",
 } as Story;
 
-export const SquareBoxSizeAndOtherwiseEmpty: React.FC<StoryArgs> = (
-    args,
+export const SquareBoxSizeAndOtherwiseEmpty = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Graph box={[size, size]} />;
 };
 
-export const LabeledSquaredBox: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const LabeledSquaredBox = (args: StoryArgs): React.ReactElement => {
     return (
         <Graph box={[size, size]} labels={["First label", "Second label"]} />
     );

package/src/components/__stories__/graphie.stories.tsx

@@ -16,8 +16,8 @@ export default {
     title: "Perseus/Components/Graphie",
 } as Story;
 
-export const SquareBoxSizeAndOtherwiseEmpty: React.FC<StoryArgs> = (
-    args,
+export const SquareBoxSizeAndOtherwiseEmpty = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <Graphie
@@ -28,8 +28,6 @@ export const SquareBoxSizeAndOtherwiseEmpty: React.FC<StoryArgs> = (
     );
 };
 
-export const PieChartGraphieLabels: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const PieChartGraphieLabels = (args: StoryArgs): React.ReactElement => {
     return <ItemRendererWithDebugUI item={itemWithPieChart} />;
 };

package/src/components/__stories__/hud.stories.tsx

@@ -12,9 +12,7 @@ export default {
     title: "Perseus/Components/HUD",
 } as Story;
 
-export const TestMessageDisabled: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const TestMessageDisabled = (args: StoryArgs): React.ReactElement => {
     return (
         <Hud
             fixedPosition={false}
@@ -25,9 +23,7 @@ export const TestMessageDisabled: React.FC<StoryArgs> = (
     );
 };
 
-export const TestMessageEnabled: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const TestMessageEnabled = (args: StoryArgs): React.ReactElement => {
     return (
         <Hud
             fixedPosition={false}

package/src/components/__stories__/icon.stories.tsx

@@ -54,7 +54,7 @@ export default {
     },
 } as Story;
 
-export const Icon: React.FC<StoryArgs> = (args): React.ReactElement => (
+export const Icon = (args: StoryArgs): React.ReactElement => (
     <IconComponent
         style={{display: "block"}}
         icon={IconPaths.iconCheck}

package/src/components/__stories__/image-loader.stories.tsx

@@ -15,7 +15,7 @@ export default {
     title: "Perseus/Components/Image Loader",
 } as Story;
 
-export const SvgImage: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const SvgImage = (args: StoryArgs): React.ReactElement => {
     return (
         <ImageLoader
             src={svgUrl}
@@ -29,7 +29,7 @@ export const SvgImage: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const PngImage: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const PngImage = (args: StoryArgs): React.ReactElement => {
     return (
         <ImageLoader
             src={imgUrl}
@@ -43,8 +43,8 @@ export const PngImage: React.FC<StoryArgs> = (args): React.ReactElement => {
     );
 };
 
-export const InvalidImageWithChildrenForFailedLoading: React.FC<StoryArgs> = (
-    args,
+export const InvalidImageWithChildrenForFailedLoading = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <ImageLoader

package/src/components/__stories__/info-tip.stories.tsx

@@ -14,9 +14,7 @@ export default {
 
 const svgUrl = "http://www.khanacademy.org/images/ohnoes-concerned.svg";
 
-export const TextOnMouseover: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const TextOnMouseover = (args: StoryArgs): React.ReactElement => {
     return (
         <InfoTip>
             <span>Sample text</span>
@@ -24,9 +22,7 @@ export const TextOnMouseover: React.FC<StoryArgs> = (
     );
 };
 
-export const ImageOnMouseover: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ImageOnMouseover = (args: StoryArgs): React.ReactElement => {
     return (
         <InfoTip>
             <img alt="" src={svgUrl} />

package/src/components/__stories__/inline-icon.stories.tsx

@@ -18,14 +18,12 @@ export default {
     title: "Perseus/Components/Inline Icon",
 } as Story;
 
-export const BasicIconPathAndSizing: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const BasicIconPathAndSizing = (args: StoryArgs): React.ReactElement => {
     return <InlineIcon {...defaultPath} />;
 };
 
-export const BasicIconWithAdditionalStyling: React.FC<StoryArgs> = (
-    args,
+export const BasicIconWithAdditionalStyling = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <InlineIcon
@@ -37,8 +35,6 @@ export const BasicIconWithAdditionalStyling: React.FC<StoryArgs> = (
     );
 };
 
-export const BasicIconWithAriaTitle: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const BasicIconWithAriaTitle = (args: StoryArgs): React.ReactElement => {
     return <InlineIcon {...defaultPath} title="Sample ARIA title" />;
 };

package/src/components/__stories__/input-with-examples.stories.tsx

@@ -20,20 +20,18 @@ const defaultObject = {
 } as const;
 const testExamples = ["Sample 1", "Sample 2", "Sample 3"];
 
-export const DefaultAndMostlyEmptyProps: React.FC<StoryArgs> = (
-    args,
+export const DefaultAndMostlyEmptyProps = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <InputWithExamples {...defaultObject} />;
 };
 
-export const ListOfExamples: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ListOfExamples = (args: StoryArgs): React.ReactElement => {
     return <InputWithExamples {...defaultObject} examples={testExamples} />;
 };
 
-export const AriaLabelTextWithListOfExamples: React.FC<StoryArgs> = (
-    args,
+export const AriaLabelTextWithListOfExamples = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <InputWithExamples
@@ -44,9 +42,7 @@ export const AriaLabelTextWithListOfExamples: React.FC<StoryArgs> = (
     );
 };
 
-export const DisabledInput: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const DisabledInput = (args: StoryArgs): React.ReactElement => {
     return (
         <InputWithExamples
             {...defaultObject}

package/src/components/__stories__/lint.stories.tsx

@@ -19,33 +19,33 @@ const defaultObject = {
     ruleName: "Test rule",
 } as const;
 
-export const DefaultLintContainerAndMessage: React.FC<StoryArgs> = (
-    args,
+export const DefaultLintContainerAndMessage = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Lint {...defaultObject} />;
 };
-export const Severity1DefaultLintAndMessage: React.FC<StoryArgs> = (
-    args,
+export const Severity1DefaultLintAndMessage = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Lint {...defaultObject} severity={1} />;
 };
-export const Severity2DefaultLintAndMessage: React.FC<StoryArgs> = (
-    args,
+export const Severity2DefaultLintAndMessage = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Lint {...defaultObject} severity={2} />;
 };
-export const Severity3DefaultLintAndMessage: React.FC<StoryArgs> = (
-    args,
+export const Severity3DefaultLintAndMessage = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Lint {...defaultObject} severity={3} />;
 };
-export const Severity4DefaultLintAndMessage: React.FC<StoryArgs> = (
-    args,
+export const Severity4DefaultLintAndMessage = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Lint {...defaultObject} severity={4} />;
 };
-export const InlineLintContainerAndMessage: React.FC<StoryArgs> = (
-    args,
+export const InlineLintContainerAndMessage = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Lint {...defaultObject} inline={true} />;
 };

package/src/components/__stories__/math-input.stories.tsx

@@ -17,18 +17,14 @@ const defaultObject = {
     onChange: () => {},
 } as const;
 
-export const DefaultWithBasicButtonSet: React.FC<StoryArgs> = (
-    args,
+export const DefaultWithBasicButtonSet = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <MathInput {...defaultObject} />;
 };
-export const AlwaysVisibleButtonSet: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const AlwaysVisibleButtonSet = (args: StoryArgs): React.ReactElement => {
     return <MathInput {...defaultObject} buttonsVisible="always" />;
 };
-export const DefaultWithAriaLabel: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const DefaultWithAriaLabel = (args: StoryArgs): React.ReactElement => {
     return <MathInput {...defaultObject} labelText="Sample label" />;
 };

package/src/components/__stories__/math-output.stories.tsx

@@ -12,14 +12,12 @@ export default {
     title: "Perseus/Components/Math Ouput",
 } as Story;
 
-export const EmptyPropsObject: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const EmptyPropsObject = (args: StoryArgs): React.ReactElement => {
     return <MathOutput />;
 };
-export const StringValue: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const StringValue = (args: StoryArgs): React.ReactElement => {
     return <MathOutput value="Test string value" />;
 };
-export const NumericValue: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const NumericValue = (args: StoryArgs): React.ReactElement => {
     return <MathOutput value={1234567890} />;
 };

package/src/components/__stories__/multi-button-group.stories.tsx

@@ -39,9 +39,7 @@ const HarnassedButtonGroup = (
     );
 };
 
-export const ButtonsWithNoTitles: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonsWithNoTitles = (args: StoryArgs): React.ReactElement => {
     return (
         <HarnassedButtonGroup
             {...args}
@@ -54,9 +52,7 @@ export const ButtonsWithNoTitles: React.FC<StoryArgs> = (
     );
 };
 
-export const ButtonsWithTitles: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ButtonsWithTitles = (args: StoryArgs): React.ReactElement => {
     return (
         <HarnassedButtonGroup
             {...args}

package/src/components/__stories__/number-input.stories.tsx

@@ -16,28 +16,26 @@ export default {
     title: "Perseus/Components/Number Input",
 } as Story;
 
-export const EmptyPropsObject: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const EmptyPropsObject = (args: StoryArgs): React.ReactElement => {
     return <NumberInput {...defaultObject} />;
 };
 
-export const SampleValue: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const SampleValue = (args: StoryArgs): React.ReactElement => {
     return <NumberInput {...defaultObject} value={1234567890} />;
 };
 
-export const Placeholder: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Placeholder = (args: StoryArgs): React.ReactElement => {
     return <NumberInput {...defaultObject} placeholder="Sample placeholder" />;
 };
 
-export const SizeMini: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const SizeMini = (args: StoryArgs): React.ReactElement => {
     return <NumberInput {...defaultObject} placeholder="Sample placeholder" />;
 };
 
-export const SizeSmall: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const SizeSmall = (args: StoryArgs): React.ReactElement => {
     return <NumberInput {...defaultObject} size="small" />;
 };
 
-export const SizeNormal: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const SizeNormal = (args: StoryArgs): React.ReactElement => {
     return <NumberInput {...defaultObject} size="normal" />;
 };

package/src/components/__stories__/prop-check-box.stories.tsx

@@ -12,8 +12,8 @@ export default {
     title: "Perseus/Components/Prop Check Box",
 } as Story;
 
-export const TestLabelWithCheckedObject: React.FC<StoryArgs> = (
-    args,
+export const TestLabelWithCheckedObject = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <PropCheckBox
@@ -25,8 +25,8 @@ export const TestLabelWithCheckedObject: React.FC<StoryArgs> = (
     );
 };
 
-export const TestLabelWithUncheckedObject: React.FC<StoryArgs> = (
-    args,
+export const TestLabelWithUncheckedObject = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <PropCheckBox
@@ -38,8 +38,8 @@ export const TestLabelWithUncheckedObject: React.FC<StoryArgs> = (
     );
 };
 
-export const TestLabelWithCheckedObjectLabelOnTheRight: React.FC<StoryArgs> = (
-    args,
+export const TestLabelWithCheckedObjectLabelOnTheRight = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <PropCheckBox
@@ -51,9 +51,9 @@ export const TestLabelWithCheckedObjectLabelOnTheRight: React.FC<StoryArgs> = (
     );
 };
 
-export const TestLabelWithUncheckedObjectLabelOnTheRight: React.FC<
-    StoryArgs
-> = (args): React.ReactElement => {
+export const TestLabelWithUncheckedObjectLabelOnTheRight = (
+    args: StoryArgs,
+): React.ReactElement => {
     return (
         <PropCheckBox
             test={false}

package/src/components/__stories__/range-input.stories.tsx

@@ -12,19 +12,17 @@ export default {
     title: "Perseus/Components/Range Input",
 } as Story;
 
-export const EmptyValueArray: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const EmptyValueArray = (args: StoryArgs): React.ReactElement => {
     return <RangeInput onChange={() => {}} value={[]} />;
 };
 
-export const SimpleWithSmallValueRanges: React.FC<StoryArgs> = (
-    args,
+export const SimpleWithSmallValueRanges = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <RangeInput onChange={() => {}} value={[-10, 10]} />;
 };
 
-export const Placeholders: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const Placeholders = (args: StoryArgs): React.ReactElement => {
     return (
         <RangeInput onChange={() => {}} placeholder={["?", "!"]} value={[]} />
     );

package/src/components/__stories__/simple-keypad-input.stories.tsx

@@ -18,12 +18,10 @@ export default {
     title: "Perseus/Components/Simple Keypad Input",
 } as Story;
 
-export const EmptyPropsObject: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const EmptyPropsObject = (args: StoryArgs): React.ReactElement => {
     return <SimpleKeypadInput {...defaultObject} />;
 };
 
-export const CustomValue: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const CustomValue = (args: StoryArgs): React.ReactElement => {
     return <SimpleKeypadInput {...defaultObject} value="Test value" />;
 };

package/src/components/__stories__/sortable.stories.tsx

@@ -14,8 +14,8 @@ export default {
     title: "Perseus/Components/Sortable",
 } as Story;
 
-export const SortableHorizontalExample: React.FC<StoryArgs> = (
-    args,
+export const SortableHorizontalExample = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <Sortable
@@ -26,8 +26,8 @@ export const SortableHorizontalExample: React.FC<StoryArgs> = (
     );
 };
 
-export const SortableVerticalExample: React.FC<StoryArgs> = (
-    args,
+export const SortableVerticalExample = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <Sortable
@@ -38,33 +38,33 @@ export const SortableVerticalExample: React.FC<StoryArgs> = (
     );
 };
 
-export const BasicSortableOptionsTest: React.FC<StoryArgs> = (
-    args,
+export const BasicSortableOptionsTest = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Sortable options={defaultOptions} />;
 };
 
-export const BasicSortableOptionsTestWithNoPadding: React.FC<StoryArgs> = (
-    args,
+export const BasicSortableOptionsTestWithNoPadding = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Sortable options={defaultOptions} padding={false} />;
 };
 
-export const BasicSortableOptionsTestWithLargeMargin: React.FC<StoryArgs> = (
-    args,
+export const BasicSortableOptionsTestWithLargeMargin = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Sortable options={defaultOptions} margin={64} />;
 };
 
-export const BasicSortableOptionsTestDisabled: React.FC<StoryArgs> = (
-    args,
+export const BasicSortableOptionsTestDisabled = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return <Sortable options={defaultOptions} disabled={true} />;
 };
 
-export const BasicSortableOptionsTestWithWidthAndHeightConstraints: React.FC<
-    StoryArgs
-> = (args): React.ReactElement => {
+export const BasicSortableOptionsTestWithWidthAndHeightConstraints = (
+    args: StoryArgs,
+): React.ReactElement => {
     return (
         <Sortable
             options={defaultOptions}

package/src/components/__stories__/stub-tag-editor.stories.tsx

@@ -14,19 +14,15 @@ export default {
 
 const defaultValues = ["Test value 1", "Test value 2", "Test value 3"];
 
-export const ShowingTitle: React.FC<StoryArgs> = (args): React.ReactElement => {
+export const ShowingTitle = (args: StoryArgs): React.ReactElement => {
     return <StubTagEditor onChange={() => {}} showTitle={true} />;
 };
 
-export const NotShowingTitle: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const NotShowingTitle = (args: StoryArgs): React.ReactElement => {
     return <StubTagEditor onChange={() => {}} showTitle={false} />;
 };
 
-export const ShowingTitleWithValue: React.FC<StoryArgs> = (
-    args,
-): React.ReactElement => {
+export const ShowingTitleWithValue = (args: StoryArgs): React.ReactElement => {
     return (
         <StubTagEditor
             onChange={() => {}}
@@ -36,8 +32,8 @@ export const ShowingTitleWithValue: React.FC<StoryArgs> = (
     );
 };
 
-export const NotShowingTitleWithValue: React.FC<StoryArgs> = (
-    args,
+export const NotShowingTitleWithValue = (
+    args: StoryArgs,
 ): React.ReactElement => {
     return (
         <StubTagEditor