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

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

@@ -1,107 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,213 +0,0 @@
-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 { FlattenSimpleInterpolation } from 'styled-components'
-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%',
-  }
-  const backgroundColor =
-    INLINE_NOTIFICATION_PROPS_BY_TYPE[type].backgroundColor
-
-  return (
-    <Flex
-      data-testid={`InlineNotification_${type}`}
-      css={INLINE_NOTIFICATION_WRAPPER_STYLES(backgroundColor, hug)}
-    >
-      <Flex css={INLINE_NOTIFICATION_FLEX_STYLE}>
-        <Box css={INLINE_NOTIFICATION_BOX_STYLE}>
-          <Icon {...iconProps} aria-label={`icon_${type}`} />
-        </Box>
-        <Flex flex="1" alignItems={ALIGN_CENTER}>
-          <StyledText
-            oddStyle="bodyTextRegular"
-            desktopStyle="bodyDefaultRegular"
-          >
-            {heading != null && (
-              <>
-                <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={INLINE_NOTIFICATION_CLOSE_BUTTON_STYLE}
-            height="fit-content"
-          >
-            <Icon
-              aria-label="close_icon"
-              name="close"
-              css={INLINE_NOTIFICATION_ICON_STYLE}
-            />
-          </Btn>
-        )}
-      </Flex>
-    </Flex>
-  )
-}
-
-const INLINE_NOTIFICATION_WRAPPER_STYLES = (
-  backgroundColor: string,
-  hug: boolean
-): FlattenSimpleInterpolation => css`
-  background-color: ${backgroundColor};
-  align-items: ${ALIGN_CENTER};
-  flex-direction: ${DIRECTION_ROW};
-  justify-content: ${JUSTIFY_SPACE_BETWEEN};
-  width: ${hug ? 'max-content' : '100%'};
-  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};
-  }
-`
-
-const INLINE_NOTIFICATION_FLEX_STYLE = css`
-  justify-content: ${JUSTIFY_FLEX_START};
-  align-items: ${ALIGN_CENTER};
-  flex-direction: ${DIRECTION_ROW};
-  gap: ${SPACING.spacing8};
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    gap: ${SPACING.spacing12};
-  }
-`
-
-const INLINE_NOTIFICATION_BOX_STYLE = css`
-  width: 1rem;
-  height: 1rem;
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    width: 1.75rem;
-    height: 1.75rem;
-  }
-`
-
-const INLINE_NOTIFICATION_CLOSE_BUTTON_STYLE = css`
-  width: 1.75rem;
-  height: 1.75rem;
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    width: 3rem;
-    height: 3rem;
-  }
-`
-
-const INLINE_NOTIFICATION_ICON_STYLE = css`
-  width: 1.75rem;
-  height: 1.75rem;
-  @media ${RESPONSIVENESS.touchscreenMediaQuerySpecs} {
-    width: 3rem;
-    height: 3rem;
-  }
-`

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

@@ -1,80 +0,0 @@
-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',
-}

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

@@ -1,65 +0,0 @@
-import { fireEvent, screen } from '@testing-library/react'
-import { beforeEach, describe, expect, it, vi } from 'vitest'
-
-import { InputField } from '..'
-import { renderWithProviders } from '../../../testing/utils'
-
-import type { ComponentProps } from 'react'
-
-const render = (props: ComponentProps<typeof InputField>) => {
-  return renderWithProviders(<InputField {...props} />)[0]
-}
-
-describe('HeaterShakerSlideout', () => {
-  let props: ComponentProps<typeof InputField>
-  beforeEach(() => {
-    props = {
-      type: 'number',
-      caption: 'caption',
-      max: 10,
-      min: 1,
-      units: 'rpm',
-      value: '5',
-      disabled: false,
-      onFocus: vi.fn(),
-      onBlur: vi.fn(),
-      onChange: vi.fn(),
-      readOnly: false,
-      autoFocus: false,
-    }
-  })
-  it('renders correct information when type is number', () => {
-    render(props)
-    screen.getByText('caption')
-    screen.getByText('rpm')
-  })
-  it('renders correct information when type is text', () => {
-    props = {
-      type: 'text',
-      value: 'string',
-      units: 'C',
-      onChange: vi.fn(),
-    }
-    render(props)
-    screen.getByText('C')
-  })
-  it('renders error message when value is outside of number type range', () => {
-    props = {
-      type: 'number',
-      caption: 'caption',
-      max: 10,
-      min: 1,
-      units: 'rpm',
-      value: '9',
-      error: 'error',
-      onChange: vi.fn(),
-      id: 'input_id',
-    }
-    render(props)
-    const input = screen.getByTestId('input_id')
-    fireEvent.change(input, { target: { value: ['12'] } })
-    expect(props.onChange).toHaveBeenCalled()
-    screen.getByText('caption')
-    screen.getByText('error')
-  })
-})