imporved heading component

styleguide/src/system/components/typography/Heading/Heading.vue

@@ -4,8 +4,10 @@
     class="ds-heading"
     :class="[
       `ds-heading-${size || tag}`,
+      align && `ds-heading-align-${align}`,
       primary && `ds-heading-primary`,
-      soft && `ds-heading-soft`
+      soft && `ds-heading-soft`,
+      noMargin && `ds-heading-no-margin`
     ]"
   >
     <slot />
@@ -59,6 +61,25 @@ export default {
     soft: {
       type: Boolean,
       default: false
+    },
+    /**
+     * Remove Margin
+     * `true, false`
+     */
+    noMargin: {
+      type: Boolean,
+      default: false
+    },
+    /**
+     * Text Align
+     * `left, center, right`
+     */
+    align: {
+      type: String,
+      default: null,
+      validator: value => {
+        return value.match(/(left|center|right)/)
+      }
     }
   }
 }

styleguide/src/system/components/typography/Heading/demo.md

@@ -31,4 +31,23 @@ Use primary headings for important headlines, like a page title. Use soft headin
 ```
 <ds-heading primary>The quick brown fox</ds-heading>
 <ds-heading soft>The quick brown fox</ds-heading>
-```
+```
+
+## No Margin
+
+You can remove the margin easily
+
+```
+<ds-heading no-margin>The quick brown fox</ds-heading>
+<ds-heading no-margin>The quick brown fox</ds-heading>
+```
+
+## Text Align
+
+Align text
+
+```
+<ds-heading align="left">The quick brown fox</ds-heading>
+<ds-heading align="center">The quick brown fox</ds-heading>
+<ds-heading align="right">The quick brown fox</ds-heading>
+```

styleguide/src/system/components/typography/Heading/style.scss

@@ -40,4 +40,18 @@
 
 .ds-heading-h6 {
   font-size: $font-size-small;
-}
+}
+
+.ds-heading-no-margin {
+  margin: 0;
+}
+
+.ds-heading-align-left {
+  text-align: left
+}
+.ds-heading-align-center {
+  text-align: center
+}
+.ds-heading-align-right {
+  text-align: right
+}