Split Listing form up into two main tabs (#1644)

* Add tabs to the listing form * Fix button positions and ensure tabs always render * Add #1644 to Changelog * fixes warning for ArrowForward props Co-authored-by: seanmalbert <smabert@gmail.com>
CityOfDetroit · Aug 16, 2021 · 0788a61 · 0788a61
1 parent 2828910
commit 0788a61
Show file tree

Hide file tree

Showing 5 changed files with 81 additions and 32 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,6 +10,7 @@ All notable changes to this project will be documented in this file. The format
 
 - Added:
 
+  - Split Listing form up into two main tabs ([#1644](https://github.com/bloom-housing/bloom/pull/1644)) (Jared White)
   - Allow lottery results to be uploaded for a closed listing ([#1568](https://github.com/bloom-housing/bloom/pull/1568)) (Jared White)
   - Update buttons / pages visibility depending on a user role ([#1609](https://github.com/bloom-housing/bloom/pull/1609)) (Dominik Barcikowski)
   - Terms page checkbox text changed to blue ([#1645](https://github.com/bloom-housing/bloom/pull/1645)) (Emily Jablonski)

diff --git a/sites/partners/src/listings/PaperListingForm/index.tsx b/sites/partners/src/listings/PaperListingForm/index.tsx
@@ -13,6 +13,10 @@ import {
   TimeFieldPeriod,
   Modal,
   AppearanceBorderType,
+  Tabs,
+  TabList,
+  Tab,
+  TabPanel,
   LatitudeLongitude,
 } from "@bloom-housing/ui-components"
 import { useForm, FormProvider } from "react-hook-form"
@@ -353,6 +357,7 @@ const ListingForm = ({ listing, editMode }: ListingFormProps) => {
 
   const { listingsService } = useContext(AuthContext)
 
+  const [tabIndex, setTabIndex] = useState(0)
   const [alert, setAlert] = useState<AlertErrorType | null>(null)
   const [loading, setLoading] = useState<boolean>(false)
   const [status, setStatus] = useState<ListingStatus>(null)
@@ -526,35 +531,77 @@ const ListingForm = ({ listing, editMode }: ListingFormProps) => {
 
                 <Form id="listing-form" onSubmit={handleSubmit(triggerSubmit, onError)}>
                   <div className="flex flex-row flex-wrap">
-                    <div className="info-card md:w-9/12">
-                      <ListingIntro />
-                      <ListingPhoto />
-                      <BuildingDetails
-                        listing={listing}
-                        setLatLong={setLatitudeLongitude}
-                        latLong={latLong}
-                        customMapPositionChosen={customMapPositionChosen}
-                        setCustomMapPositionChosen={setCustomMapPositionChosen}
-                      />
-                      <CommunityType listing={listing} />
-                      <Units
-                        units={units}
-                        setUnits={setUnits}
-                        disableUnitsAccordion={listing?.disableUnitsAccordion}
-                      />
-                      <Preferences preferences={preferences} setPreferences={setPreferences} />
-                      <AdditionalFees />
-                      <BuildingFeatures />
-                      <AdditionalEligibility />
-                      <AdditionalDetails />
-                      <RankingsAndResults listing={listing} />
-                      <LeasingAgent />
-                      <ApplicationAddress listing={listing} />
-                      <ApplicationDates
-                        listing={listing}
-                        openHouseEvents={openHouseEvents}
-                        setOpenHouseEvents={setOpenHouseEvents}
-                      />
+                    <div className="md:w-9/12 pb-24">
+                      <Tabs
+                        forceRenderTabPanel={true}
+                        selectedIndex={tabIndex}
+                        onSelect={(index) => setTabIndex(index)}
+                      >
+                        <TabList>
+                          <Tab>Listing Details</Tab>
+                          <Tab>Application Process</Tab>
+                        </TabList>
+                        <TabPanel>
+                          <ListingIntro />
+                          <ListingPhoto />
+                          <BuildingDetails
+                            listing={listing}
+                            setLatLong={setLatitudeLongitude}
+                            latLong={latLong}
+                            customMapPositionChosen={customMapPositionChosen}
+                            setCustomMapPositionChosen={setCustomMapPositionChosen}
+                          />
+                          <CommunityType listing={listing} />
+                          <Units
+                            units={units}
+                            setUnits={setUnits}
+                            disableUnitsAccordion={listing?.disableUnitsAccordion}
+                          />
+                          <Preferences preferences={preferences} setPreferences={setPreferences} />
+                          <AdditionalFees />
+                          <BuildingFeatures />
+                          <AdditionalEligibility />
+                          <AdditionalDetails />
+
+                          <div className="text-right -mr-8 -mt-8 relative" style={{ top: "7rem" }}>
+                            <Button
+                              type="button"
+                              icon="arrowForward"
+                              onClick={() => {
+                                setTabIndex(1)
+                                window.scrollTo({ top: 0, behavior: "smooth" })
+                              }}
+                            >
+                              Application Process
+                            </Button>
+                          </div>
+                        </TabPanel>
+                        <TabPanel>
+                          <RankingsAndResults listing={listing} />
+                          <LeasingAgent />
+                          <ApplicationAddress listing={listing} />
+                          <ApplicationDates
+                            listing={listing}
+                            openHouseEvents={openHouseEvents}
+                            setOpenHouseEvents={setOpenHouseEvents}
+                          />
+
+                          <div className="-ml-8 -mt-8 relative" style={{ top: "7rem" }}>
+                            <Button
+                              type="button"
+                              icon="arrowBack"
+                              iconPlacement="left"
+                              onClick={() => {
+                                setTabIndex(0)
+                                window.scrollTo({ top: 0, behavior: "smooth" })
+                              }}
+                            >
+                              Listing Details
+                            </Button>
+                          </div>
+                        </TabPanel>
+                      </Tabs>
+
                       {listing?.status === ListingStatus.closed && (
                         <LotteryResults
                           submitCallback={(data) => {

diff --git a/sites/partners/src/listings/PaperListingForm/sections/RankingsAndResults.tsx b/sites/partners/src/listings/PaperListingForm/sections/RankingsAndResults.tsx
@@ -64,7 +64,6 @@ const RankingsAndResults = ({ listing }: RankingsAndResultsProps) => {
     <div>
       <GridSection
         grid={false}
-        separator
         title={t("listings.sections.rankingsResultsTitle")}
         description={t("listings.sections.rankingsResultsSubtitle")}
       >

diff --git a/ui-components/src/icons/Icons.tsx b/ui-components/src/icons/Icons.tsx
@@ -54,8 +54,8 @@ export const ArrowForward = (props: IconProps) => {
     <svg viewBox={"0 0 5 8"} fill={props.fill ?? "currentColor"}>
       <g transform="matrix(-1,0,0,1,5.00051,-1.33926e-12)">
         <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
+          fillRule="evenodd"
+          clipRule="evenodd"
           d="M0.205,3.483L3.35,0.105C3.486,-0.035 3.709,-0.035 3.846,0.105L4.342,0.613C4.478,0.754 4.478,0.98 4.342,1.121L1.942,3.737C1.806,3.878 1.806,4.104 1.942,4.245L4.342,6.879C4.478,7.02 4.478,7.246 4.342,7.387L3.846,7.895C3.781,7.962 3.691,8 3.598,8C3.505,8 3.415,7.962 3.35,7.895L0.205,4.499C-0.068,4.218 -0.068,3.764 0.205,3.483Z"
         />
       </g>

diff --git a/ui-components/src/navigation/Tabs.scss b/ui-components/src/navigation/Tabs.scss
@@ -11,6 +11,7 @@
 }
 
 .tabs__tab {
+  @apply bg-white;
   @apply text-gray-800;
   @apply px-6;
   @apply pt-3;
@@ -54,6 +55,7 @@
 
 .tabs__panel {
   @apply p-8;
+  @apply bg-white;
   @apply border;
   @apply border-gray-450;