[WIP] Add alpha & beta badges (#1248)

* Add alpha & beta badges

* Update badge style

* Add test example on Custom Fields docs

* Update style based on designer's feedback and clean up CSS

* Test autodeploy by adding a CSS comment

* Remove examples in content

Author: pwizla

docs/.vuepress/theme/global-components/AlphaBadge.vue

@@ -0,0 +1,23 @@
+<template>
+ <CustomBadge text="Alpha" type="alpha" :withLinkIcon=withLinkIcon :link="link"/>
+</template>
+
+<script>
+export default {
+  name: 'AlphaBadge',
+  props: {
+    text: {
+      type: String,
+      default: 'Alpha',
+      // required: true // to suppress Vue warnings
+    },
+    withLinkIcon: {
+      type: Boolean,
+      default: false
+    },
+    link: {
+      type: String,
+    },
+  }
+}
+</script>

docs/.vuepress/theme/global-components/BetaBadge.vue

@@ -0,0 +1,23 @@
+<template>
+ <CustomBadge text="Beta" type="beta" :withLinkIcon=withLinkIcon :link="link"/>
+</template>
+
+<script>
+export default {
+  name: 'BetaBadge',
+  props: {
+    text: {
+      type: String,
+      default: 'Beta',
+      // required: true // to suppress Vue warnings
+    },
+    withLinkIcon: {
+      type: Boolean,
+      default: false
+    },
+    link: {
+      type: String,
+    },
+  }
+}
+</script>

docs/.vuepress/theme/global-components/CustomBadge.vue

@@ -35,5 +35,32 @@ export default {
     background-color #00b6c8
   &.bronze
     background-color #15bb70
+  &.alpha
+  &.beta
+    position relative
+    top -.2em
+    left .6em
+    text-transform uppercase
+    font-size 14px
+    font-weight 700
+    border-radius 4px
+    padding .32em .6em .25em 1.2em
+    color $neutral800
+    &::before
+      position absolute
+      content: '•'
+      font-size 1.5em
+      left .25em
+      top .12em
+      content: '•'
+      font-size 1.5em
+  &.alpha
+    background-color $danger100 // check palette.styl for values
+    &::before
+      color $danger600
+  &.beta
+    background-color $alternative100
+    &::before
+      color $alternative600
 </style>