feat(Dimmer): Add component

README.md

@@ -140,7 +140,7 @@ Any other issue labeled [`help wanted`][4] is ready for a PR.
 |-----------------|-----------------|-----------------|-----------------|--------------------|
 | ✓ Button        | ✓ Breadcrumb    |   Advertisement | ✓ Accordion     | ✓ Form Validation  |
 | ✓ Container     | ✓ Form          | ✓ Card          | ✓ Checkbox      | *API (NA)*         |
-| ✓ Divider       | ✓ Grid          | ✓ Comment       |   Dimmer        | *Visibility (NA)*  |
+| ✓ Divider       | ✓ Grid          | ✓ Comment       | ✓ Dimmer        | *Visibility (NA)*  |
 | ✓ Flag          | ✓ Menu          | ✓ Feed          | ✓ Dropdown      |                    |
 | ✓ Header        | ✓ Message       | ✓ Item          |   Embed         |                    |
 | ✓ Icon          | ✓ Table         | ✓ Statistic     | ✓ Modal         |                    |

docs/app/Examples/modules/Dimmer/States/DimmerExampleActive.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Dimmer, Segment } from 'semantic-ui-react'
+
+const DimmerExampleActive = () => (
+  <Segment>
+    <Dimmer active />
+
+    <p>
+      <img src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+    </p>
+    <p>
+      <img src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+    </p>
+  </Segment>
+)
+
+export default DimmerExampleActive

docs/app/Examples/modules/Dimmer/States/DimmerExampleDisabled.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { Dimmer, Segment } from 'semantic-ui-react'
+
+const DimmerExampleDisabled = () => (
+  <Segment>
+    <Dimmer disabled />
+
+    <p>
+      <img src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+    </p>
+    <p>
+      <img src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+    </p>
+  </Segment>
+)
+
+export default DimmerExampleDisabled

docs/app/Examples/modules/Dimmer/States/index.js

@@ -0,0 +1,21 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const DimmerStatesExamples = () => (
+  <ExampleSection title='States'>
+    <ComponentExample
+      title='Active'
+      description='An active dimmer will dim its parent container'
+      examplePath='modules/Dimmer/States/DimmerExampleActive'
+    />
+    <ComponentExample
+      title='Disabled'
+      description='A disabled dimmer cannot be activated'
+      examplePath='modules/Dimmer/States/DimmerExampleDisabled'
+    />
+  </ExampleSection>
+)
+
+export default DimmerStatesExamples

docs/app/Examples/modules/Dimmer/Types/DimmerExamplePage.js

@@ -0,0 +1,36 @@
+import React, { Component } from 'react'
+import { Button, Dimmer, Header, Icon } from 'semantic-ui-react'
+
+export default class DimmerExamplePage extends Component {
+  state = {}
+
+  handleClick = () => this.setState({ active: true })
+  handleClose = () => this.setState({ active: false })
+
+  render() {
+    const { active } = this.state
+
+    return (
+      <div>
+        <Button
+          content='Show'
+          icon='plus'
+          labelPosition='left'
+          onClick={this.handleClick}
+        />
+
+        <Dimmer
+          active={active}
+          onClose={this.handleClose}
+          page
+        >
+          <Header as='h2' icon inverted>
+            <Icon name='heart' />
+            Dimmed Message!
+            <Header.Subheader>Dimmer sub-header</Header.Subheader>
+          </Header>
+        </Dimmer>
+      </div>
+    )
+  }
+}

docs/app/Examples/modules/Dimmer/Types/index.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const DimmerTypesExamples = () => (
+  <ExampleSection title='Types'>
+    <ComponentExample
+      title='Page'
+      description='A dimmer can be formatted to be fixed to the page'
+      examplePath='modules/Dimmer/Types/DimmerExamplePage'
+    />
+  </ExampleSection>
+)
+
+export default DimmerTypesExamples

docs/app/Examples/modules/Dimmer/Variations/DimmerExampleBlurring.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+import { Button, Dimmer, Segment } from 'semantic-ui-react'
+
+export default class DimmerExampleBlurring extends Component {
+  state = {}
+
+  handleShow = () => this.setState({ active: true })
+  handleHide = () => this.setState({ active: false })
+
+  render() {
+    const { active } = this.state
+
+    return (
+      <div>
+        <Dimmer blurring dimmable={Segment} dimmed={active}>
+          <Dimmer active={active} />
+
+          <p>
+            <img src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+          </p>
+          <p>
+            <img src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+          </p>
+        </Dimmer>
+
+        <Button.Group>
+          <Button icon='plus' onClick={this.handleShow} />
+          <Button icon='minus' onClick={this.handleHide} />
+        </Button.Group>
+      </div>
+    )
+  }
+}

docs/app/Examples/modules/Dimmer/Variations/DimmerExampleBlurringInverted.js

@@ -0,0 +1,33 @@
+import React, { Component } from 'react'
+import { Button, Dimmer, Segment } from 'semantic-ui-react'
+
+export default class DimmerExampleBlurringInverted extends Component {
+  state = {}
+
+  handleShow = () => this.setState({ active: true })
+  handleHide = () => this.setState({ active: false })
+
+  render() {
+    const { active } = this.state
+
+    return (
+      <div>
+        <Dimmer blurring dimmable={Segment} dimmed={active}>
+          <Dimmer active={active} inverted />
+
+          <p>
+            <img src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+          </p>
+          <p>
+            <img src='http://semantic-ui.com/images/wireframe/short-paragraph.png' />
+          </p>
+        </Dimmer>
+
+        <Button.Group>
+          <Button icon='plus' onClick={this.handleShow} />
+          <Button icon='minus' onClick={this.handleHide} />
+        </Button.Group>
+      </div>
+    )
+  }
+}

docs/app/Examples/modules/Dimmer/Variations/index.js

@@ -0,0 +1,17 @@
+import React from 'react'
+
+import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
+
+const DimmerVariationsExamples = () => (
+  <ExampleSection title='Variations'>
+    <ComponentExample
+      title='Blurring'
+      description='A dimmable element can blur its contents'
+      examplePath='modules/Dimmer/Variations/DimmerExampleBlurring'
+    />
+    <ComponentExample examplePath='modules/Dimmer/Variations/DimmerExampleBlurringInverted' />
+  </ExampleSection>
+)
+
+export default DimmerVariationsExamples

docs/app/Examples/modules/Dimmer/index.js

@@ -0,0 +1,15 @@
+import React from 'react'
+
+import States from './States'
+import Types from './Types'
+import Variations from './Variations'
+
+const DimmerExamples = () => (
+  <div>
+    <Types />
+    <States />
+    <Variations />
+  </div>
+)
+
+export default DimmerExamples

src/index.js

@@ -100,6 +100,8 @@ export { default as AccordionTitle } from './modules/Accordion/AccordionTitle'
 
 export { default as Checkbox } from './modules/Checkbox'
 
+export { default as Dimmer } from './modules/Dimmer'
+
 export { default as Dropdown } from './modules/Dropdown'
 export { default as DropdownDivider } from './modules/Dropdown/DropdownDivider'
 export { default as DropdownHeader } from './modules/Dropdown/DropdownHeader'