@khanacademy/wonder-blocks-switch 1.0.6 → 1.1.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @khanacademy/wonder-blocks-switch
 
+## 1.1.1
+
+### Patch Changes
+
+-   1f263385: Use `aria-disabled` instead of `disabled` for enabling focus on Screen Readers.
+
+## 1.1.0
+
+### Minor Changes
+
+-   fc6cec0b: Add theming to Switch and new color tokens for theming
+
+### Patch Changes
+
+-   Updated dependencies [5725703a]
+-   Updated dependencies [fc6cec0b]
+    -   @khanacademy/wonder-blocks-theming@1.1.0
+
 ## 1.0.6
 
 ### Patch Changes

package/dist/components/switch.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { AriaProps } from "@khanacademy/wonder-blocks-core";
 declare const Switch: React.ForwardRefExoticComponent<Pick<AriaProps, "aria-describedby" | "aria-label" | "aria-labelledby"> & {
     /**
-     * Whether this compoonent is checked.
+     * Whether this component is checked.
      */
     checked: boolean;
     /**

package/dist/es/index.js

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
-import { addStyle, UniqueIDProvider, View } from '@khanacademy/wonder-blocks-core';
-import Color, { mix } from '@khanacademy/wonder-blocks-color';
-import Spacing from '@khanacademy/wonder-blocks-spacing';
+import { addStyle, useUniqueIdWithMock, View } from '@khanacademy/wonder-blocks-core';
+import { tokens, mergeTheme, createThemeContext, ThemeSwitcherContext, useScopedTheme, useStyles } from '@khanacademy/wonder-blocks-theming';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -19,9 +18,105 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+const theme$1 = {
+  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: {
+      small: tokens.spacing.small_12,
+      full: tokens.border.radius.full
+    }
+  },
+  size: {
+    height: {
+      none: 0,
+      medium: 20,
+      large: tokens.spacing.large_24
+    },
+    width: {
+      none: 0,
+      small: tokens.spacing.xxxxSmall_2,
+      medium: 20,
+      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"
+    }
+  }
+};
+
+const theme = mergeTheme(theme$1, {
+  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
+      }
+    }
+  }
+});
+
+const themes = {
+  default: theme$1,
+  khanmigo: theme
+};
+const SwitchThemeContext = createThemeContext(theme$1);
+function ThemedSwitch(props) {
+  const currentTheme = React.useContext(ThemeSwitcherContext);
+  const theme = themes[currentTheme] || theme$1;
+  return React.createElement(SwitchThemeContext.Provider, {
+    value: theme
+  }, props.children);
+}
+
 const StyledSpan = addStyle("span");
 const StyledInput = addStyle("input");
-const Switch = React.forwardRef(function Switch(props, ref) {
+const SwitchCore = React.forwardRef(function SwitchCore(props, ref) {
   const {
     "aria-label": ariaLabel,
     "aria-labelledby": ariaLabelledBy,
@@ -33,64 +128,67 @@ const Switch = React.forwardRef(function Switch(props, ref) {
     onChange,
     testId
   } = props;
+  const ids = useUniqueIdWithMock("labeled-field");
+  const uniqueId = id != null ? id : ids.get("labeled-field-id");
+  const {
+    theme,
+    themeName
+  } = useScopedTheme(SwitchThemeContext);
+  const sharedStyles = 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.cloneElement(icon, _extends({
+    styledIcon = React.cloneElement(icon, {
       size: "small",
       style: [sharedStyles.icon, stateStyles.icon],
       "aria-hidden": true
-    }, icon.props));
+    });
   }
-  return React.createElement(UniqueIDProvider, {
-    mockOnFirstRender: true,
-    scope: "switch"
-  }, ids => {
-    const uniqueId = id || ids.get("switch");
-    return React.createElement(View, {
-      onClick: handleClick,
-      style: [sharedStyles.switch, stateStyles.switch, disabled && sharedStyles.disabled],
-      testId: testId
-    }, React.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.createElement(StyledSpan, {
-      style: [sharedStyles.slider, stateStyles.slider]
-    }));
-  });
+  return React.createElement(View, {
+    onClick: handleClick,
+    style: [sharedStyles.switch, stateStyles.switch, disabled && sharedStyles.disabled],
+    testId: testId
+  }, React.createElement(StyledInput, {
+    "aria-describedby": ariaDescribedBy,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    checked: checked,
+    "aria-disabled": disabled,
+    id: uniqueId,
+    onChange: handleChange,
+    ref: ref,
+    role: "switch",
+    style: sharedStyles.hidden,
+    type: "checkbox"
+  }), icon && styledIcon, React.createElement(StyledSpan, {
+    style: [sharedStyles.slider, stateStyles.slider]
+  }));
 });
-const sharedStyles = 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.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
     },
-    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",
@@ -100,78 +198,75 @@ 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 = {};
-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 = mix(Color.blue, Color.offBlack50);
-  const activeBlue = mix(Color.offBlack32, Color.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.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.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,
+      switch: _extends({
+        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
       }
     };
   }
   styles[checkedStyle] = StyleSheet.create(newStyles);
   return styles[checkedStyle];
 };
+const Switch = React.forwardRef(function Switch(props, ref) {
+  return React.createElement(ThemedSwitch, null, React.createElement(SwitchCore, _extends({}, props, {
+    ref: ref
+  })));
+});
 Switch.displayName = "Switch";
 
 export { Switch as default };