feat(Text): Allow arbitrary props

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(<TextE data-arbitrary="value">Content</TextE>)
+  expect(container.firstChild).toHaveAttribute('data-arbitrary', 'value')
+})
+
+it('sets the id attribute', () => {
+  const { container } = render(<TextE id="value">Content</TextE>)
+  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'))

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,14 +60,14 @@ export const TextE = ({
   return (
     <StyledTextComponent
       as={element}
-      className={className}
       $align={align}
       $backgroundColor={backgroundColor}
       $lineHeight={lineHeight}
       $noWrap={!wordWrap}
       $size={fontSize}
       $textColor={textColor}
       style={extraStyles}
+      {...rest}
     >
       {children}
     </StyledTextComponent>