From d55dc7761ca8afc250b2aa78a2c7fa8e059649c1 Mon Sep 17 00:00:00 2001
From: Sky Brewer <sky.brewer@ess.eu>
Date: Tue, 28 May 2024 14:40:20 +0200
Subject: [PATCH] Swap to common LabeledIcon
---
src/components/IOC/IOCIcons/IOCIcons.js | 3 +-
src/components/Job/JobStatus.js | 3 +-
.../common/LabeledIcon/LabeledIcon.js | 74 -------------------
src/components/common/LabeledIcon/index.js | 4 -
src/components/deployments/DeploymentIcons.js | 2 +-
src/components/host/HostIcons.js | 2 +-
src/components/records/RecordIcons.js | 2 +-
.../common/LabeledIcon/LabeledIcon.stories.js | 33 ---------
8 files changed, 5 insertions(+), 118 deletions(-)
delete mode 100644 src/components/common/LabeledIcon/LabeledIcon.js
delete mode 100644 src/components/common/LabeledIcon/index.js
delete mode 100644 src/stories/components/common/LabeledIcon/LabeledIcon.stories.js
diff --git a/src/components/IOC/IOCIcons/IOCIcons.js b/src/components/IOC/IOCIcons/IOCIcons.js
index c6113fd4..ffeb9c5b 100644
--- a/src/components/IOC/IOCIcons/IOCIcons.js
+++ b/src/components/IOC/IOCIcons/IOCIcons.js
@@ -9,8 +9,7 @@ import {
PauseCircleFilled
} from "@mui/icons-material";
import Popover from "../../common/Popover";
-import { AlertBanner } from "@ess-ics/ce-ui-common";
-import LabeledIcon from "../../common/LabeledIcon/LabeledIcon";
+import { AlertBanner, LabeledIcon } from "@ess-ics/ce-ui-common";
const STATUS = {
active: "active",
diff --git a/src/components/Job/JobStatus.js b/src/components/Job/JobStatus.js
index f50570ca..1b7e0a54 100644
--- a/src/components/Job/JobStatus.js
+++ b/src/components/Job/JobStatus.js
@@ -1,7 +1,6 @@
-import { Stepper, STEPPER_STATES } from "@ess-ics/ce-ui-common";
+import { Stepper, STEPPER_STATES, LabeledIcon } from "@ess-ics/ce-ui-common";
import { HelpOutline } from "@mui/icons-material";
import React from "react";
-import LabeledIcon from "../common/LabeledIcon";
const ActiveIcon = STEPPER_STATES.active.outlinedIcon;
const CompletedIcon = STEPPER_STATES.completed.outlinedIcon;
diff --git a/src/components/common/LabeledIcon/LabeledIcon.js b/src/components/common/LabeledIcon/LabeledIcon.js
deleted file mode 100644
index a75f1580..00000000
--- a/src/components/common/LabeledIcon/LabeledIcon.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import React from "react";
-import { node, oneOfType, string, oneOf, object } from "prop-types";
-import { Stack, Tooltip, Typography } from "@mui/material";
-
-/**
- * Component that renders an icon with a label.
- *
- * @param {object} Icon icon reference (provided as e.g. TheIcon, not as JSX e.g. <TheIcon />)
- * @param {object} IconProps additional props to pass to the Icon. Accessibility props are already provided.
- * @param {string} label text or Component to render as the label for the icon
- * @param {object} LabelProps additional props to provide to the label when rendered as a Typography component
- * (not applicable when positioned as "tooltip" or "none").
- * @param {string} labelPosition describes position of the label. "tooltip" provides the label as a tooltip,
- * "left" and "right" positions the label to the left or right respectively, and "none" provides no visible label
- * (but still includes a11y attributes so that it is visible to screen readers)
- */
-const LabeledIcon = React.forwardRef((props, ref) => {
- const {
- className,
- Icon,
- IconProps,
- label,
- LabelProps,
- labelPosition = "tooltip",
- ...rest
- } = props;
-
- if (labelPosition === "tooltip") {
- return (
- <Tooltip
- title={label}
- className={className}
- >
- <Icon
- titleAccess={label}
- {...IconProps}
- />
- </Tooltip>
- );
- }
- if (labelPosition === "none") {
- return (
- <Icon
- titleAccess={label}
- {...IconProps}
- />
- );
- }
-
- const renderedLabel = <Typography {...LabelProps}>{label}</Typography>;
- return (
- <Stack
- flexDirection="row"
- gap={0.5}
- alignItems="center"
- className={className}
- ref={ref}
- {...rest}
- >
- {labelPosition === "left" ? renderedLabel : null}
- <Icon {...IconProps} />
- {labelPosition === "right" ? renderedLabel : null}
- </Stack>
- );
-});
-LabeledIcon.propTypes = {
- Icon: object,
- IconProps: object,
- label: oneOfType([string, node]),
- LabelProps: object,
- labelPosition: oneOf(["tooltip", "right", "left", "none"])
-};
-
-export default LabeledIcon;
diff --git a/src/components/common/LabeledIcon/index.js b/src/components/common/LabeledIcon/index.js
deleted file mode 100644
index 48451351..00000000
--- a/src/components/common/LabeledIcon/index.js
+++ /dev/null
@@ -1,4 +0,0 @@
-import LabeledIcon from "./LabeledIcon";
-
-export { LabeledIcon };
-export default LabeledIcon;
diff --git a/src/components/deployments/DeploymentIcons.js b/src/components/deployments/DeploymentIcons.js
index 8f846303..61c711df 100644
--- a/src/components/deployments/DeploymentIcons.js
+++ b/src/components/deployments/DeploymentIcons.js
@@ -8,7 +8,7 @@ import {
RemoveCircleOutline
} from "@mui/icons-material";
import { theme } from "../../style/Theme";
-import { LabeledIcon } from "../common/LabeledIcon";
+import { LabeledIcon } from "@ess-ics/ce-ui-common";
export function DeploymentStatusIcon({ status }) {
const deploymentStatusIcons = {
diff --git a/src/components/host/HostIcons.js b/src/components/host/HostIcons.js
index 6058ff70..d4e4afa1 100644
--- a/src/components/host/HostIcons.js
+++ b/src/components/host/HostIcons.js
@@ -7,7 +7,7 @@ import {
RadioButtonUnchecked,
HelpOutline
} from "@mui/icons-material";
-import LabeledIcon from "../common/LabeledIcon";
+import { LabeledIcon } from "@ess-ics/ce-ui-common";
export function HostStatusIcon({ host }) {
const theme = useTheme();
diff --git a/src/components/records/RecordIcons.js b/src/components/records/RecordIcons.js
index aa7b9788..fc529afb 100644
--- a/src/components/records/RecordIcons.js
+++ b/src/components/records/RecordIcons.js
@@ -1,6 +1,6 @@
import React from "react";
import { useTheme } from "@mui/material";
-import LabeledIcon from "../common/LabeledIcon";
+import { LabeledIcon } from "@ess-ics/ce-ui-common";
import {
Brightness1,
RadioButtonUnchecked,
diff --git a/src/stories/components/common/LabeledIcon/LabeledIcon.stories.js b/src/stories/components/common/LabeledIcon/LabeledIcon.stories.js
deleted file mode 100644
index f4251be3..00000000
--- a/src/stories/components/common/LabeledIcon/LabeledIcon.stories.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-import LabeledIcon from "../../../../components/common/LabeledIcon/LabeledIcon";
-import AccountCircleIcon from "@mui/icons-material/AccountCircle";
-import { RouterHarness } from "../../../../mocks/AppHarness";
-
-export default {
- title: "common/LabeledIcon",
- argTypes: {
- labelPosition: {
- options: ["none", "right", "left"],
- control: { type: "radio" }
- }
- }
-};
-
-const Template = (args) => {
- return (
- <RouterHarness>
- <LabeledIcon
- Icon={AccountCircleIcon}
- {...args}
- />
- </RouterHarness>
- );
-};
-
-export const Default = (args) => <Template {...args} />;
-Default.args = {
- label: "Account",
- LabelProps: { fontWeight: "bold" },
- labelPosition: "right",
- IconProps: { color: "primary" }
-};
--
GitLab