Add ripple documentation

components/ripple/readme.md

@@ -0,0 +1,27 @@
+# Ripple
+
+The ripple is a surface reaction that happens when the user interacts with the component. It's useful to provide feedback about a click or touch action. In React Toolbox it's implemented as an higher order component (HOC) being a requirement for the child to implement `children` and `onMouseDown` props. Also it should be placed as relative. Hiding the overflow is up to you.
+
+<!-- example -->
+```jsx
+import Ripple from 'react-toolbox/lib/ripple';
+
+const Link = (props) => (
+  <a {...props} style={{position: 'relative'}}>
+    {props.children}
+  </a>
+);
+
+const RippleLink = Ripple({spread: 3})(Link);
+const RippleTest = () => <RippleLink href='#'>Test</RippleLink>;
+```
+
+## Properties
+
+In any component you decorate with the Ripple you'd get some additional props:
+
+| Name      | Type      | Default         | Description|
+|:-----|:-----|:-----|:-----|
+| `centered`     | `Boolean`  | `false` | True in case you want a centered ripple.|
+| `className`     | `String`  | `''` | String to customize appearance (color and opacity for example).|
+| `spread`     | `Number`  | `2` | Factor to indicate how much should the ripple spread under the component. |

docs/app/components/layout/main/modules/components.js

@@ -17,6 +17,7 @@ import Menu from 'react-toolbox/menu/readme';
 import Navigation from 'react-toolbox/navigation/readme';
 import ProgressBar from 'react-toolbox/progress_bar/readme';
 import RadioGroup from 'react-toolbox/radio/readme';
+import Ripple from 'react-toolbox/ripple/readme';
 import Slider from 'react-toolbox/slider/readme';
 import Snackbar from 'react-toolbox/snackbar/readme';
 import Switch from 'react-toolbox/switch/readme';
@@ -44,6 +45,7 @@ import NavigationExample1 from './examples/navigation_example_1.txt';
 import ProgressBarExample1 from './examples/progressbar_example_1.txt';
 import RadioExample1 from './examples/radio_example_1.txt';
 import SliderExample1 from './examples/slider_example_1.txt';
+import RippleExample1 from './examples/ripple_example_1.txt';
 import SnackbarExample1 from './examples/snackbar_example_1.txt';
 import SwitchExample1 from './examples/switch_example_1.txt';
 import TableExample1 from './examples/table_example_1.txt';
@@ -159,6 +161,12 @@ export default {
     path: '/components/radio_group',
     examples: [RadioExample1]
   },
+  ripple: {
+    name: 'Ripple',
+    docs: Ripple,
+    path: '/components/ripple',
+    examples: [RippleExample1]
+  },
   slider: {
     name: 'Slider',
     docs: Slider,

docs/app/components/layout/main/modules/examples/ripple_example_1.txt

@@ -0,0 +1,10 @@
+const CustomLink = (props) => (
+  <a {...props} style={{position: 'relative'}}>
+    {props.children}
+  </a>
+);
+
+const RippleLink = Ripple({spread: 3})(CustomLink);
+const RippleTest = () => <RippleLink>Test</RippleLink>;
+
+return <RippleTest />;