add TextfieldMultiline examples

examples/js/components/app.js

@@ -38,6 +38,7 @@ class App extends React.Component {
       {text: 'Switch', link: '/switch'},
       {text: 'Tabs', link: '/tabs'},
       {text: 'Textfield', link: '/textfield'},
+      {text: 'Textfield Multiline', link: '/textfieldmultiline'},
       {text: 'Tooltip', link: '/tooltip'}
     ]
 

examples/js/components/textfieldMultilineRoute.js

@@ -0,0 +1,113 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Playground from 'component-playground'
+import {TextfieldMultiline, Icon} from '../../../'
+
+const textareaComponent =
+`<textarea
+/>`
+
+const textfieldMultiline =
+`class App extends React.Component {
+
+  state = {
+    multiline: ''
+  }
+
+  onChange = (event) => {
+    this.setState({
+      [event.target.name]: event.target.value
+    })
+  }
+
+  render() {
+    return (
+      <TextfieldMultiline
+        label='Enter multiline text'
+        name='multiline'
+        value={this.state.multiline}
+        onChange={this.onChange}
+        spellCheck={false}
+        length={100}
+      />
+    )
+  }
+
+}
+
+ReactDOM.render(<App />, mountNode)`
+
+const textfieldMultilineWithPlaceholderAndIconComponent =
+`class App extends React.Component {
+
+  state = {
+    story: ''
+  }
+
+  onChange = (event) => {
+    this.setState({
+      [event.target.name]: event.target.value
+    })
+  }
+
+  render() {
+    const story = this.state.story
+    return (
+      <TextfieldMultiline 
+        name='story'
+        label='Your Story'
+        placeholder='Once upon a time...'
+        value={this.state.story}
+        onChange={this.onChange}
+        error={story.length > 0 && story.length < 30 ? 'Please enter at least 30 characters' : null}
+        icon={<Icon.Panorama />} />
+    )
+  }
+
+}
+
+ReactDOM.render(<App />, mountNode)`
+
+export default class TextfieldRoute extends React.Component {
+
+  render () {
+    return (
+      <div>
+        <section>
+          <h2>TextfieldMultiline with Label</h2>
+          <Playground
+            docClass={TextfieldMultiline}
+            codeText={textfieldMultiline}
+            scope={{React, ReactDOM, TextfieldMultiline}}
+            noRender={false}
+            collapsableCode
+          />
+        </section>
+        <section>
+          <h2>TextfieldMultiline with placeholder, icon and label</h2>
+          <Playground
+            codeText={textfieldMultilineWithPlaceholderAndIconComponent}
+            scope={{React, ReactDOM, TextfieldMultiline, Icon}}
+            noRender={false}
+            collapsableCode
+          />
+        </section>
+        <section>
+          <h2>Default textarea</h2>
+          <Playground
+            codeText={textareaComponent}
+            scope={{React}}
+            collapsableCode
+          />
+        </section>
+        <section>
+          <h2>Specification</h2>
+          <a href='https://material.google.com/components/text-fields.html'>
+            https://material.google.com/components/text-fields.html
+          </a>
+        </section>
+      </div>
+    )
+  }
+
+}

examples/js/components/textfieldRoute.js

@@ -195,6 +195,36 @@ const textfieldNonfloatingLabelComponent =
 
 ReactDOM.render(<App />, mountNode)`
 
+const textfieldWithErrorMessageComponentCharacterCounter =
+`class App extends React.Component {
+
+  state = {
+    name: 'peter'
+  }
+
+  onChange = (event) => {
+    this.setState({
+      [event.target.name]: event.target.value
+    })
+  }
+
+  render() {
+    return (
+      <Textfield
+        label='Name'
+        name='name'
+        value={this.state.name}
+        onChange={this.onChange}
+        error={!this.state.name.match(/^[A-Z]/) && 'The name must start with capital letter.'}
+        length={10}
+      />
+    )
+  }
+
+}
+
+ReactDOM.render(<App />, mountNode)`
+
 export default class TextfieldRoute extends React.Component {
 
   render () {
@@ -246,6 +276,15 @@ export default class TextfieldRoute extends React.Component {
             collapsableCode
           />
         </section>
+        <section>
+          <h2>Textfield with error message and using character counter</h2>
+          <Playground
+            codeText={textfieldWithErrorMessageComponentCharacterCounter}
+            scope={{React, ReactDOM, Textfield}}
+            noRender={false}
+            collapsableCode
+          />
+        </section>
         <section>
           <h2>Read only textfield</h2>
           <Playground

examples/js/script.js

@@ -21,6 +21,7 @@ import SparklineRoute from './components/sparklineRoute'
 import SwitchRoute from './components/switchRoute'
 import TabsRoute from './components/tabsRoute'
 import TextfieldRoute from './components/textfieldRoute'
+import TextfieldMultilineRoute from './components/textfieldMultilineRoute'
 import TooltipRoute from './components/tooltipRoute'
 
 // required for tabs component demo
@@ -79,6 +80,7 @@ ReactDOM.render((
         <Route path='sweden' component={Sweden} />
       </Route>
       <Route path='textfield' component={TextfieldRoute} />
+      <Route path='textfieldmultiline' component={TextfieldMultilineRoute} />
       <Route path='tooltip' component={TooltipRoute} />
     </Route>
   </Router>