upgraded next / SASS support

components/DPLAHead/index.js

@@ -67,7 +67,7 @@ const DPLAHead = ({ additionalLinks, pageTitle, seoType }) =>
       <style>{reset}</style>
       <style>{utilStylesheet}</style>
       <style>{accessibility}</style>
-      <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es6,EventSource,Array.prototype.includes,Intl.~locale.en" />
+      <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=default,es6,EventSource,Object.entries,Array.prototype.includes,Intl.~locale.en" />
     </Head>
   </div>;
 

components/MainLayout/components/Footer/Footer.css → components/MainLayout/components/Footer/Footer.scss

@@ -1,10 +1,10 @@
-@value minuitBlue, ebonyClayBlue, linkColor, gray75 from "../../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../../css/breakpoints.css";
-@value sansFont from "../../../../css/typography.css";
+@import "../../../../scss/colors";
+@import "../../../../scss/breakpoints";
+@import "../../../../scss/typography";
 
 .wrapper {
   color: white;
-  background-color: ebonyClayBlue;
+  background-color: $footerLightColor;
   position: relative;
 
   @media print {
@@ -15,14 +15,14 @@
 .footer {
   padding: 2rem 1rem;
   line-height: 1.5;
-  color: gray75;
+  color: $gray75;
   margin: 0 auto;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     padding: 3rem 1rem;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding: 3rem 0;
   }
 
@@ -34,7 +34,7 @@
       text-decoration: underline;
     }
 
-    @media (min-width: largeRem) {
+    @media (min-width: $largeRem) {
       font-size: 1.15rem;
     }
   }
@@ -45,7 +45,7 @@
   &:nth-of-type(n + 3) {
     margin-top: 1rem;
 
-    @media (min-width: smallRem) {
+    @media (min-width: $smallRem) {
       margin-top: 0;
     }
   }
@@ -57,7 +57,7 @@
   color: white;
   margin-bottom: 1rem;
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     font-size: 1.25rem;
   }
 }
@@ -71,31 +71,31 @@
     text-decoration: none;
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     margin-top: 0;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     float: right;
     width: auto;
   }
 }
 
 .smallFooterWrapper {
-  background-color: minuitBlue;
+  background-color: $footerDarkColor;
 }
 
 .smallFooter {
   padding: 2rem 1rem;
   margin: 0 auto;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     display: flex;
     align-items: center;
     justify-content: space-between;
   }
 
-  @media (min-width: largeRem) {
+  @media (min-width: $largeRem) {
     padding: 2rem 0;
   }
 }
@@ -105,7 +105,7 @@
   margin: 0 auto;
   width: 15rem;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     margin: 0;
     width: 18rem;
   }
@@ -115,7 +115,7 @@
   text-align: center;
   margin-top: 2rem;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     margin-top: 0;
   }
 }
@@ -129,7 +129,7 @@
     padding: none;
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     width: 1.5rem;
     height: 1.5rem;
   }

components/MainLayout/components/Footer/FooterPro.js

@@ -5,13 +5,13 @@ import Button from "components/shared/Button";
 
 import { USER_BASE_URL } from "constants/env";
 
-import { classNames, stylesheet } from "./Footer.css";
+import css from "./Footer.scss";
 
 const FooterPro = () =>
-  <div className={`${classNames.footer} site-max-width`}>
+  <div className={`${css.footer} site-max-width`}>
     <div className="row">
-      <div className={`${classNames.linkGroup} col-xs-12 col-sm-6 col-md-3`}>
-        <h2 className={classNames.linkHeader}>About Us</h2>
+      <div className={`${css.linkGroup} col-xs-12 col-sm-6 col-md-3`}>
+        <h2 className={css.linkHeader}>About Us</h2>
         <ul>
           <li>
             <Link as="/about" href="/pro/wp?section=about-dpla-pro">
@@ -35,8 +35,8 @@ const FooterPro = () =>
           </li>
         </ul>
       </div>
-      <div className={`${classNames.linkGroup} col-xs-12 col-sm-6 col-md-3`}>
-        <h2 className={classNames.linkHeader}>Communities</h2>
+      <div className={`${css.linkGroup} col-xs-12 col-sm-6 col-md-3`}>
+        <h2 className={css.linkHeader}>Communities</h2>
         <ul>
           <li>
             <Link as="/hubs" href="/pro/wp/hubs?section=hubs">
@@ -73,8 +73,8 @@ const FooterPro = () =>
           </li>
         </ul>
       </div>
-      <div className={`${classNames.linkGroup} col-xs-6 col-sm-6 col-md-3`}>
-        <h2 className={classNames.linkHeader}>DPLA</h2>
+      <div className={`${css.linkGroup} col-xs-6 col-sm-6 col-md-3`}>
+        <h2 className={css.linkHeader}>DPLA</h2>
         <ul>
           <li>
             <Link href={USER_BASE_URL}>
@@ -112,7 +112,7 @@ const FooterPro = () =>
         <Button
           type="primary"
           size="large"
-          className={classNames.donateButton}
+          className={css.donateButton}
           url="/donate"
         >
           Donate

components/MainLayout/components/Footer/FooterUser.js

@@ -5,13 +5,13 @@ import Button from "components/shared/Button";
 
 import { PRO_BASE_URL } from "constants/env";
 
-import { classNames, stylesheet } from "./Footer.css";
+import css from "./Footer.scss";
 
 const FooterUser = () =>
-  <div className={`${classNames.footer} site-max-width`}>
+  <div className={`${css.footer} site-max-width`}>
     <div className="row">
-      <div className={`${classNames.linkGroup} col-xs-6 col-sm-4 col-md-3`}>
-        <h2 className={classNames.linkHeader}>DPLA</h2>
+      <div className={`${css.linkGroup} col-xs-6 col-sm-4 col-md-3`}>
+        <h2 className={css.linkHeader}>DPLA</h2>
         <ul>
           <li>
             <Link
@@ -51,8 +51,8 @@ const FooterUser = () =>
           </li>
         </ul>
       </div>
-      <div className={`${classNames.linkGroup} col-xs-6 col-sm-4 col-md-3`}>
-        <h2 className={classNames.linkHeader}>Tools</h2>
+      <div className={`${css.linkGroup} col-xs-6 col-sm-4 col-md-3`}>
+        <h2 className={css.linkHeader}>Tools</h2>
         <ul>
           <li>
             <Link href="/primary-source-sets">
@@ -81,8 +81,8 @@ const FooterUser = () =>
           </li>
         </ul>
       </div>
-      <div className={`${classNames.linkGroup} col-xs-6 col-sm-4 col-md-3`}>
-        <h2 className={classNames.linkHeader}>DPLA Pro</h2>
+      <div className={`${css.linkGroup} col-xs-6 col-sm-4 col-md-3`}>
+        <h2 className={css.linkHeader}>DPLA Pro</h2>
         <ul>
           <li>
             <Link href={PRO_BASE_URL}>
@@ -135,7 +135,7 @@ const FooterUser = () =>
         <Button
           type="primary"
           size="large"
-          className={classNames.donateButton}
+          className={css.donateButton}
           url="/donate"
         >
           Donate

components/MainLayout/components/Footer/index.js

@@ -6,7 +6,7 @@ import FooterUser from "./FooterUser";
 
 import { SITE_ENV } from "constants/env";
 
-import { classNames, stylesheet } from "./Footer.css";
+import css from "./Footer.scss";
 
 const logo = "/static/images/dpla-logo.svg";
 const fbIcon = "/static/images/facebook.svg";
@@ -16,78 +16,57 @@ const tumblrIcon = "/static/images/tumblr.svg";
 const twitterIcon = "/static/images/twitter.svg";
 
 const Footer = () =>
-  <footer className={classNames.wrapper}>
+  <footer className={css.wrapper}>
     {SITE_ENV === "user" && <FooterUser />}
     {SITE_ENV === "pro" && <FooterPro />}
-    <div className={classNames.smallFooterWrapper}>
-      <div className={`${classNames.smallFooter} site-max-width`}>
+    <div className={css.smallFooterWrapper}>
+      <div className={`${css.smallFooter} site-max-width`}>
         <Link href="/">
-          <a><img className={classNames.logo} alt="DPLA Home" src={logo} /></a>
+          <a><img className={css.logo} alt="DPLA Home" src={logo} /></a>
         </Link>
-        <div className={classNames.socialIcons}>
+        <div className={css.socialIcons}>
           <a
             href="https://www.facebook.com/digitalpubliclibraryofamerica"
             title="Facebook"
             rel="noopener noreferrer"
             target="_blank"
           >
-            <img
-              className={classNames.socialButton}
-              alt="Facebook"
-              src={fbIcon}
-            />
+            <img className={css.socialButton} alt="Facebook" src={fbIcon} />
           </a>
           <a
             href="https://www.instagram.com/digpublib/"
             title="Instagram"
             rel="noopener noreferrer"
             target="_blank"
           >
-            <img
-              className={classNames.socialButton}
-              alt="Instagram"
-              src={igIcon}
-            />
+            <img className={css.socialButton} alt="Instagram" src={igIcon} />
           </a>
           <a
             href="https://dp.la/info/feed/"
             title="RSS Feed"
             rel="noopener noreferrer"
             target="_blank"
           >
-            <img
-              className={classNames.socialButton}
-              alt="RSS Feed"
-              src={rssIcon}
-            />
+            <img className={css.socialButton} alt="RSS Feed" src={rssIcon} />
           </a>
           <a
             href="http://digitalpubliclibraryofamerica.tumblr.com/"
             title="Tumblr"
             rel="noopener noreferrer"
             target="_blank"
           >
-            <img
-              className={classNames.socialButton}
-              alt="Tumblr"
-              src={tumblrIcon}
-            />
+            <img className={css.socialButton} alt="Tumblr" src={tumblrIcon} />
           </a>
           <a
             href="https://twitter.com/dpla"
             title="Twitter"
             rel="noopener noreferrer"
             target="_blank"
           >
-            <img
-              className={classNames.socialButton}
-              alt="Twitter"
-              src={twitterIcon}
-            />
+            <img className={css.socialButton} alt="Twitter" src={twitterIcon} />
           </a>
         </div>
       </div>
     </div>
-    <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
   </footer>;
 export default Footer;

components/MainLayout/components/GlobalHeader/index.js

@@ -3,28 +3,24 @@ import Link from "next/link";
 import NavigationUser from "../shared/NavigationUser";
 import NavigationPro from "../shared/NavigationPro";
 
-import {
-  stylesheet as desktopStylesheet,
-  classNames as desktopClassNames
-} from "../shared/DesktopStyles.css";
+import css from "../shared/DesktopStyles.scss";
 
 import { SITE_ENV } from "constants/env";
 
 const GlobalHeader = ({ isHome }) =>
-  <div className={desktopClassNames.header}>
+  <div className={css.header}>
     {SITE_ENV !== "pro" &&
       <NavigationUser
-        className={`${desktopClassNames.linksContainer} site-max-width`}
-        classNames={desktopClassNames}
+        className={`${css.linksContainer} site-max-width`}
+        css={css}
         isHome={isHome}
       />}
     {SITE_ENV === "pro" &&
       <NavigationPro
-        className={`${desktopClassNames.linksContainer} site-max-width`}
-        classNames={desktopClassNames}
+        className={`${css.linksContainer} site-max-width`}
+        css={css}
         isHome={isHome}
       />}
-    <style dangerouslySetInnerHTML={{ __html: desktopStylesheet }} />
   </div>;
 
 export default GlobalHeader;