fix(app): add info type to Chip component (#14631)

* fix(app): add info type to Chip component
Opentrons · Mar 16, 2024 · 54094a2 · 54094a2
1 parent 30d9548
commit 54094a2
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 29 deletions.
diff --git a/app/src/atoms/Chip/Chip.stories.tsx b/app/src/atoms/Chip/Chip.stories.tsx
@@ -6,6 +6,15 @@ import type { Story, Meta } from '@storybook/react'
 
 export default {
   title: 'ODD/Atoms/Chip',
+  argTypes: {
+    type: {
+      options: ['basic', 'error', 'info', 'neutral', 'success', 'warning'],
+      control: {
+        type: 'select',
+      },
+      defaultValue: 'basic',
+    },
+  },
   component: Chip,
   parameters: touchScreenViewport,
 } as Meta
@@ -25,32 +34,8 @@ const Template: Story<ChipStorybookProps> = ({ ...args }) => (
   </Flex>
 )
 
-export const Basic = Template.bind({})
-Basic.args = {
+export const ChipComponent = Template.bind({})
+ChipComponent.args = {
   type: 'basic',
-  text: 'Basic chip text',
-}
-
-export const Error = Template.bind({})
-Error.args = {
-  type: 'error',
-  text: 'Not connected',
-}
-
-export const Success = Template.bind({})
-Success.args = {
-  type: 'success',
-  text: 'Connected',
-}
-
-export const Warning = Template.bind({})
-Warning.args = {
-  type: 'warning',
-  text: 'Missing 1 module',
-}
-
-export const Neutral = Template.bind({})
-Neutral.args = {
-  type: 'neutral',
-  text: 'Not connected',
+  text: 'Chip component',
 }
diff --git a/app/src/atoms/Chip/__tests__/Chip.test.tsx b/app/src/atoms/Chip/__tests__/Chip.test.tsx
@@ -152,4 +152,35 @@ describe('Chip', () => {
     const icon = screen.getByLabelText('icon_mockError')
     expect(icon).toHaveStyle(`color: ${COLORS.red60}`)
   })
+
+  it('should render text, icon, bgcolor with info colors', () => {
+    props = {
+      text: 'mockInfo',
+      type: 'info',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_info')
+    const chipText = screen.getByText('mockInfo')
+    expect(chip).toHaveStyle(`background-color: ${COLORS.blue35}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.blue60}`)
+    const icon = screen.getByLabelText('icon_mockInfo')
+    expect(icon).toHaveStyle(`color: ${COLORS.blue60}`)
+  })
+
+  it('should render text, icon, no bgcolor with info colors and bg false', () => {
+    props = {
+      background: false,
+      text: 'mockInfo',
+      type: 'info',
+    }
+    render(props)
+    const chip = screen.getByTestId('Chip_info')
+    const chipText = screen.getByText('mockInfo')
+    expect(chip).toHaveStyle(`background-color: ${COLORS.transparent}`)
+    expect(chip).toHaveStyle(`border-radius: ${BORDERS.borderRadius40}`)
+    expect(chipText).toHaveStyle(`color: ${COLORS.blue60}`)
+    const icon = screen.getByLabelText('icon_mockInfo')
+    expect(icon).toHaveStyle(`color: ${COLORS.blue60}`)
+  })
 })
diff --git a/app/src/atoms/Chip/index.tsx b/app/src/atoms/Chip/index.tsx
@@ -15,7 +15,13 @@ import { StyledText } from '../text'
 
 import type { IconName, StyleProps } from '@opentrons/components'
 
-export type ChipType = 'basic' | 'error' | 'neutral' | 'success' | 'warning'
+export type ChipType =
+  | 'basic'
+  | 'error'
+  | 'info'
+  | 'neutral'
+  | 'success'
+  | 'warning'
 
 interface ChipProps extends StyleProps {
   /** Display background color? */
@@ -49,6 +55,12 @@ const CHIP_PROPS_BY_TYPE: Record<
     iconColor: COLORS.red60,
     textColor: COLORS.red60,
   },
+  info: {
+    backgroundColor: COLORS.blue35,
+    borderRadius: BORDERS.borderRadius40,
+    iconColor: COLORS.blue60,
+    textColor: COLORS.blue60,
+  },
   neutral: {
     backgroundColor: `${COLORS.black90}${COLORS.opacity20HexCode}`,
     borderRadius: BORDERS.borderRadius40,

diff --git a/app/src/atoms/SelectField/Select.tsx b/app/src/atoms/SelectField/Select.tsx
@@ -43,7 +43,7 @@ export function Select(props: SelectComponentProps): JSX.Element {
       ...styles,
       borderRadius: BORDERS.borderRadiusFull,
       border: BORDERS.lineBorder,
-      width: props.width != null ? props.width : 'auto',
+      width: props.width ?? 'auto',
       height: SPACING.spacing16,
       borderColor: COLORS.grey30,
       boxShadow: 'none',