feat: Add ErrorMessage text component (#1310)

feat: Add ErrorMessage text component

react/Text/Readme.md

@@ -53,3 +53,11 @@ import { Caption } from 'cozy-ui/transpiled/react/Text';
 
 <Caption>This a caption text</Caption>
 ```
+
+#### ErrorMessage text
+
+```
+import { ErrorMessage } from 'cozy-ui/transpiled/react/Text';
+
+<ErrorMessage>This an error message text</ErrorMessage>
+```

react/Text/index.jsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import cx from 'classnames'
 import PropTypes from 'prop-types'
+import styles from './styles.styl'
 
 export const BaseText = props => {
   const { className, children, tag, ellipsis, ...restProps } = props
@@ -42,6 +43,10 @@ export const Caption = ({ className, ...restProps }) => (
   <BaseText className={cx('u-caption', className)} {...restProps} />
 )
 
+export const ErrorMessage = ({ className, ...restProps }) => (
+  <BaseText className={cx(styles.ErrorMessage, className)} {...restProps} />
+)
+
 // Props
 const commonProps = {
   children: PropTypes.node,
@@ -71,6 +76,9 @@ Caption.propTypes = {
 Uppercase.propTypes = {
   ...commonProps
 }
+ErrorMessage.propTypes = {
+  ...commonProps
+}
 
 // Default Props
 const commonDefaultProps = {
@@ -101,4 +109,8 @@ Uppercase.defaultProps = {
   ...commonDefaultProps
 }
 
+ErrorMessage.defaultProps = {
+  ...commonDefaultProps
+}
+
 export default Text

react/Text/styles.styl

@@ -0,0 +1,2 @@
+.ErrorMessage
+    color var(--pomegranate)

react/__snapshots__/examples.spec.jsx.snap

@@ -5870,6 +5870,12 @@ exports[`Text should render examples: Text 7`] = `
 </div>"
 `;
 
+exports[`Text should render examples: Text 8`] = `
+"<div>
+  <div class=\\"styles__ErrorMessage___PWDaA\\">This an error message text</div>
+</div>"
+`;
+
 exports[`Textarea should render examples: Textarea 1`] = `"<div><textarea placeholder=\\"Once upon a time…\\" class=\\"styles__c-textarea___D7EEH\\"></textarea></div>"`;
 
 exports[`Textarea should render examples: Textarea 2`] = `"<div><textarea placeholder=\\"Once upon a time, there was an error…\\" class=\\"styles__c-textarea___D7EEH styles__is-error___1kGLj\\"></textarea></div>"`;