@opentrons/components 0.1.6-alpha.16 → 0.1.6-alpha.17

package/src/icons/ModuleIcon.tsx

@@ -0,0 +1,48 @@
+import { Icon } from './Icon'
+import {
+  HEATERSHAKER_MODULE_TYPE,
+  TEMPERATURE_MODULE_TYPE,
+  MAGNETIC_MODULE_TYPE,
+  THERMOCYCLER_MODULE_TYPE,
+  MAGNETIC_BLOCK_TYPE,
+  ABSORBANCE_READER_TYPE,
+} from '@opentrons/shared-data'
+
+import type { ModuleType } from '@opentrons/shared-data'
+import type { StyleProps } from '../primitives/types'
+
+export type ModuleIconName =
+  | 'ot-magnet-v2'
+  | 'ot-heater-shaker'
+  | 'ot-temperature-v2'
+  | 'ot-magnet-v2'
+  | 'ot-thermocycler'
+  | 'ot-absorbance'
+
+export const MODULE_ICON_NAME_BY_TYPE: {
+  [type in ModuleType]: ModuleIconName
+} = {
+  [MAGNETIC_BLOCK_TYPE]: 'ot-magnet-v2',
+  [HEATERSHAKER_MODULE_TYPE]: 'ot-heater-shaker',
+  [TEMPERATURE_MODULE_TYPE]: 'ot-temperature-v2',
+  [MAGNETIC_MODULE_TYPE]: 'ot-magnet-v2',
+  [THERMOCYCLER_MODULE_TYPE]: 'ot-thermocycler',
+  [ABSORBANCE_READER_TYPE]: 'ot-absorbance',
+}
+
+interface ModuleIconProps extends StyleProps {
+  moduleType: ModuleType
+}
+
+export function ModuleIcon(props: ModuleIconProps): JSX.Element {
+  const { moduleType, ...styleProps } = props
+  const iconName = MODULE_ICON_NAME_BY_TYPE[moduleType]
+
+  return (
+    <Icon
+      name={iconName}
+      {...styleProps}
+      data-testid={`ModuleIcon_${iconName}`}
+    />
+  )
+}

package/src/icons/NotificationIcon.tsx

@@ -0,0 +1,41 @@
+import { COLOR_WARNING } from '../styles'
+import { Icon } from './Icon'
+import { ICON_DATA_BY_NAME } from './icon-data'
+
+import type { IconProps, IconName } from './Icon'
+
+export interface NotificationIconProps extends IconProps {
+  /** name constant of the optional notifcation icon to display */
+  childName: IconName | null
+  /** color to apply to notification icon (defaults to COLOR_WARNING) */
+  childColor?: string
+}
+
+const SCALE_FACTOR = 3
+
+/**
+ * Inline SVG icon component with additional nested notification icon. Takes
+ * all the same props as Icon in addition to the ones listed above.
+ */
+export function NotificationIcon(props: NotificationIconProps): JSX.Element {
+  const { childName, childColor, ...iconProps } = props
+  const { viewBox } = ICON_DATA_BY_NAME[iconProps.name]
+  const [x, y, width, height] = viewBox.split(' ').map(Number)
+  const scaledWidth = width / SCALE_FACTOR
+  const scaledHeight = height / SCALE_FACTOR
+
+  return (
+    <Icon {...iconProps}>
+      {childName && (
+        <Icon
+          name={childName}
+          color={childColor ?? COLOR_WARNING}
+          x={x + (SCALE_FACTOR - 1) * scaledWidth}
+          y={y + (SCALE_FACTOR - 1) * scaledHeight}
+          svgWidth={scaledWidth}
+          svgHeight={scaledHeight}
+        />
+      )}
+    </Icon>
+  )
+}