feat: Polish styles on method references

newrelic · Jun 15, 2020 · 52e0c85 · 52e0c85
1 parent 742cce1
commit 52e0c85
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 22 deletions.
diff --git a/src/components/FunctionDefinition.js b/src/components/FunctionDefinition.js
@@ -1,5 +1,6 @@
 import React, { Children } from 'react';
 import PropTypes from 'prop-types';
+import cx from 'classnames';
 import Markdown from 'react-markdown';
 import styles from './FunctionDefinition.module.scss';
 
@@ -19,9 +20,9 @@ ParamDescription.propTypes = {
   children: PropTypes.node,
 };
 
-const FunctionDefinition = ({ params, returnValue }) => {
+const FunctionDefinition = ({ className, params, returnValue }) => {
   return (
-    <div className={styles.container}>
+    <div className={cx(styles.container, className)}>
       <span className={styles.keyword}>
         {params.length > 0 ? 'function (' : 'function ()'}
       </span>
@@ -48,6 +49,7 @@ const FunctionDefinition = ({ params, returnValue }) => {
 };
 
 FunctionDefinition.propTypes = {
+  className: PropTypes.string,
   params: PropTypes.arrayOf(
     PropTypes.shape({
       name: PropTypes.string,

diff --git a/src/components/MethodReference.js b/src/components/MethodReference.js
@@ -10,6 +10,7 @@ const MethodReference = ({ className, method }) => (
     <h3 className={styles.name}>{method.name}</h3>
     <Markdown className={styles.description} source={method.description} />
     <FunctionDefinition
+      className={styles.functionDefinition}
       params={method.params}
       returnValue={method.returnValue}
     />

diff --git a/src/components/MethodReference.module.scss b/src/components/MethodReference.module.scss
@@ -1,15 +1,20 @@
 .name {
+  font-family: var(--code-font);
+  display: inline-block;
   padding: 0.125rem 0.25rem;
-  display: inline;
   color: var(--color-teal-500);
   background: var(--color-teal-050);
+  margin-bottom: 1rem;
 }
 
 .description {
-  margin-top: 1rem;
   margin-bottom: 1rem;
 }
 
 .example:not(:last-child) {
   margin-bottom: 2rem;
 }
+
+.functionDefinition {
+  margin-bottom: 1rem;
+}
diff --git a/src/components/PropList.js b/src/components/PropList.js
@@ -111,10 +111,12 @@ const PropList = ({ propTypes }) => {
                     />
                   </div>
                 )}
-                <Markdown
-                  className={cx(styles.details, styles.markdownContainer)}
-                  source={description}
-                />
+                {description && (
+                  <Markdown
+                    className={cx(styles.details, styles.markdownContainer)}
+                    source={description}
+                  />
+                )}
                 <PropTypeInfo type={type} />
                 {examples.map((example, idx) => (
                   <ReferenceExample key={idx} example={example} />

diff --git a/src/templates/ApiReferenceTemplate.js b/src/templates/ApiReferenceTemplate.js
@@ -31,29 +31,39 @@ const ApiReferenceTemplate = ({ data }) => {
       <SEO title={title} description={description} />
       <PageTitle>{api}</PageTitle>
 
-      <section
-        className={cx(templateStyles.section, templateStyles.description)}
-      >
-        <ReactMarkdown source={apiDescription} />
-      </section>
+      {apiDescription && (
+        <section
+          className={cx(
+            templateStyles.section,
+            templateStyles.description,
+            'intro-text'
+          )}
+        >
+          <ReactMarkdown source={apiDescription} />
+        </section>
+      )}
 
       <section className={templateStyles.section}>
-        <h2>Usage</h2>
+        <h2 className={templateStyles.sectionTitle}>Usage</h2>
         <InlineCodeSnippet language="js">{usage}</InlineCodeSnippet>
       </section>
 
       {methods.length > 0 && (
         <section className={templateStyles.section}>
-          <h2>API methods</h2>
+          <h2 className={templateStyles.sectionTitle}>API methods</h2>
           {methods.map((method, i) => (
-            <MethodReference key={i} method={method} />
+            <MethodReference
+              key={i}
+              method={method}
+              className={templateStyles.section}
+            />
           ))}
         </section>
       )}
 
       {typeDefs.length > 0 && (
         <section className={templateStyles.section}>
-          <h2>Type definitions</h2>
+          <h2 className={templateStyles.sectionTitle}>Type definitions</h2>
           {typeDefs.map((typeDef, i) => (
             <TypeDefReference key={i} typeDef={typeDef} />
           ))}
@@ -62,7 +72,7 @@ const ApiReferenceTemplate = ({ data }) => {
 
       {constants.length > 0 && (
         <section className={templateStyles.section}>
-          <h2>Constants</h2>
+          <h2 className={templateStyles.sectionTitle}>Constants</h2>
           {constants.map((constant, i) => (
             <ConstantReference key={i} constant={constant} />
           ))}

diff --git a/src/templates/ComponentReferenceTemplate.js b/src/templates/ComponentReferenceTemplate.js
@@ -50,13 +50,15 @@ const ComponentReferenceTemplate = ({ data }) => {
         <ReactMarkdown source={componentDescription} />
       </section>
 
+      <section className={templateStyles.section}>
+        <h2 className={templateStyles.sectionTitle}>Usage</h2>
+        <InlineCodeSnippet language="js">{usage}</InlineCodeSnippet>
+      </section>
+
       {examples.length > 0 && (
         <section className={templateStyles.section}>
           <div>
             <h2 className={templateStyles.sectionTitle}>Examples</h2>
-            <div className={templateStyles.section}>
-              <InlineCodeSnippet language="js">{usage}</InlineCodeSnippet>
-            </div>
             {examples.map((example, i) => (
               <ReferenceExample
                 key={i}
@@ -85,7 +87,11 @@ const ComponentReferenceTemplate = ({ data }) => {
         <section className={templateStyles.section}>
           <h2 className={templateStyles.sectionTitle}>Methods</h2>
           {methods.map((method, i) => (
-            <MethodReference key={i} method={method} />
+            <MethodReference
+              key={i}
+              method={method}
+              className={styles.section}
+            />
           ))}
         </section>
       )}