From 4562b25ec2700b60f50d4940d10f6a1932322d3a Mon Sep 17 00:00:00 2001
From: Felipe Belgine <felipe.belgine@thoughtworks.com>
Date: Tue, 22 Oct 2024 16:59:51 -0400
Subject: [PATCH] refactor: add new section and adjust layout

---
 .../assets/localization/en/create_protocol.json  |  3 ++-
 .../src/pages/CreateProtocol/index.tsx           | 16 ++++++++++++++--
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/opentrons-ai-client/src/assets/localization/en/create_protocol.json b/opentrons-ai-client/src/assets/localization/en/create_protocol.json
index de5015cd1d1..1ba282e5e53 100644
--- a/opentrons-ai-client/src/assets/localization/en/create_protocol.json
+++ b/opentrons-ai-client/src/assets/localization/en/create_protocol.json
@@ -9,5 +9,6 @@
   "application_other_caption": "Example: “cherrypicking” or “serial dilution”",
   "application_describe_title": "Describe what you are trying to do",
   "application_describe_caption": "Example: “The protocol performs automated liquid handling for Pierce BCA Protein Assay Kit to determine protein concentrations in various sample types, such as cell lysates and eluates of purification process.",
-  "section_confirm_button": "Confirm"
+  "section_confirm_button": "Confirm",
+  "instruments_title": "Instruments"
 }
diff --git a/opentrons-ai-client/src/pages/CreateProtocol/index.tsx b/opentrons-ai-client/src/pages/CreateProtocol/index.tsx
index 12e7cd1f9a2..4339d22e05f 100644
--- a/opentrons-ai-client/src/pages/CreateProtocol/index.tsx
+++ b/opentrons-ai-client/src/pages/CreateProtocol/index.tsx
@@ -26,6 +26,7 @@ export function CreateProtocol(): JSX.Element | null {
   const [applicationAccordionIsOpen, setApplicationAccordionIsOpen] = useState(
     true
   )
+  const [activeSection, setActiveSection] = useState(0)
 
   const methods = useForm<CreateProtocolFormData>({
     defaultValues: {
@@ -49,13 +50,23 @@ export function CreateProtocol(): JSX.Element | null {
         <ProtocolSections>
           <Accordion
             heading={t('application_title')}
-            isOpen={applicationAccordionIsOpen}
+            isOpen={activeSection === 0}
             handleClick={function (): void {
-              throw new Error('Function not implemented.')
+              setActiveSection(0)
             }}
           >
             <ApplicationSection />
           </Accordion>
+
+          <Accordion
+            heading={t('instruments_title')}
+            isOpen={activeSection === 1}
+            handleClick={function (): void {
+              setActiveSection(1)
+            }}
+          >
+            <Flex>Content</Flex>
+          </Accordion>
         </ProtocolSections>
         <PromptPreview
           handleSubmit={function (): void {
@@ -71,4 +82,5 @@ export function CreateProtocol(): JSX.Element | null {
 const ProtocolSections = styled(Flex)`
   flex-direction: ${DIRECTION_COLUMN};
   width: 100%;
+  gap: ${SPACING.spacing16};
 `