Add ExpandingTextarea component

src/components/ExpandingTextarea/ExpandingTextarea.example.js

@@ -0,0 +1,16 @@
+import ExpandingTextarea from './ExpandingTextarea';
+
+const loremIpsum = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus egestas hendrerit tempor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Integer suscipit vitae risus et feugiat. Sed dapibus molestie auctor. Fusce faucibus nulla ac eros lacinia consequat. Quisque sodales blandit dolor vel consequat. In purus dui, mollis quis malesuada ut, convallis dapibus arcu. Nam pulvinar, ipsum et accumsan accumsan, urna lectus eleifend nisl, eu finibus mauris dolor quis lectus. Mauris sit amet sem sollicitudin, hendrerit turpis ut, sollicitudin quam. Morbi risus augue, iaculis non malesuada vitae, dignissim ac mauris. Nam urna justo, mollis vel mi vel, consectetur pellentesque lorem.\n\nProin egestas nunc lectus, nec luctus arcu placerat quis. Quisque ac arcu eu urna fringilla consequat a nec elit. Morbi sit amet tempus velit. Pellentesque ac magna tempus nunc consectetur iaculis in eget mi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque imperdiet eros in diam rhoncus, vitae blandit turpis egestas. Duis venenatis finibus orci, eget molestie elit. Donec sollicitudin rhoncus neque in viverra. Phasellus mauris velit, aliquet sed dapibus sed, ultricies ut augue. Donec dapibus scelerisque erat ac rhoncus. Duis facilisis risus sit amet erat consectetur gravida.';
+
+export const Empty = {
+  component: ExpandingTextarea,
+  group: 'custom inputs',
+};
+
+export const WithInitialText = {
+  component: ExpandingTextarea,
+  props: {
+    defaultValue: loremIpsum,
+  },
+  group: 'custom inputs',
+};

src/components/ExpandingTextarea/ExpandingTextarea.js

@@ -0,0 +1,10 @@
+/* eslint-disable react/prefer-stateless-function, no-console */
+import React, { Component } from 'react';
+
+class ExpandingTextarea extends Component {
+  render() {
+    return <textarea {...this.props} />;
+  }
+}
+
+export default ExpandingTextarea;

src/components/TextInputField/TextInputField.js

@@ -1,7 +1,7 @@
 import React, { Component, PropTypes } from 'react';
 import { Field } from 'redux-form';
 import classNames from 'classnames';
-import { ValidationError } from '../../components';
+import { ValidationError, ExpandingTextarea } from '../../components';
 
 import css from './TextInputField.css';
 
@@ -49,7 +49,7 @@ class TextInputFieldComponent extends Component {
     return (
       <div className={classes}>
         {label ? <label htmlFor={id}>{label}</label> : null}
-        {isTextarea ? <textarea {...inputProps} /> : <input {...inputProps} />}
+        {isTextarea ? <ExpandingTextarea {...inputProps} /> : <input {...inputProps} />}
         <ValidationError fieldMeta={meta} />
       </div>
     );

src/components/index.js

@@ -14,6 +14,7 @@ import EditListingPhotosPanel from './EditListingPhotosPanel/EditListingPhotosPa
 import EditListingPricingPanel from './EditListingPricingPanel/EditListingPricingPanel';
 import EditListingWizard from './EditListingWizard/EditListingWizard';
 import ExternalLink from './ExternalLink/ExternalLink';
+import ExpandingTextarea from './ExpandingTextarea/ExpandingTextarea';
 import FilterPanel from './FilterPanel/FilterPanel';
 import HeroSection from './HeroSection/HeroSection';
 import ListingCard from './ListingCard/ListingCard';
@@ -58,8 +59,8 @@ import ValidationError from './ValidationError/ValidationError';
 export {
   AddImages,
   Avatar,
-  AvatarMedium,
   AvatarLarge,
+  AvatarMedium,
   BirthdayInputField,
   BookingBreakdown,
   Button,
@@ -73,6 +74,7 @@ export {
   EditListingPhotosPanel,
   EditListingPricingPanel,
   EditListingWizard,
+  ExpandingTextarea,
   ExternalLink,
   FilterPanel,
   HeroSection,

src/examples.js

@@ -7,6 +7,7 @@ import * as CurrencyInputField from './components/CurrencyInputField/CurrencyInp
 import * as DateInputField from './components/DateInputField/DateInputField.example';
 import * as DateRangeInputField from './components/DateRangeInputField/DateRangeInputField.example';
 import * as EditListingWizard from './components/EditListingWizard/EditListingWizard.example';
+import * as ExpandingTextarea from './components/ExpandingTextarea/ExpandingTextarea.example';
 import * as ListingCard from './components/ListingCard/ListingCard.example';
 import * as Map from './components/Map/Map.example';
 import * as Menu from './components/Menu/Menu.example';
@@ -50,8 +51,8 @@ import * as Typography from './containers/StyleguidePage/Typography.example';
 export {
   AddImages,
   BirthdayInputField,
-  BookingDatesForm,
   BookingBreakdown,
+  BookingDatesForm,
   Button,
   ChangeAccountPasswordForm,
   ChangePasswordForm,
@@ -64,6 +65,7 @@ export {
   EditListingPhotosForm,
   EditListingPricingForm,
   EditListingWizard,
+  ExpandingTextarea,
   ListingCard,
   LocationAutocompleteInput,
   LoginForm,