feature: switch between plus/minis icon when expanding summary

components/ThemeRegistry/theme.ts → components/ThemeRegistry/theme.tsx

@@ -1,5 +1,15 @@
 import { Raleway } from "next/font/google";
+import { SvgIconProps } from "@mui/material/SvgIcon";
 import { createTheme } from "@mui/material/styles";
+import { MinusIcon } from "@/icons/MinusIcon";
+import { PlusIcon } from "@/icons/PlusIcon";
+
+const AccordionIcon = (props: SvgIconProps) => (
+  <>
+    <MinusIcon {...props} className="minus-icon" />
+    <PlusIcon {...props} className="plus-icon" />
+  </>
+);
 
 const raleway = Raleway({
   weight: ["400", "600", "700"],
@@ -126,8 +136,14 @@ const theme = createTheme({
       styleOverrides: {
         root: ({ ownerState }) => ({
           borderRadius: ownerState.expanded ? "4px 4px 0px 0px" : "4px",
+          ...(ownerState.expanded
+            ? { ["& .plus-icon"]: { display: "none" } }
+            : { ["& .minus-icon"]: { display: "none" } }),
         }),
       },
+      defaultProps: {
+        expandIcon: <AccordionIcon sx={{ fontSize: 10 }} />,
+      },
     },
     MuiCollapse: {
       styleOverrides: {

components/folders/AdditionalInfoCard.tsx

@@ -9,13 +9,12 @@ import Stack from "@mui/material/Stack";
 
 import { DeputyPreview } from "./DeputyPreview";
 import InfoIcon from "@/icons/InfoIcon";
-import { MinusIcon } from "@/icons/MinusIcon";
 
 export const AdditionalInfoCard = () => {
   return (
     <Accordion elevation={0} disableGutters defaultExpanded color="secondary">
       <AccordionSummary
-        expandIcon={<MinusIcon sx={{ fontSize: "10px" }} />}
+
         aria-controls="additional-info-content"
         id="additional-info-header"
       >

components/folders/CommiteeCard.tsx

@@ -8,13 +8,11 @@ import Stack from "@mui/material/Stack";
 
 import { DeputyPreview } from "@/components/folders/DeputyPreview";
 import InfoIcon from "@/icons/InfoIcon";
-import { MinusIcon } from "@/icons/MinusIcon";
 
 export const CommiteeCard = () => {
   return (
     <Accordion elevation={0} disableGutters defaultExpanded color="secondary">
       <AccordionSummary
-        expandIcon={<MinusIcon sx={{ fontSize: "10px" }} />}
         aria-controls="commission-content"
         id="commission-header"
       >

components/folders/DebateSummary.tsx

@@ -8,7 +8,6 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 
 import { ClockMovingIcon } from "@/icons/ClockMovingIcon";
-import { MinusIcon } from "@/icons/MinusIcon";
 
 import { useTheme } from "@mui/material";
 
@@ -18,7 +17,6 @@ export const DebateSummary = () => {
   return (
     <Accordion elevation={0} disableGutters defaultExpanded color="secondary">
       <AccordionSummary
-        expandIcon={<MinusIcon sx={{ fontSize: "10px" }} />}
         aria-controls="additional-info-content"
         id="additional-info-header"
       >

components/folders/DebateTranscript.tsx

@@ -10,7 +10,6 @@ import { SpeakingTime } from "@/components/folders/SpeakingTime";
 import { DebateTimeline } from "@/components/folders/DebateTimeline";
 
 import { ClockMovingIcon } from "@/icons/ClockMovingIcon";
-import { MinusIcon } from "@/icons/MinusIcon";
 import { useTheme } from "@mui/material";
 
 export const DebateTranscript = () => {
@@ -41,7 +40,6 @@ export const DebateTranscript = () => {
         variant="outlined"
       >
         <AccordionSummary
-          expandIcon={<MinusIcon sx={{ fontSize: "10px" }} />}
           aria-controls="additional-info-content"
           id="additional-info-header"
         >

components/folders/LegislativeDocumentsCard.tsx

@@ -5,18 +5,15 @@ import Stack from "@mui/material/Stack";
 import Accordion from "@mui/material/Accordion";
 import AccordionSummary from "@mui/material/AccordionSummary";
 import AccordionDetails from "@mui/material/AccordionDetails";
-import Paper from "@mui/material/Paper";
 
 import LinkIcon from "@/icons/LinkIcon";
-import { MinusIcon } from "@/icons/MinusIcon";
 
 import Link from "next/link";
 
 export const LegislativeDocumentsCard = () => {
   return (
     <Accordion elevation={0} disableGutters defaultExpanded color="secondary">
       <AccordionSummary
-        expandIcon={<MinusIcon sx={{ fontSize: "10px" }} />}
         aria-controls="additional-info-content"
         id="additional-info-header"
       >

icons/PlusIcon.tsx

@@ -0,0 +1,18 @@
+import SvgIcon, { SvgIconProps } from "@mui/material/SvgIcon";
+
+export const PlusIcon = (props: SvgIconProps) => (
+  <SvgIcon {...props}>
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.2857 13.7143H0V10.2857H10.2857V0H13.7143V10.2857H24V13.7143H13.7143V24H10.2857V13.7143Z"
+        fill="#171B1E"
+      />
+    </svg>
+  </SvgIcon>
+);