@simplybusiness/mobius 10.3.0 → 10.3.2

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

@@ -16,6 +16,7 @@ export interface TextProps extends DOMProps, RefAttributes<TextElementType> {
     children: ReactNode;
     style?: React.CSSProperties;
 }
+export declare const getElementType: (variant: TextVariantType | undefined, elementType: ElementType | undefined) => ElementType;
 declare const Text: {
     ({ ref, elementType, ...props }: TextProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/package.json

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

package/src/components/Table/Table.test.tsx

@@ -231,10 +231,7 @@ describe("Test for Table", () => {
       expect(screen.getByTestId("header-cell").nodeName).toBe("TH");
     });
 
-    // Note: HeaderCell does not set a `scope` attribute. This is a potential a11y
-    // improvement — <th> elements should ideally have scope="col" or scope="row"
-    // to associate headers with their data cells.
-    it("HeaderCell does not apply a scope attribute", () => {
+    it("HeaderCell applies scope='col' by default", () => {
       render(
         <Table>
           <Table.Head>
@@ -246,7 +243,7 @@ describe("Test for Table", () => {
           </Table.Head>
         </Table>,
       );
-      expect(screen.getByTestId("header-cell")).not.toHaveAttribute("scope");
+      expect(screen.getByTestId("header-cell")).toHaveAttribute("scope", "col");
     });
   });
 

package/src/components/Text/Text.test.tsx

@@ -111,11 +111,10 @@ describe("Text", () => {
       expect(container.firstChild?.nodeName).toBe("SPAN");
     });
 
-    it("renders <p> when variant is set but no elementType is provided", () => {
-      // The component defaults elementType to "p" and always renders using that prop,
-      // variant only affects CSS classes -- not the rendered element
+    it("infers element type from variant when no elementType is provided", () => {
+      // h1-h4 variants render as their corresponding heading elements
       const { container } = render(<Text variant="h1">Heading text</Text>);
-      expect(container.firstChild?.nodeName).toBe("P");
+      expect(container.firstChild?.nodeName).toBe("H1");
     });
   });
 

package/src/components/Text/Text.tsx

@@ -27,7 +27,7 @@ export interface TextProps extends DOMProps, RefAttributes<TextElementType> {
   style?: React.CSSProperties;
 }
 
-const getElementType = (
+export const getElementType = (
   variant: TextVariantType | undefined,
   elementType: ElementType | undefined,
 ): ElementType => {

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

@@ -138,16 +138,67 @@ describe("TextOrHTML", () => {
       expect(div?.innerHTML).toBe("<strong>Bold text</strong>");
     });
 
-    it("detects plain text and wraps in a Text component with a span", () => {
+    it("detects plain text and renders directly in a Text component without nested 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);
+      expect(element).toHaveTextContent("Just plain text");
       // eslint-disable-next-line testing-library/no-node-access
-      const span = element.querySelector("span");
-      expect(span?.innerHTML).toBe("Just plain text");
+      expect(element.querySelector("span")).toBeNull();
+    });
+
+    it("applies htmlClassName to the Text element for plain text", () => {
+      render(
+        <TextOrHTML
+          text="Please enter your full name"
+          htmlClassName="mobius-question__secondary-text"
+          autoDetect
+          data-testid="test"
+        />,
+      );
+      const element = screen.getByTestId("test");
+      expect(element).toHaveClass("mobius-question__secondary-text");
+      expect(element).toHaveClass("mobius");
+      expect(element).toHaveClass(CLASS_NAME);
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(element.querySelector("span")).toBeNull();
+    });
+
+    it("renders inline HTML in non-block text with autoDetect", () => {
+      render(
+        <TextOrHTML
+          text="This is <strong>bold</strong> text"
+          autoDetect
+          data-testid="test"
+        />,
+      );
+      const element = screen.getByTestId("test");
+      expect(element).toHaveClass("mobius");
+      expect(element.nodeName).toBe("P");
+      // eslint-disable-next-line testing-library/no-node-access
+      expect(element.querySelector("strong")).toBeInTheDocument();
+      expect(element).toHaveTextContent("This is bold text");
+    });
+
+    it("decodes HTML entities in text that contains no HTML tags with autoDetect", () => {
+      const entities = [
+        { text: "before &amp; after", expected: "before & after" },
+        { text: "before &lt; after", expected: "before < after" },
+        { text: "before &gt; after", expected: "before > after" },
+        { text: "before &#39; after", expected: "before ' after" },
+        { text: "before &quot; after", expected: 'before " after' },
+      ];
+
+      for (const { text, expected } of entities) {
+        const { unmount } = render(
+          <TextOrHTML text={text} autoDetect data-testid="test" />,
+        );
+        expect(screen.getByTestId("test")).toHaveTextContent(expected);
+        unmount();
+      }
     });
 
     it("detects HTML with leading whitespace", () => {

package/src/components/TextOrHTML/TextOrHTML.tsx

@@ -1,11 +1,30 @@
+import classNames from "classnames/dedupe";
 import type { RefAttributes } from "react";
 import { useMemo } from "react";
 import type { TextElementType, TextProps } from "../Text/Text";
-import { Text } from "../Text/Text";
+import { Text, getElementType } from "../Text/Text";
 
 export type HTMLElementType = "span" | "div";
 
-const isHTML = (text: string) => /^\s*<[a-z]/i.test(text);
+const isBlockHTML = (text: string) => /^\s*<[a-z]/i.test(text);
+const containsHTML = (text: string) =>
+  /<[a-z/]/i.test(text) || /&(?:#\d+|#x[\da-f]+|[a-z]\w*);/i.test(text); // tag or entity
+
+const buildTextClasses = (
+  textProps: Omit<TextProps, "children">,
+  htmlClassName?: string,
+) => {
+  const { variant, elementType, spacing, className } = textProps;
+  const variantType = variant || getElementType(variant, elementType);
+  return classNames(
+    "mobius",
+    "mobius-text",
+    { [`--is-${variantType}`]: variantType },
+    { [`--has-line-height-${spacing}`]: spacing },
+    className,
+    htmlClassName,
+  );
+};
 
 export interface TextOrHTMLProps
   extends Omit<TextProps, "children">, RefAttributes<TextElementType> {
@@ -30,17 +49,35 @@ const TextOrHTML = ({
   autoDetect = false,
   ...textProps
 }: TextOrHTMLProps) => {
-  const textIsHTML = autoDetect && isHTML(text);
-  const shouldWrapInText = autoDetect
-    ? textWrapper || !textIsHTML
-    : textWrapper;
-  const resolvedElementType = htmlElementType ?? (textIsHTML ? "div" : "span");
-  const DangerousComponent = resolvedElementType;
+  const textIsBlockHTML = autoDetect && isBlockHTML(text);
 
   // Memoize the dangerouslySetInnerHTML object to prevent unnecessary re-renders
   // See: https://github.com/facebook/react/issues/31660
   const dangerousHTML = useMemo(() => ({ __html: text }), [text]);
 
+  // Non-block text with autoDetect: render directly on a Text-equivalent element,
+  // avoiding unnecessary <span> nesting inside <p>.
+  if (autoDetect && !textIsBlockHTML) {
+    const { variant, spacing, elementType, className, ...domProps } = textProps;
+    const Element = getElementType(variant, elementType);
+    const classes = buildTextClasses(textProps, htmlClassName);
+
+    return containsHTML(text) ? (
+      <Element
+        ref={ref}
+        {...domProps}
+        className={classes}
+        dangerouslySetInnerHTML={dangerousHTML}
+      />
+    ) : (
+      <Element ref={ref} {...domProps} className={classes}>
+        {text}
+      </Element>
+    );
+  }
+
+  const DangerousComponent =
+    htmlElementType ?? (textIsBlockHTML ? "div" : "span");
   const dangerousElement = (
     <DangerousComponent
       className={htmlClassName}
@@ -48,7 +85,7 @@ const TextOrHTML = ({
     />
   );
 
-  if (shouldWrapInText) {
+  if (textWrapper) {
     return (
       <Text ref={ref} {...textProps}>
         {dangerousElement}

package/dist/esm/chunk-VIDKIVA6.js

@@ -1,40 +0,0 @@
-import {
-  Text
-} from "./chunk-ZS5MFZHD.js";
-
-// src/components/TextOrHTML/TextOrHTML.tsx
-import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-var isHTML = (text) => /^\s*<[a-z]/i.test(text);
-var TextOrHTML = ({
-  ref,
-  text,
-  htmlClassName,
-  htmlElementType,
-  textWrapper = false,
-  autoDetect = false,
-  ...textProps
-}) => {
-  const textIsHTML = autoDetect && isHTML(text);
-  const shouldWrapInText = autoDetect ? textWrapper || !textIsHTML : textWrapper;
-  const resolvedElementType = htmlElementType ?? (textIsHTML ? "div" : "span");
-  const DangerousComponent = resolvedElementType;
-  const dangerousHTML = useMemo(() => ({ __html: text }), [text]);
-  const dangerousElement = /* @__PURE__ */ jsx(
-    DangerousComponent,
-    {
-      className: htmlClassName,
-      dangerouslySetInnerHTML: dangerousHTML
-    }
-  );
-  if (shouldWrapInText) {
-    return /* @__PURE__ */ jsx(Text, { ref, ...textProps, children: dangerousElement });
-  }
-  return dangerousElement;
-};
-TextOrHTML.displayName = "TextOrHTML";
-
-export {
-  TextOrHTML
-};
-//# sourceMappingURL=chunk-VIDKIVA6.js.map

package/dist/esm/chunk-VIDKIVA6.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\nconst isHTML = (text: string) => /^\\s*<[a-z]/i.test(text);\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  /** If true, auto-detects whether text is HTML or plain text to determine wrapping and element type */\n  autoDetect?: boolean;\n}\n\nconst TextOrHTML = ({\n  ref,\n  text,\n  htmlClassName,\n  htmlElementType,\n  textWrapper = false,\n  autoDetect = false,\n  ...textProps\n}: TextOrHTMLProps) => {\n  const textIsHTML = autoDetect && isHTML(text);\n  const shouldWrapInText = autoDetect\n    ? textWrapper || !textIsHTML\n    : textWrapper;\n  const resolvedElementType = htmlElementType ?? (textIsHTML ? \"div\" : \"span\");\n  const DangerousComponent = resolvedElementType;\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 (shouldWrapInText) {\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;AA2CpB;AArCJ,IAAM,SAAS,CAAC,SAAiB,cAAc,KAAK,IAAI;AAgBxD,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAAA,EACd,aAAa;AAAA,EACb,GAAG;AACL,MAAuB;AACrB,QAAM,aAAa,cAAc,OAAO,IAAI;AAC5C,QAAM,mBAAmB,aACrB,eAAe,CAAC,aAChB;AACJ,QAAM,sBAAsB,oBAAoB,aAAa,QAAQ;AACrE,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,kBAAkB;AACpB,WACE,oBAAC,QAAK,KAAW,GAAG,WACjB,4BACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEA,WAAW,cAAc;",
-  "names": []
-}