From ddcaf4c078d33cef46e7c48bc0097d8ffd92c547 Mon Sep 17 00:00:00 2001
From: Fran McDade <18710366+frano-m@users.noreply.github.com>
Date: Wed, 19 Nov 2025 17:41:05 +1000
Subject: [PATCH] feat: create time since component (#703)

---
 .../components/KeyElType/keyElType.tsx        | 22 +++++++++++++++
 .../KeyValueElType/keyValueElType.tsx         | 14 ++++++++++
 .../KeyValuesElType/keyValuesElType.tsx       |  8 ++++++
 .../components/KeyValueCell/keyValueCell.tsx  | 27 +++++++++++++++++++
 .../components/KeyValueCell/stories/args.ts   | 12 +++++++++
 .../stories/keyValueCell.stories.tsx          | 15 +++++++++++
 6 files changed, 98 insertions(+)
 create mode 100644 src/components/Table/components/TableCell/components/KeyValueCell/components/KeyElType/keyElType.tsx
 create mode 100644 src/components/Table/components/TableCell/components/KeyValueCell/components/KeyValueElType/keyValueElType.tsx
 create mode 100644 src/components/Table/components/TableCell/components/KeyValueCell/components/KeyValuesElType/keyValuesElType.tsx
 create mode 100644 src/components/Table/components/TableCell/components/KeyValueCell/keyValueCell.tsx
 create mode 100644 src/components/Table/components/TableCell/components/KeyValueCell/stories/args.ts
 create mode 100644 src/components/Table/components/TableCell/components/KeyValueCell/stories/keyValueCell.stories.tsx

diff --git a/src/components/Table/components/TableCell/components/KeyValueCell/components/KeyElType/keyElType.tsx b/src/components/Table/components/TableCell/components/KeyValueCell/components/KeyElType/keyElType.tsx
new file mode 100644
index 00000000..14064c9a
--- /dev/null
+++ b/src/components/Table/components/TableCell/components/KeyValueCell/components/KeyElType/keyElType.tsx
@@ -0,0 +1,22 @@
+import { Typography, TypographyProps } from "@mui/material";
+import React from "react";
+import { TYPOGRAPHY_PROPS } from "../../../../../../../../styles/common/mui/typography";
+
+export const KeyElType = ({
+  children,
+  color = TYPOGRAPHY_PROPS.COLOR.INK_LIGHT,
+  component = "div",
+  variant = TYPOGRAPHY_PROPS.VARIANT.INHERIT,
+  ...props /* MuiTypographyProps */
+}: TypographyProps): JSX.Element => {
+  return (
+    <Typography
+      color={color}
+      component={component}
+      variant={variant}
+      {...props}
+    >
+      {children}
+    </Typography>
+  );
+};
diff --git a/src/components/Table/components/TableCell/components/KeyValueCell/components/KeyValueElType/keyValueElType.tsx b/src/components/Table/components/TableCell/components/KeyValueCell/components/KeyValueElType/keyValueElType.tsx
new file mode 100644
index 00000000..ac8ed94f
--- /dev/null
+++ b/src/components/Table/components/TableCell/components/KeyValueCell/components/KeyValueElType/keyValueElType.tsx
@@ -0,0 +1,14 @@
+import { Stack, StackProps } from "@mui/material";
+import React from "react";
+import { KeyValueElTypeProps } from "../../../../../../../../components/common/KeyValuePairs/components/KeyValueElType/keyValueElType";
+
+export const KeyValueElType = ({
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- `keyValue` is accepted for compatibility but not used.
+  keyValue,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- `keyValueFn` is accepted for compatibility but not used.
+  keyValueFn,
+  ...props /* MuiStackProps */
+}: StackProps &
+  Pick<KeyValueElTypeProps, "keyValue" | "keyValueFn">): JSX.Element => {
+  return <Stack {...props} direction="row" gap={1} useFlexGap />;
+};
diff --git a/src/components/Table/components/TableCell/components/KeyValueCell/components/KeyValuesElType/keyValuesElType.tsx b/src/components/Table/components/TableCell/components/KeyValueCell/components/KeyValuesElType/keyValuesElType.tsx
new file mode 100644
index 00000000..fce84ca7
--- /dev/null
+++ b/src/components/Table/components/TableCell/components/KeyValueCell/components/KeyValuesElType/keyValuesElType.tsx
@@ -0,0 +1,8 @@
+import { Stack, StackProps } from "@mui/material";
+import React from "react";
+
+export const KeyValuesElType = ({
+  ...props /* MuiStackProps */
+}: StackProps): JSX.Element => {
+  return <Stack {...props} gap={1} useFlexGap />;
+};
diff --git a/src/components/Table/components/TableCell/components/KeyValueCell/keyValueCell.tsx b/src/components/Table/components/TableCell/components/KeyValueCell/keyValueCell.tsx
new file mode 100644
index 00000000..743905de
--- /dev/null
+++ b/src/components/Table/components/TableCell/components/KeyValueCell/keyValueCell.tsx
@@ -0,0 +1,27 @@
+import { CellContext, RowData } from "@tanstack/react-table";
+import React from "react";
+import {
+  KeyValuePairs,
+  KeyValuePairsProps,
+} from "../../../../../../components/common/KeyValuePairs/keyValuePairs";
+import { KeyElType } from "./components/KeyElType/keyElType";
+import { KeyValueElType } from "./components/KeyValueElType/keyValueElType";
+import { KeyValuesElType } from "./components/KeyValuesElType/keyValuesElType";
+
+export const KeyValueCell = <
+  T extends RowData,
+  TValue extends KeyValuePairsProps = KeyValuePairsProps
+>({
+  getValue,
+}: CellContext<T, TValue>): JSX.Element | null => {
+  const props = getValue();
+  if (!props) return null;
+  return (
+    <KeyValuePairs
+      KeyElType={KeyElType}
+      KeyValueElType={KeyValueElType}
+      KeyValuesElType={KeyValuesElType}
+      {...props}
+    />
+  );
+};
diff --git a/src/components/Table/components/TableCell/components/KeyValueCell/stories/args.ts b/src/components/Table/components/TableCell/components/KeyValueCell/stories/args.ts
new file mode 100644
index 00000000..ccffede3
--- /dev/null
+++ b/src/components/Table/components/TableCell/components/KeyValueCell/stories/args.ts
@@ -0,0 +1,12 @@
+import { ComponentProps } from "react";
+import { KeyValueCell } from "../keyValueCell";
+
+export const DEFAULT_ARGS: Partial<ComponentProps<typeof KeyValueCell>> = {
+  getValue: (() => ({
+    keyValuePairs: new Map([
+      ["Updated:", "1 month ago"],
+      ["By:", "tracker-prod@hca.com"],
+      ["Refreshed:", "6 days ago"],
+    ]),
+  })) as ComponentProps<typeof KeyValueCell>["getValue"],
+};
diff --git a/src/components/Table/components/TableCell/components/KeyValueCell/stories/keyValueCell.stories.tsx b/src/components/Table/components/TableCell/components/KeyValueCell/stories/keyValueCell.stories.tsx
new file mode 100644
index 00000000..728ba93b
--- /dev/null
+++ b/src/components/Table/components/TableCell/components/KeyValueCell/stories/keyValueCell.stories.tsx
@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { KeyValueCell } from "../keyValueCell";
+import { DEFAULT_ARGS } from "./args";
+
+const meta: Meta<typeof KeyValueCell> = {
+  component: KeyValueCell,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: DEFAULT_ARGS,
+};