Merge pull request codeforboston#1483 from sashamaryl/bootstrap-migra…

…tion-testimony-card

Bootstrap migration testimony card

components/TestimonyCard/BillInfoHeader.tsx

@@ -2,7 +2,6 @@ import { Col, Row } from "react-bootstrap"
 import { Internal } from "components/links"
 import { Testimony } from "components/db"
 import { formatBillId } from "components/formatting"
-import styles from "./ViewTestimony.module.css"
 import { PositionLabel } from "./PositionBug"
 
 export const BillInfoHeader = ({
@@ -19,7 +18,7 @@ export const BillInfoHeader = ({
       <Row>
         <Col xs="auto">
           <h4 className="mt-0 mb-0">
-            <Internal className={styles.link} href={billLink}>
+            <Internal className={`text-decoration-none`} href={billLink}>
               {formatBillId(testimony.billId)}
             </Internal>
           </h4>
@@ -30,7 +29,7 @@ export const BillInfoHeader = ({
       </Row>
       <Row className="mt-1 mb-2">
         <Col>
-          <h5 className={styles.heading}>
+          <h5 className={`mb-0`}>
             {" "}
             {testimony.billTitle ? testimony.billTitle : "Bill Title"}
           </h5>

components/TestimonyCard/TestimonyItem.tsx

@@ -1,76 +1,38 @@
+import { trimContent } from "components/TestimonyCallout/TestimonyCallout"
+import { ViewAttachment } from "components/ViewAttachment"
+import { useReportTestimony } from "components/api/report"
 import { formUrl } from "components/publish/hooks"
-import Image from "react-bootstrap/Image"
+import { TestimonyContent } from "components/testimony"
+import { useTranslation } from "next-i18next"
+import { ReactNode, useState } from "react"
+import { ButtonProps } from "react-admin"
 import { ToastContainer } from "react-bootstrap"
-import { useReportTestimony } from "components/api/report"
-import ReportToast from "./ReportToast"
+import Image from "react-bootstrap/Image"
 import { useMediaQuery } from "usehooks-ts"
-import { usePublishService } from "components/publish/hooks"
-import { Col, Row, Stack, Button, Spinner } from "../bootstrap"
-import styled from "styled-components"
+import { Button, Col, Row, Stack } from "../bootstrap"
 import { Testimony } from "../db"
 import { Internal, maple } from "../links"
-import { UserInfoHeader } from "./UserInfoHeader"
 import { BillInfoHeader } from "./BillInfoHeader"
 import { ReportModal, RequestDeleteOwnTestimonyModal } from "./ReportModal"
-import { useState } from "react"
-import { TestimonyContent } from "components/testimony"
-import { ViewAttachment } from "components/ViewAttachment"
-import styles from "./ViewTestimony.module.css"
-import { UseAsyncReturn } from "react-async-hook"
-import { useTranslation } from "next-i18next"
-import { trimContent } from "components/TestimonyCallout/TestimonyCallout"
-
-const FooterButton = styled(Button)`
-  margin: 0;
-  padding: 0;
-  text-decoration: none;
-`
-const StyledCol = styled(Col)`
-  font-size: 0.75rem;
-
-  .choice {
-    padding: 0.2rem 0.5rem 0.2rem 0.5rem;
-    border-radius: 0.75rem;
-    color: white;
-    margin: 0;
-    font-size: 0.75rem;
-
-    align-items: center;
-  }
-`
-
-const ArchiveTestimonyConfirmation = ({
-  show,
-  onHide,
-  archiveTestimony
-}: {
-  show: boolean
-  onHide: () => void
-  archiveTestimony: UseAsyncReturn<void, []> | undefined
-}) => {
-  const { t } = useTranslation("testimony")
+import ReportToast from "./ReportToast"
+import { UserInfoHeader } from "./UserInfoHeader"
 
+type FooterButtonProps = Omit<ButtonProps, "children"> & {
+  className?: string
+  children?: ReactNode
+}
+const FooterButton = ({
+  variant = "text",
+  className,
+  children
+}: FooterButtonProps) => {
   return (
-    <>
-      <StyledCol>{t("testimonyItem.deleteTestimonyConfirmation")}</StyledCol>
-      <StyledCol>
-        <Button
-          className="choice me-4"
-          variant="secondary"
-          onClick={archiveTestimony?.execute}
-          disabled={archiveTestimony === undefined || archiveTestimony.loading}
-        >
-          {archiveTestimony?.loading ? (
-            <Spinner size="sm" animation="border" />
-          ) : (
-            "Yes"
-          )}
-        </Button>
-        <Button className="choice" variant="primary" onClick={onHide}>
-          {t("testimonyItem.no")}
-        </Button>
-      </StyledCol>
-    </>
+    <Button
+      className={`text-decoration-none m-0 p-0 ${className}`}
+      variant={variant}
+    >
+      {children}
+    </Button>
   )
 }
 
@@ -112,20 +74,15 @@ export const TestimonyItem = ({
     : trimContent(testimonyContent.slice(0, snippetChars), snippetChars)
   const canExpand = snippet.length !== testimonyContent.length
 
-  const [showConfirm, setShowConfirm] = useState(false)
-  const { deleteTestimony } = usePublishService() ?? {}
-
   const { t } = useTranslation("testimony")
 
   return (
-    <div
-      className={onProfilePage ? styles.bottomborder : styles.nobottomborder}
-    >
+    <div className={`py-3 px-2 ${onProfilePage && "border-bottom border-2"}`}>
       <div className={`border-0 h5 d-flex`}>
         {isMobile && isUser && (
           <>
             <Internal
-              className={styles.link}
+              className={`text-decoration-none`}
               href={formUrl(testimony.billId, testimony.court)}
             >
               <Image
@@ -136,21 +93,6 @@ export const TestimonyItem = ({
                 width={50}
               />
             </Internal>
-            {/**
-             * visually-hidden until delete is ready at a later stage
-             */}
-            <Internal
-              className={`styles.link, visually-hidden`}
-              href={billLink}
-            >
-              <Image
-                className="px-2 align-self-center"
-                src="/delete-testimony.svg"
-                alt={t("testimonyItem.deleteIcon") ?? "Delete testimony icon"}
-                height={50}
-                width={50}
-              />
-            </Internal>
           </>
         )}
       </div>
@@ -177,7 +119,7 @@ export const TestimonyItem = ({
           {canExpand && (
             <Col className="justify-content-end d-flex">
               <FooterButton
-                variant="link"
+                variant="text"
                 onClick={() => setShowAllTestimony(true)}
               >
                 {t("testimonyItem.expand")}
@@ -186,9 +128,9 @@ export const TestimonyItem = ({
           )}
           {testimony.id && (
             <Col>
-              <FooterButton variant="link">
+              <FooterButton variant="text">
                 <Internal
-                  className={styles.link}
+                  className={`text-decoration-none`}
                   href={maple.testimony({ publishedId: testimony.id })}
                 >
                   {t("testimonyItem.moreDetails")}
@@ -198,7 +140,7 @@ export const TestimonyItem = ({
           )}
           {testimony.attachmentId && (
             <Col className="d-flex">
-              <FooterButton variant="link">
+              <FooterButton variant="text">
                 <ViewAttachment testimony={testimony} />
               </FooterButton>
             </Col>
@@ -207,43 +149,21 @@ export const TestimonyItem = ({
             <>
               {onProfilePage && (
                 <Col>
-                  <FooterButton variant="link">
+                  <FooterButton variant="text">
                     <Internal
-                      className={styles.link2}
+                      className={`text-decoration-none text-secondary`}
                       href={formUrl(testimony.billId, testimony.court)}
                     >
                       {t("testimonyItem.edit")}
                     </Internal>
                   </FooterButton>
                 </Col>
               )}
-
-              {canDelete && (
-                <>
-                  {/* <Col>
-                    <FooterButton
-                      style={{ color: "#c71e32" }}
-                      onClick={() => setShowConfirm(s => !s)}
-                      variant="link"
-                    >
-                      {t("testimonyItem.rescind")}
-                    </FooterButton>
-                  </Col> */}
-
-                  {showConfirm && (
-                    <ArchiveTestimonyConfirmation
-                      show={showConfirm}
-                      onHide={() => setShowConfirm(false)}
-                      archiveTestimony={deleteTestimony}
-                    />
-                  )}
-                </>
-              )}
             </>
           )}
           {/* report */}
           <Col xs="auto">
-            <FooterButton variant="link" onClick={() => setIsReporting(true)}>
+            <FooterButton variant="text" onClick={() => setIsReporting(true)}>
               Report
             </FooterButton>
           </Col>

components/TestimonyCard/UserInfoHeader.tsx

@@ -2,7 +2,6 @@ import { Col, Row, Stack } from "react-bootstrap"
 import { Internal } from "components/links"
 import { Author } from "./Author"
 import { Testimony } from "components/db"
-import styles from "./ViewTestimony.module.css"
 import { ProfilePositionLabel } from "./ProfilePositionBug"
 import { useTranslation } from "next-i18next"
 
@@ -33,16 +32,22 @@ export const UserInfoHeader = ({
         <Author uid={testimony.authorUid} name={testimony.fullName} />
 
         <Row className="justify-content-between mb-1">
-          <Col className={styles.publishdate} xs="auto">
-            {publishedDate}
+          <Col className={`mb-0`} xs="auto">
+            <small>{publishedDate}</small>
           </Col>
           <Col xs="auto" className="justify-content-end d-flex">
             {testimony.version > 1 && (
-              <p className={styles.editbug}>{t("userInfoHeader.edited")}</p>
+              <>
+                <p
+                  className={`mb-0 bg-secondary lh-sm py-1 px-2 rounded-2 text-white`}
+                >
+                  <small> {t("userInfoHeader.edited")} </small>
+                </p>
+              </>
             )}
           </Col>
         </Row>
-        <hr className={styles.hr}></hr>
+        <hr className={`m-0 border-bottom border-2`}></hr>
       </Col>
     </Stack>
   )

stories/organisms/Testimony/BillInfoHeader.stories.tsx

@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from "@storybook/react"
+import { BillInfoHeader } from "components/TestimonyCard/BillInfoHeader"
+import { createMockTestimony } from "components/moderation/setUp/MockRecords"
+import { Providers } from "components/providers"
+import { wrapper } from "components/store"
+import { Provider as Redux } from "react-redux"
+
+// TODO: move into components directory
+
+const meta: Meta = {
+  title: "Organisms/Testimony/BillInfoHeader",
+  component: BillInfoHeader,
+  decorators: [
+    (Story, ...rest) => {
+      const { store, props } = wrapper.useWrappedStore(...rest)
+
+      return (
+        <Redux store={store}>
+          <Providers>
+            <Story />
+          </Providers>
+        </Redux>
+      )
+    }
+  ]
+}
+export default meta
+
+type Story = StoryObj<typeof BillInfoHeader>
+
+export const Primary: Story = {
+  args: {
+    testimony: createMockTestimony("H1002", "userId"),
+    billLink: "#",
+    publishedDate: "2021-08-11"
+  },
+  name: "BillInfoHeader"
+}