New Gov Actions

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

@@ -4,11 +4,11 @@ import { ICONS } from "@consts";
 import { useSnackbar } from "@context";
 import { useTranslation } from "@hooks";
 
-interface Props {
+type Props = {
   isChecked?: boolean;
   text: string;
-  variant?: string;
-}
+  variant?: "blueThin" | "blue";
+};
 
 export const CopyButton = ({ isChecked, text, variant }: Props) => {
   const { addSuccessAlert } = useSnackbar();
@@ -19,6 +19,10 @@ export const CopyButton = ({ isChecked, text, variant }: Props) => {
       return ICONS.copyBlueIcon;
     }
 
+    if (variant === "blueThin") {
+      return ICONS.copyBlueThinIcon;
+    }
+
     if (isChecked) {
       return ICONS.copyWhiteIcon;
     }

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

@@ -0,0 +1,49 @@
+import { Typography } from "@mui/material";
+
+import { Button } from "@atoms";
+import { ICONS } from "@consts";
+import { useModal } from "@context";
+
+export const ExternalModalButton = ({
+  label,
+  url,
+}: {
+  label: string;
+  url: string;
+}) => {
+  const { openModal } = useModal();
+
+  return (
+    <Button
+      onClick={() => {
+        openModal({
+          type: "externalLink",
+          state: {
+            externalLink: url,
+          },
+        });
+      }}
+      sx={{
+        p: 0,
+        mb: 4,
+        ":hover": {
+          backgroundColor: "transparent",
+        },
+      }}
+      disableRipple
+      variant="text"
+      data-testid="external-modal-button"
+    >
+      <Typography variant="body1" fontWeight={500} color="primary">
+        {label}
+      </Typography>
+      <img
+        alt="external link"
+        src={ICONS.externalLinkIcon}
+        height="20"
+        width="20"
+        style={{ marginLeft: "8px" }}
+      />
+    </Button>
+  );
+};

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

@@ -1,6 +1,9 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import { Box, Typography } from "@mui/material";
+import { Box } from "@mui/material";
+
+import { Typography } from "@atoms";
 import { UseFormRegister, UseFormSetValue } from "react-hook-form";
+import { theme } from "@/theme";
 
 type RadioProps = {
   isChecked: boolean;
@@ -10,11 +13,20 @@ type RadioProps = {
   setValue: UseFormSetValue<any>;
   register: UseFormRegister<any>;
   dataTestId?: string;
+  disabled?: boolean;
 };
 
 export const Radio = ({ ...props }: RadioProps) => {
-  const { isChecked, name, setValue, title, value, dataTestId, register } =
-    props;
+  const {
+    isChecked,
+    name,
+    setValue,
+    title,
+    value,
+    dataTestId,
+    register,
+    disabled,
+  } = props;
 
   const handleClick = () => {
     setValue(name, value);
@@ -23,13 +35,23 @@ export const Radio = ({ ...props }: RadioProps) => {
   return (
     <Box
       data-testid={dataTestId}
-      onClick={handleClick}
-      borderRadius={2}
-      p={0.2}
-      border={isChecked ? 1 : 0}
-      borderColor={isChecked ? "specialCyanBorder" : "white"}
-      sx={[{ "&:hover": { color: "blue", cursor: "pointer" } }]}
-      flex={1}
+      onClick={() => {
+        if (!disabled) handleClick();
+      }}
+      borderRadius={isChecked ? "15px" : "12px"}
+      p={isChecked ? "2px" : 0}
+      border={isChecked ? 2 : 0}
+      borderColor={isChecked ? "specialCyanBorder" : undefined}
+      sx={[
+        {
+          boxShadow: theme.shadows[1],
+
+          "&:hover": {
+            color: "blue",
+            cursor: disabled ? "default" : "pointer",
+          },
+        },
+      ]}
     >
       <input
         type="radio"
@@ -39,15 +61,16 @@ export const Radio = ({ ...props }: RadioProps) => {
         checked={isChecked}
       />
       <Box
-        borderRadius={1.5}
+        borderRadius="12px"
         bgcolor={isChecked ? "specialCyan" : "white"}
         py={1.5}
-        border={isChecked ? 0 : 1}
-        borderColor="lightBlue"
       >
         <Typography
-          textAlign="center"
-          color={isChecked ? "white" : "textBlack"}
+          variant="body1"
+          sx={{
+            textAlign: "center",
+            color: isChecked ? "white" : "textBlack",
+          }}
         >
           {title}
         </Typography>

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

@@ -1,12 +1,7 @@
 import { styled } from "@mui/material";
 import * as TooltipMUI from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
-
-type TooltipProps = Omit<TooltipMUI.TooltipProps, "title"> & {
-  heading?: string;
-  paragraphOne?: string;
-  paragraphTwo?: string;
-};
+import { TooltipProps } from "@atoms";
 
 const StyledTooltip = styled(
   ({ className, ...props }: TooltipMUI.TooltipProps) => (

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

@@ -1,6 +1,7 @@
-import { Vote } from "@models";
 import { Box, Typography } from "@mui/material";
 
+import { Vote } from "@models";
+
 export const VotePill = ({
   vote,
   width,

govtool/frontend/src/components/atoms/index.ts

@@ -2,9 +2,9 @@ export * from "./ActionRadio";
 export * from "./Background";
 export * from "./Button";
 export * from "./Checkbox";
-export * from "./ClickOutside";
 export * from "./CopyButton";
 export * from "./DrawerLink";
+export * from "./ExternalModalButton";
 export * from "./FormErrorMessage";
 export * from "./FormHelpfulText";
 export * from "./HighlightedText";

govtool/frontend/src/components/atoms/types.ts

@@ -7,6 +7,7 @@ import {
   TextareaAutosizeProps,
   SxProps,
 } from "@mui/material";
+import * as TooltipMUI from "@mui/material/Tooltip";
 
 export type ButtonProps = Omit<MUIButtonProps, "size"> & {
   size?: "small" | "medium" | "large" | "extraLarge";
@@ -71,3 +72,9 @@ export type InfoTextProps = {
   label: string;
   sx?: SxProps;
 };
+
+export type TooltipProps = Omit<TooltipMUI.TooltipProps, "title"> & {
+  heading?: string;
+  paragraphOne?: string;
+  paragraphTwo?: string;
+};

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

@@ -0,0 +1,62 @@
+import { NavLink, To } from "react-router-dom";
+import { Box } from "@mui/material";
+import Divider from "@mui/material/Divider";
+
+import { useScreenDimension, useTranslation } from "@hooks";
+import { Typography } from "@atoms";
+
+type BreadcrumbsProps = {
+  elementOne: string;
+  elementOnePath: To;
+  elementTwo: string;
+  isDataMissing: boolean;
+};
+
+export const Breadcrumbs = ({
+  elementOne,
+  elementOnePath,
+  elementTwo,
+  isDataMissing,
+}: BreadcrumbsProps) => {
+  const { t } = useTranslation();
+  const { isMobile } = useScreenDimension();
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        margin: `2px 0 ${isMobile ? "44px" : "24px"}`,
+      }}
+    >
+      <NavLink to={elementOnePath} style={{ textDecorationColor: "#0033AD" }}>
+        <Typography
+          color="primary"
+          variant="caption"
+          sx={{
+            whiteSpace: "nowrap",
+          }}
+        >
+          {elementOne}
+        </Typography>
+      </NavLink>
+      <Divider
+        orientation="vertical"
+        flexItem
+        color="textBlack"
+        sx={{ margin: "0 6px" }}
+      />
+      <Typography
+        variant="caption"
+        sx={{
+          fontWeight: 500,
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+        }}
+      >
+        {isDataMissing ? t("govActions.dataMissing") : elementTwo}
+      </Typography>
+    </Box>
+  );
+};

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

@@ -2,10 +2,8 @@ import { Dispatch, FC, SetStateAction } from "react";
 import { Box, InputBase } from "@mui/material";
 import Search from "@mui/icons-material/Search";
 
-import { GovernanceActionsFilters, GovernanceActionsSorting } from ".";
+import { GovernanceActionsFilters, GovernanceActionsSorting } from "@molecules";
 import { OrderActionsChip } from "./OrderActionsChip";
-import { ClickOutside } from "../atoms";
-
 import { theme } from "@/theme";
 
 type DataActionsBarProps = {
@@ -50,7 +48,7 @@ export const DataActionsBar: FC<DataActionsBarProps> = ({ ...props }) => {
 
   return (
     <>
-      <Box alignItems="center" display="flex" justifyContent="flex-start">
+      <Box alignItems="center" display="flex" justifyContent="space-between">
         <InputBase
           inputProps={{ "data-testid": "search-input" }}
           onChange={(e) => setSearchText(e.target.value)}
@@ -76,7 +74,7 @@ export const DataActionsBar: FC<DataActionsBarProps> = ({ ...props }) => {
             fontWeight: 500,
             height: 48,
             padding: "16px 24px",
-            width: 231,
+            width: 500,
           }}
         />
         <OrderActionsChip
@@ -87,24 +85,23 @@ export const DataActionsBar: FC<DataActionsBarProps> = ({ ...props }) => {
           setSortOpen={setSortOpen}
           sortingActive={sortingActive}
           sortOpen={sortOpen}
-        />
+        >
+          {filtersOpen && (
+            <GovernanceActionsFilters
+              chosenFilters={chosenFilters}
+              setChosenFilters={setChosenFilters}
+              closeFilters={closeFilters}
+            />
+          )}
+          {sortOpen && (
+            <GovernanceActionsSorting
+              chosenSorting={chosenSorting}
+              setChosenSorting={setChosenSorting}
+              closeSorts={closeSorts}
+            />
+          )}
+        </OrderActionsChip>
       </Box>
-      {filtersOpen && (
-        <ClickOutside onClick={closeFilters}>
-          <GovernanceActionsFilters
-            chosenFilters={chosenFilters}
-            setChosenFilters={setChosenFilters}
-          />
-        </ClickOutside>
-      )}
-      {sortOpen && (
-        <ClickOutside onClick={closeSorts}>
-          <GovernanceActionsSorting
-            chosenSorting={chosenSorting}
-            setChosenSorting={setChosenSorting}
-          />
-        </ClickOutside>
-      )}
     </>
   );
 };