Merge pull request Shopify#124 from Shopify/eslint-v19

Fix all linting errors for Examples

examples/.stylelintrc

@@ -9,11 +9,12 @@
     "declaration-property-value-blacklist": null,
     "font-weight-notation": null,
     "function-url-scheme-whitelist": null,
+    "max-nesting-depth": 4,
     "no-duplicate-selectors": null,
     "no-unknown-animations": null,
     "selector-class-pattern": null,
     "selector-id-pattern": null,
-    "selector-max-class": 4,
+    "selector-max-class": 5,
     "selector-max-id": 1,
     "selector-max-type": 2,
     "selector-max-combinators": 3,

examples/package.json

@@ -44,9 +44,9 @@
     "browser-sync": "^2.23.5",
     "cssnano": "^3.10.0",
     "cssnano-preset-advanced": "^4.0.0-rc.2",
-    "eslint": "^4.15.0",
+    "eslint": "^4.16.0",
     "eslint-plugin-prettier": "^2.5.0",
-    "eslint-plugin-shopify": "^18.3.0",
+    "eslint-plugin-shopify": "^19.0.0",
     "gulp": "gulpjs/gulp.git#4.0",
     "gulp-cli": "^2.0.0",
     "gulp-data": "^1.3.1",

examples/src/components/Hamburger/Hamburger.scss

@@ -52,8 +52,8 @@
   &::before,
   &::after {
     content: '';
-    display: block;
     top: 0;
+    display: block;
     transition: background-color get-duration() get-easing();
   }
 

examples/src/components/Plate/index.js

@@ -90,14 +90,12 @@ export default class Plate {
   _translateEachPlate(x, y) {
     for (const plateLevel in this.plates) {
       if (!this.plates.hasOwnProperty(plateLevel)) {
-        return;
-      }
-
-      const translateX = flipSign(x * 2) * translateFactors[plateLevel];
-      const translateY = flipSign(y * 2) * translateFactors[plateLevel];
+        const translateX = flipSign(x * 2) * translateFactors[plateLevel];
+        const translateY = flipSign(y * 2) * translateFactors[plateLevel];
 
-      this.wrapper.style.setProperty(`--${plateLevel}-translate-x`, `${translateX}px`);
-      this.wrapper.style.setProperty(`--${plateLevel}-translate-y`, `${translateY}px`);
+        this.wrapper.style.setProperty(`--${plateLevel}-translate-x`, `${translateX}px`);
+        this.wrapper.style.setProperty(`--${plateLevel}-translate-y`, `${translateY}px`);
+      }
     }
   }
 

examples/src/content/Draggable/DragEvents/index.js

@@ -38,14 +38,14 @@ export default function DragEvents() {
   let headingText;
 
   // --- Draggable events --- //
-  draggable.on('drag:start', evt => {
+  draggable.on('drag:start', (evt) => {
     initialMousePosition = {
       x: evt.sensorEvent.clientX,
       y: evt.sensorEvent.clientY,
     };
   });
 
-  draggable.on('mirror:created', evt => {
+  draggable.on('mirror:created', (evt) => {
     containerRect = evt.sourceContainer.getBoundingClientRect();
     dragRect = evt.originalSource.getBoundingClientRect();
 
@@ -61,7 +61,7 @@ export default function DragEvents() {
     };
   });
 
-  draggable.on('drag:move', evt => {
+  draggable.on('drag:move', (evt) => {
     // Required to help restrict the draggable element to the container
     evt.cancel();
 

examples/src/content/Droppable/OneAndOnly/index.js

@@ -20,11 +20,11 @@ export default function OneAndOnly() {
   let droppableOrigin;
 
   // --- Draggable events --- //
-  droppable.on('drag:start', evt => {
+  droppable.on('drag:start', (evt) => {
     droppableOrigin = evt.originalSource.parentNode.dataset.droppable;
   });
 
-  droppable.on('droppable:over', evt => {
+  droppable.on('droppable:over', (evt) => {
     if (droppableOrigin !== evt.droppable.dataset.droppable) {
       evt.cancel();
     }

examples/src/content/Home/index.js

@@ -17,12 +17,12 @@ export default function Home() {
   const plates = new Plate(container);
 
   // --- Draggable events --- //
-  draggable.on('drag:start', evt => {
+  draggable.on('drag:start', (evt) => {
     plates.setThreshold();
     plates.setInitialMousePosition(evt.sensorEvent);
   });
 
-  draggable.on('drag:move', evt => {
+  draggable.on('drag:move', (evt) => {
     plates.dragWarp(evt.source, evt.sensorEvent);
   });
 

examples/src/content/Plugins/Collidable/index.js

@@ -27,15 +27,15 @@ export default function PluginsCollidable() {
   // --- Draggable events --- //
   droppable.on('collidable:in', ({collidingElement}) => {
     if (collidingElement.classList.contains(wallClass)) {
-      walls.forEach(wall => wall.classList.add('isColliding'));
+      walls.forEach((wall) => wall.classList.add('isColliding'));
     } else {
       collidingElement.classList.add('isColliding');
     }
   });
 
   droppable.on('collidable:out', ({collidingElement}) => {
     if (collidingElement.classList.contains(wallClass)) {
-      walls.forEach(wall => wall.classList.remove('isColliding'));
+      walls.forEach((wall) => wall.classList.remove('isColliding'));
     } else {
       collidingElement.classList.remove('isColliding');
     }

examples/src/content/Plugins/Snappable/index.js

@@ -20,7 +20,7 @@ export default function PluginsSnappable() {
   });
 
   // --- Draggable events --- //
-  swappable.on('drag:start', evt => {
+  swappable.on('drag:start', (evt) => {
     if (evt.originalSource.classList.contains('Block--typeStripes')) {
       evt.cancel();
     }

examples/src/content/Sortable/MultipleContainers/index.js

@@ -29,14 +29,14 @@ export default function MultipleContainers() {
   let lastOverContainer;
 
   // --- Draggable events --- //
-  sortable.on('drag:start', evt => {
+  sortable.on('drag:start', (evt) => {
     currentMediumChildren = sortable.getDraggableElementsForContainer(sortable.containers[1]).length;
     capacityReached = currentMediumChildren === containerTwoCapacity;
     lastOverContainer = evt.sourceContainer;
     containerTwoParent.classList.toggle(Classes.capacity, capacityReached);
   });
 
-  sortable.on('sortable:sort', evt => {
+  sortable.on('sortable:sort', (evt) => {
     if (!capacityReached) {
       return;
     }
@@ -48,7 +48,7 @@ export default function MultipleContainers() {
     }
   });
 
-  sortable.on('sortable:sorted', evt => {
+  sortable.on('sortable:sorted', (evt) => {
     if (lastOverContainer === evt.dragEvent.overContainer) {
       return;
     }

examples/src/styles/reset.scss

@@ -127,7 +127,7 @@ label,
 select,
 summary,
 textarea,
-[role="button"] {
+[role='button'] {
   touch-action: manipulation;
 }
 
@@ -190,11 +190,11 @@ select {
 }
 
 button,
-[role="button"],
-input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button;
+[role='button'],
+input[type='button'],
+input[type='reset'],
+input[type='submit'] {
+  -webkit-appearance: button; // stylelint-disable-line property-no-vendor-prefix
   cursor: pointer;
 }
 
@@ -213,27 +213,27 @@ input {
   line-height: normal;
 }
 
-input[type="radio"],
-input[type="checkbox"] {
+input[type='radio'],
+input[type='checkbox'] {
   box-sizing: border-box;
   padding: 0;
 }
 
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  -webkit-appearance: none;
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
+  -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
   margin: 0;
   height: auto;
 }
 
-input[type="search"] {
-  -webkit-appearance: textfield;
+input[type='search'] {
+  -webkit-appearance: textfield; // stylelint-disable-line property-no-vendor-prefix
   // box-sizing: content-box;
 }
 
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button {
-  -webkit-appearance: none;
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button {
+  -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
 }
 
 fieldset {
@@ -256,8 +256,8 @@ optgroup {
 }
 
 select {
-  -webkit-appearance: none;
-  -moz-appearance: none;
+  -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
+  -moz-appearance: none; // stylelint-disable-line property-no-vendor-prefix
   cursor: pointer;
 }
 
@@ -271,10 +271,10 @@ textarea {
   border-radius: 0;
 }
 
-[tabindex="-1"]:focus {
+[tabindex='-1']:focus {
   // prevent focus outline on elements that cant be accessed via keyboard
   // remove red border for invalid entries
-  outline: none !important;
+  outline: none !important; // stylelint-disable-line declaration-no-important
 }
 
 select:focus {
@@ -288,6 +288,7 @@ button:focus {
   box-shadow: none;
 }
 
+/* stylelint-disable selector-no-vendor-prefix */
 ::-webkit-input-placeholder {
   box-shadow: none;
 }
@@ -300,6 +301,7 @@ button:focus {
 :-ms-input-placeholder {
   box-shadow: none;
 }
+/* stylelint-enable selector-no-vendor-prefix */
 
 ///
 /// Tables

examples/src/styles/utilities/shared/_functions.scss

@@ -30,7 +30,7 @@
 // @return {Color} The modified color.
 @function color-multiply($foreground, $background: null) {
   @if type-of($background) != color {
-    $background: #fff;
+    $background: #ffffff;
   }
 
   @return $foreground * $background / 255;

examples/src/styles/utilities/shared/_layout.scss

@@ -131,7 +131,6 @@
   @if ($image != none or $image != '') {
     background-image: url($image);
   }
-
   background-color: $color;
   background-repeat: no-repeat;
   background-position: center center;