docs: add <Dimmer> reference

Author: streamich

README.md

@@ -77,6 +77,7 @@ const MyComponent = mock();
      - [`<Translations>`](./docs/en/translate.md#translations), [`<Translate>`](./docs/en/translate.md#translate-or-t), [`<T>`](./docs/en/translate.md#translate-or-t), [`withT()`](./docs/en/translate.md#witht-hoc), and [`@withT`](./docs/en/translate.md#witht-decorator)
   - [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)
      - [`<FullScreen>`](./docs/en/FullScreen.md)
      - [`<Slider>`](./docs/en/Slider.md)
      - [`<DropArea>`](./docs/en/DropArea.md)

docs/en/Dimmer.md

@@ -0,0 +1,24 @@
+# `<Dimmer>`
+
+Dims or create an overlay over its parent element.
+
+
+## Usage
+
+```jsx
+import {Dimmer} from 'libreact/lib/Dimmer';
+
+<div style={{width: 500, height: 300, border: '1px solid tomato'}}>
+  Inline...
+  <Dimmer>
+    Children...
+  </Dimmer>
+</div>
+```
+
+
+## Props
+
+- `color` &mdash; optional, string, overlay color, defaults to `rgba(0,0,0,0.5)`.
+- `ms` &mdash; optional, number, background color appearance animation time in milliseconds, defaults to `300`.
+- `hidden` &mdash; optional, boolean, whther to hide dim overlay.

docs/en/README.md

@@ -46,6 +46,7 @@
      - [`<Translations>`](./translate.md#translations), [`<Translate>`](./translate.md#translate-or-t), [`<T>`](./translate.md#translate-or-t), [`withT()`](./translate.md#witht-hoc), and [`@withT`](./translate.md#witht-decorator)
   - [UI](./UI.md)
      - [`<Portal>`](./Portal.md), [`<Overlay>`](./Overlay.md), and [`<Modal>`](./Modal.md)
+     - [`<Dimmer>`](./Dimmer.md) and [`<Dimmable>`](./Dimmable.md)
      - [`<FullScreen>`](./FullScreen.md)
      - [`<Slider>`](./Slider.md)
      - [`<DropArea>`](./DropArea.md)

docs/en/SUMMARY.md

@@ -55,6 +55,8 @@
   * [Portal](Portal.md)
   * [Overlay](Overlay.md)
   * [Modal](Modal.md)
+  * [`<Dimmer>`](Dimmer.md)
+  * [`<Dimmable>`](Dimmable.md)
   * [FullScreen](FullScreen.md)
   * [Slider](Slider.m
   * [`<DropArea>`](DropArea.md)

src/Dimmable/__story__/story.tsx

@@ -7,7 +7,7 @@ import {Toggle} from '../../Toggle';
 import ShowDocs from '../../../.storybook/ShowDocs'
 
 storiesOf('UI/Dimmable', module)
-  // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Dimmable.md')}))
+  .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Dimmable.md')}))
   .add('Text node', () =>
     <Toggle>{({on, toggle}) =>
       <div>

src/Dimmer/__story__/story.tsx

@@ -7,7 +7,7 @@ import {Toggle} from '../../Toggle';
 import ShowDocs from '../../../.storybook/ShowDocs'
 
 storiesOf('UI/Dimmer', module)
-  // .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Dimmer.md')}))
+  .add('Documentation', () => h(ShowDocs, {md: require('../../../docs/en/Dimmer.md')}))
   .add('Example', () =>
     <div style={{width: 500, height: 300, border: '1px solid tomato', position: 'absolute'}}>
       Inline...