feat: add InputToggle component

quid · Jan 3, 2019 · f050fd3 · f050fd3
1 parent 2ab03b2
commit f050fd3
Show file tree

Hide file tree

Showing 8 changed files with 464 additions and 34 deletions.
diff --git a/packages/react-forms/package.json b/packages/react-forms/package.json
@@ -19,6 +19,7 @@
     "@quid/theme": "^1.11.0",
     "color": "^3.1.0",
     "emotion": "^10.0.5",
+    "nanoid": "^2.0.0",
     "react": "^16.7.0",
     "react-router-dom": "^4.3.1"
   },

diff --git a/packages/react-forms/src/InputText/index.js b/packages/react-forms/src/InputText/index.js
@@ -4,6 +4,7 @@ import { css } from 'emotion';
 import styled from '@emotion/styled/macro';
 import { textStyles, withFallback as wf } from '@quid/theme';
 import InvalidHandler from '../InvalidHandler';
+import { INPUT_ATTRIBUTES, omit, include } from '../utils/inputPropsFilters';
 
 type RenderProp<P> = P => React.Node;
 
@@ -19,22 +20,6 @@ type Props = {
   validationErrorMessage?: string,
 };
 
-const omit = obj => keys =>
-  Object.keys(obj)
-    .filter(key => !keys.includes(key))
-    .reduce((acc, current) => {
-      acc[current] = obj[current];
-      return acc;
-    }, {});
-
-const include = obj => keys =>
-  Object.keys(obj)
-    .filter(key => keys.includes(key))
-    .reduce((acc, current) => {
-      acc[current] = obj[current];
-      return acc;
-    }, {});
-
 // istanbul ignore next
 const mergeRefs = (...refs: Array<any>) => (ref: any) => {
   refs.forEach(resolvableRef => {
@@ -49,24 +34,6 @@ const mergeRefs = (...refs: Array<any>) => (ref: any) => {
 // istanbul ignore next
 const noop = () => undefined;
 
-const INPUT_ATTRIBUTES = [
-  'autoComplete',
-  'autoFocus',
-  'defaultValue',
-  'form',
-  'list',
-  'min',
-  'max',
-  'name',
-  'onChange',
-  'placeholder',
-  'readOnly',
-  'required',
-  'tabIndex',
-  'type',
-  'value',
-];
-
 const HEIGHT = {
   large: 50,
   small: 24,

diff --git a/packages/react-forms/src/InputToggle/InputToggle.md b/packages/react-forms/src/InputToggle/InputToggle.md
@@ -0,0 +1,37 @@
+The `InputToggle` component provides a "checkbox like" element, that looks like
+a physical "switch" or "toggle".
+
+Its' API is identical to the one of the HTML [`input[type=checkbox]`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox).
+
+```js
+<form>
+  <table className="DemoTable">
+    <thead>
+      <tr>
+        <th />
+        <th>Toggles</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>On</td>
+        <td>
+          <InputToggle defaultChecked />
+        </td>
+      </tr>
+      <tr>
+        <td>Off</td>
+        <td>
+          <InputToggle />
+        </td>
+      </tr>
+      <tr>
+        <td>Disabled</td>
+        <td>
+          <InputToggle disabled />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</form>
+```
diff --git a/packages/react-forms/src/InputToggle/__snapshots__/index.test.js.snap b/packages/react-forms/src/InputToggle/__snapshots__/index.test.js.snap
@@ -0,0 +1,227 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders a disabled InputToggle 1`] = `
+.emotion-6 {
+  display: inline-block;
+  position: relative;
+  height: 20px;
+  width: 40px;
+}
+
+.emotion-0 {
+  opacity: 0;
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.emotion-0:focus-visible ~ .emotion-5 {
+  box-shadow: 0 0 2px 2px rgba(27,31,34,0.4);
+}
+
+.emotion-0:checked.emotion-0:focus-visible ~ .emotion-5 {
+  box-shadow: 0 0 2px 2px rgba(0,193,187,0.8);
+}
+
+.emotion-0:checked ~ .emotion-3 {
+  background-color: #00c1bb;
+}
+
+.emotion-0:checked ~ .emotion-5 {
+  -webkit-transform: translateX(20px);
+  -ms-transform: translateX(20px);
+  transform: translateX(20px);
+}
+
+.emotion-0:not(:disabled) ~ .emotion-5:active {
+  width: 20px;
+}
+
+.emotion-0:checked:not(:disabled) ~ .emotion-5:active {
+  margin-left: -4px;
+}
+
+.emotion-2 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 20px;
+  width: 40px;
+  border-radius: 20px;
+  background-color: #C7CCD1;
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  opacity: 0.4;
+}
+
+.emotion-4 {
+  position: absolute;
+  cursor: pointer;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 16px;
+  background-color: #FFFFFF;
+  -webkit-transform: translateX(0px);
+  -ms-transform: translateX(0px);
+  transform: translateX(0px);
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+  cursor: default;
+}
+
+.emotion-4:hover {
+  box-shadow: 0 0 4px rgba(27,31,34,0.8);
+}
+
+.emotion-4:hover {
+  box-shadow: none;
+}
+
+<Container
+  disabled={true}
+>
+  <label
+    className="emotion-6 emotion-7"
+    disabled={true}
+  >
+    <Input
+      disabled={true}
+      id="quid-random-id"
+      type="checkbox"
+    >
+      <input
+        className="emotion-0 emotion-1"
+        disabled={true}
+        id="quid-random-id"
+        type="checkbox"
+      />
+    </Input>
+    <Slider
+      disabled={true}
+    >
+      <div
+        className="emotion-2 emotion-3"
+        disabled={true}
+      />
+    </Slider>
+    <Handle
+      disabled={true}
+      htmlFor="quid-random-id"
+    >
+      <label
+        className="emotion-4 emotion-5"
+        disabled={true}
+        htmlFor="quid-random-id"
+      />
+    </Handle>
+  </label>
+</Container>
+`;
+
+exports[`renders an InputToggle 1`] = `
+.emotion-6 {
+  display: inline-block;
+  position: relative;
+  height: 20px;
+  width: 40px;
+}
+
+.emotion-0 {
+  opacity: 0;
+  position: absolute;
+  width: 0;
+  height: 0;
+  pointer-events: none;
+}
+
+.emotion-0:focus-visible ~ .emotion-5 {
+  box-shadow: 0 0 2px 2px rgba(27,31,34,0.4);
+}
+
+.emotion-0:checked.emotion-0:focus-visible ~ .emotion-5 {
+  box-shadow: 0 0 2px 2px rgba(0,193,187,0.8);
+}
+
+.emotion-0:checked ~ .emotion-3 {
+  background-color: #00c1bb;
+}
+
+.emotion-0:checked ~ .emotion-5 {
+  -webkit-transform: translateX(20px);
+  -ms-transform: translateX(20px);
+  transform: translateX(20px);
+}
+
+.emotion-0:not(:disabled) ~ .emotion-5:active {
+  width: 20px;
+}
+
+.emotion-0:checked:not(:disabled) ~ .emotion-5:active {
+  margin-left: -4px;
+}
+
+.emotion-2 {
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 20px;
+  width: 40px;
+  border-radius: 20px;
+  background-color: #C7CCD1;
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+
+.emotion-4 {
+  position: absolute;
+  cursor: pointer;
+  top: 2px;
+  left: 2px;
+  width: 16px;
+  height: 16px;
+  border-radius: 16px;
+  background-color: #FFFFFF;
+  -webkit-transform: translateX(0px);
+  -ms-transform: translateX(0px);
+  transform: translateX(0px);
+  -webkit-transition: all 0.2s ease-in-out;
+  transition: all 0.2s ease-in-out;
+}
+
+.emotion-4:hover {
+  box-shadow: 0 0 4px rgba(27,31,34,0.8);
+}
+
+<Container>
+  <label
+    className="emotion-6 emotion-7"
+  >
+    <Input
+      id="quid-random-id"
+      type="checkbox"
+    >
+      <input
+        className="emotion-0 emotion-1"
+        id="quid-random-id"
+        type="checkbox"
+      />
+    </Input>
+    <Slider>
+      <div
+        className="emotion-2 emotion-3"
+      />
+    </Slider>
+    <Handle
+      htmlFor="quid-random-id"
+    >
+      <label
+        className="emotion-4 emotion-5"
+        htmlFor="quid-random-id"
+      />
+    </Handle>
+  </label>
+</Container>
+`;