feat(protocol-designer): modify the "name new labware" overlay for ne…

…w design (#2422) Closes #2410
Opentrons · Oct 5, 2018 · 4934c47 · 4934c47
1 parent c6707a4
commit 4934c47
Show file tree

Hide file tree

Showing 6 changed files with 91 additions and 34 deletions.
diff --git a/components/src/__tests__/__snapshots__/icons.test.js.snap b/components/src/__tests__/__snapshots__/icons.test.js.snap
@@ -877,6 +877,26 @@ exports[`icons ot-transfer renders correctly 1`] = `
 </svg>
 `;
 
+exports[`icons ot-water-outline renders correctly 1`] = `
+<svg
+  aria-hidden="true"
+  className="foo"
+  fill="currentColor"
+  height={undefined}
+  style={undefined}
+  version="1.1"
+  viewBox="0 0 24 24"
+  width={undefined}
+  x={undefined}
+  y={undefined}
+>
+  <path
+    d="m 12,3.1972656 -0.650391,0.7304688 c 0,0 -1.33604,1.5032424 -2.6757809,3.4570312 -1.3397408,1.9537888 -2.7636718,4.2980244 -2.7636719,6.4726564 3e-7,3.352541 2.7373029,6.087891 6.0898438,6.08789 3.352541,0 6.089843,-2.735349 6.089844,-6.08789 0,-2.174632 -1.423931,-4.5188676 -2.763672,-6.4726564 C 13.986431,5.4309768 12.650391,3.9277344 12.650391,3.9277344 L 12,3.1972656 Z m 0,2.7265625 c 0.42229,0.4960538 0.947441,1.0669874 1.892578,2.4453125 1.269817,1.8518164 2.457031,4.1835024 2.457031,5.4882814 0,2.412334 -1.937275,4.349609 -4.349609,4.349609 -2.4123345,0 -4.3496092,-1.937275 -4.3496094,-4.349609 0,-1.304779 1.1872144,-3.636465 2.4570314,-5.4882814 C 11.052559,6.9908155 11.57771,6.4198819 12,5.9238281 Z"
+    fillRule="evenodd"
+  />
+</svg>
+`;
+
 exports[`icons pause renders correctly 1`] = `
 <svg
   aria-hidden="true"
@@ -1117,6 +1137,26 @@ exports[`icons usb renders correctly 1`] = `
 </svg>
 `;
 
+exports[`icons water renders correctly 1`] = `
+<svg
+  aria-hidden="true"
+  className="foo"
+  fill="currentColor"
+  height={undefined}
+  style={undefined}
+  version="1.1"
+  viewBox="0 0 24 24"
+  width={undefined}
+  x={undefined}
+  y={undefined}
+>
+  <path
+    d="M12,20A6,6 0 0,1 6,14C6,10 12,3.25 12,3.25C12,3.25 18,10 18,14A6,6 0 0,1 12,20Z"
+    fillRule="evenodd"
+  />
+</svg>
+`;
+
 exports[`icons wifi renders correctly 1`] = `
 <svg
   aria-hidden="true"

diff --git a/components/src/icons/icon-data.js b/components/src/icons/icon-data.js
@@ -29,6 +29,10 @@ const ICON_DATA_BY_NAME = {
     viewBox: '0 0 512 512',
     path: 'M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z',
   },
+  'ot-water-outline': {
+    viewBox: '0 0 24 24',
+    path: 'm 12,3.1972656 -0.650391,0.7304688 c 0,0 -1.33604,1.5032424 -2.6757809,3.4570312 -1.3397408,1.9537888 -2.7636718,4.2980244 -2.7636719,6.4726564 3e-7,3.352541 2.7373029,6.087891 6.0898438,6.08789 3.352541,0 6.089843,-2.735349 6.089844,-6.08789 0,-2.174632 -1.423931,-4.5188676 -2.763672,-6.4726564 C 13.986431,5.4309768 12.650391,3.9277344 12.650391,3.9277344 L 12,3.1972656 Z m 0,2.7265625 c 0.42229,0.4960538 0.947441,1.0669874 1.892578,2.4453125 1.269817,1.8518164 2.457031,4.1835024 2.457031,5.4882814 0,2.412334 -1.937275,4.349609 -4.349609,4.349609 -2.4123345,0 -4.3496092,-1.937275 -4.3496094,-4.349609 0,-1.304779 1.1872144,-3.636465 2.4570314,-5.4882814 C 11.052559,6.9908155 11.57771,6.4198819 12,5.9238281 Z',
+  },
   'ot-click-and-drag': {
     viewBox: '0 0 48 48',
     path: 'M44.1 37.9l-10.9-9.2H37v-4.2h-4.2v3.9l-.1-.1c-.2-.2-.5-.3-.7-.3-.6 0-1 .4-1 1v15c0 .6.4 1 1 1 .2 0 .5-.1.6-.2l2.5-2 2.2 4.7c.2.5.8.7 1.3.5l3.6-1.7c.5-.2.7-.8.5-1.3l-2.2-4.7 3.2-.6c.2 0 .4-.2.6-.3.3-.6.3-1.2-.2-1.5zM3 31.9h4.2v4.2H3zM3 8.5h4.2v4.2H3zM3 15.9h4.2v4.2H3zM3 24.4h4.2v4.2H3zM32.8 8.5H37v4.2h-4.2zM32.8 15.9H37v4.2h-4.2zM32.8 0H37v4.2h-4.2zM25.3 31.9h4.2v4.2h-4.2zM25.3 0h4.2v4.2h-4.2zM3 0h4.2v4.2H3zM17.9 0h4.2v4.2h-4.2zM10.4 31.9h4.2v4.2h-4.2zM17.9 31.9h4.2v4.2h-4.2zM10.4 0h4.2v4.2h-4.2z',
@@ -37,6 +41,10 @@ const ICON_DATA_BY_NAME = {
     viewBox: '0 0 24 24',
     path: 'M15.677 11.32h1.132v2.265h-3.396V4.528h2.264L12.281 0 8.885 4.528h2.264v9.057H7.753v-2.343c.792-.42 1.358-1.223 1.358-2.185 0-1.37-1.12-2.491-2.49-2.491s-2.49 1.12-2.49 2.49c0 .963.565 1.767 1.358 2.186v2.343a2.256 2.256 0 0 0 2.264 2.264h3.396v3.453a2.492 2.492 0 0 0-1.358 2.207 2.49 2.49 0 0 0 4.98 0 2.49 2.49 0 0 0-1.358-2.207v-3.453h3.396a2.256 2.256 0 0 0 2.265-2.264V11.32h1.132V6.792h-4.529v4.529z',
   },
+  'water': {
+    viewBox: '0 0 24 24',
+    path: 'M12,20A6,6 0 0,1 6,14C6,10 12,3.25 12,3.25C12,3.25 18,10 18,14A6,6 0 0,1 12,20Z',
+  },
   'wifi': {
     viewBox: '0 0 24 24',
     path: 'M0 9.414l2.182 2.182c5.422-5.422 14.214-5.422 19.636 0L24 9.414c-6.622-6.622-17.367-6.622-24 0zm8.727 8.727L12 21.414l3.273-3.273a4.622 4.622 0 0 0-6.546 0zm-4.363-4.363l2.181 2.181a7.717 7.717 0 0 1 10.91 0l2.181-2.181c-4.21-4.211-11.05-4.211-15.272 0z',

diff --git a/protocol-designer/src/components/labware/LabwareOnDeck.js b/protocol-designer/src/components/labware/LabwareOnDeck.js
@@ -8,7 +8,6 @@ import {
   SLOT_WIDTH_MM,
   SLOT_HEIGHT_MM,
   humanizeLabwareType,
-  clickOutside,
   type DeckSlot,
 } from '@opentrons/components'
 import styles from './labware.css'
@@ -18,8 +17,6 @@ import SelectablePlate from '../../containers/SelectablePlate.js'
 import NameThisLabwareOverlay from './NameThisLabwareOverlay.js'
 import DisabledSelectSlotOverlay from './DisabledSelectSlotOverlay.js'
 
-const EnhancedNameThisLabwareOverlay = clickOutside(NameThisLabwareOverlay)
-
 function LabwareDeckSlotOverlay ({
   canAddIngreds,
   deleteLabware,
@@ -180,9 +177,9 @@ export default function LabwareOnDeck (props: LabwareOnDeckProps) {
             cancelMove={cancelMove} />
         : <EmptyDestinationSlotOverlay {...{moveLabwareDestination}}/>
     } else if (showNameOverlay) {
-      overlay = <EnhancedNameThisLabwareOverlay {...{
+      overlay = <NameThisLabwareOverlay {...{
         setLabwareName,
-        deleteLabware,
+        editLiquids,
       }}
       onClickOutside={setDefaultLabwareName} />
     } else {

diff --git a/protocol-designer/src/components/labware/NameThisLabwareOverlay.js b/protocol-designer/src/components/labware/NameThisLabwareOverlay.js
@@ -1,23 +1,22 @@
 // @flow
 import * as React from 'react'
-import ForeignDiv from '../../components/ForeignDiv.js'
 import ClickableText from './ClickableText'
 import styles from './labware.css'
-import type {ClickOutsideInterface} from '@opentrons/components'
+import ForeignDiv from '../../components/ForeignDiv'
+import i18n from '../../localization'
+import {ClickOutside} from '@opentrons/components'
 
 type Props = {
   setLabwareName: (name: ?string) => mixed,
   // TODO Ian 2018-02-16 type these fns elsewhere and import the type
-  deleteLabware: () => mixed,
-} & ClickOutsideInterface
+  editLiquids: () => mixed,
+}
 
 type State = {
   pristine: boolean,
   inputValue: string,
 }
 
-const NICKNAME_PROMPT = 'Add a nickname?'
-
 export default class NameThisLabwareOverlay extends React.Component<Props, State> {
   constructor (props: Props) {
     super(props)
@@ -45,33 +44,37 @@ export default class NameThisLabwareOverlay extends React.Component<Props, State
     this.props.setLabwareName(containerName)
   }
 
-  render () {
-    const {
-      deleteLabware,
-      passRef,
-    } = this.props
+  onAddLiquids = () => {
+    this.onSubmit()
+    this.props.editLiquids()
+  }
 
+  render () {
     return (
-      <g className={styles.slot_overlay} ref={passRef}>
-        <rect className={styles.overlay_panel} />
-        <g transform='translate(5, 0)'>
-          <ForeignDiv x='0' y='15%' width='90%'>
-            <input
-              className={styles.name_input}
-              onChange={this.handleChange}
-              onKeyUp={this.handleKeyUp}
-              placeholder={NICKNAME_PROMPT}
-              value={this.state.inputValue}
-            />
-          </ForeignDiv>
+      <ClickOutside onClickOutside={this.onSubmit}>
+        {({ref}) => (
+          <g className={styles.slot_overlay} ref={ref}>
+            <rect className={styles.overlay_panel} />
+            <g transform='translate(5, 0)'>
+              <ForeignDiv x='0' y='15%' width='92%'>
+                <input
+                  className={styles.name_input}
+                  onChange={this.handleChange}
+                  onKeyUp={this.handleKeyUp}
+                  placeholder={i18n.t('labware_overlays.name_labware.nickname_placeholder')}
+                  value={this.state.inputValue}
+                />
+              </ForeignDiv>
 
-          <ClickableText onClick={this.onSubmit}
-            iconName='check' y='60%' text='Save' />
+              <ClickableText onClick={this.onAddLiquids}
+                iconName='water' y='50%' text={i18n.t('labware_overlays.name_labware.add_liquids')} />
 
-          <ClickableText onClick={deleteLabware}
-            iconName='close' y='80%' text='Cancel' />
-        </g>
-      </g>
+              <ClickableText onClick={this.onSubmit}
+                iconName='ot-water-outline' y='75%' text={i18n.t('labware_overlays.name_labware.leave_empty')} />
+            </g>
+          </g>
+        )}
+      </ClickOutside>
     )
   }
 }
diff --git a/protocol-designer/src/localization/en/index.js b/protocol-designer/src/localization/en/index.js
@@ -3,6 +3,7 @@
 import alert from './alert.json'
 import button from './button.json'
 import card from './card.json'
+import labware_overlays from './labware_overlays.json'
 import modal from './modal.json'
 import nav from './nav.json'
 import step_edit_form from './step_edit_form.json'
@@ -14,6 +15,7 @@ export default {
     alert,
     button,
     card,
+    labware_overlays,
     modal,
     nav,
     step_edit_form,

diff --git a/protocol-designer/src/localization/en/labware_overlays.json b/protocol-designer/src/localization/en/labware_overlays.json
@@ -0,0 +1,7 @@
+{
+  "name_labware": {
+    "nickname_placeholder": "Add a nickname?",
+    "add_liquids": "Add Liquids",
+    "leave_empty": "Leave Empty"
+  }
+}