[#2062] change CC vote totals labels

CHANGELOG.md

@@ -20,7 +20,7 @@ changes.
 
 ### Changed
 
--
+- Change constitutional committee vote totals to be constitutional for yes and unconstitutional for no [Issue 2062](https://github.com/IntersectMBO/govtool/issues/2062)
 
 ### Removed
 

govtool/frontend/src/components/atoms/VotePill.test.tsx

@@ -5,7 +5,7 @@ import { VotePill } from "@atoms";
 describe("VotePill", () => {
   it('renders the VotePill component with "yes" vote correctly', () => {
     const { getByText } = render(<VotePill vote="yes" />);
-    const voteText = getByText("yes");
+    const voteText = getByText("Yes");
     expect(voteText).toBeInTheDocument();
     expect(voteText.parentNode).toHaveStyle({
       borderColor: "#C0E4BA",
@@ -15,7 +15,7 @@ describe("VotePill", () => {
 
   it('renders the VotePill component with "no" vote correctly', () => {
     const { getByText } = render(<VotePill vote="no" />);
-    const voteText = getByText("no");
+    const voteText = getByText("No");
     expect(voteText).toBeInTheDocument();
     expect(voteText.parentNode).toHaveStyle({
       borderColor: "#EDACAC",
@@ -25,7 +25,7 @@ describe("VotePill", () => {
 
   it('renders the VotePill component with "abstain" vote correctly', () => {
     const { getByText } = render(<VotePill vote="abstain" />);
-    const voteText = getByText("abstain");
+    const voteText = getByText("Abstain");
     expect(voteText).toBeInTheDocument();
     expect(voteText.parentNode).toHaveStyle({
       borderColor: "#99ADDE",

govtool/frontend/src/components/atoms/VotePill.tsx

@@ -1,3 +1,4 @@
+import { useTranslation } from "react-i18next";
 import { Box, Typography } from "@mui/material";
 
 import { Vote } from "@models";
@@ -6,12 +7,15 @@ export const VotePill = ({
   vote,
   width,
   maxWidth,
+  isCC,
 }: {
   vote: Vote;
   width?: number;
   maxWidth?: number;
+  isCC?: boolean;
 }) => {
-  const VOTE = vote.toLowerCase();
+  const { t } = useTranslation();
+  const VOTE = vote.toLowerCase() as "yes" | "no" | "abstain";
   return (
     <Box
       py={0.75}
@@ -36,7 +40,17 @@ export const VotePill = ({
         fontWeight={400}
         lineHeight="16px"
       >
-        {vote}
+        {t(
+          `votes.${
+            isCC
+              ? VOTE === "yes"
+                ? "constitutional"
+                : vote === "no"
+                ? "unconstitutional"
+                : VOTE
+              : VOTE
+          }`,
+        )}
       </Typography>
     </Box>
   );

govtool/frontend/src/components/molecules/VoteActionForm.tsx

@@ -170,7 +170,7 @@ export const VoteActionForm = ({
             name="vote"
             register={registerInput}
             setValue={setValue}
-            title={t("yes")}
+            title={t("votes.yes")}
             value="yes"
             disabled={isInProgress}
           />
@@ -180,7 +180,7 @@ export const VoteActionForm = ({
             name="vote"
             register={registerInput}
             setValue={setValue}
-            title={t("no")}
+            title={t("votes.no")}
             value="no"
             disabled={isInProgress}
           />
@@ -190,7 +190,7 @@ export const VoteActionForm = ({
             name="vote"
             register={registerInput}
             setValue={setValue}
-            title={t("abstain")}
+            title={t("votes.abstain")}
             value="abstain"
             disabled={isInProgress}
           />

govtool/frontend/src/components/molecules/VotesSubmitted.tsx

@@ -88,8 +88,10 @@ export const VotesSubmitted = ({
   );
 };
 
+type VoterType = "ccCommittee" | "dReps" | "sPos";
+
 type VotesGroupProps = {
-  type: "ccCommittee" | "dReps" | "sPos";
+  type: VoterType;
   yesVotes: number;
   noVotes: number;
   abstainVotes: number;
@@ -127,8 +129,8 @@ const VotesGroup = ({
 };
 
 type VoteProps = {
-  type: "ccCommittee" | "dReps" | "sPos";
-  vote: "yes" | "no" | "abstain";
+  type: VoterType;
+  vote: VoteType;
   value: number;
 };
 const Vote = ({ type, vote, value }: VoteProps) => (
@@ -140,7 +142,7 @@ const Vote = ({ type, vote, value }: VoteProps) => (
       columnGap: 1.5,
     }}
   >
-    <VotePill vote={vote} maxWidth={82} />
+    <VotePill vote={vote} width={115} isCC={type === "ccCommittee"} />
     <Typography
       data-testid={`submitted-votes-${type}-${vote}`}
       sx={{

govtool/frontend/src/i18n/locales/en.ts

@@ -823,8 +823,14 @@ export const en = {
       notVerifiable: "Data Not Verifiable",
       incorrectFormat: "Data Formatted Incorrectly",
     },
+    votes: {
+      abstain: "Abstain",
+      constitutional: "Constitutional",
+      no: "No",
+      unconstitutional: "Unconstitutional",
+      yes: "Yes",
+    },
     about: "About",
-    abstain: "Abstain",
     addLink: "+ Add link",
     back: "Back",
     backToDashboard: "Back to dashboard",
@@ -854,7 +860,6 @@ export const en = {
     myDRepId: "My DRep ID:",
     nextStep: "Next step",
     network: "Network",
-    no: "No",
     ok: "Ok",
     optional: "Optional",
     register: "Register",
@@ -872,7 +877,6 @@ export const en = {
     thisLink: "this link",
     viewDetails: "View details",
     votingPower: "Voting power",
-    yes: "Yes",
     yourself: "Yourself",
   },
 };

govtool/frontend/src/stories/GovernanceActionDetailsCard.stories.ts

@@ -106,9 +106,9 @@ export const GovernanceActionDetailsCardComponent: Story = {
     await assertTooltip(tooltip1, /Submission Date/i);
     await assertTooltip(tooltip2, /Expiry Date/i);
 
-    await expect(canvas.getAllByText(/Yes/i)).toHaveLength(3);
-    await expect(canvas.getAllByText(/Abstain/i)).toHaveLength(3);
-    await expect(canvas.getAllByText(/No/i)).toHaveLength(3);
+    await expect(canvas.getAllByText(/yes/i)).toHaveLength(2);
+    await expect(canvas.getAllByText(/abstain/i)).toHaveLength(3);
+    await expect(canvas.getAllByText(/no/i)).toHaveLength(2);
   },
 };
 

govtool/frontend/src/stories/VotePill.stories.ts

@@ -25,7 +25,7 @@ export const VotePillYes: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await expect(canvas.getByText(/yes/i)).toBeInTheDocument();
+    await expect(canvas.getByText(/Yes/i)).toBeInTheDocument();
   },
 };
 
@@ -35,7 +35,7 @@ export const VotePillNo: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await expect(canvas.getByText(/no/i)).toBeInTheDocument();
+    await expect(canvas.getByText(/No/i)).toBeInTheDocument();
   },
 };
 
@@ -45,6 +45,6 @@ export const VotePillAbstain: Story = {
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
-    await expect(canvas.getByText(/abstain/i)).toBeInTheDocument();
+    await expect(canvas.getByText(/Abstain/i)).toBeInTheDocument();
   },
 };