feat(badges): second draft of the badges component. added more classes

docs/badge.stories.js

@@ -7,7 +7,16 @@ const stories = storiesOf('Badges', module);
 stories.addDecorator(withKnobs);
 
 stories.add('badges', () => {
-  const options = radios('class', {
+  const optionsLeft = radios('class-left', {
+    'is-dark': 'is-dark',
+    'is-success': 'is-success',
+    'is-primary': 'is-primary',
+    'is-warning': 'is-warning',
+    'is-error': 'is-error',
+  }, '');
+
+  const optionsRight = radios('class-right', {
+    'is-dark': 'is-dark',
     'is-success': 'is-success',
     'is-primary': 'is-primary',
     'is-warning': 'is-warning',
@@ -20,10 +29,8 @@ stories.add('badges', () => {
     'is-large': 'is-large',
   }, '');
 
-  const selectedClasses = [options, sizes].join(' ');
-
-  return `<span class="nes-badge ${selectedClasses}">
-              <span>npm</span>
-              <span>1.0.0</span>
+  return `<span class="nes-badge ${sizes}">
+              <span class="${optionsLeft}">npm</span>
+              <span class="${optionsRight}">1.0.0</span>
           </span>`;
 });

scss/elements/badges.scss

@@ -1,26 +1,30 @@
-@mixin badge-style($color, $background) {
-  & span:first-child {
-    position: absolute;
-    top: 0;
+@mixin span-style($color, $background, $left) {
+  position: absolute;
+  color: $color;
+  background-color: $background;
+  top: 0;
+  width: 50%;
+
+  @if $left == 0 {
     left: 0;
-    width: 50%;
-    color: map-get($default-colors, "normal");
-    background-color: $base-color;
+  } @else {
+    right: 0;
+  }
+}
+
+@mixin badge-style($color, $background) {
+  &:first-child {
+    @include span-style($color, $background, 0);
     // prettier-ignore
     box-shadow:
-      0 4px $base-color,
-      0 -4px $base-color,
-      0 0 $base-color,
-      -4px 0 $base-color;
+      0 4px $background,
+      0 -4px $background,
+      0 0 $background,
+      -4px 0 $background;
   }
 
-  & span:last-child {
-    position: absolute;
-    top: 0;
-    right: 0;
-    width: 50%;
-    color: $color;
-    background-color: $background;
+  &:last-child {
+    @include span-style($color, $background, 1);
     // prettier-ignore
     box-shadow:
       0 4px $background,
@@ -34,7 +38,6 @@
   width: $px * 14;
   height: $px;
   font-size: $px * 1.2;
-  // 0.75rem;
   line-height: 1.5;
 }
 
@@ -43,7 +46,6 @@
   $border-size: 4px;
 
   position: relative;
-  box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -53,26 +55,26 @@
   white-space: nowrap;
   vertical-align: middle;
   cursor: $cursor-click-url;
+  box-sizing: border-box;
   user-select: none;
   border: none;
 
-  @include badge-style($base-color, map-get($default-colors, "normal"));
-
   // Other styles
   // prettier-ignore
   $types:
+    "dark" $background-color $base-color,
     "primary" $background-color map-get($primary-colors, "normal"),
     "success" $background-color map-get($success-colors, "normal"),
     "warning" $base-color map-get($warning-colors, "normal"),
     "error" $background-color map-get($error-colors, "normal");
 
   @each $type in $types {
-    &.is-#{nth($type, 1)} {
+    & span.is-#{nth($type, 1)} {
       @include badge-style(nth($type, 2), nth($type, 3));
     }
   }
 
-  @include setup(5px);
+  @include setup(9px);
 
   &.is-small {
     @include setup(5px);