improved text and button component and added a number component with label and sizes

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>

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" />
+```

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;
+//   }
+// }

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

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
     }
   }
 }

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>
-```
+```

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;
-}
+}