@khanacademy/wonder-blocks-switch 3.1.8 → 3.2.1

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @khanacademy/wonder-blocks-switch
 
+## 3.2.1
+
+### Patch Changes
+
+- Updated dependencies [2656fd4]
+- Updated dependencies [6018552]
+- Updated dependencies [7bbf311]
+- Updated dependencies [7f79943]
+- Updated dependencies [7bbf311]
+- Updated dependencies [7f79943]
+    - @khanacademy/wonder-blocks-tokens@9.0.0
+    - @khanacademy/wonder-blocks-theming@3.3.0
+    - @khanacademy/wonder-blocks-styles@0.2.5
+
+## 3.2.0
+
+### Minor Changes
+
+- fab761d: - Removes `khanmigo` theme as it is no longer used.
+    - Adds `className` prop to `Switch` component to allow custom styling of the switch in Storybook (Chromatic), and to prepare for a future CSS modules integration.
+    - Modifies the focus outline to use the global `focusStyles.focus` style from `wonder-blocks-styles`.
+
 ## 3.1.8
 
 ### Patch Changes

package/dist/components/switch.d.ts

@@ -28,5 +28,9 @@ declare const Switch: React.ForwardRefExoticComponent<Pick<AriaProps, "aria-labe
      * Test ID used for e2e testing.
      */
     testId?: string;
+    /**
+     * Adds CSS classes to the component.
+     */
+    className?: string;
 } & React.RefAttributes<HTMLInputElement>>;
 export default Switch;

package/dist/es/index.js

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { useId } from 'react';
 import { StyleSheet } from 'aphrodite';
 import { addStyle, View } from '@khanacademy/wonder-blocks-core';
-import { mergeTheme, createThemeContext, ThemeSwitcherContext, useScopedTheme, useStyles } from '@khanacademy/wonder-blocks-theming';
-import * as tokens from '@khanacademy/wonder-blocks-tokens';
+import { createThemeContext, ThemeSwitcherContext, useScopedTheme, useStyles } from '@khanacademy/wonder-blocks-theming';
+import { focusStyles } from '@khanacademy/wonder-blocks-styles';
 import { semanticColor, color, border, spacing } from '@khanacademy/wonder-blocks-tokens';
 
 const action = semanticColor.action.secondary.progressive;
-const theme$1 = {
+const theme = {
   color: {
     bg: {
       switch: {
@@ -29,9 +29,6 @@ const theme$1 = {
         off: action.default.border,
         disabledOff: semanticColor.icon.disabled
       }
-    },
-    outline: {
-      default: semanticColor.focus.outer
     }
   },
   border: {
@@ -51,9 +48,6 @@ const theme$1 = {
       small: spacing.xxxxSmall_2,
       medium: 20,
       large: 40
-    },
-    offset: {
-      default: 1
     }
   },
   spacing: {
@@ -70,44 +64,15 @@ const theme$1 = {
   }
 };
 
-const theme = mergeTheme(theme$1, {
-  color: {
-    bg: {
-      switch: {
-        off: tokens.color.white50,
-        disabledOff: tokens.color.white32,
-        activeOff: tokens.color.white64,
-        disabledOn: tokens.color.white32,
-        on: tokens.color.white,
-        activeOn: tokens.color.offWhite
-      },
-      slider: {
-        off: tokens.color.eggplant,
-        on: tokens.color.eggplant
-      },
-      icon: {
-        on: tokens.color.white,
-        off: tokens.color.white,
-        disabledOff: tokens.color.white50,
-        disabledOn: tokens.color.white50
-      }
-    },
-    outline: {
-      default: tokens.color.white
-    }
-  }
-});
-
 const themes = {
-  default: theme$1,
-  khanmigo: theme
+  default: theme
 };
-const SwitchThemeContext = createThemeContext(theme$1);
+const SwitchThemeContext = createThemeContext(theme);
 function ThemedSwitch(props) {
   const currentTheme = React.useContext(ThemeSwitcherContext);
-  const theme = themes[currentTheme] || theme$1;
+  const theme$1 = themes[currentTheme] || theme;
   return React.createElement(SwitchThemeContext.Provider, {
-    value: theme
+    value: theme$1
   }, props.children);
 }
 
@@ -119,6 +84,7 @@ const SwitchCore = React.forwardRef(function SwitchCore(props, ref) {
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy,
     checked,
+    className,
     disabled = false,
     icon,
     id,
@@ -150,6 +116,7 @@ const SwitchCore = React.forwardRef(function SwitchCore(props, ref) {
   return React.createElement(View, {
     onClick: handleClick,
     style: [sharedStyles.switch, stateStyles.switch, disabled && sharedStyles.disabled],
+    className: className,
     testId: testId
   }, React.createElement(StyledInput, {
     "aria-describedby": ariaDescribedBy,
@@ -179,23 +146,17 @@ const themedSharedStyles = theme => ({
     width: theme.size.width.large,
     borderRadius: theme.border.radius.small,
     flexShrink: 0,
-    ":hover": {
-      outlineOffset: theme.size.offset.default
-    },
-    ":focus-within": {
-      outline: `solid ${theme.size.width.small}px ${theme.color.outline.default}`,
-      outlineOffset: theme.size.offset.default
-    }
+    ":focus-within": focusStyles.focus[":focus-visible"]
   },
   disabled: {
     cursor: "not-allowed",
     ":hover": {
       outline: "none"
     },
-    ":focus-within": {
-      outline: `solid ${theme.size.width.small}px ${theme.color.outline.default}`,
-      outlineOffset: theme.size.offset.default
-    }
+    ":active": {
+      outline: "none"
+    },
+    ":focus-within": focusStyles.focus[":focus-visible"]
   },
   slider: {
     position: "absolute",
@@ -215,6 +176,7 @@ const themedSharedStyles = theme => ({
     transition: theme.spacing.transform.transition
   }
 });
+const focusStylesObject = focusStyles.focus[":focus-visible"];
 const styles = {};
 const _generateStyles = (checked, clickable, disabled, theme, themeName) => {
   const checkedStyle = `${checked}-${clickable}-${disabled}-${themeName}`;
@@ -224,17 +186,19 @@ const _generateStyles = (checked, clickable, disabled, theme, themeName) => {
   let newStyles = {};
   const sharedSwitchStyles = {
     cursor: clickable ? "pointer" : "auto",
-    ":hover": {
-      outline: clickable ? `solid ${theme.size.width.small}px ${theme.color.outline.default}` : "none"
-    }
+    ":hover": _extends({}, focusStylesObject, {
+      outline: clickable ? focusStylesObject.outline : "none"
+    })
   };
   if (checked) {
     newStyles = {
       switch: _extends({
         backgroundColor: disabled ? theme.color.bg.switch.disabledOn : theme.color.bg.switch.on,
-        ":active": {
+        ":active": _extends({
           backgroundColor: !disabled && clickable ? theme.color.bg.switch.activeOn : undefined
-        }
+        }, focusStylesObject, {
+          outline: clickable ? focusStylesObject.outline : "none"
+        })
       }, sharedSwitchStyles),
       slider: {
         transform: theme.spacing.transform.default
@@ -248,9 +212,11 @@ const _generateStyles = (checked, clickable, disabled, theme, themeName) => {
     newStyles = {
       switch: _extends({
         backgroundColor: disabled ? theme.color.bg.switch.disabledOff : theme.color.bg.switch.off,
-        ":active": {
+        ":active": _extends({
           backgroundColor: !disabled && clickable ? theme.color.bg.switch.activeOff : undefined
-        }
+        }, focusStylesObject, {
+          outline: clickable ? focusStylesObject.outline : "none"
+        })
       }, sharedSwitchStyles),
       slider: {
         backgroundColor: theme.color.bg.slider.off

package/dist/index.js

@@ -5,7 +5,8 @@ var React = require('react');
 var aphrodite = require('aphrodite');
 var wonderBlocksCore = require('@khanacademy/wonder-blocks-core');
 var wonderBlocksTheming = require('@khanacademy/wonder-blocks-theming');
-var tokens = require('@khanacademy/wonder-blocks-tokens');
+var wonderBlocksStyles = require('@khanacademy/wonder-blocks-styles');
+var wonderBlocksTokens = require('@khanacademy/wonder-blocks-tokens');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,109 +30,73 @@ function _interopNamespace(e) {
 
 var _extends__default = /*#__PURE__*/_interopDefaultLegacy(_extends);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
-var tokens__namespace = /*#__PURE__*/_interopNamespace(tokens);
 
-const action = tokens.semanticColor.action.secondary.progressive;
-const theme$1 = {
+const action = wonderBlocksTokens.semanticColor.action.secondary.progressive;
+const theme = {
   color: {
     bg: {
       switch: {
         off: action.default.border,
-        disabledOff: tokens.semanticColor.action.primary.disabled.background,
-        activeOff: tokens.color.fadedOffBlack64,
+        disabledOff: wonderBlocksTokens.semanticColor.action.primary.disabled.background,
+        activeOff: wonderBlocksTokens.color.fadedOffBlack64,
         on: action.default.foreground,
         disabledOn: action.press.background,
         activeOn: action.press.foreground
       },
       slider: {
-        on: tokens.semanticColor.icon.inverse,
-        off: tokens.semanticColor.icon.inverse
+        on: wonderBlocksTokens.semanticColor.icon.inverse,
+        off: wonderBlocksTokens.semanticColor.icon.inverse
       },
       icon: {
         on: action.default.foreground,
         disabledOn: action.press.background,
         off: action.default.border,
-        disabledOff: tokens.semanticColor.icon.disabled
+        disabledOff: wonderBlocksTokens.semanticColor.icon.disabled
       }
-    },
-    outline: {
-      default: tokens.semanticColor.focus.outer
     }
   },
   border: {
     radius: {
-      small: tokens.border.radius.radius_120,
-      full: tokens.border.radius.radius_full
+      small: wonderBlocksTokens.border.radius.radius_120,
+      full: wonderBlocksTokens.border.radius.radius_full
     }
   },
   size: {
     height: {
       none: 0,
       medium: 20,
-      large: tokens.spacing.large_24
+      large: wonderBlocksTokens.spacing.large_24
     },
     width: {
       none: 0,
-      small: tokens.spacing.xxxxSmall_2,
+      small: wonderBlocksTokens.spacing.xxxxSmall_2,
       medium: 20,
       large: 40
-    },
-    offset: {
-      default: 1
     }
   },
   spacing: {
     slider: {
-      position: tokens.spacing.xxxxSmall_2
+      position: wonderBlocksTokens.spacing.xxxxSmall_2
     },
     icon: {
-      position: tokens.spacing.xxxSmall_4
+      position: wonderBlocksTokens.spacing.xxxSmall_4
     },
     transform: {
-      default: `translateX(${tokens.spacing.medium_16}px)`,
+      default: `translateX(${wonderBlocksTokens.spacing.medium_16}px)`,
       transition: "transform 0.15s ease-in-out"
     }
   }
 };
 
-const theme = wonderBlocksTheming.mergeTheme(theme$1, {
-  color: {
-    bg: {
-      switch: {
-        off: tokens__namespace.color.white50,
-        disabledOff: tokens__namespace.color.white32,
-        activeOff: tokens__namespace.color.white64,
-        disabledOn: tokens__namespace.color.white32,
-        on: tokens__namespace.color.white,
-        activeOn: tokens__namespace.color.offWhite
-      },
-      slider: {
-        off: tokens__namespace.color.eggplant,
-        on: tokens__namespace.color.eggplant
-      },
-      icon: {
-        on: tokens__namespace.color.white,
-        off: tokens__namespace.color.white,
-        disabledOff: tokens__namespace.color.white50,
-        disabledOn: tokens__namespace.color.white50
-      }
-    },
-    outline: {
-      default: tokens__namespace.color.white
-    }
-  }
-});
-
 const themes = {
-  default: theme$1,
-  khanmigo: theme
+  default: theme
 };
-const SwitchThemeContext = wonderBlocksTheming.createThemeContext(theme$1);
+const SwitchThemeContext = wonderBlocksTheming.createThemeContext(theme);
 function ThemedSwitch(props) {
   const currentTheme = React__namespace.useContext(wonderBlocksTheming.ThemeSwitcherContext);
-  const theme = themes[currentTheme] || theme$1;
+  const theme$1 = themes[currentTheme] || theme;
   return React__namespace.createElement(SwitchThemeContext.Provider, {
-    value: theme
+    value: theme$1
   }, props.children);
 }
 
@@ -143,6 +108,7 @@ const SwitchCore = React__namespace.forwardRef(function SwitchCore(props, ref) {
     "aria-labelledby": ariaLabelledBy,
     "aria-describedby": ariaDescribedBy,
     checked,
+    className,
     disabled = false,
     icon,
     id,
@@ -174,6 +140,7 @@ const SwitchCore = React__namespace.forwardRef(function SwitchCore(props, ref) {
   return React__namespace.createElement(wonderBlocksCore.View, {
     onClick: handleClick,
     style: [sharedStyles.switch, stateStyles.switch, disabled && sharedStyles.disabled],
+    className: className,
     testId: testId
   }, React__namespace.createElement(StyledInput, {
     "aria-describedby": ariaDescribedBy,
@@ -203,23 +170,17 @@ const themedSharedStyles = theme => ({
     width: theme.size.width.large,
     borderRadius: theme.border.radius.small,
     flexShrink: 0,
-    ":hover": {
-      outlineOffset: theme.size.offset.default
-    },
-    ":focus-within": {
-      outline: `solid ${theme.size.width.small}px ${theme.color.outline.default}`,
-      outlineOffset: theme.size.offset.default
-    }
+    ":focus-within": wonderBlocksStyles.focusStyles.focus[":focus-visible"]
   },
   disabled: {
     cursor: "not-allowed",
     ":hover": {
       outline: "none"
     },
-    ":focus-within": {
-      outline: `solid ${theme.size.width.small}px ${theme.color.outline.default}`,
-      outlineOffset: theme.size.offset.default
-    }
+    ":active": {
+      outline: "none"
+    },
+    ":focus-within": wonderBlocksStyles.focusStyles.focus[":focus-visible"]
   },
   slider: {
     position: "absolute",
@@ -239,6 +200,7 @@ const themedSharedStyles = theme => ({
     transition: theme.spacing.transform.transition
   }
 });
+const focusStylesObject = wonderBlocksStyles.focusStyles.focus[":focus-visible"];
 const styles = {};
 const _generateStyles = (checked, clickable, disabled, theme, themeName) => {
   const checkedStyle = `${checked}-${clickable}-${disabled}-${themeName}`;
@@ -248,17 +210,19 @@ const _generateStyles = (checked, clickable, disabled, theme, themeName) => {
   let newStyles = {};
   const sharedSwitchStyles = {
     cursor: clickable ? "pointer" : "auto",
-    ":hover": {
-      outline: clickable ? `solid ${theme.size.width.small}px ${theme.color.outline.default}` : "none"
-    }
+    ":hover": _extends__default["default"]({}, focusStylesObject, {
+      outline: clickable ? focusStylesObject.outline : "none"
+    })
   };
   if (checked) {
     newStyles = {
       switch: _extends__default["default"]({
         backgroundColor: disabled ? theme.color.bg.switch.disabledOn : theme.color.bg.switch.on,
-        ":active": {
+        ":active": _extends__default["default"]({
           backgroundColor: !disabled && clickable ? theme.color.bg.switch.activeOn : undefined
-        }
+        }, focusStylesObject, {
+          outline: clickable ? focusStylesObject.outline : "none"
+        })
       }, sharedSwitchStyles),
       slider: {
         transform: theme.spacing.transform.default
@@ -272,9 +236,11 @@ const _generateStyles = (checked, clickable, disabled, theme, themeName) => {
     newStyles = {
       switch: _extends__default["default"]({
         backgroundColor: disabled ? theme.color.bg.switch.disabledOff : theme.color.bg.switch.off,
-        ":active": {
+        ":active": _extends__default["default"]({
           backgroundColor: !disabled && clickable ? theme.color.bg.switch.activeOff : undefined
-        }
+        }, focusStylesObject, {
+          outline: clickable ? focusStylesObject.outline : "none"
+        })
       }, sharedSwitchStyles),
       slider: {
         backgroundColor: theme.color.bg.slider.off

package/dist/themes/default.d.ts

@@ -20,9 +20,6 @@ declare const theme: {
                 disabledOff: string;
             };
         };
-        outline: {
-            default: string;
-        };
     };
     border: {
         radius: {
@@ -42,9 +39,6 @@ declare const theme: {
             medium: number;
             large: number;
         };
-        offset: {
-            default: number;
-        };
     };
     spacing: {
         slider: {

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

@@ -30,9 +30,6 @@ export declare const SwitchThemeContext: React.Context<{
                 disabledOff: string;
             };
         };
-        outline: {
-            default: string;
-        };
     };
     border: {
         radius: {
@@ -52,9 +49,6 @@ export declare const SwitchThemeContext: React.Context<{
             medium: number;
             large: number;
         };
-        offset: {
-            default: number;
-        };
     };
     spacing: {
         slider: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-switch",
-  "version": "3.1.8",
+  "version": "3.2.1",
   "design": "v1",
   "description": "Switch components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -15,8 +15,9 @@
     "@babel/runtime": "^7.24.5",
     "@khanacademy/wonder-blocks-core": "12.2.1",
     "@khanacademy/wonder-blocks-icon": "5.1.3",
-    "@khanacademy/wonder-blocks-theming": "3.2.1",
-    "@khanacademy/wonder-blocks-tokens": "8.0.0"
+    "@khanacademy/wonder-blocks-styles": "0.2.5",
+    "@khanacademy/wonder-blocks-theming": "3.3.0",
+    "@khanacademy/wonder-blocks-tokens": "9.0.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",

package/dist/themes/khanmigo.d.ts

@@ -1,69 +0,0 @@
-/**
- * The overrides for khanmigo theme for a switch.
- *
- * NOTE: Leaving `color` tokens as is for now, as this theme is not currently
- * used in webapp. Also, this most likely change once we migrate to the new
- * theme.
- */
-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: string;
-            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;