@opentrons/components 0.1.6-alpha.9 → 0.1.7-alpha.1

package/src/atoms/Chip/index.tsx

@@ -0,0 +1,198 @@
+import { css } from 'styled-components'
+
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
+import { Flex } from '../../primitives'
+import { ALIGN_CENTER, DIRECTION_ROW, FLEX_MAX_CONTENT } from '../../styles'
+import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { LegacyStyledText } from '../StyledText'
+
+import type { FlattenSimpleInterpolation } from 'styled-components'
+import type { IconName } from '../../icons'
+import type { StyleProps } from '../../primitives'
+
+export type ChipType = 'error' | 'info' | 'neutral' | 'success' | 'warning'
+
+type ChipSize = 'medium' | 'small'
+
+interface ChipProps extends StyleProps {
+  /** Display background color? */
+  background?: boolean
+  /** Chip icon */
+  iconName?: IconName
+  /** Chip content */
+  text: string
+  /** name constant of the text color and the icon color to display */
+  type: ChipType
+  /** has icon */
+  hasIcon?: boolean
+  /** Chip size medium is the default size */
+  chipSize?: ChipSize
+  /** icon should pulse */
+  pulseIcon?: boolean
+}
+
+const CHIP_PROPS_BY_TYPE: Record<
+  ChipType,
+  {
+    backgroundColor: string
+    borderRadius: string
+    iconColor?: string
+    iconName?: IconName
+    textColor: string
+  }
+> = {
+  error: {
+    backgroundColor: COLORS.red35,
+    borderRadius: BORDERS.borderRadiusFull,
+    iconColor: COLORS.red60,
+    textColor: COLORS.red60,
+  },
+  info: {
+    backgroundColor: COLORS.blue35,
+    borderRadius: BORDERS.borderRadiusFull,
+    iconColor: COLORS.blue60,
+    textColor: COLORS.blue60,
+  },
+  neutral: {
+    backgroundColor: `${COLORS.black90}${COLORS.opacity20HexCode}`,
+    borderRadius: BORDERS.borderRadiusFull,
+    iconColor: COLORS.grey60,
+    textColor: COLORS.grey60,
+  },
+  success: {
+    backgroundColor: COLORS.green35,
+    borderRadius: BORDERS.borderRadiusFull,
+    iconColor: COLORS.green60,
+    iconName: 'ot-check',
+    textColor: COLORS.green60,
+  },
+  warning: {
+    backgroundColor: COLORS.yellow35,
+    borderRadius: BORDERS.borderRadiusFull,
+    iconColor: COLORS.yellow60,
+    textColor: COLORS.yellow60,
+  },
+}
+
+export function Chip(props: ChipProps): JSX.Element {
+  const {
+    background,
+    iconName,
+    type,
+    text,
+    hasIcon = true,
+    chipSize = 'medium',
+    pulseIcon = false,
+    ...styleProps
+  } = props
+  const backgroundColor =
+    background === false
+      ? COLORS.transparent
+      : CHIP_PROPS_BY_TYPE[type].backgroundColor
+  const icon = iconName ?? CHIP_PROPS_BY_TYPE[type].iconName ?? 'ot-alert'
+  const iconColor = CHIP_PROPS_BY_TYPE[type].iconColor
+
+  const smallSize = iconName === 'connection-status' ? '0.5rem' : '0.75rem'
+
+  return (
+    <Flex
+      alignItems={ALIGN_CENTER}
+      backgroundColor={backgroundColor}
+      borderRadius={CHIP_PROPS_BY_TYPE[type].borderRadius}
+      flexDirection={DIRECTION_ROW}
+      height={FLEX_MAX_CONTENT}
+      css={
+        chipSize === 'medium'
+          ? MEDIUM_CONTAINER_STYLE(background)
+          : SMALL_CONTAINER_STYLE(background)
+      }
+      data-testid={`Chip_${type}`}
+      {...styleProps}
+    >
+      {hasIcon ? (
+        <Icon
+          name={icon}
+          color={iconColor}
+          aria-label={`icon_${text}`}
+          css={ICON_STYLE(chipSize, smallSize)}
+        >
+          {pulseIcon ? (
+            <animate
+              attributeName="fill"
+              values={`${iconColor}; transparent`}
+              dur="1s"
+              calcMode="discrete"
+              repeatCount="indefinite"
+              data-testid={`Chip_${type}_icon_animate`}
+            />
+          ) : null}
+        </Icon>
+      ) : null}
+      <LegacyStyledText
+        css={TEXT_STYLE(chipSize)}
+        color={CHIP_PROPS_BY_TYPE[type].textColor}
+      >
+        {text}
+      </LegacyStyledText>
+    </Flex>
+  )
+}
+
+const WEB_MEDIUM_TEXT_STYLE = css`
+  font-size: ${TYPOGRAPHY.fontSizeH4};
+  line-height: ${TYPOGRAPHY.lineHeight20};
+  font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+`
+const WEB_SMALL_TEXT_STYLE = css`
+  font-size: ${TYPOGRAPHY.fontSizeP};
+  line-height: ${TYPOGRAPHY.lineHeight16};
+  font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+`
+
+const ICON_STYLE = (
+  chipSize: ChipSize,
+  smallSize: string
+): FlattenSimpleInterpolation => css`
+  width: ${chipSize === 'medium' ? '1rem' : smallSize};
+  height: ${chipSize === 'medium' ? '1rem' : smallSize};
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    width: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
+    height: ${chipSize === 'medium' ? '1.5rem' : '1.25rem'};
+  }
+`
+
+const TEXT_STYLE = (chipSize: ChipSize): FlattenSimpleInterpolation => css`
+  ${chipSize === 'medium' ? WEB_MEDIUM_TEXT_STYLE : WEB_SMALL_TEXT_STYLE}
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    ${chipSize === 'medium'
+      ? TYPOGRAPHY.bodyTextSemiBold
+      : TYPOGRAPHY.smallBodyTextSemiBold}
+  }
+`
+
+const MEDIUM_CONTAINER_STYLE = (
+  background?: boolean
+): FlattenSimpleInterpolation => css`
+  padding: ${SPACING.spacing2} ${background === false ? 0 : SPACING.spacing8};
+  grid-gap: ${SPACING.spacing4};
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    padding: ${SPACING.spacing8} ${background === false ? 0 : SPACING.spacing16};
+    grid-gap: ${SPACING.spacing8};
+  }
+`
+
+const SMALL_CONTAINER_STYLE = (
+  background?: boolean
+): FlattenSimpleInterpolation => css`
+  padding: ${SPACING.spacing4} ${background === false ? 0 : SPACING.spacing6};
+  grid-gap: ${SPACING.spacing4};
+
+  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+    padding: ${SPACING.spacing4} ${background === false ? 0 : SPACING.spacing8};
+    grid-gap: ${SPACING.spacing4};
+  }
+`

package/src/atoms/Divider/index.tsx

@@ -0,0 +1,16 @@
+import { Box, COLORS, SPACING } from '../..'
+
+import type { ComponentProps } from 'react'
+
+type Props = ComponentProps<typeof Box>
+
+export function Divider(props: Props): JSX.Element {
+  return (
+    <Box
+      borderBottom={`1px solid ${String(COLORS.grey30)}`}
+      marginY={SPACING.spacing4}
+      {...props}
+      data-testid="divider"
+    />
+  )
+}

package/src/atoms/InlineNotification/InlineNotification.stories.tsx

@@ -0,0 +1,107 @@
+import { VIEWPORT } from '../../ui-style-constants'
+import { InlineNotification } from './index'
+
+import type { Meta, Story } from '@storybook/react'
+import type * as React from 'react'
+
+export default {
+  title: 'Helix/Atoms/InlineNotification',
+  argTypes: {
+    hug: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: false,
+    },
+    type: {
+      options: ['alert', 'error', 'neutral', 'success'],
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'success',
+    },
+    onCloseClick: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: true,
+    },
+    hasMessage: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: true,
+    },
+    message: {
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'hasMessage' },
+    },
+    hasLink: {
+      control: {
+        type: 'boolean',
+      },
+      defaultValue: false,
+    },
+    linkText: {
+      control: {
+        type: 'text',
+      },
+      if: { arg: 'hasLink' },
+    },
+  },
+  parameters: VIEWPORT.touchScreenViewport,
+} as Meta
+
+export interface WrapperProps extends React.ComponentProps<InlineNotification> {
+  hasMessage: boolean
+  hasLink: boolean
+}
+
+function Wrapper(props: WrapperProps): JSX.Element {
+  return (
+    <InlineNotification
+      {...props}
+      onCloseClick={
+        props.onCloseClick
+          ? () => {
+              console.log('Close clicked')
+            }
+          : undefined
+      }
+      message={props.hasMessage ? props.message : undefined}
+      linkText={props.hasLink ? props.linkText : undefined}
+      onLinkClick={
+        props.hasLink
+          ? () => {
+              console.log('Link clicked')
+            }
+          : undefined
+      }
+    />
+  )
+}
+
+const Template: Story<React.ComponentProps<typeof Wrapper>> = args => (
+  <Wrapper {...args} />
+)
+
+export const InlineNotificationComponent = Template.bind({})
+InlineNotificationComponent.args = {
+  heading: 'awesome',
+  message: 'you did it',
+  type: 'success',
+  hasMessage: true,
+  hasLink: false,
+}
+
+export const InlineNotificationWithLink = Template.bind({})
+InlineNotificationWithLink.args = {
+  heading: 'Something has happened',
+  message: 'Here is an alert about it',
+  type: 'neutral',
+  hasMessage: true,
+  hasLink: true,
+  linkText: 'Link',
+}

package/src/atoms/InlineNotification/__tests__/InlineNotification.test.tsx

@@ -0,0 +1,66 @@
+import { fireEvent, screen } from '@testing-library/react'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { InlineNotification } from '..'
+import { renderWithProviders } from '../../../testing/utils'
+
+import type { ComponentProps } from 'react'
+
+const render = (props: ComponentProps<typeof InlineNotification>) => {
+  return renderWithProviders(<InlineNotification {...props} />)[0]
+}
+
+describe('InlineNotification', () => {
+  let props: ComponentProps<typeof InlineNotification>
+
+  beforeEach(() => {
+    props = {
+      type: 'success',
+      heading: 'TITLE',
+    }
+  })
+  it('renders success inline notification', () => {
+    render(props)
+    screen.getByLabelText('icon_success')
+    screen.getByText('TITLE')
+  })
+  it('renders success inline notification with exit button and when click dismisses inline notification', () => {
+    props = {
+      type: 'success',
+      heading: 'TITLE',
+      onCloseClick: vi.fn(),
+    }
+    render(props)
+    screen.getByText('TITLE')
+    const btn = screen.getByLabelText('close_icon')
+    fireEvent.click(btn)
+    expect(props.onCloseClick).toHaveBeenCalled()
+  })
+  it('renders alert inline notification', () => {
+    props = {
+      type: 'alert',
+      heading: 'TITLE',
+    }
+    render(props)
+    screen.getByLabelText('icon_alert')
+    screen.getByText('TITLE')
+  })
+  it('renders error inline notification', () => {
+    props = {
+      type: 'error',
+      heading: 'TITLE',
+    }
+    render(props)
+    screen.getByLabelText('icon_error')
+    screen.getByText('TITLE')
+  })
+  it('renders neutral inline notification', () => {
+    props = {
+      type: 'neutral',
+      heading: 'TITLE',
+    }
+    render(props)
+    screen.getByLabelText('icon_neutral')
+    screen.getByText('TITLE')
+  })
+})

package/src/atoms/InlineNotification/index.tsx

@@ -0,0 +1,197 @@
+import { css } from 'styled-components'
+
+import { BORDERS, COLORS } from '../../helix-design-system'
+import { Icon } from '../../icons'
+import { Box, Btn, Flex, Link } from '../../primitives'
+import {
+  ALIGN_CENTER,
+  DIRECTION_ROW,
+  JUSTIFY_FLEX_END,
+  JUSTIFY_FLEX_START,
+  JUSTIFY_SPACE_BETWEEN,
+} from '../../styles'
+import { RESPONSIVENESS, SPACING, TYPOGRAPHY } from '../../ui-style-constants'
+import { StyledText } from '../StyledText'
+
+import type { MouseEventHandler } from 'react'
+import type { IconProps } from '../../icons'
+import type { StyleProps } from '../../primitives'
+
+type InlineNotificationType = 'alert' | 'error' | 'neutral' | 'success'
+
+export interface InlineNotificationProps extends StyleProps {
+  /** name constant of the icon to display */
+  type: InlineNotificationType
+  /** InlineNotification contents */
+  heading: string
+  message?: string
+  /** Optional dynamic width based on contents */
+  hug?: boolean
+  /** optional handler to show close button/clear alert  */
+  onCloseClick?: (() => void) | MouseEventHandler<HTMLButtonElement>
+  linkText?: string
+  onLinkClick?: (() => void) | MouseEventHandler<HTMLButtonElement>
+}
+
+const INLINE_NOTIFICATION_PROPS_BY_TYPE: Record<
+  InlineNotificationType,
+  { icon: IconProps; backgroundColor: string; color: string }
+> = {
+  alert: {
+    icon: { name: 'ot-alert' },
+    backgroundColor: COLORS.yellow30,
+    color: COLORS.yellow60,
+  },
+  error: {
+    icon: { name: 'ot-alert' },
+    backgroundColor: COLORS.red30,
+    color: COLORS.red60,
+  },
+  neutral: {
+    icon: { name: 'information' },
+    backgroundColor: COLORS.blue30,
+    color: COLORS.blue60,
+  },
+  success: {
+    icon: { name: 'ot-check' },
+    backgroundColor: COLORS.green30,
+    color: COLORS.green60,
+  },
+}
+
+export function InlineNotification(
+  props: InlineNotificationProps
+): JSX.Element {
+  const {
+    heading,
+    hug = false,
+    onCloseClick,
+    message,
+    type,
+    linkText,
+    onLinkClick,
+  } = props
+  const fullHeading = `${heading}${message ? '. ' : ''}`
+  const fullmessage = `${message}.`
+  const inlineNotificationProps = INLINE_NOTIFICATION_PROPS_BY_TYPE[type]
+  const iconProps = {
+    ...inlineNotificationProps.icon,
+    color: INLINE_NOTIFICATION_PROPS_BY_TYPE[type].color,
+    size: '100%',
+  }
+  return (
+    <Flex
+      alignItems={ALIGN_CENTER}
+      backgroundColor={INLINE_NOTIFICATION_PROPS_BY_TYPE[type].backgroundColor}
+      data-testid={`InlineNotification_${type}`}
+      flexDirection={DIRECTION_ROW}
+      justifyContent={JUSTIFY_SPACE_BETWEEN}
+      width={hug ? 'max-content' : '100%'}
+      css={css`
+        gap: ${SPACING.spacing8};
+        border-radius: ${BORDERS.borderRadius4};
+        padding: ${SPACING.spacing8} ${SPACING.spacing12};
+        @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+          gap: ${SPACING.spacing12};
+          border-radius: ${BORDERS.borderRadius8};
+          padding: ${SPACING.spacing12} ${SPACING.spacing16};
+        }
+      `}
+    >
+      <Flex
+        justifyContent={JUSTIFY_FLEX_START}
+        alignItems={ALIGN_CENTER}
+        flexDirection={DIRECTION_ROW}
+        css={css`
+          gap: ${SPACING.spacing8};
+          @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+            gap: ${SPACING.spacing12};
+          }
+        `}
+      >
+        <Box
+          css={css`
+            width: ${SPACING.spacing16};
+            height: ${SPACING.spacing16};
+            @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+              width: 1.75rem;
+              height: 1.75rem;
+            }
+          `}
+        >
+          <Icon {...iconProps} aria-label={`icon_${type}`} />
+        </Box>
+        <Flex flex="1" alignItems={ALIGN_CENTER}>
+          <StyledText
+            oddStyle="bodyTextRegular"
+            desktopStyle="bodyDefaultRegular"
+          >
+            <span
+              css={`
+                font-weight: ${TYPOGRAPHY.fontWeightSemiBold};
+              `}
+            >
+              {fullHeading}
+            </span>
+            {/* this break is because the desktop wants this on two lines, but also wants/
+              inline text layout on ODD. Soooo here you go */}
+            <br
+              css={`
+                @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+                  display: none;
+                }
+              `}
+            />
+            {message != null && fullmessage}
+          </StyledText>
+        </Flex>
+      </Flex>
+      <Flex
+        alignItems={ALIGN_CENTER}
+        justifyContent={JUSTIFY_FLEX_END}
+        gap={SPACING.spacing16}
+      >
+        {linkText && (
+          <Link onClick={onLinkClick}>
+            <StyledText
+              oddStyle="bodyTextRegular"
+              desktopStyle="bodyDefaultRegular"
+              textDecoration="underline"
+            >
+              {linkText}{' '}
+            </StyledText>
+          </Link>
+        )}
+        {onCloseClick && (
+          <Btn
+            data-testid="InlineNotification_close-button"
+            onClick={onCloseClick}
+            css={css`
+              width: 28px;
+              height: 28px;
+              @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+                width: ${SPACING.spacing48};
+                height: ${SPACING.spacing48};
+              }
+            `}
+            width=""
+            height="fit-content"
+          >
+            <Icon
+              aria-label="close_icon"
+              name="close"
+              css={css`
+                width: 28px;
+                height: 28px;
+                @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
+                  width: ${SPACING.spacing48};
+                  height: ${SPACING.spacing48};
+                }
+              `}
+            />
+          </Btn>
+        )}
+      </Flex>
+    </Flex>
+  )
+}

package/src/atoms/InputField/InputField.stories.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react'
+
+import {
+  DIRECTION_COLUMN,
+  Flex,
+  SPACING,
+  VIEWPORT,
+} from '@opentrons/components'
+
+import { InputField as InputFieldComponent } from './index'
+
+import type { Meta, StoryObj } from '@storybook/react'
+
+const meta: Meta<typeof InputFieldComponent> = {
+  // ToDo (kk05/02/2024) this should be in Library but at this moment there is the same name component in components
+  // The unification for this component will be done when the old component is retired completely.
+  title: 'App/Atoms/InputField',
+  component: InputFieldComponent,
+  parameters: VIEWPORT.touchScreenViewport,
+  argTypes: {
+    units: {
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof InputFieldComponent>
+
+export const InputField: Story = args => {
+  const [value, setValue] = React.useState(args.value)
+  return (
+    <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+      <InputFieldComponent
+        {...args}
+        value={value}
+        width="100%"
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          setValue(e.target.value)
+        }}
+        units={args.units ? 'rem' : undefined}
+      />
+    </Flex>
+  )
+}
+
+InputField.args = {
+  value: 200,
+  type: 'number',
+  caption: 'example caption',
+  max: 200,
+  min: 10,
+}
+
+export const InputFieldWithError: Story = args => {
+  const [value, setValue] = React.useState(args.value)
+  return (
+    <Flex flexDirection={DIRECTION_COLUMN} gridGap={SPACING.spacing4}>
+      <InputFieldComponent
+        {...args}
+        value={value}
+        width="100%"
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          setValue(e.target.value)
+        }}
+        units={args.type !== 'number' ? undefined : args.units}
+      />
+    </Flex>
+  )
+}
+
+InputFieldWithError.args = {
+  value: 300,
+  type: 'number',
+  max: 200,
+  min: 10,
+  error: 'input is not in the range',
+}