@khanacademy/wonder-blocks-cell 3.4.3 → 3.4.5

package/src/components/internal/cell-core.tsx

@@ -1,356 +0,0 @@
-import * as React from "react";
-import {StyleSheet} from "aphrodite";
-
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-
-import Clickable from "@khanacademy/wonder-blocks-clickable";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {Strut} from "@khanacademy/wonder-blocks-layout";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
-
-import {CellMeasurements, getHorizontalRuleStyles} from "./common";
-
-import type {CellProps} from "../../util/types";
-
-type LeftAccessoryProps = {
-    leftAccessory?: CellProps["leftAccessory"];
-    leftAccessoryStyle?: CellProps["leftAccessoryStyle"];
-    disabled?: CellProps["disabled"];
-};
-
-/**
- * Left Accessories can be defined using WB components such as Icon, IconButton,
- * or it can even be used for a custom node/component if needed.
- */
-const LeftAccessory = ({
-    leftAccessory,
-    leftAccessoryStyle,
-    disabled,
-}: LeftAccessoryProps): React.ReactElement => {
-    if (!leftAccessory) {
-        // @ts-expect-error [FEI-5019] - TS2322 - Type 'null' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
-        return null;
-    }
-
-    return (
-        <>
-            <View
-                style={[
-                    styles.accessory,
-                    disabled && styles.accessoryDisabled,
-                    {...leftAccessoryStyle},
-                ]}
-            >
-                {leftAccessory}
-            </View>
-            <Strut size={CellMeasurements.accessoryHorizontalSpacing} />
-        </>
-    );
-};
-
-type RightAccessoryProps = {
-    rightAccessory?: CellProps["rightAccessory"];
-    rightAccessoryStyle?: CellProps["rightAccessoryStyle"];
-    active?: CellProps["active"];
-    disabled?: CellProps["disabled"];
-};
-
-/**
- * Right Accessories can be defined using WB components such as Icon,
- * IconButton, or it can even be used for a custom node/component if needed.
- */
-const RightAccessory = ({
-    rightAccessory,
-    rightAccessoryStyle,
-    active,
-    disabled,
-}: RightAccessoryProps): React.ReactElement => {
-    if (!rightAccessory) {
-        // @ts-expect-error [FEI-5019] - TS2322 - Type 'null' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>>'.
-        return null;
-    }
-
-    return (
-        <>
-            <Strut size={CellMeasurements.accessoryHorizontalSpacing} />
-            <View
-                style={[
-                    styles.accessory,
-                    styles.accessoryRight,
-                    disabled && styles.accessoryDisabled,
-                    {...rightAccessoryStyle},
-                    active && styles.accessoryActive,
-                ]}
-            >
-                {rightAccessory}
-            </View>
-        </>
-    );
-};
-
-/**
- * The Cell inner wrapper is the main container for the Cell contents. It
- * doesn't include the optional Clickable wrapper, which is added by the Cell
- * component.
- */
-function CellInner(props: CellCoreProps): React.ReactElement {
-    const {
-        active,
-        children,
-        disabled,
-        horizontalRule = "inset",
-        contentStyle = undefined,
-        leftAccessory = undefined,
-        leftAccessoryStyle = undefined,
-        rightAccessory = undefined,
-        rightAccessoryStyle = undefined,
-        style,
-        testId,
-        innerStyle,
-    } = props;
-    const horizontalRuleStyles = getHorizontalRuleStyles(horizontalRule);
-
-    return (
-        <View
-            style={[
-                styles.innerWrapper,
-                innerStyle,
-                // custom styles
-                style,
-                horizontalRuleStyles,
-            ]}
-        >
-            {/* Left accessory */}
-            <LeftAccessory
-                leftAccessory={leftAccessory}
-                leftAccessoryStyle={leftAccessoryStyle}
-                disabled={disabled}
-            />
-
-            {/* Cell contents */}
-            <View style={[styles.content, contentStyle]} testId={testId}>
-                {children}
-            </View>
-
-            {/* Right accessory */}
-            <RightAccessory
-                rightAccessory={rightAccessory}
-                rightAccessoryStyle={rightAccessoryStyle}
-                active={active}
-                disabled={disabled}
-            />
-        </View>
-    );
-}
-
-type CellCoreProps = Partial<Omit<CellProps, "title">> & {
-    /**
-     * The content of the cell.
-     */
-    children: React.ReactNode;
-    /**
-     * The optional styles applied to the inner wrapper.
-     *
-     * Note: This is not intended to be used externally, only used directly
-     * within the package scope.
-     */
-    innerStyle?: StyleType;
-};
-
-/**
- * CellCore is the base cell wrapper. It's used as the skeleton/layout that is
- * used by CompactCell and DetailCell (and any other variants).
- *
- * Both variants share how they render their accessories, and the main
- * responsibility of this component is to render the contents that are passed in
- * (using the `children` prop).
- */
-const CellCore = (props: CellCoreProps): React.ReactElement => {
-    const {
-        active,
-        disabled,
-        href,
-        onClick,
-        "aria-label": ariaLabel,
-        "aria-selected": ariaSelected,
-        "aria-checked": ariaChecked,
-        target,
-        role,
-        rootStyle,
-    } = props;
-
-    // Pressable cell.
-    if (onClick || href) {
-        return (
-            // @ts-expect-error - TypeScript doesn't know that `target` can only be defined when `href` is.
-            <Clickable
-                disabled={disabled}
-                onClick={onClick}
-                href={href}
-                hideDefaultFocusRing={true}
-                aria-label={ariaLabel ? ariaLabel : undefined}
-                aria-selected={ariaSelected ? ariaSelected : undefined}
-                aria-checked={ariaChecked}
-                role={role}
-                target={target}
-                style={[
-                    styles.wrapper,
-                    styles.clickable,
-                    rootStyle,
-                    active && styles.active,
-                    disabled && styles.disabled,
-                ]}
-                aria-current={active ? "true" : undefined}
-            >
-                {() => <CellInner {...props} />}
-            </Clickable>
-        );
-    }
-
-    // No click event attached, so just render the cell without a Clickable
-    // wrapper.
-    return (
-        <View
-            style={[styles.wrapper, rootStyle, active && styles.active]}
-            aria-current={active ? "true" : undefined}
-            role={role}
-        >
-            <CellInner {...props} />
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    wrapper: {
-        background: color.white,
-        color: color.offBlack,
-        display: "flex",
-        minHeight: CellMeasurements.cellMinHeight,
-        textAlign: "left",
-        width: "100%",
-    },
-
-    innerWrapper: {
-        minHeight: CellMeasurements.cellMinHeight,
-        padding: `${CellMeasurements.cellPadding.paddingVertical}px ${CellMeasurements.cellPadding.paddingHorizontal}px`,
-        flexDirection: "row",
-        flex: 1,
-
-        // Reduce the padding of the innerWrapper when the focus ring is
-        // visible.
-        ":focus-visible": {
-            padding: `${CellMeasurements.cellPadding.paddingVertical - 2}px ${
-                CellMeasurements.cellPadding.paddingHorizontal - 2
-            }px`,
-        },
-    },
-
-    content: {
-        alignSelf: "center",
-        // Expand the content to fill the available space.
-        flex: 1,
-        overflowWrap: "break-word",
-    },
-
-    accessory: {
-        // Use content width by default.
-        minWidth: "auto",
-        // Horizontal alignment of the accessory.
-        alignItems: "center",
-        // Vertical alignment.
-        alignSelf: "center",
-    },
-
-    accessoryRight: {
-        // The right accessory will have this color by default. Unless the
-        // accessory element overrides that color internally.
-        color: color.offBlack64,
-    },
-
-    /**
-     * States
-     */
-    clickable: {
-        outline: "none",
-        /**
-         * States
-         */
-        // disabled
-        // NOTE: We use `aria-disabled` instead of `disabled` because we want
-        // to allow the cell to be focusable even when it's disabled.
-        [":hover[aria-disabled=true]" as any]: {
-            cursor: "not-allowed",
-        },
-
-        // focus (only visible when using keyboard navigation)
-        ":focus-visible": {
-            borderRadius: spacing.xxxSmall_4,
-            // To hide the internal corners of the cell.
-            overflow: "hidden",
-            // To display the focus ring based on the cell's border.
-            position: "relative",
-        },
-        // NOTE: We use a pseudo element to draw the focus ring because we can't
-        // use `outline` since it conflicts with different layout contexts (e.g.
-        // `View` elements add their own z-index).
-        [":focus-visible:after" as any]: {
-            content: "''",
-            // Since we are using a pseudo element, we need to manually
-            // calculate the width/height and use absolute position to
-            // prevent other elements from being shifted around.
-            position: "absolute",
-            top: 0,
-            left: 0,
-            zIndex: 1,
-            // We remove the border width from the width/height to ensure
-            // that the focus ring is drawn inside the cell.
-            width: `calc(100% - ${spacing.xxxSmall_4}px)`,
-            height: `calc(100% - ${spacing.xxxSmall_4}px)`,
-            border: `${spacing.xxxxSmall_2}px solid ${color.blue}`,
-            borderRadius: spacing.xxxSmall_4,
-        },
-
-        // hover + enabled
-        [":hover[aria-disabled=false]" as any]: {
-            background: color.offBlack8,
-        },
-
-        // pressed + enabled
-        [":active[aria-disabled=false]" as any]: {
-            background: color.offBlack16,
-        },
-    },
-
-    active: {
-        background: color.fadedBlue8,
-        color: color.blue,
-
-        [":hover[aria-disabled=false]" as any]: {
-            background: color.fadedBlue16,
-        },
-
-        [":active[aria-disabled=false]" as any]: {
-            background: color.fadedBlue24,
-        },
-    },
-
-    disabled: {
-        color: color.offBlack32,
-        ":focus-visible": {
-            // Prevent the focus ring from being displayed when the cell is
-            // disabled.
-            outline: "none",
-        },
-    },
-
-    accessoryActive: {
-        color: color.blue,
-    },
-
-    accessoryDisabled: {
-        color: color.offBlack,
-        opacity: 0.32,
-    },
-});
-
-export default CellCore;

package/src/components/internal/common.ts

@@ -1,74 +0,0 @@
-import {StyleSheet} from "aphrodite";
-
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
-
-import type {StyleType} from "@khanacademy/wonder-blocks-core";
-import type {HorizontalRuleVariant} from "../../util/types";
-
-export const CellMeasurements = {
-    cellMinHeight: spacing.xxLarge_48,
-
-    /**
-     * The cell wrapper's gap.
-     */
-    cellPadding: {
-        paddingVertical: spacing.small_12,
-        paddingHorizontal: spacing.medium_16,
-    },
-
-    /**
-     * The DetailCell wrapper's gap.
-     */
-    detailCellPadding: {
-        paddingVertical: spacing.medium_16,
-        paddingHorizontal: spacing.medium_16,
-    },
-
-    /**
-     * The horizontal spacing between the left and right accessory.
-     */
-    accessoryHorizontalSpacing: spacing.medium_16,
-} as const;
-
-/**
- * Gets the horizontalRule style based on the variant.
- * @param {HorizontalRuleVariant} horizontalRule The variant of the horizontal
- * rule.
- * @returns A styled horizontal rule.
- */
-export const getHorizontalRuleStyles = (
-    horizontalRule: HorizontalRuleVariant,
-): StyleType => {
-    switch (horizontalRule) {
-        case "inset":
-            return [styles.horizontalRule, styles.horizontalRuleInset];
-        case "full-width":
-            return styles.horizontalRule;
-        case "none":
-            return {};
-    }
-};
-
-const styles = StyleSheet.create({
-    horizontalRule: {
-        position: "relative",
-        ":after": {
-            width: "100%",
-            content: "''",
-            position: "absolute",
-            // align to the bottom of the cell
-            bottom: 0,
-            // align border to the right of the cell
-            right: 0,
-            height: spacing.xxxxSmall_2,
-            boxShadow: `inset 0px -1px 0px ${color.offBlack8}`,
-        },
-    },
-
-    horizontalRuleInset: {
-        ":after": {
-            // Inset doesn't include the left padding of the cell.
-            width: `calc(100% - ${CellMeasurements.cellPadding.paddingHorizontal}px)`,
-        },
-    },
-});

package/src/index.ts

@@ -1,4 +0,0 @@
-import CompactCell from "./components/compact-cell";
-import DetailCell from "./components/detail-cell";
-
-export {CompactCell, DetailCell};

package/src/util/types.ts

@@ -1,156 +0,0 @@
-import * as React from "react";
-
-import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
-import type {Typography} from "@khanacademy/wonder-blocks-typography";
-import {ClickableRole} from "@khanacademy/wonder-blocks-clickable";
-
-/**
- * A set of values that can be used to configure the horizontal rule appearance.
- */
-export type HorizontalRuleVariant = "full-width" | "inset" | "none";
-
-/**
- * An element or component that represents an accessory within a cell.
- */
-type Accessory = React.ReactNode;
-
-/**
- * A subset of CSS Properties to allow overriding some of the default styles set
- * on the accessory wrapper (loosely based on StyleType).
- */
-export type AccessoryStyle = {
-    /**
-     * A subset of valid Spacing values.
-     */
-    minWidth?: 16 | 24 | 32 | 48;
-    /**
-     * To vertically align the accessory.
-     */
-    alignSelf?: "flex-start" | "flex-end" | "center";
-    /**
-     * To horizontally align the accessory.
-     */
-    alignItems?: "flex-start" | "flex-end" | "center";
-};
-
-/**
- * A union that allows using  plain text or WB Typography elements.
- */
-export type TypographyText =
-    | string
-    | React.ReactElement<React.ComponentProps<Typography>>;
-
-/**
- * Common properties for all cells.
- */
-export type CellProps = {
-    /**
-     * The title / main content of the cell. You can either provide a string or
-     * a Typography component. If a string is provided, typography defaults to
-     * LabelLarge.
-     */
-    title: TypographyText;
-    /**
-     * Optional custom styles applied to the content wrapper. For
-     * example, it can be used to set a custom minWidth or a custom
-     * alignment.
-     */
-    contentStyle?: AccessoryStyle;
-    /**
-     * If provided, this adds a left accessory to the cell. Left
-     * Accessories can be defined using WB components such as Icon,
-     * IconButton, or it can even be used for a custom node/component if
-     * needed. What ever is passed in will occupy the "LeftAccessory” area
-     * of the Cell.
-     */
-    leftAccessory?: Accessory;
-    /**
-     * Optional custom styles applied to the leftAccessory wrapper. For
-     * example, it can be used to set a custom minWidth or a custom
-     * alignment.
-     *
-     * NOTE: leftAccessoryStyle can only be used if leftAccessory is set.
-     */
-    leftAccessoryStyle?: AccessoryStyle;
-    /**
-     * If provided, this adds a right accessory to the cell. Right
-     * Accessories can be defined using WB components such as Icon,
-     * IconButton, or it can even be used for a custom node/component if
-     * needed. What ever is passed in will occupy the “RightAccessory”
-     * area of the Cell.
-     */
-    rightAccessory?: Accessory;
-    /**
-     * Optional custom styles applied to the rightAccessory wrapper. For
-     * example, it can be used to set a custom minWidth or a custom
-     * alignment.
-     *
-     * NOTE: rightAccessoryStyle can only be used if rightAccessory is
-     * set.
-     */
-    rightAccessoryStyle?: AccessoryStyle;
-    /**
-     * Adds a horizontal rule at the bottom of the cell that can be used to
-     * separate cells within groups such as lists. Defaults to `inset`.
-     */
-    horizontalRule?: HorizontalRuleVariant;
-
-    /**
-     * A custom role for the cell.
-     */
-    role?: ClickableRole;
-    /**
-     * Optional custom styles applied to the top node.
-     *
-     * _NOTE:_ This is the top node of the cell, not the cell container. If
-     * possible, try to use this prop carefully and use `style` instead.
-     */
-    rootStyle?: StyleType;
-    /**
-     * Optional custom styles applied to the cell container.
-     */
-    style?: StyleType;
-    /**
-     * Optional test ID for e2e testing.
-     */
-    testId?: string;
-    /**
-     * Called when the cell is clicked.
-     *
-     * If not provided, the Cell can’t be hovered and/or pressed (highlighted on
-     * hover).
-     */
-    onClick?: (e: React.SyntheticEvent) => unknown;
-    /**
-     * Whether the cell is active (or currently selected).
-     */
-    active?: boolean;
-    /**
-     * Whether the cell is disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Used to announce the cell's content to screen readers.
-     */
-    "aria-label"?: string;
-    /**
-     * Used to indicate the current element is selected.
-     */
-    "aria-selected"?: AriaProps["aria-selected"];
-    /**
-     * Used to indicate the current item is checked.
-     */
-    "aria-checked"?: AriaProps["aria-checked"];
-    /**
-     * Optinal href which Cell should direct to, uses client-side routing
-     * by default if react-router is present.
-     */
-    href?: string;
-    /**
-     * A target destination window for a link to open in. Should only be used
-     * when `href` is specified.
-     *
-     * TODO(WB-1262): only allow this prop when `href` is also set.t
-     */
-    target?: "_blank";
-};

package/tsconfig-build.json

@@ -1,16 +0,0 @@
-{
-    "exclude": ["dist"],
-    "extends": "../tsconfig-shared.json",
-    "compilerOptions": {
-        "outDir": "./dist",
-        "rootDir": "src",
-    },
-    "references": [
-        {"path": "../wonder-blocks-clickable/tsconfig-build.json"},
-        {"path": "../wonder-blocks-core/tsconfig-build.json"},
-        {"path": "../wonder-blocks-icon/tsconfig-build.json"},
-        {"path": "../wonder-blocks-layout/tsconfig-build.json"},
-        {"path": "../wonder-blocks-tokens/tsconfig-build.json"},
-        {"path": "../wonder-blocks-typography/tsconfig-build.json"},
-    ]
-}