✨ add `Switch component

apollographql · Aug 10, 2020 · 343016f · 343016f
1 parent e0622c3
commit 343016f
Show file tree

Hide file tree

Showing 5 changed files with 437 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -31,6 +31,7 @@ tsconfig.tsbuildinfo
 /Popover
 /shared
 /SpaceKitProvider
+/Switch
 /Table
 /TextField
 /Tooltip

diff --git a/src/Switch/Switch.story.mdx b/src/Switch/Switch.story.mdx
@@ -0,0 +1,167 @@
+import { Wrapper as Switch } from "./switch.story/Wrapper";
+import { Switch as OriginalSwitch } from "../Switch";
+import { colors } from "../colors";
+import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/blocks";
+import noop from "lodash/noop";
+
+<Meta title="Components/Switch" component={OriginalSwitch} />
+
+# Switch
+
+**Switchs** use the same props schema as the underlying library from react-spectrum.
+
+## Uncontrolled
+
+Using the `defaultSelected` props to indicate these components are uncontrolled; meaning their state is not stored externally.
+
+<Canvas>
+  <Story name="Uncontrolled Deselected">
+    <Switch>Deslected</Switch>
+  </Story>
+  <Story name="Uncontrolled Selected">
+    <Switch defaultSelected>Selected</Switch>
+  </Story>
+  <Story name="Uncontrolled Disabled Deselected">
+    <Switch isDisabled>Disabled Deslected</Switch>
+  </Story>
+  <Story name="Uncontrolled Disabled Selected">
+    <Switch isDisabled defaultSelected>
+      Disabled Selected
+    </Switch>
+  </Story>
+</Canvas>
+
+## Themed
+
+### Midnight
+
+<Canvas theme="midnight">
+  <Story name="Midnight Themed Uncontrolled Deselected">
+    <Switch theme="midnight">Deslected</Switch>
+  </Story>
+  <Story name="Midnight Themed Uncontrolled Selected">
+    <Switch theme="midnight" defaultSelected>
+      Selected
+    </Switch>
+  </Story>
+  <Story name="Midnight Themed Uncontrolled Disabled Deselected">
+    <Switch theme="midnight" isDisabled>
+      Disabled Deslected
+    </Switch>
+  </Story>
+  <Story name="Midnight Themed Uncontrolled Disabled Selected">
+    <Switch theme="midnight" isDisabled defaultSelected>
+      Disabled Selected
+    </Switch>
+  </Story>
+</Canvas>
+
+## Controlled
+
+Pass `isSelectded` and `onChange` props to indicate these components are controlled; meaning their state held and controlled externally.
+
+<Canvas>
+  <Story name="Controlled Deselected">
+    <Switch isSelected={false} onChange={noop}>
+      Deslected
+    </Switch>
+  </Story>
+  <Story name="Controlled Selected">
+    <Switch isSelected onChange={noop}>
+      Selected
+    </Switch>
+  </Story>
+  <Story name="Controlled Disabled Deselected">
+    <Switch isDisabled isSelected={false} onChange={noop}>
+      Disabled Deslected
+    </Switch>
+  </Story>
+  <Story name="Controlled Disabled Selected">
+    <Switch isDisabled isSelected onChange={noop}>
+      Disabled Selected
+    </Switch>
+  </Story>
+</Canvas>
+
+## Color
+
+You can customize the color of the checkbox's selected state with the `color` prop
+
+<Canvas>
+  <Story name="Color Deselected">
+    <Switch color={colors.green.base}>Deslected</Switch>
+  </Story>
+  <Story name="Color Selected">
+    <Switch color={colors.green.base} defaultSelected>
+      Selected
+    </Switch>
+  </Story>
+  <Story name="Color Disabled Deselected">
+    <Switch color={colors.green.base} isDisabled>
+      Disabled Deslected
+    </Switch>
+  </Story>
+  <Story name="Color Disabled Selected">
+    <Switch color={colors.green.base} isDisabled defaultSelected>
+      Disabled Selected
+    </Switch>
+  </Story>
+</Canvas>
+
+## Focus
+
+Switchs will show a border when focused from keyboard navigation and not from touches or clicks.
+
+<Canvas>
+  <Story name="Focus Deselected">
+    <Switch isFocusVisible color={colors.green.base}>
+      Deslected
+    </Switch>
+  </Story>
+  <Story name="Focus Selected">
+    <Switch isFocusVisible color={colors.green.base} defaultSelected>
+      Selected
+    </Switch>
+  </Story>
+  <Story name="Focus Disabled Deselected">
+    <Switch isFocusVisible color={colors.green.base} isDisabled>
+      Disabled Deslected
+    </Switch>
+  </Story>
+  <Story name="Focus Disabled Selected">
+    <Switch isFocusVisible color={colors.green.base} isDisabled defaultSelected>
+      Disabled Selected
+    </Switch>
+  </Story>
+</Canvas>
+
+## Size
+
+Switchs support several sizes
+
+### Large
+
+<Canvas>
+  <Story name="Large, Deselected">
+    <Switch size="large">Deslected</Switch>
+  </Story>
+  <Story name="Large, Selected">
+    <Switch size="large" defaultSelected>
+      Selected
+    </Switch>
+  </Story>
+  <Story name="Large, Disabled Deselected">
+    <Switch size="large" isDisabled>
+      Disabled Deslected
+    </Switch>
+  </Story>
+  <Story name="Large, Disabled Selected">
+    <Switch size="large" isDisabled defaultSelected>
+      Disabled Selected
+    </Switch>
+  </Story>
+</Canvas>
+
+## Props
+
+<ArgsTable of="." />
diff --git a/src/Switch/index.tsx b/src/Switch/index.tsx
@@ -0,0 +1,192 @@
+import React from "react";
+import { ClassNames } from "@emotion/core";
+import { getOffsetInPalette } from "../colors/utils/getOffsetInPalette";
+import { ShadedColor, colors } from "../colors";
+import { useFocusRing } from "@react-aria/focus";
+import { useSwitch } from "@react-aria/switch";
+import { useToggleState } from "@react-stately/toggle";
+import { VisuallyHidden } from "@react-aria/visually-hidden";
+import { assertUnreachable } from "../shared/assertUnreachable";
+import { motion } from "framer-motion";
+import { useSpaceKitProvider } from "../SpaceKitProvider";
+import { Label } from "./switch/Label";
+
+type SwitchProps = {
+  /**
+   * `className` to apply to the bounding `label`
+   */
+  className?: string;
+  /**
+   * `style` to apply to the bounding `label`
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * Color to use for the checkbox itself. The check color and the border color
+   * will be automatically calculated.
+   *
+   * @default colors.blue.base
+   */
+  color?: ShadedColor;
+
+  /**
+   * Force the focused styling
+   *
+   * This prop is typed as `never` so you can never legally pass it. This is
+   * intended only for testing because there's no other way to test a focus
+   * ring. The only place we're actually using this is in an `mdx` file, which
+   * doesn't check props with TypeScript.
+   *
+   * There's got to be a better way to do this; I just don't know what it is
+   * :shrug:
+   */
+  isFocusVisible?: never;
+
+  /**
+   * Size to display the toggle at
+   *
+   * @default "normal"
+   */
+  size?: "normal" | "large";
+
+  /**
+   * Show the "ON" or "OFF" textual state
+   *
+   * @default `true`
+   */
+  showTextualState?: boolean;
+
+  theme?: "light" | "midnight";
+} & Parameters<typeof useSwitch>[0] &
+  Parameters<typeof useFocusRing>[0];
+
+export const Switch: React.FC<SwitchProps> & { Label: typeof Label } = ({
+  className,
+  style,
+  color = colors.blue.base,
+  isFocusVisible: isFocusVisibleFromProps,
+  showTextualState = true,
+  size = "normal",
+  theme: propsTheme,
+  ...props
+}) => {
+  const state = useToggleState(props);
+  const ref = React.useRef<HTMLInputElement | null>(null);
+  const { inputProps } = useSwitch(props, state, ref);
+  const {
+    isFocusVisible: isFocusVisibleFromFocusRing,
+    focusProps,
+  } = useFocusRing(props);
+  // FYI: Hooks can't be called conditionally, so we must call the hook and then
+  // use the `||` in the subseuent line instead of combining them.
+  const { theme: providerTheme } = useSpaceKitProvider();
+  const theme = propsTheme || providerTheme;
+
+  const isFocusVisible =
+    (!props.isDisabled && isFocusVisibleFromProps) ||
+    isFocusVisibleFromFocusRing;
+
+  /** Size, in pixels, of the dot that will be the switch */
+  const dotSize =
+    size === "normal" ? 12 : size === "large" ? 18 : assertUnreachable(size);
+  const borderSize =
+    size === "normal" ? 2 : size === "large" ? 3 : assertUnreachable(size);
+
+  return (
+    <ClassNames>
+      {({ css }) => (
+        <Label className={className} style={style}>
+          <VisuallyHidden>
+            <input {...inputProps} {...focusProps} ref={ref} />
+          </VisuallyHidden>
+
+          <div
+            className={css({
+              flex: 1,
+              marginRight: showTextualState
+                ? 12
+                : size === "large"
+                ? 30
+                : size === "normal"
+                ? undefined
+                : assertUnreachable(size),
+            })}
+          >
+            {props.children}
+          </div>
+
+          {showTextualState && (
+            <div
+              aria-hidden
+              className={css({
+                color:
+                  theme === "light"
+                    ? props.isDisabled
+                      ? undefined
+                      : state.isSelected
+                      ? undefined
+                      : colors.grey.base
+                    : theme === "midnight"
+                    ? props.isDisabled
+                      ? undefined
+                      : state.isSelected
+                      ? colors.white
+                      : colors.midnight.lighter
+                    : assertUnreachable(theme),
+                fontWeight: state.isSelected ? 600 : 400,
+                marginRight: 8,
+              })}
+            >
+              {state.isSelected ? "ON" : "OFF"}
+            </div>
+          )}
+
+          <div
+            aria-hidden
+            key={props.isDisabled ? "disabled" : "enabled"}
+            className={css({
+              backgroundColor: state.isSelected
+                ? getOffsetInPalette(props.isDisabled ? 2 : 0, "lighter", color)
+                : props.isDisabled
+                ? colors.silver.dark
+                : colors.grey.light,
+              borderRadius: dotSize / 2 + borderSize,
+              boxShadow: [
+                isFocusVisible && `0 0 0 2px ${colors.blue.lighter}`,
+                !props.isDisabled && "inset 0 0 1px 0 rgba(18, 21, 26, 0.4)",
+              ]
+                // The generic attached to the filter return type will indicate
+                // to TypeScript that we're stripping out all non-strings,
+                // meaning the booleans.
+                .filter((value): value is string => !!value)
+                .join(", "),
+              cursor: !props.isDisabled ? "pointer" : undefined,
+              height: dotSize + borderSize * 2,
+              padding: borderSize,
+              position: "relative",
+              width: (8 / 3) * dotSize,
+            })}
+          >
+            <motion.div
+              animate={{
+                x: state.isSelected ? dotSize + borderSize * 2 : 0,
+              }}
+              initial={false}
+              transition={{ duration: 0.5, type: "tween", ease: "easeOut" }}
+              className={css({
+                backgroundColor: colors.white,
+                borderRadius: "100%",
+                height: dotSize,
+                position: "absolute",
+                top: borderSize,
+                width: dotSize,
+              })}
+            />
+          </div>
+        </Label>
+      )}
+    </ClassNames>
+  );
+};
+
+Switch.Label = Label;