feat: More tweaks to component doc styling

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

Hide file tree

Showing 7 changed files with 23 additions and 14 deletions.
diff --git a/src/components/PageTitle.module.scss b/src/components/PageTitle.module.scss
@@ -1,6 +1,5 @@
 .pageTitle {
   font-size: 2.5rem;
-  margin-top: 0;
   margin-bottom: 0;
   font-weight: normal;
 }
diff --git a/src/components/PropList.module.scss b/src/components/PropList.module.scss
@@ -1,8 +1,11 @@
 .container {
   display: flex;
-  border-bottom: solid var(--color-neutrals-200) 1px;
-  padding-bottom: 2rem;
-  margin-top: 1rem;
+
+  &:not(:last-child) {
+    margin-bottom: 2rem;
+    padding-bottom: 2rem;
+    border-bottom: solid var(--color-neutrals-200) 1px;
+  }
 }
 
 .info {

diff --git a/src/components/ReferenceExample.module.scss b/src/components/ReferenceExample.module.scss
@@ -10,5 +10,7 @@
 }
 
 .title {
+  font-weight: bold;
+  font-size: 1.25rem;
   margin-bottom: 1rem;
 }
diff --git a/src/components/ReferencePreview.js b/src/components/ReferencePreview.js
@@ -8,7 +8,6 @@ const EXAMPLE_CSS = `
 .nr1-ReferenceExample {
   line-height: 1.36;
   font-weight: 400;
-  background-color: #fff;
   color: #000e0e;
   font-size: 12px;
   font-family: Open Sans,Segoe UI,Tahoma,sans-serif;

diff --git a/src/templates/ComponentReferenceTemplate.js b/src/templates/ComponentReferenceTemplate.js
@@ -50,15 +50,13 @@ const ComponentReferenceTemplate = ({ data }) => {
         <ReactMarkdown source={componentDescription} />
       </section>
 
-      <section className={templateStyles.section}>
-        <h2>Usage</h2>
-        <InlineCodeSnippet language="js">{usage}</InlineCodeSnippet>
-      </section>
-
       {examples.length > 0 && (
         <section className={templateStyles.section}>
-          <h2>Examples</h2>
           <div>
+            <h2 className={templateStyles.sectionTitle}>Examples</h2>
+            <div className={templateStyles.section}>
+              <InlineCodeSnippet language="js">{usage}</InlineCodeSnippet>
+            </div>
             {examples.map((example, i) => (
               <ReferenceExample
                 key={i}
@@ -79,13 +77,13 @@ const ComponentReferenceTemplate = ({ data }) => {
       )}
 
       <section className={templateStyles.section}>
-        <h2>Props</h2>
+        <h2 className={templateStyles.sectionTitle}>Props</h2>
         <PropList propTypes={propTypes} />
       </section>
 
       {methods.length > 0 && (
         <section className={templateStyles.section}>
-          <h2>Methods</h2>
+          <h2 className={templateStyles.sectionTitle}>Methods</h2>
           {methods.map((method, i) => (
             <MethodReference key={i} method={method} />
           ))}
@@ -94,7 +92,7 @@ const ComponentReferenceTemplate = ({ data }) => {
 
       {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} />
           ))}

diff --git a/src/templates/ComponentReferenceTemplate.module.scss b/src/templates/ComponentReferenceTemplate.module.scss
@@ -1,4 +1,6 @@
 .componentExample:not(:last-child) {
+  border-bottom: 1px solid var(--color-neutrals-100);
+  padding-bottom: 2rem;
   margin-bottom: 2rem;
 }
 

diff --git a/src/templates/ReferenceTemplate.module.scss b/src/templates/ReferenceTemplate.module.scss
@@ -11,3 +11,9 @@
 .section:not(:last-child) {
   margin-bottom: 2rem;
 }
+
+.sectionTitle {
+  margin-bottom: 1rem;
+  font-size: 1.75rem;
+  font-weight: bold;
+}