Merge pull request #152 from ClickHouse/pass-properties-to-typography

pass properties to typography

src/components/Typography/Text/Text.test.tsx

@@ -8,4 +8,11 @@ describe("Text", () => {
 
     expect(rendered.getByText(text).textContent).toEqual(text);
   });
+
+  test("it should pass properties to the Text component ", () => {
+    const text = "text to render";
+    const rendered = renderCUI(<Text data-testid={"test-testid"}>{text}</Text>);
+
+    expect(rendered.getAllByTestId("test-testid").length).toEqual(1);
+  });
 });

src/components/Typography/Text/Text.tsx

@@ -13,12 +13,13 @@ export interface TextProps {
 }
 
 /** Component for writing blocks of body copy */
-const _Text = ({ color, size, weight, className, children }: TextProps) => (
+const _Text = ({ color, size, weight, className, children, ...props }: TextProps) => (
   <CuiText
     $color={color}
     $size={size}
     $weight={weight}
     className={className}
+    {...props}
   >
     {children}
   </CuiText>

src/components/Typography/Title/Title.test.tsx

@@ -8,4 +8,18 @@ describe("Title", () => {
 
     expect(rendered.getByRole("heading", { level: 1 }).textContent).toEqual(text);
   });
+
+  test("it should pass properties to the Title component ", () => {
+    const text = "text to render";
+    const rendered = renderCUI(
+      <Title
+        type="h1"
+        data-testid={"test-testid"}
+      >
+        {text}
+      </Title>
+    );
+
+    expect(rendered.getAllByTestId("test-testid").length).toEqual(1);
+  });
 });

src/components/Typography/Title/Title.tsx

@@ -14,12 +14,13 @@ export interface TitleProps {
 }
 
 /** The `title` component allows you to easily add headings to your pages. They do not include built in margins. */
-export const Title = ({ size, family, type, color, children }: TitleProps) => (
+export const Title = ({ size, family, type, color, children, ...props }: TitleProps) => (
   <CuiTitle
     $color={color}
     $size={size}
     $family={family}
     as={type}
+    {...props}
   >
     {children}
   </CuiTitle>