refactor(labware-library): Update TableTitle expandable styles (#3578)

Opentrons · Jun 12, 2019 · c5b8fc6 · c5b8fc6
1 parent befded9
commit c5b8fc6
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 40 deletions.
diff --git a/labware-library/src/components/ui/LabeledValueTable.js b/labware-library/src/components/ui/LabeledValueTable.js
@@ -1,13 +1,10 @@
 // @flow
 import * as React from 'react'
-import cx from 'classnames'
 
 import { Table, TableEntry, TABLE_COLUMN } from './Table'
 import { LabelText, LABEL_LEFT } from './LabelText'
 import { Value } from './Value'
-import { ClickableIcon } from './ClickableIcon'
-
-import styles from './styles.css'
+import { TableTitle } from './TableTitle'
 
 import type { TableDirection } from './Table'
 
@@ -42,37 +39,3 @@ export function LabeledValueTable(props: LabledValueTableProps) {
     </div>
   )
 }
-
-type TableTitleProps = {|
-  label: React.Node,
-  diagram?: React.Node,
-|}
-
-export function TableTitle(props: TableTitleProps) {
-  const [guideVisible, setGuideVisible] = React.useState<boolean>(false)
-  const toggleGuide = () => setGuideVisible(!guideVisible)
-  const { label, diagram } = props
-
-  const iconClassName = cx(styles.info_button, {
-    [styles.active]: guideVisible,
-  })
-
-  const contentClassName = cx(styles.expandable_content, {
-    [styles.open]: guideVisible,
-  })
-
-  return (
-    <div className={styles.table_title}>
-      <div className={styles.table_title_text}>
-        <LabelText position={LABEL_LEFT}>{label}</LabelText>
-        <ClickableIcon
-          title="info"
-          name="information"
-          className={iconClassName}
-          onClick={toggleGuide}
-        />
-      </div>
-      <div className={contentClassName}>{diagram}</div>
-    </div>
-  )
-}
diff --git a/labware-library/src/components/ui/TableTitle.js b/labware-library/src/components/ui/TableTitle.js
@@ -0,0 +1,44 @@
+// @flow
+
+// Table Title with expandable measurement diagrams
+import * as React from 'react'
+import cx from 'classnames'
+
+import { LabelText, LABEL_LEFT } from './LabelText'
+import { ClickableIcon } from './ClickableIcon'
+
+import styles from './styles.css'
+
+type TableTitleProps = {|
+  label: React.Node,
+  diagram?: React.Node,
+|}
+
+export function TableTitle(props: TableTitleProps) {
+  const [guideVisible, setGuideVisible] = React.useState<boolean>(false)
+  const toggleGuide = () => setGuideVisible(!guideVisible)
+  const { label, diagram } = props
+
+  const iconClassName = cx(styles.info_button, {
+    [styles.active]: guideVisible,
+  })
+
+  const contentClassName = cx(styles.expandable_content, {
+    [styles.open]: guideVisible,
+  })
+
+  return (
+    <>
+      <div className={styles.table_title}>
+        <LabelText position={LABEL_LEFT}>{label}</LabelText>
+        <ClickableIcon
+          title="info"
+          name="information"
+          className={iconClassName}
+          onClick={toggleGuide}
+        />
+      </div>
+      <div className={contentClassName}>{diagram}</div>
+    </>
+  )
+}
diff --git a/labware-library/src/components/ui/styles.css b/labware-library/src/components/ui/styles.css
@@ -48,9 +48,7 @@
 .table_title {
   padding-bottom: var(--spacing-1);
   border-bottom: var(--bd-light);
-}
 
-.table_title_text {
   @apply --flex-between;
 
   align-items: center;