Merge pull request #131 from viljamis/release/3.5.6

Release/3.5.6
arielsalminen · Oct 25, 2018 · 1988c09 · 1988c09
2 parents 56ae824 + f3f5308
commit 1988c09
Show file tree

Hide file tree

Showing 27 changed files with 1,413 additions and 1,457 deletions.
diff --git a/.prettierrc b/.prettierrc
@@ -1,5 +1,5 @@
 {
-  "printWidth": 120,
+  "printWidth": 100,
   "singleQuote": false,
   "trailingComma": "es5",
   "bracketSpacing": true,

diff --git a/README.md b/README.md
@@ -52,7 +52,7 @@ The tool is built on top of [Vue.js](https://vuejs.org), [Vue Styleguidist](http
 
 ## Changelog
 
-- `3.5.5` is the latest release.
+- `3.5.6` 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/check-versions.js b/build/check-versions.js
@@ -32,7 +32,11 @@ module.exports = function() {
     const mod = versionRequirements[i]
     if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
       warnings.push(
-        mod.name + ": " + chalk.red(mod.currentVersion) + " should be " + chalk.green(mod.versionRequirement)
+        mod.name +
+          ": " +
+          chalk.red(mod.currentVersion) +
+          " should be " +
+          chalk.green(mod.versionRequirement)
       )
     }
   }

diff --git a/build/utils.js b/build/utils.js
@@ -6,7 +6,9 @@ const packageConfig = require("../package.json")
 
 exports.assetsPath = function(_path) {
   const assetsSubDirectory =
-    process.env.NODE_ENV === "production" ? config.build.assetsSubDirectory : config.dev.assetsSubDirectory
+    process.env.NODE_ENV === "production"
+      ? config.build.assetsSubDirectory
+      : config.dev.assetsSubDirectory
   return path.posix.join(assetsSubDirectory, _path)
 }
 
@@ -80,7 +82,9 @@ exports.cssLoaders = function(options) {
   return {
     css: generateLoaders(),
     postcss: generateLoaders(),
-    sass: generateLoaders("sass", Object.assign({ indentedSyntax: true }, sassOptions)).concat(sassResourcesConfig),
+    sass: generateLoaders("sass", Object.assign({ indentedSyntax: true }, sassOptions)).concat(
+      sassResourcesConfig
+    ),
     scss: generateLoaders("sass", sassOptions).concat(sassResourcesConfig),
   }
 }

diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
@@ -18,7 +18,10 @@ module.exports = {
   output: {
     path: config.build.assetsRoot,
     filename: "[name].js",
-    publicPath: process.env.NODE_ENV === "production" ? config.build.assetsPublicPath : config.dev.assetsPublicPath,
+    publicPath:
+      process.env.NODE_ENV === "production"
+        ? config.build.assetsPublicPath
+        : config.dev.assetsPublicPath,
   },
   resolve: {
     extensions: [".js", ".vue", ".json"],
@@ -45,7 +48,12 @@ module.exports = {
       {
         test: /\.js$/,
         loader: "babel-loader",
-        include: [resolve("docs"), resolve("src"), resolve("test"), resolve("node_modules/webpack-dev-server/client")],
+        include: [
+          resolve("docs"),
+          resolve("src"),
+          resolve("test"),
+          resolve("node_modules/webpack-dev-server/client"),
+        ],
       },
       {
         test: /\.(png|jpe?g|gif)(\?.*)?$/,

diff --git a/config/docs.config.js b/config/docs.config.js
@@ -39,7 +39,10 @@ module.exports = {
   /**
    * We’re defining below JS and SCSS requires for the documentation.
    */
-  require: [path.join(__dirname, "../docs/docs.helper.js"), path.join(__dirname, "../docs/docs.styles.scss")],
+  require: [
+    path.join(__dirname, "../docs/docs.helper.js"),
+    path.join(__dirname, "../docs/docs.styles.scss"),
+  ],
   /**
    * Enabling the following option splits sections into separate views.
    */

diff --git a/docs/components/status/Components.vue b/docs/components/status/Components.vue
@@ -2,19 +2,19 @@
   <div class="component-status">
     <ul class="status-list">
       <li>
-        <Icon name="ready" fill="#7cb518" size="small" />
+        <Icon name="ready" fill="#7cb518" size="small"/>
         <p>Ready</p>
       </li>
       <li>
-        <Icon name="review" :fill="tokens.color_ucla_gold.value" size="small" />
+        <Icon name="review" :fill="tokens.color_ucla_gold.value" size="small"/>
         <p>Under review</p>
       </li>
       <li>
-        <Icon name="deprecated" :fill="tokens.color_vermilion.value" size="small" />
-      <p>Deprecated</p>
+        <Icon name="deprecated" :fill="tokens.color_vermilion.value" size="small"/>
+        <p>Deprecated</p>
       </li>
       <li>
-        <Icon name="prototype" :fill="tokens.color_bleu_de_france.value" size="small" />
+        <Icon name="prototype" :fill="tokens.color_bleu_de_france.value" size="small"/>
         <p>Prototype</p>
       </li>
       <li>
@@ -36,22 +36,13 @@
       <tbody>
         <tr v-for="(component, index) in components" :key="index" class="component">
           <td v-if="component.name">
-            <code class="name">
-              {{component.name}}
-            </code>
+            <code class="name">{{component.name}}</code>
           </td>
           <td v-else>N/A</td>
-          <td v-if="component.release">
-            {{component.release}}
-          </td>
+          <td v-if="component.release">{{component.release}}</td>
           <td v-else>N/A</td>
           <td v-if="component.status">
-            <Icon
-              v-if="component.status === 'ready'"
-              name="ready"
-              fill="#7cb518"
-              size="small"
-            />
+            <Icon v-if="component.status === 'ready'" name="ready" fill="#7cb518" size="small"/>
             <Icon
               v-if="component.status === 'under-review' || component.status === 'review'"
               name="review"

diff --git a/docs/components/tokens/All.vue b/docs/components/tokens/All.vue
@@ -15,12 +15,22 @@
           </td>
           <td v-else>N/A</td>
           <td v-if="token.value">
-            <div v-if="token.type === 'color'" class="example color" :style="{ backgroundColor: token.value }" />
-            <div v-if="token.category === 'border-radius'" class="example border-radius" :style="{ borderRadius: token.value }" />
-            <div v-if="token.category === 'box-shadow'" class="example box-shadow" :style="{ boxShadow: token.value }" />
-            <code class="type">
-              {{token.value}}
-            </code>
+            <div
+              v-if="token.type === 'color'"
+              class="example color"
+              :style="{ backgroundColor: token.value }"
+            />
+            <div
+              v-if="token.category === 'border-radius'"
+              class="example border-radius"
+              :style="{ borderRadius: token.value }"
+            />
+            <div
+              v-if="token.category === 'box-shadow'"
+              class="example box-shadow"
+              :style="{ boxShadow: token.value }"
+            />
+            <code class="type">{{token.value}}</code>
           </td>
           <td v-else>N/A</td>
           <td v-if="token.category">{{token.category}}</td>

diff --git a/docs/components/tokens/Color.vue b/docs/components/tokens/Color.vue
@@ -5,11 +5,18 @@
       :key="index"
       class="color"
       :class="prop.category"
-      v-if="prop.type === 'color'">
-        <div class="swatch" :style="{ backgroundColor: prop.value }" />
-        <h3>{{prop.name.replace(/_/g, " ").replace(/color/g, "")}}</h3>
-        <span><em>RGB: </em>{{prop.value}}</span>
-        <span><em>SCSS: </em>${{prop.name.replace(/_/g, "-")}}</span>
+      v-if="prop.type === 'color'"
+    >
+      <div class="swatch" :style="{ backgroundColor: prop.value }"/>
+      <h3>{{prop.name.replace(/_/g, " ").replace(/color/g, "")}}</h3>
+      <span>
+        <em>RGB:</em>
+        {{prop.value}}
+      </span>
+      <span>
+        <em>SCSS:</em>
+        ${{prop.name.replace(/_/g, "-")}}
+      </span>
     </div>
   </div>
 </template>
@@ -59,19 +66,29 @@ export default {
     align-content: stretch;
     justify-content: left;
     grid-template-columns:
-      calc(20% - #{$space-m}) calc(20% - #{$space-m}) calc(20% - #{$space-m}) calc(20% - #{$space-m})
+      calc(20% - #{$space-m})
+      calc(20% - #{$space-m})
+      calc(20% - #{$space-m})
+      calc(20% - #{$space-m})
       calc(20% - #{$space-m});
     grid-column-gap: $space-m;
     @media (max-width: 1300px) {
-      grid-template-columns: calc(25% - #{$space-m}) calc(25% - #{$space-m}) calc(25% - #{$space-m}) calc(
-          25% - #{$space-m}
-        );
+      grid-template-columns:
+        calc(25% - #{$space-m})
+        calc(25% - #{$space-m})
+        calc(25% - #{$space-m})
+        calc(25% - #{$space-m});
     }
     @media (max-width: 1100px) {
-      grid-template-columns: calc(33.333% - #{$space-m}) calc(33.333% - #{$space-m}) calc(33.333% - #{$space-m});
+      grid-template-columns:
+        calc(33.333% - #{$space-m})
+        calc(33.333% - #{$space-m})
+        calc(33.333% - #{$space-m});
     }
     @media (max-width: 900px) {
-      grid-template-columns: calc(50% - #{$space-m}) calc(50% - #{$space-m});
+      grid-template-columns:
+        calc(50% - #{$space-m})
+        calc(50% - #{$space-m});
     }
     @media (max-width: 400px) {
       grid-template-columns: 100%;

diff --git a/docs/components/tokens/FontSize.vue b/docs/components/tokens/FontSize.vue
@@ -5,8 +5,10 @@
       :key="index"
       class="font"
       v-if="prop.category === 'font-size'"
-      :style="{ fontSize: prop.value }">
-        ${{prop.name.replace(/_/g, "-")}}<span> ({{prop.value}})</span>
+      :style="{ fontSize: prop.value }"
+    >
+      ${{prop.name.replace(/_/g, "-")}}
+      <span>({{prop.value}})</span>
     </div>
   </div>
 </template>

diff --git a/docs/components/tokens/Spacing.vue b/docs/components/tokens/Spacing.vue
@@ -5,8 +5,10 @@
       :key="index"
       class="space"
       v-if="prop.category === 'space'"
-      :style="{ lineHeight: prop.value, height: prop.value }">
-        ${{prop.name.replace(/_/g, "-")}}<span> ({{prop.value}})</span>
+      :style="{ lineHeight: prop.value, height: prop.value }"
+    >
+      ${{prop.name.replace(/_/g, "-")}}
+      <span>({{prop.value}})</span>
     </div>
   </div>
 </template>

diff --git a/docs/docs.styles.scss b/docs/docs.styles.scss
@@ -64,7 +64,6 @@ div[class^="rsg--root"] a[class^="rsg--link"] {
 div[class^="rsg--wrapper"] > h1[class^="rsg--heading"],
 div[class^="rsg--wrapper"] > h2[class^="rsg--heading"] {
   display: block;
-  width: 100%;
   border: 0;
   line-height: $line-height-s;
   padding: $space-xl $space-xl;
@@ -211,7 +210,6 @@ div[class^="rsg--logo"] {
   @include inset-space($space-m);
   border-bottom: 1px solid rgba($color-white, 0.1);
   h1 {
-    color: $color-white;
     color: tint($color-bleu-de-france, 90%);
     font-weight: $weight-normal;
   }
@@ -605,10 +603,9 @@ table[class^="rsg--table"] {
   th {
     padding: $space-s $space-l $space-s $space-s;
     font-size: $size-s;
-    font-weight: $weight-bold;
+    font-weight: $weight-semi-bold;
     text-transform: uppercase;
     letter-spacing: 1px;
-    font-weight: $weight-semi-bold;
     border-radius: 0;
     background: $color-cloud;
     color: tint($color-oxford-blue, 10%);

diff --git a/docs/downloads.md b/docs/downloads.md
@@ -4,5 +4,5 @@ You’re looking at Vue Design System’s demo downloads section. Everything you
 
 ## Vue Design System (zip)
 
-* [Download latest version](https://github.com/viljamis/vue-design-system/archive/master.zip)
-* [All versions](https://github.com/viljamis/vue-design-system/releases)
+- [Download latest version](https://github.com/viljamis/vue-design-system/archive/master.zip)
+- [All versions](https://github.com/viljamis/vue-design-system/releases)
diff --git a/docs/utils/activeNav.js b/docs/utils/activeNav.js
@@ -34,7 +34,8 @@ export default {
       if (process && process.env && process.env.NODE_ENV === "test") {
         currentURL = "/example/"
       } else {
-        currentURL = window.location.pathname + window.location.hash.split("?")[0].replace(/%20/g, " ")
+        currentURL =
+          window.location.pathname + window.location.hash.split("?")[0].replace(/%20/g, " ")
       }
 
       if (sidebar) {

diff --git a/docs/utils/filterSearch.js b/docs/utils/filterSearch.js
@@ -6,7 +6,9 @@
 export default {
   methods: {
     showLinks() {
-      const links = document.querySelectorAll("div[class^='rsg--sidebar'] ul ul[class^='rsg--list']")
+      const links = document.querySelectorAll(
+        "div[class^='rsg--sidebar'] ul ul[class^='rsg--list']"
+      )
       if (links) {
         ;[].forEach.call(links, function(element) {
           element.classList.add("vueds-visible")