feat: Extract a MethodReference component and add to the 2 reference …

…templates
newrelic · Jun 6, 2020 · d64e9df · d64e9df
1 parent 49e5f61
commit d64e9df
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 41 deletions.
diff --git a/src/components/MethodReference.js b/src/components/MethodReference.js
@@ -0,0 +1,37 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ComponentExample from './ComponentExample';
+import FunctionDefinition from './FunctionDefinition';
+import Markdown from 'react-markdown';
+import styles from './MethodReference.module.scss';
+
+const MethodReference = ({ className, method }) => (
+  <div className={className}>
+    <h3 className={styles.name}>{method.name}</h3>
+    <Markdown className={styles.description} source={method.description} />
+    <FunctionDefinition
+      params={method.params}
+      returnValue={method.returnValue}
+    />
+    {method.examples.map((example, i) => (
+      <ComponentExample
+        key={i}
+        className={styles.componentExample}
+        example={example}
+      />
+    ))}
+  </div>
+);
+
+MethodReference.propTypes = {
+  className: PropTypes.string,
+  method: PropTypes.shape({
+    name: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    params: FunctionDefinition.propTypes.params,
+    returnValue: FunctionDefinition.propTypes.returnValue,
+    examples: PropTypes.arrayOf(ComponentExample.propTypes.example),
+  }),
+};
+
+export default MethodReference;
diff --git a/src/components/MethodReference.module.scss b/src/components/MethodReference.module.scss
@@ -0,0 +1,11 @@
+.name {
+  padding: 0.125rem 0.25rem;
+  display: inline;
+  color: var(--color-teal-500);
+  background: var(--color-teal-050);
+}
+
+.description {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
diff --git a/src/templates/ApiDocTemplate.js b/src/templates/ApiDocTemplate.js
@@ -1,13 +1,12 @@
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 import cx from 'classnames';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import InlineCodeSnippet from '../components/InlineCodeSnippet';
 import ReactMarkdown from 'react-markdown';
 import Container from '../components/Container';
-import ComponentExample from '../components/ComponentExample';
-import FunctionDefinition from '../components/FunctionDefinition';
 import Layout from '../components/Layout';
+import MethodReference from '../components/MethodReference';
 import Sidebar from '../components/Sidebar';
 import SEO from '../components/Seo';
 import pages from '../data/sidenav.json';
@@ -48,24 +47,7 @@ const ApiDocTemplate = ({ data }) => {
             <section className={styles.section}>
               <h2>API methods</h2>
               {methods.map((method, i) => (
-                <Fragment key={i}>
-                  <h3 className={styles.methodName}>{method.name}</h3>
-                  <ReactMarkdown
-                    className={styles.methodDescription}
-                    source={method.description}
-                  />
-                  <FunctionDefinition
-                    params={method.params}
-                    returnValue={method.returnValue}
-                  />
-                  {method.examples.map((example, i) => (
-                    <ComponentExample
-                      key={i}
-                      className={styles.componentExample}
-                      example={example}
-                    />
-                  ))}
-                </Fragment>
+                <MethodReference key={i} method={method} />
               ))}
             </section>
           )}

diff --git a/src/templates/ComponentDocTemplate.js b/src/templates/ComponentDocTemplate.js
@@ -1,13 +1,13 @@
-import React, { Fragment, useState } from 'react';
+import React, { useState } from 'react';
 import cx from 'classnames';
 import { graphql } from 'gatsby';
 import PropTypes from 'prop-types';
 import InlineCodeSnippet from '../components/InlineCodeSnippet';
 import ReactMarkdown from 'react-markdown';
 import Container from '../components/Container';
 import ComponentExample from '../components/ComponentExample';
-import FunctionDefinition from '../components/FunctionDefinition';
 import Layout from '../components/Layout';
+import MethodReference from '../components/MethodReference';
 import Sidebar from '../components/Sidebar';
 import SEO from '../components/Seo';
 import PropList from '../components/PropList';
@@ -84,24 +84,7 @@ const ComponentDocTemplate = ({ data }) => {
             <section className={styles.section}>
               <h2>Methods</h2>
               {methods.map((method, i) => (
-                <Fragment key={i}>
-                  <h3 className={styles.methodName}>{method.name}</h3>
-                  <ReactMarkdown
-                    className={styles.methodDescription}
-                    source={method.description}
-                  />
-                  <FunctionDefinition
-                    params={method.params}
-                    returnValue={method.returnValue}
-                  />
-                  {method.examples.map((example, i) => (
-                    <ComponentExample
-                      key={i}
-                      className={styles.componentExample}
-                      example={example}
-                    />
-                  ))}
-                </Fragment>
+                <MethodReference key={i} method={method} />
               ))}
             </section>
           )}