@stackshift-ui/text 6.0.11 → 7.0.0-beta.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stackshift-ui/text",
   "description": "",
-  "version": "6.0.11",
+  "version": "7.0.0-beta.0",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -29,20 +29,20 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/eslint-config": "6.0.10",
-    "@stackshift-ui/typescript-config": "6.0.10"
+    "@stackshift-ui/typescript-config": "6.0.10",
+    "@stackshift-ui/eslint-config": "6.0.10"
   },
   "dependencies": {
     "classnames": "^2.5.1",
-    "@stackshift-ui/scripts": "6.0.10",
-    "@stackshift-ui/system": "6.0.11"
+    "@stackshift-ui/system": "6.1.0-beta.0",
+    "@stackshift-ui/scripts": "6.1.0-beta.0"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",
     "react-dom": "16.8 - 19",
-    "@stackshift-ui/system": ">=6.0.11"
+    "@stackshift-ui/system": ">=6.1.0-beta.0"
   },
   "peerDependenciesMeta": {
     "next": {

package/src/text.test.tsx

@@ -7,7 +7,80 @@ describe.concurrent("text", () => {
 
   test("Common: Text - test if renders without errors", ({ expect }) => {
     const clx = "text-class";
-    render(<Text className={clx} />);
-    expect(screen.getByTestId("p").classList).toContain(clx);
+    render(<Text className={clx}>Test text content</Text>);
+    const text = screen.getByText("Test text content");
+    screen.debug(text);
+    expect(text.classList).toContain(clx);
+    expect(text.tagName.toLowerCase()).toBe("p"); // default element
+  });
+
+  test("Common: Text - test with different element type", ({ expect }) => {
+    render(<Text as="span">Test span</Text>);
+    const text = screen.getByText("Test span");
+    expect(text.tagName.toLowerCase()).toBe("span");
+  });
+
+  test("Common: Test - test with different sizes", ({ expect }) => {
+    render(<Text fontSize="lg">Test large text</Text>);
+    const text = screen.getByText("Test large text");
+    expect(text.classList).toContain("text-lg");
+
+    render(<Text fontSize="xl">Test extra large text</Text>);
+    const text2 = screen.getByText("Test extra large text");
+    expect(text2.classList).toContain("text-xl");
+
+    render(<Text fontSize="2xl">Test 2x large text</Text>);
+    const text3 = screen.getByText("Test 2x large text");
+    expect(text3.classList).toContain("text-2xl");
+
+    render(<Text fontSize="3xl">Test 3x large text</Text>);
+    const text4 = screen.getByText("Test 3x large text");
+    expect(text4.classList).toContain("text-3xl");
+
+    render(<Text fontSize="4xl">Test 4x large text</Text>);
+    const text5 = screen.getByText("Test 4x large text");
+    expect(text5.classList).toContain("text-4xl");
+
+    render(<Text fontSize="5xl">Test 5x large text</Text>);
+    const text6 = screen.getByText("Test 5x large text");
+    expect(text6.classList).toContain("text-5xl");
+  });
+
+  test("Common: Text - test with different weights", ({ expect }) => {
+    render(<Text weight="bold">Test bold text</Text>);
+    const text = screen.getByText("Test bold text");
+    expect(text.classList).toContain("font-bold");
+
+    render(<Text weight="semibold">Test semibold text</Text>);
+    const text2 = screen.getByText("Test semibold text");
+    expect(text2.classList).toContain("font-semibold");
+
+    render(<Text weight="medium">Test medium text</Text>);
+    const text3 = screen.getByText("Test medium text");
+    expect(text3.classList).toContain("font-medium");
+  });
+
+  test("Common: Text - test with muted", ({ expect }) => {
+    render(<Text muted>Test muted text</Text>);
+    const text = screen.getByText("Test muted text");
+    expect(text.classList).toContain("text-gray-500");
+  });
+
+  test("Common: Text - test with custom class", ({ expect }) => {
+    render(<Text className="custom-class">Test custom class</Text>);
+    const text = screen.getByText("Test custom class");
+    expect(text.classList).toContain("custom-class");
+  });
+
+  test("Common: Text - test with custom style", ({ expect }) => {
+    render(<Text style={{ color: "red" }}>Test custom style</Text>);
+    const text = screen.getByText("Test custom style");
+    expect(text.style.color).toBe("red");
+  });
+
+  test("Common: Text - test with as prop", ({ expect }) => {
+    render(<Text as="h1">Test as prop</Text>);
+    const text = screen.getByText("Test as prop");
+    expect(text.tagName.toLowerCase()).toBe("h1");
   });
 });

package/src/text.tsx

@@ -62,7 +62,7 @@ export const Text: React.FC<TextProps> = ({
     normal: "font-normal",
     semibold: "font-semibold",
     bold: "font-bold",
-    medium: "font-mediun",
+    medium: "font-medium",
     extrabold: "font-extrabold",
     black: "font-black",
   };
@@ -77,12 +77,7 @@ export const Text: React.FC<TextProps> = ({
   const variantClass = variants[type as VariantType] ?? variants.p;
 
   return (
-    <Component
-      as={as}
-      className={cn(variantClass, className)}
-      style={style}
-      {...props}
-      data-testid={displayName}>
+    <Component as={as} className={cn(variantClass, className)} style={style} {...props}>
       {children}
     </Component>
   );