@khanacademy/wonder-blocks-switch 1.0.5 → 1.1.0

package/dist/index.js

@@ -3,10 +3,7 @@
 var React = require('react');
 var aphrodite = require('aphrodite');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
-var Color = require('@khanacademy/wonder-blocks-color');
-var Spacing = require('@khanacademy/wonder-blocks-spacing');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+var wonderBlocksTheming = require('@khanacademy/wonder-blocks-theming');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -27,8 +24,6 @@ function _interopNamespace(e) {
 }
 
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var Color__default = /*#__PURE__*/_interopDefaultLegacy(Color);
-var Spacing__default = /*#__PURE__*/_interopDefaultLegacy(Spacing);
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -45,9 +40,105 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+const theme$1 = {
+  color: {
+    bg: {
+      switch: {
+        off: wonderBlocksTheming.tokens.color.offBlack50,
+        disabledOff: wonderBlocksTheming.tokens.color.offBlack32,
+        activeOff: wonderBlocksTheming.tokens.color.offBlack64,
+        on: wonderBlocksTheming.tokens.color.blue,
+        disabledOn: wonderBlocksTheming.tokens.color.fadedBlue,
+        activeOn: wonderBlocksTheming.tokens.color.activeBlue
+      },
+      slider: {
+        on: wonderBlocksTheming.tokens.color.white,
+        off: wonderBlocksTheming.tokens.color.white
+      },
+      icon: {
+        on: wonderBlocksTheming.tokens.color.blue,
+        disabledOn: wonderBlocksTheming.tokens.color.fadedBlue,
+        off: wonderBlocksTheming.tokens.color.offBlack50,
+        disabledOff: wonderBlocksTheming.tokens.color.offBlack32
+      }
+    },
+    outline: {
+      default: wonderBlocksTheming.tokens.color.blue
+    }
+  },
+  border: {
+    radius: {
+      small: wonderBlocksTheming.tokens.spacing.small_12,
+      full: wonderBlocksTheming.tokens.border.radius.full
+    }
+  },
+  size: {
+    height: {
+      none: 0,
+      medium: 20,
+      large: wonderBlocksTheming.tokens.spacing.large_24
+    },
+    width: {
+      none: 0,
+      small: wonderBlocksTheming.tokens.spacing.xxxxSmall_2,
+      medium: 20,
+      large: 40
+    },
+    offset: {
+      default: 1
+    }
+  },
+  spacing: {
+    slider: {
+      position: wonderBlocksTheming.tokens.spacing.xxxxSmall_2
+    },
+    icon: {
+      position: wonderBlocksTheming.tokens.spacing.xxxSmall_4
+    },
+    transform: {
+      default: `translateX(${wonderBlocksTheming.tokens.spacing.medium_16}px)`,
+      transition: "transform 0.15s ease-in-out"
+    }
+  }
+};
+
+const theme = wonderBlocksTheming.mergeTheme(theme$1, {
+  color: {
+    bg: {
+      switch: {
+        off: wonderBlocksTheming.tokens.color.white50,
+        disabledOff: wonderBlocksTheming.tokens.color.white32,
+        activeOff: wonderBlocksTheming.tokens.color.white50,
+        disabledOn: wonderBlocksTheming.tokens.color.activeBlue
+      },
+      slider: {
+        off: wonderBlocksTheming.tokens.color.eggplant
+      },
+      icon: {
+        off: wonderBlocksTheming.tokens.color.white,
+        disabledOff: wonderBlocksTheming.tokens.color.white50,
+        disabledOn: wonderBlocksTheming.tokens.color.activeBlue
+      }
+    }
+  }
+});
+
+const themes = {
+  default: theme$1,
+  khanmigo: theme
+};
+const SwitchThemeContext = wonderBlocksTheming.createThemeContext(theme$1);
+function ThemedSwitch(props) {
+  const currentTheme = React__namespace.useContext(wonderBlocksTheming.ThemeSwitcherContext);
+  const theme = themes[currentTheme] || theme$1;
+  return React__namespace.createElement(SwitchThemeContext.Provider, {
+    value: theme
+  }, props.children);
+}
+
 const StyledSpan = wonderBlocksCore.addStyle("span");
 const StyledInput = wonderBlocksCore.addStyle("input");
-const Switch = React__namespace.forwardRef(function Switch(props, ref) {
+const SwitchCore = React__namespace.forwardRef(function SwitchCore(props, ref) {
   const {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
@@ -59,64 +150,67 @@ const Switch = React__namespace.forwardRef(function Switch(props, ref) {
     onChange,
     testId
   } = props;
+  const ids = wonderBlocksCore.useUniqueIdWithMock("labeled-field");
+  const uniqueId = id != null ? id : ids.get("labeled-field-id");
+  const {
+    theme,
+    themeName
+  } = wonderBlocksTheming.useScopedTheme(SwitchThemeContext);
+  const sharedStyles = wonderBlocksTheming.useStyles(themedSharedStyles, theme);
   const handleClick = () => {
     if (!disabled && onChange) {
       onChange(!checked);
     }
   };
   const handleChange = () => {};
-  const stateStyles = _generateStyles(checked, disabled, onChange !== undefined);
+  const stateStyles = _generateStyles(checked, onChange !== undefined, disabled, theme, themeName);
   let styledIcon;
   if (icon) {
-    styledIcon = React__namespace.cloneElement(icon, _extends({
+    styledIcon = React__namespace.cloneElement(icon, {
       size: "small",
       style: [sharedStyles.icon, stateStyles.icon],
       "aria-hidden": true
-    }, icon.props));
+    });
   }
-  return React__namespace.createElement(wonderBlocksCore.UniqueIDProvider, {
-    mockOnFirstRender: true,
-    scope: "switch"
-  }, ids => {
-    const uniqueId = id || ids.get("switch");
-    return React__namespace.createElement(wonderBlocksCore.View, {
-      onClick: handleClick,
-      style: [sharedStyles.switch, stateStyles.switch, disabled && sharedStyles.disabled],
-      testId: testId
-    }, React__namespace.createElement(StyledInput, {
-      "aria-describedby": ariaDescribedBy,
-      "aria-label": ariaLabel,
-      "aria-labelledby": ariaLabelledBy,
-      checked: checked,
-      disabled: disabled,
-      id: uniqueId,
-      onChange: handleChange,
-      ref: ref,
-      role: "switch",
-      style: sharedStyles.hidden,
-      type: "checkbox"
-    }), icon && styledIcon, React__namespace.createElement(StyledSpan, {
-      style: [sharedStyles.slider, stateStyles.slider]
-    }));
-  });
+  return React__namespace.createElement(wonderBlocksCore.View, {
+    onClick: handleClick,
+    style: [sharedStyles.switch, stateStyles.switch, disabled && sharedStyles.disabled],
+    testId: testId
+  }, React__namespace.createElement(StyledInput, {
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    checked: checked,
+    disabled: disabled,
+    id: uniqueId,
+    onChange: handleChange,
+    ref: ref,
+    role: "switch",
+    style: sharedStyles.hidden,
+    type: "checkbox"
+  }), icon && styledIcon, React__namespace.createElement(StyledSpan, {
+    style: [sharedStyles.slider, stateStyles.slider]
+  }));
 });
-const sharedStyles = aphrodite.StyleSheet.create({
+const themedSharedStyles = theme => ({
   hidden: {
     opacity: 0,
-    height: 0,
-    width: 0
+    height: theme.size.height.none,
+    width: theme.size.width.none
   },
   switch: {
     display: "inline-flex",
-    height: Spacing__default["default"].large_24,
-    width: `calc(${Spacing__default["default"].xLarge_32}px + ${Spacing__default["default"].xSmall_8}px)`,
-    borderRadius: Spacing__default["default"].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
     },
-    transition: "background-color 0.15s ease-in-out"
+    ":focus-within": {
+      outline: `solid ${theme.size.width.small}px ${theme.color.outline.default}`,
+      outlineOffset: theme.size.offset.default
+    }
   },
   disabled: {
     cursor: "auto",
@@ -126,78 +220,75 @@ const sharedStyles = aphrodite.StyleSheet.create({
   },
   slider: {
     position: "absolute",
-    top: Spacing__default["default"].xxxxSmall_2,
-    left: Spacing__default["default"].xxxxSmall_2,
-    height: `calc(${Spacing__default["default"].medium_16}px + ${Spacing__default["default"].xxxSmall_4}px)`,
-    width: `calc(${Spacing__default["default"].medium_16}px + ${Spacing__default["default"].xxxSmall_4}px)`,
-    borderRadius: "50%",
-    backgroundColor: Color__default["default"].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__default["default"].xxxSmall_4,
-    left: Spacing__default["default"].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 = {};
-const _generateStyles = (checked, disabled, clickable) => {
-  const checkedStyle = `${checked}-${disabled}-${clickable}`;
+const _generateStyles = (checked, clickable, disabled, theme, themeName) => {
+  const checkedStyle = `${checked}-${clickable}-${disabled}-${themeName}`;
   if (styles[checkedStyle]) {
     return styles[checkedStyle];
   }
   let newStyles = {};
-  const disabledBlue = Color.mix(Color__default["default"].blue, Color__default["default"].offBlack50);
-  const activeBlue = Color.mix(Color__default["default"].offBlack32, Color__default["default"].blue);
+  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__default["default"].blue,
+      switch: _extends({
+        backgroundColor: disabled ? theme.color.bg.switch.disabledOn : theme.color.bg.switch.on,
         ":active": {
-          backgroundColor: !disabled && clickable && activeBlue
-        },
-        ":focus-within": {
-          outline: `solid ${Spacing__default["default"].xxxxSmall_2}px ${Color__default["default"].blue}`,
-          outlineOffset: 1
-        },
-        ":hover": {
-          outline: clickable ? `solid ${Spacing__default["default"].xxxxSmall_2}px ${Color__default["default"].blue}` : "none"
+          backgroundColor: !disabled && clickable ? theme.color.bg.switch.activeOn : undefined
         }
-      },
+      }, sharedSwitchStyles),
       slider: {
-        transform: `translateX(${Spacing__default["default"].medium_16}px)`
+        transform: theme.spacing.transform.default
       },
       icon: {
-        color: disabled ? disabledBlue : Color__default["default"].blue,
-        transform: `translateX(${Spacing__default["default"].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__default["default"].offBlack32 : Color__default["default"].offBlack50,
+      switch: _extends({
+        backgroundColor: disabled ? theme.color.bg.switch.disabledOff : theme.color.bg.switch.off,
         ":active": {
-          backgroundColor: !disabled && clickable && Color__default["default"].offBlack64
-        },
-        ":focus-within": {
-          outline: `solid ${Spacing__default["default"].xxxxSmall_2}px ${Color__default["default"].blue}`,
-          outlineOffset: 1
-        },
-        ":hover": {
-          outline: clickable ? `solid ${Spacing__default["default"].xxxxSmall_2}px ${Color__default["default"].blue}` : "none"
+          backgroundColor: !disabled && clickable ? theme.color.bg.switch.activeOff : undefined
         }
+      }, sharedSwitchStyles),
+      slider: {
+        backgroundColor: theme.color.bg.slider.off
       },
       icon: {
-        color: disabled ? Color__default["default"].offBlack32 : Color__default["default"].offBlack50
+        color: disabled ? theme.color.bg.icon.disabledOff : theme.color.bg.icon.off
       }
     };
   }
   styles[checkedStyle] = aphrodite.StyleSheet.create(newStyles);
   return styles[checkedStyle];
 };
+const Switch = React__namespace.forwardRef(function Switch(props, ref) {
+  return React__namespace.createElement(ThemedSwitch, null, React__namespace.createElement(SwitchCore, _extends({}, props, {
+    ref: ref
+  })));
+});
 Switch.displayName = "Switch";
 
 module.exports = Switch;

package/dist/themes/default.d.ts

@@ -0,0 +1,62 @@
+declare const theme: {
+    color: {
+        bg: {
+            switch: {
+                off: string;
+                disabledOff: string;
+                activeOff: string;
+                on: string;
+                disabledOn: string;
+                activeOn: string;
+            };
+            slider: {
+                on: string;
+                off: string;
+            };
+            icon: {
+                on: string;
+                disabledOn: string;
+                off: string;
+                disabledOff: string;
+            };
+        };
+        outline: {
+            default: string;
+        };
+    };
+    border: {
+        radius: {
+            small: 12;
+            full: string;
+        };
+    };
+    size: {
+        height: {
+            none: number;
+            medium: number;
+            large: 24;
+        };
+        width: {
+            none: number;
+            small: 2;
+            medium: number;
+            large: number;
+        };
+        offset: {
+            default: number;
+        };
+    };
+    spacing: {
+        slider: {
+            position: 2;
+        };
+        icon: {
+            position: 4;
+        };
+        transform: {
+            default: string;
+            transition: string;
+        };
+    };
+};
+export default theme;

package/dist/themes/khanmigo.d.ts

@@ -0,0 +1,65 @@
+/**
+ * The overrides for khanmigo theme for a switch.
+ */
+declare const theme: {
+    color: {
+        bg: {
+            switch: {
+                off: string;
+                disabledOff: string;
+                activeOff: string;
+                on: string;
+                disabledOn: string;
+                activeOn: string;
+            };
+            slider: {
+                on: string;
+                off: string;
+            };
+            icon: {
+                on: string;
+                disabledOn: string;
+                off: string;
+                disabledOff: string;
+            };
+        };
+        outline: {
+            default: string;
+        };
+    };
+    border: {
+        radius: {
+            small: 12;
+            full: string;
+        };
+    };
+    size: {
+        height: {
+            none: number;
+            medium: number;
+            large: 24;
+        };
+        width: {
+            none: number;
+            small: 2;
+            medium: number;
+            large: number;
+        };
+        offset: {
+            default: number;
+        };
+    };
+    spacing: {
+        slider: {
+            position: 2;
+        };
+        icon: {
+            position: 4;
+        };
+        transform: {
+            default: string;
+            transition: string;
+        };
+    };
+};
+export default theme;

package/dist/themes/themed-switch.d.ts

@@ -0,0 +1,80 @@
+import * as React from "react";
+import defaultTheme from "./default";
+type Props = {
+    children: React.ReactNode;
+};
+export type SwitchThemeContract = typeof defaultTheme;
+/**
+ * The context that provides the theme to the Switch component.
+ * This is generally consumed via the `useScopedTheme` hook.
+ */
+export declare const SwitchThemeContext: React.Context<{
+    color: {
+        bg: {
+            switch: {
+                off: string;
+                disabledOff: string;
+                activeOff: string;
+                on: string;
+                disabledOn: string;
+                activeOn: string;
+            };
+            slider: {
+                /**
+                 * The context that provides the theme to the Switch component.
+                 * This is generally consumed via the `useScopedTheme` hook.
+                 */
+                on: string;
+                off: string;
+            };
+            icon: {
+                on: string;
+                disabledOn: string;
+                off: string;
+                disabledOff: string;
+            };
+        };
+        outline: {
+            default: string;
+        };
+    };
+    border: {
+        radius: {
+            small: 12;
+            full: string;
+        };
+    };
+    size: {
+        height: {
+            none: number;
+            medium: number;
+            large: 24;
+        };
+        width: {
+            none: number;
+            small: 2;
+            medium: number;
+            large: number;
+        };
+        offset: {
+            default: number;
+        };
+    };
+    spacing: {
+        slider: {
+            position: 2;
+        };
+        icon: {
+            position: 4;
+        };
+        transform: {
+            default: string;
+            transition: string;
+        };
+    };
+}>;
+/**
+ * ThemedSwitch is a component that provides a theme to the <Switch/> component.
+ */
+export default function ThemedSwitch(props: Props): JSX.Element;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-switch",
-  "version": "1.0.5",
+  "version": "1.1.0",
   "design": "v1",
   "description": "Switch components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,10 +16,9 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-color": "^2.0.1",
-    "@khanacademy/wonder-blocks-core": "^6.1.1",
-    "@khanacademy/wonder-blocks-icon": "^2.1.5",
-    "@khanacademy/wonder-blocks-spacing": "^4.0.1"
+    "@khanacademy/wonder-blocks-core": "^6.2.0",
+    "@khanacademy/wonder-blocks-icon": "^2.1.6",
+    "@khanacademy/wonder-blocks-theming": "^1.1.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",

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

@@ -3,6 +3,7 @@ import {render, screen} from "@testing-library/react";
 
 import userEvent from "@testing-library/user-event";
 import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import {RenderStateRoot} from "@khanacademy/wonder-blocks-core";
 import Switch from "../switch";
 
 describe("Switch", () => {
@@ -10,7 +11,11 @@ describe("Switch", () => {
         test("clicking the switch should call onChange", () => {
             // Arrange
             const onChangeSpy = jest.fn();
-            render(<Switch checked={false} onChange={onChangeSpy} />);
+            render(
+                <RenderStateRoot>
+                    <Switch checked={false} onChange={onChangeSpy} />
+                </RenderStateRoot>,
+            );
 
             // Act
             const switchComponent = screen.getByRole("switch");
@@ -24,11 +29,13 @@ describe("Switch", () => {
             // Arrange
             const onChangeSpy = jest.fn();
             render(
-                <Switch
-                    checked={false}
-                    onChange={onChangeSpy}
-                    disabled={true}
-                />,
+                <RenderStateRoot>
+                    <Switch
+                        checked={false}
+                        onChange={onChangeSpy}
+                        disabled={true}
+                    />
+                </RenderStateRoot>,
             );
 
             // Act
@@ -42,7 +49,11 @@ describe("Switch", () => {
         test("pressing the space key should call onChange", () => {
             // Arrange
             const onChangeSpy = jest.fn();
-            render(<Switch checked={false} onChange={onChangeSpy} />);
+            render(
+                <RenderStateRoot>
+                    <Switch checked={false} onChange={onChangeSpy} />
+                </RenderStateRoot>,
+            );
 
             // Act
             const switchComponent = screen.getByRole("switch");
@@ -57,14 +68,14 @@ describe("Switch", () => {
             // Arrange
             const onChangeSpy = jest.fn();
             render(
-                <>
+                <RenderStateRoot>
                     <Switch
                         id="switch-id"
                         checked={false}
                         onChange={onChangeSpy}
                     />
                     <label htmlFor="switch-id">Switch</label>
-                </>,
+                </RenderStateRoot>,
             );
 
             // Act
@@ -80,7 +91,13 @@ describe("Switch", () => {
         it("should set the accessibility attributes accordingly", () => {
             // Arrange
             render(
-                <Switch aria-label="Gravity" checked={true} disabled={true} />,
+                <RenderStateRoot>
+                    <Switch
+                        aria-label="Gravity"
+                        checked={true}
+                        disabled={true}
+                    />
+                </RenderStateRoot>,
             );
 
             // Act
@@ -94,10 +111,12 @@ describe("Switch", () => {
         it("should render an icon if one is provided", () => {
             // Arrange
             render(
-                <Switch
-                    checked={false}
-                    icon={<Icon icon={icons.add} testId="test-icon" />}
-                />,
+                <RenderStateRoot>
+                    <Switch
+                        checked={false}
+                        icon={<Icon icon={icons.add} testId="test-icon" />}
+                    />
+                </RenderStateRoot>,
             );
 
             // Act