Add ErrorLabel component (#445)

* Add ErrorLabel component

* Version bump: 4.1.0

Co-authored-by: Versionator <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@launchpadlab/lp-components",
-  "version": "4.0.0",
+  "version": "4.1.0",
   "engines": {
     "node": "^8.0.0 || ^10.13.0 || ^12.0.0"
   },

src/forms/labels/error-label.js

@@ -0,0 +1,51 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import classnames from 'classnames'
+
+/**
+ *
+ * A label for displaying error message.
+ *
+ * @name ErrorLabel
+ * @type Function
+ * @param {String} children - A message to display
+ *
+ * @example
+ *
+ * function MyView () {
+ *   const [errorMessage, setErrorMessage] = useState()
+ *   return (
+ *      <div>
+ *       <button onClick={ () => doSomething().catch(setErrorMessage) }>
+ *          Do something
+ *       </button>
+ *      {
+ *        errorMessage && <ErrorLabel>{ errorMessage }</ErrorLabel>
+ *      }
+ *     </div>
+ *   )
+ * }
+ *
+ */
+
+const propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+}
+
+const defaultProps = {
+  className: '',
+}
+
+function ErrorLabel({ children, className, ...rest }) {
+  return (
+    <span className={classnames('error-message', className)} {...rest}>
+      {children}
+    </span>
+  )
+}
+
+ErrorLabel.propTypes = propTypes
+ErrorLabel.defaultProps = defaultProps
+
+export default ErrorLabel

src/forms/labels/index.js

@@ -1,3 +1,4 @@
+export ErrorLabel from './error-label'
 export InputError from './input-error'
 export InputLabel from './input-label'
 export LabeledField from './labeled-field'

src/forms/labels/input-error.js

@@ -7,6 +7,8 @@ import { hasInputError } from '../helpers'
 /**
  *
  * A dynamic error label associated with an input component.
+ * 
+ * NOTE: direct use of this component is deprecated as of v4.1.0 due to its dependency on redux-form. Please use {@link ErrorLabel} instead.
  *
  * This component is used within {@link LabeledField}, and therefore is incorporated into most `lp-components` input components by default.
  *

stories/forms/labels/error-label.story.js

@@ -0,0 +1,7 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { ErrorLabel } from 'src'
+
+storiesOf('ErrorLabel', module).add('with a single error', () => (
+  <ErrorLabel>An error occurred</ErrorLabel>
+))

test/forms/labels/error-label.test.js

@@ -0,0 +1,15 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import { ErrorLabel } from '../../../src'
+
+test('passes class to span element correctly', () => {
+  const wrapper = shallow(<ErrorLabel className="small">Error!</ErrorLabel>)
+  expect(wrapper.hasClass('error-message')).toBe(true)
+  expect(wrapper.hasClass('small')).toBe(true)
+})
+
+test('passes extra props to span element', () => {
+  const onClick = () => 'More info'
+  const wrapper = shallow(<ErrorLabel onClick={onClick}>Error!</ErrorLabel>)
+  expect(wrapper.props().onClick).toBe(onClick)
+})