Update to material-components-web v0.22.0

Breaking changes:
* DOM change to add a bottom line element
* multi-line text field is now called textarea

Author: wingrunr21

README.md

@@ -17,7 +17,7 @@ npm i --save react-mdc-web
 ### Default theme
 * Include CSS with default theme into HTML page
   ```html
-  <link rel="stylesheet" href="https://unpkg.com/material-components-web@0.19.0/dist/material-components-web.min.css"> 
+  <link rel="stylesheet" href="https://unpkg.com/material-components-web@0.22.0/dist/material-components-web.min.css"> 
   ```
 * Or import it into JS/JSX file
   ```javascript

src/Textfield/BottomLine.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+
+const propTypes = {
+  active: PropTypes.bool,
+};
+
+const ROOT = 'mdc-textfield__bottom-line';
+const ACTIVE = `${ROOT}--active`;
+
+const BottomLine = ({ active }) => (
+  <div
+    className={classnames(ROOT, {
+      [ACTIVE]: active,
+    })}
+  />
+);
+BottomLine.propTypes = propTypes;
+export default BottomLine;

src/Textfield/Textfield.js

@@ -1,14 +1,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import classnames from 'classnames';
 import Label from './Label';
 import Input from './Input';
 import Field from './Field';
 import Helptext from './Helptext';
-
-const ROOT = 'mdc-textfield';
-const BOTTOMLINE = `${ROOT}__bottom-line`;
-const BOTTOMLINEFOCUSED = `${BOTTOMLINE}--active`;
+import BottomLine from './BottomLine';
 
 class Textfield extends React.PureComponent {
 
@@ -86,10 +82,7 @@ class Textfield extends React.PureComponent {
         >
           {floatingLabel}
         </Label>
-        <div
-          className={classnames(BOTTOMLINE, {
-            [BOTTOMLINEFOCUSED]: focus })}
-        />
+        <BottomLine active={focus} />
       </Field>
     );
   }