diff --git a/packages/react-component-library/src/components/Text/Text.test.tsx b/packages/react-component-library/src/components/Text/Text.test.tsx index d7fdc5027..f13feb276 100644 --- a/packages/react-component-library/src/components/Text/Text.test.tsx +++ b/packages/react-component-library/src/components/Text/Text.test.tsx @@ -15,6 +15,16 @@ it('sets the line height', () => { expect(container.firstChild).toHaveStyleRule('line-height', '24px') }) +it('sets the arbitrary attribute', () => { + const { container } = render(Content) + expect(container.firstChild).toHaveAttribute('data-arbitrary', 'value') +}) + +it('sets the id attribute', () => { + const { container } = render(Content) + expect(container.firstChild).toHaveAttribute('id', 'value') +}) + it('sets the size for default body text', () => { const result = getTextStyles('p', 'body') expect(result.fontSize).toEqual(fontSize('m')) diff --git a/packages/react-component-library/src/components/Text/Text.tsx b/packages/react-component-library/src/components/Text/Text.tsx index 60b59a0c6..29b989807 100644 --- a/packages/react-component-library/src/components/Text/Text.tsx +++ b/packages/react-component-library/src/components/Text/Text.tsx @@ -19,11 +19,14 @@ export interface TextEProps extends ComponentWithClass { * The type of element to use for the root node, `'p'` by default. */ el?: TextElement + /** + * Optional id attribute for the root node + */ + id?: string /* The display variant to use, 'body' by default */ variant?: TextVariant - /** * Optional CSS color value for the text color */ @@ -44,9 +47,9 @@ export const TextE = ({ el = 'p', color, backgroundColor = 'none', - className, variant, wordWrap = true, + ...rest }: TextEProps) => { const { fontSize, lineHeight, defaultColor, element, display } = getTextStyles(el, variant) @@ -57,7 +60,6 @@ export const TextE = ({ return ( {children}