From 5a8f9bff4134519b477eb7db85940597c3f8a78b Mon Sep 17 00:00:00 2001
From: Valeriy <ValeraS@users.noreply.github.com>
Date: Mon, 4 Feb 2019 04:01:55 +0300
Subject: [PATCH] feat(guide): add an example of custom component

---
 .../components/example/Component/index.js     | 80 +++++++++++++++++++
 .../english/components/example/index.md       |  8 ++
 mock-guide/english/components/index.md        | 14 ++++
 3 files changed, 102 insertions(+)
 create mode 100644 client/src/templates/Guide/components/example/Component/index.js
 create mode 100644 mock-guide/english/components/example/index.md
 create mode 100644 mock-guide/english/components/index.md

diff --git a/client/src/templates/Guide/components/example/Component/index.js b/client/src/templates/Guide/components/example/Component/index.js
new file mode 100644
index 0000000000..8509750c93
--- /dev/null
+++ b/client/src/templates/Guide/components/example/Component/index.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import PropTypes from 'prop-types';
+import { graphql } from 'gatsby';
+
+import ArticleLayout from '../../ArticleLayout';
+
+const propTypes = {
+  data: PropTypes.object
+};
+
+class CustomClickCounter extends React.Component {
+  state = {
+    init: false,
+    span: null,
+    div: null,
+    counter: 0
+  };
+
+  initComponent() {
+    const span = document.getElementById('example-component_span');
+    const div = document.getElementById('example-component_div');
+    this.setState({ init: true, span, div });
+  }
+
+  handleClick = () => {
+    this.setState(state => ({ counter: state.counter + 1 }));
+  };
+
+  componentDidMount() {
+    this.initComponent();
+  }
+
+  render() {
+    if (!this.state.init) {
+      return null;
+    }
+    return (
+      <div>
+        {ReactDOM.createPortal(this.state.counter, this.state.span)}
+        {ReactDOM.createPortal(
+          <button onClick={this.handleClick}>Click me!</button>,
+          this.state.div
+        )}
+      </div>
+    );
+  }
+}
+
+const ExampleComponent = props => {
+  const {
+    data: {
+      markdownRemark: { html }
+    }
+  } = props;
+  return (
+    <ArticleLayout {...props}>
+      <article
+        className='article'
+        dangerouslySetInnerHTML={{ __html: html }}
+        id='article'
+        tabIndex='-1'
+      />
+      <CustomClickCounter />
+    </ArticleLayout>
+  );
+};
+
+ExampleComponent.displayName = 'ExampleComponent';
+ExampleComponent.propTypes = propTypes;
+export default ExampleComponent;
+
+export const pageQuery = graphql`
+  query ExampleComponent($id: String!) {
+    markdownRemark(id: { eq: $id }) {
+      html
+      ...ArticleLayout
+    }
+  }
+`;
diff --git a/mock-guide/english/components/example/index.md b/mock-guide/english/components/example/index.md
new file mode 100644
index 0000000000..6e92521fc5
--- /dev/null
+++ b/mock-guide/english/components/example/index.md
@@ -0,0 +1,8 @@
+---
+title: Example component
+component: example/Component/index.js
+---
+## Example component
+
+We can place inline component: <span id='example-component_span'></span>.
+Or place block component: <div id='example-component_div'></div>
diff --git a/mock-guide/english/components/index.md b/mock-guide/english/components/index.md
new file mode 100644
index 0000000000..b7cf819e95
--- /dev/null
+++ b/mock-guide/english/components/index.md
@@ -0,0 +1,14 @@
+---
+title: Components
+---
+
+## Components
+
+We can use custom components for guide articles. Add
+
+```yml
+component: path/to/component
+```
+
+to an article frontmatter to use your component. Your component should be
+located in `client/src/templates/Guide/components/path/to/component`.