fix(error-message): support data-attributes (#424)

Author: montezume

src/components/messages/error-message/error-message.js

@@ -1,9 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Text from '../../typography/text';
+import filterDataAttributes from '../../../utils/filter-data-attributes';
 
 const ErrorMessage = props => (
-  <Text.Detail tone="negative">{props.children}</Text.Detail>
+  <Text.Detail tone="negative" {...filterDataAttributes(props)}>
+    {props.children}
+  </Text.Detail>
 );
 ErrorMessage.displayName = 'ErrorMessage';
 ErrorMessage.propTypes = {

src/components/messages/error-message/error-message.spec.js

@@ -2,8 +2,19 @@ import React from 'react';
 import { render } from '../../../test-utils';
 import ErrorMessage from './error-message';
 
-it('should render children', () => {
-  const { container } = render(<ErrorMessage>Some error message</ErrorMessage>);
+describe('ErrorMessage', () => {
+  it('should render children', () => {
+    const { container } = render(
+      <ErrorMessage>Some error message</ErrorMessage>
+    );
 
-  expect(container).toHaveTextContent('Some error message');
+    expect(container).toHaveTextContent('Some error message');
+  });
+
+  it('should forward data-attributes', () => {
+    const { container } = render(
+      <ErrorMessage data-foo="bar">Some error message</ErrorMessage>
+    );
+    expect(container.querySelector('[data-foo="bar"]')).toBeInTheDocument();
+  });
 });