Docs: Add example of using Context (#1411)

Closes #1374

Author: Juha Karttunen

docs/Documenting.md

@@ -310,6 +310,8 @@ class ModalExample extends React.Component {
 ;<ModalExample />
 ````
 
+If a component consumes React Context, you need a context provider in the example or in a custom `Wrapper` component. See [ThemeButton example](https://github.com/styleguidist/react-styleguidist/tree/master/examples/sections/src/components/ThemeButton).
+
 > **Note:** If you need a more complex demo it’s often a good idea to define it in a separate JavaScript file and `import` it in Markdown.
 
 ## Limitations

examples/sections/src/ThemeContext.js

@@ -0,0 +1,6 @@
+import React from 'react';
+
+/**
+ * Context that stores selected application theme: 'light' | 'dark'
+ */
+export default React.createContext('light');

examples/sections/src/components/ThemeButton/Readme.md

@@ -0,0 +1,26 @@
+An example of using React Context with a component:
+
+```jsx
+import ThemeContext from '../../ThemeContext.js'
+
+initialState = { theme: 'light' }
+const toggleTheme = () => {
+  setState({ theme: state.theme === 'light' ? 'dark' : 'light' })
+}
+;<>
+  <div
+    style={{
+      backgroundColor: '#ccc',
+      margin: '-16px -16px 16px -16px',
+      padding: '16px'
+    }}
+  >
+    <button onClick={toggleTheme}>Theme: {state.theme}</button>
+  </div>
+  <div>
+    <ThemeContext.Provider value={state.theme}>
+      <ThemeButton>Themable button</ThemeButton>
+    </ThemeContext.Provider>
+  </div>
+</>
+```

examples/sections/src/components/ThemeButton/ThemeButton.css

@@ -0,0 +1,20 @@
+.ThemeButton {
+	padding: 0.5em 1.5em;
+	border: 1px solid currentColor;
+	border-radius: 0.3em;
+	font-size: 16px;
+	font-weight: bold;
+	text-align: center;
+	vertical-align: middle;
+	cursor: pointer;
+}
+
+.ThemeButton--light {
+	color: #111133;
+	background-color: #eeeeff;
+}
+
+.ThemeButton--dark {
+	color: #eeeeff;
+	background-color: #111133;
+}

examples/sections/src/components/ThemeButton/ThemeButton.js

@@ -0,0 +1,23 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import ThemeContext from '../../ThemeContext';
+import './ThemeButton.css';
+
+/**
+ * Button that is themed by a context value
+ */
+export default class ThemeButton extends Component {
+	render() {
+		const className = this.context === 'light' ? 'ThemeButton ThemeButton--light' : 'ThemeButton ThemeButton--dark';
+		return <button className={className}>{this.props.children}</button>;
+	}
+}
+
+/** ThemeContext {string} */
+ThemeButton.contextType = ThemeContext;
+ThemeButton.propTypes = {
+	/**
+	 * ThemeButton label
+	 */
+	children: PropTypes.string.isRequired,
+};

examples/sections/src/components/ThemeButton/index.js

@@ -0,0 +1 @@
+export { default } from './ThemeButton';

examples/sections/styleguide.config.js

@@ -39,7 +39,10 @@ module.exports = {
 			sections: [
 				{
 					name: 'Buttons',
-					components: () => ['./src/components/Button/Button.js'],
+					components: () => [
+						'./src/components/Button/Button.js',
+						'./src/components/ThemeButton/ThemeButton.js',
+					],
 					exampleMode: 'expand', // 'hide' | 'collapse' | 'expand'
 					usageMode: 'hide', // 'hide' | 'collapse' | 'expand'
 				},