From 7ee445bc827f6e962038766fc88aeb6eae7f5c8b Mon Sep 17 00:00:00 2001 From: Katie Adee Date: Mon, 11 Jun 2018 15:13:57 -0400 Subject: [PATCH] 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 | 2 +- app/src/components/ToggleButton/styles.css | 10 ---- .../analytics-settings/AnalyticsInfo.js | 7 ++- .../AnalyticsSettingsModal.js | 6 +-- .../analytics-settings/AnalyticsToggle.js | 2 +- .../analytics-settings/ModalTitle.js | 17 ------- .../components/analytics-settings/styles.css | 40 --------------- .../LabeledToggle.js | 2 +- .../index.js => toggles/ToggleButton.js} | 0 app/src/components/toggles/ToggleInfo.js | 15 ++++++ app/src/components/toggles/index.js | 6 +++ app/src/components/toggles/styles.css | 49 +++++++++++++++++++ .../__snapshots__/modals.test.js.snap | 21 ++++++++ components/src/__tests__/modals.test.js | 10 ++++ components/src/modals/Modal.js | 7 ++- components/src/modals/Modal.md | 17 +++++++ 16 files changed, 131 insertions(+), 80 deletions(-) delete mode 100644 app/src/components/ToggleButton/styles.css delete mode 100644 app/src/components/analytics-settings/ModalTitle.js rename app/src/components/{analytics-settings => toggles}/LabeledToggle.js (92%) rename app/src/components/{ToggleButton/index.js => toggles/ToggleButton.js} (100%) create mode 100644 app/src/components/toggles/ToggleInfo.js create mode 100644 app/src/components/toggles/index.js create mode 100644 app/src/components/toggles/styles.css diff --git a/app/src/components/ConnectPanel/RobotList.js b/app/src/components/ConnectPanel/RobotList.js index 505da10f5e7..2033a25defd 100644 --- a/app/src/components/ConnectPanel/RobotList.js +++ b/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 = { diff --git a/app/src/components/ToggleButton/styles.css b/app/src/components/ToggleButton/styles.css deleted file mode 100644 index bee5c0c6d6c..00000000000 --- a/app/src/components/ToggleButton/styles.css +++ /dev/null @@ -1,10 +0,0 @@ -@import '@opentrons/components'; - -.toggled_on { - fill: #0ec9eb; - color: #0ec9eb; -} - -.toggled_off { - fill: var(--c-dark-gray); -} diff --git a/app/src/components/analytics-settings/AnalyticsInfo.js b/app/src/components/analytics-settings/AnalyticsInfo.js index 9d43325c4a3..bb582b4a530 100644 --- a/app/src/components/analytics-settings/AnalyticsInfo.js +++ b/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 ( -
+

Help Opentrons improve its products and services by automatically sending anonymous diagnostic and usage data.

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.

-
+ ) } diff --git a/app/src/components/analytics-settings/AnalyticsSettingsModal.js b/app/src/components/analytics-settings/AnalyticsSettingsModal.js index baedae2602d..45d86dfb966 100644 --- a/app/src/components/analytics-settings/AnalyticsSettingsModal.js +++ b/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 ( - - - {TITLE} - + diff --git a/app/src/components/analytics-settings/AnalyticsToggle.js b/app/src/components/analytics-settings/AnalyticsToggle.js index 703564fe7e8..f25727e8ad1 100644 --- a/app/src/components/analytics-settings/AnalyticsToggle.js +++ b/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 diff --git a/app/src/components/analytics-settings/ModalTitle.js b/app/src/components/analytics-settings/ModalTitle.js deleted file mode 100644 index ae261dee2cd..00000000000 --- a/app/src/components/analytics-settings/ModalTitle.js +++ /dev/null @@ -1,17 +0,0 @@ -// @flow -// TODO(mc, 2018-05-30): move to or replace with something from components lib -import * as React from 'react' - -import styles from './styles.css' - -type Props = { - children: ?React.Node -} - -export default function ModalTitle (props: Props) { - return ( -

- {props.children} -

- ) -} diff --git a/app/src/components/analytics-settings/styles.css b/app/src/components/analytics-settings/styles.css index e1e4a549049..913b3cebab0 100644 --- a/app/src/components/analytics-settings/styles.css +++ b/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; diff --git a/app/src/components/analytics-settings/LabeledToggle.js b/app/src/components/toggles/LabeledToggle.js similarity index 92% rename from app/src/components/analytics-settings/LabeledToggle.js rename to app/src/components/toggles/LabeledToggle.js index 8cbd623c5e8..18de6526f5a 100644 --- a/app/src/components/analytics-settings/LabeledToggle.js +++ b/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 = { diff --git a/app/src/components/ToggleButton/index.js b/app/src/components/toggles/ToggleButton.js similarity index 100% rename from app/src/components/ToggleButton/index.js rename to app/src/components/toggles/ToggleButton.js diff --git a/app/src/components/toggles/ToggleInfo.js b/app/src/components/toggles/ToggleInfo.js new file mode 100644 index 00000000000..39c447b92ef --- /dev/null +++ b/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 ( +
+ {props.children} +
+ ) +} diff --git a/app/src/components/toggles/index.js b/app/src/components/toggles/index.js new file mode 100644 index 00000000000..5b42e5c6c2a --- /dev/null +++ b/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} diff --git a/app/src/components/toggles/styles.css b/app/src/components/toggles/styles.css new file mode 100644 index 00000000000..0de2cf8535a --- /dev/null +++ b/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; + } +} diff --git a/components/src/__tests__/__snapshots__/modals.test.js.snap b/components/src/__tests__/__snapshots__/modals.test.js.snap index 4b3394cd170..b5d43ab27a0 100644 --- a/components/src/__tests__/__snapshots__/modals.test.js.snap +++ b/components/src/__tests__/__snapshots__/modals.test.js.snap @@ -122,6 +122,27 @@ exports[`modals Modal renders correctly 1`] = ` `; +exports[`modals Modal renders correctly with optional heading 1`] = ` +
+
+
+

+ Heading Visible +

+ children +
+
+`; + exports[`modals ModalPage renders correctly 1`] = `
{ expect(tree).toMatchSnapshot() }) + test('Modal renders correctly with optional heading', () => { + const tree = Renderer.create( + {}} className='foo' heading={'Heading Visible'}> + children + + ).toJSON() + + expect(tree).toMatchSnapshot() + }) + test('AlertModal renders correctly', () => { const tree = Renderer.create( ) => 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 (
+ {heading && ( +

{heading}

+ )} {props.children}
diff --git a/components/src/modals/Modal.md b/components/src/modals/Modal.md index 0f9ddb5e9cf..2c56cae207e 100644 --- a/components/src/modals/Modal.md +++ b/components/src/modals/Modal.md @@ -14,3 +14,20 @@ initialState = {isOpen: true}
``` + +Optional heading (click overlay to close): + +```js +initialState = {isOpen: true} + +;
+ {state.isOpen && ( + setState({isOpen: false})} heading={'Optional styled heading'}> + Modal contents + + )} + +
+```