Swap to common LabeledIcon

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",

src/components/Job/JobStatus.js

-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;

src/components/common/LabeledIcon/LabeledIcon.js

-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;

src/components/common/LabeledIcon/index.js

-import LabeledIcon from "./LabeledIcon";
-
-export { LabeledIcon };
-export default LabeledIcon;

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 = {

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();

src/components/records/RecordIcons.js

 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,

src/stories/components/common/LabeledIcon/LabeledIcon.stories.js

-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" }
-};