From 7e37b90e652d1a7194bd4e4765fb5c8027010b8f Mon Sep 17 00:00:00 2001
From: Zohar Manor-Abel <zohar.manor-abel@diamond.ac.uk>
Date: Thu, 4 Jun 2026 12:36:11 +0100
Subject: [PATCH] Adding missing stories

Tooltip, IconButton, SvgIcon
---
 .../MUI/Feedback/Tooltip.stories.tsx          |  94 ++++++++++
 .../MUI/Inputs/IconButton.stories.tsx         | 175 ++++++++++++++++++
 src/components/MUI/Inputs/SvgIcon.stories.tsx | 161 ++++++++++++++++
 src/components/MUI/MuiWrapped.tsx             |   4 +
 4 files changed, 434 insertions(+)
 create mode 100644 src/components/MUI/Feedback/Tooltip.stories.tsx
 create mode 100644 src/components/MUI/Inputs/IconButton.stories.tsx
 create mode 100644 src/components/MUI/Inputs/SvgIcon.stories.tsx

diff --git a/src/components/MUI/Feedback/Tooltip.stories.tsx b/src/components/MUI/Feedback/Tooltip.stories.tsx
new file mode 100644
index 0000000..90f25fe
--- /dev/null
+++ b/src/components/MUI/Feedback/Tooltip.stories.tsx
@@ -0,0 +1,94 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Tooltip, IconButton } from "../MuiWrapped";
+import InfoIcon from "@mui/icons-material/Info";
+
+const meta: Meta<typeof Tooltip> = {
+  title: "MUI/Feedback/Tooltip",
+  component: Tooltip,
+  tags: ["autodocs"],
+  parameters: { controls: { expanded: true }, layout: "padded" },
+  argTypes: {
+    title: { control: "text" },
+    placement: {
+      control: "select",
+      options: [
+        "bottom",
+        "bottom-start",
+        "bottom-end",
+        "top",
+        "top-start",
+        "top-end",
+        "left",
+        "left-start",
+        "left-end",
+        "right",
+        "right-start",
+        "right-end",
+      ],
+    },
+    arrow: { control: "boolean" },
+    disableInteractive: { control: "boolean" },
+  },
+  args: {
+    title: "Tooltip",
+    placement: "top",
+    arrow: true,
+    disableInteractive: false,
+  },
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => (
+    <Tooltip {...args} title={args.title!}>
+      <IconButton aria-label="info">
+        <InfoIcon />
+      </IconButton>
+    </Tooltip>
+  ),
+};
+
+export const Placements: Story = {
+  render: (args) => (
+    <div
+      style={{
+        display: "grid",
+        gap: 12,
+        gridTemplateColumns: "repeat(3, minmax(0, 1fr))",
+        placeItems: "center",
+      }}
+    >
+      <Tooltip {...args} title={args.title!} placement="top">
+        <IconButton>
+          <InfoIcon />
+        </IconButton>
+      </Tooltip>
+      <Tooltip {...args} title={args.title!} placement="right">
+        <IconButton>
+          <InfoIcon />
+        </IconButton>
+      </Tooltip>
+      <Tooltip {...args} title={args.title!} placement="bottom">
+        <IconButton>
+          <InfoIcon />
+        </IconButton>
+      </Tooltip>
+      <Tooltip {...args} title={args.title!} placement="left">
+        <IconButton>
+          <InfoIcon />
+        </IconButton>
+      </Tooltip>
+      <Tooltip {...args} title={args.title!} placement="top-start">
+        <IconButton>
+          <InfoIcon />
+        </IconButton>
+      </Tooltip>
+      <Tooltip {...args} title={args.title!} placement="top-end">
+        <IconButton>
+          <InfoIcon />
+        </IconButton>
+      </Tooltip>
+    </div>
+  ),
+};
diff --git a/src/components/MUI/Inputs/IconButton.stories.tsx b/src/components/MUI/Inputs/IconButton.stories.tsx
new file mode 100644
index 0000000..6452bea
--- /dev/null
+++ b/src/components/MUI/Inputs/IconButton.stories.tsx
@@ -0,0 +1,175 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { IconButton, SvgIcon, Stack } from "../MuiWrapped";
+
+const ArrowDownPath = (
+  <SvgIcon>
+    <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" />
+  </SvgIcon>
+);
+
+const meta: Meta<typeof IconButton> = {
+  title: "MUI/Inputs/IconButton",
+  component: IconButton,
+  tags: ["autodocs"],
+  parameters: { controls: { expanded: true }, layout: "padded" },
+  argTypes: {
+    color: {
+      control: "select",
+      options: [
+        "inherit",
+        "primary",
+        "secondary",
+        "success",
+        "error",
+        "info",
+        "warning",
+      ],
+      description:
+        "Applies theme color to the IconButton (icon inherits via context).",
+    },
+    size: {
+      control: "select",
+      options: ["small", "medium", "large"],
+      description: "IconButton size. Icon inside can also set fontSize.",
+    },
+    edge: {
+      control: "select",
+      options: [false, "start", "end"],
+      description: "Move the button to the edge of a container for alignment.",
+    },
+    disabled: { control: "boolean" },
+    "aria-label": {
+      control: "text",
+      name: "aria-label",
+      description: "Accessible label for screen readers.",
+    },
+    sx: { control: "object", description: "MUI `sx` prop for ad‑hoc styling." },
+
+    children: { control: false },
+  },
+  args: {
+    color: "inherit",
+    size: "medium",
+    edge: false,
+    disabled: false,
+    "aria-label": "arrow down",
+    sx: undefined,
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  render: (args) => <IconButton {...args}>{ArrowDownPath}</IconButton>,
+};
+
+export const Sizes: Story = {
+  render: (args) => (
+    <Stack direction="row" spacing={2} alignItems="center">
+      <IconButton {...args} size="small" aria-label="arrow down small">
+        {ArrowDownPath}
+      </IconButton>
+      <IconButton {...args} size="medium" aria-label="arrow down medium">
+        {ArrowDownPath}
+      </IconButton>
+      <IconButton {...args} size="large" aria-label="arrow down large">
+        {ArrowDownPath}
+      </IconButton>
+    </Stack>
+  ),
+};
+
+export const Colors: Story = {
+  render: (args) => (
+    <Stack direction="row" spacing={2} alignItems="center">
+      <IconButton {...args} color="inherit" aria-label="inherit">
+        {ArrowDownPath}
+      </IconButton>
+      <IconButton {...args} color="primary" aria-label="primary">
+        {ArrowDownPath}
+      </IconButton>
+      <IconButton {...args} color="secondary" aria-label="secondary">
+        {ArrowDownPath}
+      </IconButton>
+      <IconButton {...args} color="success" aria-label="success">
+        {ArrowDownPath}
+      </IconButton>
+      <IconButton {...args} color="error" aria-label="error">
+        {ArrowDownPath}
+      </IconButton>
+      <IconButton {...args} color="info" aria-label="info">
+        {ArrowDownPath}
+      </IconButton>
+      <IconButton {...args} color="warning" aria-label="warning">
+        {ArrowDownPath}
+      </IconButton>
+    </Stack>
+  ),
+};
+
+export const Disabled: Story = {
+  args: { disabled: true },
+  render: (args) => <IconButton {...args}>{ArrowDownPath}</IconButton>,
+};
+
+export const EdgeAlignment: Story = {
+  render: (args) => (
+    <Stack direction="row" spacing={2} sx={{ border: "1px dashed #ccc", p: 2 }}>
+      <IconButton {...args} edge="start" aria-label="start edge">
+        {ArrowDownPath}
+      </IconButton>
+      <div style={{ flex: 1 }} />
+      <IconButton {...args} edge="end" aria-label="end edge">
+        {ArrowDownPath}
+      </IconButton>
+    </Stack>
+  ),
+};
+
+export const WithCustomSvgIcon: Story = {
+  render: (args) => (
+    <Stack direction="row" spacing={2} alignItems="center">
+      <IconButton {...args} color="primary" aria-label="custom svg primary">
+        <SvgIcon viewBox="0 0 24 24" htmlColor="#1976d2" fontSize="medium">
+          <path d="M5 20h14v-2H5v2zm7-18v12l4-4 1.41 1.41L12 18l-5.41-5.59L8 10l4 4V2h2z" />
+        </SvgIcon>
+      </IconButton>
+
+      <IconButton {...args} color="secondary" aria-label="custom svg secondary">
+        <SvgIcon htmlColor="#9c27b0" fontSize="large">
+          <path d="M12 2L6 12h4v8h4v-8h4L12 2z" />
+        </SvgIcon>
+      </IconButton>
+
+      <div style={{ fontSize: 32, display: "flex", alignItems: "center" }}>
+        <IconButton {...args} color="inherit" aria-label="inherit font size">
+          <SvgIcon fontSize="inherit">
+            <path d="M4 12l8 8 8-8-1.41-1.41L13 16.17V4h-2v12.17L5.41 10.59 4 12z" />
+          </SvgIcon>
+        </IconButton>
+      </div>
+    </Stack>
+  ),
+};
+
+export const StyledViaSx: Story = {
+  args: {
+    sx: { "& svg": { fontSize: 40 } },
+  },
+  render: (args) => (
+    <Stack direction="row" spacing={2} alignItems="center">
+      <IconButton {...args} color="primary" aria-label="large icon via sx">
+        {ArrowDownPath}
+      </IconButton>
+      <IconButton
+        {...args}
+        color="secondary"
+        aria-label="rotated icon via sx"
+        sx={{ "& svg": { transform: "rotate(90deg)" } }}
+      >
+        {ArrowDownPath}
+      </IconButton>
+    </Stack>
+  ),
+};
diff --git a/src/components/MUI/Inputs/SvgIcon.stories.tsx b/src/components/MUI/Inputs/SvgIcon.stories.tsx
new file mode 100644
index 0000000..799c921
--- /dev/null
+++ b/src/components/MUI/Inputs/SvgIcon.stories.tsx
@@ -0,0 +1,161 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SvgIcon, IconButton, Stack } from "../MuiWrapped";
+
+const meta: Meta<typeof SvgIcon> = {
+  title: "MUI/Data Display/SvgIcon",
+  component: SvgIcon,
+  tags: ["autodocs"],
+  parameters: {
+    controls: { expanded: true },
+    layout: "padded",
+  },
+  argTypes: {
+    color: {
+      control: "select",
+      options: [
+        "inherit",
+        "primary",
+        "secondary",
+        "action",
+        "disabled",
+        "error",
+        "info",
+        "success",
+        "warning",
+      ],
+      description: "Applies theme color",
+    },
+    fontSize: {
+      control: "select",
+      options: ["inherit", "small", "medium", "large"],
+      description: "Applies theme size preset",
+    },
+    viewBox: {
+      control: "text",
+      description: "ViewBox for the SVG; default is '0 0 24 24'",
+    },
+    inheritViewBox: {
+      control: "boolean",
+      description:
+        "If true, use the viewBox of the child SVG element rather than the default",
+    },
+    titleAccess: {
+      control: "text",
+      description:
+        "Adds a <title> element for accessibility (sets role='img' if provided)",
+    },
+    sx: {
+      control: "object",
+      description: "MUI `sx` prop",
+    },
+  },
+  args: {
+    color: "primary",
+    fontSize: "medium",
+    viewBox: "0 0 24 24",
+    inheritViewBox: false,
+    titleAccess: "Down arrow",
+    sx: undefined,
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const d = "M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z";
+
+export const Basic: Story = {
+  render: (args) => <SvgIcon {...args}>{<path d={d} />}</SvgIcon>,
+};
+
+export const Sizes: Story = {
+  render: (args) => (
+    <Stack direction="row" spacing={2} alignItems="center">
+      <SvgIcon {...args} fontSize="small">
+        {<path d={d} />}
+      </SvgIcon>
+      <SvgIcon {...args} fontSize="medium">
+        {<path d={d} />}
+      </SvgIcon>
+      <SvgIcon {...args} fontSize="large">
+        {<path d={d} />}
+      </SvgIcon>
+      <div style={{ fontSize: 32, display: "flex", alignItems: "center" }}>
+        <SvgIcon {...args} fontSize="inherit">
+          {<path d={d} />}
+        </SvgIcon>
+      </div>
+    </Stack>
+  ),
+};
+
+export const Colors: Story = {
+  render: (args) => (
+    <Stack direction="row" spacing={2} alignItems="center">
+      <SvgIcon {...args} color="inherit">
+        {<path d={d} />}
+      </SvgIcon>
+      <SvgIcon {...args} color="primary">
+        {<path d={d} />}
+      </SvgIcon>
+      <SvgIcon {...args} color="secondary">
+        {<path d={d} />}
+      </SvgIcon>
+      <SvgIcon {...args} color="error">
+        {<path d={d} />}
+      </SvgIcon>
+      <SvgIcon {...args} color="warning">
+        {<path d={d} />}
+      </SvgIcon>
+      <SvgIcon {...args} color="info">
+        {<path d={d} />}
+      </SvgIcon>
+      <SvgIcon {...args} color="success">
+        {<path d={d} />}
+      </SvgIcon>
+      <SvgIcon {...args} color="action">
+        {<path d={d} />}
+      </SvgIcon>
+      <SvgIcon {...args} color="disabled">
+        {<path d={d} />}
+      </SvgIcon>
+    </Stack>
+  ),
+};
+
+export const CustomViewBoxAndInherit: Story = {
+  args: {
+    viewBox: "0 0 48 48",
+    inheritViewBox: false,
+    titleAccess: "Custom viewBox icon",
+    pathD: "M24 4L12 20h8v16h8V20h8L24 4z",
+  },
+  render: (args) => (
+    <Stack direction="row" spacing={4} alignItems="center">
+      <SvgIcon {...args}>{<path d={d} />}</SvgIcon>
+      <SvgIcon {...args} inheritViewBox>
+        <svg viewBox="0 0 32 32">
+          <path d="M16 2l-6 10h4v8h4v-8h4L16 2z" />
+        </svg>
+      </SvgIcon>
+    </Stack>
+  ),
+};
+
+export const InIconButton: Story = {
+  args: { color: "primary" },
+  render: (_args) => (
+    <Stack direction="row" spacing={2}>
+      <IconButton color="primary" aria-label="download">
+        <SvgIcon viewBox="0 0 24 24">
+          <path d="M5 20h14v-2H5v2zm7-18v12l4-4 1.41 1.41L12 18l-5.41-5.59L8 10l4 4V2h2z" />
+        </SvgIcon>
+      </IconButton>
+      <IconButton color="secondary" aria-label="arrow down">
+        <SvgIcon>
+          <path d="M20 12l-1.41-1.41L13 16.17V4h-2v12.17l-5.58-5.59L4 12l8 8 8-8z" />
+        </SvgIcon>
+      </IconButton>
+    </Stack>
+  ),
+};
diff --git a/src/components/MUI/MuiWrapped.tsx b/src/components/MUI/MuiWrapped.tsx
index 67ada1b..40801a9 100644
--- a/src/components/MUI/MuiWrapped.tsx
+++ b/src/components/MUI/MuiWrapped.tsx
@@ -206,6 +206,9 @@ import MuiToggleButtonGroup, {
 import MuiToolbar, {
   ToolbarProps as MuiToolbarProps,
 } from "@mui/material/Toolbar";
+import MuiTooltip, {
+  TooltipProps as MuiTooltipProps,
+} from "@mui/material/Tooltip";
 import MuiTypography, {
   TypographyProps as MuiTypographyProps,
 } from "@mui/material/Typography";
@@ -505,6 +508,7 @@ export const ToggleButtonGroup = MuiWrapper<MuiToggleButtonGroupProps>(
   "ToggleButtonGroup",
 );
 export const Toolbar = MuiWrapper<MuiToolbarProps>(MuiToolbar, "Toolbar");
+export const Tooltip = MuiWrapper<MuiTooltipProps>(MuiTooltip, "Tooltip");
 export const Typography = MuiWrapper<MuiTypographyProps>(
   MuiTypography,
   "Typography",