From 892496c2dbdefed820782c3d8cb83204d571bead Mon Sep 17 00:00:00 2001 From: kathyychenn Date: Mon, 11 Mar 2024 19:52:56 -0700 Subject: [PATCH] infoForm component and important facts --- .DS_Store | Bin 0 -> 6148 bytes backend/.DS_Store | Bin 0 -> 6148 bytes frontend/src/App.tsx | 4 +- frontend/src/assets/dropArrow.svg | 3 + .../src/components/FormSection.module.css | 40 ++++- frontend/src/components/FormSection.tsx | 43 +++-- frontend/src/components/InfoForm.module.css | 15 +- frontend/src/components/InfoForm.tsx | 163 ++++++++++++++---- frontend/src/components/index.ts | 5 +- 9 files changed, 221 insertions(+), 52 deletions(-) create mode 100644 .DS_Store create mode 100644 backend/.DS_Store create mode 100644 frontend/src/assets/dropArrow.svg diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..36b1b637a551ea93dda4b62add6ab07f55a6fe81 GIT binary patch literal 6148 zcmeHKy-or_5T2Eb92yf!%j@in*x2bw&c+rSEA>Eu2p&P`kH*4S`v}Gdu(C2HcEo3( zGO_a!oY@^@*8@sp$V{^P?aj~bcVBY5w*a8Z{aOj22mn4dLT?4TDMoQ>8Czlx6)T#f zRWDVlNxPHD6o)7v3j9X}^oI|dP=_Y;obR_ax zv)>zY%FJb}G%wHQRXBMeUSf-(0G`=o{;EOgMFCMj6!=kq_J;r)VaS*o)LRF3`U-&P zp<5e{>6e0P0>+RrHHZ;3Wl9lEsp2b!GUezGI4@*O4VrRLeECqkvf>+x(yQbAfldb% z8kAlX5CvQXa^|r}=l{X%`@dTxPojV*uuuvpFRDakd?h|xGcQMHZGi0*8yV%L26YK` id>rcm9mVU|v|%iu0bnwVhu?w;wczr#CjJZ# z3wjV)5@^4)P14K<(>6rJvvoTqnh;TqCdi_Uh)jyNn!1rd|8Yuk zKcd@`^^(5kzofhFdOE*K{YnzAp6^e$+4iYv7F}Avrha(bq^Fn7*>?N(NA|0m&s+{p zUJ=^G8E^)i0cXG&_!R@VvqkDdMem&fXTTZwU_j1?fF>9Xvtl_q(3KJZD9`93(503T zpI{gbvm#a?tgb+HWh*gQ-7z1`E*fSPXTTZQF$TD5=FJQrWq0eh&y%}0pk1Pgh+P&10)6lZz(CHClM#WWKlq{UJ~Y@y;3e0|wpzY_2(& literal 0 HcmV?d00001 diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 47ef52e..f7a938b 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,7 +1,6 @@ import { Outlet, Route, Routes } from "react-router-dom"; -import { InfoForm } from "./components/InfoForm.tsx"; -import { NavBar } from "./components/index.ts"; +import { InfoForm, NavBar } from "./components/index.ts"; import { Apply, Candidates } from "./pages/index.ts"; function Layout() { @@ -21,7 +20,6 @@ function App() { } /> } /> } /> - } /> } /> diff --git a/frontend/src/assets/dropArrow.svg b/frontend/src/assets/dropArrow.svg new file mode 100644 index 0000000..c7dea6b --- /dev/null +++ b/frontend/src/assets/dropArrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/frontend/src/components/FormSection.module.css b/frontend/src/components/FormSection.module.css index f3666ab..1e7fa98 100644 --- a/frontend/src/components/FormSection.module.css +++ b/frontend/src/components/FormSection.module.css @@ -1,13 +1,47 @@ .formSectionContainer { - display: flex; - flex-direction: column; + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: 4rem; } h3 { - font-size: 18px; + font-size: 18px !important; +} + +.inputBox { + margin-top: 1rem; } .inputTitle { font-size: 12px; color: #6c6c6c; } + +.inputText { + width: 100%; + padding: 8px 48px 8px 16px; + margin-top: 4px; + font-size: 16px; + line-height: 24px; + color: var(--color-accent); + font: var(--font-body); + border: 1px solid var(--color-shadow); + border-radius: 5px; +} + +select.inputText { + /* Arrow */ + appearance: none; + background-image: url("../assets/dropArrow.svg"); + background-repeat: no-repeat; + background-position: right top 50%; + cursor: pointer; +} +.selectInput { + border: 0; + vertical-align: middle; + background: transparent; + -webkit-appearance: none; + appearance: none; + padding-left: 5px; +} diff --git a/frontend/src/components/FormSection.tsx b/frontend/src/components/FormSection.tsx index 7fab0ce..03156f8 100644 --- a/frontend/src/components/FormSection.tsx +++ b/frontend/src/components/FormSection.tsx @@ -2,25 +2,48 @@ import React, { ReactNode } from "react"; import styles from "./FormSection.module.css"; // Import CSS styles for Pathway component +export type FormInput = { + inputTitle: string; + defaultMessage: string; + inputType: "text" | "dropdown" | "checkbox"; // Add other input types as needed + dropdownOptions?: string[]; +}; + export type FormSectionProps = { sectionName: string; - formTitles: string[]; + formInputs: FormInput[]; children?: ReactNode; }; -export const FormSection: React.FC = ({ sectionName, formTitles }) => { +export const FormSection: React.FC = ({ sectionName, formInputs }) => { return (

{sectionName}

-
- {formTitles.map((inputTitle, index) => ( - -
{inputTitle}
- - - ))} -
+ {formInputs.map((formInput, index) => ( +
+
{formInput.inputTitle}
+ {formInput.inputType === "text" && ( + + )} + {formInput.inputType === "dropdown" && formInput.dropdownOptions && ( + + )} +
+ ))}
); diff --git a/frontend/src/components/InfoForm.module.css b/frontend/src/components/InfoForm.module.css index 31db59c..9debc94 100644 --- a/frontend/src/components/InfoForm.module.css +++ b/frontend/src/components/InfoForm.module.css @@ -3,15 +3,26 @@ } .formContainer { - width: 80%; + /* width: 80%; */ + margin: 3rem 10rem !important; + background-color: var(--color-text-secondary); +} + +.formSection { margin: 3rem auto !important; + width: 80%; } .applyFacts { width: 80%; margin: 3rem auto !important; } +.listText { + color: black; + margin: 0; +} -li::marker { +.bulletPoint { + list-style-type: disc; color: var(--color-ccidc-red); } diff --git a/frontend/src/components/InfoForm.tsx b/frontend/src/components/InfoForm.tsx index a0fe5aa..65bacc5 100644 --- a/frontend/src/components/InfoForm.tsx +++ b/frontend/src/components/InfoForm.tsx @@ -7,52 +7,151 @@ export function InfoForm() {

Important Facts For Applicants BEFORE YOU APPLY:

    -
  • - - Do NOT submit an application until ready to begin sitting for the IDEX California® - Examination. - +
  • +

    + + Do NOT submit an application until ready to begin sitting for the IDEX California® + Examination. + +

    • -
  • - Applications received after an application deadline will be held until the next - application review window opens. +
  • +

    + Applications received after an application deadline will be held until the next + application review window opens. +

    • -
  • - Fees are non-refundable. +
  • +

    + Fees are non-refundable. +

    • -
  • - Applicants have 1 year from submission to sit for the IDEX California - Exam or applications will be nullified and the full process will have to be repeated - successfully to gain certification. +
  • +

    + Applicants have 1 year from submission to sit for the IDEX California + Exam or applications will be nullified and the full process will have to be repeated + successfully to gain certification. +

    • -
  • - Only eligible applicants with the required education (Minimum 40 Core - Units) or work experience (Minimum 5 Years) will be allowed to sit for the IDEX - California® Examination. Specific details on eligible combinations can be found in the - Application Categories - Requirements for Certification. +
  • +

    + Only eligible applicants with the required education (Minimum 40 Core + Units) or work experience (Minimum 5 Years) will be allowed to sit for the IDEX + California® Examination. Specific details on eligible combinations can be found in + the Application Categories - Requirements for Certification. +

    • -
  • - Submit complete applications. Incomplete applications are automatically - placed on hold, and will be removed if not complete. When a previously incomplete - application has been completed, CCIDC then will release the hold and review the - application. +
  • +

    + Submit complete applications. Incomplete applications are + automatically placed on hold, and will be removed if not complete. When a previously + incomplete application has been completed, CCIDC then will release the hold and review + the application. +

-
+
+
+
+
+ +
+
+
+ - {/* Additional form sections or components */}
); diff --git a/frontend/src/components/index.ts b/frontend/src/components/index.ts index 27911fb..7a5930e 100644 --- a/frontend/src/components/index.ts +++ b/frontend/src/components/index.ts @@ -1,9 +1,10 @@ import { Accordion } from "./Accordion.tsx"; import { Button } from "./Button.tsx"; -import { FormSection } from "./FormSection.tsx"; import { FAQs } from "./FAQs.tsx"; +import { FormSection } from "./FormSection.tsx"; +import { InfoForm } from "./InfoForm.tsx"; import { NavBar } from "./NavBar.tsx"; import { Page } from "./Page.tsx"; import { Pathway } from "./Pathway.tsx"; -export { Page, Button, FormSection, NavBar, Accordion, Pathway, FAQs }; +export { Page, Button, FormSection, NavBar, Accordion, Pathway, FAQs, InfoForm };