feat: create time since component (#703)

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>
+  );
+};

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 />;
+};

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 />;
+};

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}
+    />
+  );
+};

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"],
+};

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,
+};