docs: readme updates (material-components#29)

Author: Matt Goo

packages/button/README.md

@@ -1,13 +1,30 @@
-# React Material Icon
+# React Button
 
-MDC React Material Icon is a component for material icons.
+MDC React Button is a component for MDC buttons. Please see [MDC Button](https://github.com/material-components/material-components-web/tree/master/packages/mdc-button).
 
 ## Installation
 
 ```
 npm install @material/react-button
 ```
 
+## Usage
+
+```js
+import React from 'react';
+import Button from '@material/react-button';
+
+class MyApp extends React.Component {
+  render() {
+    return (
+      <Button>
+        Click Me!
+      </Button>
+    );
+  }
+}
+```
+
 ## Props
 
 Prop Name | Type | Description
@@ -19,3 +36,10 @@ stroked | n/a | Enables stroked variant.
 icon | Element | Icon to render within root element.
 children | String | Text to be displayed within root element.
 disabled | n/a | Disables button if true.
+
+## Sass Mixins
+
+Sass mixins may be available to customize various aspects of the Components. Please refer to the
+MDC Web repository for more information on what mixins are available, and how to use them.
+
+[Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/v0.35.0/packages/mdc-button/README.md#sass-mixins)

packages/button/index.js

@@ -13,7 +13,6 @@ export class Button extends Component {
       icon,
       children,
       initRipple,
-      // dismiss warning for converting to a string (for ripple)
       unbounded, // eslint-disable-line no-unused-vars
       ...otherProps
     } = this.props;

packages/card/README.md

@@ -1,6 +1,6 @@
 # React Card
 
-MDC React Card is a component for material design cards.
+MDC React Card is a component for material design cards. Please see [MDC Cards](https://github.com/material-components/material-components-web/tree/master/packages/mdc-card).
 
 ## Installation
 
@@ -131,3 +131,11 @@ import {CardActionIcons} from '@material/react-card';
   <i onClick={ ... }>Icon 2</i>
 </CardActionIcons>
 ```
+
+
+## Sass Mixins
+
+Sass mixins may be available to customize various aspects of the Components. Please refer to the
+MDC Web repository for more information on what mixins are available, and how to use them.
+
+[Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/v0.35.0/packages/mdc-card/README.md#sass-mixins)

packages/fab/README.md

@@ -12,8 +12,8 @@ npm install @material/react-fab
 
 ### JSX Structure
 
-The Fab can be used with the `span`, `i`, `img` or `svg` elements. It can also be used with the 
-[Material Icon](../material-icon) react component. 
+The Fab can be used with the `span`, `i`, `img` or `svg` elements. It can also be used with the
+[Material Icon](../material-icon) react component.
 ```html
 <Fab>
   <span className="material-icons">favorite</span>
@@ -47,7 +47,7 @@ mini | n/a | Enables the mini variant.
 
 ## Sass Mixins
 
-Sass mixins may be available to customize various aspects of the components. Please refer to the 
+Sass mixins may be available to customize various aspects of the components. Please refer to the
 MDC Web repository for more information on what mixins are available, and how to use them. 
 
-[Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/v0.34.1/packages/mdc-fab/README.md#advanced-sass-mixins)
+[Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/v0.35.0/packages/mdc-fab/README.md#advanced-sass-mixins)

packages/floating-label/README.md

@@ -8,14 +8,6 @@ MDC React Floating Label is as a React container around MDC Floating Label. Plea
 npm install @material/react-floating-label
 ```
 
-## Props
-
-Prop Name | Type | Description
---- | --- | ---
-className | String | Classes to be applied to the root element.
-handleWidthChange | Function | Callback method to pass the width to a parent Component.
-float | Boolean | Floats label depending on value passed.
-
 ## Usage
 
 ### Positioning
@@ -27,6 +19,7 @@ React Floating Label is meant to be used with other Components, specifically inp
 To shake the label you'll need to add a _ref_ to the `<FloatingLabel />` element. Using the ref, you can then call `shake()` to start the shake animation. Ex:
 
 ```js
+import FloatingLabel from '@material/react-floating-label';
 
 class MyComponent extends React.Component {
   constructor(props) {
@@ -62,10 +55,17 @@ Label width is set during mount, and is calculated from the `offsetWidth` proper
 </FloatingLabel>
 ```
 
+## Props
+
+Prop Name | Type | Description
+--- | --- | ---
+className | String | Classes to be applied to the root element.
+handleWidthChange | Function | Callback method to pass the width to a parent Component.
+float | Boolean | Floats label depending on value passed.
 
 ## Sass Mixins
 
 Sass mixins may be available to customize various aspects of the components. Please refer to the
 MDC Web repository for more information on what mixins are available, and how to use them.
 
-[Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/v0.34.1/packages/mdc-fab/README.md#advanced-sass-mixins)
+[Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/v0.35.0/packages/mdc-floating-label/README.md#scss-mixins)

packages/line-ripple/README.md

@@ -1,13 +1,25 @@
 # React Line Ripple
 
-MDC React Line Ripple is a component for material icons.
+MDC React Line Ripple is a component for MDC Line Ripple. Please see [MDC Line Ripple](https://github.com/material-components/material-components-web/tree/master/packages/mdc-line-ripple).
 
 ## Installation
 
 ```
 npm install @material/react-line-ripple
 ```
 
+## Usage
+
+```js
+import LineRipple from '@material/react-line-ripple';
+
+const MyComponent = () => {
+  return (
+    <LineRipple />
+  );
+}
+```
+
 ## Props
 
 Prop Name | Type | Description
@@ -16,3 +28,10 @@ active | boolean | Activates or deactivates the line ripple state.
 className | string | Classes to be applied to the root element.
 rippleCenter | number | Sets the center of the ripple animation.
 style | object | Inline styles of root element.
+
+## Sass Mixins
+
+Sass mixins may be available to customize various aspects of the components. Please refer to the
+MDC Web repository for more information on what mixins are available, and how to use them.
+
+[Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/v0.35.0/packages/mdc-line-ripple/README.md#sass-mixins)

packages/material-icon/README.md

@@ -8,6 +8,18 @@ MDC React Material Icon is a component for material icons.
 npm install @material/react-material-icon
 ```
 
+## Usage
+
+```js
+import MaterialIcon from '@material/react-material-icon';
+
+const MyComponent = () => {
+  return (
+    <MaterialIcon icon='menu' />
+  );
+}
+```
+
 ## Props
 
 Prop Name | Type | Description

packages/notched-outline/README.md

@@ -1,13 +1,25 @@
 # React Notched Outline
 
-MDC React Notched Outline is a React Component which uses MDC [MDC Notched Outline](https://github.com/material-components/material-components-web/tree/master/packages/mdc-notched-outline)'s CSS and foundation JavaScript.
+MDC React Notched Outline is a component for MDC Notched Outline. Please see [MDC Notched Outline](https://github.com/material-components/material-components-web/tree/master/packages/mdc-notched-outline).
 
 ## Installation
 
 ```
 npm install @material/react-notched-outline
 ```
 
+## Usage
+
+```js
+import NotchedOutline from '@material/react-notched-outline';
+
+const MyComponent = () => {
+  return (
+    <NotchedOutline />
+  );
+}
+```
+
 ## Props
 
 Prop Name | Type | Description
@@ -22,4 +34,4 @@ notchWidth | Number | Width of the notch in the outline.
 Sass mixins may be available to customize various aspects of the Components. Please refer to the
 MDC Web repository for more information on what mixins are available, and how to use them.
 
-[Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/v0.34.1/packages/mdc-top-app-bar/README.md)
+[Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/v0.35.0/packages/mdc-notched-outline/README.md#sass-mixins)

packages/ripple/README.md

@@ -1,23 +1,13 @@
 # React Ripple
 
-MDC React Ripple is a component for material icons.
+MDC React Ripple is a component for MDC Ripple. Please see [MDC Ripple](https://github.com/material-components/material-components-web/tree/master/packages/mdc-ripple).
 
 ## Installation
 
 ```
 npm install @material/react-ripple
 ```
 
-
-## Props
-
-Prop Name | Type | Description
---- | --- | ---
-unbounded | boolean | Ripple is unbounded if true.
-disabled | n/a | Disables ripple if true.
-style | object | Inline styles of root element.
-className | string | Classes to appear on className attribute of root element.
-
 ## Usage
 
 To wrap a component with the ripple HOC, please follow this example:
@@ -57,3 +47,20 @@ const RippleIcon = withRipple(Icon);
 
 Wrap your Icon component with the HOC `withRipple`, which returns a component
 with a ripple capable surface.
+
+## Props
+
+Prop Name | Type | Description
+--- | --- | ---
+unbounded | boolean | Ripple is unbounded if true.
+disabled | n/a | Disables ripple if true.
+style | object | Inline styles of root element.
+className | string | Classes to appear on className attribute of root element.
+
+
+## Sass Mixins
+
+Sass mixins may be available to customize various aspects of the components. Please refer to the
+MDC Web repository for more information on what mixins are available, and how to use them.
+
+[Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/v0.35.0/packages/mdc-ripple/README.md#sass-apis)

packages/text-field/helper-text/README.md

@@ -2,6 +2,20 @@
 
 MDC React Text Field Helper Text is a React Component which uses MDC [MDC Text Field Helper Text](https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield/helper-text/)'s CSS and foundation JavaScript.
 
+## Usage
+
+```js
+import HelperText from '@material/react-text-field/helper-text/index.js';
+
+const MyComponent = () => {
+  return (
+    <HelperText>
+      Really fun helper text
+    </HelperText>
+  );
+}
+```
+
 ## Props
 
 Prop Name | Type | Description
@@ -20,4 +34,4 @@ validation | Boolean | If true, alters the helper text to an error message.
 Sass mixins may be available to customize various aspects of the Components. Please refer to the
 MDC Web repository for more information on what mixins are available, and how to use them.
 
-[Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/v0.35.0/packages/mdc-textfield/icon/README.md)
+[Advanced Sass Mixins](https://github.com/material-components/material-components-web/blob/v0.35.0/packages/mdc-textfield/helper-text/README.md#sass-mixins)