feat: Extract common styles to a ReferenceTemplate.module.scss

newrelic · Jun 6, 2020 · 8ea4062 · 8ea4062
1 parent 80fdbff
commit 8ea4062
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 53 deletions.
diff --git a/src/templates/ApiDocTemplate.js b/src/templates/ApiDocTemplate.js
@@ -10,7 +10,7 @@ import MethodReference from '../components/MethodReference';
 import Sidebar from '../components/Sidebar';
 import SEO from '../components/Seo';
 import pages from '../data/sidenav.json';
-import styles from './ApiDocTemplate.module.scss';
+import templateStyles from './ReferenceTemplate.module.scss';
 import useApiDoc from '../hooks/useApiDoc';
 
 const ApiDocTemplate = ({ data }) => {
@@ -24,27 +24,29 @@ const ApiDocTemplate = ({ data }) => {
   return (
     <Layout>
       <SEO title={title} description={description} />
-      <Container className={styles.container}>
+      <Container className={templateStyles.container}>
         <Sidebar
-          className={styles.sidebar}
+          className={templateStyles.sidebar}
           pages={pages}
           isOpen={isOpen}
           toggle={() => setIsOpen(!isOpen)}
         />
-        <main className={styles.content}>
+        <main className={templateStyles.content}>
           <h1>{api}</h1>
 
-          <section className={cx(styles.section, styles.description)}>
+          <section
+            className={cx(templateStyles.section, templateStyles.description)}
+          >
             <ReactMarkdown source={apiDescription} />
           </section>
 
-          <section className={styles.section}>
+          <section className={templateStyles.section}>
             <h2>Usage</h2>
             <InlineCodeSnippet language="js">{usage}</InlineCodeSnippet>
           </section>
 
           {methods.length > 0 && (
-            <section className={styles.section}>
+            <section className={templateStyles.section}>
               <h2>API methods</h2>
               {methods.map((method, i) => (
                 <MethodReference key={i} method={method} />

diff --git a/src/templates/ComponentDocTemplate.js b/src/templates/ComponentDocTemplate.js
@@ -13,6 +13,7 @@ import SEO from '../components/Seo';
 import PropList from '../components/PropList';
 import pages from '../data/sidenav.json';
 import styles from './ComponentDocTemplate.module.scss';
+import templateStyles from './ReferenceTemplate.module.scss';
 import useComponentDoc from '../hooks/useComponentDoc';
 
 const previewStyles = {
@@ -39,27 +40,29 @@ const ComponentDocTemplate = ({ data }) => {
   return (
     <Layout>
       <SEO title={title} description={description} />
-      <Container className={styles.container}>
+      <Container className={templateStyles.container}>
         <Sidebar
-          className={styles.sidebar}
+          className={templateStyles.sidebar}
           pages={pages}
           isOpen={isOpen}
           toggle={() => setIsOpen(!isOpen)}
         />
-        <main className={styles.content}>
+        <main className={templateStyles.content}>
           <h1>{component}</h1>
 
-          <section className={cx(styles.section, styles.description)}>
+          <section
+            className={cx(templateStyles.section, templateStyles.description)}
+          >
             <ReactMarkdown source={componentDescription} />
           </section>
 
-          <section className={styles.section}>
+          <section className={templateStyles.section}>
             <h2>Usage</h2>
             <InlineCodeSnippet language="js">{usage}</InlineCodeSnippet>
           </section>
 
           {examples.length > 0 && (
-            <section className={styles.section}>
+            <section className={templateStyles.section}>
               <h2>Examples</h2>
               <div>
                 {examples.map((example, i) => (
@@ -75,13 +78,13 @@ const ComponentDocTemplate = ({ data }) => {
             </section>
           )}
 
-          <section className={styles.section}>
+          <section className={templateStyles.section}>
             <h2>Props</h2>
             <PropList propTypes={propTypes} />
           </section>
 
           {methods.length > 0 && (
-            <section className={styles.section}>
+            <section className={templateStyles.section}>
               <h2>Methods</h2>
               {methods.map((method, i) => (
                 <MethodReference key={i} method={method} />

diff --git a/src/templates/ComponentDocTemplate.module.scss b/src/templates/ComponentDocTemplate.module.scss
@@ -1,45 +1,7 @@
-.container {
-  display: grid;
-  grid-template-columns: auto 3fr;
-  grid-column-gap: 2rem;
-  grid-template-areas: 'sidebar main';
-
-  @media (max-width: 760px) {
-    grid-template-columns: none;
-    grid-template-areas: 'sidebar' 'main';
-  }
-}
-
-.content {
-  grid-area: main;
-}
-
-.sidebar {
-  grid-area: sidebar;
-}
-
 .componentExample:not(:last-child) {
   margin-bottom: 2rem;
 }
 
-.description {
-  border-top: 1px solid var(--color-neutrals-200);
-  margin-top: 0.5rem;
-  padding-top: 0.5rem;
-
-  ul {
-    padding-top: 0.5rem;
-  }
-
-  li {
-    margin: 0;
-  }
-}
-
-.section:not(:last-child) {
-  margin-bottom: 2rem;
-}
-
 .toastManager > div {
   position: fixed;
   top: 0;

diff --git a/src/templates/ApiDocTemplate.module.scss → src/templates/ReferenceTemplate.module.scss b/src/templates/ApiDocTemplate.module.scss → src/templates/ReferenceTemplate.module.scss