@opentrons/components 0.1.6-alpha.2 → 0.1.6-alpha.21

package/src/hooks/useToggle.ts

@@ -0,0 +1,27 @@
+import { useReducer } from 'react'
+
+export type UseToggleResult = [boolean, () => void]
+
+/**
+ * React hook to toggle a boolean value
+ *
+ * @param {boolean} [intialValue=false] (initial toggle value)
+ * @returns {[boolean, () => void]} (value and setValue tuple)
+ *
+ * @example
+ * import * as React from 'react'
+ * import { useToggle } from '@opentrons/components'
+ *
+ * export function ToggleButton() {
+ *   const [enabled, toggleEnabled] = useToggle(true)
+ *
+ *   return (
+ *     <button onClick={toggleEnabled}>
+ *       Setting is {enabled ? 'enabled' : 'disabled'}
+ *     </button>
+ *   )
+ * }
+ */
+export function useToggle(initialValue: boolean = false): UseToggleResult {
+  return useReducer(value => !value, initialValue)
+}

package/src/icons/Icon.stories.tsx

@@ -0,0 +1,37 @@
+import { Flex } from '../primitives'
+import { SPACING } from '../ui-style-constants'
+import { ICON_DATA_BY_NAME } from './icon-data'
+import { Icon as IconComponent } from './Icon'
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof IconComponent> = {
+  title: 'Library/Atoms/Icon',
+  component: IconComponent,
+  argTypes: {
+    name: {
+      options: Object.keys(ICON_DATA_BY_NAME),
+      control: {
+        type: 'select',
+      },
+    },
+  },
+  decorators: [
+    Story => (
+      <Flex padding={SPACING.spacing16}>
+        <Story />
+      </Flex>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof IconComponent>
+
+export const Icon: Story = {
+  args: {
+    name: 'alert',
+    spin: false,
+    size: '4rem',
+  },
+}

package/src/icons/Icon.tsx

@@ -0,0 +1,79 @@
+import type * as React from 'react'
+import { css, keyframes } from 'styled-components'
+import cx from 'classnames'
+
+import { Svg } from '../primitives'
+import { ICON_DATA_BY_NAME } from './icon-data'
+
+import type { SvgProps } from '../primitives'
+
+export type IconName = keyof typeof ICON_DATA_BY_NAME
+
+export interface IconProps extends SvgProps {
+  /** name constant of the icon to display */
+  name: IconName
+  /** classes to apply */
+  className?: string
+  /** spin the icon with a CSS animation */
+  spin?: boolean
+  /** x attribute as a number or string (for nesting inside another SVG) */
+  x?: number | string
+  /** y attribute as a number or string (for nesting inside another SVG) */
+  y?: number | string
+  /** width as a number or string (for nesting inside another SVG) */
+  svgHeight?: number | string
+  /** height as a number or string (for nesting inside another SVG) */
+  svgWidth?: number | string
+  /** inline style passed into the icon svg */
+  style?: Record<string, string | number>
+  /** optional children */
+  children?: React.ReactNode
+  id?: string
+}
+
+const spinAnimation = keyframes`
+  100% {
+    transform: rotate(360deg);
+  }
+`
+
+const spinStyle = css`
+  &.spin {
+    animation: ${spinAnimation} 0.8s steps(8) infinite;
+    transform-origin: center;
+  }
+`
+
+/**
+ * Inline SVG icon component
+ *
+ * If you need access to the IconName type, you can:
+ * ```js
+ * import type { IconName } from '@opentrons/components'
+ * ```
+ */
+export function Icon(props: IconProps): JSX.Element | null {
+  const { name, children, className, spin, id, ...svgProps } = props
+
+  if (!(name in ICON_DATA_BY_NAME)) {
+    console.error(`"${name}" is not a valid Icon name`)
+    return null
+  }
+
+  const { viewBox, path } = ICON_DATA_BY_NAME[name]
+
+  return (
+    <Svg
+      aria-hidden="true"
+      fill="currentColor"
+      viewBox={viewBox}
+      className={cx(className, { spin })}
+      css={spinStyle}
+      {...svgProps}
+      id={id}
+    >
+      <path aria-roledescription={name} fillRule="evenodd" d={path} />
+      {props.children}
+    </Svg>
+  )
+}

package/src/icons/IconList.stories.tsx

@@ -0,0 +1,108 @@
+import * as React from 'react'
+
+import {
+  Text,
+  Flex,
+  DIRECTION_COLUMN,
+  WRAP,
+  TYPOGRAPHY,
+  ALIGN_CENTER,
+  COLORS,
+  SPACING,
+  BORDERS,
+} from '@opentrons/components'
+import { ICON_DATA_BY_NAME } from './icon-data'
+import { Icon as IconComponent } from './Icon'
+
+import type { Story, Meta } 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

@@ -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>
+  )
+}