@khanacademy/wonder-blocks-switch 1.0.6 → 1.1.0

package/src/components/switch.tsx

@@ -1,22 +1,29 @@
 import * as React from "react";
-import {StyleSheet} from "aphrodite";
+import {CSSProperties, StyleSheet} from "aphrodite";
 
 import {
     AriaProps,
-    UniqueIDProvider,
     View,
     addStyle,
+    useUniqueIdWithMock,
 } from "@khanacademy/wonder-blocks-core";
-import Color, {mix} from "@khanacademy/wonder-blocks-color";
 import Icon from "@khanacademy/wonder-blocks-icon";
-import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {
+    ThemedStylesFn,
+    useScopedTheme,
+    useStyles,
+} from "@khanacademy/wonder-blocks-theming";
+import ThemedSwitch, {
+    SwitchThemeContext,
+    SwitchThemeContract,
+} from "../themes/themed-switch";
 
 type Props = Pick<
     AriaProps,
     "aria-labelledby" | "aria-label" | "aria-describedby"
 > & {
     /**
-     * Whether this compoonent is checked.
+     * Whether this component is checked.
      */
     checked: boolean;
     /**
@@ -46,7 +53,7 @@ type Props = Pick<
 const StyledSpan = addStyle("span");
 const StyledInput = addStyle("input");
 
-const Switch = React.forwardRef(function Switch(
+const SwitchCore = React.forwardRef(function SwitchCore(
     props: Props,
     ref: React.ForwardedRef<HTMLInputElement>,
 ) {
@@ -62,6 +69,12 @@ const Switch = React.forwardRef(function Switch(
         testId,
     } = props;
 
+    const ids = useUniqueIdWithMock("labeled-field");
+    const uniqueId = id ?? ids.get("labeled-field-id");
+
+    const {theme, themeName} = useScopedTheme(SwitchThemeContext);
+    const sharedStyles = useStyles(themedSharedStyles, theme);
+
     const handleClick = () => {
         if (!disabled && onChange) {
             onChange(!checked);
@@ -71,8 +84,10 @@ const Switch = React.forwardRef(function Switch(
 
     const stateStyles = _generateStyles(
         checked,
-        disabled,
         onChange !== undefined,
+        disabled,
+        theme,
+        themeName,
     );
 
     let styledIcon: React.ReactElement<typeof Icon> | undefined;
@@ -81,70 +96,61 @@ const Switch = React.forwardRef(function Switch(
             size: "small",
             style: [sharedStyles.icon, stateStyles.icon],
             "aria-hidden": true,
-            ...icon.props,
         } as Partial<React.ComponentProps<typeof Icon>>);
     }
 
     return (
-        <UniqueIDProvider mockOnFirstRender={true} scope="switch">
-            {(ids) => {
-                const uniqueId = id || ids.get("switch");
-
-                return (
-                    <View
-                        onClick={handleClick}
-                        style={[
-                            sharedStyles.switch,
-                            stateStyles.switch,
-                            disabled && sharedStyles.disabled,
-                        ]}
-                        testId={testId}
-                    >
-                        <StyledInput
-                            aria-describedby={ariaDescribedBy}
-                            aria-label={ariaLabel}
-                            aria-labelledby={ariaLabelledBy}
-                            checked={checked}
-                            disabled={disabled}
-                            id={uniqueId}
-                            // Need to specify because this is a controlled React component, but we
-                            // handle the clicks on the outer View
-                            onChange={handleChange}
-                            ref={ref}
-                            role="switch"
-                            // Input is visually hidden because we use a view and span to render
-                            // the actual switch. The input is used for accessibility.
-                            style={sharedStyles.hidden}
-                            type="checkbox"
-                        />
-                        {icon && styledIcon}
-                        <StyledSpan
-                            style={[sharedStyles.slider, stateStyles.slider]}
-                        />
-                    </View>
-                );
-            }}
-        </UniqueIDProvider>
+        <View
+            onClick={handleClick}
+            style={[
+                sharedStyles.switch,
+                stateStyles.switch,
+                disabled && sharedStyles.disabled,
+            ]}
+            testId={testId}
+        >
+            <StyledInput
+                aria-describedby={ariaDescribedBy}
+                aria-label={ariaLabel}
+                aria-labelledby={ariaLabelledBy}
+                checked={checked}
+                disabled={disabled}
+                id={uniqueId}
+                // Need to specify because this is a controlled React component, but we
+                // handle the clicks on the outer View
+                onChange={handleChange}
+                ref={ref}
+                role="switch"
+                // Input is visually hidden because we use a view and span to render
+                // the actual switch. The input is used for accessibility.
+                style={sharedStyles.hidden}
+                type="checkbox"
+            />
+            {icon && styledIcon}
+            <StyledSpan style={[sharedStyles.slider, stateStyles.slider]} />
+        </View>
     );
 });
 
-const sharedStyles = StyleSheet.create({
+const themedSharedStyles: ThemedStylesFn<SwitchThemeContract> = (theme) => ({
     hidden: {
         opacity: 0,
-        height: 0,
-        width: 0,
+        height: theme.size.height.none,
+        width: theme.size.width.none,
     },
     switch: {
         display: "inline-flex",
-        height: Spacing.large_24,
-        width: `calc(${Spacing.xLarge_32}px + ${Spacing.xSmall_8}px)`,
-        borderRadius: Spacing.small_12,
+        height: theme.size.height.large,
+        width: theme.size.width.large,
+        borderRadius: theme.border.radius.small,
         flexShrink: 0,
-        cursor: "pointer",
         ":hover": {
-            outlineOffset: 1,
+            outlineOffset: theme.size.offset.default,
+        },
+        ":focus-within": {
+            outline: `solid ${theme.size.width.small}px ${theme.color.outline.default}`,
+            outlineOffset: theme.size.offset.default,
         },
-        transition: "background-color 0.15s ease-in-out",
     },
     disabled: {
         cursor: "auto",
@@ -154,85 +160,92 @@ const sharedStyles = StyleSheet.create({
     },
     slider: {
         position: "absolute",
-        top: Spacing.xxxxSmall_2,
-        left: Spacing.xxxxSmall_2,
-        height: `calc(${Spacing.medium_16}px + ${Spacing.xxxSmall_4}px)`,
-        width: `calc(${Spacing.medium_16}px + ${Spacing.xxxSmall_4}px)`,
-        borderRadius: "50%",
-        backgroundColor: Color.white,
-        transition: "transform 0.15s ease-in-out",
+        top: theme.spacing.slider.position,
+        left: theme.spacing.slider.position,
+        height: theme.size.height.medium,
+        width: theme.size.width.medium,
+        borderRadius: theme.border.radius.full,
+        backgroundColor: theme.color.bg.slider.on,
+        transition: theme.spacing.transform.transition,
     },
     icon: {
         position: "absolute",
-        top: Spacing.xxxSmall_4,
-        left: Spacing.xxxSmall_4,
+        top: theme.spacing.icon.position,
+        left: theme.spacing.icon.position,
         zIndex: 1,
-        transition: "0.15s ease-in-out",
-        transitionProperty: "transform, color",
+        transition: theme.spacing.transform.transition,
     },
 });
 
 const styles: Record<string, any> = {};
 const _generateStyles = (
     checked: boolean,
-    disabled: boolean,
     clickable: boolean,
+    disabled: boolean,
+    theme: SwitchThemeContract,
+    themeName: string,
 ) => {
-    const checkedStyle = `${checked}-${disabled}-${clickable}`;
+    const checkedStyle = `${checked}-${clickable}-${disabled}-${themeName}`;
     // The styles are cached to avoid creating a new object on every render.
     if (styles[checkedStyle]) {
         return styles[checkedStyle];
     }
 
-    let newStyles: Record<string, any> = {};
-
-    const disabledBlue = mix(Color.blue, Color.offBlack50);
-    const activeBlue = mix(Color.offBlack32, Color.blue);
+    let newStyles: Record<string, CSSProperties> = {};
+    const sharedSwitchStyles = {
+        cursor: clickable ? "pointer" : "auto",
+        ":hover": {
+            outline: clickable
+                ? `solid ${theme.size.width.small}px ${theme.color.outline.default}`
+                : "none",
+        },
+    };
 
     if (checked) {
         newStyles = {
             switch: {
-                backgroundColor: disabled ? disabledBlue : Color.blue,
+                backgroundColor: disabled
+                    ? theme.color.bg.switch.disabledOn
+                    : theme.color.bg.switch.on,
                 ":active": {
-                    backgroundColor: !disabled && clickable && activeBlue,
-                },
-                ":focus-within": {
-                    outline: `solid ${Spacing.xxxxSmall_2}px ${Color.blue}`,
-                    outlineOffset: 1,
-                },
-                ":hover": {
-                    outline: clickable
-                        ? `solid ${Spacing.xxxxSmall_2}px ${Color.blue}`
-                        : "none",
+                    backgroundColor:
+                        !disabled && clickable
+                            ? theme.color.bg.switch.activeOn
+                            : undefined,
                 },
+                ...sharedSwitchStyles,
             },
             slider: {
-                transform: `translateX(${Spacing.medium_16}px)`,
+                transform: theme.spacing.transform.default,
             },
             icon: {
-                color: disabled ? disabledBlue : Color.blue,
-                transform: `translateX(${Spacing.medium_16}px)`,
+                color: disabled
+                    ? theme.color.bg.icon.disabledOn
+                    : theme.color.bg.icon.on,
+                transform: theme.spacing.transform.default,
             },
         };
     } else {
         newStyles = {
             switch: {
-                backgroundColor: disabled ? Color.offBlack32 : Color.offBlack50,
+                backgroundColor: disabled
+                    ? theme.color.bg.switch.disabledOff
+                    : theme.color.bg.switch.off,
                 ":active": {
-                    backgroundColor: !disabled && clickable && Color.offBlack64,
-                },
-                ":focus-within": {
-                    outline: `solid ${Spacing.xxxxSmall_2}px ${Color.blue}`,
-                    outlineOffset: 1,
-                },
-                ":hover": {
-                    outline: clickable
-                        ? `solid ${Spacing.xxxxSmall_2}px ${Color.blue}`
-                        : "none",
+                    backgroundColor:
+                        !disabled && clickable
+                            ? theme.color.bg.switch.activeOff
+                            : undefined,
                 },
+                ...sharedSwitchStyles,
+            },
+            slider: {
+                backgroundColor: theme.color.bg.slider.off,
             },
             icon: {
-                color: disabled ? Color.offBlack32 : Color.offBlack50,
+                color: disabled
+                    ? theme.color.bg.icon.disabledOff
+                    : theme.color.bg.icon.off,
             },
         };
     }
@@ -241,6 +254,17 @@ const _generateStyles = (
     return styles[checkedStyle];
 };
 
+const Switch = React.forwardRef(function Switch(
+    props: Props,
+    ref: React.ForwardedRef<HTMLInputElement>,
+) {
+    return (
+        <ThemedSwitch>
+            <SwitchCore {...props} ref={ref} />
+        </ThemedSwitch>
+    );
+});
+
 Switch.displayName = "Switch";
 
 export default Switch;

package/src/themes/default.ts

@@ -0,0 +1,73 @@
+import {tokens} from "@khanacademy/wonder-blocks-theming";
+
+const theme = {
+    color: {
+        bg: {
+            switch: {
+                off: tokens.color.offBlack50,
+                disabledOff: tokens.color.offBlack32,
+                activeOff: tokens.color.offBlack64,
+                on: tokens.color.blue,
+                disabledOn: tokens.color.fadedBlue,
+                activeOn: tokens.color.activeBlue,
+            },
+            slider: {
+                on: tokens.color.white,
+                off: tokens.color.white,
+            },
+            icon: {
+                on: tokens.color.blue,
+                disabledOn: tokens.color.fadedBlue,
+                off: tokens.color.offBlack50,
+                disabledOff: tokens.color.offBlack32,
+            },
+        },
+        outline: {
+            default: tokens.color.blue,
+        },
+    },
+    border: {
+        radius: {
+            // slider
+            small: tokens.spacing.small_12,
+            // switch
+            full: tokens.border.radius.full,
+        },
+    },
+    size: {
+        height: {
+            none: 0,
+            // switch
+            medium: 20,
+            // slider
+            large: tokens.spacing.large_24,
+        },
+        width: {
+            none: 0,
+            small: tokens.spacing.xxxxSmall_2,
+            // NOTE: This token is specific to the Switch component
+            // switch
+            medium: 20,
+            // NOTE: This token is specific to the Switch component
+            // slider
+            large: 40,
+        },
+        offset: {
+            default: 1,
+        },
+    },
+    spacing: {
+        slider: {
+            position: tokens.spacing.xxxxSmall_2,
+        },
+        icon: {
+            position: tokens.spacing.xxxSmall_4,
+        },
+        transform: {
+            default: `translateX(${tokens.spacing.medium_16}px)`,
+            transition: "transform 0.15s ease-in-out",
+        },
+    },
+};
+
+export default theme;

package/src/themes/khanmigo.ts

@@ -0,0 +1,28 @@
+import {mergeTheme, tokens} from "@khanacademy/wonder-blocks-theming";
+import defaultTheme from "./default";
+
+/**
+ * The overrides for khanmigo theme for a switch.
+ */
+const theme = mergeTheme(defaultTheme, {
+    color: {
+        bg: {
+            switch: {
+                off: tokens.color.white50,
+                disabledOff: tokens.color.white32,
+                activeOff: tokens.color.white50,
+                disabledOn: tokens.color.activeBlue,
+            },
+            slider: {
+                off: tokens.color.eggplant,
+            },
+            icon: {
+                off: tokens.color.white,
+                disabledOff: tokens.color.white50,
+                disabledOn: tokens.color.activeBlue,
+            },
+        },
+    },
+});
+
+export default theme;

package/src/themes/themed-switch.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import {
+    createThemeContext,
+    ThemeSwitcherContext,
+} from "@khanacademy/wonder-blocks-theming";
+
+import defaultTheme from "./default";
+import khanmigoTheme from "./khanmigo";
+
+type Props = {
+    children: React.ReactNode;
+};
+
+/**
+ * The themes available to the Switch component.
+ */
+const themes = {
+    default: defaultTheme,
+    khanmigo: khanmigoTheme,
+};
+
+export type SwitchThemeContract = typeof defaultTheme;
+
+/**
+ * The context that provides the theme to the Switch component.
+ * This is generally consumed via the `useScopedTheme` hook.
+ */
+export const SwitchThemeContext = createThemeContext(defaultTheme);
+
+/**
+ * ThemedSwitch is a component that provides a theme to the <Switch/> component.
+ */
+export default function ThemedSwitch(props: Props) {
+    const currentTheme = React.useContext(ThemeSwitcherContext);
+
+    const theme = themes[currentTheme as keyof typeof themes] || defaultTheme;
+    return (
+        <SwitchThemeContext.Provider value={theme}>
+            {props.children}
+        </SwitchThemeContext.Provider>
+    );
+}

package/tsconfig-build.json

@@ -10,5 +10,6 @@
         {"path": "../wonder-blocks-core/tsconfig-build.json"},
         {"path": "../wonder-blocks-icon/tsconfig-build.json"},
         {"path": "../wonder-blocks-spacing/tsconfig-build.json"},
+        {"path": "../wonder-blocks-theming/tsconfig-build.json"},
     ]
 }