From 0e23cf34508c737da7d6b99e59db7800db440aa6 Mon Sep 17 00:00:00 2001
From: sashamaryl <sashamaryl@gmail.com>
Date: Thu, 29 Feb 2024 17:45:07 -0500
Subject: [PATCH 1/2] add stories billinfoheader, testimonyitem,
 userinfoheader, remove css module

remove delete option on Testimony item -- users will note be able to directly delete their testimony
remove viewTestimony.modal.css file
---
 components/TestimonyCard/BillInfoHeader.tsx   |  5 +-
 components/TestimonyCard/TestimonyItem.tsx    | 99 +------------------
 components/TestimonyCard/UserInfoHeader.tsx   | 15 ++-
 .../TestimonyCard/ViewTestimony.module.css    | 48 ---------
 .../Testimony/BillInfoHeader.stories.tsx      | 38 +++++++
 .../Testimony/TetimonyItem.stories.tsx        | 38 +++++++
 .../Testimony/UserInfoHeader.stories.tsx      | 36 +++++++
 7 files changed, 128 insertions(+), 151 deletions(-)
 delete mode 100644 components/TestimonyCard/ViewTestimony.module.css
 create mode 100644 stories/organisms/Testimony/BillInfoHeader.stories.tsx
 create mode 100644 stories/organisms/Testimony/TetimonyItem.stories.tsx
 create mode 100644 stories/organisms/Testimony/UserInfoHeader.stories.tsx

diff --git a/components/TestimonyCard/BillInfoHeader.tsx b/components/TestimonyCard/BillInfoHeader.tsx
index ebb5c6f70..29c092811 100644
--- a/components/TestimonyCard/BillInfoHeader.tsx
+++ b/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>
diff --git a/components/TestimonyCard/TestimonyItem.tsx b/components/TestimonyCard/TestimonyItem.tsx
index ea4075407..ffe188263 100644
--- a/components/TestimonyCard/TestimonyItem.tsx
+++ b/components/TestimonyCard/TestimonyItem.tsx
@@ -15,7 +15,6 @@ 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"
@@ -26,54 +25,6 @@ const FooterButton = styled(Button)`
   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")
-
-  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>
-    </>
-  )
-}
 
 export const TestimonyItem = ({
   testimony,
@@ -113,20 +64,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
@@ -137,21 +83,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>
@@ -189,7 +120,7 @@ export const TestimonyItem = ({
             <Col>
               <FooterButton variant="link">
                 <Internal
-                  className={styles.link}
+                  className={`text-decoration-none`}
                   href={maple.testimony({ publishedId: testimony.id })}
                 >
                   {t("testimonyItem.moreDetails")}
@@ -210,7 +141,7 @@ export const TestimonyItem = ({
                 <Col>
                   <FooterButton variant="link">
                     <Internal
-                      className={styles.link2}
+                      className={`text-decoration-none text-secondary`}
                       href={formUrl(testimony.billId, testimony.court)}
                     >
                       {t("testimonyItem.edit")}
@@ -218,28 +149,6 @@ export const TestimonyItem = ({
                   </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 */}
diff --git a/components/TestimonyCard/UserInfoHeader.tsx b/components/TestimonyCard/UserInfoHeader.tsx
index afde4ba10..25e6eff1a 100644
--- a/components/TestimonyCard/UserInfoHeader.tsx
+++ b/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>
   )
diff --git a/components/TestimonyCard/ViewTestimony.module.css b/components/TestimonyCard/ViewTestimony.module.css
deleted file mode 100644
index f966ae511..000000000
--- a/components/TestimonyCard/ViewTestimony.module.css
+++ /dev/null
@@ -1,48 +0,0 @@
-.toggleIcon::after {
-  content: url("/angle-down-solid.svg");
-  display: inline-block;
-  width: 1rem;
-  margin-left: 0.25rem;
-  position: relative;
-  top: 0.38rem;
-}
-
-.link {
-  text-decoration: none;
-}
-
-.link2 {
-  text-decoration: none;
-  color: var(color);
-}
-
-.bottomborder {
-  padding: 1rem 2rem;
-  border-bottom: 1px solid #cecece;
-}
-.nobottomborder {
-  padding: 1rem 2rem;
-}
-
-.heading {
-  margin-bottom: 0;
-}
-
-.editbug {
-  margin-bottom: 0;
-  font-size: 14px;
-  background-color: #1a3185;
-  padding: 0.2rem 0.5rem;
-  border-radius: 0.5rem;
-  color: white;
-}
-
-.publishdate {
-  font-size: 14px;
-  margin-bottom: 0;
-}
-
-.hr {
-  margin: 0;
-  border-bottom: 3px solid #cecece;
-}
diff --git a/stories/organisms/Testimony/BillInfoHeader.stories.tsx b/stories/organisms/Testimony/BillInfoHeader.stories.tsx
new file mode 100644
index 000000000..b474aaf70
--- /dev/null
+++ b/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"
+}
diff --git a/stories/organisms/Testimony/TetimonyItem.stories.tsx b/stories/organisms/Testimony/TetimonyItem.stories.tsx
new file mode 100644
index 000000000..0eb39f750
--- /dev/null
+++ b/stories/organisms/Testimony/TetimonyItem.stories.tsx
@@ -0,0 +1,38 @@
+import { Meta, StoryObj } from "@storybook/react"
+import { TestimonyItem } from "components/TestimonyCard/TestimonyItem"
+import { createMockTestimony } from "components/moderation/setUp/MockRecords"
+import { Providers } from "components/providers"
+import { wrapper } from "components/store"
+import { Provider as Redux } from "react-redux"
+
+const meta: Meta = {
+  title: "Organisms/Testimony/Testimony Item",
+  component: TestimonyItem,
+  decorators: [
+    (Story, ...rest) => {
+      const { store, props } = wrapper.useWrappedStore(...rest)
+
+      return (
+        <Redux store={store}>
+          <Providers>
+            <Story />
+          </Providers>
+        </Redux>
+      )
+    }
+  ]
+}
+export default meta
+
+type Story = StoryObj<typeof TestimonyItem>
+
+export const Primary: Story = {
+  args: {
+    testimony: createMockTestimony("H1002", "userId"),
+    isUser: true,
+    canEdit: true,
+    canDelete: true,
+    onProfilePage: true
+  },
+  name: "Testimony Item"
+}
diff --git a/stories/organisms/Testimony/UserInfoHeader.stories.tsx b/stories/organisms/Testimony/UserInfoHeader.stories.tsx
new file mode 100644
index 000000000..1b1776709
--- /dev/null
+++ b/stories/organisms/Testimony/UserInfoHeader.stories.tsx
@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from "@storybook/react"
+import { UserInfoHeader } from "components/TestimonyCard/UserInfoHeader"
+import { createMockTestimony } from "components/moderation/setUp/MockRecords"
+import { Providers } from "components/providers"
+import { wrapper } from "components/store"
+import { Provider as Redux } from "react-redux"
+
+const meta: Meta = {
+  title: "Organisms/Testimony/UserInfoHeader",
+  component: UserInfoHeader,
+  decorators: [
+    (Story, ...rest) => {
+      const { store, props } = wrapper.useWrappedStore(...rest)
+
+      return (
+        <Redux store={store}>
+          <Providers>
+            <Story />
+          </Providers>
+        </Redux>
+      )
+    }
+  ]
+}
+export default meta
+
+type Story = StoryObj<typeof UserInfoHeader>
+
+export const Primary: Story = {
+  args: {
+    testimony: createMockTestimony("H1002", "userId"),
+    billLink: "#",
+    publishedDate: "2021-08-11"
+  },
+  name: "UserInfoHeader"
+}

From 2b09a4613c93ad7bf4bd7d825074114db70515bc Mon Sep 17 00:00:00 2001
From: sashamaryl <sashamaryl@gmail.com>
Date: Fri, 1 Mar 2024 19:00:45 -0500
Subject: [PATCH 2/2] finish up migration for testimony Item

---
 components/TestimonyCard/TestimonyItem.tsx | 59 +++++++++++++---------
 1 file changed, 35 insertions(+), 24 deletions(-)

diff --git a/components/TestimonyCard/TestimonyItem.tsx b/components/TestimonyCard/TestimonyItem.tsx
index ffe188263..4948afd10 100644
--- a/components/TestimonyCard/TestimonyItem.tsx
+++ b/components/TestimonyCard/TestimonyItem.tsx
@@ -1,30 +1,41 @@
+import { trimContent } from "components/TestimonyCallout/TestimonyCallout"
+import { ViewAttachment } from "components/ViewAttachment"
+import { useReportTestimony } from "components/api/report"
+import { flags } from "components/featureFlags"
 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 { UseAsyncReturn } from "react-async-hook"
-import { useTranslation } from "next-i18next"
-import { trimContent } from "components/TestimonyCallout/TestimonyCallout"
-import { flags } from "components/featureFlags"
+import ReportToast from "./ReportToast"
+import { UserInfoHeader } from "./UserInfoHeader"
 
-const FooterButton = styled(Button)`
-  margin: 0;
-  padding: 0;
-  text-decoration: none;
-`
+type FooterButtonProps = Omit<ButtonProps, "children"> & {
+  className?: string
+  children?: ReactNode
+}
+const FooterButton = ({
+  variant = "text",
+  className,
+  children
+}: FooterButtonProps) => {
+  return (
+    <Button
+      className={`text-decoration-none m-0 p-0 ${className}`}
+      variant={variant}
+    >
+      {children}
+    </Button>
+  )
+}
 
 export const TestimonyItem = ({
   testimony,
@@ -109,7 +120,7 @@ export const TestimonyItem = ({
           {canExpand && (
             <Col className="justify-content-end d-flex">
               <FooterButton
-                variant="link"
+                variant="text"
                 onClick={() => setShowAllTestimony(true)}
               >
                 {t("testimonyItem.expand")}
@@ -118,7 +129,7 @@ export const TestimonyItem = ({
           )}
           {testimony.id && (
             <Col>
-              <FooterButton variant="link">
+              <FooterButton variant="text">
                 <Internal
                   className={`text-decoration-none`}
                   href={maple.testimony({ publishedId: testimony.id })}
@@ -130,7 +141,7 @@ export const TestimonyItem = ({
           )}
           {testimony.attachmentId && (
             <Col className="d-flex">
-              <FooterButton variant="link">
+              <FooterButton variant="text">
                 <ViewAttachment testimony={testimony} />
               </FooterButton>
             </Col>
@@ -139,7 +150,7 @@ export const TestimonyItem = ({
             <>
               {onProfilePage && (
                 <Col>
-                  <FooterButton variant="link">
+                  <FooterButton variant="text">
                     <Internal
                       className={`text-decoration-none text-secondary`}
                       href={formUrl(testimony.billId, testimony.court)}
@@ -154,7 +165,7 @@ export const TestimonyItem = ({
           {/* report */}
           {flags().reportTestimony && (
             <Col xs="auto">
-              <FooterButton variant="link" onClick={() => setIsReporting(true)}>
+              <FooterButton variant="text" onClick={() => setIsReporting(true)}>
                 Report
               </FooterButton>
             </Col>