@khanacademy/math-input 10.0.0 → 10.1.0

package/src/components/keypad/__tests__/keypad.test.tsx

@@ -46,6 +46,42 @@ describe("keypad", () => {
         });
     });
 
+    it("should snapshot unexpanded", () => {
+        // Arrange
+        // Act
+        const {container} = render(
+            <Keypad
+                onClickKey={() => {}}
+                preAlgebra
+                trigonometry
+                extraKeys={["PI"]}
+                onAnalyticsEvent={async () => {}}
+                expandedView={false}
+            />,
+        );
+
+        // Assert
+        expect(container).toMatchSnapshot("first render");
+    });
+
+    it("should snapshot expanded", () => {
+        // Arrange
+        // Act
+        const {container} = render(
+            <Keypad
+                onClickKey={() => {}}
+                preAlgebra
+                trigonometry
+                extraKeys={["PI"]}
+                onAnalyticsEvent={async () => {}}
+                expandedView={true}
+            />,
+        );
+
+        // Assert
+        expect(container).toMatchSnapshot("first render");
+    });
+
     it(`shows optional dismiss button`, () => {
         // Arrange
         // Act
@@ -122,4 +158,62 @@ describe("keypad", () => {
         // Assert
         expect(onClickKey).toHaveBeenCalledTimes(tabs.length);
     });
+
+    it(`does not show navigation pad with expanded view turned off`, () => {
+        // Arrange
+        // Act
+        render(
+            <Keypad
+                onClickKey={() => {}}
+                preAlgebra
+                trigonometry
+                extraKeys={["PI"]}
+                onAnalyticsEvent={async () => {}}
+                expandedView={false}
+            />,
+        );
+
+        // Assert
+        expect(
+            screen.queryByRole("button", {name: "Up arrow"}),
+        ).not.toBeInTheDocument();
+        expect(
+            screen.queryByRole("button", {name: "Right arrow"}),
+        ).not.toBeInTheDocument();
+        expect(
+            screen.queryByRole("button", {name: "Down arrow"}),
+        ).not.toBeInTheDocument();
+        expect(
+            screen.queryByRole("button", {name: "Left arrow"}),
+        ).not.toBeInTheDocument();
+    });
+
+    it(`shows navigation pad in expanded view`, () => {
+        // Arrange
+        // Act
+        render(
+            <Keypad
+                onClickKey={() => {}}
+                preAlgebra
+                trigonometry
+                extraKeys={["PI"]}
+                onAnalyticsEvent={async () => {}}
+                expandedView={true}
+            />,
+        );
+
+        // Assert
+        expect(
+            screen.getByRole("button", {name: "Up arrow"}),
+        ).toBeInTheDocument();
+        expect(
+            screen.getByRole("button", {name: "Right arrow"}),
+        ).toBeInTheDocument();
+        expect(
+            screen.getByRole("button", {name: "Down arrow"}),
+        ).toBeInTheDocument();
+        expect(
+            screen.getByRole("button", {name: "Left arrow"}),
+        ).toBeInTheDocument();
+    });
 });

package/src/components/keypad/button-assets.tsx

@@ -1735,15 +1735,88 @@ export default function ButtonAsset({id}: Props): React.ReactElement {
                 </svg>
             );
 
+        case "UP":
+            return (
+                <svg width="48" height="48" viewBox="0 0 48 48">
+                    <g
+                        fill="none"
+                        fillRule="evenodd"
+                        transform="rotate(90 24 24)"
+                    >
+                        <path fill="none" d="M0 0h48v48H0z" />
+                        <path fill="none" d="M12 12h24v24H12z" />
+                        <path
+                            stroke="#21242C"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M22 18l-6 6 6 6M16 24h16"
+                        />
+                    </g>
+                </svg>
+            );
+        case "DOWN":
+            return (
+                <svg width="48" height="48" viewBox="0 0 48 48">
+                    <g
+                        fill="none"
+                        fillRule="evenodd"
+                        transform="rotate(270 24 24)"
+                    >
+                        <path fill="none" d="M0 0h48v48H0z" />
+                        <path fill="none" d="M12 12h24v24H12z" />
+                        <path
+                            stroke="#21242C"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M22 18l-6 6 6 6M16 24h16"
+                        />
+                    </g>
+                </svg>
+            );
+        case "LEFT":
+            return (
+                <svg width="48" height="48" viewBox="0 0 48 48">
+                    <g fill="none" fillRule="evenodd">
+                        <path fill="none" d="M0 0h48v48H0z" />
+                        <path fill="none" d="M12 12h24v24H12z" />
+                        <path
+                            stroke="#21242C"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M22 18l-6 6 6 6M16 24h16"
+                        />
+                    </g>
+                </svg>
+            );
+        case "RIGHT":
+            return (
+                <svg width="48" height="48" viewBox="0 0 48 48">
+                    <g
+                        fill="none"
+                        fillRule="evenodd"
+                        transform="rotate(180 24 24)"
+                    >
+                        <path fill="none" d="M0 0h48v48H0z" />
+                        <path fill="none" d="M12 12h24v24H12z" />
+                        <path
+                            stroke="#21242C"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            d="M22 18l-6 6 6 6M16 24h16"
+                        />
+                    </g>
+                </svg>
+            );
+
         /**
          * ANYTHING BELOW IS NOT YET HANDLED
          */
         case "MANY":
         case "NOOP":
-        case "UP":
-        case "DOWN":
-        case "LEFT":
-        case "RIGHT":
         case "PHI":
         case "NTHROOT3":
         case "POW":

package/src/components/keypad/keypad-button.tsx

@@ -73,7 +73,7 @@ const styles = StyleSheet.create({
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        boxShadow: "0px 1px 0px rgba(33, 36, 44, 0.32)",
+        boxShadow: `0px 1px 0px ${Color.offBlack32}`,
         boxSizing: "border-box",
         background: Color.white,
         borderRadius: 4,

package/src/components/keypad/keypad.stories.tsx

@@ -31,6 +31,7 @@ export default {
         preAlgebra: false,
         trigonometry: false,
         sendEvent: () => {},
+        onAnalyticsEvent: async () => {},
     },
     argTypes: {
         advancedRelations: {
@@ -115,4 +116,7 @@ Everything.args = {
     multiplicationDot: false,
     preAlgebra: true,
     trigonometry: true,
+    expandedView: true,
+    showDismiss: true,
+    extraKeys: ["a", "b", "c"],
 };

package/src/components/keypad/keypad.tsx

@@ -11,7 +11,9 @@ import FractionsPage from "./keypad-pages/fractions-page";
 import GeometryPage from "./keypad-pages/geometry-page";
 import NumbersPage from "./keypad-pages/numbers-page";
 import OperatorsPage from "./keypad-pages/operators-page";
+import NavigationPad from "./navigation-pad";
 import SharedKeys from "./shared-keys";
+import {expandedViewThreshold} from "./utils";
 
 import type Key from "../../data/keys";
 import type {ClickKeyCallback} from "../../types";
@@ -23,10 +25,10 @@ export type Props = {
     extraKeys: ReadonlyArray<Key>;
     cursorContext?: typeof CursorContext[keyof typeof CursorContext];
     showDismiss?: boolean;
+    expandedView?: boolean;
 
     multiplicationDot?: boolean;
     divisionKey?: boolean;
-
     trigonometry?: boolean;
     preAlgebra?: boolean;
     logarithms?: boolean;
@@ -96,6 +98,7 @@ export default function Keypad(props: Props) {
         showDismiss,
         onAnalyticsEvent,
         fractionsOnly,
+        expandedView,
     } = props;
 
     // Use a different grid for our fraction keypad
@@ -128,58 +131,70 @@ export default function Keypad(props: Props) {
     }, [onAnalyticsEvent, isMounted]);
 
     return (
-        <View>
-            <Tabbar
-                items={availableTabs}
-                selectedItem={selectedPage}
-                onSelectItem={(tabbarItem: TabbarItemType) => {
-                    setSelectedPage(tabbarItem);
-                }}
-                style={styles.tabbar}
-                onClickClose={
-                    showDismiss ? () => onClickKey("DISMISS") : undefined
-                }
-            />
-
+        <View style={expandedView ? styles.keypadOuterContainer : null}>
             <View
-                style={[styles.keypadGrid, gridStyle]}
-                role="grid"
-                tabIndex={0}
-                aria-label="Keypad"
+                style={[
+                    styles.wrapper,
+                    expandedView ? styles.expandedWrapper : null,
+                ]}
             >
-                {selectedPage === "Fractions" && (
-                    <FractionsPage
-                        onClickKey={onClickKey}
-                        cursorContext={cursorContext}
-                    />
-                )}
-                {selectedPage === "Numbers" && (
-                    <NumbersPage onClickKey={onClickKey} />
-                )}
-                {selectedPage === "Extras" && (
-                    <ExtrasPage onClickKey={onClickKey} extraKeys={extraKeys} />
-                )}
-                {selectedPage === "Operators" && (
-                    <OperatorsPage
-                        onClickKey={onClickKey}
-                        preAlgebra={preAlgebra}
-                        logarithms={logarithms}
-                        basicRelations={basicRelations}
-                        advancedRelations={advancedRelations}
-                    />
-                )}
-                {selectedPage === "Geometry" && (
-                    <GeometryPage onClickKey={onClickKey} />
-                )}
-                {!fractionsOnly && (
-                    <SharedKeys
-                        onClickKey={onClickKey}
-                        cursorContext={cursorContext}
-                        multiplicationDot={multiplicationDot}
-                        divisionKey={divisionKey}
-                        selectedPage={selectedPage}
-                    />
-                )}
+                <Tabbar
+                    items={availableTabs}
+                    selectedItem={selectedPage}
+                    onSelectItem={(tabbarItem: TabbarItemType) => {
+                        setSelectedPage(tabbarItem);
+                    }}
+                    onClickClose={
+                        showDismiss ? () => onClickKey("DISMISS") : undefined
+                    }
+                />
+
+                <View style={styles.keypadInnerContainer}>
+                    <View
+                        style={[styles.keypadGrid, gridStyle]}
+                        role="grid"
+                        tabIndex={0}
+                        aria-label="Keypad"
+                    >
+                        {selectedPage === "Fractions" && (
+                            <FractionsPage
+                                onClickKey={onClickKey}
+                                cursorContext={cursorContext}
+                            />
+                        )}
+                        {selectedPage === "Numbers" && (
+                            <NumbersPage onClickKey={onClickKey} />
+                        )}
+                        {selectedPage === "Extras" && (
+                            <ExtrasPage
+                                onClickKey={onClickKey}
+                                extraKeys={extraKeys}
+                            />
+                        )}
+                        {selectedPage === "Operators" && (
+                            <OperatorsPage
+                                onClickKey={onClickKey}
+                                preAlgebra={preAlgebra}
+                                logarithms={logarithms}
+                                basicRelations={basicRelations}
+                                advancedRelations={advancedRelations}
+                            />
+                        )}
+                        {selectedPage === "Geometry" && (
+                            <GeometryPage onClickKey={onClickKey} />
+                        )}
+                        {!fractionsOnly && (
+                            <SharedKeys
+                                onClickKey={onClickKey}
+                                cursorContext={cursorContext}
+                                multiplicationDot={multiplicationDot}
+                                divisionKey={divisionKey}
+                                selectedPage={selectedPage}
+                            />
+                        )}
+                    </View>
+                    {expandedView && <NavigationPad onClickKey={onClickKey} />}
+                </View>
             </View>
         </View>
     );
@@ -188,13 +203,28 @@ export default function Keypad(props: Props) {
 Keypad.defaultProps = defaultProps;
 
 const styles = StyleSheet.create({
-    tabbar: {
+    keypadOuterContainer: {
+        display: "flex",
+        alignItems: "center",
+    },
+    wrapper: {
         background: Color.white,
     },
+    expandedWrapper: {
+        borderWidth: "1px 1px 0 1px",
+        borderColor: Color.offBlack32,
+        maxWidth: expandedViewThreshold,
+        borderRadius: "3px 3px 0 0",
+    },
+    keypadInnerContainer: {
+        display: "flex",
+        flexDirection: "row",
+        backgroundColor: "#DBDCDD",
+    },
     keypadGrid: {
         display: "grid",
         gridTemplateRows: "repeat(4, 1fr)",
-        backgroundColor: "#DBDCDD",
+        flex: 1,
     },
     expressionGrid: {
         gridTemplateColumns: "repeat(6, 1fr)",

package/src/components/keypad/mobile-keypad.tsx

@@ -4,6 +4,8 @@ import ReactDOM from "react-dom";
 
 import {View} from "../../fake-react-native-web/index";
 
+import {expandedViewThreshold} from "./utils";
+
 import type Key from "../../data/keys";
 import type {
     Cursor,
@@ -34,18 +36,68 @@ type Props = {
 
 type State = {
     active: boolean;
+    containerWidth: number;
     keypadConfig?: KeypadConfiguration;
     keyHandler?: KeyHandler;
     cursor?: Cursor;
 };
 
 class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
+    _containerRef = React.createRef<HTMLDivElement>();
+    _containerResizeObserver: ResizeObserver | null = null;
+    _throttleResize = false;
     hasMounted = false;
 
     state: State = {
+        containerWidth: 0,
         active: false,
     };
 
+    componentDidMount() {
+        this._resize();
+
+        window.addEventListener("resize", this._throttleResizeHandler);
+        window.addEventListener(
+            "orientationchange",
+            this._throttleResizeHandler,
+        );
+
+        this._containerResizeObserver = new ResizeObserver(
+            this._throttleResizeHandler,
+        );
+
+        if (this._containerRef.current) {
+            this._containerResizeObserver.observe(this._containerRef.current);
+        }
+    }
+
+    componentWillUnMount() {
+        window.removeEventListener("resize", this._throttleResizeHandler);
+        window.removeEventListener(
+            "orientationchange",
+            this._throttleResizeHandler,
+        );
+        this._containerResizeObserver?.disconnect();
+    }
+
+    _resize = () => {
+        const containerWidth = this._containerRef.current?.clientWidth || 0;
+        this.setState({containerWidth});
+    };
+
+    _throttleResizeHandler = () => {
+        if (this._throttleResize) {
+            return;
+        }
+
+        this._throttleResize = true;
+
+        setTimeout(() => {
+            this._resize();
+            this._throttleResize = false;
+        }, 100);
+    };
+
     activate: () => void = () => {
         this.setState({active: true});
     };
@@ -98,7 +150,7 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
 
     render(): React.ReactNode {
         const {style} = this.props;
-        const {active, cursor, keypadConfig} = this.state;
+        const {active, containerWidth, cursor, keypadConfig} = this.state;
 
         const containerStyle = [
             // internal styles
@@ -113,6 +165,7 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
         return (
             <View
                 style={containerStyle}
+                forwardRef={this._containerRef}
                 ref={(element) => {
                     if (!this.hasMounted && element) {
                         // TODO(matthewc)[LC-1081]: clean up this weird
@@ -150,6 +203,7 @@ class MobileKeypad extends React.Component<Props, State> implements KeypadAPI {
                     logarithms={isExpression}
                     basicRelations={isExpression}
                     advancedRelations={isExpression}
+                    expandedView={containerWidth > expandedViewThreshold}
                     showDismiss
                 />
             </View>

package/src/components/keypad/navigation-button.tsx

@@ -0,0 +1,127 @@
+import Clickable from "@khanacademy/wonder-blocks-clickable";
+import Color from "@khanacademy/wonder-blocks-color";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+
+import ButtonAsset from "./button-assets";
+
+import type Key from "../../data/keys";
+import type {KeyConfig, ClickKeyCallback} from "../../types";
+
+export type KeypadButtonProps = {
+    // 0 indexed [x, y] position in keypad CSS grid
+    coord: readonly [number, number];
+    keyConfig: KeyConfig;
+    onClickKey: ClickKeyCallback;
+};
+
+function getStyles(key: Key) {
+    switch (key) {
+        case "UP":
+            return styles.up;
+        case "RIGHT":
+            return styles.right;
+        case "DOWN":
+            return styles.down;
+        case "LEFT":
+            return styles.left;
+        default:
+            throw new Error(`Invalid key: ${key}`);
+    }
+}
+
+export default function NavigationButton({
+    coord,
+    keyConfig,
+    onClickKey,
+}: KeypadButtonProps) {
+    const key = keyConfig.id;
+    const directionalStyles = getStyles(key);
+
+    return (
+        <View
+            style={{
+                gridColumn: coord[0] + 1,
+                gridRow: coord[1] + 1,
+            }}
+        >
+            <Clickable
+                onClick={(e) => onClickKey(keyConfig.id, e)}
+                style={styles.clickable}
+                aria-label={keyConfig.ariaLabel}
+            >
+                {({hovered, focused, pressed}) => (
+                    <View style={styles.outerBoxBase}>
+                        <View
+                            style={[
+                                styles.base,
+                                directionalStyles,
+                                hovered && styles.hovered,
+                                focused && styles.focused,
+                                pressed && styles.pressed,
+                            ]}
+                        >
+                            <ButtonAsset id={keyConfig.id} />
+                        </View>
+                    </View>
+                )}
+            </Clickable>
+        </View>
+    );
+}
+
+const borderRadiusPx = 4;
+
+const styles = StyleSheet.create({
+    clickable: {
+        width: "100%",
+        height: "100%",
+
+        ":focus": {
+            outline: `none`,
+        },
+    },
+    outerBoxBase: {
+        height: "100%",
+        width: "100%",
+    },
+    base: {
+        boxShadow: `0px 1px 0px ${Color.offBlack32}`,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        background: Color.white,
+        borderWidth: 2,
+        borderColor: Color.white,
+    },
+    up: {
+        borderTopLeftRadius: borderRadiusPx,
+        borderTopRightRadius: borderRadiusPx,
+    },
+    right: {
+        borderTopRightRadius: borderRadiusPx,
+        borderBottomRightRadius: borderRadiusPx,
+    },
+    down: {
+        borderBottomLeftRadius: borderRadiusPx,
+        borderBottomRightRadius: borderRadiusPx,
+    },
+    left: {
+        borderTopLeftRadius: borderRadiusPx,
+        borderBottomLeftRadius: borderRadiusPx,
+    },
+    hovered: {
+        borderColor: Color.blue,
+        boxShadow: "none",
+    },
+    focused: {
+        borderColor: Color.blue,
+        boxShadow: "none",
+    },
+    pressed: {
+        border: "2px solid #1B50B3",
+        background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color.white}`,
+        boxShadow: "none",
+    },
+});

package/src/components/keypad/navigation-pad.stories.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+
+import NavigationPad from "./navigation-pad";
+
+export default {
+    title: "MathInput v2 Navigation Pad",
+    parameters: {
+        backgrounds: {
+            default: "light background",
+            values: [
+                // We want a slightly darker default bg so that we can
+                // see the top of the keypad when it is open
+                {name: "light background", value: "lightgrey", default: true},
+            ],
+        },
+    },
+};
+
+export function basic() {
+    return (
+        <div style={{padding: 50}}>
+            <NavigationPad onClickKey={() => {}} />
+        </div>
+    );
+}