Small storybook fixes

.changeset/stale-carpets-sleep.md

@@ -0,0 +1,5 @@
+---
+"@khanacademy/math-input": patch
+---
+
+Small comment fixes in the math keypad

packages/math-input/src/components/keypad/keypad-pages/keypad-pages.stories.tsx

@@ -1,5 +1,6 @@
 import {action} from "@storybook/addon-actions";
 import {withKnobs} from "@storybook/addon-knobs";
+import {INITIAL_VIEWPORTS} from "@storybook/addon-viewport";
 import * as React from "react";
 
 import GeometryInputPage from "./geometry-page";
@@ -13,7 +14,7 @@ export default {
         backgrounds: {
             values: [{name: "light background", value: "white", default: true}],
         },
-        viewport: {defaultViewport: "iphone6"},
+        viewport: {defaultViewport: "iphone6", viewports: INITIAL_VIEWPORTS},
     },
 };
 
@@ -22,7 +23,13 @@ export const NumericInput = (): React.ReactElement => (
 );
 
 export const PreAlgebraInput = (): React.ReactElement => (
-    <PrealgebraInputPage onClickKey={action("onClickKey")} />
+    <PrealgebraInputPage
+        onClickKey={action("onClickKey")}
+        preAlgebra={true}
+        logarithms={true}
+        basicRelations={true}
+        advancedRelations={true}
+    />
 );
 
 export const TrigonometryInput = (): React.ReactElement => (

packages/math-input/src/components/keypad/keypad.tsx

@@ -74,7 +74,7 @@ function getAvailableTabs(props: Props): ReadonlyArray<KeypadPageType> {
 // The main (v2) Keypad. Use this component to present an accessible, onscreen
 // keypad to learners for entering math expressions.
 export default function Keypad(props: Props) {
-    // If we're using the Fractions keyapd, we want to default select that page
+    // If we're using the Fractions keypad, we want to default select that page
     // Otherwise, we want to default to the Numbers page
     const defaultSelectedPage = props.fractionsOnly ? "Fractions" : "Numbers";
     const [selectedPage, setSelectedPage] =
@@ -105,7 +105,7 @@ export default function Keypad(props: Props) {
         ? styles.fractionsGrid
         : styles.expressionGrid;
 
-    // This useeffect is only used to ensure that we can test the keypad in storybook
+    // This useEffect is only used to ensure that we can test the keypad in storybook
     useEffect(() => {
         setSelectedPage(defaultSelectedPage);
     }, [fractionsOnly, defaultSelectedPage]);

packages/math-input/src/components/keypad/navigation-pad.stories.tsx

@@ -1,3 +1,4 @@
+import {action} from "@storybook/addon-actions";
 import * as React from "react";
 
 import NavigationPad from "./navigation-pad";
@@ -19,7 +20,7 @@ export default {
 export function basic() {
     return (
         <div style={{padding: 50}}>
-            <NavigationPad onClickKey={() => {}} />
+            <NavigationPad onClickKey={action("onClickKey")} />
         </div>
     );
 }

packages/math-input/src/full-keypad.stories.tsx

@@ -87,7 +87,13 @@ export default {
 
 const Template: ComponentStory<typeof Keypad> = (
     args: PropsFor<typeof Keypad>,
-): React.ReactElement => <Keypad {...args} onClickKey={action("onClickKey")} />;
+): React.ReactElement => (
+    <Keypad
+        {...args}
+        onClickKey={action("onClickKey")}
+        onAnalyticsEvent={async (e) => action("onAnalyticsEvent")(e)}
+    />
+);
 
 export const Default = Template.bind({});