Merge 1da8211 into 038fff3

SparkPost · Feb 21, 2019 · 4d4a775 · 4d4a775
2 parents 038fff3 + 1da8211
commit 4d4a775
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 29 deletions.
diff --git a/packages/matchbox/src/components/Toggle/Toggle.js b/packages/matchbox/src/components/Toggle/Toggle.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 
 import styles from './Toggle.module.scss';
 
@@ -12,6 +13,7 @@ class Toggle extends Component {
       PropTypes.bool,
       PropTypes.string
     ]),
+    compact: PropTypes.bool,
     value: PropTypes.oneOfType([
       PropTypes.bool,
       PropTypes.string
@@ -27,15 +29,23 @@ class Toggle extends Component {
       id,
       value,
       checked,
+      compact,
       disabled,
       onChange,
       onFocus,
       onBlur,
       ...rest
     } = this.props;
 
+    const labelMarkup = compact ? null : (
+      <div className={styles.Labels}>
+        <span>On</span>
+        <span>Off</span>
+      </div>
+    );
+
     return (
-      <label htmlFor={id} className={styles.Toggle}>
+      <label htmlFor={id} className={classnames(styles.Toggle, compact && styles.compact, disabled && styles.disabled)}>
         <input
           id={id}
           value={value}
@@ -48,10 +58,7 @@ class Toggle extends Component {
           type='checkbox'
           {...rest} />
         <span className={styles.Outline}></span>
-        <div className={styles.Labels}>
-          <span>On</span>
-          <span>Off</span>
-        </div>
+        {labelMarkup}
         <span className={styles.Indicator}></span>
       </label>
     );

diff --git a/packages/matchbox/src/components/Toggle/Toggle.module.scss b/packages/matchbox/src/components/Toggle/Toggle.module.scss
@@ -11,13 +11,55 @@
   }
 }
 
+.compact {
+  height: rem(18);
+  width: rem(30);
+
+  .Indicator {
+    top: 3px;
+    left: rem(4);
+    width: rem(11);
+    height: rem(11);
+  }
+
+  .Input:checked ~ .Indicator {
+    transform: translate(rem(11), 0);
+  }
+
+  .Input:focus ~ .Outline,
+  .Input:active ~ .Outline {
+    background: color(gray, 6);
+  }
+
+  .Outline {
+    background: color(gray, 5);
+  }
+
+  .Input:checked ~ .Outline {
+    background: color(green);
+  }
+}
+
+.disabled {
+  opacity: 0.9;
+
+  *, *:hover {
+    cursor: not-allowed;
+  }
+
+  .Labels {
+    span {
+      opacity: 0.4;
+    }
+  }
+}
+
 .Input {
   @include visually-hidden;
 
   &:focus ~ .Outline,
   &:active ~ .Outline {
-    box-shadow: 0 0 0 1px color(blue);
-    border: 1px solid color(blue);
+    box-shadow: 0 0 0 1px white, 0 0 0 3px color(blue);
   }
 
   &:checked {
@@ -26,22 +68,7 @@
     }
 
     & ~ .Outline {
-      background: color(blue);
-    }
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    & ~ .Indicator {
-      background: color(gray, 9);
-      cursor: not-allowed;
-    }
-
-    & ~ .Labels {
-      span {
-        opacity: 0.8;
-        cursor: not-allowed;
-      }
+      background: color(green);
     }
   }
 }
@@ -62,9 +89,9 @@
 .Indicator {
   pointer-events: none;
   position: absolute;
-  top: rem(3);
-  left: rem(3);
-  bottom: rem(3);
+  top: 3px;
+  left: 3px;
+  bottom: 3px;
   width: rem(25);
 
   background: color(gray, 10);
@@ -84,9 +111,10 @@
 
   span {
     position: absolute;
-    top: rem(3);
+    top: 3px;
     font-size: rem(12);
     font-weight: 500;
+    line-height: 2em;
 
     &:first-child {
       left: rem(9);

diff --git a/packages/matchbox/src/components/Toggle/tests/Toggle.test.js b/packages/matchbox/src/components/Toggle/tests/Toggle.test.js
@@ -12,7 +12,8 @@ describe('Toggle', () => {
 
   const testCases = [
     { name: 'checked', props: { checked: true }},
-    { name: 'disabled', props: { disabled: true }}
+    { name: 'disabled', props: { disabled: true }},
+    { name: 'compact', props: { compact: true }}
   ];
 
   cases('renders toggle states', (opts) => {

diff --git a/packages/matchbox/src/components/Toggle/tests/__snapshots__/Toggle.test.js.snap b/packages/matchbox/src/components/Toggle/tests/__snapshots__/Toggle.test.js.snap
@@ -31,9 +31,29 @@ exports[`Toggle renders toggle states checked 1`] = `
 </label>
 `;
 
+exports[`Toggle renders toggle states compact 1`] = `
+<label
+  className="Toggle compact"
+  htmlFor="foo"
+>
+  <input
+    className="Input"
+    id="foo"
+    type="checkbox"
+    value="bar"
+  />
+  <span
+    className="Outline"
+  />
+  <span
+    className="Indicator"
+  />
+</label>
+`;
+
 exports[`Toggle renders toggle states disabled 1`] = `
 <label
-  className="Toggle"
+  className="Toggle disabled"
   htmlFor="foo"
 >
   <input

diff --git a/stories/action/Toggle.stories.js b/stories/action/Toggle.stories.js
@@ -17,4 +17,12 @@ export default storiesOf('Action|Toggle', module)
 
   .add('disabled toggle', withInfo()(() => (
     <Toggle id='id' disabled />
+  )))
+
+  .add('compact toggle', withInfo()(() => (
+    <Toggle id='id' compact />
+  )))
+
+  .add('compact and disabled toggle', withInfo()(() => (
+    <Toggle id='id' checked compact disabled />
   )));