feat: seeds button uptake (#3677)

* 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

* feat: first round of uptake of Seeds Button

* fix: grid and form layouts based on feedback

* feat: add local Hero which uses Seeds system

* chore: update StatusItem is with Button/Link

* fix: remove old GridCell, tighten up spacing on Partners aside

* feat: more replacements of Button and Link

* feat: swap Button to use Seeds

* fix: prettier

* test: update tests to use button IDs

* feat: update loading spinners to use new Button feature

* chore: fix linking issues

* test: fix some E2E test cases

* test: fix submission issues with new buttons

* test: add another type submit

* test: finish fixing public E2E tests

* test: button fixes in partners

* test: add another type submit

* test: use more generic button selectors

* fix: preference grid and sign in button types

* fix: missing gap between Edit and Delete

* fix: clean up button color and preferences drawer

* fix: preferences drawer columns

* test: fix partners textarea issue

* fix: other textarea issue

* fix: more Cypress tests

* fix: button scopes

* fix: unit test

shared-helpers/package.json

@@ -17,7 +17,8 @@
   },
   "dependencies": {
     "@bloom-housing/backend-core": "^7.13.0",
-    "@bloom-housing/ui-components": "12.0.21",
+    "@bloom-housing/ui-components": "12.0.29",
+    "@bloom-housing/ui-seeds": "^1.12.0",
     "axios-cookiejar-support": "4.0.6",
     "tough-cookie": "4.1.3"
   },

shared-helpers/src/auth/Timeout.tsx

@@ -1,15 +1,13 @@
 import React, { createElement, FunctionComponent, useContext, useEffect, useState } from "react"
 import { AuthContext } from "./AuthContext"
 import { ConfigContext } from "./ConfigContext"
+import { Button } from "@bloom-housing/ui-seeds"
 import {
   NavigationContext,
-  Button,
   Modal,
   setSiteAlertMessage,
   AlertTypes,
   t,
-  AppearanceStyleType,
-  AppearanceSizeType,
 } from "@bloom-housing/ui-components"
 
 const PROMPT_TIMEOUT = 60000
@@ -85,12 +83,12 @@ export const IdleTimeout: FunctionComponent<IdleTimeoutProps> = ({
 
   const modalActions = [
     <Button
-      styleType={AppearanceStyleType.primary}
+      variant="primary"
       onClick={() => {
         clearTimeout(promptTimeout)
         setPromptTimeout(undefined)
       }}
-      size={AppearanceSizeType.small}
+      size="sm"
     >
       {promptAction}
     </Button>,

shared-helpers/src/views/forgot-password/FormForgotPassword.tsx

@@ -1,7 +1,6 @@
 import React, { useContext } from "react"
+import { Button } from "@bloom-housing/ui-seeds"
 import {
-  AppearanceStyleType,
-  Button,
   Field,
   Form,
   FormCard,
@@ -90,12 +89,10 @@ const FormForgotPassword = ({
           />
           <section>
             <div className="text-center mt-6">
-              <Button styleType={AppearanceStyleType.primary}>
-                {t("authentication.forgotPassword.sendEmail")}
-              </Button>
+              <Button variant="primary">{t("authentication.forgotPassword.sendEmail")}</Button>
             </div>
             <div className="text-center mt-6">
-              <Button onClick={() => router.back()} unstyled={true}>
+              <Button onClick={() => router.back()} variant="text">
                 {t("t.cancel")}
               </Button>
             </div>

shared-helpers/src/views/sign-in/FormSignIn.tsx

@@ -1,15 +1,6 @@
 import React, { useContext } from "react"
-import {
-  AppearanceStyleType,
-  Button,
-  Field,
-  Form,
-  FormCard,
-  Icon,
-  LinkButton,
-  NavigationContext,
-  t,
-} from "@bloom-housing/ui-components"
+import { Field, Form, FormCard, Icon, NavigationContext, t } from "@bloom-housing/ui-components"
+import { Button } from "@bloom-housing/ui-seeds"
 import { FormSignInErrorBox } from "./FormSignInErrorBox"
 import { NetworkStatus } from "../../auth/catchNetworkError"
 import type { UseFormMethods } from "react-hook-form"
@@ -87,7 +78,7 @@ const FormSignIn = ({
           />
 
           <div className="text-center mt-6">
-            <Button styleType={AppearanceStyleType.primary} data-testid="sign-in-button">
+            <Button type="submit" variant="primary" id="sign-in-button">
               {t("nav.signIn")}
             </Button>
           </div>
@@ -97,7 +88,9 @@ const FormSignIn = ({
         <div className="form-card__group text-center border-t">
           <h2 className="mb-6">{t("authentication.createAccount.noAccount")}</h2>
 
-          <LinkButton href="/create-account">{t("account.createAccount")}</LinkButton>
+          <Button variant="primary-outlined" href="/create-account">
+            {t("account.createAccount")}
+          </Button>
         </div>
       )}
     </FormCard>

shared-helpers/src/views/sign-in/ResendConfirmationModal.tsx

@@ -1,13 +1,5 @@
-import {
-  AppearanceStyleType,
-  Button,
-  Modal,
-  t,
-  Form,
-  Field,
-  emailRegex,
-  AppearanceSizeType,
-} from "@bloom-housing/ui-components"
+import { Modal, t, Form, Field, Icon, emailRegex } from "@bloom-housing/ui-components"
+import { Button } from "@bloom-housing/ui-seeds"
 import React, { useEffect, useMemo } from "react"
 import { useForm } from "react-hook-form"
 
@@ -16,7 +8,7 @@ export type ResendConfirmationModalProps = {
   initialEmailValue: string
   onClose: () => void
   onSubmit: (email: string) => void
-  loading: boolean
+  loadingMessage?: string
 }
 
 export type ResendConfirmationModalForm = {
@@ -26,7 +18,7 @@ export type ResendConfirmationModalForm = {
 const ResendConfirmationModal = ({
   isOpen,
   initialEmailValue,
-  loading,
+  loadingMessage,
   onClose,
   onSubmit,
 }: ResendConfirmationModalProps) => {
@@ -65,21 +57,21 @@ const ResendConfirmationModal = ({
       actions={[
         <Button
           type="button"
-          styleType={AppearanceStyleType.primary}
+          variant="primary"
           onClick={() => onFormSubmit()}
-          loading={loading}
-          size={AppearanceSizeType.small}
+          loadingMessage={loadingMessage}
+          size="sm"
         >
           {t("authentication.createAccount.resendTheEmail")}
         </Button>,
         <Button
           type="button"
-          styleType={AppearanceStyleType.alert}
+          variant="alert"
           onClick={() => {
             onClose()
             window.scrollTo(0, 0)
           }}
-          size={AppearanceSizeType.small}
+          size="sm"
         >
           {t("t.cancel")}
         </Button>,

sites/partners/__tests__/pages/settings/index.test.tsx

@@ -177,7 +177,7 @@ describe("settings", () => {
       await findByText(multiselectQuestionPreference.text)
 
       // Add a preference
-      fireEvent.click(getByTestId("preference-add-item"))
+      fireEvent.click(getByText("Add item"))
       expect(getByText("Add Preference")).toBeInTheDocument()
 
       // Add a preference option
@@ -222,7 +222,7 @@ describe("settings", () => {
       await findByText(multiselectQuestionPreference.text)
 
       // Add a preference
-      fireEvent.click(getByTestId("preference-add-item"))
+      fireEvent.click(getByText("Add item"))
       expect(getByText("Add Preference")).toBeInTheDocument()
 
       // Add a preference option