Merge pull request #454 from Shopify/examples-lint

🎨 [Lint] Cleaning up /examples

Author: beefchimi

examples/.eslintrc.js

@@ -1,10 +1,11 @@
+/* eslint-env node */
 module.exports = {
   extends: ['plugin:shopify/esnext', 'plugin:shopify/webpack', 'plugin:shopify/prettier'],
   globals: {},
   rules: {
     'shopify/jsx-no-complex-expressions': 'off',
     'eslint-comments/no-unlimited-disable': 0,
-    'import/no-default-export': ['error'],
+    // 'import/no-default-export': ['error'],
     'lines-around-comment': [
       'error',
       {
@@ -16,11 +17,13 @@ module.exports = {
     'no-negated-condition': 'off',
     // We are intentionally keeping `TODO` comments until a stable release
     'no-warning-comments': 'off',
+    'import/no-cycle': 'off',
     // TODO: Disabling for now, but we will want to re-enable in the future.
     'import/no-default-export': 'off',
-    'import/no-cycle': 'off',
   },
   env: {
     browser: true,
   },
+  // Required, else eslint will look at the parent config
+  root: true,
 };

examples/.stylelintrc

@@ -1,19 +1,18 @@
-
 {
   "extends": [
     "stylelint-config-shopify/prettier"
   ],
   "rules": {
-    'shopify/content-no-strings': true,
-    'scss/at-if-no-null': null,
+    "shopify/content-no-strings": true,
+    "scss/at-if-no-null": null,
     "scss/partial-no-import": null,
     "color-no-hex": null,
     "comment-empty-line-before": null,
     "scss/double-slash-comment-empty-line-before": null,
-    'declaration-block-no-redundant-longhand-properties': [
+    "declaration-block-no-redundant-longhand-properties": [
       true,
       {
-        ignoreShorthands: ['/^grid.*/'],
+        ignoreShorthands: ["/^grid.*/"],
       },
     ],
     "declaration-property-value-blacklist": null,

examples/src/components/Block/variants.scss

@@ -159,6 +159,7 @@
 
 ///
 /// Collidable
+// stylelint-disable-next-line no-duplicate-selectors
 .Block--typeStripes {
   // should be a native Draggable class name
   &.isColliding {

examples/src/components/Brand/Brand.scss

@@ -59,11 +59,13 @@
 }
 
 // --- Interaction
+// stylelint-disable-next-line no-duplicate-selectors
 .Brand {
   &:hover {
     @include logo-animation;
   }
 
+  // stylelint-disable-next-line no-duplicate-selectors
   &:active {
     .Wave--colorMask,
     .Wave--colorPurple,

examples/src/components/Button/Button.scss

@@ -15,9 +15,7 @@
   color: get-color(coal, dark);
   background-color: white;
   border: 0.4rem solid get-color(coal, dark);
-  transition:
-    color get-duration() get-easing(),
-    background-color get-duration() get-easing(),
+  transition: color get-duration() get-easing(), background-color get-duration() get-easing(),
     border-color get-duration() get-easing();
 
   @media screen and (min-width: get-breakpoint(tablet)) {

examples/src/components/Main/Main.scss

@@ -19,11 +19,7 @@
   }
 
   @media screen and (min-width: get-breakpoint(desktop)) {
-    padding:
-      get-spacing(fat)
-      get-spacing(fattest)
-      get-spacing(fat)
-      $main-padding-left-desktop;
+    padding: get-spacing(fat) get-spacing(fattest) get-spacing(fat) $main-padding-left-desktop;
   }
 }
 

examples/src/components/Page/Page.scss

@@ -34,7 +34,7 @@ body {
 
     &::before {
       top: 0;
-      box-shadow: 0 #{-(get-spacing(fattest))} 0 get-spacing(fattest) get-color(coal, dark);
+      box-shadow: 0 -#{get-spacing(fattest)} 0 get-spacing(fattest) get-color(coal, dark);
     }
 
     &::after {

examples/src/components/PaperStack/PaperStack.scss

@@ -69,7 +69,7 @@
 
 ///
 /// Layout
-.PaperStackItem:nth-child(1n+2) {
+.PaperStackItem:nth-child(1n + 2) {
   .PaperStackContent::after {
     content: '';
     position: absolute;
@@ -93,6 +93,7 @@
   }
 }
 
+// stylelint-disable-next-line no-duplicate-selectors
 .PaperStackItem {
   @for $i from 1 through $paper-stack-item-count {
     &:nth-child(#{$i}) {

examples/src/components/PaperStack/props.scss

@@ -9,9 +9,7 @@ $paper-stack-item-count: 4;
 ///
 /// Size calc functions
 @function paper-stack-height($height, $spacing) {
-  @return $height - (
-    ($spacing / 2) * ($paper-stack-item-count - 1)
-  );
+  @return $height - (($spacing / 2) * ($paper-stack-item-count - 1));
 }
 
 ///
@@ -79,18 +77,10 @@ $paper-stack-shadow: (
 
 $paper-stack: (
   height: (
-    base: paper-stack-height(
-      paper-stack-item(height),
-      paper-stack-item(spacing)
-    ),
-    tablet: paper-stack-height(
-      paper-stack-item(height, tablet),
-      paper-stack-item(spacing, tablet)
-    ),
-    desktop: paper-stack-height(
-      paper-stack-item(height, desktop),
-      paper-stack-item(spacing, desktop)
-    ),
+    base: paper-stack-height(paper-stack-item(height), paper-stack-item(spacing)),
+    tablet: paper-stack-height(paper-stack-item(height, tablet), paper-stack-item(spacing, tablet)),
+    desktop:
+      paper-stack-height(paper-stack-item(height, desktop), paper-stack-item(spacing, desktop)),
   ),
 );
 
@@ -101,10 +91,8 @@ $paper-stack: (
 ///
 /// Mixins
 @mixin paper-stack-item-offset($breakpoint: $threads-default-value) {
-  $adjusted-top-offset: -(
-    (paper-stack-item(width, $breakpoint) / $paper-stack-item-count) +
-    (paper-stack-item(spacing, $breakpoint) / 2)
-  );
+  $adjusted-top-offset: -((paper-stack-item(width, $breakpoint) / $paper-stack-item-count) +
+        (paper-stack-item(spacing, $breakpoint) / 2));
 
   @for $i from 1 through $paper-stack-item-count {
     &:nth-child(#{$i}),

examples/src/components/PaperStack/variants.scss

@@ -23,10 +23,8 @@
     color: get-color(coal, dark);
     background-color: white;
     border-color: currentColor;
-    transition:
-      color get-duration(fast) get-easing(),
-      background-color get-duration(fast) get-easing(),
-      transform get-duration() get-easing();
+    transition: color get-duration(fast) get-easing(),
+      background-color get-duration(fast) get-easing(), transform get-duration() get-easing();
   }
 
   // interaction
@@ -37,9 +35,7 @@
       transform: paper-stack-item(transform) translateY(get-spacing(tightest));
 
       &::after {
-        transform: translateY(
-          -(get-spacing(tightest))
-        );
+        transform: translateY(-(get-spacing(tightest)));
       }
     }
   }