components: Switch (codesandbox#3296)

* add switch component

* bonus: fix grid column types

* weird but temporary

* hard code temporary values

* fix ts

* make console an addon

* add id to switch element

Co-authored-by: Sara Vieira <[email protected]>

Author: siddharthkp

README.md

@@ -252,4 +252,5 @@ Thanks goes to these wonderful people
 
 <!-- markdownlint-enable -->
 <!-- prettier-ignore-end -->
+
 <!-- ALL-CONTRIBUTORS-LIST:END -->

packages/components/src/components/Grid/index.tsx

@@ -21,9 +21,9 @@ export const Grid = styled(Element)<{ columnGap?: number; rowGap?: number }>(
 // start | start + end | start + span | span
 // span + end is also possible but not implemented here
 export const Column = styled(Element)<{
-  start?: number;
-  end?: number;
-  span?: number;
+  start?: number | Array<number>;
+  end?: number | Array<number>;
+  span?: number | Array<number>;
 }>(({ start, end, span }) => {
   const styles: {
     gridColumnStart?: number | Array<number | string>;

packages/components/src/components/Switch/index.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import styled from 'styled-components';
+import css from '@styled-system/css';
+import { Element } from '../Element';
+
+const SwitchBackground = styled.div(
+  css({
+    width: 7,
+    height: 4,
+    backgroundColor: 'switch.background',
+    borderRadius: 'large',
+    position: 'relative',
+  })
+);
+
+const SwitchToggle = styled.span(
+  css({
+    width: 4,
+    height: 4,
+    backgroundColor: 'switch.foregroundOff',
+    borderRadius: '50%',
+    position: 'absolute',
+    left: 0,
+    transition: 'left ease',
+    transitionDuration: theme => theme.speeds[3],
+  })
+);
+
+const SwitchInput = styled.input(
+  css({
+    width: 0,
+    opacity: 0,
+    position: 'absolute',
+  })
+);
+
+const SwitchContainer = styled(Element)(
+  css({
+    'input:checked + [data-component=SwitchBackground]': {
+      backgroundColor: 'switch.foregroundOn',
+    },
+    'input:checked + [data-component=SwitchBackground] [data-component=SwitchToggle]': {
+      left: theme => theme.space[4] - 3,
+    },
+  })
+);
+
+interface ISwitchProps {
+  id: string;
+  on?: boolean;
+  defaultOn?: boolean;
+  onChange?: (event: any) => void;
+}
+
+export const Switch: React.FC<ISwitchProps> = ({
+  id,
+  on,
+  defaultOn,
+  ...props
+}) => {
+  if (!id) {
+    console.warn('Please pass a id corresponding to the htmlFor of its label');
+  }
+
+  return (
+    <SwitchContainer as="label">
+      <SwitchInput
+        type="checkbox"
+        id={id}
+        checked={on}
+        defaultChecked={defaultOn}
+        {...props}
+      />
+      <SwitchBackground data-component="SwitchBackground">
+        <SwitchToggle data-component="SwitchToggle" />
+      </SwitchBackground>
+    </SwitchContainer>
+  );
+};

packages/components/src/components/Switch/switch.stories.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { Switch } from '.';
+
+export default {
+  title: 'components/Switch',
+  component: Switch,
+};
+
+export const Basic = () => <Switch />;
+
+export const defaultOn = () => <Switch defaultOn />;
+
+/* eslint-disable no-console */
+export const onChange = () => <Switch onChange={action('changed')} />;

packages/components/src/utils/polyfill-theme.ts

@@ -47,6 +47,14 @@ const polyfillTheme = vsCodeTheme =>
       // @ts-ignore: The colors totally exist, our typings are incorrect
       hoverBackground: `linear-gradient(0deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2)), ${designLanguage.colors.reds[300]}`,
     },
+    switch: {
+      // @ts-ignore
+      background: designLanguage.colors.grays[800],
+      // @ts-ignore
+      foregroundOff: designLanguage.colors.white,
+      // @ts-ignore
+      foregroundOn: designLanguage.colors.green,
+    },
   });
 
 export default polyfillTheme;