@simplybusiness/mobius 10.0.0 → 10.1.1

package/dist/types/components/TextOrHTML/TextOrHTML.d.ts

@@ -10,9 +10,11 @@ export interface TextOrHTMLProps extends Omit<TextProps, "children">, RefAttribu
     htmlElementType?: HTMLElementType;
     /** If true, wraps the dangerous HTML element inside a Text component */
     textWrapper?: boolean;
+    /** If true, auto-detects whether text is HTML or plain text to determine wrapping and element type */
+    autoDetect?: boolean;
 }
 declare const TextOrHTML: {
-    ({ ref, text, htmlClassName, htmlElementType, textWrapper, ...textProps }: TextOrHTMLProps): import("react/jsx-runtime").JSX.Element;
+    ({ ref, text, htmlClassName, htmlElementType, textWrapper, autoDetect, ...textProps }: TextOrHTMLProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { TextOrHTML };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "10.0.0",
+  "version": "10.1.1",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",

package/src/components/Button/Button.css

@@ -50,11 +50,16 @@
       background: var(--button-primary-color);
       font-variation-settings: var(--button-primary-font-variation);
 
-      &:where(:active),
-      &:where(:hover) {
+      &:where(:active) {
         background: var(--button-primary-hover-color);
       }
 
+      @media (hover: hover) {
+        &:where(:hover) {
+          background: var(--button-primary-hover-color);
+        }
+      }
+
       &:where(:focus-visible) {
         box-shadow: var(--box-shadow-default);
       }
@@ -72,13 +77,20 @@
       background: transparent;
       border-color: var(--button-secondary-color);
 
-      &:where(:active),
-      &:where(:hover) {
+      &:where(:active) {
         --button-content-color: var(--color-text-inverted);
         background: var(--button-secondary-hover-color);
         border-color: var(--button-secondary-hover-color);
       }
 
+      @media (hover: hover) {
+        &:where(:hover) {
+          --button-content-color: var(--color-text-inverted);
+          background: var(--button-secondary-hover-color);
+          border-color: var(--button-secondary-hover-color);
+        }
+      }
+
       &:where(:focus-visible) {
         box-shadow: var(--box-shadow-default);
       }
@@ -99,15 +111,19 @@
       border-color: transparent;
 
       &:where(:active) {
-        background: var(--color-secondary-hover);
-      }
-
-      &:where(:hover) {
         --button-content-color: var(--color-text-inverted);
         border-color: transparent;
         background: var(--color-secondary-hover);
       }
 
+      @media (hover: hover) {
+        &:where(:hover) {
+          --button-content-color: var(--color-text-inverted);
+          border-color: transparent;
+          background: var(--color-secondary-hover);
+        }
+      }
+
       &:where(:focus-visible) {
         box-shadow: var(--box-shadow-default);
       }
@@ -130,8 +146,10 @@
         background: var(--color-background-light);
       }
 
-      &:where(:hover) {
-        background: var(--color-background-light);
+      @media (hover: hover) {
+        &:where(:hover) {
+          background: var(--color-background-light);
+        }
       }
 
       &:where(:focus-visible) {
@@ -167,9 +185,11 @@
         fill: var(--button-content-color);
       }
 
-      &:where(:hover) {
-        background: var(--color-valid-hover);
-        border-color: var(--color-valid-hover);
+      @media (hover: hover) {
+        &:where(:hover) {
+          background: var(--color-valid-hover);
+          border-color: var(--color-valid-hover);
+        }
       }
 
       &:where(:active) {
@@ -217,7 +237,6 @@
         text-decoration: underline;
       }
 
-      &:hover,
       &:active {
         --button-content-color: var(
           --button-link-hover-color,
@@ -227,6 +246,17 @@
         cursor: pointer;
       }
 
+      @media (hover: hover) {
+        &:hover {
+          --button-content-color: var(
+            --button-link-hover-color,
+            var(--color-secondary-hover)
+          );
+          text-decoration: var(--button-link-hover-text-decoration, underline);
+          cursor: pointer;
+        }
+      }
+
       &:focus-visible {
         box-shadow: var(--button-link-box-shadow, var(--box-shadow-default));
       }

package/src/components/TextOrHTML/TextOrHTML.test.tsx

@@ -127,6 +127,101 @@ describe("TextOrHTML", () => {
     });
   });
 
+  describe("autoDetect prop", () => {
+    it("detects HTML content and renders as a div without Text wrapper", () => {
+      const { container } = render(
+        <TextOrHTML text="<strong>Bold text</strong>" autoDetect />,
+      );
+      expect(container.firstChild?.nodeName).toBe("DIV");
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      const div = container.querySelector("div");
+      expect(div?.innerHTML).toBe("<strong>Bold text</strong>");
+    });
+
+    it("detects plain text and wraps in a Text component with a span", () => {
+      render(
+        <TextOrHTML text="Just plain text" autoDetect data-testid="test" />,
+      );
+      const element = screen.getByTestId("test");
+      expect(element).toHaveClass("mobius");
+      expect(element).toHaveClass(CLASS_NAME);
+      // eslint-disable-next-line testing-library/no-node-access
+      const span = element.querySelector("span");
+      expect(span?.innerHTML).toBe("Just plain text");
+    });
+
+    it("detects HTML with leading whitespace", () => {
+      const { container } = render(
+        <TextOrHTML text="  <div>Indented HTML</div>" autoDetect />,
+      );
+      expect(container.firstChild?.nodeName).toBe("DIV");
+    });
+
+    it("treats text not starting with a tag as plain text", () => {
+      render(<TextOrHTML text="Hello world" autoDetect data-testid="test" />);
+      expect(screen.getByTestId("test")).toHaveClass(CLASS_NAME);
+    });
+
+    it("does not auto-detect when autoDetect is false", () => {
+      const { container } = render(<TextOrHTML text="Plain text" />);
+      // Without autoDetect, defaults to span with no Text wrapper
+      expect(container.firstChild?.nodeName).toBe("SPAN");
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      expect(container.querySelector(`.${CLASS_NAME}`)).toBeNull();
+    });
+
+    it("respects explicit htmlElementType even with autoDetect", () => {
+      const { container } = render(
+        <TextOrHTML
+          htmlElementType="span"
+          text="<strong>HTML</strong>"
+          autoDetect
+        />,
+      );
+      expect(container.firstChild?.nodeName).toBe("SPAN");
+    });
+
+    it("wraps HTML in Text when both autoDetect and textWrapper are true", () => {
+      render(
+        <TextOrHTML
+          text="<strong>Bold</strong>"
+          htmlElementType="span"
+          autoDetect
+          textWrapper
+          data-testid="test"
+        />,
+      );
+      const element = screen.getByTestId("test");
+      expect(element).toHaveClass(CLASS_NAME);
+      // eslint-disable-next-line testing-library/no-node-access
+      const span = element.querySelector("span");
+      expect(span?.innerHTML).toBe("<strong>Bold</strong>");
+    });
+
+    it("passes className to Text wrapper when autoDetect wraps plain text", () => {
+      render(
+        <TextOrHTML
+          text="Plain text"
+          autoDetect
+          className="custom-class"
+          data-testid="test"
+        />,
+      );
+      const element = screen.getByTestId("test");
+      expect(element).toHaveClass(CLASS_NAME);
+      expect(element).toHaveClass("custom-class");
+    });
+
+    it("does not wrap in Text when autoDetect is off and textWrapper is omitted", () => {
+      const { container } = render(
+        <TextOrHTML text="Plain text, no wrapper" />,
+      );
+      expect(container.firstChild?.nodeName).toBe("SPAN");
+      // eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
+      expect(container.querySelector(`.${CLASS_NAME}`)).toBeNull();
+    });
+  });
+
   // See: https://github.com/facebook/react/issues/31660
   describe("React 19 dangerouslySetInnerHTML regression", () => {
     it("should not replace innerHTML on re-render when text prop hasn't changed", async () => {

package/src/components/TextOrHTML/TextOrHTML.tsx

@@ -5,6 +5,8 @@ import { Text } from "../Text/Text";
 
 export type HTMLElementType = "span" | "div";
 
+const isHTML = (text: string) => /^\s*<[a-z]/i.test(text);
+
 export interface TextOrHTMLProps
   extends Omit<TextProps, "children">, RefAttributes<TextElementType> {
   /** HTML string to be rendered with dangerouslySetInnerHTML */
@@ -15,17 +17,25 @@ export interface TextOrHTMLProps
   htmlElementType?: HTMLElementType;
   /** If true, wraps the dangerous HTML element inside a Text component */
   textWrapper?: boolean;
+  /** If true, auto-detects whether text is HTML or plain text to determine wrapping and element type */
+  autoDetect?: boolean;
 }
 
 const TextOrHTML = ({
   ref,
   text,
   htmlClassName,
-  htmlElementType = "span",
+  htmlElementType,
   textWrapper = false,
+  autoDetect = false,
   ...textProps
 }: TextOrHTMLProps) => {
-  const DangerousComponent = htmlElementType;
+  const textIsHTML = autoDetect && isHTML(text);
+  const shouldWrapInText = autoDetect
+    ? textWrapper || !textIsHTML
+    : textWrapper;
+  const resolvedElementType = htmlElementType ?? (textIsHTML ? "div" : "span");
+  const DangerousComponent = resolvedElementType;
 
   // Memoize the dangerouslySetInnerHTML object to prevent unnecessary re-renders
   // See: https://github.com/facebook/react/issues/31660
@@ -38,7 +48,7 @@ const TextOrHTML = ({
     />
   );
 
-  if (textWrapper) {
+  if (shouldWrapInText) {
     return (
       <Text ref={ref} {...textProps}>
         {dangerousElement}

package/dist/esm/chunk-HHJ4Y5JQ.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/components/TextOrHTML/TextOrHTML.tsx"],
-  "sourcesContent": ["import type { RefAttributes } from \"react\";\nimport { useMemo } from \"react\";\nimport type { TextElementType, TextProps } from \"../Text/Text\";\nimport { Text } from \"../Text/Text\";\n\nexport type HTMLElementType = \"span\" | \"div\";\n\nexport interface TextOrHTMLProps\n  extends Omit<TextProps, \"children\">, RefAttributes<TextElementType> {\n  /** HTML string to be rendered with dangerouslySetInnerHTML */\n  text: string;\n  /** Custom class name for the dangerous HTML element */\n  htmlClassName?: string;\n  /** HTML element type for the dangerous HTML element */\n  htmlElementType?: HTMLElementType;\n  /** If true, wraps the dangerous HTML element inside a Text component */\n  textWrapper?: boolean;\n}\n\nconst TextOrHTML = ({\n  ref,\n  text,\n  htmlClassName,\n  htmlElementType = \"span\",\n  textWrapper = false,\n  ...textProps\n}: TextOrHTMLProps) => {\n  const DangerousComponent = htmlElementType;\n\n  // Memoize the dangerouslySetInnerHTML object to prevent unnecessary re-renders\n  // See: https://github.com/facebook/react/issues/31660\n  const dangerousHTML = useMemo(() => ({ __html: text }), [text]);\n\n  const dangerousElement = (\n    <DangerousComponent\n      className={htmlClassName}\n      dangerouslySetInnerHTML={dangerousHTML}\n    />\n  );\n\n  if (textWrapper) {\n    return (\n      <Text ref={ref} {...textProps}>\n        {dangerousElement}\n      </Text>\n    );\n  }\n\n  return dangerousElement;\n};\n\nTextOrHTML.displayName = \"TextOrHTML\";\nexport { TextOrHTML };\n"],
-  "mappings": ";;;;;AACA,SAAS,eAAe;AAiCpB;AAfJ,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA,kBAAkB;AAAA,EAClB,cAAc;AAAA,EACd,GAAG;AACL,MAAuB;AACrB,QAAM,qBAAqB;AAI3B,QAAM,gBAAgB,QAAQ,OAAO,EAAE,QAAQ,KAAK,IAAI,CAAC,IAAI,CAAC;AAE9D,QAAM,mBACJ;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,MACX,yBAAyB;AAAA;AAAA,EAC3B;AAGF,MAAI,aAAa;AACf,WACE,oBAAC,QAAK,KAAW,GAAG,WACjB,4BACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEA,WAAW,cAAc;",
-  "names": []
-}