Complete polish review of Examples project

marksouthard · Feb 3, 2018 · f67ac27 · f67ac27
1 parent 5ff60fd
commit f67ac27
Show file tree

Hide file tree

Showing 114 changed files with 597 additions and 710 deletions.
diff --git a/README.md b/README.md
@@ -2,16 +2,11 @@
   <img src="https://circleci.com/gh/Shopify/draggable.svg?style=shield&circle-token=bd97f87d63e330e3b4b186ef11d8223889ef925f" title="CircleCI status" alt="CircleCI status">
 </a>
 
-<hr/>
-
 <a href="https://shopify.github.io/draggable" title="Visit Draggable website">
-  <img src="https://user-images.githubusercontent.com/643944/30787041-84ccc1aa-a14e-11e7-982d-972978185636.png" alt="">
+  <img src="https://user-images.githubusercontent.com/643944/35602291-99e2c56e-0605-11e8-847f-95f1f6be1610.jpg" alt="">
 </a>
 
-<hr/>
-
-
-> **Warning:** Draggable is currently in beta
+> **Ready for production!** While Draggable may still be in beta, all existing features are stable and safe for consumption. Draggable will exit beta once all remaining features have been implemented.
 
 Get complete control over drag and drop behaviour with Draggable! Draggable abstracts
 native browser events into a comprehensive API to create a custom drag and drop experience.

diff --git a/examples/README.md b/examples/README.md
@@ -30,7 +30,7 @@ This folder contains the top-level page templates. The project uses Nunjucks for
 There is only one layout template, `views/templates/document.html`, which is extended by all of the `.html` files in the root of `/views`. These root views do the following:
 
 1. Import global components such as `Sidebar` and `PageHeader`
-2. Define the `ViewAttrs` for the view _(Page title, description, etc)_.
+2. Define the `ViewAttr` for the view _(Page title, description, etc)_.
 3. Import and render the content component for that view.
 
 ### `src/styles`

diff --git a/examples/package.json b/examples/package.json
@@ -41,26 +41,26 @@
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",
     "babel-preset-shopify": "^16.2.0",
-    "browser-sync": "^2.23.5",
+    "browser-sync": "^2.23.6",
     "cssnano": "^3.10.0",
     "cssnano-preset-advanced": "^4.0.0-rc.2",
-    "eslint": "^4.16.0",
-    "eslint-plugin-prettier": "^2.5.0",
+    "eslint": "^4.17.0",
+    "eslint-plugin-prettier": "^2.6.0",
     "eslint-plugin-shopify": "^19.0.0",
     "gulp": "gulpjs/gulp.git#4.0",
-    "gulp-cli": "^2.0.0",
+    "gulp-cli": "^2.0.1",
     "gulp-data": "^1.3.1",
     "gulp-htmlmin": "^4.0.0",
     "gulp-nunjucks": "^3.1.1",
     "gulp-postcss": "^7.0.1",
     "gulp-sass": "^3.1.0",
-    "gulp-sourcemaps": "^2.6.3",
+    "gulp-sourcemaps": "^2.6.4",
     "nunjucks": "^3.0.1",
     "prettier": "^1.10.2",
     "prettier-stylelint": "^0.4.2",
     "stylelint": "^8.4.0",
     "stylelint-config-shopify": "^4.0.0",
     "webpack": "^3.10.0",
-    "webpack-bundle-analyzer": "^2.9.2"
+    "webpack-bundle-analyzer": "^2.10.0"
   }
 }
diff --git a/examples/postcss.config.js b/examples/postcss.config.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 module.exports = () => ({
   plugins: {
     autoprefixer: {},
@@ -8,3 +9,4 @@ module.exports = () => ({
     },
   },
 });
+/* eslint-enable no-undef */
diff --git a/examples/src/components/Analytics/index.js b/examples/src/components/Analytics/index.js
@@ -0,0 +1,38 @@
+function gtag() {
+  window.dataLayer.push(arguments); // eslint-disable-line prefer-rest-params
+}
+
+export default class Analytics {
+  constructor(ua) {
+    this.ua = ua;
+  }
+
+  init() {
+    if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') {
+      console.log('🤖 Analytics disabled in local development.');
+      return;
+    }
+
+    this._appendScript()
+      .then(() => {
+        window.dataLayer = window.dataLayer || [];
+
+        gtag('js', new Date());
+        gtag('config', this.ua);
+
+        return window.dataLayer;
+      })
+      .catch((error) => console.warn(error));
+  }
+
+  _appendScript() {
+    return new Promise((resolve, reject) => {
+      const script = document.createElement('script');
+      document.body.appendChild(script);
+      script.onload = resolve;
+      script.onerror = reject;
+      script.async = true;
+      script.src = `https://www.googletagmanager.com/gtag/js?id=${this.ua}`;
+    });
+  }
+}
diff --git a/examples/src/components/Block/Block.scss b/examples/src/components/Block/Block.scss
@@ -3,8 +3,8 @@
 /// Block
 ////
 
-@import 'utilities/shared/functions';
-@import 'utilities/shared/layout';
+@import 'utils/shared/functions';
+@import 'utils/shared/layout';
 
 .BlockWrapper {
   .Block {
@@ -37,3 +37,5 @@
     margin-top: -0.1em;
   }
 }
+
+@import 'variants';
diff --git a/examples/src/components/Block/variants.scss b/examples/src/components/Block/variants.scss
@@ -3,15 +3,15 @@
 /// Block variants
 ////
 
-@import 'utilities/shared/layout';
+@import 'utils/shared/layout';
 @import 'components/Patterns/props';
 
 ///
 /// BlockLayout
 .BlockLayout--typeFlex,
 .BlockLayout--typeFloat {
-  margin-top: -#{get-border(thin)};
-  margin-left: -#{get-border(thin)};
+  margin-top: -(get-border(thin));
+  margin-left: -(get-border(thin));
 
   > .BlockWrapper {
     margin-top: get-border(thin);
@@ -24,8 +24,8 @@
   }
 
   @media screen and (min-width: get-breakpoint(tablet)) {
-    margin-top: -#{get-border()};
-    margin-left: -#{get-border()};
+    margin-top: -(get-border());
+    margin-left: -(get-border());
 
     > .BlockWrapper {
       margin-top: get-border();

diff --git a/examples/src/components/Brand/Brand.html b/examples/src/components/Brand/Brand.html
@@ -1,9 +1,9 @@
 <a href="./" class="Brand" title="Return to Examples index">
   <div class="SvgContainer BrandLogo">
-    {% include './Logo.html' %}
+    {% include 'components/Brand/Logo.html' %}
   </div>
 
   <div class="SvgContainer BrandWordmark">
-    {% include './Wordmark.html' %}
+    {% include 'components/Brand/Wordmark.html' %}
   </div>
 </a>
diff --git a/examples/src/components/Brand/Brand.scss b/examples/src/components/Brand/Brand.scss
@@ -3,10 +3,8 @@
 /// Brand
 ////
 
-@import './keyframes';
-
-$logo-width: 4.6rem;
-$wordmark-width: 17.6rem;
+@import 'keyframes';
+@import 'props';
 
 .Brand {
   cursor: get-cursor(rock);
@@ -21,7 +19,7 @@ $wordmark-width: 17.6rem;
   }
 
   @media screen and (min-width: get-breakpoint(desktop)) {
-    margin-left: -#{get-spacing(tightest)};
+    margin-left: -(get-spacing(tightest));
   }
 }
 
@@ -61,9 +59,9 @@ $wordmark-width: 17.6rem;
 }
 
 // --- Interaction
-.Brand:hover {
+.Brand {
   &:hover {
-    @include logo-hover;
+    @include logo-animation;
   }
 
   &:active {

diff --git a/examples/src/components/Brand/keyframes.scss b/examples/src/components/Brand/keyframes.scss
@@ -3,6 +3,18 @@
 /// Brand keyframes
 ////
 
+@import 'props';
+
+@keyframes logo-outline-bounce {
+  25% {
+    transform: translate(-$logo-bounce-offset, $logo-bounce-offset);
+  }
+
+  75% {
+    transform: translate($logo-bounce-offset, -$logo-bounce-offset);
+  }
+}
+
 @keyframes logo-rainbow-mask {
   0% {
     fill: get-color(coal, dark);
@@ -74,37 +86,3 @@
     fill: get-color(brand, red);
   }
 }
-
-@keyframes logo-outline-bounce {
-  25% {
-    transform: translate(-0.1rem, 0.1rem);
-  }
-
-  75% {
-    transform: translate(0.1rem, -0.1rem);
-  }
-}
-
-///
-/// Animation mixin
-@mixin logo-hover {
-  .Wave--colorMask {
-    animation: logo-rainbow-mask get-duration(slow) get-easing() infinite;
-  }
-
-  .Wave--colorPurple {
-    animation: logo-rainbow-purple get-duration(slow) get-easing() infinite;
-  }
-
-  .Wave--colorRed {
-    animation: logo-rainbow-red get-duration(slow) get-easing() infinite;
-  }
-
-  .Wave--colorOrange {
-    animation: logo-rainbow-orange get-duration(slow) get-easing() infinite;
-  }
-
-  .Hand {
-    animation: logo-outline-bounce get-duration(slow) linear infinite;
-  }
-}
diff --git a/examples/src/components/Brand/props.scss b/examples/src/components/Brand/props.scss
@@ -0,0 +1,30 @@
+////
+/// Components
+/// Brand props
+////
+
+$logo-width: 4.6rem;
+$wordmark-width: 17.6rem;
+$logo-bounce-offset: 0.1rem;
+
+@mixin logo-animation {
+  .Wave--colorMask {
+    animation: logo-rainbow-mask get-duration(slow) get-easing() infinite;
+  }
+
+  .Wave--colorPurple {
+    animation: logo-rainbow-purple get-duration(slow) get-easing() infinite;
+  }
+
+  .Wave--colorRed {
+    animation: logo-rainbow-red get-duration(slow) get-easing() infinite;
+  }
+
+  .Wave--colorOrange {
+    animation: logo-rainbow-orange get-duration(slow) get-easing() infinite;
+  }
+
+  .Hand {
+    animation: logo-outline-bounce get-duration(slow) linear infinite;
+  }
+}
diff --git a/examples/src/components/Document/Analytics.html b/examples/src/components/Document/Analytics.html
diff --git a/examples/src/components/Document/Head.html b/examples/src/components/Document/Head.html
@@ -1,19 +1,17 @@
-{% import './SocialShare.html' as SocialShare %}
-{% import './Analytics.html' as Analytics %}
+{% import 'components/Document/SocialShare.html' as SocialShare %}
 
-{% macro render(ViewAttrs) %}
+{% macro render(ViewAttr) %}
   {% set url = 'https://shopify.github.io/draggable' %}
-  {% set trackingId = 'UA-107063633-1' %}
   {% set siteName = 'Draggable JS Examples' %}
   {% set titleSep = ' | ' %}
 
-  {% set parentFragment = ViewAttrs.parent + titleSep if ViewAttrs.parent %}
-  {% set childFragment = ViewAttrs.child + titleSep if ViewAttrs.child %}
-  {% set title = [parentFragment, childFragment, siteName] %}
+  {% set parentFragment = ViewAttr.parent + titleSep if ViewAttr.parent %}
+  {% set childFragment = ViewAttr.child + titleSep if ViewAttr.child %}
+  {% set titleText = [parentFragment, childFragment, siteName] %}
 
   {% set HeadAttr = {
     siteName: siteName,
-    title: ViewAttrs.subheading,
+    title: ViewAttr.subheading,
     description: 'Draggable is a lightweight, responsive, modern drag and drop JavaScript library – the ideal choice for adding slick native-feeling drag and drop behaviour to your web apps.',
     siteUrl: url,
     socialImg: url + '/assets/img/social/draggable-social.png',
@@ -25,23 +23,20 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
-    <title>{{ title | join('') | trim }}</title>
+    <title>{{ titleText | join('') | trim }}</title>
 
     <meta name="description" content="{{ HeadAttr.description }}">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <meta name="format-detection" content="telephone=no">
 
     {{ SocialShare.render(HeadAttr) }}
+    {% include 'components/Document/Favicon.html' %}
 
-    {% include './Favicon.html' %}
-
-    <link rel="manifest" href="manifest.json">
+    <link rel="manifest" href="{{ url }}/manifest.json">
     <link rel="stylesheet" href="assets/css/examples-app.css">
 
     <script src="assets/js/examples-runtime.js" defer></script>
     <script src="assets/js/examples-vendor.js" defer></script>
     <script src="assets/js/examples-app.js" defer></script>
-
-    {{ Analytics.render(trackingId) }}
   </head>
 {% endmacro %}
diff --git a/examples/src/components/Hamburger/Hamburger.scss b/examples/src/components/Hamburger/Hamburger.scss
@@ -3,9 +3,9 @@
 /// Hamburger
 ////
 
-@import 'utilities/shared/layout';
-@import './props';
-@import './keyframes';
+@import 'utils/shared/layout';
+@import 'keyframes';
+@import 'props';
 
 .Hamburger {
   z-index: get-z-index(hamburger);

diff --git a/examples/src/components/Hamburger/keyframes.scss b/examples/src/components/Hamburger/keyframes.scss
@@ -3,6 +3,8 @@
 /// Hamburger keyframes
 ////
 
+@import 'props';
+
 @keyframes FadeActivator {
   to {
     opacity: 1;

diff --git a/examples/src/components/Handle/DragHandle.scss b/examples/src/components/Handle/DragHandle.scss
@@ -3,7 +3,7 @@
 /// DragHandle
 ////
 
-@import './props';
+@import 'props';
 
 .DragHandle {
   position: relative;

diff --git a/examples/src/components/Handle/NopeHandle.scss b/examples/src/components/Handle/NopeHandle.scss
@@ -3,7 +3,7 @@
 /// NopeHandle
 ////
 
-@import './props';
+@import 'props';
 
 .NopeHandle {
   position: relative;