Merge pull request #115 from viljamis/release/3.0.3

Release/3.1.0
arielsalminen · Sep 24, 2018 · 13a153b · 13a153b
2 parents 63fac08 + 7b2aa20
commit 13a153b
Show file tree

Hide file tree

Showing 12 changed files with 11,393 additions and 9,330 deletions.
diff --git a/README.md b/README.md
@@ -49,7 +49,7 @@ The tool is built on top of [Vue.js](https://vuejs.org), [Vue Styleguidist](http
 
 ## Changelog
 
-- `3.0.2` is the latest release.
+- `3.1.0` is the latest release.
 - See [Releases page](https://github.com/viljamis/vue-design-system/releases) for the full changelog.
 
 ## Need more help?

diff --git a/build/build-system.js b/build/build-system.js
@@ -11,7 +11,7 @@ const webpack = require("webpack")
 const config = require("../config")
 const webpackConfig = require("./webpack.system.conf")
 
-const spinner = ora("Building Design System Library...")
+const spinner = ora("Building Design System...")
 spinner.start()
 
 rm(path.join(config.system.assetsRoot, config.system.assetsSubDirectory), err => {
@@ -30,15 +30,18 @@ rm(path.join(config.system.assetsRoot, config.system.assetsSubDirectory), err =>
     )
 
     if (stats.hasErrors()) {
-      console.log(chalk.red("  Design System Library build failed with errors.\n"))
+      console.log(chalk.red("  Design System build failed with errors.\n"))
       process.exit(1)
     }
 
-    console.log(chalk.cyan("  Design System Library build complete.\n"))
+    console.log(chalk.cyan("  Design System build complete.\n"))
     console.log(
       chalk.yellow(
-        "  Tip: You can now publish your library as a private NPM module.\n" +
-          "  Users can import it as an ES6 module: import DesignSystem from 'system'\n"
+        "  Tip: You can now publish the design system as a private NPM module.\n" +
+          "  Users can import it as an ES6 module:\n\n" +
+          "  import system from 'vue-design-system'\n" +
+          "  import 'vue-design-system/dist/system.css'\n\n" +
+          "  Vue.use(system)\n"
       )
     )
   })

diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
@@ -48,13 +48,17 @@ module.exports = {
         include: [resolve("docs"), resolve("src"), resolve("test"), resolve("node_modules/webpack-dev-server/client")],
       },
       {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        test: /\.(png|jpe?g|gif)(\?.*)?$/,
         loader: "url-loader",
         options: {
           limit: 10000,
           name: utils.assetsPath("img/[name].[hash:7].[ext]"),
         },
       },
+      {
+        test: /\.svg$/,
+        loader: "html-loader",
+      },
       {
         test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
         loader: "url-loader",

diff --git a/docs/components/tokens/Color.vue b/docs/components/tokens/Color.vue
@@ -50,28 +50,33 @@ export default {
 --------------------------------------------- */
 
 .colors {
-  display: grid;
-  align-content: stretch;
-  justify-content: left;
-  grid-template-columns:
-    calc(20% - #{$space-base}) calc(20% - #{$space-base}) calc(20% - #{$space-base}) calc(20% - #{$space-base})
-    calc(20% - #{$space-base});
-  grid-column-gap: $space-base;
-  max-width: 1200px;
+  display: block;
   width: 100%;
-  @media (max-width: 1300px) {
-    grid-template-columns: calc(25% - #{$space-base}) calc(25% - #{$space-base}) calc(25% - #{$space-base}) calc(
-        25% - #{$space-base}
-      );
-  }
-  @media (max-width: 1100px) {
-    grid-template-columns: calc(33.333% - #{$space-base}) calc(33.333% - #{$space-base}) calc(33.333% - #{$space-base});
-  }
-  @media (max-width: 900px) {
-    grid-template-columns: calc(50% - #{$space-base}) calc(50% - #{$space-base});
-  }
-  @media (max-width: 400px) {
-    grid-template-columns: 100%;
+  @supports (display: grid) {
+    display: grid;
+    max-width: 1200px;
+    align-content: stretch;
+    justify-content: left;
+    grid-template-columns:
+      calc(20% - #{$space-base}) calc(20% - #{$space-base}) calc(20% - #{$space-base}) calc(20% - #{$space-base})
+      calc(20% - #{$space-base});
+    grid-column-gap: $space-base;
+    @media (max-width: 1300px) {
+      grid-template-columns: calc(25% - #{$space-base}) calc(25% - #{$space-base}) calc(25% - #{$space-base}) calc(
+          25% - #{$space-base}
+        );
+    }
+    @media (max-width: 1100px) {
+      grid-template-columns: calc(33.333% - #{$space-base}) calc(33.333% - #{$space-base}) calc(
+          33.333% - #{$space-base}
+        );
+    }
+    @media (max-width: 900px) {
+      grid-template-columns: calc(50% - #{$space-base}) calc(50% - #{$space-base});
+    }
+    @media (max-width: 400px) {
+      grid-template-columns: 100%;
+    }
   }
 }
 .swatch {
@@ -104,8 +109,10 @@ h3 {
   border-radius: $border-radius-default;
   overflow: hidden;
   text-align: left;
-  float: left;
-  width: 100%;
+  @supports (display: grid) {
+    width: 100%;
+    float: left;
+  }
   @media (max-width: 400px) {
     margin-bottom: $space-base;
   }

diff --git a/docs/docs.styles.scss b/docs/docs.styles.scss
@@ -44,6 +44,7 @@ div[class^="rsg--root"] {
 }
 
 main[class^="rsg--content"] {
+  display: block; /* IE11 fix */
   padding: $space-small $space-x-large;
   @media (max-width: #{$docs-breakpoint}) {
     padding: $space-small $space-base;

diff --git a/docs/utils/activeNav.js b/docs/utils/activeNav.js
@@ -8,7 +8,7 @@ export default {
     clearActiveLinks() {
       const activeLinks = document.querySelectorAll(".vueds-active")
       if (activeLinks) {
-        activeLinks.forEach(function(element) {
+        ;[].forEach.call(activeLinks, function(element) {
           element.classList.remove("vueds-active")
         })
       }
@@ -65,14 +65,14 @@ export default {
         // Cleanup
 
         if (navLinks) {
-          navLinks.forEach(function(element) {
+          ;[].forEach.call(navLinks, function(element) {
             element.removeEventListener("click", self.click.bind(self), false)
             element.addEventListener("click", self.click.bind(self), false)
           })
         }
 
         if (subNavLinks) {
-          subNavLinks.forEach(function(element) {
+          ;[].forEach.call(subNavLinks, function(element) {
             element.removeEventListener("click", self.click.bind(self), false)
             element.addEventListener("click", self.click.bind(self), false)
           })

diff --git a/docs/utils/filterSearch.js b/docs/utils/filterSearch.js
@@ -8,15 +8,15 @@ export default {
     showLinks() {
       const links = document.querySelectorAll("div[class^='rsg--sidebar'] ul ul[class^='rsg--list']")
       if (links) {
-        links.forEach(function(element) {
+        ;[].forEach.call(links, function(element) {
           element.classList.add("vueds-visible")
         })
       }
     },
     hideLinks() {
       const activeLinks = document.querySelectorAll(".vueds-visible")
       if (activeLinks) {
-        activeLinks.forEach(function(element) {
+        ;[].forEach.call(activeLinks, function(element) {
           element.classList.remove("vueds-visible")
         })
       }
@@ -25,7 +25,7 @@ export default {
       const search = document.querySelector("div[class^='rsg--search'] input")
       let writing = false
       if (search) {
-        search.addEventListener("input", () => {
+        search.addEventListener("keydown", () => {
           if (!writing || search.value) {
             writing = true
             if (this.showLinks) {

diff --git a/docs/utils/statusLabels.js b/docs/utils/statusLabels.js
@@ -31,7 +31,7 @@ export default {
         }
 
         if (currentLabels) {
-          currentLabels.forEach(function(element) {
+          ;[].forEach.call(currentLabels, function(element) {
             element.parentNode.removeChild(element)
           })
         }