feat(Label): add Label component

Author: liorocks

__tests__/Label.test.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { renderToStaticMarkup } from 'react-dom/server';
+import { Label } from '../src/index';
+
+describe('<Label />', () => {
+  it('renders basic <Label />', () => {
+    expect(renderToStaticMarkup(<Label />)).toEqual(
+      '<label class="pt-label"></label>'
+    );
+  });
+
+  it('renders basic <Label /> with props', () => {
+    expect(renderToStaticMarkup(<Label text="Label A" inline />)).toEqual(
+      '<label class="pt-label pt-inline">Label A</label>'
+    );
+  });
+
+  it('renders disabled <Label /> with muted', () => {
+    expect(
+      renderToStaticMarkup(<Label text="Label A" disabled muted="(required)" />)
+    ).toEqual(
+      '<label class="pt-label pt-disabled">Label A<span class="pt-text-muted">(required)</span></label>'
+    );
+  });
+
+  it('renders <Label /> with basic input', () => {
+    expect(
+      renderToStaticMarkup(
+        <Label text="Label A">
+          <input disabled className="pt-input" />
+        </Label>
+      )
+    ).toEqual(
+      '<label class="pt-label">Label A<input disabled="" class="pt-input"/></label>'
+    );
+  });
+});

src/components/Label/Label.js

@@ -0,0 +1,78 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const Label = ({
+  children,
+  className,
+  disabled,
+  inline,
+  text,
+  muted,
+  ...rest
+}) => {
+  return (
+    <label
+      className={classnames(
+        'pt-label',
+        { 'pt-disabled': disabled },
+        { 'pt-inline': inline },
+        className
+      )}
+      {...rest}
+    >
+      {text}
+      {muted && <span className="pt-text-muted">{muted}</span>}
+      {children}
+    </label>
+  );
+};
+
+/**
+ * Label property types.
+ */
+Label.propTypes = {
+  /**
+   * Primary content.
+   */
+  children: PropTypes.node,
+
+  /**
+   * Additional CSS classes.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Adds appereance of `disabled` style.
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Align label and children elements on same line.
+   */
+  inline: PropTypes.bool,
+
+  /**
+   * Text to be displayed in label.
+   */
+  text: PropTypes.string,
+
+  /**
+   * Adds extra information to label.
+   */
+  muted: PropTypes.string,
+};
+
+/**
+ * Label default properties.
+ */
+Label.defaultProps = {
+  children: null,
+  className: '',
+  disabled: false,
+  inline: false,
+  text: '',
+  muted: '',
+};
+
+export default Label;

src/components/Label/Label.md

@@ -0,0 +1,73 @@
+Labels enhance the usability of your forms.
+
+```js static
+import { Label } from 'blueprint-components';
+```
+
+Additionally:
+
+```js static
+import { InputGroup, Button, Classes } from '@blueprintjs/core';
+```
+
+Simple labels are useful for basic forms for a single `<input />`.
+
+```jsx
+<div className="">
+  <Label text="Label A">
+    <input className="pt-input" placeholder="Text input" />
+  </Label>
+  <Label text="Label A" muted="(optional)">
+    <input className="pt-input" placeholder="Text input" />
+  </Label>
+</div>
+```
+
+### Inline Label
+To place `label` text and children elements on same line, add optioanl `inline` prop:
+
+```html static
+<Label inline>
+  ...
+</Label>
+```
+
+```jsx
+<Label text="Date of Birth" inline>
+  <InputGroup 
+    leftIconName="calendar" 
+    placeholder="Select date..."
+  />
+</Label>
+```
+
+### Disabled Label
+
+To make `label` appear as disabled, add optional `disabled` prop:
+
+> Note: This prop will not add `disabled` as attribute to it's children elements. You have to add it manualy on form elments (`input`, `select`) and `.pt-disabled` CSS class to input groups.
+
+```html static
+<Label disabled>
+  ...
+</Label>
+```
+
+```jsx
+<Label text="Date of Birth" disabled muted=" (disabled only label)">
+  <InputGroup 
+    leftIconName="calendar" 
+    placeholder="Select date..."
+  />
+</Label>
+```
+
+```jsx
+<Label text="Date of Birth" disabled muted=" (with disabled input)">
+  <InputGroup 
+    disabled
+    leftIconName="calendar" 
+    placeholder="Select date..."
+  />
+</Label>
+```

src/components/Label/index.js

@@ -0,0 +1 @@
+export { default as Label } from './Label';

src/index.js

@@ -2,6 +2,7 @@ export { ButtonGroup } from './components/ButtonGroup';
 export { Callout } from './components/Callout';
 export { Card } from './components/Card';
 export { ControlGroup } from './components/ControlGroup';
+export { Label } from './components/Label';
 export { Navbar } from './components/Navbar';
 export { NavbarDivider } from './components/NavbarDivider';
 export { NavbarGroup } from './components/NavbarGroup';

styleguide/styleguide.setup.js

@@ -10,6 +10,7 @@ import {
   Callout,
   Card,
   ControlGroup,
+  Label,
   Navbar,
   NavbarGroup,
   NavbarHeading,
@@ -19,6 +20,7 @@ global.ButtonGroup = ButtonGroup;
 global.Callout = Callout;
 global.Card = Card;
 global.ControlGroup = ControlGroup;
+global.Label = Label;
 global.Navbar = Navbar;
 global.NavbarGroup = NavbarGroup;
 global.NavbarHeading = NavbarHeading;