refactor(protocol-designer): add modules icon to modules card (#9668)

* refactor(protocol-designer): add modules icon to modules card This PR adds module icons to the module's card on File Details tab in PD. closes #9661
Opentrons · Apr 7, 2022 · 3c64516 · 3c64516
1 parent 443afa1
commit 3c64516
Show file tree

Hide file tree

Showing 11 changed files with 30 additions and 50 deletions.
diff --git a/app/src/organisms/Devices/ModuleCard/index.tsx b/app/src/organisms/Devices/ModuleCard/index.tsx
@@ -20,6 +20,7 @@ import {
   Tooltip,
   useHoverTooltip,
   COLORS,
+  ModuleIcon,
 } from '@opentrons/components'
 import {
   getModuleDisplayName,
@@ -33,7 +34,6 @@ import { useHistory } from 'react-router-dom'
 import { OverflowBtn } from '../../../atoms/MenuList/OverflowBtn'
 import { Banner } from '../../../atoms/Banner'
 import { useCurrentRunStatus } from '../../RunTimeControl/hooks'
-import { ModuleIcon } from '../ModuleIcon'
 import { HeaterShakerWizard } from '../HeaterShakerWizard'
 import { MagneticModuleData } from './MagneticModuleData'
 import { TemperatureModuleData } from './TemperatureModuleData'
@@ -289,7 +289,12 @@ export const ModuleCard = (props: ModuleCardProps): JSX.Element | null => {
                 paddingBottom={SPACING.spacing2}
                 data-testid={`module_card_display_name_${module.serial}`}
               >
-                <ModuleIcon moduleType={module.type} />
+                <ModuleIcon
+                  moduleType={module.type}
+                  size="1rem"
+                  marginRight={SPACING.spacing1}
+                  color={COLORS.darkGreyEnabled}
+                />
                 <Text fontSize={TYPOGRAPHY.fontSizeP}>
                   {getModuleDisplayName(module.model)}
                 </Text>

diff --git a/app/src/organisms/Devices/ModuleIcon.tsx b/app/src/organisms/Devices/ModuleIcon.tsx
diff --git a/app/src/organisms/Devices/RobotCard.tsx b/app/src/organisms/Devices/RobotCard.tsx
@@ -13,11 +13,11 @@ import {
   DIRECTION_ROW,
   SPACING,
   TEXT_TRANSFORM_UPPERCASE,
+  ModuleIcon,
 } from '@opentrons/components'
 
 import OT2_PNG from '../../assets/images/OT2-R_HERO.png'
 import { StyledText } from '../../atoms/text'
-import { ModuleIcon } from './ModuleIcon'
 import { useAttachedModules, useAttachedPipettes } from './hooks'
 import { RobotStatusBanner } from './RobotStatusBanner'
 

diff --git a/app/src/organisms/ProtocolDetails/index.tsx b/app/src/organisms/ProtocolDetails/index.tsx
@@ -22,6 +22,7 @@ import {
   Card,
   JUSTIFY_SPACE_BETWEEN,
   TEXT_TRANSFORM_CAPITALIZE,
+  ModuleIcon,
 } from '@opentrons/components'
 import {
   parseInitialPipetteNamesByMount,
@@ -31,7 +32,6 @@ import {
 import { StoredProtocolData } from '../../redux/protocol-storage'
 import { StyledText } from '../../atoms/text'
 import { PrimaryButton } from '../../atoms/Buttons'
-import { ModuleIcon } from '../../molecules/ModuleIcon'
 import { DeckThumbnail } from '../../molecules/DeckThumbnail'
 import { OverflowBtn } from '../../atoms/MenuList/OverflowBtn'
 import { Divider } from '../../atoms/structure'

diff --git a/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx b/app/src/organisms/ProtocolsLanding/ProtocolCard.tsx
@@ -19,6 +19,7 @@ import {
   JUSTIFY_CENTER,
   ALIGN_CENTER,
   SIZE_3,
+  ModuleIcon,
 } from '@opentrons/components'
 import { Link } from 'react-router-dom'
 import {
@@ -28,7 +29,6 @@ import {
 
 import { StoredProtocolData } from '../../redux/protocol-storage'
 import { StyledText } from '../../atoms/text'
-import { ModuleIcon } from '../../molecules/ModuleIcon'
 import { DeckThumbnail } from '../../molecules/DeckThumbnail'
 import { ProtocolOverflowMenu } from './ProtocolOverflowMenu'
 

diff --git a/components/src/__tests__/__snapshots__/icons.test.tsx.snap b/components/src/__tests__/__snapshots__/icons.test.tsx.snap
@@ -1295,7 +1295,7 @@ exports[`icons ot-heater-shaker renders correctly 1`] = `
   xmlns="http://www.w3.org/2000/svg"
 >
   <path
-    d="M7.79174 2C8.86863 2 9.74161 2.74832 9.74161 3.67143C9.74161 5.33149 9.56715 6.8067 9.29202 7.99155C10.3317 8.52259 11.0415 9.58826 11.0415 10.8163C11.0415 12.5746 9.58643 14 7.7915 14C5.99658 14 4.5415 12.5746 4.5415 10.8163C4.5415 9.66132 5.16937 8.64997 6.109 8.09193C5.94153 6.97862 5.84187 5.5203 5.84187 3.67143C5.84187 2.74832 6.71485 2 7.79174 2ZM8.4417 3.67143C8.4417 3.36373 8.1507 3.11429 7.79174 3.11429C7.43278 3.11429 7.14178 3.36373 7.14178 3.67143V4.5H8.4417V3.67143ZM11.0378 3.23225C10.7672 3.28742 10.5926 3.55149 10.6478 3.82206C10.8156 4.64514 10.7827 5.31842 10.7108 5.77943C10.6749 6.01014 10.6292 6.18767 10.5941 6.3039C10.5765 6.36199 10.5616 6.40465 10.5519 6.43087C10.5471 6.44397 10.5435 6.45295 10.5417 6.45767L10.5403 6.46105L10.5402 6.46129L10.5402 6.46136L10.5401 6.46138C10.4324 6.71431 10.5492 7.00705 10.8019 7.11622C11.0554 7.22575 11.3497 7.10904 11.4592 6.85555L11.0002 6.65723C11.4592 6.85555 11.4593 6.85536 11.4593 6.85517L11.4595 6.85476L11.4599 6.85386L11.4608 6.85173L11.4631 6.84618L11.4698 6.82994C11.475 6.81684 11.4819 6.79922 11.49 6.7772C11.5063 6.73319 11.5276 6.67156 11.5512 6.59338C11.5985 6.43708 11.6552 6.21418 11.6989 5.93336C11.7865 5.37129 11.8223 4.57705 11.6276 3.62227C11.5724 3.3517 11.3084 3.17708 11.0378 3.23225ZM4.62176 3.82205C4.67693 3.55147 4.50231 3.2874 4.23173 3.23223C3.96116 3.17706 3.69709 3.35168 3.64192 3.62226C3.44724 4.57703 3.48305 5.37128 3.57061 5.93334C3.61436 6.21417 3.67101 6.43706 3.71829 6.59336C3.74193 6.67154 3.76326 6.73317 3.77951 6.77719C3.78763 6.7992 3.7945 6.81682 3.79975 6.82992L3.80638 6.84616L3.80871 6.85171L3.80962 6.85384L3.81001 6.85474L3.81018 6.85515C3.81027 6.85535 3.81035 6.85553 4.26934 6.65722L3.81035 6.85553C3.91988 7.10903 4.21416 7.22573 4.46766 7.11621C4.72033 7.00703 4.8371 6.7143 4.72938 6.46136L4.72937 6.46135L4.72934 6.46125L4.72924 6.46103L4.72788 6.45766C4.72598 6.45293 4.72245 6.44396 4.71762 6.43085C4.70794 6.40464 4.69304 6.36197 4.67547 6.30388C4.64032 6.18765 4.59463 6.01012 4.55869 5.77942C4.48687 5.31841 4.45393 4.64512 4.62176 3.82205ZM13.0378 3.23225C12.7672 3.28742 12.5926 3.55149 12.6478 3.82206C12.8156 4.64514 12.7827 5.31842 12.7108 5.77943C12.6749 6.01014 12.6292 6.18767 12.5941 6.3039C12.5765 6.36199 12.5616 6.40465 12.5519 6.43087C12.5471 6.44397 12.5435 6.45295 12.5417 6.45767L12.5403 6.46105L12.5402 6.46129L12.5402 6.46136L12.5401 6.46138C12.4324 6.71431 12.5492 7.00705 12.8019 7.11622C13.0554 7.22575 13.3497 7.10904 13.4592 6.85555L13.0002 6.65723C13.4592 6.85555 13.4593 6.85536 13.4593 6.85517L13.4595 6.85476L13.4599 6.85386L13.4608 6.85173L13.4631 6.84618L13.4698 6.82994C13.475 6.81684 13.4819 6.79922 13.49 6.7772C13.5063 6.73319 13.5276 6.67156 13.5512 6.59338C13.5985 6.43708 13.6552 6.21418 13.6989 5.93336C13.7865 5.37129 13.8223 4.57705 13.6276 3.62227C13.5724 3.3517 13.3084 3.17708 13.0378 3.23225ZM2.62176 3.82205C2.67693 3.55147 2.50231 3.2874 2.23173 3.23223C1.96116 3.17706 1.69709 3.35168 1.64192 3.62226C1.44724 4.57703 1.48305 5.37128 1.57061 5.93334C1.61436 6.21417 1.67101 6.43706 1.71828 6.59336C1.74193 6.67154 1.76326 6.73317 1.77951 6.77719C1.78763 6.7992 1.7945 6.81682 1.79975 6.82992L1.80638 6.84616L1.80871 6.85171L1.80962 6.85384L1.81001 6.85474L1.81018 6.85515C1.81027 6.85535 1.81035 6.85553 2.26934 6.65722L1.81035 6.85553C1.91988 7.10903 2.21416 7.22573 2.46766 7.11621C2.72033 7.00703 2.8371 6.7143 2.72938 6.46136L2.72937 6.46135L2.72934 6.46125L2.72924 6.46103L2.72788 6.45766C2.72598 6.45293 2.72245 6.44396 2.71762 6.43085C2.70794 6.40464 2.69304 6.36197 2.67547 6.30388C2.64032 6.18765 2.59463 6.01012 2.55869 5.77942C2.48687 5.31841 2.45393 4.64512 2.62176 3.82205Z"
+    d="M10.0673 2.95C10.0673 1.87304 9.0488 1 7.79243 1C6.53607 1 5.51758 1.87304 5.51758 2.95C5.51758 5.10687 5.63384 6.80816 5.82919 8.10699C4.73271 8.75798 4 9.93802 4 11.2857C4 13.3371 5.69759 15 7.79167 15C9.88575 15 11.5833 13.3371 11.5833 11.2857C11.5833 9.85314 10.7554 8.60999 9.54271 7.99036C9.86372 6.608 10.0673 4.88684 10.0673 2.95ZM7.79243 2.3C8.21122 2.3 8.55072 2.59101 8.55072 2.95V4.9H7.03415V2.95C7.03415 2.59101 7.37364 2.3 7.79243 2.3ZM2.27929 3.3654C2.29023 3.31226 2.25753 3.25967 2.20484 3.24674L1.30047 3.02476C1.24538 3.01124 1.19004 3.04619 1.17925 3.10188C0.910517 4.48945 0.967614 5.92042 1.34594 7.28202C1.3629 7.34304 1.43201 7.37221 1.48796 7.34255L2.30932 6.90723C2.35045 6.88543 2.37103 6.83814 2.35952 6.79304C2.07343 5.67126 2.04602 4.49918 2.27929 3.3654ZM4.27705 3.36031C4.28442 3.30912 4.25203 3.26047 4.20184 3.24804L3.30306 3.02541C3.24734 3.01161 3.19142 3.04745 3.18134 3.10396C2.93318 4.49526 2.99334 5.92402 3.35747 7.2894C3.37399 7.35133 3.44409 7.38105 3.50049 7.35059L4.32474 6.90549C4.36372 6.88444 4.38416 6.84025 4.37535 6.79683C4.14583 5.66539 4.11259 4.50294 4.27705 3.36031ZM11.4461 6.90575C11.4069 6.88457 11.3865 6.84002 11.3956 6.7964C11.6325 5.66616 11.6626 4.50237 11.4846 3.36147C11.4765 3.30982 11.5091 3.26036 11.5599 3.2479L12.4675 3.02514C12.5231 3.01148 12.5789 3.04731 12.589 3.10374C12.8372 4.49511 12.777 5.92395 12.4129 7.2894C12.3964 7.35133 12.3263 7.38105 12.2699 7.35059L11.4461 6.90575ZM13.3998 6.79315C13.3884 6.83821 13.4089 6.88539 13.45 6.90716L14.2719 7.34278C14.3277 7.37236 14.3967 7.34342 14.4138 7.28262C14.7976 5.92195 14.8581 4.49027 14.5902 3.10195C14.5794 3.04624 14.5241 3.01125 14.4689 3.02478L13.5639 3.24691C13.5115 3.25978 13.4788 3.3119 13.4893 3.36483C13.7145 4.49999 13.6839 5.67116 13.3998 6.79315Z"
     fillRule="evenodd"
   />
 </svg>
@@ -1531,11 +1531,11 @@ exports[`icons ot-thermocycler renders correctly 1`] = `
   className="sc-fznyAO c0 foo"
   fill="currentColor"
   version="1.1"
-  viewBox="0 0 20 20"
+  viewBox="0 0 16 16"
   xmlns="http://www.w3.org/2000/svg"
 >
   <path
-    d="M 7 7.2727 V 4.5454 C 4.1005 4.5454 1.75 6.9875 1.75 10 C 1.75 10.9091 1.9688 11.7909 2.3625 12.5454 L 1.085 13.8727 C 0.4025 12.7546 0 11.4273 0 10 C 0 5.9834 3.134 2.7273 7 2.7273 V 0 L 10.5 3.6364 L 7 7.2727 Z M 11.6375 7.4546 L 12.915 6.1273 C 13.5975 7.2454 14 8.5727 14 10 C 14 14.0166 10.866 17.2727 7 17.2727 V 20 L 3.5 16.3636 L 7 12.7273 V 15.4545 C 9.8995 15.4545 12.25 13.0125 12.25 10 C 12.25 9.0909 12.0225 8.2182 11.6375 7.4546 Z M 8.3069 9.2433 C 8.5401 8.949 8.8602 8.8018 9.2672 8.8018 C 9.4469 8.8018 9.6178 8.829 9.7798 8.8834 C 9.9438 8.9359 10.0989 8.9974 10.2451 9.0679 L 10.5 8.4661 C 10.1246 8.2766 9.7156 8.1818 9.2731 8.1818 C 8.8522 8.1818 8.4857 8.2736 8.1736 8.457 C 7.8614 8.6405 7.6223 8.9046 7.4564 9.2494 C 7.2924 9.5941 7.2104 9.9964 7.2104 10.4561 C 7.2104 11.1859 7.3803 11.7474 7.7202 12.1406 C 8.06 12.5317 8.547 12.7273 9.1812 12.7273 C 9.6119 12.7273 9.9972 12.6617 10.337 12.5307 V 11.9107 C 10.1513 11.9692 9.9725 12.0176 9.8006 12.0559 C 9.6287 12.0922 9.4509 12.1103 9.2672 12.1103 C 8.8424 12.1103 8.5174 11.9712 8.2921 11.693 C 8.0689 11.4147 7.9572 11.0045 7.9572 10.4621 C 7.9572 9.9439 8.0738 9.5377 8.3069 9.2433 Z M 4.7743 12.6668 H 5.4826 V 8.8653 H 6.757 V 8.2453 H 3.5 V 8.8653 H 4.7743 V 12.6668 Z"
+    d="M5.78653 2.52836C6.4972 2.18953 7.27458 2.01367 8.06192 2.01367C8.84925 2.01367 9.62664 2.18953 10.3373 2.52836C11.048 2.86719 11.674 3.36046 12.1697 3.97217L10.8101 5.07392C10.4785 4.6647 10.0596 4.33469 9.58417 4.108C9.10871 3.88132 8.58863 3.76367 8.06192 3.76367C7.5352 3.76367 7.01513 3.88132 6.53966 4.108C6.23781 4.25192 5.9588 4.43748 5.71042 4.65852L6.53539 5.48349C6.54967 5.49933 6.55921 5.51885 6.56296 5.53984C6.5667 5.56084 6.56449 5.58246 6.55657 5.60226C6.54865 5.62206 6.53534 5.63923 6.51815 5.65185C6.50096 5.66447 6.48057 5.67202 6.4593 5.67365H3.60663C3.57804 5.67126 3.5514 5.6582 3.53202 5.63705C3.51264 5.61591 3.50195 5.58823 3.50204 5.55954V2.70687C3.50115 2.68556 3.50678 2.6645 3.51821 2.64648C3.52963 2.62847 3.54629 2.61437 3.56594 2.60609C3.5856 2.59781 3.60732 2.59575 3.62819 2.60017C3.64906 2.60459 3.6681 2.61528 3.68272 2.63081L4.47158 3.41968C4.86145 3.05902 5.30451 2.75817 5.78653 2.52836ZM2.07251 8.88416C2.0115 8.09915 2.12692 7.31045 2.41028 6.57585L4.04302 7.20566C3.85361 7.69669 3.77647 8.22387 3.81725 8.74856C3.85803 9.27325 4.0157 9.78218 4.2787 10.2381C4.5417 10.6939 4.90336 11.0852 5.33718 11.3831C5.6143 11.5734 5.91638 11.7226 6.23397 11.8269L6.53545 10.7039C6.54294 10.69 6.55347 10.678 6.56627 10.6687C6.57907 10.6595 6.59381 10.6533 6.60936 10.6505C6.62492 10.6478 6.64089 10.6486 6.65608 10.6529C6.67128 10.6572 6.68529 10.6649 6.69709 10.6754L8.11393 13.1287C8.13198 13.1481 8.14199 13.1735 8.14199 13.2C8.14199 13.2265 8.13198 13.252 8.11393 13.2713L5.66062 14.6881C5.64163 14.6973 5.62047 14.701 5.5995 14.6988C5.57854 14.6967 5.55858 14.6888 5.54184 14.676C5.5251 14.6632 5.51224 14.646 5.50467 14.6263C5.4971 14.6067 5.49515 14.5852 5.49898 14.5645L5.77975 13.5187C5.27106 13.3619 4.78761 13.1286 4.34645 12.8256C3.69741 12.3799 3.15634 11.7946 2.76287 11.1126C2.36941 10.4306 2.13352 9.66917 2.07251 8.88416ZM13.8744 7.44961C13.983 7.95513 14.0175 8.47523 13.9755 8.99344C13.912 9.77747 13.6749 10.5375 13.2815 11.2186C12.8881 11.8997 12.3482 12.4849 11.7008 12.9318C11.0534 13.3786 10.3147 13.6758 9.53836 13.8021L9.25748 12.0748C9.77783 11.9902 10.2729 11.7909 10.7067 11.4915C11.1405 11.1921 11.5024 10.7999 11.7661 10.3434C12.0298 9.88685 12.1886 9.37748 12.2312 8.85205C12.2571 8.53264 12.2396 8.21216 12.18 7.89921L11.0709 8.19352C11.0584 8.20351 11.0441 8.21095 11.0287 8.2154C11.0133 8.21985 10.9973 8.22123 10.9814 8.21946C10.9655 8.2177 10.9501 8.21281 10.9361 8.2051C10.9221 8.19738 10.9097 8.187 10.8997 8.17451C10.8897 8.16202 10.8823 8.14768 10.8779 8.13232C10.8734 8.11696 10.872 8.10088 10.8738 8.08499C10.8756 8.06909 10.8804 8.0537 10.8882 8.03969C10.8959 8.02568 10.9063 8.01335 10.9187 8.00336L12.3356 5.55004C12.3565 5.53133 12.3836 5.521 12.4116 5.521C12.4397 5.521 12.4668 5.53133 12.4877 5.55004L14.941 6.96689C14.9589 6.97676 14.9737 6.99121 14.9841 7.00877C14.9944 7.02632 14.9999 7.04633 14.9999 7.06672C14.9999 7.0871 14.9944 7.10711 14.9841 7.12467C14.9737 7.14222 14.9589 7.1567 14.941 7.16657L13.8744 7.44961Z"
     fillRule="evenodd"
   />
 </svg>

diff --git a/app/src/molecules/ModuleIcon/index.tsx → components/src/icons/ModuleIcon.tsx b/app/src/molecules/ModuleIcon/index.tsx → components/src/icons/ModuleIcon.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Icon, IconName } from '@opentrons/components'
+import { Icon, IconName } from './Icon'
 import {
   HEATERSHAKER_MODULE_TYPE,
   TEMPERATURE_MODULE_TYPE,
@@ -8,7 +8,7 @@ import {
 } from '@opentrons/shared-data'
 
 import type { ModuleType } from '@opentrons/shared-data'
-import type { StyleProps } from '@opentrons/components'
+import type { StyleProps } from '../primitives/types'
 
 const MODULE_ICON_NAME_BY_TYPE: { [type in ModuleType]: IconName } = {
   [HEATERSHAKER_MODULE_TYPE]: 'ot-heater-shaker',