From df9e4ddcf6f18b9eabc8ffc51074bb433c3a5945 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Thu, 17 Jan 2019 10:38:56 +0100
Subject: [PATCH] Updated from pr's

---
 .../src/styleguide/components/Navigation.vue  |  3 +-
 .../data-display/CopyField/CopyField.vue      |  2 +-
 .../components/data-display/List/List.vue     |  2 +-
 .../components/data-input/Input/demo.md       | 10 +++-
 .../components/data-input/shared/input.scss   | 37 ++++++------
 .../system/components/layout/Card/style.scss  |  2 +-
 .../components/layout/Container/style.scss    |  2 +-
 .../components/layout/Section/Section.vue     |  4 --
 .../system/components/layout/Space/style.scss |  3 +-
 .../components/layout/Spinner/Spinner.vue     | 13 ++--
 .../components/layout/Spinner/style.scss      | 59 ++++++++++---------
 .../components/navigation/Button/Button.vue   |  9 +--
 .../components/navigation/Menu/Menu.vue       | 14 +----
 .../components/navigation/Menu/MenuItem.vue   |  2 +-
 .../components/typography/Chip/Chip.vue       |  6 +-
 .../components/typography/Chip/style.scss     | 30 ++++------
 .../components/typography/Code/Code.vue       |  1 -
 .../components/typography/Heading/Heading.vue |  6 +-
 .../components/typography/Logo/Logo.vue       |  1 -
 .../system/components/typography/Tag/Tag.vue  |  5 +-
 styleguide/src/system/tokens/color.yml        |  4 ++
 styleguide/src/system/tokens/font-spacing.yml |  1 +
 22 files changed, 101 insertions(+), 115 deletions(-)

diff --git a/styleguide/src/styleguide/components/Navigation.vue b/styleguide/src/styleguide/components/Navigation.vue
index 2cbdfedf0..237519edc 100644
--- a/styleguide/src/styleguide/components/Navigation.vue
+++ b/styleguide/src/styleguide/components/Navigation.vue
@@ -4,8 +4,7 @@
       <ds-input
         v-model="searchString"
         placeholder="Filter menu ..."
-        icon="search"
-        size="base" />
+        icon="search" />
     </div>
     <ds-menu
       @navigate="$emit('navigate')"
diff --git a/styleguide/src/system/components/data-display/CopyField/CopyField.vue b/styleguide/src/system/components/data-display/CopyField/CopyField.vue
index 5c15484f8..4ff1c125f 100644
--- a/styleguide/src/system/components/data-display/CopyField/CopyField.vue
+++ b/styleguide/src/system/components/data-display/CopyField/CopyField.vue
@@ -41,7 +41,7 @@ export default {
   props: {
     /**
      * The size used for the text.
-     * `small, base, large`
+     * @options small|base|large
      */
     size: {
       type: String,
diff --git a/styleguide/src/system/components/data-display/List/List.vue b/styleguide/src/system/components/data-display/List/List.vue
index 6117cb50c..78e262c14 100644
--- a/styleguide/src/system/components/data-display/List/List.vue
+++ b/styleguide/src/system/components/data-display/List/List.vue
@@ -36,7 +36,7 @@ export default {
     },
     /**
      * The size used for the list.
-     * `small, base, large, x-large`
+     * @options small|base|large|x-large
      */
     size: {
       type: String,
diff --git a/styleguide/src/system/components/data-input/Input/demo.md b/styleguide/src/system/components/data-input/Input/demo.md
index 7e1eb604d..a5d195f7f 100644
--- a/styleguide/src/system/components/data-input/Input/demo.md
+++ b/styleguide/src/system/components/data-input/Input/demo.md
@@ -1,7 +1,7 @@
 ## Basic usage
 
 ```
-<ds-input placeholder="Name ..."/>
+<ds-input placeholder="Name ..." />
 ```
 
 ## Usage with label
@@ -10,7 +10,13 @@
 <ds-input
   id="name"
   label="Your name"
-  placeholder="Name ..."/>
+  placeholder="Name ..." />
+```
+
+## Disabled
+
+```
+<ds-input placeholder="Name ..." disabled />
 ```
 
 ## Input types
diff --git a/styleguide/src/system/components/data-input/shared/input.scss b/styleguide/src/system/components/data-input/shared/input.scss
index 316c94b86..cbb022e6f 100644
--- a/styleguide/src/system/components/data-input/shared/input.scss
+++ b/styleguide/src/system/components/data-input/shared/input.scss
@@ -2,7 +2,7 @@
   .#{$class}-wrap {
     position: relative;
   }
-
+  
   .#{$class} {
     appearance: none;
     box-sizing: border-box;
@@ -12,62 +12,63 @@
     width: 100%;
     padding: $input-padding-vertical $space-x-small;
     height: $input-height;
-
+  
     color: $text-color-base;
     background: $background-color-base;
-
+  
     border: $input-border-size solid $border-color-base;
     border-radius: $border-radius-base;
     outline: none;
     transition: all $duration-short $ease-out;
-
+  
     &::placeholder {
       color: $text-color-disabled;
     }
-
+  
     .ds-input-has-focus &,
     &:focus {
       border-color: $border-color-active;
       background: $background-color-base;
     }
-
+  
     .ds-input-is-disabled &,
     &:disabled {
       color: $text-color-disabled;
       opacity: $opacity-disabled;
       pointer-events: none;
       cursor: not-allowed;
+      background-color: $background-color-disabled;
     }
 
     .ds-input-is-readonly & {
       pointer-events: none;
     }
-
+  
     .ds-input-has-error & {
       border-color: $border-color-danger;
     }
   }
-
+  
   .ds-input-size-small {
     font-size: $font-size-small;
-
+  
     .#{$class} {
       font-size: $input-font-size-small;
       height: $input-height-small;
       padding: $input-padding-vertical-small $space-x-small;
     }
   }
-
+  
   .ds-input-size-large {
     font-size: $font-size-large;
-
+  
     .#{$class} {
       font-size: $input-font-size-large;
       height: $input-height-large;
       padding: $input-padding-vertical-large $space-x-small;
     }
   }
-
+  
   .#{$class}-icon,
   .#{$class}-icon-right {
     position: absolute;
@@ -81,7 +82,7 @@
     color: $text-color-softer;
     transition: color $duration-short $ease-out;
     pointer-events: none;
-
+  
     .ds-input-has-focus & {
       color: $text-color-base;
     }
@@ -94,15 +95,15 @@
       width: $input-height-large;
     }
   }
-
+  
   .#{$class}-icon-right {
     right: 0;
     left: auto;
   }
-
+  
   .#{$class}-has-icon {
     padding-left: $input-height;
-
+  
     .ds-input-size-small & {
       padding-left: $input-height-small;
     }
@@ -111,7 +112,7 @@
       padding-left: $input-height-large;
     }
   }
-
+  
   .#{$class}-has-icon-right {
     padding-right: $input-height;
 
@@ -122,5 +123,5 @@
     .ds-input-size-large & {
       padding-right: $input-height-large;
     }
-  }
+  }         
 }
diff --git a/styleguide/src/system/components/layout/Card/style.scss b/styleguide/src/system/components/layout/Card/style.scss
index 9dd85b665..2ce09bff2 100644
--- a/styleguide/src/system/components/layout/Card/style.scss
+++ b/styleguide/src/system/components/layout/Card/style.scss
@@ -1,4 +1,4 @@
-$border-radius: $border-radius-x-large;
+$border-radius: $border-radius-large;
 
 .ds-card {
   @include reset;
diff --git a/styleguide/src/system/components/layout/Container/style.scss b/styleguide/src/system/components/layout/Container/style.scss
index 580d0c559..5af76e2de 100644
--- a/styleguide/src/system/components/layout/Container/style.scss
+++ b/styleguide/src/system/components/layout/Container/style.scss
@@ -34,4 +34,4 @@
 
 .ds-container-x-large {
   max-width: #{$xl}px;
-}
+}
\ No newline at end of file
diff --git a/styleguide/src/system/components/layout/Section/Section.vue b/styleguide/src/system/components/layout/Section/Section.vue
index 59e59978d..4b89a44c1 100644
--- a/styleguide/src/system/components/layout/Section/Section.vue
+++ b/styleguide/src/system/components/layout/Section/Section.vue
@@ -27,7 +27,6 @@ export default {
   props: {
     /**
      * Whether this section should be fullheight
-     * `true, false`
      */
     fullheight: {
       type: Boolean,
@@ -35,7 +34,6 @@ export default {
     },
     /**
      * Highlight with primary color
-     * `true, false`
      */
     primary: {
       type: Boolean,
@@ -43,7 +41,6 @@ export default {
     },
     /**
      * Highlight with secondary color
-     * `true, false`
      */
     secondary: {
       type: Boolean,
@@ -51,7 +48,6 @@ export default {
     },
     /**
      * Center the content
-     * `true, false`
      */
     centered: {
       type: Boolean,
diff --git a/styleguide/src/system/components/layout/Space/style.scss b/styleguide/src/system/components/layout/Space/style.scss
index d6db22087..203986a94 100644
--- a/styleguide/src/system/components/layout/Space/style.scss
+++ b/styleguide/src/system/components/layout/Space/style.scss
@@ -1,6 +1,7 @@
 .ds-space {
   @include reset;
 }
+
 .ds-space-centered {
   text-align: center;
-}
\ No newline at end of file
+}
diff --git a/styleguide/src/system/components/layout/Spinner/Spinner.vue b/styleguide/src/system/components/layout/Spinner/Spinner.vue
index 3fe573ef7..f40576b9f 100644
--- a/styleguide/src/system/components/layout/Spinner/Spinner.vue
+++ b/styleguide/src/system/components/layout/Spinner/Spinner.vue
@@ -10,7 +10,7 @@
       danger && !inverse && `ds-spinner-danger`,
     ]"
   >
-    <circle class="path" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
+    <circle class="ds-spinner-circle" cx="25" cy="25" r="20" fill="none" stroke-width="5"></circle>
   </svg>
 </template>
 
@@ -20,7 +20,7 @@ export default {
   props: {
     /**
      * The size used for the spinner.
-     * `small, base, large`
+     * @options small|base|large
      */
     size: {
       type: String,
@@ -38,7 +38,6 @@ export default {
     },
     /**
      * Primary style
-     * `true, false`
      */
     primary: {
       type: Boolean,
@@ -46,7 +45,6 @@ export default {
     },
     /**
      * Secondary style
-     * `true, false`
      */
     secondary: {
       type: Boolean,
@@ -54,7 +52,6 @@ export default {
     },
     /**
      * Danger style
-     * `true, false`
      */
     danger: {
       type: Boolean,
@@ -64,7 +61,7 @@ export default {
 }
 </script>
 
-<docs src="./demo.md"></docs>
-
 <style lang="scss" src="./style.scss">
-</style>
\ No newline at end of file
+</style>
+
+<docs src="./demo.md"></docs>
diff --git a/styleguide/src/system/components/layout/Spinner/style.scss b/styleguide/src/system/components/layout/Spinner/style.scss
index 9aa1b2c78..4d961269d 100644
--- a/styleguide/src/system/components/layout/Spinner/style.scss
+++ b/styleguide/src/system/components/layout/Spinner/style.scss
@@ -1,41 +1,47 @@
+$size-small: $space-base;
+$size-base: $space-large;
+$size-large: $space-x-large;
+
 .ds-spinner {
-  $scale: 40px;
-  
   animation: rotate 16s linear infinite;
   position: relative;
   display: inline-block;
-  width: $scale;
-  height: $scale;
-  
-  & .path {
-    stroke: $text-color-soft;
-    stroke-linecap: round;
-    animation: dash 1.5s ease-in-out infinite;
-  }
-  &.ds-spinner-inverse .path {
-    stroke: $color-primary-inverse;
-  }
-  &.ds-spinner-primary .path {
-    stroke: $text-color-primary;
-  }
-  &.ds-spinner-secondary .path {
-    stroke: $text-color-secondary;
-  }
-  &.ds-spinner-danger .path {
-    stroke: $text-color-danger;
-  }
+  width: $size-base;
+  height: $size-base;
 
   &.ds-size-small {
-    width: $scale * 0.5;
-    height: $scale * 0.5;
+    width: $size-small;
+    height: $size-small;
   }
   &.ds-size-large {
-    width: $scale * 1.5;
-    height: $scale * 1.5;
+    width: $size-large;
+    height: $size-large;
   }
   
 }
 
+.ds-spinner-circle {
+  stroke: $text-color-soft;
+  stroke-linecap: round;
+  animation: dash 1.5s ease-in-out infinite;
+  
+  .ds-spinner-inverse & {
+    stroke: $color-primary-inverse;
+  }
+  
+  .ds-spinner-primary & {
+    stroke: $text-color-primary;
+  }
+  
+  .ds-spinner-secondary & {
+    stroke: $text-color-secondary;
+  }
+  
+  .ds-spinner-danger & {
+    stroke: $text-color-danger;
+  }
+}
+
 @keyframes rotate {
   100% {
     transform: rotate(2160deg);
@@ -56,4 +62,3 @@
     stroke-dashoffset: -124;
   }
 }
-
diff --git a/styleguide/src/system/components/navigation/Button/Button.vue b/styleguide/src/system/components/navigation/Button/Button.vue
index 10daf3a89..971d156ca 100644
--- a/styleguide/src/system/components/navigation/Button/Button.vue
+++ b/styleguide/src/system/components/navigation/Button/Button.vue
@@ -54,7 +54,7 @@ export default {
     },
     /**
      * The size used for the text.
-     * `small, base, large`
+     * @options small|base|large
      */
     size: {
       type: String,
@@ -65,7 +65,7 @@ export default {
     },
     /**
      * The component / tag used for this button
-     * `router-link, a`
+     * @options router-link|a|button
      */
     linkTag: {
       type: String,
@@ -86,7 +86,6 @@ export default {
     },
     /**
      * Primary style
-     * `true, false`
      */
     primary: {
       type: Boolean,
@@ -94,7 +93,6 @@ export default {
     },
     /**
      * Secondary style
-     * `true, false`
      */
     secondary: {
       type: Boolean,
@@ -102,7 +100,6 @@ export default {
     },
     /**
      * Danger style
-     * `true, false`
      */
     danger: {
       type: Boolean,
@@ -110,7 +107,6 @@ export default {
     },
     /**
      * Toggle the hover state
-     * `true, false`
      */
     hover: {
       type: Boolean,
@@ -118,7 +114,6 @@ export default {
     },
     /**
      * Make the buttons background transparent
-     * `true, false`
      */
     ghost: {
       type: Boolean,
diff --git a/styleguide/src/system/components/navigation/Menu/Menu.vue b/styleguide/src/system/components/navigation/Menu/Menu.vue
index 6ff19120a..72172692c 100644
--- a/styleguide/src/system/components/navigation/Menu/Menu.vue
+++ b/styleguide/src/system/components/navigation/Menu/Menu.vue
@@ -13,9 +13,10 @@
           :route="route"
           :parents="[]"
           :name="route.name">
+          <!-- @slot Scoped slot for providing a custom menu item -->
           <slot
             :route="route"
-            name="Navigation">
+            name="menuitem">
             <ds-menu-item
               :key="route.path ? route.path : index"
               :route="route" />
@@ -64,7 +65,7 @@ export default {
     },
     /**
      * The default component / tag used for the link of menu items
-     * `router-link, a`
+     * @options router-link|a
      */
     linkTag: {
       type: String,
@@ -98,15 +99,6 @@ export default {
         return route.name
       }
     },
-    /**
-     * Function that matches items exactly
-     */
-    matcher: {
-      type: Function,
-      default: () => {
-        return false
-      }
-    },
     /**
      * Function that checks if the url must be matched exactly in order to activate the menu item. By default only '/' must be matched exactly.
      */
diff --git a/styleguide/src/system/components/navigation/Menu/MenuItem.vue b/styleguide/src/system/components/navigation/Menu/MenuItem.vue
index 047537e51..39979df1e 100644
--- a/styleguide/src/system/components/navigation/Menu/MenuItem.vue
+++ b/styleguide/src/system/components/navigation/Menu/MenuItem.vue
@@ -75,7 +75,7 @@ export default {
     },
     /**
      * The component / tag used for the link of this route
-     * `router-link, a`
+     * @options router-link|a
      */
     linkTag: {
       type: String,
diff --git a/styleguide/src/system/components/typography/Chip/Chip.vue b/styleguide/src/system/components/typography/Chip/Chip.vue
index 90ccda6b6..ad57f3267 100644
--- a/styleguide/src/system/components/typography/Chip/Chip.vue
+++ b/styleguide/src/system/components/typography/Chip/Chip.vue
@@ -31,7 +31,7 @@ export default {
   props: {
     /**
      * The background color used for the chip.
-     * `medium, inverse, primary, success, warning, danger`
+     * @options medium|inverse|primary|success|warning|danger
      */
     color: {
       type: String,
@@ -42,7 +42,7 @@ export default {
     },
     /**
      * The size used for the text.
-     * `base, large, small`
+     * @options base|large|small
      */
     size: {
       type: String,
@@ -53,7 +53,6 @@ export default {
     },
     /**
      * Whether the chip should be removeable
-     * `true, false`
      */
     removable: {
       type: Boolean,
@@ -61,7 +60,6 @@ export default {
     },
     /**
      * Whether the chip should be rounded
-     * `true, false`
      */
     round: {
       type: Boolean,
diff --git a/styleguide/src/system/components/typography/Chip/style.scss b/styleguide/src/system/components/typography/Chip/style.scss
index c8660333d..79315a449 100644
--- a/styleguide/src/system/components/typography/Chip/style.scss
+++ b/styleguide/src/system/components/typography/Chip/style.scss
@@ -1,21 +1,17 @@
 .ds-chip {
   @include reset;
   @include stack-space($space-xx-small);
+  @include inline-space($font-space-xx-small);
   position: relative;
   display: inline-block;
   font-family: $font-family-text;
   line-height: $line-height-base;
-  padding: $space-xx-small $space-x-small;
-  margin-right: $font-space-xx-small;
+  padding: $font-space-xx-small $font-space-large;
   border-radius: $border-radius-base;
   font-weight: $font-weight-bold;
   color: $text-color-base;
   background-color: $background-color-softest;
 
-  &:last-child {
-    margin-right: 0;
-  }
-
   &.ds-chip-removable {
     padding-right: $space-x-small + $space-small;
   }
@@ -50,27 +46,27 @@
   border-radius: $border-radius-rounded;
 }
 
-.ds-chip-size-base {
-  font-size: $font-size-small;
-  padding-left: $space-small * 0.9;
-  padding-right: $space-small * 0.9;
+.ds-chip-size-small {
+  font-size: $font-size-xx-small;
+  padding: $font-space-xxx-small ($font-space-large + $font-space-xxx-small);
 }
 
-.ds-chip-size-small {
-  font-size: $font-size-x-small;
-  padding: $space-xxx-small $space-x-small * 1.2;
+.ds-chip-size-base {
+  font-size: $font-size-small;
+  padding-left: $font-space-large +  $font-space-xx-small;
+  padding-right: $font-space-large +  $font-space-xx-small;
 }
 
 .ds-chip-size-large {
   font-size: $font-size-base;
-  padding-left: $space-small;
-  padding-right: $space-small;
+  padding-left: $font-space-x-large;
+  padding-right: $font-space-x-large;
 }
 
 .ds-chip-close {
   @include reset-button;
   position: absolute;
-  right: $space-xx-small;
+  right: $font-space-base;
   top: 50%;
   transform: translateY(-50%);
   display: inline-flex;
@@ -88,4 +84,4 @@
   &:hover {
     opacity: 1;
   }
-}
\ No newline at end of file
+}
diff --git a/styleguide/src/system/components/typography/Code/Code.vue b/styleguide/src/system/components/typography/Code/Code.vue
index be9fe5d6b..be70d6562 100644
--- a/styleguide/src/system/components/typography/Code/Code.vue
+++ b/styleguide/src/system/components/typography/Code/Code.vue
@@ -20,7 +20,6 @@ export default {
   props: {
     /**
      * Display the code inline.
-     * `true, false`
      */
     inline: {
       type: Boolean,
diff --git a/styleguide/src/system/components/typography/Heading/Heading.vue b/styleguide/src/system/components/typography/Heading/Heading.vue
index 9e000d931..b48920b32 100644
--- a/styleguide/src/system/components/typography/Heading/Heading.vue
+++ b/styleguide/src/system/components/typography/Heading/Heading.vue
@@ -26,7 +26,7 @@ export default {
   props: {
     /**
      * The heading type used for the heading.
-     * `h1, h2, h3, h4, h5, h6`
+     * @options h1|h2|h3|h4|h5|h6
      */
     tag: {
       type: String,
@@ -37,7 +37,7 @@ export default {
     },
     /**
      * The size used for the heading.
-     * `h1, h2, h3, h4, h5, h6`
+     * @options h1|h2|h3|h4|h5|h6
      */
     size: {
       type: String,
@@ -48,7 +48,6 @@ export default {
     },
     /**
      * Primary style
-     * `true, false`
      */
     primary: {
       type: Boolean,
@@ -56,7 +55,6 @@ export default {
     },
     /**
      * Muted style
-     * `true, false`
      */
     soft: {
       type: Boolean,
diff --git a/styleguide/src/system/components/typography/Logo/Logo.vue b/styleguide/src/system/components/typography/Logo/Logo.vue
index dcfdcacd5..0ec97d577 100644
--- a/styleguide/src/system/components/typography/Logo/Logo.vue
+++ b/styleguide/src/system/components/typography/Logo/Logo.vue
@@ -30,7 +30,6 @@ export default {
   props: {
     /**
      * Inverse the logo
-     * `true, false`
      */
     inverse: {
       type: Boolean,
diff --git a/styleguide/src/system/components/typography/Tag/Tag.vue b/styleguide/src/system/components/typography/Tag/Tag.vue
index f5031ba2e..457d4bd18 100644
--- a/styleguide/src/system/components/typography/Tag/Tag.vue
+++ b/styleguide/src/system/components/typography/Tag/Tag.vue
@@ -23,7 +23,7 @@ export default {
   props: {
     /**
      * The background color used for the tag.
-     * `medium, inverse, primary, success, warning, danger`
+     * @options medium|inverse|primary|success|warning|danger
      */
     color: {
       type: String,
@@ -34,7 +34,7 @@ export default {
     },
     /**
      * The size used for the text.
-     * `base, large, small`
+     * @options base|large|small
      */
     size: {
       type: String,
@@ -45,7 +45,6 @@ export default {
     },
     /**
      * Whether the tag should be round
-     * `true, false`
      */
     round: {
       type: Boolean,
diff --git a/styleguide/src/system/tokens/color.yml b/styleguide/src/system/tokens/color.yml
index cedb25e74..705de97eb 100644
--- a/styleguide/src/system/tokens/color.yml
+++ b/styleguide/src/system/tokens/color.yml
@@ -218,6 +218,10 @@ props:
     value: *color-neutral-30
     category: background-color
 
+  - name: background-color-disabled
+    value: *color-neutral-90
+    category: background-color
+
   - name: background-color-primary
     value: *color-primary
     category: background-color
diff --git a/styleguide/src/system/tokens/font-spacing.yml b/styleguide/src/system/tokens/font-spacing.yml
index 9e106feae..14e42af89 100644
--- a/styleguide/src/system/tokens/font-spacing.yml
+++ b/styleguide/src/system/tokens/font-spacing.yml
@@ -24,6 +24,7 @@ props:
     value: "0.2em"
   - name: font-space-xxx-small
     value: "0.1em"
+
 global:
   type: number
   category: font-spacing