docs: add <Parallax> docs

Author: streamich

README.md

@@ -79,6 +79,7 @@ const MyComponent = mock();
   - [UI](./docs/en/UI.md)
      - [`<Portal>`](./docs/en/Portal.md), [`<Overlay>`](./docs/en/Overlay.md), and [`<Modal>`](./docs/en/Modal.md)
      - [`<Dimmer>`](./docs/en/Dimmer.md) and [`<Dimmable>`](./docs/en/Dimmable.md)
+     - [`<Parallax>`](./docs/en/Parallax.md)
      - [`<FullScreen>`](./docs/en/FullScreen.md)
      - [`<Slider>`](./docs/en/Slider.md)
      - [`<DropArea>`](./docs/en/DropArea.md)

docs/en/Parallax.md

@@ -0,0 +1,29 @@
+# `<Parallax>`
+
+This component allows you to create [*Parallax effects*](https://en.wikipedia.org/wiki/Parallax).
+
+It supports [React Universal Interace](https://www.npmjs.com/package/react-universal-interface).
+
+
+## Usage
+
+The below example will slow down the scrolling of your `<img>` element.
+
+```jsx
+import {Parallax} from 'libreact/lib/Parallax';
+
+<Parallax>{({value}) =>
+  <img style={{marginTop: state.value * 300}} src={/* ... */} />
+}</Parallax>
+```
+
+
+## Props
+
+- `distance` &mdash; optional, number, maximum distance for parallax effect to take effect, if omitted,
+parallax effect will continue thoughout the lenght of your element, if set, the length of the parallax
+effect will be capped at `distance`, defaults to `Infinity`.
+- `throttle` &mdash; optional, number in milliseconds, used to throttle document `scroll` event, defaults to `50`.
+- `margin` &mdash; optional, a 4-tuple `[top, right, bottom, left]` margins in pixels to apply to the viewport.
+- `onChange` &mdash; optional, callback triggered every time the state of `<Parallax>` component changes. Receives the
+state of the `<Parallax>` component as a single argument.

docs/en/README.md

@@ -48,6 +48,7 @@
   - [UI](./UI.md)
      - [`<Portal>`](./Portal.md), [`<Overlay>`](./Overlay.md), and [`<Modal>`](./Modal.md)
      - [`<Dimmer>`](./Dimmer.md) and [`<Dimmable>`](./Dimmable.md)
+     - [`<Parallax>`](./Parallax.md)
      - [`<FullScreen>`](./FullScreen.md)
      - [`<Slider>`](./Slider.md)
      - [`<DropArea>`](./DropArea.md)

docs/en/SUMMARY.md

@@ -59,6 +59,7 @@
   * [Modal](Modal.md)
   * [Dimmer](Dimmer.md)
   * [Dimmable](Dimmable.md)
+  * [Parallax](Parallax.md)
   * [FullScreen](FullScreen.md)
   * [Slider](Slider.m
   * [DropArea](DropArea.md)

src/Parallax/__story__/StoryParallax5.tsx

@@ -0,0 +1,26 @@
+import {Parallax} from '..';
+import {h} from '../../util';
+
+const StoryParallax1 = () => {
+  return (
+    <div>
+      <div style={{
+        width: 300,
+        height: 1e3,
+        border: '1px solid tomato'
+      }} />
+
+      <Parallax onChange={(data) => console.log(data)}>{(state) =>
+        <pre style={{marginTop: state.value * 300, border: '1px solid black', height: 300}}>{JSON.stringify(state, null, 4)}</pre>
+      }</Parallax>
+
+      <div style={{
+        width: 300,
+        height: 1e3,
+        border: '1px solid tomato'
+      }} />
+    </div>
+  );
+};
+
+export default StoryParallax1;

src/Parallax/__story__/story.tsx

@@ -4,9 +4,11 @@ import StoryParallax1 from './StoryParallax1';
 import StoryParallax2 from './StoryParallax2';
 import StoryParallax3 from './StoryParallax3';
 import StoryParallax4 from './StoryParallax4';
+import StoryParallax5 from './StoryParallax5';
 
 storiesOf('UI/Parallax', module)
   .add('Basic example', () => <StoryParallax1 />)
   .add('Card', () => <StoryParallax2 />)
   .add('With margin', () => <StoryParallax3 />)
-  .add('Distance', () => <StoryParallax4 />);
+  .add('Distance', () => <StoryParallax4 />)
+  .add('Scroll slowdown', () => <StoryParallax5 />);