fix(paragraph): allow global HTML attributes to be passed to p element

Author: SiTaggart

.changeset/warm-hats-serve.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/paragraph': patch
+'@twilio-paste/core': patch
+---
+
+[Paragraph] allow for global HTML attriutes to be passed to the paragraph element

packages/paste-core/components/paragraph/__tests__/paragraph.test.tsx

@@ -1,20 +1,31 @@
 import * as React from 'react';
-import {render as testRender} from '@testing-library/react';
+import {render, screen} from '@testing-library/react';
 // @ts-ignore typescript doesn't like js imports
 import axe from '../../../../../.jest/axe-helper';
 import {Paragraph} from '../src';
 
 describe('General', () => {
   it('should render', (): void => {
     const textContent = `This is a paragraph`;
-    const {getByText} = testRender(<Paragraph>{textContent}</Paragraph>);
+    const {getByText} = render(<Paragraph>{textContent}</Paragraph>);
     expect(getByText(textContent)).toBeDefined();
+    expect(getByText(textContent).tagName).toEqual('P');
+  });
+  it('should allow for global html Attributes', (): void => {
+    const textContent = `This is a paragraph`;
+    render(
+      <Paragraph aria-label="foo" data-testid="bar">
+        {textContent}
+      </Paragraph>
+    );
+    expect(screen.getByTestId('bar')).toBeDefined();
+    expect(screen.getByLabelText('foo')).toBeDefined();
   });
 });
 
 describe('Accessibility', () => {
   it('Should have no accessibility violations', async () => {
-    const {container} = testRender(<Paragraph>Hello world!</Paragraph>);
+    const {container} = render(<Paragraph>Hello world!</Paragraph>);
     const results = await axe(container);
     expect(results).toHaveNoViolations();
   });

packages/paste-core/components/paragraph/src/index.tsx

@@ -1,15 +1,16 @@
 import * as React from 'react';
-import {Text} from '@twilio-paste/text';
+import {Text, safelySpreadTextProps} from '@twilio-paste/text';
 
 export interface ParagraphProps extends React.HTMLAttributes<HTMLParagraphElement> {
   id?: never;
   className?: never;
   marginBottom?: 'space0';
 }
 
-const Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(({children, marginBottom}, ref) => {
+const Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(({children, marginBottom, ...props}, ref) => {
   return (
     <Text
+      {...safelySpreadTextProps(props)}
       as="p"
       marginBottom={marginBottom || 'space70'}
       fontSize="fontSize30"