v2.0.35.2

govtool/frontend/package.json

@@ -27,9 +27,9 @@
     "@emotion/styled": "^11.11.0",
     "@emurgo/cardano-serialization-lib-asmjs": "^14.1.1",
     "@hookform/resolvers": "^3.3.1",
-    "@intersect.mbo/govtool-outcomes-pillar-ui": "v1.5.7",
+    "@intersect.mbo/govtool-outcomes-pillar-ui": "v1.5.8",
     "@intersect.mbo/intersectmbo.org-icons-set": "^1.0.8",
-    "@intersect.mbo/pdf-ui": "1.0.13-beta",
+    "@intersect.mbo/pdf-ui": "1.0.14-beta",
     "@mui/icons-material": "^5.14.3",
     "@mui/material": "^5.14.4",
     "@noble/ed25519": "^2.3.0",

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

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { Chip, ChipProps, IconButton } from "@mui/material";
+import { IconX } from "@intersect.mbo/intersectmbo.org-icons-set";
+
+interface ChipButtonProps
+  extends Omit<ChipProps, "color" | "variant" | "deleteIcon"> {
+  label: React.ReactNode;
+  onDelete: () => void;
+  bgColor?: string;
+  deleteIconPosition?: "left" | "right";
+  iconSize?: number;
+  testId?: string;
+}
+
+const ChipButton: React.FC<ChipButtonProps> = ({
+  label,
+  onDelete,
+  bgColor = "#B9CCF5",
+  deleteIconPosition = "left",
+  iconSize = 14,
+  testId,
+  sx,
+  ...rest
+}) => (
+  <Chip
+    {...rest}
+    label={label}
+    onDelete={onDelete}
+    data-testid={testId}
+    deleteIcon={
+      <IconButton
+        disableRipple
+        sx={{ p: "4px", "&:hover": { backgroundColor: "transparent" } }}
+      >
+        <IconX style={{ width: iconSize, height: iconSize, color: "#222" }} />
+      </IconButton>
+    }
+    sx={{
+      backgroundColor: bgColor,
+      borderRadius: 999,
+      height: "auto",
+      py: 0.75,
+      pl: 1.75,
+      pr: 2.25,
+      display: "flex",
+      flexDirection: deleteIconPosition === "right" ? "row" : "row-reverse",
+      gap: 0.5,
+      "& .MuiChip-label": {
+        fontSize: 12,
+        fontWeight: 400,
+        color: "#000",
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        px: 0,
+        py: 0,
+      },
+      "& .MuiChip-deleteIcon": { m: 0 },
+      ...(sx as object),
+    }}
+  />
+);
+
+export default ChipButton;