From b433be9cc8e222508d2dc9f2066310c07e4833a0 Mon Sep 17 00:00:00 2001
From: Luutzen Dijkstra <luutzen.dijkstra@sevenval.com>
Date: Thu, 11 Apr 2019 10:34:07 +0200
Subject: [PATCH 1/2] added Vds prefix to Vue Components to avoid conflict with
 standard HTML elements

---
 package-lock.json                             | 45 ++++++++++++++-----
 src/elements/{Button.vue => VdsButton.vue}    | 24 +++++-----
 src/elements/{Heading.vue => VdsHeading.vue}  | 16 +++----
 src/elements/{Icon.vue => VdsIcon.vue}        | 14 +++---
 src/elements/{Input.vue => VdsInput.vue}      | 17 ++++---
 .../{Paragraph.vue => VdsParagraph.vue}       | 16 +++----
 .../{TextStyle.vue => VdsTextStyle.vue}       | 15 +++----
 .../{Textarea.vue => VdsTextarea.vue}         | 13 +++---
 src/elements/{Wrapper.vue => VdsWrapper.vue}  | 11 ++---
 src/patterns/{NavBar.vue => VdsNavBar.vue}    | 10 ++---
 src/router/index.js                           |  8 ++--
 src/templates/{Index.vue => VdsIndex.vue}     | 38 ++++++++--------
 .../{NotFound.vue => VdsNotFound.vue}         | 35 ++++++++-------
 13 files changed, 138 insertions(+), 124 deletions(-)
 rename src/elements/{Button.vue => VdsButton.vue} (87%)
 rename src/elements/{Heading.vue => VdsHeading.vue} (80%)
 rename src/elements/{Icon.vue => VdsIcon.vue} (83%)
 rename src/elements/{Input.vue => VdsInput.vue} (90%)
 rename src/elements/{Paragraph.vue => VdsParagraph.vue} (91%)
 rename src/elements/{TextStyle.vue => VdsTextStyle.vue} (80%)
 rename src/elements/{Textarea.vue => VdsTextarea.vue} (90%)
 rename src/elements/{Wrapper.vue => VdsWrapper.vue} (79%)
 rename src/patterns/{NavBar.vue => VdsNavBar.vue} (91%)
 rename src/templates/{Index.vue => VdsIndex.vue} (69%)
 rename src/templates/{NotFound.vue => VdsNotFound.vue} (71%)

diff --git a/package-lock.json b/package-lock.json
index 686433af..0fb38fca 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1578,6 +1578,7 @@
       "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
       "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
       "dev": true,
+      "optional": true,
       "requires": {
         "kind-of": "^3.0.2",
         "longest": "^1.0.1",
@@ -7655,7 +7656,8 @@
         "ansi-regex": {
           "version": "2.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "aproba": {
           "version": "1.2.0",
@@ -7676,12 +7678,14 @@
         "balanced-match": {
           "version": "1.0.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "brace-expansion": {
           "version": "1.1.11",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "balanced-match": "^1.0.0",
             "concat-map": "0.0.1"
@@ -7696,17 +7700,20 @@
         "code-point-at": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "concat-map": {
           "version": "0.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "console-control-strings": {
           "version": "1.1.0",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "core-util-is": {
           "version": "1.0.2",
@@ -7823,7 +7830,8 @@
         "inherits": {
           "version": "2.0.3",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "ini": {
           "version": "1.3.5",
@@ -7835,6 +7843,7 @@
           "version": "1.0.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "^1.0.0"
           }
@@ -7849,6 +7858,7 @@
           "version": "3.0.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "brace-expansion": "^1.1.7"
           }
@@ -7856,12 +7866,14 @@
         "minimist": {
           "version": "0.0.8",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "minipass": {
           "version": "2.2.4",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "safe-buffer": "^5.1.1",
             "yallist": "^3.0.0"
@@ -7880,6 +7892,7 @@
           "version": "0.5.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "minimist": "0.0.8"
           }
@@ -7960,7 +7973,8 @@
         "number-is-nan": {
           "version": "1.0.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "object-assign": {
           "version": "4.1.1",
@@ -7972,6 +7986,7 @@
           "version": "1.4.0",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "wrappy": "1"
           }
@@ -8057,7 +8072,8 @@
         "safe-buffer": {
           "version": "5.1.1",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "safer-buffer": {
           "version": "2.1.2",
@@ -8093,6 +8109,7 @@
           "version": "1.0.2",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "^1.0.0",
             "is-fullwidth-code-point": "^1.0.0",
@@ -8112,6 +8129,7 @@
           "version": "3.0.1",
           "bundled": true,
           "dev": true,
+          "optional": true,
           "requires": {
             "ansi-regex": "^2.0.0"
           }
@@ -8155,12 +8173,14 @@
         "wrappy": {
           "version": "1.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         },
         "yallist": {
           "version": "3.0.2",
           "bundled": true,
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -11671,7 +11691,8 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
       "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "longest-streak": {
       "version": "2.0.2",
diff --git a/src/elements/Button.vue b/src/elements/VdsButton.vue
similarity index 87%
rename from src/elements/Button.vue
rename to src/elements/VdsButton.vue
index df9eba82..f7d194c7 100644
--- a/src/elements/Button.vue
+++ b/src/elements/VdsButton.vue
@@ -1,6 +1,6 @@
 <template>
-  <component :is="type" :href="href" :type="submit" :class="['button', size, state, variation]">
-    <slot/>
+  <component :is="type" :href="href" :type="submit" :class="['vds-button', size, state, variation]">
+    <slot />
   </component>
 </template>
 
@@ -11,7 +11,7 @@
  * Primary style should be used only once per view for main call-to-action.
  */
 export default {
-  name: "Button",
+  name: "VdsButton",
   status: "prototype",
   release: "3.5.0",
   props: {
@@ -81,7 +81,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.button {
+.vds-button {
   @include reset;
   @include stack-space($space-m);
   @include inline-space($space-xs);
@@ -128,7 +128,7 @@ export default {
   }
 
   // For icons inside buttons
-  .icon {
+  .vds-icon {
     float: right;
     margin: -#{$space-xs} -#{$space-xs} -#{$space-s} $space-xs/2;
     color: $color-bleu-de-france;
@@ -175,14 +175,14 @@ export default {
 <docs>
   ```jsx
   <div>
-    <Button variation="primary" size="large">Primary Button</Button>
-    <Button variation="primary" size="medium">Medium</Button>
-    <Button variation="primary" size="small">Small</Button>
+    <VdsButton variation="primary" size="large">Primary Button</VdsButton>
+    <VdsButton variation="primary" size="medium">Medium</VdsButton>
+    <VdsButton variation="primary" size="small">Small</VdsButton>
     <br />
-    <Button>Default Button</Button>
-    <Button state="hover">:hover</Button>
-    <Button state="active">:active</Button>
-    <Button state="focus">:focus</Button>
+    <VdsButton>Default Button</VdsButton>
+    <VdsButton state="hover">:hover</VdsButton>
+    <VdsButton state="active">:active</VdsButton>
+    <VdsButton state="focus">:focus</VdsButton>
   </div>
   ```
 </docs>
diff --git a/src/elements/Heading.vue b/src/elements/VdsHeading.vue
similarity index 80%
rename from src/elements/Heading.vue
rename to src/elements/VdsHeading.vue
index 6abfd469..b0758662 100644
--- a/src/elements/Heading.vue
+++ b/src/elements/VdsHeading.vue
@@ -1,7 +1,5 @@
 <template>
-  <component :is="level" class="heading">
-    <slot/>
-  </component>
+  <component :is="level" class="vds-heading"> <slot /> </component>
 </template>
 
 <script>
@@ -11,7 +9,7 @@
  * Heading element provides an option to change the level of the heading.
  */
 export default {
-  name: "Heading",
+  name: "VdsHeading",
   status: "prototype",
   release: "1.0.0",
   props: {
@@ -31,7 +29,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.heading {
+.vds-heading {
   @include reset;
   @include stack-space($space-m);
   font-family: $font-heading;
@@ -75,10 +73,10 @@ h6 {
 <docs>
   ```jsx
   <div>
-    <Heading>The quick brown fox</Heading>
-    <Heading level="h2">The quick brown fox</Heading>
-    <Heading level="h3">The quick brown fox</Heading>
-    <Heading level="h4">The quick brown fox</Heading>
+    <VdsHeading>The quick brown fox</VdsHeading>
+    <VdsHeading level="h2">The quick brown fox</VdsHeading>
+    <VdsHeading level="h3">The quick brown fox</VdsHeading>
+    <VdsHeading level="h4">The quick brown fox</VdsHeading>
   </div>
   ```
 </docs>
diff --git a/src/elements/Icon.vue b/src/elements/VdsIcon.vue
similarity index 83%
rename from src/elements/Icon.vue
rename to src/elements/VdsIcon.vue
index 91afba8c..77b0042e 100644
--- a/src/elements/Icon.vue
+++ b/src/elements/VdsIcon.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="type" :aria-label="ariaLabel" :class="['icon', size]" v-html="svg"/>
+  <component :is="type" :aria-label="ariaLabel" :class="['vds-icon', size]" v-html="svg" />
 </template>
 
 <script>
@@ -11,7 +11,7 @@ const req = require.context("@/assets/icons/", true, /^\.\/.*\.svg$/)
  * easily understand where they are in the product.
  */
 export default {
-  name: "Icon",
+  name: "VdsIcon",
   status: "review",
   release: "1.0.0",
   props: {
@@ -70,7 +70,7 @@ export default {
 
 // We don’t want to use scoped since these styles need to cascade down to SVGs.
 // We also want to be able to style .icon inside buttons etc.
-.icon {
+.vds-icon {
   @include reset;
   &.large svg {
     width: $space-l;
@@ -90,10 +90,10 @@ export default {
 <docs>
   ```jsx
   <div>
-    <Icon name="ready" aria-label="Component is ready" fill="#7cb518" />
-    <Icon name="review" fill="rgb(255,186,10)" />
-    <Icon name="deprecated" fill="rgb(235,59,36)" />
-    <Icon name="prototype" fill="rgb(37,138,239)" />
+    <VdsIcon name="ready" aria-label="Component is ready" fill="#7cb518" />
+    <VdsIcon name="review" fill="rgb(255,186,10)" />
+    <VdsIcon name="deprecated" fill="rgb(235,59,36)" />
+    <VdsIcon name="prototype" fill="rgb(37,138,239)" />
   </div>
   ```
 </docs>
diff --git a/src/elements/Input.vue b/src/elements/VdsInput.vue
similarity index 90%
rename from src/elements/Input.vue
rename to src/elements/VdsInput.vue
index 47a1221b..42b3899e 100644
--- a/src/elements/Input.vue
+++ b/src/elements/VdsInput.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="wrapper" :class="['input', {'input-expand': width === 'expand'}]">
+  <component :is="wrapper" :class="['vds-input', { 'input-expand': width === 'expand' }]">
     <label :for="id" v-if="label">{{ label }}</label>
     <input
       :id="id"
@@ -10,7 +10,7 @@
       :placeholder="placeholder"
       @input="onInput($event.target.value)"
       @focus="onFocus($event.target.value)"
-    >
+    />
   </component>
 </template>
 
@@ -21,7 +21,7 @@
  * formats including numbers. For longer input, use the form `Textarea` element.
  */
 export default {
-  name: "Input",
+  name: "VdsInput",
   status: "ready",
   release: "1.0.0",
   props: {
@@ -121,7 +121,7 @@ export default {
 // Design Tokens with local scope
 $color-placeholder: tint($color-silver, 50%);
 
-.input {
+.vds-input {
   @include stack-space($space-s);
   font-weight: $weight-normal;
   font-family: $font-text;
@@ -189,14 +189,13 @@ $color-placeholder: tint($color-silver, 50%);
 }
 </style>
 
-
 <docs>
   ```jsx
   <div>
-    <Input label="Default input" placeholder="Write your text" id="input-1" />
-    <Input label=":hover" state="hover" placeholder="Write your text" id="input-2" />
-    <Input label=":focus" state="focus" placeholder="Write your text" id="input-3" />
-    <Input label="[disabled]" disabled value="Write your text" id="input-4" />
+    <VdsInput label="Default input" placeholder="Write your text" id="input-1" />
+    <VdsInput label=":hover" state="hover" placeholder="Write your text" id="input-2" />
+    <VdsInput label=":focus" state="focus" placeholder="Write your text" id="input-3" />
+    <VdsInput label="[disabled]" disabled value="Write your text" id="input-4" />
   </div>
   ```
 </docs>
diff --git a/src/elements/Paragraph.vue b/src/elements/VdsParagraph.vue
similarity index 91%
rename from src/elements/Paragraph.vue
rename to src/elements/VdsParagraph.vue
index 74563a7c..4f4d9c04 100644
--- a/src/elements/Paragraph.vue
+++ b/src/elements/VdsParagraph.vue
@@ -1,12 +1,10 @@
 <template>
-  <component :is="type" :class="['paragraph', variation]">
-    <slot/>
-  </component>
+  <component :is="type" :class="['vds-paragraph', variation]"> <slot /> </component>
 </template>
 
 <script>
 export default {
-  name: "Paragraph",
+  name: "VdsParagraph",
   status: "prototype",
   release: "3.5.0",
   props: {
@@ -37,7 +35,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.paragraph {
+.vds-paragraph {
   @include reset;
   @include stack-space($space-m);
   -webkit-font-smoothing: antialiased;
@@ -72,12 +70,12 @@ export default {
 <docs>
   ```jsx
   <div>
-    <Paragraph>
+    <VdsParagraph>
       Design isn’t just about the look and feel. Design is <a href="https://viljamis.com/2017/design-tools-processes/">how it works</a>, and we believe the best way to focus on this is to work as close to the end result as possible. That’s <a href="https://viljamisdesign.com/process/">why we start</a> all our projects with simple sketches, and quickly transition into designing working prototypes in code. This is done by the same designers who started the work, which ensures that our original design intent is carried all the way to the end product.
-    </Paragraph>
-    <Paragraph>
+    </VdsParagraph>
+    <VdsParagraph>
       Our core belief is that the products we design should work across anything that can access the web. Whether it’s a laptop, a smartphone, a watch, or even a browser integrated into a car’s dashboard.
-    </Paragraph>
+    </VdsParagraph>
   </div>
   ```
 </docs>
diff --git a/src/elements/TextStyle.vue b/src/elements/VdsTextStyle.vue
similarity index 80%
rename from src/elements/TextStyle.vue
rename to src/elements/VdsTextStyle.vue
index e815baa7..8f90f9a8 100644
--- a/src/elements/TextStyle.vue
+++ b/src/elements/VdsTextStyle.vue
@@ -1,7 +1,5 @@
 <template>
-  <component :is="type" :class="['text-style', variation]">
-    <slot/>
-  </component>
+  <component :is="type" :class="['vds-text-style', variation]"> <slot /> </component>
 </template>
 
 <script>
@@ -11,7 +9,7 @@
  * styles only for aesthetic effect.
  */
 export default {
-  name: "TextStyle",
+  name: "VdsTextStyle",
   status: "ready",
   release: "1.0.0",
   props: {
@@ -45,7 +43,7 @@ export default {
 // Design Tokens with local scope
 $positive-text: #7cb518;
 
-.text-style {
+.vds-text-style {
   @include reset;
   @include stack-space($space-s);
   color: $color-rich-black;
@@ -72,15 +70,14 @@ $positive-text: #7cb518;
 }
 </style>
 
-
 <docs>
   ```jsx
   <div>
-    <TextStyle variation="default">Design isn’t just about the look and feel.</TextStyle>
+    <VdsTextStyle variation="default">Design isn’t just about the look and feel.</VdsTextStyle>
     <br />
-    <TextStyle variation="disabled">Design isn’t just about</TextStyle>
+    <VdsTextStyle variation="disabled">Design isn’t just about</VdsTextStyle>
     <br />
-    <TextStyle variation="strong">Design isn’t</TextStyle>
+    <VdsTextStyle variation="strong">Design isn’t</VdsTextStyle>
   </div>
   ```
 </docs>
diff --git a/src/elements/Textarea.vue b/src/elements/VdsTextarea.vue
similarity index 90%
rename from src/elements/Textarea.vue
rename to src/elements/VdsTextarea.vue
index 2d985da2..3e5783c8 100644
--- a/src/elements/Textarea.vue
+++ b/src/elements/VdsTextarea.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="wrapper" :class="['textarea', {'textarea-expand': width === 'expand'}]">
+  <component :is="wrapper" :class="['vds-textarea', { 'textarea-expand': width === 'expand' }]">
     <label :for="id" v-if="label">{{ label }}</label>
     <textarea
       :id="id"
@@ -20,7 +20,7 @@
  * use the `Input` element.
  */
 export default {
-  name: "Textarea",
+  name: "VdsTextarea",
   status: "ready",
   release: "3.5.0",
   props: {
@@ -109,7 +109,7 @@ export default {
 // Design Tokens with local scope
 $color-placeholder: tint($color-silver, 50%);
 
-.textarea {
+.vds-textarea {
   @include stack-space($space-s);
   font-weight: $weight-normal;
   font-family: $font-text;
@@ -178,13 +178,12 @@ $color-placeholder: tint($color-silver, 50%);
 }
 </style>
 
-
 <docs>
   ```jsx
   <div>
-    <Textarea label="Default textarea" placeholder="Write your text" id="textarea-1" />
-    <Textarea label=":focus" state="focus" placeholder="Write your text" id="textarea-2" />
-    <Textarea label="[disabled]" disabled value="Write your text" id="textarea-3" />
+    <VdsTextarea label="Default textarea" placeholder="Write your text" id="textarea-1" />
+    <VdsTextarea label=":focus" state="focus" placeholder="Write your text" id="textarea-2" />
+    <VdsTextarea label="[disabled]" disabled value="Write your text" id="textarea-3" />
   </div>
   ```
 </docs>
diff --git a/src/elements/Wrapper.vue b/src/elements/VdsWrapper.vue
similarity index 79%
rename from src/elements/Wrapper.vue
rename to src/elements/VdsWrapper.vue
index cbfe52fe..42ffdf51 100644
--- a/src/elements/Wrapper.vue
+++ b/src/elements/VdsWrapper.vue
@@ -1,7 +1,5 @@
 <template>
-  <component :is="type" class="wrapper">
-    <slot/>
-  </component>
+  <component :is="type" class="vds-wrapper"> <slot /> </component>
 </template>
 
 <script>
@@ -10,7 +8,7 @@
  * associated actions. Wrapper doesn’t provide customizable options.
  */
 export default {
-  name: "Wrapper",
+  name: "VdsWrapper",
   status: "review",
   release: "1.0.0",
   props: {
@@ -26,7 +24,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.wrapper {
+.vds-wrapper {
   @include reset;
   @include inset-space($space-l);
   font-family: $font-text;
@@ -40,9 +38,8 @@ export default {
 }
 </style>
 
-
 <docs>
   ```jsx
-  <Wrapper>Wrapper can be used to wrap any components together.</Wrapper>
+  <VdsWrapper>Wrapper can be used to wrap any components together.</VdsWrapper>
   ```
 </docs>
diff --git a/src/patterns/NavBar.vue b/src/patterns/VdsNavBar.vue
similarity index 91%
rename from src/patterns/NavBar.vue
rename to src/patterns/VdsNavBar.vue
index 7ec9cd56..aff3990a 100644
--- a/src/patterns/NavBar.vue
+++ b/src/patterns/VdsNavBar.vue
@@ -1,10 +1,10 @@
 <template>
-  <component :is="type" class="nav">
+  <component :is="type" class="vds-nav">
     <a
       v-for="(item, index) in navItems"
       :key="index"
       :href="item.href"
-      :class="{active: localActive === item.component}"
+      :class="{ active: localActive === item.component }"
       v-html="item.name"
     />
   </component>
@@ -15,7 +15,7 @@
  * Used as main page navigation in templates.
  */
 export default {
-  name: "NavBar",
+  name: "VdsNavBar",
   status: "ready",
   release: "1.0.0",
   model: {
@@ -62,7 +62,7 @@ export default {
 $color-nav-link: $color-bleu-de-france;
 $color-nav-link-active: $color-bleu-de-france;
 
-.nav {
+.vds-nav {
   @include stack-space($space-m);
   font-family: $font-text;
   font-size: $size-s;
@@ -93,7 +93,7 @@ $color-nav-link-active: $color-bleu-de-france;
 
 <docs>
   ```jsx
-  <NavBar active="Dashboard" :navItems="[
+  <VdsNavBar active="Dashboard" :navItems="[
     {name: 'Dashboard', component: 'Dashboard', href: '/example/'},
     {name: 'Posts', component: 'Posts', href: '/example/'},
     {name: 'Users', component: 'Users', href: '/example/'},
diff --git a/src/router/index.js b/src/router/index.js
index ac248707..f965c5cf 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,7 +1,7 @@
 import Vue from "vue"
 import Router from "vue-router"
-import Index from "@/templates/Index"
-import NotFound from "@/templates/NotFound"
+import VdsIndex from "@/templates/VdsIndex"
+import VdsNotFound from "@/templates/VdsNotFound"
 
 Vue.use(Router)
 
@@ -10,12 +10,12 @@ export default new Router({
     {
       path: "/",
       name: "Index",
-      component: Index,
+      component: VdsIndex,
     },
     {
       path: "*",
       name: "NotFound",
-      component: NotFound,
+      component: VdsNotFound,
     },
   ],
 })
diff --git a/src/templates/Index.vue b/src/templates/VdsIndex.vue
similarity index 69%
rename from src/templates/Index.vue
rename to src/templates/VdsIndex.vue
index a2a8f21f..147457c1 100644
--- a/src/templates/Index.vue
+++ b/src/templates/VdsIndex.vue
@@ -1,18 +1,20 @@
 <template>
-  <component :is="type" class="index">
-    <NavBar
-      active="Index"
+  <component :is="type" class="vds-index">
+    <VdsNavBar
+      active="VdsIndex"
       :navItems="[
-        {name: 'Template', component: 'Index', href: '/#/'},
-        {name: 'Documentation', href: 'http://localhost:6060/'}
+        { name: 'Template', component: 'VdsIndex', href: '/#/' },
+        { name: 'Documentation', href: 'http://localhost:6060/' },
       ]"
     />
-    <Wrapper>
-      <Heading>Vue Design System</Heading>
-      <Paragraph>
-        <a href="https://vueds.com">Vue Design System</a>is an open-source tool for building design systems with Vue.js. It provides you and your team a set of organized tools, patterns &amp; practices. It works as the foundation for your application development.
-      </Paragraph>
-    </Wrapper>
+    <VdsWrapper>
+      <VdsHeading>Vue Design System</VdsHeading>
+      <VdsParagraph>
+        <a href="https://vueds.com">Vue Design System</a> is an open-source tool for building design
+        systems with Vue.js. It provides you and your team a set of organized tools, patterns &amp;
+        practices. It works as the foundation for your application development.
+      </VdsParagraph>
+    </VdsWrapper>
   </component>
 </template>
 
@@ -21,7 +23,7 @@
  * Shows how to layout and structure a home page.
  */
 export default {
-  name: "Index",
+  name: "VdsIndex",
   status: "deprecated",
   release: "1.0.0",
   metaInfo: {
@@ -50,7 +52,7 @@ $color-template-background-bottom: shade($color-template-background, 5%);
 $color-template-text: $color-white;
 $color-template-link: $color-bleu-de-france;
 
-.index {
+.vds-index {
   @include reset;
   @include inset-space($space-m);
   min-height: $space-xxl * 4;
@@ -68,16 +70,16 @@ $color-template-link: $color-bleu-de-france;
   @media #{$media-query-l} {
     // This is how you’d use design tokens with media queries
   }
-  .heading {
+  .vds-heading {
     color: $color-template-text;
   }
-  .paragraph {
+  .vds-paragraph {
     color: $color-template-text;
   }
-  .text-link {
+  .vds-text-link {
     color: $color-template-link;
   }
-  .wrapper {
+  .vds-wrapper {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     max-width: $space-xxl * 4.5;
@@ -96,6 +98,6 @@ $color-template-link: $color-bleu-de-france;
 
 <docs>
   ```jsx
-  <Index />
+  <VdsIndex />
   ```
 </docs>
diff --git a/src/templates/NotFound.vue b/src/templates/VdsNotFound.vue
similarity index 71%
rename from src/templates/NotFound.vue
rename to src/templates/VdsNotFound.vue
index d008b794..89ff7478 100644
--- a/src/templates/NotFound.vue
+++ b/src/templates/VdsNotFound.vue
@@ -1,16 +1,19 @@
 <template>
-  <component :is="type" class="not-found">
-    <NavBar
-      active="NotFound"
+  <component :is="type" class="vds-not-found">
+    <VdsNavBar
+      active="VdsNotFound"
       :navItems="[
-        {name: 'Template', component: 'Index', href: '/#/'},
-        {name: 'Documentation', href: 'http://localhost:6060/'}
+        { name: 'Template', component: 'VdsIndex', href: '/#/' },
+        { name: 'Documentation', href: 'http://localhost:6060/' },
       ]"
     />
-    <Wrapper>
-      <Heading>404 Error</Heading>
-      <Paragraph>Couldn’t find a component that would match the URL you entered. Double check configuration in router/index.js.</Paragraph>
-    </Wrapper>
+    <VdsWrapper>
+      <VdsHeading>404 Error</VdsHeading>
+      <VdsParagraph
+        >Couldn’t find a component that would match the URL you entered. Double check configuration
+        in router/index.js.</VdsParagraph
+      >
+    </VdsWrapper>
   </component>
 </template>
 
@@ -19,7 +22,7 @@
  * Shows how to layout and structure an error page.
  */
 export default {
-  name: "NotFound",
+  name: "VdsNotFound",
   metaInfo: {
     title: "Page Not Found | Vue Design System",
     htmlAttrs: {
@@ -46,7 +49,7 @@ $color-template-background-bottom: shade($color-template-background, 5%);
 $color-template-text: $color-white;
 $color-template-link: $color-bleu-de-france;
 
-.not-found {
+.vds-not-found {
   @include reset;
   @include inset-space($space-m);
   min-height: $space-xxl * 4;
@@ -61,16 +64,16 @@ $color-template-link: $color-bleu-de-france;
   float: left;
   height: 100%;
   width: 100%;
-  .heading {
+  .vds-heading {
     color: $color-template-text;
   }
-  .paragraph {
+  .vds-paragraph {
     color: $color-template-text;
   }
-  .text-link {
+  .vds-text-link {
     color: $color-template-link;
   }
-  .wrapper {
+  .vds-wrapper {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     max-width: $space-xxl * 4.5;
@@ -84,6 +87,6 @@ $color-template-link: $color-bleu-de-france;
 
 <docs>
   ```jsx
-  <NotFound />
+  <VdsNotFound />
   ```
 </docs>

From edfab27dffd736d9f798f757f7c562966e017899 Mon Sep 17 00:00:00 2001
From: Luutzen Dijkstra <luutzen.dijkstra@sevenval.com>
Date: Thu, 11 Apr 2019 14:03:50 +0200
Subject: [PATCH 2/2] fixed invalid Icon reference to VdsIcon for Docs

---
 docs/components/status/Components.vue | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/docs/components/status/Components.vue b/docs/components/status/Components.vue
index bcfa5ab0..cdcee5be 100644
--- 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"/>
+        <VdsIcon name="ready" fill="#7cb518" size="small" />
         <p>Ready</p>
       </li>
       <li>
-        <Icon name="review" :fill="tokens.color_ucla_gold.value" size="small"/>
+        <VdsIcon 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"/>
+        <VdsIcon 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"/>
+        <VdsIcon name="prototype" :fill="tokens.color_bleu_de_france.value" size="small" />
         <p>Prototype</p>
       </li>
       <li>
@@ -36,26 +36,26 @@
       <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
+            <VdsIcon v-if="component.status === 'ready'" name="ready" fill="#7cb518" size="small" />
+            <VdsIcon
               v-if="component.status === 'under-review' || component.status === 'review'"
               name="review"
               :fill="tokens.color_ucla_gold.value"
               size="small"
             />
-            <Icon
+            <VdsIcon
               v-if="component.status === 'prototype'"
               name="prototype"
               :fill="tokens.color_bleu_de_france.value"
               size="small"
             />
-            <Icon
+            <VdsIcon
               v-if="component.status === 'deprecated'"
               name="deprecated"
               :fill="tokens.color_vermilion.value"