diff --git a/opentrons-ai-client/src/molecules/PromptPreview/PromptPreview.stories.tsx b/opentrons-ai-client/src/molecules/PromptPreview/PromptPreview.stories.tsx new file mode 100644 index 00000000000..434016b8a27 --- /dev/null +++ b/opentrons-ai-client/src/molecules/PromptPreview/PromptPreview.stories.tsx @@ -0,0 +1,65 @@ +import { I18nextProvider } from 'react-i18next' +import { COLORS, Flex, SPACING } from '@opentrons/components' +import { i18n } from '../../i18n' +import type { Meta, StoryObj } from '@storybook/react' +import { PromptPreview } from '.' + +const meta: Meta = { + title: 'AI/molecules/PromptPreview', + component: PromptPreview, + decorators: [ + Story => ( + + + + + + ), + ], +} +export default meta +type Story = StoryObj + +export const PromptPreviewExample: Story = { + args: { + isSubmitButtonEnabled: false, + promptPreviewData: [ + { + title: 'Application', + items: [ + 'Cherrypicking', + 'I have a Chlorine Reagent Set (Total), Ultra Low Range...', + ], + }, + { + title: 'Instruments', + items: [ + 'Opentrons Flex', + 'Flex 1-Channel 50 uL', + 'Flex 8-Channel 1000 uL', + ], + }, + { + title: 'Modules', + items: [ + 'Thermocycler GEN2', + 'Heater-Shaker with Universal Flat Adaptor', + ], + }, + { + title: 'Labware and Liquids', + items: [ + 'Opentrons 96 Well Plate', + 'Thermocycler GEN2', + 'Opentrons 96 Deep Well Plate', + 'Liquid 1: These are my samples, the...', + 'Liquid 2: This is the reagent in my ...', + ], + }, + { + title: 'Steps', + items: ['Fill the first column of a Elisa...'], + }, + ], + }, +} diff --git a/opentrons-ai-client/src/molecules/PromptPreview/index.tsx b/opentrons-ai-client/src/molecules/PromptPreview/index.tsx index 5e4a9ec1b36..c4ca71858d2 100644 --- a/opentrons-ai-client/src/molecules/PromptPreview/index.tsx +++ b/opentrons-ai-client/src/molecules/PromptPreview/index.tsx @@ -6,7 +6,6 @@ const PROMPT_PREVIEW_PLACEHOLDER_MESSAGE = 'As you complete the sections on the left, your prompt will be built here. When all requirements are met you will be able to generate the protocol.' interface PromptPreviewProps { - id?: string isSubmitButtonEnabled?: boolean handleSubmit: () => void promptPreviewData: PromptPreviewSectionProps[] @@ -33,7 +32,6 @@ const PromptPreviewPlaceholderMessage = styled(StyledText)` ` export function PromptPreview({ - id, isSubmitButtonEnabled = false, handleSubmit, promptPreviewData, @@ -43,7 +41,7 @@ export function PromptPreview({ } return ( - + Prompt + {areAllSectionsEmpty() && ( {PROMPT_PREVIEW_PLACEHOLDER_MESSAGE}