Adding link accordion

CDCgov · Oct 27, 2023 · 0a06f27 · 0a06f27
1 parent e5548b3
commit 0a06f27
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 74 deletions.
diff --git a/front-end/app/upload_file/page.tsx b/front-end/app/upload_file/page.tsx
@@ -4,6 +4,7 @@ import { FileInput, FormGroup, Alert, Button } from '@trussworks/react-uswds'
 import { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import SingleFileInput from '@/components/SingleFileInput/SingleFileInput';
+import LinkAccordion from '@/components/LinkAccordion/LinkAccordion';
 
 
 
@@ -32,15 +33,34 @@ export default function UploadFile() {
                 });
                 const data = await response.json();
                 setData(data);
-                //We will do something with the data high fidelity version.
-                console.log(data);
                 router.push('/export')
             } catch (error) {
                 console.error('Error uploading file', error);
             }
         }
     };
 
+    const test = () => {
+        return (
+            <div className="usa-accordion">
+                <button
+                    type="button"
+                    className="usa-accordion__button usa-banner__button"
+                    aria-expanded="false"
+                    aria-controls="gov-banner-default-default"
+                >
+                    <span className="usa-banner__button-text">Here’s how you know</span>
+                </button>
+                <div
+                    className="usa-accordion__content"
+                    id="gov-banner-default-default"
+                >
+                    <div>Hi</div>
+                </div>
+            </div>
+        )
+    }
+
     return (
         <div className="margin-3">
             <h1 className='font-sans-xl text-bold'>Upload your eCR</h1>
@@ -53,15 +73,13 @@ export default function UploadFile() {
                 </div>
             </div>
             <FormGroup>
-                <SingleFileInput
-                    id="upload-file-input"
-                    name="upload-file-input"
-                    ariaLabel="Choose .zip file"
-                    ariaInvalid={false}
-                    required
-                    onChange={addFile}
+                <FileInput id="file-input-single"
+                    name="file-input-single" onChange={(addFile)}
                 />
-                <Button className="margin-top-4" disabled={!file} type="button" onClick={handleSubmit}>Continue</Button>
+                <div className="margin-top-205">
+                    <LinkAccordion></LinkAccordion>
+                </div>
+                <Button className="margin-top-3" disabled={!file} type="button" onClick={handleSubmit}>Continue</Button>
             </FormGroup>
         </div>
     )

diff --git a/front-end/components/LinkAccordion/LinkAccordion.css b/front-end/components/LinkAccordion/LinkAccordion.css
diff --git a/front-end/components/LinkAccordion/LinkAccordion.tsx b/front-end/components/LinkAccordion/LinkAccordion.tsx
@@ -0,0 +1,51 @@
+import React, { useState } from 'react';
+
+function LinkAccordion() {
+    const [isAccordionOpen, setAccordionOpen] = useState(false);
+
+    const toggleAccordion = () => {
+        setAccordionOpen(!isAccordionOpen);
+    };
+
+    const content = () => {
+        return (<div
+            className="font-sans-xs content"
+            id="gov-banner-default-default"
+        >
+            <div>
+                <p>Our tool expects the .zip file format generated from AIMS. For a successful upload, your .zip file:</p>
+                <ul className="usa-list margin-top-0">
+                    <li>&bull; <u>must</u> contain: </li>
+                    <ul className="usa-list margin-top-0 margin-bottom-0">
+                        <li>&bull; one RR (reportability response) .xml file</li>
+                        <li>&bull; one eICR (electronic initial case report) .xml file</li>
+                    </ul>
+                    <li>&bull; can also contain: </li>
+                    <ul className="usa-list margin-top-0">
+                        <li>&bull; one RR HTML file</li>
+                        <li>&bull; one eICR HTML file</li>
+                    </ul>
+                </ul>
+            </div>
+        </div>
+        )
+    }
+
+    return (
+        <div>
+            <button
+                type="button"
+                className={`usa-banner__button ${isAccordionOpen ? 'active' : ''} margin-left-0`}
+                aria-expanded={isAccordionOpen ? 'true' : 'false'}
+                aria-controls="gov-banner-default-default"
+                onClick={toggleAccordion}
+            >
+                <span className="usa-banner__button-text">What are the .zip file requirements</span>
+
+            </button>
+            {isAccordionOpen ? content() : null}
+        </div>
+    );
+}
+
+export default LinkAccordion;