feat: Added neutral badge option

bloombergindustry · Jul 15, 2019 · 6858383 · 6858383
1 parent d8d9ef7
commit 6858383
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 10 deletions.
diff --git a/dev/views/Badges.vue b/dev/views/Badges.vue
@@ -48,6 +48,9 @@
  <td>
  <badge text-shade="disabled" theme="disabled" :removable ="false">Text Badge</badge>
  </td>
+ <td>
+ <badge text-shade="dark" theme="neutral" :removable ="false">Text Badge</badge>
+ </td>
  </tr>
  </table>
 
@@ -77,6 +80,9 @@
  <td>
  <badge text-shade="disabled" theme="disabled" :removable ="true">Text Badge</badge>
  </td>
+ <td>
+ <badge text-shade="dark" theme="neutral" :removable ="true">Text Badge</badge>
+ </td>
  </tr>
  </table>
  </card>

diff --git a/dev/views/NumberBadges.vue b/dev/views/NumberBadges.vue
@@ -77,6 +77,13 @@
  </template>
  </badge>
  </td>
+ <td>
+ <badge theme ="neutral" text-shade="dark" :value="1" >
+ <template v-slot:content>
+ <inbox />
+ </template>
+ </badge>
+ </td>
  <td>
  <badge theme ="disabled" text-shade="disabled" :value="0" >
  <template v-slot:content>

diff --git a/src/components/FishTankBadge.vue b/src/components/FishTankBadge.vue
@@ -31,11 +31,11 @@ export default class FishTankBadge extends Vue {
  /**
  * String representing the background color of the tag. 
  * 
- * Available themes `bgov, btax, notification-1, notification-2, notification-2, disabled` 
+ * Available themes `bgov, btax, notification-1, notification-2, notification-2, disabled, neutral` 
  */
  @Prop({default:'notification-1'})
  theme:String;
- availableThemes:["theme","bgov", "btax", "notification-1", "notification-2", "notification-3","disabled"]
+ availableThemes:["theme","bgov", "btax", "notification-1", "notification-2", "notification-3","disabled","neutral"]
 
  get themeClass() {
  switch(this.theme) {
@@ -49,6 +49,8 @@ export default class FishTankBadge extends Vue {
  return "badge-theme--color-notification-2"
  case "notification-3":
  return "badge-theme--color-notification-3"
+ case "neutral":
+ return "badge-theme--color-neutral"
  default:
  return "badge-theme--color-notification-1"
  }
@@ -200,6 +202,13 @@ export default class FishTankBadge extends Vue {
  }
  }
 
+ .badge{
+ &.badge-theme--color-neutral {
+ background: var(--badge-background-color, $color-white);
+ border: 1px solid var(--badge-background-color, $color-disabled);
+ }
+ }
+
  // remove icon (x) styles
  .remove-light{
  margin-left:5px;

diff --git a/src/components/FishTankNumberBadge.vue b/src/components/FishTankNumberBadge.vue
@@ -11,18 +11,35 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
 export default class FishTankNumberBadge extends Vue {
  
  //properties
- @Prop({default:undefined, type:Number})
- value:Number;
- @Prop({default:'light'})
+ /**
+ * Value is the number displayed in the badge chip
+ */
+ @Prop({
+ default:undefined, 
+ type:Number
+ })
+ value:Number
+
+ /**
+ * Text shade is the color of the number in the badge chip
+ */
+ @Prop({
+ default:'light'
+ })
  textShade:String
  availableShades:["light","dark","disabled"]
- @Prop({default:'notification-1'})
+
+ /**
+ * Sets a theme to the badge
+ */
+ @Prop({
+ default:'notification-1',
+ required:false
+ })
  theme:String;
- required:false;
- description:"Sets a theme to the badge"
- availableThemes:["theme","bgov", "btax", "notification-1", "notification-2", "notification-3","disabled"]
+ availableThemes:["theme","bgov", "btax", "notification-1", "notification-2", "notification-3","disabled","neutral"]
  
- // need to properly format for vue property decorator
+ // Computed properties
  get themeClass() {
  switch(this.theme) {
  case "bgov":
@@ -35,6 +52,8 @@ export default class FishTankNumberBadge extends Vue {
  return "badge-chip--color-notification-2"
  case "notification-3":
  return "badge-chip--color-notification-3"
+ case "neutral":
+ return "badge-chip--color-neutral"
  default:
  return "badge-chip--color-notification-1"
  }
@@ -172,6 +191,13 @@ export default class FishTankNumberBadge extends Vue {
  }
  }
 
+ .badge-chip{
+ &.badge-chip--color-neutral {
+ background: var(--badge-background-color, $color-white);
+ border: 1px solid $color-disabled;
+ }
+ }
+
  //text colors
  .badge-chip{
  &.text--color-light {