Bootstrap migration auth modals

components/auth/StartModal.tsx

@@ -1,6 +1,5 @@
 import type { ModalProps } from "react-bootstrap"
 import { Button, Col, Image, Modal, Stack } from "../bootstrap"
-import styles from "./StartModal.module.css"
 import { useTranslation } from "next-i18next"
 
 export default function StartModal({
@@ -16,7 +15,7 @@ export default function StartModal({
 
   return (
     <Modal show={show} onHide={onHide} aria-labelledby="start-modal" centered>
-      <Modal.Header closeButton className={styles.modalHeader}>
+      <Modal.Header closeButton className={`py-4`}>
         <Modal.Title id="start-modal" className="visually-hidden">
           {t("signUpOrIn")}
         </Modal.Title>

components/auth/TermsOfService.module.css

@@ -1,13 +1,13 @@
 .text {
-  font-family: Nunito;
-  font-style: normal;
-  font-weight: 500;
+  /* font-family: Nunito;
+  font-style: normal; */
+  /* font-weight: 500; */
 }
 
 .hr {
-  color: black;
+  /* color: black;
   background-color: black;
-  height: 10px;
+  height: 10px; */
 }
 
 .button {

components/auth/TermsOfServiceModal.tsx

@@ -1,7 +1,5 @@
 import type { ModalProps } from "react-bootstrap"
 import { Button, Col, Modal, Row, Stack } from "../bootstrap"
-import styles from "./TermsOfService.module.css"
-import SVG from "react-inlinesvg"
 import { External } from "components/links"
 import { NavLink } from "../Navlink"
 import { useTranslation } from "next-i18next"
@@ -17,19 +15,19 @@ export default function TermsOfServiceModal({
       <Modal.Header closeButton>
         <Modal.Title id="tos-modal">{t("privacyAndTerms")}</Modal.Title>
       </Modal.Header>
-      <Modal.Body className={styles.text}>
+      <Modal.Body>
         <Col md={12} className="mx-auto">
           <Stack gap={3} className="mb-4">
             <Row className="align-items-center">
               <Col md={9}>
                 <h4>{t("privacyPolicy")}</h4>
               </Col>
               <Col md={3}>
-                <External className={styles.link} href="/policies">
+                <External className={`text-decoration-none`} href="/policies">
                   {t("readMore")}
                 </External>
               </Col>
-              <hr className={styles.hr} />
+              <hr className={`border border-5 border-black`} />
               <Col md={10}>
                 <ul>
                   <li>{t("establishedPolicy")}</li>
@@ -44,12 +42,12 @@ export default function TermsOfServiceModal({
                 <h4>{t("TOS")}</h4>
               </Col>
               <Col md={3}>
-                <External className={styles.link} href="/policies">
+                <External className={`text-decoration-none`} href="/policies">
                   {t("readMore")}
                 </External>
               </Col>
 
-              <hr className={styles.hr} />
+              <hr className={`border border-5 border-black`} />
               <Col md={10}>
                 <ul>
                   <li>{t("userUnderstands")}</li>
@@ -62,17 +60,17 @@ export default function TermsOfServiceModal({
             </Row>
 
             <Col>
-              <p className={styles.warning}>{t("agreeRequired")}</p>
+              <p className={`fw-bold`}>{t("agreeRequired")}</p>
               <Row>
                 <Col md={6}>
-                  <Button onClick={onAgree} className={styles.button} size="sm">
+                  <Button onClick={onAgree} className={`w-100`} size="sm">
                     {t("agreeSignUp")}
                   </Button>
                 </Col>
                 <Col md={6}>
                   <Button
                     onClick={onHide}
-                    className={styles.button}
+                    className={`w-100`}
                     size="sm"
                     variant="outline-primary"
                   >
@@ -84,7 +82,7 @@ export default function TermsOfServiceModal({
                 <NavLink
                   href="https://cdn.forms-content.sg-form.com/fc8a7d49-d903-11ed-9e53-c2519c5b83a4"
                   other={{
-                    className: `${styles.subscribe}`,
+                    className: `text-center fs-5 mt-4 text-secondary`,
                     target: "_blank",
                     rel: "noopener noreferrer"
                   }}

components/auth/VerifyEmailModal.tsx

@@ -1,6 +1,5 @@
 import type { ModalProps } from "react-bootstrap"
 import { Button, Image, Col, Modal, Row, Stack } from "../bootstrap"
-import styles from "./VerifyEmailModal.module.css"
 import { Internal } from "components/links"
 import { useTranslation } from "next-i18next"
 
@@ -11,20 +10,20 @@ export default function VerifyEmailModal({
   const { t } = useTranslation("auth")
   return (
     <Modal show={show} onHide={onHide} centered>
-      <Modal.Header closeButton className={styles.modalHeader}>
+      <Modal.Header closeButton>
         <Modal.Title id="tos-modal">{t("signUp")}</Modal.Title>
       </Modal.Header>
       <Modal.Body>
         <Col md={11} className="mx-auto">
           <Stack gap={3} direction="vertical" className="mb-4 text-center">
             <Image
               fluid
-              className={styles.image}
+              height={`18em`}
               src="/mailbox.svg"
               alt={t("mailboxImgAlt") ?? "Mail entering mailbox"}
             />
-            <h2 className={styles.title}>{t("verifyEmail")}</h2>
-            <h6 className={styles.body}>{t("verifyLinkSent")}</h6>
+            <h2 className={`fw-bold`}>{t("verifyEmail")}</h2>
+            <h6>{t("verifyLinkSent")}</h6>
             <Internal href="/editprofile" className="view-edit-profile">
               <Button onClick={onHide}>{t("setUpProfile")}</Button>
             </Internal>

components/publish/SubmitTestimonyForm.tsx

@@ -118,7 +118,7 @@ const PolicyDetails = ({ bill, profile }: { bill: Bill; profile: Profile }) => {
   )
 }
 
-const Form = ({
+export const Form = ({
   step,
   bill,
   synced

stories/organisms/SubmitTestimonyForm.stories.tsx

@@ -0,0 +1,93 @@
+import { Timestamp } from "firebase/firestore"
+import { Meta, StoryObj } from "@storybook/react"
+import { Providers } from "components/providers"
+import { ChooseStance } from "components/publish/ChooseStance"
+import { ShareButtons } from "components/publish/ShareTestimony"
+import {
+  SubmitTestimonyForm,
+  Form
+} from "components/publish/SubmitTestimonyForm"
+import { wrapper } from "components/store"
+import { Provider as Redux } from "react-redux"
+
+const meta: Meta = {
+  title: "Organisms/SubmitTestimonyForm",
+  component: SubmitTestimonyForm,
+  decorators: [
+    (Story, ...rest) => <Story {...rest} />,
+    (Story, ...rest) => {
+      const { store, props } = wrapper.useWrappedStore(...rest)
+
+      return (
+        <Redux store={store}>
+          <Providers>
+            <Story />
+          </Providers>
+        </Redux>
+      )
+    }
+  ]
+}
+
+type Story = StoryObj<typeof SubmitTestimonyForm>
+
+export const Primary: Story = {
+  render: () => <SubmitTestimonyForm />,
+  name: "SubmitTestimonyForm"
+}
+
+export default meta
+
+export const ShareButtonsStory: Story = {
+  render: () => (
+    <div className={`w-100 d-flex`}>
+      <ShareButtons />
+    </div>
+  )
+}
+
+export const ChooseStanceStory = {
+  render: () => (
+    <div className={`w-100 d-flex`}>
+      <ChooseStance />
+    </div>
+  )
+}
+
+export const FormStory = {
+  render: () => (
+    <div className={`w-100 d-flex`}>
+      <Form
+        step={"position"}
+        bill={{
+          id: "",
+          court: 0,
+          content: {
+            Title: "",
+            BillNumber: "",
+            DocketNumber: "",
+            GeneralCourtNumber: 0,
+            PrimarySponsor: undefined,
+            Cosponsors: [],
+            LegislationTypeName: "",
+            Pinslip: "",
+            DocumentText: ""
+          },
+          cosponsorCount: 0,
+          testimonyCount: 0,
+          endorseCount: 0,
+          opposeCount: 0,
+          neutralCount: 0,
+          nextHearingAt: undefined,
+          latestTestimonyAt: undefined,
+          latestTestimonyId: undefined,
+          fetchedAt: Timestamp.fromDate(new Date()),
+          history: [],
+          currentCommittee: undefined,
+          city: undefined
+        }}
+        synced={false}
+      />
+    </div>
+  )
+}

stories/pages/auth/StartModal.stories.tsx

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from "@storybook/react"
+import StartModal from "components/auth/StartModal"
+import { Providers } from "components/providers"
+import { wrapper } from "components/store"
+import { Provider as Redux } from "react-redux"
+
+const meta: Meta = {
+  title: "Pages/Auth/Start Modal",
+  component: StartModal,
+  decorators: [
+    (Story, ...rest) => {
+      const { store, props } = wrapper.useWrappedStore(...rest)
+
+      return (
+        <Redux store={store}>
+          <Providers>
+            <Story />
+          </Providers>
+        </Redux>
+      )
+    }
+  ]
+}
+
+type Story = StoryObj<typeof StartModal>
+
+export const Primary: Story = {
+  args: {
+    onHide: () => {},
+    show: true,
+    onSignInClick: () => {},
+    onSignUpClick: () => {}
+  },
+  name: "Start Modal"
+}
+
+export default meta

stories/pages/auth/TermsOfServiceModal.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from "@storybook/react"
+import TermsOfServiceModal from "components/auth/TermsOfServiceModal"
+import { Providers } from "components/providers"
+import { wrapper } from "components/store"
+import { Provider as Redux } from "react-redux"
+
+const meta: Meta = {
+  title: "Pages/Auth/Terms Of Service Modal",
+  component: TermsOfServiceModal,
+  decorators: [
+    (Story, ...rest) => {
+      const { store, props } = wrapper.useWrappedStore(...rest)
+
+      return (
+        <Redux store={store}>
+          <Providers>
+            <Story />
+          </Providers>
+        </Redux>
+      )
+    }
+  ]
+}
+
+type Story = StoryObj<typeof TermsOfServiceModal>
+
+export const Primary: Story = {
+  args: {
+    onHide: () => {},
+    show: true,
+    onAgree: () => {}
+  },
+  name: "Terms Of Service Modal"
+}
+
+export default meta

stories/pages/auth/VerifyEmailModal.stories.tsx

@@ -0,0 +1,35 @@
+import { Meta, StoryObj } from "@storybook/react"
+import VerifyEmailModal from "components/auth/VerifyEmailModal"
+import { Providers } from "components/providers"
+import { wrapper } from "components/store"
+import { Provider as Redux } from "react-redux"
+
+const meta: Meta = {
+  title: "Pages/Auth/Verify Email Modal",
+  component: VerifyEmailModal,
+  decorators: [
+    (Story, ...rest) => {
+      const { store, props } = wrapper.useWrappedStore(...rest)
+
+      return (
+        <Redux store={store}>
+          <Providers>
+            <Story />
+          </Providers>
+        </Redux>
+      )
+    }
+  ]
+}
+
+type Story = StoryObj<typeof VerifyEmailModal>
+
+export const Primary: Story = {
+  args: {
+    onHide: () => {},
+    show: true
+  },
+  name: "Verify Email Modal"
+}
+
+export default meta