From 563ee5d14e9c5a7a38ff48c9cef363dad4bf9a0f Mon Sep 17 00:00:00 2001 From: koji <kk2796@nyu.edu> Date: Wed, 20 Mar 2024 17:59:13 -0400 Subject: [PATCH] feat(components, app): update Chip component for unification update Chip component for unification. the details are below close AUTH-214 --- .../InlineNotification.stories.tsx | 4 ++-- app/src/atoms/ListItem/ListItem.stories.tsx | 10 +++++++--- app/src/atoms/Snackbar/Snackbar.stories.tsx | 4 ++-- .../CustomKeyboard/CustomKeyboard.stories.tsx | 4 ++-- .../NormalKeyboard/NormalKeyboard.stories.tsx | 6 +++--- .../Numpad/Numpad.stories.tsx | 4 ++-- app/src/atoms/Toast/ODDToast.stories.tsx | 4 ++-- .../buttons/FloatingActionButton.stories.tsx | 5 ++--- app/src/atoms/buttons/LargeButton.stories.tsx | 4 ++-- .../atoms/buttons/MediumButton.stories.tsx | 5 ++--- app/src/atoms/buttons/RadioButton.stories.tsx | 4 ++-- app/src/atoms/buttons/SmallButton.stories.tsx | 4 ++-- .../atoms/buttons/TabbedButton.stories.tsx | 4 ++-- .../BackgroundOverlay.stories.tsx | 5 ++--- .../CardButton/CardButton.stories.tsx | 5 ++--- app/src/molecules/Modal/Modal.stories.tsx | 5 ++--- .../molecules/Modal/ModalHeader.stories.tsx | 5 ++--- .../Modal/SmallModalChildren.stories.tsx | 4 ++-- .../ODDBackButton/ODDBackButton.stories.tsx | 4 ++-- .../ChildNavigation.stories.tsx | 4 ++-- .../AddFixtureModal.stories.tsx | 4 ++-- ...nfigurationDiscardChangesModal.stories.tsx | 4 ++-- ...ckFixtureSetupInstructionModal.stories.tsx | 4 ++-- .../ProtocolRunRunTimeParameters.tsx | 1 - .../EmergencyStop/EstopPressedModal.tsx | 2 +- .../TouchscreenEstopMissingModal.stories.tsx | 5 +++-- .../TouchscreenEstopPressedModal.stories.tsx | 5 +++-- .../TerseOffsetTable.stories.tsx | 6 +++--- .../RobotDashboard/RecentRunProtocolCard.tsx | 2 +- .../FixtureTable.tsx | 2 +- .../ModuleTable.tsx | 2 +- .../ResetValuesModal.stories.tsx | 5 ++--- .../NetworkSettings/index.tsx | 19 +++++++++---------- app/src/pages/ProtocolDetails/index.tsx | 2 +- .../src/atoms/Chip/Chip.stories.tsx | 12 +++++++----- .../src/atoms/Chip/__tests__/Chip.test.tsx | 4 ++-- {app => components}/src/atoms/Chip/index.tsx | 2 +- components/src/atoms/index.ts | 3 ++- components/src/ui-style-constants/index.ts | 3 ++- .../src/ui-style-constants/viewport.ts | 0 40 files changed, 91 insertions(+), 90 deletions(-) rename {app => components}/src/atoms/Chip/Chip.stories.tsx (74%) rename {app => components}/src/atoms/Chip/__tests__/Chip.test.tsx (98%) rename {app => components}/src/atoms/Chip/index.tsx (98%) rename app/src/DesignTokens/constants.ts => components/src/ui-style-constants/viewport.ts (100%) diff --git a/app/src/atoms/InlineNotification/InlineNotification.stories.tsx b/app/src/atoms/InlineNotification/InlineNotification.stories.tsx index 313d278c0fa..ec3af22be3e 100644 --- a/app/src/atoms/InlineNotification/InlineNotification.stories.tsx +++ b/app/src/atoms/InlineNotification/InlineNotification.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { touchScreenViewport } from '../../DesignTokens/constants' +import { VIEWPORT } from '@opentrons/components' import { InlineNotification } from '.' import type { Story, Meta } from '@storybook/react' @@ -26,7 +26,7 @@ export default { defaultValue: true, }, }, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const Template: Story< diff --git a/app/src/atoms/ListItem/ListItem.stories.tsx b/app/src/atoms/ListItem/ListItem.stories.tsx index 28c6d1cca90..c6b55e06d38 100644 --- a/app/src/atoms/ListItem/ListItem.stories.tsx +++ b/app/src/atoms/ListItem/ListItem.stories.tsx @@ -1,6 +1,10 @@ import * as React from 'react' -import { DIRECTION_COLUMN, Flex, SPACING } from '@opentrons/components' -import { touchScreenViewport } from '../../DesignTokens/constants' +import { + DIRECTION_COLUMN, + Flex, + SPACING, + VIEWPORT, +} from '@opentrons/components' import { StyledText } from '../text' import { ListItem } from '.' import type { Story, Meta } from '@storybook/react' @@ -15,7 +19,7 @@ export default { }, }, }, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const ListItemTemplate: Story<React.ComponentProps<typeof ListItem>> = args => ( diff --git a/app/src/atoms/Snackbar/Snackbar.stories.tsx b/app/src/atoms/Snackbar/Snackbar.stories.tsx index f1bbb35048a..55581813ab4 100644 --- a/app/src/atoms/Snackbar/Snackbar.stories.tsx +++ b/app/src/atoms/Snackbar/Snackbar.stories.tsx @@ -7,9 +7,9 @@ import { JUSTIFY_CENTER, PrimaryButton, SPACING, + VIEWPORT, } from '@opentrons/components' import { StyledText } from '../text' -import { touchScreenViewport } from '../../DesignTokens/constants' import { Snackbar } from './index' import type { Story, Meta } from '@storybook/react' @@ -17,7 +17,7 @@ import type { Story, Meta } from '@storybook/react' export default { title: 'ODD/Atoms/Snackbar', component: Snackbar, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const DefaultTemplate: Story<React.ComponentProps<typeof Snackbar>> = args => { diff --git a/app/src/atoms/SoftwareKeyboard/CustomKeyboard/CustomKeyboard.stories.tsx b/app/src/atoms/SoftwareKeyboard/CustomKeyboard/CustomKeyboard.stories.tsx index e298911ee0f..97def6fe114 100644 --- a/app/src/atoms/SoftwareKeyboard/CustomKeyboard/CustomKeyboard.stories.tsx +++ b/app/src/atoms/SoftwareKeyboard/CustomKeyboard/CustomKeyboard.stories.tsx @@ -1,11 +1,11 @@ import * as React from 'react' import { - Flex, DIRECTION_COLUMN, + Flex, POSITION_ABSOLUTE, SPACING, + VIEWPORT, } from '@opentrons/components' -import { touchScreenViewport } from '../../../DesignTokens/constants' import { InputField } from '../../InputField' import { CustomKeyboard } from './' import '../index.css' diff --git a/app/src/atoms/SoftwareKeyboard/NormalKeyboard/NormalKeyboard.stories.tsx b/app/src/atoms/SoftwareKeyboard/NormalKeyboard/NormalKeyboard.stories.tsx index c245ca23be9..7883d6fbdd0 100644 --- a/app/src/atoms/SoftwareKeyboard/NormalKeyboard/NormalKeyboard.stories.tsx +++ b/app/src/atoms/SoftwareKeyboard/NormalKeyboard/NormalKeyboard.stories.tsx @@ -1,11 +1,11 @@ import * as React from 'react' import { - Flex, DIRECTION_COLUMN, + Flex, POSITION_ABSOLUTE, SPACING, + VIEWPORT, } from '@opentrons/components' -import { touchScreenViewport } from '../../../DesignTokens/constants' import { InputField } from '../../InputField' import { NormalKeyboard } from '.' @@ -17,7 +17,7 @@ import type { Story, Meta } from '@storybook/react' export default { title: 'ODD/Atoms/SoftwareKeyboard/NormalKeyboard', component: NormalKeyboard, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const Template: Story<React.ComponentProps<typeof NormalKeyboard>> = args => { diff --git a/app/src/atoms/SoftwareKeyboard/Numpad/Numpad.stories.tsx b/app/src/atoms/SoftwareKeyboard/Numpad/Numpad.stories.tsx index f87ca54481b..d5a569cd284 100644 --- a/app/src/atoms/SoftwareKeyboard/Numpad/Numpad.stories.tsx +++ b/app/src/atoms/SoftwareKeyboard/Numpad/Numpad.stories.tsx @@ -4,8 +4,8 @@ import { DIRECTION_COLUMN, POSITION_ABSOLUTE, SPACING, + VIEWPORT, } from '@opentrons/components' -import { touchScreenViewport } from '../../../DesignTokens/constants' import { InputField } from '../../InputField' import { Numpad } from './' import '../index.css' @@ -16,7 +16,7 @@ import type { Story, Meta } from '@storybook/react' export default { title: 'ODD/Atoms/SoftwareKeyboard/Numpad', component: Numpad, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const Template: Story<React.ComponentProps<typeof Numpad>> = args => { diff --git a/app/src/atoms/Toast/ODDToast.stories.tsx b/app/src/atoms/Toast/ODDToast.stories.tsx index 2f0e72fb0b7..958b115ac16 100644 --- a/app/src/atoms/Toast/ODDToast.stories.tsx +++ b/app/src/atoms/Toast/ODDToast.stories.tsx @@ -7,8 +7,8 @@ import { POSITION_FIXED, PrimaryButton, SPACING, + VIEWPORT, } from '@opentrons/components' -import { touchScreenViewport } from '../../DesignTokens/constants' import { StyledText } from '../text' import { Toast } from '.' import type { Story, Meta } from '@storybook/react' @@ -16,7 +16,7 @@ import type { Story, Meta } from '@storybook/react' export default { title: 'ODD/Atoms/Toast', component: Toast, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const Template: Story<React.ComponentProps<typeof Toast>> = args => { diff --git a/app/src/atoms/buttons/FloatingActionButton.stories.tsx b/app/src/atoms/buttons/FloatingActionButton.stories.tsx index 820f1ec9618..a7526805a20 100644 --- a/app/src/atoms/buttons/FloatingActionButton.stories.tsx +++ b/app/src/atoms/buttons/FloatingActionButton.stories.tsx @@ -1,6 +1,5 @@ import * as React from 'react' -import { ICON_DATA_BY_NAME } from '@opentrons/components' -import { touchScreenViewport } from '../../DesignTokens/constants' +import { ICON_DATA_BY_NAME, VIEWPORT } from '@opentrons/components' import { FloatingActionButton } from './' import type { Story, Meta } from '@storybook/react' @@ -17,7 +16,7 @@ export default { }, onClick: { action: 'clicked' }, }, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const FloatingActionButtonTemplate: Story< diff --git a/app/src/atoms/buttons/LargeButton.stories.tsx b/app/src/atoms/buttons/LargeButton.stories.tsx index 737dada7656..f1f9427a4cf 100644 --- a/app/src/atoms/buttons/LargeButton.stories.tsx +++ b/app/src/atoms/buttons/LargeButton.stories.tsx @@ -1,12 +1,12 @@ import * as React from 'react' -import { touchScreenViewport } from '../../DesignTokens/constants' +import { VIEWPORT } from '@opentrons/components' import { LargeButton } from './' import type { Story, Meta } from '@storybook/react' export default { title: 'ODD/Atoms/Buttons/LargeButton', argTypes: { onClick: { action: 'clicked' } }, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const LargeButtonTemplate: Story< diff --git a/app/src/atoms/buttons/MediumButton.stories.tsx b/app/src/atoms/buttons/MediumButton.stories.tsx index 17d67f76093..667947b7e08 100644 --- a/app/src/atoms/buttons/MediumButton.stories.tsx +++ b/app/src/atoms/buttons/MediumButton.stories.tsx @@ -1,6 +1,5 @@ import * as React from 'react' -import { ICON_DATA_BY_NAME } from '@opentrons/components' -import { touchScreenViewport } from '../../DesignTokens/constants' +import { ICON_DATA_BY_NAME, VIEWPORT } from '@opentrons/components' import { MediumButton } from './' import type { Story, Meta } from '@storybook/react' @@ -29,7 +28,7 @@ export default { defaultValue: undefined, }, }, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const MediumButtonTemplate: Story< diff --git a/app/src/atoms/buttons/RadioButton.stories.tsx b/app/src/atoms/buttons/RadioButton.stories.tsx index 7bb570ffae9..3869cb70cc7 100644 --- a/app/src/atoms/buttons/RadioButton.stories.tsx +++ b/app/src/atoms/buttons/RadioButton.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { touchScreenViewport } from '../../DesignTokens/constants' +import { VIEWPORT } from '@opentrons/components' import { RadioButton } from './' import type { Story, Meta } from '@storybook/react' @@ -16,7 +16,7 @@ export default { }, onClick: { action: 'clicked' }, }, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const RadioButtonTemplate: Story< diff --git a/app/src/atoms/buttons/SmallButton.stories.tsx b/app/src/atoms/buttons/SmallButton.stories.tsx index cb1263f8a6c..f587f7f4e13 100644 --- a/app/src/atoms/buttons/SmallButton.stories.tsx +++ b/app/src/atoms/buttons/SmallButton.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { touchScreenViewport } from '../../DesignTokens/constants' +import { VIEWPORT } from '@opentrons/components' import { SmallButton } from './' import type { Story, Meta } from '@storybook/react' @@ -8,7 +8,7 @@ export default { title: 'ODD/Atoms/Buttons/SmallButton', argTypes: { onClick: { action: 'clicked' } }, component: SmallButton, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const Template: Story<React.ComponentProps<typeof SmallButton>> = args => ( diff --git a/app/src/atoms/buttons/TabbedButton.stories.tsx b/app/src/atoms/buttons/TabbedButton.stories.tsx index 27efbc36a87..60c5131da3b 100644 --- a/app/src/atoms/buttons/TabbedButton.stories.tsx +++ b/app/src/atoms/buttons/TabbedButton.stories.tsx @@ -1,12 +1,12 @@ import * as React from 'react' -import { touchScreenViewport } from '../../DesignTokens/constants' +import { VIEWPORT } from '@opentrons/components' import { TabbedButton } from './' import type { Story, Meta } from '@storybook/react' export default { title: 'ODD/Atoms/Buttons/TabbedButton', argTypes: { onClick: { action: 'clicked' } }, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const TabbedButtonTemplate: Story< diff --git a/app/src/molecules/BackgroundOverlay/BackgroundOverlay.stories.tsx b/app/src/molecules/BackgroundOverlay/BackgroundOverlay.stories.tsx index e0b8c9bee1c..c021f25a47e 100644 --- a/app/src/molecules/BackgroundOverlay/BackgroundOverlay.stories.tsx +++ b/app/src/molecules/BackgroundOverlay/BackgroundOverlay.stories.tsx @@ -1,13 +1,12 @@ import * as React from 'react' -import { Flex, PrimaryButton } from '@opentrons/components' -import { touchScreenViewport } from '../../DesignTokens/constants' +import { Flex, PrimaryButton, VIEWPORT } from '@opentrons/components' import { StyledText } from '../../atoms/text' import { BackgroundOverlay } from './index' import type { Story, Meta } from '@storybook/react' export default { title: 'ODD/Molecules/BackgroundOverlay', - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const Template: Story< diff --git a/app/src/molecules/CardButton/CardButton.stories.tsx b/app/src/molecules/CardButton/CardButton.stories.tsx index 38ce4a0f609..3ac71a8e3bf 100644 --- a/app/src/molecules/CardButton/CardButton.stories.tsx +++ b/app/src/molecules/CardButton/CardButton.stories.tsx @@ -1,7 +1,6 @@ import * as React from 'react' import { MemoryRouter } from 'react-router-dom' -import { Flex, SPACING } from '@opentrons/components' -import { touchScreenViewport } from '../../DesignTokens/constants' +import { Flex, SPACING, VIEWPORT } from '@opentrons/components' import { GlobalStyle } from '../../atoms/GlobalStyle' import { CardButton } from '.' @@ -10,7 +9,7 @@ import type { Story, Meta } from '@storybook/react' export default { title: 'ODD/Molecules/CardButton', component: CardButton, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, decorators: [ Story => ( <> diff --git a/app/src/molecules/Modal/Modal.stories.tsx b/app/src/molecules/Modal/Modal.stories.tsx index e29a6197224..09456d77828 100644 --- a/app/src/molecules/Modal/Modal.stories.tsx +++ b/app/src/molecules/Modal/Modal.stories.tsx @@ -1,6 +1,5 @@ import * as React from 'react' -import { COLORS, Flex, BORDERS, SPACING } from '@opentrons/components' -import { touchScreenViewport } from '../../DesignTokens/constants' +import { COLORS, Flex, BORDERS, SPACING, VIEWPORT } from '@opentrons/components' import { Modal } from './Modal' import type { Story, Meta } from '@storybook/react' @@ -13,7 +12,7 @@ export default { }, onOutsideClick: { action: 'clicked' }, }, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const Template: Story<React.ComponentProps<typeof Modal>> = args => ( diff --git a/app/src/molecules/Modal/ModalHeader.stories.tsx b/app/src/molecules/Modal/ModalHeader.stories.tsx index 0beabe6ba1b..92e9c83f9b4 100644 --- a/app/src/molecules/Modal/ModalHeader.stories.tsx +++ b/app/src/molecules/Modal/ModalHeader.stories.tsx @@ -1,6 +1,5 @@ import * as React from 'react' -import { COLORS } from '@opentrons/components' -import { touchScreenViewport } from '../../DesignTokens/constants' +import { COLORS, VIEWPORT } from '@opentrons/components' import { ModalHeader } from './ModalHeader' import type { Story, Meta } from '@storybook/react' @@ -24,7 +23,7 @@ export default { }, onClick: { action: 'clicked' }, }, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const Template: Story<React.ComponentProps<typeof ModalHeader>> = args => ( diff --git a/app/src/molecules/Modal/SmallModalChildren.stories.tsx b/app/src/molecules/Modal/SmallModalChildren.stories.tsx index cdea430b18f..c1889ca718e 100644 --- a/app/src/molecules/Modal/SmallModalChildren.stories.tsx +++ b/app/src/molecules/Modal/SmallModalChildren.stories.tsx @@ -1,12 +1,12 @@ import * as React from 'react' -import { touchScreenViewport } from '../../DesignTokens/constants' +import { VIEWPORT } from '@opentrons/components' import { SmallModalChildren } from './SmallModalChildren' import type { Story, Meta } from '@storybook/react' export default { title: 'ODD/Molecules/Modals/SmallModalChildren', argTypes: { onClick: { action: 'clicked' } }, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const Template: Story< diff --git a/app/src/molecules/ODDBackButton/ODDBackButton.stories.tsx b/app/src/molecules/ODDBackButton/ODDBackButton.stories.tsx index 14a0d050ba5..6fad4d7ae4a 100644 --- a/app/src/molecules/ODDBackButton/ODDBackButton.stories.tsx +++ b/app/src/molecules/ODDBackButton/ODDBackButton.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { touchScreenViewport } from '../../DesignTokens/constants' +import { VIEWPORT } from '@opentrons/components' import { ODDBackButton } from '.' import type { Story, Meta } from '@storybook/react' @@ -8,7 +8,7 @@ export default { argTypes: { onClick: { action: 'clicked' }, }, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const ODDBackButtonTemplate: Story< diff --git a/app/src/organisms/ChildNavigation/ChildNavigation.stories.tsx b/app/src/organisms/ChildNavigation/ChildNavigation.stories.tsx index c39b4b20dc1..da15b3af90e 100644 --- a/app/src/organisms/ChildNavigation/ChildNavigation.stories.tsx +++ b/app/src/organisms/ChildNavigation/ChildNavigation.stories.tsx @@ -1,12 +1,12 @@ import * as React from 'react' -import { touchScreenViewport } from '../../DesignTokens/constants' +import { VIEWPORT } from '@opentrons/components' import { SmallButton } from '../../atoms/buttons' import { ChildNavigation } from '.' import type { Story, Meta } from '@storybook/react' export default { title: 'ODD/Organisms/ChildNavigation', - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const Template: Story<React.ComponentProps<typeof ChildNavigation>> = args => ( diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.stories.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.stories.tsx index cc5ddd4f4e7..034a18c1e77 100644 --- a/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.stories.tsx +++ b/app/src/organisms/DeviceDetailsDeckConfiguration/AddFixtureModal.stories.tsx @@ -1,6 +1,6 @@ import * as React from 'react' import { QueryClient, QueryClientProvider } from 'react-query' -import { touchScreenViewport } from '../../DesignTokens/constants' +import { VIEWPORT } from '@opentrons/components' import { AddFixtureModal } from './AddFixtureModal' import type { Story, Meta } from '@storybook/react' @@ -13,7 +13,7 @@ export default { }, onOutsideClick: { action: 'clicked' }, }, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const queryClient = new QueryClient() diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal.stories.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal.stories.tsx index d6b26521619..0fdee52a94e 100644 --- a/app/src/organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal.stories.tsx +++ b/app/src/organisms/DeviceDetailsDeckConfiguration/DeckConfigurationDiscardChangesModal.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { touchScreenViewport } from '../../DesignTokens/constants' +import { VIEWPORT } from '@opentrons/components' import { DeckConfigurationDiscardChangesModal } from './DeckConfigurationDiscardChangesModal' import type { Story, Meta } from '@storybook/react' @@ -12,7 +12,7 @@ export default { }, onOutsideClick: { action: 'clicked' }, }, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const Template: Story< diff --git a/app/src/organisms/DeviceDetailsDeckConfiguration/TouchScreenDeckFixtureSetupInstructionModal.stories.tsx b/app/src/organisms/DeviceDetailsDeckConfiguration/TouchScreenDeckFixtureSetupInstructionModal.stories.tsx index 5fcc8d339a9..ec078d74eea 100644 --- a/app/src/organisms/DeviceDetailsDeckConfiguration/TouchScreenDeckFixtureSetupInstructionModal.stories.tsx +++ b/app/src/organisms/DeviceDetailsDeckConfiguration/TouchScreenDeckFixtureSetupInstructionModal.stories.tsx @@ -1,5 +1,5 @@ import * as React from 'react' -import { touchScreenViewport } from '../../DesignTokens/constants' +import { VIEWPORT } from '@opentrons/components' import { DeckFixtureSetupInstructionsModal } from './DeckFixtureSetupInstructionsModal' import type { Story, Meta } from '@storybook/react' @@ -12,7 +12,7 @@ export default { }, onOutsideClick: { action: 'clicked' }, }, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const Template: Story< diff --git a/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx b/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx index cb7766e9976..eae028f23eb 100644 --- a/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx +++ b/app/src/organisms/Devices/ProtocolRun/ProtocolRunRunTimeParameters.tsx @@ -16,7 +16,6 @@ import { import { StyledText } from '../../../atoms/text' import { Banner } from '../../../atoms/Banner' import { Divider } from '../../../atoms/structure' -// import { Chip } from '../../../atoms/Chip' import { NoParameter } from '../../ProtocolDetails/ProtocolParameters/NoParameter' import { useMostRecentCompletedAnalysis } from '../../LabwarePositionCheck/useMostRecentCompletedAnalysis' diff --git a/app/src/organisms/EmergencyStop/EstopPressedModal.tsx b/app/src/organisms/EmergencyStop/EstopPressedModal.tsx index 3773a58bac8..6f5d31209a1 100644 --- a/app/src/organisms/EmergencyStop/EstopPressedModal.tsx +++ b/app/src/organisms/EmergencyStop/EstopPressedModal.tsx @@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next' import { ALIGN_CENTER, BORDERS, + Chip, COLORS, DIRECTION_COLUMN, DIRECTION_ROW, @@ -21,7 +22,6 @@ import { useAcknowledgeEstopDisengageMutation } from '@opentrons/react-api-clien import { getTopPortalEl } from '../../App/portal' import { Banner } from '../../atoms/Banner' -import { Chip } from '../../atoms/Chip' import { ListItem } from '../../atoms/ListItem' import { SmallButton } from '../../atoms/buttons' import { StyledText } from '../../atoms/text' diff --git a/app/src/organisms/EmergencyStop/TouchscreenEstopMissingModal.stories.tsx b/app/src/organisms/EmergencyStop/TouchscreenEstopMissingModal.stories.tsx index 0dd2f63e1d3..f2bb0cf2e7f 100644 --- a/app/src/organisms/EmergencyStop/TouchscreenEstopMissingModal.stories.tsx +++ b/app/src/organisms/EmergencyStop/TouchscreenEstopMissingModal.stories.tsx @@ -2,7 +2,8 @@ import * as React from 'react' import { Provider } from 'react-redux' import { createStore } from 'redux' -import { touchScreenViewport } from '../../DesignTokens/constants' +import { VIEWPORT } from '@opentrons/components' + import { configReducer } from '../../redux/config/reducer' import { EstopMissingModal } from '.' @@ -12,7 +13,7 @@ import type { Story, Meta } from '@storybook/react' export default { title: 'ODD/Organisms/EstopMissingModal', component: EstopMissingModal, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const dummyConfig = { diff --git a/app/src/organisms/EmergencyStop/TouchscreenEstopPressedModal.stories.tsx b/app/src/organisms/EmergencyStop/TouchscreenEstopPressedModal.stories.tsx index c2dcf554f65..7ea8618203d 100644 --- a/app/src/organisms/EmergencyStop/TouchscreenEstopPressedModal.stories.tsx +++ b/app/src/organisms/EmergencyStop/TouchscreenEstopPressedModal.stories.tsx @@ -3,7 +3,8 @@ import { Provider } from 'react-redux' import { createStore } from 'redux' import { QueryClient, QueryClientProvider } from 'react-query' -import { touchScreenViewport } from '../../DesignTokens/constants' +import { VIEWPORT } from '@opentrons/components' + import { configReducer } from '../../redux/config/reducer' import { EstopPressedModal } from '.' @@ -13,7 +14,7 @@ import type { Story, Meta } from '@storybook/react' export default { title: 'ODD/Organisms/EstopPressedModal', component: EstopPressedModal, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const dummyConfig = { diff --git a/app/src/organisms/LabwarePositionCheck/TerseOffsetTable.stories.tsx b/app/src/organisms/LabwarePositionCheck/TerseOffsetTable.stories.tsx index 2077ce88598..8acb76eee45 100644 --- a/app/src/organisms/LabwarePositionCheck/TerseOffsetTable.stories.tsx +++ b/app/src/organisms/LabwarePositionCheck/TerseOffsetTable.stories.tsx @@ -5,24 +5,24 @@ import { Flex, JUSTIFY_SPACE_BETWEEN, SPACING, + VIEWPORT, } from '@opentrons/components' import { fixture12Trough, fixtureTiprack10ul, - LabwareDefinition2, getLabwareDefURI, } from '@opentrons/shared-data' -import { touchScreenViewport } from '../../DesignTokens/constants' import { SmallButton } from '../../atoms/buttons' import { TerseOffsetTable } from './ResultsSummary' import type { Story, Meta } from '@storybook/react' +import type { LabwareDefinition2 } from '@opentrons/shared-data' export default { title: 'ODD/Organisms/TerseOffsetTable', component: TerseOffsetTable, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta // Note: 59rem(944px) is the size of ODD diff --git a/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx b/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx index 083a1b6d121..0fb424be5c4 100644 --- a/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx +++ b/app/src/organisms/OnDeviceDisplay/RobotDashboard/RecentRunProtocolCard.tsx @@ -7,6 +7,7 @@ import { formatDistance } from 'date-fns' import { BORDERS, COLORS, + Chip, DIRECTION_COLUMN, Flex, Icon, @@ -26,7 +27,6 @@ import { } from '@opentrons/api-client' import { StyledText } from '../../../atoms/text' -import { Chip } from '../../../atoms/Chip' import { ODD_FOCUS_VISIBLE } from '../../../atoms/buttons//constants' import { useTrackEvent } from '../../../redux/analytics' import { Skeleton } from '../../../atoms/Skeleton' diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx index 8a8435ea788..c9d7324c19d 100644 --- a/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx +++ b/app/src/organisms/ProtocolSetupModulesAndDeck/FixtureTable.tsx @@ -4,6 +4,7 @@ import { ALIGN_CENTER, BORDERS, COLORS, + Chip, DIRECTION_COLUMN, DIRECTION_ROW, Flex, @@ -20,7 +21,6 @@ import { } from '@opentrons/shared-data' import { SmallButton } from '../../atoms/buttons' -import { Chip } from '../../atoms/Chip' import { StyledText } from '../../atoms/text' import { useDeckConfigurationCompatibility } from '../../resources/deck_configuration/hooks' import { getRequiredDeckConfig } from '../../resources/deck_configuration/utils' diff --git a/app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx b/app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx index ae7d75206b0..3161a6b83c4 100644 --- a/app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx +++ b/app/src/organisms/ProtocolSetupModulesAndDeck/ModuleTable.tsx @@ -6,6 +6,7 @@ import { ALIGN_CENTER, BORDERS, COLORS, + Chip, DIRECTION_COLUMN, Flex, Icon, @@ -28,7 +29,6 @@ import { } from '@opentrons/shared-data' import { SmallButton } from '../../atoms/buttons' -import { Chip } from '../../atoms/Chip' import { StyledText } from '../../atoms/text' import { getModulePrepCommands } from '../../organisms/Devices/getModulePrepCommands' import { getModuleTooHot } from '../../organisms/Devices/getModuleTooHot' diff --git a/app/src/organisms/ProtocolSetupParameters/ResetValuesModal.stories.tsx b/app/src/organisms/ProtocolSetupParameters/ResetValuesModal.stories.tsx index ae7454efc47..975d8104a26 100644 --- a/app/src/organisms/ProtocolSetupParameters/ResetValuesModal.stories.tsx +++ b/app/src/organisms/ProtocolSetupParameters/ResetValuesModal.stories.tsx @@ -1,6 +1,5 @@ import * as React from 'react' - -import { touchScreenViewport } from '../../DesignTokens/constants' +import { VIEWPORT } from '@opentrons/components' import { ResetValuesModal } from './ResetValuesModal' import type { Story, Meta } from '@storybook/react' @@ -8,7 +7,7 @@ import type { Story, Meta } from '@storybook/react' export default { title: 'ODD/Organisms/ResetValuesModal', component: ResetValuesModal, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta const Template: Story<React.ComponentProps<typeof ResetValuesModal>> = args => ( diff --git a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/index.tsx b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/index.tsx index 3aadf02256d..43ec7b44d58 100644 --- a/app/src/organisms/RobotSettingsDashboard/NetworkSettings/index.tsx +++ b/app/src/organisms/RobotSettingsDashboard/NetworkSettings/index.tsx @@ -3,25 +3,24 @@ import { css } from 'styled-components' import { useTranslation } from 'react-i18next' import { - Flex, - SPACING, - COLORS, - Icon, + ALIGN_CENTER, + BORDERS, Btn, - DIRECTION_ROW, + Chip, + COLORS, DIRECTION_COLUMN, - ALIGN_CENTER, + DIRECTION_ROW, + Flex, + Icon, + SPACING, TYPOGRAPHY, - BORDERS, } from '@opentrons/components' import { StyledText } from '../../../atoms/text' -import { Chip } from '../../../atoms/Chip' import { ChildNavigation } from '../../../organisms/ChildNavigation' -import type { IconName } from '@opentrons/components' +import type { IconName, ChipType } from '@opentrons/components' import type { NetworkConnection } from '../../../resources/networking/hooks/useNetworkConnection' -import type { ChipType } from '../../../atoms/Chip' import type { SetSettingOption } from '../../../pages/RobotSettingsDashboard' export type ConnectionType = 'wifi' | 'ethernet' | 'usb' diff --git a/app/src/pages/ProtocolDetails/index.tsx b/app/src/pages/ProtocolDetails/index.tsx index 35fe96061ed..a5556a88bec 100644 --- a/app/src/pages/ProtocolDetails/index.tsx +++ b/app/src/pages/ProtocolDetails/index.tsx @@ -9,6 +9,7 @@ import { ALIGN_CENTER, BORDERS, Btn, + Chip, COLORS, DIRECTION_COLUMN, DIRECTION_ROW, @@ -30,7 +31,6 @@ import { } from '@opentrons/react-api-client' import { MAXIMUM_PINNED_PROTOCOLS } from '../../App/constants' import { MediumButton, SmallButton, TabbedButton } from '../../atoms/buttons' -import { Chip } from '../../atoms/Chip' import { StyledText } from '../../atoms/text' import { ProtocolDetailsHeaderChipSkeleton, diff --git a/app/src/atoms/Chip/Chip.stories.tsx b/components/src/atoms/Chip/Chip.stories.tsx similarity index 74% rename from app/src/atoms/Chip/Chip.stories.tsx rename to components/src/atoms/Chip/Chip.stories.tsx index 3909f479d49..24fbe08d2bf 100644 --- a/app/src/atoms/Chip/Chip.stories.tsx +++ b/components/src/atoms/Chip/Chip.stories.tsx @@ -1,11 +1,13 @@ import * as React from 'react' -import { Flex, COLORS, SPACING } from '@opentrons/components' -import { touchScreenViewport } from '../../DesignTokens/constants' + +import { Flex } from '../../primitives' +import { COLORS } from '../../helix-design-system' +import { SPACING, VIEWPORT } from '../../ui-style-constants' import { Chip } from '.' import type { Story, Meta } from '@storybook/react' export default { - title: 'ODD/Atoms/Chip', + title: 'Library/Atoms/Chip', argTypes: { type: { options: ['basic', 'error', 'info', 'neutral', 'success', 'warning'], @@ -16,7 +18,7 @@ export default { }, }, component: Chip, - parameters: touchScreenViewport, + parameters: VIEWPORT.touchScreenViewport, } as Meta interface ChipStorybookProps extends React.ComponentProps<typeof Chip> { @@ -27,7 +29,7 @@ interface ChipStorybookProps extends React.ComponentProps<typeof Chip> { const Template: Story<ChipStorybookProps> = ({ ...args }) => ( <Flex padding={SPACING.spacing16} - backgroundColor={COLORS.grey50} + backgroundColor={COLORS.white} width="59rem" > <Chip {...args} /> diff --git a/app/src/atoms/Chip/__tests__/Chip.test.tsx b/components/src/atoms/Chip/__tests__/Chip.test.tsx similarity index 98% rename from app/src/atoms/Chip/__tests__/Chip.test.tsx rename to components/src/atoms/Chip/__tests__/Chip.test.tsx index d0115028b90..8cd67065771 100644 --- a/app/src/atoms/Chip/__tests__/Chip.test.tsx +++ b/components/src/atoms/Chip/__tests__/Chip.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react' import { describe, it, expect } from 'vitest' import { screen } from '@testing-library/react' -import { BORDERS, COLORS } from '@opentrons/components' -import { renderWithProviders } from '../../../__testing-utils__' +import { BORDERS, COLORS } from '../../../helix-design-system' +import { renderWithProviders } from '../../../testing/utils' import { Chip } from '..' const render = (props: React.ComponentProps<typeof Chip>) => { diff --git a/app/src/atoms/Chip/index.tsx b/components/src/atoms/Chip/index.tsx similarity index 98% rename from app/src/atoms/Chip/index.tsx rename to components/src/atoms/Chip/index.tsx index 3e7a12741a2..2a68a2689e5 100644 --- a/app/src/atoms/Chip/index.tsx +++ b/components/src/atoms/Chip/index.tsx @@ -11,7 +11,7 @@ import { COLORS, } from '@opentrons/components' -import { StyledText } from '../text' +import { StyledText } from '../../../../app/src/atoms/text' import type { IconName, StyleProps } from '@opentrons/components' diff --git a/components/src/atoms/index.ts b/components/src/atoms/index.ts index 7fd589ac7bb..e6abccf579e 100644 --- a/components/src/atoms/index.ts +++ b/components/src/atoms/index.ts @@ -1,3 +1,4 @@ +export * from './buttons' export * from './CheckboxField' +export * from './Chip' export * from './StepMeter' -export * from './buttons' diff --git a/components/src/ui-style-constants/index.ts b/components/src/ui-style-constants/index.ts index 21a599f031c..e61234d0e96 100644 --- a/components/src/ui-style-constants/index.ts +++ b/components/src/ui-style-constants/index.ts @@ -1,3 +1,4 @@ export * as RESPONSIVENESS from './responsiveness' -export * as TYPOGRAPHY from './typography' export * as SPACING from './spacing' +export * as TYPOGRAPHY from './typography' +export * as VIEWPORT from './viewport' diff --git a/app/src/DesignTokens/constants.ts b/components/src/ui-style-constants/viewport.ts similarity index 100% rename from app/src/DesignTokens/constants.ts rename to components/src/ui-style-constants/viewport.ts