upgraded next / SASS support (#803)

* 👾 hello world postcss + sass \o/ * 👾 header and footer in scss * 👾 added scss folder * 👾 removed comments * 👾 object.entries polyfill for ie11 * 👾 remove onAppUpdated since it is deprecated in next5 * 👾 refactored error, pages, some components * 👾 done with utils.css * 👾 a whole new batch of migrated css * 👾 another batch of migrations * 👾 refresh? * 👾 back with lint * 👾 utilfunctions is back * 👾 removed titlecase (unused) * 👾 test is back * 👾 selenium lib is back * 👾 with source maps / minor fixes / no extra packages * 👾 upgraded react-slick / minor fixes * 👾 added scss linter * 👾 fixed precommit hook * 👾 fixed precommit hook * 👾 linted all scss * 👾 removed stylelint-config-standard because hugomrdias/prettier-stylelint#8 * 👾 fixed remnant css var / fixed breadcrumb alignment * 👾 version bump * 👾 added yarn step to analyzer * 👾 with next bundle analyzer
dpla · Apr 13, 2018 · 10e7a2d · 10e7a2d
1 parent 489e711
commit 10e7a2d
Show file tree

Hide file tree

Showing 217 changed files with 3,270 additions and 4,921 deletions.
diff --git a/.babelrc b/.babelrc
@@ -13,6 +13,7 @@
           "utilFunctions": "./utilFunctions",
           "shared": "./components/shared",
           "constants": "./constants",
+          "stylesheets": "./stylesheets",
           "components": "./components"
         }
       }

diff --git a/.stylelintrc b/.stylelintrc
@@ -0,0 +1,133 @@
+{
+  "rules": {
+    "at-rule-no-unknown": true,
+    "block-no-empty": true,
+    "color-no-invalid-hex": true,
+    "comment-no-empty": true,
+    "declaration-block-no-duplicate-properties": [
+      true,
+      {
+        ignore: ["consecutive-duplicates-with-different-values"]
+      }
+    ],
+    "declaration-block-no-shorthand-property-overrides": true,
+    "font-family-no-duplicate-names": true,
+    "function-calc-no-unspaced-operator": true,
+    "function-linear-gradient-no-nonstandard-direction": true,
+    "keyframe-declaration-no-important": true,
+    "media-feature-name-no-unknown": true,
+    "no-descending-specificity": true,
+    "no-duplicate-selectors": true,
+    "no-empty-source": true,
+    "no-extra-semicolons": true,
+    "no-invalid-double-slash-comments": true,
+    "property-no-unknown": true,
+    "selector-pseudo-class-no-unknown": [true, {ignore: ["global"]}],
+    "selector-pseudo-element-no-unknown": true,
+    "selector-type-no-unknown": true,
+    "string-no-newline": true,
+    "unit-no-unknown": true,
+    "at-rule-empty-line-before": [ "always", {
+      except: [
+        "blockless-after-same-name-blockless",
+        "first-nested",
+      ],
+      ignore: ["after-comment"],
+    } ],
+    "at-rule-name-case": "lower",
+    "at-rule-name-space-after": "always-single-line",
+    "at-rule-semicolon-newline-after": "always",
+    "block-closing-brace-empty-line-before": "never",
+    "block-closing-brace-newline-after": "always",
+    "block-closing-brace-newline-before": "always-multi-line",
+    "block-closing-brace-space-before": "always-single-line",
+    "block-opening-brace-newline-after": "always-multi-line",
+    "block-opening-brace-space-after": "always-single-line",
+    "block-opening-brace-space-before": "always",
+    "color-hex-case": "lower",
+    "color-hex-length": "short",
+    "comment-empty-line-before": [ "always", {
+      except: ["first-nested"],
+      ignore: ["stylelint-commands"],
+    } ],
+    "comment-whitespace-inside": "always",
+    "custom-property-empty-line-before": [ "always", {
+      except: [
+        "after-custom-property",
+        "first-nested",
+      ],
+      ignore: [
+        "after-comment",
+        "inside-single-line-block",
+      ],
+    } ],
+    "declaration-bang-space-after": "never",
+    "declaration-bang-space-before": "always",
+    "declaration-block-semicolon-newline-after": "always-multi-line",
+    "declaration-block-semicolon-space-after": "always-single-line",
+    "declaration-block-semicolon-space-before": "never",
+    "declaration-block-single-line-max-declarations": 1,
+    "declaration-block-trailing-semicolon": "always",
+    "declaration-colon-newline-after": "always-multi-line",
+    "declaration-colon-space-after": "always-single-line",
+    "declaration-colon-space-before": "never",
+    "declaration-empty-line-before": [ "always", {
+      except: [
+        "after-declaration",
+        "first-nested",
+      ],
+      ignore: [
+        "after-comment",
+        "inside-single-line-block",
+      ],
+    } ],
+    "function-comma-newline-after": "always-multi-line",
+    "function-comma-space-after": "always-single-line",
+    "function-comma-space-before": "never",
+    "function-max-empty-lines": 0,
+    "function-name-case": "lower",
+    "function-parentheses-newline-inside": "always-multi-line",
+    "function-parentheses-space-inside": "never-single-line",
+    "function-whitespace-after": "always",
+    "indentation": 2,
+    "length-zero-no-unit": true,
+    "max-empty-lines": 1,
+    "media-feature-colon-space-after": "always",
+    "media-feature-colon-space-before": "never",
+    "media-feature-name-case": "lower",
+    "media-feature-parentheses-space-inside": "never",
+    "media-feature-range-operator-space-after": "always",
+    "media-feature-range-operator-space-before": "always",
+    "media-query-list-comma-newline-after": "always-multi-line",
+    "media-query-list-comma-space-after": "always-single-line",
+    "media-query-list-comma-space-before": "never",
+    "no-eol-whitespace": true,
+    "no-missing-end-of-source-newline": true,
+    "number-leading-zero": "always",
+    "number-no-trailing-zeros": true,
+    "property-case": "lower",
+    "rule-empty-line-before": [ "always-multi-line", {
+      except: ["first-nested"],
+      ignore: ["after-comment"],
+    } ],
+    "selector-attribute-brackets-space-inside": "never",
+    "selector-attribute-operator-space-after": "never",
+    "selector-attribute-operator-space-before": "never",
+    "selector-combinator-space-after": "always",
+    "selector-combinator-space-before": "always",
+    "selector-descendant-combinator-no-non-space": true,
+    "selector-list-comma-newline-after": "always",
+    "selector-list-comma-space-before": "never",
+    "selector-max-empty-lines": 0,
+    "selector-pseudo-class-case": "lower",
+    "selector-pseudo-class-parentheses-space-inside": "never",
+    "selector-pseudo-element-case": "lower",
+    "selector-pseudo-element-colon-notation": "double",
+    "selector-type-case": "lower",
+    "unit-case": "lower",
+    "value-list-comma-newline-after": "always-multi-line",
+    "value-list-comma-space-after": "always-single-line",
+    "value-list-comma-space-before": "never",
+    "value-list-max-empty-lines": 0,
+  },
+}
diff --git a/...actComponents/ContactForm/ContactForm.css → ...ctComponents/ContactForm/ContactForm.scss b/...actComponents/ContactForm/ContactForm.css → ...ctComponents/ContactForm/ContactForm.scss
@@ -1,6 +1,6 @@
-@value linkColor, formLabelColor, errorColor from "../../../css/colors.css";
-@value smallRem, mediumRem, largeRem from "../../../css/breakpoints.css";
-@value monoFont, serifFont, sansFont from "../../../css/typography.css";
+@import "stylesheets/colors";
+@import "stylesheets/breakpoints";
+@import "stylesheets/typography";
 
 .contactForm {
   margin-top: 2rem;
@@ -19,8 +19,8 @@
     font-weight: bold;
     margin: 0 0 1rem;
     position: relative;
-    color: formLabelColor;
-  
+    color: $formLabelColor;
+
     & > span {
       display: block;
       margin: 0 0 0.25rem 0.5rem;
@@ -37,14 +37,14 @@
     resize: none;
   }
 
-  & input[type=email], & input[type=text], & textarea {
+  & input[type="email"], & input[type="text"], & textarea {
     width: 100%;
-    border: 0.075rem solid formLabelColor;
+    border: 0.075rem solid $formLabelColor;
     padding: 1.5rem 0.25rem 0.5rem 0.5rem;
     border-radius: 0.25rem;
   }
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     margin-top: 0;
   }
 }
@@ -58,18 +58,18 @@
 }
 
 .error {
-  color: errorColor;
+  color: $errorColor;
   display: inline-block;
   margin-left: 0.5rem;
 }
 
 .header {
-  font-family: serifFont;
+  font-family: $serifFont;
   font-weight: normal;
   font-size: 2rem;
   margin-bottom: 1rem;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     font-size: 3rem;
     margin-bottom: 3rem;
   }
@@ -80,7 +80,7 @@
   margin-bottom: 2rem;
   line-height: 1.25;
 
-  @media (min-width: mediumRem) {
+  @media (min-width: $mediumRem) {
     font-size: 1.25rem;
   }
 }
@@ -92,4 +92,3 @@
   width: 100%;
   margin: 18px 0;
 }
-
diff --git a/components/ContactComponents/ContactForm/index.js b/components/ContactComponents/ContactForm/index.js
@@ -4,7 +4,7 @@ import Select from "react-select";
 
 import Button from "shared/Button";
 
-import { classNames, stylesheet } from "./ContactForm.css";
+import css from "./ContactForm.scss";
 
 class ContactForm extends React.Component {
   state = {
@@ -155,10 +155,10 @@ class ContactForm extends React.Component {
       onClick: this.activateRequired
     };
     return (
-      <div className={classNames.contactForm}>
+      <div className={css.contactForm}>
         {!this.state.isSent &&
           <div>
-            <p className={classNames.instructions}>
+            <p className={css.instructions}>
               We would love to hear from you! Please fill out this form and we
               will
               get in touch with you shortly.
@@ -203,7 +203,7 @@ class ContactForm extends React.Component {
                 />
               </label>
               <label htmlFor="contact-subject">
-                <span className={classNames.notFixed}>
+                <span className={css.notFixed}>
                   Subject (required)
                 </span>
                 <Select
@@ -257,7 +257,7 @@ class ContactForm extends React.Component {
                 type="checkbox"
                 name="i_prefer_usps_mail"
                 value="1"
-                className={classNames.miel}
+                className={css.miel}
                 tabIndex="-1"
                 autoComplete="off"
               />
@@ -269,7 +269,7 @@ class ContactForm extends React.Component {
                 {this.state.isSending &&
                   <Button
                     type="secondary"
-                    className={classNames.disabledButton}
+                    className={css.disabledButton}
                     live="assertive"
                   >
                     Sending message…
@@ -279,12 +279,11 @@ class ContactForm extends React.Component {
           </div>}
         {this.state.isSent &&
           <div aria-live="assertive">
-            <h1 className={classNames.header}>Thank you!</h1>
-            <p className={classNames.instructions}>
+            <h1 className={css.header}>Thank you!</h1>
+            <p className={css.instructions}>
               A DPLA staff member will contact you soon.
             </p>
           </div>}
-        <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
       </div>
     );
   }

diff --git a/components/ContactComponents/MoreWaysToContact/MoreWaysToContact.css b/components/ContactComponents/MoreWaysToContact/MoreWaysToContact.css