@opentrons/components 0.2.0-alpha.0 → 0.2.0-alpha.1

package/src/icons/IconList.stories.tsx

@@ -1,109 +0,0 @@
-import * as React from 'react'
-
-import {
-  ALIGN_CENTER,
-  BORDERS,
-  COLORS,
-  DIRECTION_COLUMN,
-  Flex,
-  SPACING,
-  Text,
-  TYPOGRAPHY,
-  WRAP,
-} from '@opentrons/components'
-
-import { Icon as IconComponent } from './Icon'
-import { ICON_DATA_BY_NAME } from './icon-data'
-
-import type { Meta, Story } from '@storybook/react'
-import type { IconName } from './Icon'
-
-export default {
-  title: 'Library/Atoms/IconList',
-  decorators: [Story => <Story />],
-} as Meta
-
-interface IconState {
-  name: IconName
-  showText: boolean
-}
-
-const Template: Story<React.ComponentProps<typeof IconComponent>> = args => {
-  // const { backgroundColor } = args
-  const [icons, setIcons] = React.useState<IconState[]>(() =>
-    Object.keys(ICON_DATA_BY_NAME).map(name => ({
-      name: name as IconName,
-      showText: false,
-    }))
-  )
-  const [selectedIcon, setSelectedIcon] = React.useState<IconName | null>(null)
-
-  // copy icon name
-  const handleCopy = async (
-    iconName: IconName,
-    index: number
-  ): Promise<void> => {
-    await navigator.clipboard.writeText(iconName)
-    setIcons(prevIcons =>
-      prevIcons.map((icon, i) => {
-        if (i === index) {
-          return { ...icon, showText: true }
-        } else {
-          return icon
-        }
-      })
-    )
-    setSelectedIcon(iconName)
-  }
-
-  React.useEffect(() => {
-    const timer = setTimeout(() => {
-      setIcons(prevIcons =>
-        prevIcons.map(icon => ({ ...icon, showText: false }))
-      )
-      setSelectedIcon(null)
-    }, 2000)
-    return () => {
-      clearTimeout(timer)
-    }
-  }, [icons])
-
-  return (
-    <Flex flexWrap={WRAP}>
-      {icons.map(({ name, showText }, index) => (
-        <Flex
-          key={`icon_${name}`}
-          width="8.75rem"
-          flexDirection={DIRECTION_COLUMN}
-          alignItems={ALIGN_CENTER}
-          borderRadius={BORDERS.borderRadius12}
-          marginRight={SPACING.spacing8}
-          marginBottom={SPACING.spacing8}
-          padding={SPACING.spacing16}
-          onClick={() => handleCopy(name, index)}
-          border={
-            selectedIcon === name
-              ? `2px solid ${COLORS.blue50}`
-              : `2px solid ${COLORS.black90}`
-          }
-        >
-          <IconComponent name={name as IconName} size="4rem" />
-          <Text
-            textAlign={TYPOGRAPHY.textAlignCenter}
-            marginTop={SPACING.spacing8}
-            fontSize={TYPOGRAPHY.fontSizeP}
-          >
-            {name}
-          </Text>
-          <Flex height="1.5rem">
-            {showText ? <Text color={COLORS.blue50}> {'copied'}</Text> : null}
-          </Flex>
-        </Flex>
-      ))}
-    </Flex>
-  )
-}
-export const IconList = Template.bind({})
-IconList.args = {
-  backgroundColor: COLORS.blue50,
-}

package/src/icons/ModuleIcon.tsx

@@ -1,54 +0,0 @@
-import {
-  ABSORBANCE_READER_TYPE,
-  FLEX_STACKER_MODULE_TYPE,
-  HEATERSHAKER_MODULE_TYPE,
-  MAGNETIC_BLOCK_TYPE,
-  MAGNETIC_MODULE_TYPE,
-  TEMPERATURE_MODULE_TYPE,
-  THERMOCYCLER_MODULE_TYPE,
-} from '@opentrons/shared-data'
-
-import { withStyleProps } from '../hocs/withStyleProps'
-import { Icon } from './Icon'
-
-import type { ModuleType } from '@opentrons/shared-data'
-
-export type ModuleIconName =
-  | 'ot-magnet-v2'
-  | 'ot-heater-shaker'
-  | 'ot-temperature-v2'
-  | 'ot-magnet-v2'
-  | 'ot-thermocycler'
-  | 'ot-absorbance'
-  | 'ot-flex-stacker'
-
-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',
-  [FLEX_STACKER_MODULE_TYPE]: 'ot-flex-stacker',
-}
-
-interface ModuleIconProps {
-  moduleType: ModuleType
-}
-
-function ModuleIconComponent(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}`}
-    />
-  )
-}
-
-export const ModuleIcon = withStyleProps(ModuleIconComponent)

package/src/icons/NotificationIcon.tsx

@@ -1,41 +0,0 @@
-import { COLOR_WARNING } from '../styles'
-import { Icon } from './Icon'
-import { ICON_DATA_BY_NAME } from './icon-data'
-
-import type { IconName, IconProps } 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>
-  )
-}