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});
+
+ 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) => (
{children}
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(
+
+ {text}
+
+ );
+
+ 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) => (
{children}