refactor(app): Make toggle components reusable (#1675)

Group toggle button, labeled toggle, and toggle info for resuse in app and robot settings

app/src/components/ConnectPanel/RobotList.js

@@ -8,7 +8,7 @@ import {
 } from '@opentrons/components'
 
 import type {Robot} from '../../robot'
-import ToggleButton from '../ToggleButton'
+import {ToggleButton} from '../toggles'
 import styles from './connect-panel.css'
 
 type ListProps = {

app/src/components/analytics-settings/AnalyticsInfo.js

@@ -1,18 +1,17 @@
 // @flow
 import * as React from 'react'
-
-import styles from './styles.css'
+import {ToggleInfo} from '../toggles'
 
 // TODO(mc, 2018-05-30): "Read full policy" link at end of first paragraph
 export default function AnalyticsInfo () {
   return (
-    <div className={styles.analytics_info}>
+    <ToggleInfo>
       <p>
         Help Opentrons improve its products and services by automatically sending anonymous diagnostic and usage data.
       </p>
       <p>
         This will allow us to learn things such as which features get used the most, which parts of the process are taking longest to complete, and how errors are generated. You can change this setting at any time.
       </p>
-    </div>
+    </ToggleInfo>
   )
 }

app/src/components/analytics-settings/AnalyticsSettingsModal.js

@@ -5,7 +5,6 @@ import {connect} from 'react-redux'
 import {getAnalyticsSeen, setAnalyticsSeen} from '../../analytics'
 
 import {Modal} from '@opentrons/components'
-import ModalTitle from './ModalTitle'
 import ModalButton from './ModalButton'
 import AnalyticsToggle from './AnalyticsToggle'
 import AnalyticsInfo from './AnalyticsInfo'
@@ -36,10 +35,7 @@ function AnalyticsSettingsModal (props: Props) {
   const {setSeen} = props
 
   return (
-    <Modal onCloseClick={setSeen} alertOverlay>
-      <ModalTitle>
-        {TITLE}
-      </ModalTitle>
+    <Modal onCloseClick={setSeen} heading={TITLE} alertOverlay>
       <AnalyticsToggle />
       <AnalyticsInfo />
       <ModalButton onClick={setSeen}>

app/src/components/analytics-settings/AnalyticsToggle.js

@@ -4,7 +4,7 @@ import {connect} from 'react-redux'
 
 import type {State, Dispatch} from '../../types'
 import {toggleAnalyticsOptedIn, getAnalyticsOptedIn} from '../../analytics'
-import LabeledToggle from './LabeledToggle'
+import {LabeledToggle} from '../toggles'
 
 type SP = {
   optedIn: boolean

app/src/components/analytics-settings/styles.css

@@ -4,46 +4,6 @@
   width: 100%;
 }
 
-.analytics_info {
-  @apply --font-body-1-dark;
-
-  max-width: 25rem;
-
-  & > p {
-    margin: 1rem 0;
-    line-height: 1.5;
-  }
-}
-
-.labeled_toggle {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  margin-top: 0.5rem;
-}
-
-.labeled_toggle_label {
-  @apply --font-body-1-dark;
-
-  font-weight: var(--fw-semibold);
-}
-
-.labeled_toggle_button {
-  flex: none;
-  width: 2rem;
-  margin-right: 1rem;
-  padding: 0;
-
-  &:hover {
-    background-color: transparent;
-  }
-}
-
-.modal_title {
-  @apply --font-header-dark;
-}
-
 .modal_button {
   float: right;
   margin: 0.75rem;

app/src/components/analytics-settings/LabeledToggle.js → app/src/components/toggles/LabeledToggle.js

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react'
 
-import ToggleButton from '../ToggleButton'
+import {ToggleButton} from './'
 import styles from './styles.css'
 
 type Props = {

app/src/components/toggles/ToggleInfo.js

@@ -0,0 +1,15 @@
+// @flow
+import * as React from 'react'
+
+import styles from './styles.css'
+
+type Props = {
+  children: React.Node
+}
+export default function ToggleInfo (props: Props) {
+  return (
+    <div className={styles.toggle_info}>
+      {props.children}
+    </div>
+  )
+}

app/src/components/toggles/index.js

@@ -0,0 +1,6 @@
+// @flow
+import ToggleButton from './ToggleButton'
+import LabeledToggle from './LabeledToggle'
+import ToggleInfo from './ToggleInfo'
+
+export {ToggleButton, LabeledToggle, ToggleInfo}

app/src/components/toggles/styles.css

@@ -0,0 +1,49 @@
+@import '@opentrons/components';
+
+/* Toggle Button */
+.toggled_on {
+  fill: #0ec9eb;
+  color: #0ec9eb;
+}
+
+.toggled_off {
+  fill: var(--c-dark-gray);
+}
+
+/* Labeled Toggle */
+.labeled_toggle {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  margin-top: 0.5rem;
+}
+
+.labeled_toggle_label {
+  @apply --font-body-1-dark;
+
+  font-weight: var(--fw-semibold);
+}
+
+.labeled_toggle_button {
+  flex: none;
+  width: 2rem;
+  margin-right: 1rem;
+  padding: 0;
+
+  &:hover {
+    background-color: transparent;
+  }
+}
+
+/* Toggle Info */
+.toggle_info {
+  @apply --font-body-1-dark;
+
+  max-width: 25rem;
+
+  & > p {
+    margin: 1rem 0;
+    line-height: 1.5;
+  }
+}

components/src/__tests__/__snapshots__/modals.test.js.snap

@@ -122,6 +122,27 @@ exports[`modals Modal renders correctly 1`] = `
 </div>
 `;
 
+exports[`modals Modal renders correctly with optional heading 1`] = `
+<div
+  className="modal foo"
+>
+  <div
+    className="overlay clickable"
+    onClick={[Function]}
+  />
+  <div
+    className="modal_contents"
+  >
+    <h3
+      className="modal_page_heading"
+    >
+      Heading Visible
+    </h3>
+    children
+  </div>
+</div>
+`;
+
 exports[`modals ModalPage renders correctly 1`] = `
 <div
   className="modal"

components/src/__tests__/modals.test.js

@@ -69,6 +69,16 @@ describe('modals', () => {
     expect(tree).toMatchSnapshot()
   })
 
+  test('Modal renders correctly with optional heading', () => {
+    const tree = Renderer.create(
+      <Modal onCloseClick={() => {}} className='foo' heading={'Heading Visible'}>
+        children
+      </Modal>
+    ).toJSON()
+
+    expect(tree).toMatchSnapshot()
+  })
+
   test('AlertModal renders correctly', () => {
     const tree = Renderer.create(
       <AlertModal

components/src/modals/Modal.js

@@ -7,6 +7,8 @@ import styles from './modals.css'
 type ModalProps = {
   /** handler to close the modal (attached to `Overlay` onClick) */
   onCloseClick?: (event: SyntheticEvent<>) => mixed,
+  /** Optional styled heading **/
+  heading?: string,
   /** modal contents */
   children: React.Node,
   /** classes to apply */
@@ -22,11 +24,14 @@ type ModalProps = {
  * with a dark overlay and displays `children` as its contents in a white box
  */
 export default function Modal (props: ModalProps) {
-  const {contentsClassName, alertOverlay, onCloseClick} = props
+  const {contentsClassName, alertOverlay, onCloseClick, heading} = props
   return (
     <div className={cx(styles.modal, props.className, {[styles.alert_modal]: alertOverlay})} >
       <Overlay onClick={onCloseClick} alertOverlay={alertOverlay}/>
        <div className={cx(styles.modal_contents, contentsClassName)}>
+         {heading && (
+           <h3 className={styles.modal_page_heading}>{heading}</h3>
+         )}
         {props.children}
       </div>
     </div>

components/src/modals/Modal.md

@@ -14,3 +14,20 @@ initialState = {isOpen: true}
   </button>
 </div>
 ```
+
+Optional heading (click overlay to close):
+
+```js
+initialState = {isOpen: true}
+
+;<div style={{position: 'relative', width: '32em', height: '16rem'}}>
+  {state.isOpen && (
+    <Modal onCloseClick={() => setState({isOpen: false})} heading={'Optional styled heading'}>
+      <span>Modal contents</span>
+    </Modal>
+  )}
+  <button onClick={() => setState({isOpen: true})}>
+    Open modal
+  </button>
+</div>
+```