Restore NoWrapTypography

src/NoWrapTypography/NoWrapTypography.spec.tsx

@@ -0,0 +1,40 @@
+import { expect, test } from "@playwright/test";
+
+// test that the tooltip shows when the text overflows
+test.describe("NoWrapTypography", () => {
+  test("shows tooltip when text overflows", async ({ page }) => {
+    // open the storybook with a large (h1) font size to ensure the text overflows
+    const url = `http://localhost:6006/?path=/story/general-nowraptypography--default&args=variant:h1`;
+    await page.goto(url);
+    const frame = page.frameLocator('iframe[title="storybook-preview-iframe"]');
+
+    // hover over the text
+    const textContent = "text that is too long to fit in the box";
+    await frame.getByText(textContent).hover();
+
+    // expect the tooltip to be visible and have the correct text
+    const tooltip = frame.locator("div[role=tooltip]").first();
+    await expect(tooltip).toBeVisible();
+    expect(tooltip).toHaveText(textContent);
+
+    // hover over another element to hide the tooltip
+    page.getByText("Controls").hover();
+
+    // expect the tooltip to be hidden
+    await expect(tooltip).not.toBeVisible();
+  });
+  test("doesn't show tooltip when text overflows", async ({ page }) => {
+    // open the storybook with a small (caption) font size to ensure the text doesn't overflow
+    const url = `http://localhost:6006/?path=/story/general-nowraptypography--default&args=variant:caption`;
+    await page.goto(url);
+    const frame = page.frameLocator('iframe[title="storybook-preview-iframe"]');
+
+    // hover over the text
+    const textContent = "text that is too long to fit in the box";
+    await frame.getByText(textContent).hover();
+
+    // expect the tooltip to be hidden
+    const tooltip = frame.locator("div[role=tooltip]").first();
+    await expect(tooltip).not.toBeVisible();
+  });
+});

src/NoWrapTypography/NoWrapTypography.stories.tsx

@@ -0,0 +1,43 @@
+import { Meta, StoryFn } from "@storybook/react";
+
+import { Box } from "@mui/material";
+import NoWrapTypography from "./NoWrapTypography";
+import { NoWrapTypographyProps } from "./NoWrapTypography.types";
+import React from "react";
+
+/**
+ * Story metadata
+ */
+const meta: Meta<typeof NoWrapTypography> = {
+  argTypes: {
+    children: {
+      control: {
+        type: "text"
+      }
+    }
+  },
+  component: NoWrapTypography,
+  title: "General/NoWrapTypography"
+};
+export default meta;
+
+const Template: StoryFn<NoWrapTypographyProps> = props => {
+  return (
+    <Box sx={{ border: "1px solid black", mt: 2, width: "350px" }}>
+      <NoWrapTypography {...props} />
+    </Box>
+  );
+};
+
+export const Default: {
+  args: NoWrapTypographyProps;
+  render: StoryFn<NoWrapTypographyProps>;
+} = {
+  args: {
+    children:
+      "This is some text that is far far far too long to fit in the box",
+    variant: "body1"
+  },
+
+  render: Template
+};

src/NoWrapTypography/NoWrapTypography.test.tsx

@@ -0,0 +1,14 @@
+import { describe, test } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+import NoWrapTypography from "./NoWrapTypography";
+import React from "react";
+
+describe("NoWrapTypography", () => {
+  test("can pass 'sx' prop", () => {
+    render(
+      <NoWrapTypography sx={{ color: "red" }}>Some text</NoWrapTypography>
+    );
+    expect(screen.getByText("Some text")).toHaveStyle("color: rgb(255, 0, 0)");
+  });
+});

src/NoWrapTypography/NoWrapTypography.tsx

@@ -0,0 +1,19 @@
+import { NoWrapTypographyProps } from "./NoWrapTypography.types";
+import React from "react";
+import TruncatedTooltip from "../TruncatedTooltip/TruncatedTooltip";
+import { Typography } from "@mui/material";
+
+/**
+ * Typography component to show a tooltip if the text overflows.
+ */
+export default function NoWrapTypography({
+  children,
+  sx,
+  variant
+}: NoWrapTypographyProps) {
+  return (
+    <TruncatedTooltip component={Typography} variant={variant} sx={sx}>
+      {children}
+    </TruncatedTooltip>
+  );
+}

src/NoWrapTypography/NoWrapTypography.types.ts

@@ -0,0 +1,19 @@
+import { SxProps, Theme } from "@mui/material/styles";
+
+import { TypographyProps } from "@mui/material";
+
+export type NoWrapTypographyProps = {
+  /**
+   * The content of the component.
+   */
+  children: React.ReactNode;
+  /**
+   * The CSS styles applied to the component.
+   */
+  // define react type for sx
+  sx?: SxProps<Theme>;
+  /**
+   * The variant to use.
+   */
+  variant?: TypographyProps["variant"];
+};

src/NoWrapTypography/index.ts

@@ -0,0 +1,2 @@
+export { default } from "./NoWrapTypography";
+export type { NoWrapTypographyProps } from "./NoWrapTypography.types";