From 46ca3ff9e1503c7ea593f79c31571b26a28cc03f Mon Sep 17 00:00:00 2001
From: Sergio de Cristofaro <sdecri@gmail.com>
Date: Wed, 27 Sep 2023 12:14:04 +0200
Subject: [PATCH] pass properties to typography

---
 src/components/Typography/Text/Text.test.tsx   |  7 +++++++
 src/components/Typography/Text/Text.tsx        |  3 ++-
 src/components/Typography/Title/Title.test.tsx | 14 ++++++++++++++
 src/components/Typography/Title/Title.tsx      |  3 ++-
 4 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/src/components/Typography/Text/Text.test.tsx b/src/components/Typography/Text/Text.test.tsx
index ee1aac05..abb9dcf6 100644
--- a/src/components/Typography/Text/Text.test.tsx
+++ b/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);
+  });
 });
diff --git a/src/components/Typography/Text/Text.tsx b/src/components/Typography/Text/Text.tsx
index 6a409e61..edca2a90 100644
--- a/src/components/Typography/Text/Text.tsx
+++ b/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>
diff --git a/src/components/Typography/Title/Title.test.tsx b/src/components/Typography/Title/Title.test.tsx
index 9e16fc8f..6eaf4b53 100644
--- a/src/components/Typography/Title/Title.test.tsx
+++ b/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);
+  });
 });
diff --git a/src/components/Typography/Title/Title.tsx b/src/components/Typography/Title/Title.tsx
index ba0d1919..4c5a087f 100644
--- a/src/components/Typography/Title/Title.tsx
+++ b/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>