From b8a92cc1cf939dcca07fdc0021dfbcd468a3bb48 Mon Sep 17 00:00:00 2001
From: Grzegorz Leoniec <greg@app-interactive.de>
Date: Thu, 18 Oct 2018 14:14:01 +0200
Subject: [PATCH] improved text and button component and added a number
 component with label and sizes

---
 .../components/data-display/Number/Number.vue | 36 +++++++++++++++++++
 .../components/data-display/Number/demo.md    | 16 +++++++++
 .../components/data-display/Number/style.scss | 15 ++++++++
 .../components/navigation/Button/demo.md      |  3 +-
 .../components/typography/Text/Text.vue       | 26 ++++++++++++--
 .../system/components/typography/Text/demo.md | 26 +++++++++++---
 .../components/typography/Text/style.scss     | 26 +++++++++++++-
 7 files changed, 139 insertions(+), 9 deletions(-)
 create mode 100644 styleguide/src/system/components/data-display/Number/Number.vue
 create mode 100644 styleguide/src/system/components/data-display/Number/demo.md
 create mode 100644 styleguide/src/system/components/data-display/Number/style.scss

diff --git a/styleguide/src/system/components/data-display/Number/Number.vue b/styleguide/src/system/components/data-display/Number/Number.vue
new file mode 100644
index 000000000..0e869856e
--- /dev/null
+++ b/styleguide/src/system/components/data-display/Number/Number.vue
@@ -0,0 +1,36 @@
+<template>
+  <div
+    class="ds-number"
+    :class="[
+      size && `ds-number-size-${size}`
+    ]"
+  >
+    <ds-text
+      :size="size"
+      class="ds-number-count"
+      style="margin-bottom: 0">{{ count }}</ds-text>
+    <ds-text
+      :uppercase="uppercase"
+      class="ds-number-label"
+      color="soft"
+      v-html="label" />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DsNumber',
+  props: {
+    size: { type: String, default: 'x-large' },
+    count: { type: [Number, String], default: 0 },
+    label: { type: String, default: null },
+    uppercase: { type: Boolean, default: false }
+  }
+}
+</script>
+
+
+<style lang="scss" src="./style.scss">
+</style>
+
+<docs src="./demo.md"></docs>
diff --git a/styleguide/src/system/components/data-display/Number/demo.md b/styleguide/src/system/components/data-display/Number/demo.md
new file mode 100644
index 000000000..ae45b2505
--- /dev/null
+++ b/styleguide/src/system/components/data-display/Number/demo.md
@@ -0,0 +1,16 @@
+## Basic usage
+
+```html
+<ds-number 
+  count="125"
+  label="Users Online" />
+```
+
+## Sizes
+
+```html
+<ds-number 
+  size="small"
+  count="1734"
+  label="Contributions" />
+```
diff --git a/styleguide/src/system/components/data-display/Number/style.scss b/styleguide/src/system/components/data-display/Number/style.scss
new file mode 100644
index 000000000..2899d9502
--- /dev/null
+++ b/styleguide/src/system/components/data-display/Number/style.scss
@@ -0,0 +1,15 @@
+.ds-number {
+  text-align: center;
+}
+.ds-number-count {
+  font-weight: bold;
+}
+.ds-number-label {
+  font-size: $font-size-small;
+}
+// .ds-number-size-x-large,
+// .ds-number-size-xx-large {
+//   .ds-number-label {
+//     font-size: $font-size-base;
+//   }
+// }
diff --git a/styleguide/src/system/components/navigation/Button/demo.md b/styleguide/src/system/components/navigation/Button/demo.md
index 13cc66135..5e1b0f4ae 100644
--- a/styleguide/src/system/components/navigation/Button/demo.md
+++ b/styleguide/src/system/components/navigation/Button/demo.md
@@ -30,6 +30,7 @@ Use different sizes to create hierarchy.
 <ds-button size="small">Small</ds-button>
 <ds-button>Base</ds-button>
 <ds-button size="large">Large</ds-button>
+<ds-button size="x-large">very Large</ds-button>
 ```
 
 ## Button full width
@@ -45,8 +46,8 @@ A button can take different states.
 ```
 <ds-button>Default state</ds-button>
 <ds-button disabled>Disabled state</ds-button>
-<ds-button :loading="true">Loading state</ds-button>
 <ds-button hover>Hover state</ds-button>
+<ds-button loading>Loading state</ds-button>
 ```
 
 ## Icon buttons
diff --git a/styleguide/src/system/components/typography/Text/Text.vue b/styleguide/src/system/components/typography/Text/Text.vue
index c409ea0b3..c1da4adfd 100644
--- a/styleguide/src/system/components/typography/Text/Text.vue
+++ b/styleguide/src/system/components/typography/Text/Text.vue
@@ -1,11 +1,13 @@
 <template>
-  <component 
+  <component
     :is="tag"
     class="ds-text"
     :class="[
       size && `ds-text-size-${size}`,
       color && `ds-text-${color}`,
-      bold && `ds-text-bold`
+      bold && `ds-text-bold`,
+      align && `ds-text-${align}`,
+      uppercase && `ds-text-uppercase`
     ]"
   >
     <slot />
@@ -60,7 +62,7 @@ export default {
       type: String,
       default: null,
       validator: value => {
-        return value.match(/(small|base|large|x-large)/)
+        return value.match(/(small|base|large|x-large|xx-large|xxx-large)/)
       }
     },
     /**
@@ -71,6 +73,24 @@ export default {
       default() {
         return this.$parentText ? 'span' : 'p'
       }
+    },
+    /**
+     * Align Text
+     * `left, center, right
+     */
+    align: {
+      type: String,
+      default: null,
+      validator: value => {
+        return value.match(/(left|center|right)/)
+      }
+    },
+    /**
+     * Text in Uppdercase
+     */
+    uppercase: {
+      type: Boolean,
+      default: false
     }
   }
 }
diff --git a/styleguide/src/system/components/typography/Text/demo.md b/styleguide/src/system/components/typography/Text/demo.md
index bd08f8015..ae3ef4365 100644
--- a/styleguide/src/system/components/typography/Text/demo.md
+++ b/styleguide/src/system/components/typography/Text/demo.md
@@ -2,7 +2,7 @@
 
 Use different sizes to create hierarchy.
 
-```
+```html
 <ds-text size="x-large">The quick brown fox (x-large)</ds-text>
 <ds-text size="large">The quick brown fox (large)</ds-text>
 <ds-text size="base">The quick brown fox (base)</ds-text>
@@ -13,7 +13,7 @@ Use different sizes to create hierarchy.
 
 Use colors to highlight or deemphasize.
 
-```
+```html
 <ds-text>The quick brown fox</ds-text>
 <ds-text color="soft">The quick brown fox</ds-text>
 <ds-text color="softer">The quick brown fox</ds-text>
@@ -23,12 +23,30 @@ Use colors to highlight or deemphasize.
 <ds-text color="warning">The quick brown fox</ds-text>
 ```
 
+## Text align
+
+Align text to left, center or right.
+
+```html
+<ds-text>The quick brown fox</ds-text>
+<ds-text align="center">The quick brown fox</ds-text>
+<ds-text align="right">The quick brown fox</ds-text>
+```
+
+## Text uppercase
+
+Display text in uppercase.
+
+```html
+<ds-text uppercase>The quick brown fox</ds-text>
+```
+
 ## Nesting styles
 
 Nested text components use their parents format by default.
 
-```
+```html
 <ds-text color="primary" size="large">
   The quick <ds-text bold>brown</ds-text> fox
 </ds-text>
-```
\ No newline at end of file
+```
diff --git a/styleguide/src/system/components/typography/Text/style.scss b/styleguide/src/system/components/typography/Text/style.scss
index c5f3325dc..c00524dea 100644
--- a/styleguide/src/system/components/typography/Text/style.scss
+++ b/styleguide/src/system/components/typography/Text/style.scss
@@ -9,6 +9,22 @@
   font-weight: $font-weight-bold;
 }
 
+.ds-text-left {
+  text-align: left;
+}
+
+.ds-text-center {
+  text-align: center;
+}
+
+.ds-text-right {
+  text-align: right;
+}
+
+.ds-text-uppercase {
+  text-transform: uppercase;
+}
+
 .ds-text-size-small {
   font-size: $font-size-small;
 }
@@ -25,6 +41,14 @@
   font-size: $font-size-x-large;
 }
 
+.ds-text-size-xx-large {
+  font-size: $font-size-xx-large;
+}
+
+.ds-text-size-xxx-large {
+  font-size: $font-size-xxx-large;
+}
+
 .ds-text-soft {
   color: $text-color-soft;
 }
@@ -47,4 +71,4 @@
 
 .ds-text-warning {
   color: $text-color-warning;
-}
\ No newline at end of file
+}