Merge pull request #79 from newrelic/jerel/css-modules

Convert to CSS Modules everywhere

src/components/BreadcrumbBar.js

@@ -1,14 +1,14 @@
 import React from 'react';
 import { Link } from 'gatsby';
-import './BreadcrumbBar.scss';
+import styles from './BreadcrumbBar.module.scss';
 import Container from './Container';
 import PropTypes from 'prop-types';
 import { link } from '../types';
 
 const BreadcrumbBar = ({ crumbs, duration }) => (
-  <div className="breadcrumbBar">
-    <Container>
-      <ul className="breadcrumbBar-crumbs">
+  <div className={styles.breadcrumbBar}>
+    <Container className={styles.container}>
+      <ul className={styles.crumbs}>
         {crumbs.map((crumb, index) => (
           <li key={index}>
             {crumb.url ? (
@@ -19,7 +19,7 @@ const BreadcrumbBar = ({ crumbs, duration }) => (
           </li>
         ))}
       </ul>
-      {duration && <div className="breadcrumbBar-duration">{duration}</div>}
+      {duration && <div className={styles.duration}>{duration}</div>}
     </Container>
   </div>
 );

src/components/BreadcrumbBar.scss → src/components/BreadcrumbBar.module.scss

@@ -2,15 +2,15 @@
   padding: 1rem 0;
   font-size: 0.9rem;
   width: 100%;
+}
 
-  .u-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.breadcrumbBar-crumbs {
+.crumbs {
   display: flex;
   list-style: none;
   margin: 0;
@@ -39,7 +39,7 @@
   }
 }
 
-.breadcrumbBar-duration {
+.duration {
   color: var(--color-neutrals-600);
 
   &:before {

src/components/CallToAction.js

@@ -1,11 +1,11 @@
 import React from 'react';
-import './CallToAction.scss';
+import styles from './CallToAction.module.scss';
 import PropTypes from 'prop-types';
 
 const CallToAction = ({ step, text, children }) => {
   return (
-    <div className="CallToAction">
-      {step && <div className="CallToAction-step">{step}</div>}
+    <div className={styles.container}>
+      {step && <div className={styles.step}>{step}</div>}
       {text && <h3>{text}</h3>}
       {children}
     </div>

src/components/CallToAction.scss → src/components/CallToAction.module.scss

@@ -1,4 +1,4 @@
-.CallToAction {
+.container {
   font-size: 0.75rem;
   margin: 0 0 5%;
   display: flex;
@@ -39,12 +39,6 @@
     font-size: 0.74rem;
     font-weight: normal;
     padding: 0.5rem 0.75rem;
-    &.CallToAction-button--signUp {
-      width: 23%;
-    }
-    &.CallToAction-button--download {
-      width: 60%;
-    }
   }
 
   form {
@@ -80,7 +74,8 @@
     }
   }
 }
-.CallToAction-step {
+
+.step {
   height: 50px;
   width: 50px;
   border-radius: 50%;

src/components/Container.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-
-import './Container.scss';
+import styles from './Container.module.scss';
 
 const Container = ({ children, className }) => (
-  <div className={cx('u-container', className)}>{children}</div>
+  <div className={cx(styles.container, className)}>{children}</div>
 );
 
 Container.propTypes = {

src/components/Container.scss → src/components/Container.module.scss

@@ -1,4 +1,4 @@
-.u-container {
+.container {
   max-width: 1200px;
   margin: auto;
   box-sizing: border-box;

src/components/ExternalLink.js

@@ -1,12 +1,11 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
 
 const ExternalLink = ({ href, className, children }) => (
   <a
     href={href}
     target="_blank"
-    className={cx('ExternalLink', className)}
+    className={className}
     rel="noopener noreferrer"
   >
     {children}

src/components/Footer.js

@@ -3,20 +3,19 @@ import PropTypes from 'prop-types';
 import { Link } from 'gatsby';
 import Container from './Container';
 import { link } from '../types';
-
-import './Footer.scss';
+import styles from './Footer.module.scss';
 
 const Footer = ({ pages }) => (
-  <footer className="Footer">
-    <Container>
-      <div className="Footer-left">
-        <Link to="/" className="logo Footer-logo" />
-        <div className="Footer-copyright">
+  <footer className={styles.footer}>
+    <Container className={styles.container}>
+      <div className={styles.leftColumn}>
+        <Link to="/" className={`${styles.logo} logo`} />
+        <div className={styles.copyright}>
           Copyright &copy; 2020 New Relic Inc.
         </div>
       </div>
 
-      <nav role="navigation" aria-label="Footer" className="Footer-nav">
+      <nav role="navigation" aria-label="Footer" className={styles.nav}>
         <ul>
           {pages.map((page, i) => (
             <li key={i}>

src/components/Footer.module.scss

@@ -0,0 +1,77 @@
+.footer {
+  --footer-text-color: #7da5a8;
+
+  background-color: var(--color-neutrals-800);
+  color: var(--footer-text-color);
+  padding: 1.5rem 0;
+  margin-top: 10rem;
+}
+
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  @media (max-width: 760px) {
+    justify-content: center;
+  }
+}
+
+.leftColumn {
+  display: flex;
+  align-items: center;
+
+  @media (max-width: 760px) {
+    display: block;
+  }
+}
+
+.logo {
+  width: 195px;
+  min-width: 195px;
+  height: 45px;
+  display: inline-block;
+  background-image: url('../images/developers-logo-footer.svg');
+}
+
+.copyright {
+  font-size: 0.75rem;
+  margin-left: 1rem;
+  padding: 0.75rem 0.5rem;
+  border-left: 1px dotted var(--color-neutrals-700);
+
+  @media (max-width: 760px) {
+    border-left: none;
+    margin-left: 0;
+    padding: 0.5rem;
+  }
+}
+
+.nav {
+  @media (max-width: 760px) {
+    display: none;
+  }
+
+  ul {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+      text-align: center;
+    }
+
+    a {
+      color: var(--footer-text-color);
+      text-decoration: none;
+      font-size: 0.9rem;
+      padding: 0.5rem 0 0.5rem 1rem;
+      display: inline-block;
+    }
+
+    a:hover {
+      color: var(--color-white);
+    }
+  }
+}

src/components/GuideListing/Description.js

@@ -1,11 +1,10 @@
 import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
+import styles from './GuideListing.module.scss';
 
 const Description = ({ children, className }) => {
-  return (
-    <p className={cx('GuideListing-description', className)}>{children}</p>
-  );
+  return <p className={cx(styles.description, className)}>{children}</p>;
 };
 
 Description.propTypes = {

src/components/GuideListing/GuideListing.js

@@ -1,15 +1,14 @@
-import './GuideListing.scss';
-
 import Container from '../Container';
 import Heading from './Heading';
 import Description from './Description';
-import List from '../List';
+import List from './List';
 import PropTypes from 'prop-types';
 import React from 'react';
+import styles from './GuideListing.module.scss';
 
 const GuideListing = ({ children }) => (
-  <div className="GuideListing">
-    <Container>{children}</Container>
+  <div className={styles.guideListing}>
+    <Container className={styles.container}>{children}</Container>
   </div>
 );
 

src/components/GuideListing/GuideListing.scss → src/components/GuideListing/GuideListing.module.scss

@@ -1,27 +1,27 @@
-.GuideListing {
+.guideListing {
   position: relative;
   margin-top: 2rem;
 }
 
-.GuideListing .u-container {
+.container {
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
-.GuideListing-heading {
+.heading {
   font-family: var(--secondary-font-family);
   font-weight: 400;
 }
 
-.GuideListing-description {
+.description {
   max-width: 800px;
   text-align: center;
   margin-bottom: 7.5rem;
   color: var(--color-neutrals-500);
 }
 
-.GuideListing-list {
+.list {
   display: grid;
   grid-template-columns: repeat(3, minmax(260px, 1fr));
   grid-gap: 1rem;

src/components/GuideListing/Heading.js

@@ -1,9 +1,10 @@
 import React from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
+import styles from './GuideListing.module.scss';
 
 const Heading = ({ children, className }) => {
-  return <h1 className={cx('GuideListing-heading', className)}>{children}</h1>;
+  return <h1 className={cx(styles.heading, className)}>{children}</h1>;
 };
 
 Heading.propTypes = {