[#691] First pass at adding a generic <Label> component (#708)

* [#691] First pass at adding a generic <Label> component

* [#691] Change from unused labelFor to htmlFor property in Label component storybook entry.

Author: eojthebrave

packages/components/src/Components/FormElements/FormElements.stories.js

@@ -0,0 +1,19 @@
+import React from 'react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { storiesOf } from '@storybook/react';
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { boolean, object, text } from '@storybook/addon-knobs/react';
+
+import Label from './Label';
+
+storiesOf('FormElements/Label', module).addWithJSX('Default', () => (
+  <Label
+    fieldName="ControlOne"
+    htmlFor={text('Label: htmlFor', 'test-label-for')}
+    error={boolean('Label: error', false)}
+    required={boolean('Label: required', false)}
+    htmlAttributes={object('Label: htmlAttributes', { 'data-test': 'test' })}
+  >
+    {text('Label: label', 'Field label')}
+  </Label>
+));

packages/components/src/Components/FormElements/Label.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { css } from 'emotion';
+
+import colors from '../../Utils/colors';
+
+const styles = {
+  label: css`
+    color: ${colors.text};
+  `,
+  labelRequired: css`
+    :after {
+      content: ' *';
+      color: ${colors.maximumRed};
+    }
+  `,
+  labelWithError: css`
+    color: ${colors.maximumRed};
+  `,
+};
+
+/**
+ * Renders an HTML <label> element.
+ *
+ * Example:
+ *
+ * @code
+ * <Label htmlFor="title" required={true}>Article title</Label>
+ * @endcode
+ */
+const Label = ({ children, htmlFor, error, required, htmlAttributes }) => {
+  const classes = [styles.label];
+  if (required) {
+    classes.push(styles.labelRequired);
+  }
+  if (error) {
+    classes.push(styles.labelWithError);
+  }
+
+  return (
+    <label
+      htmlFor={htmlFor}
+      className={css`
+        ${classes}
+      `}
+      {...htmlAttributes}
+    >
+      {children}
+    </label>
+  );
+};
+
+Label.propTypes = {
+  /** Content contained within the label element. */
+  children: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.node),
+    PropTypes.node,
+  ]).isRequired,
+
+  /** true if the label relates to an element with an error. */
+  error: PropTypes.bool,
+
+  /** Any additional HTML properties to add to the label element. */
+  htmlAttributes: PropTypes.objectOf([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.bool,
+  ]),
+
+  /** Content of the html "for" attribute to use for this label. */
+  htmlFor: PropTypes.string.isRequired,
+
+  /** True if this label relates to an element that is required. */
+  required: PropTypes.bool,
+};
+
+Label.defaultProps = {
+  error: false,
+  htmlAttributes: {},
+  required: false,
+};
+
+export default Label;

packages/components/src/index.js

@@ -1,3 +1,4 @@
 export { default as AdminUIButton } from './Components/Button/Button';
 export { default as colors } from './Utils/colors';
+export { default as Label } from './Components/FormElements/Label';
 export { default as typography } from './Utils/typography';