feat: replace UIC GridSection with Seeds Grid (#3643)

* feat: uptake Grid component from Seeds * feat: finish Grid component uptake * feat: update recent changes from main * fix: mangled syntax * fix: switch prop to class name * chore: address linting issues * fix: typo * fix: make sure old UIC labels look more modern * test: use new seeds classes in test selector * test: resolve issue with grid and Cypress selector * test: fix bad ids * fix: grid and form layouts based on feedback * fix: remove old GridCell, tighten up spacing on Partners aside * fix: column layout issues from feedback * chore: grid spacing updates (anticipating Seeds fixes) * chore: update to latest Seeds
bloom-housing · Nov 3, 2023 · 1161ad7 · 1161ad7
1 parent 3b6a135
commit 1161ad7
Show file tree

Hide file tree

Showing 75 changed files with 3,705 additions and 3,900 deletions.
diff --git a/sites/partners/cypress/e2e/default/03-listing.spec.ts b/sites/partners/cypress/e2e/default/03-listing.spec.ts
@@ -89,7 +89,9 @@ describe("Listing Management Tests", () => {
     cy.get(".mt-6 > .is-primary").contains("Save & Exit").click()
     cy.get("#add-preferences-button").contains("Add Preference").click()
     cy.get(".border > .button").contains("Select Preferences").click()
-    cy.get(":nth-child(1) > .grid-section__inner > .field > div > .label")
+    cy.get(
+      ":nth-child(1) > .seeds-grid > .seeds-grid-row > .seeds-grid-cell > .field > div > .label"
+    )
       .contains("Live/Work in County")
       .click()
     cy.get("#addPreferenceSaveButton").contains("Save").click()

diff --git a/sites/partners/package.json b/sites/partners/package.json
@@ -29,7 +29,7 @@
     "@bloom-housing/backend-core": "^7.13.0",
     "@bloom-housing/shared-helpers": "^7.7.1",
     "@bloom-housing/ui-components": "12.0.21",
-    "@bloom-housing/ui-seeds": "^1.9.1",
+    "@bloom-housing/ui-seeds": "^1.12.0",
     "@mapbox/mapbox-sdk": "^0.13.0",
     "ag-grid-community": "^26.0.0",
     "ag-grid-react": "^26.0.0",
@@ -54,6 +54,7 @@
     "@axe-core/react": "4.4.3",
     "@babel/core": "^7.21.3",
     "@babel/preset-env": "^7.20.2",
+    "@csstools/postcss-global-data": "^2.0.1",
     "@cypress/code-coverage": "^3.10.1",
     "@cypress/webpack-preprocessor": "^5.11.1",
     "@netlify/plugin-nextjs": "4.30.4",
@@ -76,6 +77,7 @@
     "next-transpile-modules": "^10.0.0",
     "nyc": "^15.1.0",
     "postcss": "^8.3.6",
+    "postcss-custom-media": "^10.0.0",
     "sass": "1.52.1",
     "sass-loader": "^10.0.3",
     "typescript": "4.6.4",

diff --git a/sites/partners/postcss.config.js b/sites/partners/postcss.config.js
@@ -1,5 +1,12 @@
 /*eslint-env node*/
 
 module.exports = {
-  plugins: ["tailwindcss", "autoprefixer"],
+  plugins: {
+    "@csstools/postcss-global-data": {
+      files: ["../../node_modules/@bloom-housing/ui-seeds/src/global/tokens/screens.scss"],
+    },
+    "postcss-custom-media": {},
+    tailwindcss: {},
+    autoprefixer: {},
+  },
 }
diff --git a/sites/partners/src/components/applications/Aside.tsx b/sites/partners/src/components/applications/Aside.tsx
@@ -3,14 +3,14 @@ import dayjs from "dayjs"
 import {
   t,
   Button,
-  GridCell,
   AppearanceStyleType,
   StatusMessages,
   LocalizedLink,
   Modal,
   LinkButton,
   AppearanceSizeType,
 } from "@bloom-housing/ui-components"
+import { Grid } from "@bloom-housing/ui-seeds"
 import { ApplicationContext } from "./ApplicationContext"
 import { StatusAside } from "../shared/StatusAside"
 
@@ -41,7 +41,7 @@ const Aside = ({ listingId, type, onDelete, triggerSubmitAndRedirect }: AsidePro
     const elements = []
 
     const cancel = (
-      <GridCell className="flex" key="btn-cancel">
+      <Grid.Cell className="flex" key="btn-cancel">
         <LinkButton
           unstyled
           fullWidth
@@ -50,19 +50,19 @@ const Aside = ({ listingId, type, onDelete, triggerSubmitAndRedirect }: AsidePro
         >
           {t("t.cancel")}
         </LinkButton>
-      </GridCell>
+      </Grid.Cell>
     )
 
     if (type === "details") {
       elements.push(
-        <GridCell key="btn-submitNew">
+        <Grid.Cell key="btn-submitNew">
           <LocalizedLink href={`/application/${applicationId}/edit`}>
             <Button styleType={AppearanceStyleType.secondary} fullWidth onClick={() => false}>
               {t("t.edit")}
             </Button>
           </LocalizedLink>
-        </GridCell>,
-        <GridCell className="flex" key="btn-cancel">
+        </Grid.Cell>,
+        <Grid.Cell className="flex" key="btn-cancel">
           <Button
             unstyled
             fullWidth
@@ -71,13 +71,13 @@ const Aside = ({ listingId, type, onDelete, triggerSubmitAndRedirect }: AsidePro
           >
             {t("t.delete")}
           </Button>
-        </GridCell>
+        </Grid.Cell>
       )
     }
 
     if (type === "add" || type === "edit") {
       elements.push(
-        <GridCell key="btn-submit">
+        <Grid.Cell key="btn-submit">
           <Button
             styleType={AppearanceStyleType.primary}
             fullWidth
@@ -86,12 +86,12 @@ const Aside = ({ listingId, type, onDelete, triggerSubmitAndRedirect }: AsidePro
           >
             {type === "edit" ? t("application.add.saveAndExit") : t("t.submit")}
           </Button>
-        </GridCell>
+        </Grid.Cell>
       )
 
       if (type === "add") {
         elements.push(
-          <GridCell key="btn-submitNew">
+          <Grid.Cell key="btn-submitNew">
             <Button
               type="button"
               styleType={AppearanceStyleType.secondary}
@@ -100,7 +100,7 @@ const Aside = ({ listingId, type, onDelete, triggerSubmitAndRedirect }: AsidePro
             >
               {t("t.submitNew")}
             </Button>
-          </GridCell>,
+          </Grid.Cell>,
           cancel
         )
       }
@@ -109,7 +109,7 @@ const Aside = ({ listingId, type, onDelete, triggerSubmitAndRedirect }: AsidePro
         elements.push(
           <div className="flex justify-center" key="btn-group">
             {cancel}
-            <GridCell className="flex" key="btn-delete">
+            <Grid.Cell className="flex" key="btn-delete">
               <Button
                 type="button"
                 unstyled
@@ -119,7 +119,7 @@ const Aside = ({ listingId, type, onDelete, triggerSubmitAndRedirect }: AsidePro
               >
                 {t("t.delete")}
               </Button>
-            </GridCell>
+            </Grid.Cell>
           </div>
         )
       }

diff --git a/sites/partners/src/components/applications/PaperApplicationDetails/DetailsAddressColumns.tsx b/sites/partners/src/components/applications/PaperApplicationDetails/DetailsAddressColumns.tsx
@@ -1,4 +1,4 @@
-import { t, GridCell } from "@bloom-housing/ui-components"
+import { t } from "@bloom-housing/ui-components"
 import {
   Application,
   HouseholdMemberUpdate,
@@ -90,38 +90,32 @@ const DetailsAddressColumns = ({
 
   return (
     <>
-      <GridCell>
-        <FieldValue
-          label={t("application.contact.streetAddress")}
-          testId={`${dataTestId}.streetAddress`}
-        >
-          {address.street}
-        </FieldValue>
-      </GridCell>
-
-      <GridCell span={2}>
-        <FieldValue label={t("application.contact.apt")} testId={`${dataTestId}.street2`}>
-          {address.street2}
-        </FieldValue>
-      </GridCell>
-
-      <GridCell>
-        <FieldValue label={t("application.contact.city")} testId={`${dataTestId}.city`}>
-          {address.city}
-        </FieldValue>
-      </GridCell>
-
-      <GridCell>
-        <FieldValue label={t("application.contact.state")} testId={`${dataTestId}.state`}>
-          {address.state}
-        </FieldValue>
-      </GridCell>
-
-      <GridCell>
-        <FieldValue label={t("application.contact.zip")} testId={`${dataTestId}.zipCode`}>
-          {address.zipCode}
-        </FieldValue>
-      </GridCell>
+      <FieldValue
+        label={t("application.contact.streetAddress")}
+        testId={`${dataTestId}.streetAddress`}
+      >
+        {address.street}
+      </FieldValue>
+
+      <FieldValue
+        className="seeds-grid-span-2"
+        label={t("application.contact.apt")}
+        testId={`${dataTestId}.street2`}
+      >
+        {address.street2}
+      </FieldValue>
+
+      <FieldValue label={t("application.contact.city")} testId={`${dataTestId}.city`}>
+        {address.city}
+      </FieldValue>
+
+      <FieldValue label={t("application.contact.state")} testId={`${dataTestId}.state`}>
+        {address.state}
+      </FieldValue>
+
+      <FieldValue label={t("application.contact.zip")} testId={`${dataTestId}.zipCode`}>
+        {address.zipCode}
+      </FieldValue>
     </>
   )
 }