feat(Label): added a generic form field label

Author: liamross

src/components/Label/Label.stories.tsx

@@ -0,0 +1,33 @@
+import { boolean, text } from '@storybook/addon-knobs';
+import React from 'react';
+import { Input } from '../Input';
+import { Label } from '../Label';
+import readme from './README.md';
+
+export default { title: 'Components/Label', component: Label, parameters: { readme } };
+
+export const Basic = () => (
+  <Label label={text('label', 'Labeled input field')}>
+    <Input />
+  </Label>
+);
+
+export const WithCustomId = () => (
+  <Label label={text('label', 'Labeled input field')}>
+    <Input id="custom_input_id" />
+  </Label>
+);
+
+export const WithDisabledFormElement = () => (
+  <Label label={text('label', 'Labeled input field')}>
+    <Input id="custom_input_id" disabled={boolean('disabled', false)} />
+  </Label>
+);
+
+export const Detached = () => (
+  <>
+    <Label htmlFor="custom_input_id" label={text('label', 'Labeled input field')} />
+    <p>Some other stuff</p>
+    <Input id="custom_input_id" disabled={boolean('disabled', false)} />
+  </>
+);

src/components/Label/Label.test.tsx

@@ -0,0 +1,15 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Label } from '../Label';
+
+describe('Label component', () => {
+  it('renders its contents', () => {
+    const label = shallow(<Label label="" />);
+    expect(label.find('.ui__label')).toHaveLength(1);
+  });
+
+  it('snapshot renders default label', () => {
+    const label = shallow(<Label label="" />);
+    expect(label).toMatchSnapshot();
+  });
+});

src/components/Label/Label.tsx

@@ -0,0 +1,40 @@
+import classnames from 'classnames';
+import React, { cloneElement, FC, LabelHTMLAttributes, ReactElement, ReactNode, useMemo } from 'react';
+import { getStringId } from '../../utils';
+
+export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
+  /**
+   * The label to apply to any form element.
+   */
+  label: ReactNode;
+  /**
+   * Pass a child element which can accept an `id` prop. If you don't specify
+   * the `id` prop, one will be generated to link the label to the element. If
+   * you wish to link this label to a form field without passing children, you
+   * should specify the `htmlFor` prop with the `id` of your form field.
+   */
+  children?: ReactElement;
+}
+
+export const Label: FC<LabelProps> = ({ label, children, className, htmlFor, ...props }) => {
+  const childrenId = children?.props.id;
+  const id = useMemo(() => {
+    if (childrenId) return childrenId;
+    return getStringId('label');
+  }, [childrenId]);
+
+  const labelClass = classnames(
+    'ui__base ui__label',
+    { 'ui__label--disabled': children?.props.disabled, 'ui__label--attached': children },
+    className,
+  );
+
+  return (
+    <>
+      <label {...props} className={labelClass} htmlFor={htmlFor ?? id}>
+        {label}
+      </label>
+      {children ? cloneElement(children, { id }) : undefined}
+    </>
+  );
+};

src/components/Label/README.md

@@ -0,0 +1,12 @@
+A generic label for labelling form fields. If the child form field has an `id`
+specified, that will be automatically parsed and used in the label's `htmlFor`
+attribute to link the two. If no `id` is specified for the child, one will be
+automatically generated.
+
+You can also link the label to a form field without passing it as a child by
+giving the field an `id` and passing the same `id` to the `htmlFor` prop for the
+input. This is useful if the two elements do not sit near each other on the
+page.
+
+If the child element is disabled, the label will automatically change appearance
+to a disabled state. This will not happen if the form field is not the child.

src/components/Label/_Label.scss

@@ -0,0 +1,12 @@
+.ui__label {
+  &--attached::after {
+    height: 2px;
+    width: 1px;
+    content: '';
+    display: block;
+  }
+
+  &--disabled {
+    opacity: 0.7;
+  }
+}

src/components/Label/__snapshots__/Label.test.tsx.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Label component snapshot renders default label 1`] = `
+<Fragment>
+  <label
+    className="ui__base ui__label"
+    htmlFor="label_1"
+  />
+</Fragment>
+`;

src/components/Label/index.ts

@@ -0,0 +1 @@
+export * from './Label';

src/components/index.ts

@@ -17,6 +17,7 @@ export * from './Icon';
 export * from './IconButton';
 export * from './Image';
 export * from './Input';
+export * from './Label';
 export * from './Modal';
 export * from './Overlay';
 export * from './Spinner';

src/index.scss

@@ -34,6 +34,7 @@
 @import './components/IconButton/IconButton';
 @import './components/Image/Image';
 @import './components/Input/Input';
+@import './components/Label/Label';
 @import './components/Modal/Modal';
 @import './components/Overlay/Overlay';
 @import './components/Spinner/Spinner';