docs: add <Ripple> docs

README.md

@@ -77,6 +77,7 @@ const MyComponent = mock();
      - [`<Portal>`](./docs/en/Portal.md), [`<Overlay>`](./docs/en/Overlay.md), and [`<Modal>`](./docs/en/Modal.md)
      - [`<FullScreen>`](./docs/en/FullScreen.md)
      - [`<Slider>`](./docs/en/Slider.md)
+     - [`<Ripple>`](./docs/en/Ripple.md)
      - [`<Audio>`](./docs/en/Audio.md) and [`<Video>`](./docs/en/Video.md)
      - [`<Speak>`](./docs/en/Speak.md), [`<Vibrate>`](./docs/en/Vibrate.md), [`<Alert>`](./docs/en/Alert.md), `<Prompt>`, `<Confirm>`
   - [Side Effects](./docs/en/Side-effects.md)

docs/en/README.md

@@ -46,6 +46,7 @@
      - [`<Portal>`](./Portal.md), [`<Overlay>`](./Overlay.md), and [`<Modal>`](./Modal.md)
      - [`<FullScreen>`](./FullScreen.md)
      - [`<Slider>`](./Slider.md)
+     - [`<Ripple>`](./Ripple.md)
      - [`<Audio>`](./Audio.md) and [`<Video>`](./Video.md)
      - [`<Speak>`](./Speak.md), [`<Vibrate>`](./Vibrate.md), [`<Alert>`](./Alert.md), `<Prompt>`, `<Confirm>`
   - [Side Effects](./Side-effects.md)

docs/en/Ripple.md

@@ -0,0 +1,25 @@
+# `<Ripple>`
+
+Creates Material Design ripple effect on click inside your element.
+
+
+## Usage
+
+```jsx
+import {Ripple} from 'libreact/lib/Ripple';
+
+<Ripple>
+  <div style={{
+    width: 300,
+    height: 200,
+  }}>
+    foobar
+  </div>
+</Ripple>
+```
+
+
+## Props
+
+- `color` &mdash; optional, string, ripple color.
+- `ms` &mdash; optional, number, animation time in milliseconds.

docs/en/SUMMARY.md

@@ -55,6 +55,7 @@
   * [Modal](Modal.md)
   * [FullScreen](FullScreen.md)
   * [Slider](Slider.md)
+  * [Ripple](Ripple.md)
   * [Audio](Audio.md)
   * [Video](Video.md)
   * [Speak](Speak.md)

src/Ripple/__story__/Button.tsx

@@ -4,23 +4,18 @@ import styled from 'freestyler/lib/react/styled';
 import {withRipple} from '..';
 
 export const theme = {
-  // Main site colors.
   color1: ['#29EB7F', '#13CE66', '#0F9F4F'],
   color2: ['#85D7FF', '#1FB6FF', '#009EEB'],
   color3: ['#A389F4', '#7E5BEF', '#592DEA'],
   color4: ['#FF7CE5', '#FF49DB', '#FF16D1'],
   color5: ['#FF9E7C', '#FF7849', '#FF5216'],
   color6: ['#FFD55F', '#FFC82C', '#F8B700'],
-
-  // Shades of grey.
   black: '#1F2D3D',
   steel: '#273444',
   slate: '#3C4858',
   silver: '#8492A6',
   smoke: ['#E0E6ED', '#D3DCE6', '#C0CCDA'],
   snow: ['#F9FAFC', '#EFF2F7', '#E5E9F2'],
-
-  // Semantic colors.
   blue: '#1FB6FF',
   positive: '#13CE66',
   negative: '#FF4949',
@@ -65,7 +60,7 @@ const dynamicTemplate = ({disabled, outline, lite, primary, simple, small}) => {
     return style;
 };
 
-const ButtonWithRipple = withRipple('button', {ms: 1000});
+const ButtonWithRipple = withRipple('button', {ms: 1000, color: 'white'});
 
 const Button: React.SFC<IButtonProps> = styled(ButtonWithRipple)(staticTemplate, dynamicTemplate);
 

src/Ripple/__story__/story.tsx

@@ -7,7 +7,16 @@ import Button from './Button';
 import ShowDocs from '../../../.storybook/ShowDocs';
 
 storiesOf('UI/Ripple', module)
-  // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Slider.md')}))
+  .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Ripple.md')}))
+  .add('Plain example', () =>
+    <div>
+      <Ripple>
+        <div>
+          foobar
+        </div>
+      </Ripple>
+    </div>
+  )
   .add('Example', () =>
     <div>
       <Ripple>