feat(badges): css improvements and added is-splited class

docs/badge.stories.js

@@ -1,13 +1,13 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
 import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, radios,
+  withKnobs, radios, boolean,
 } from '@storybook/addon-knobs';
 
 const stories = storiesOf('Badges', module);
 stories.addDecorator(withKnobs);
 
 stories.add('badges', () => {
-  const optionsLeft = radios('class-left', {
+  const optionsLeft = radios('left/only', {
     'is-dark': 'is-dark',
     'is-success': 'is-success',
     'is-primary': 'is-primary',
@@ -15,7 +15,7 @@ stories.add('badges', () => {
     'is-error': 'is-error',
   }, 'is-dark');
 
-  const optionsRight = radios('class-right', {
+  const optionsRight = radios('right', {
     'is-dark': 'is-dark',
     'is-success': 'is-success',
     'is-primary': 'is-primary',
@@ -29,7 +29,10 @@ stories.add('badges', () => {
     'is-large': 'is-large',
   }, 'is-medium');
 
-  return `<span class="nes-badge ${sizes}">
+  const isSplited = boolean('is-splited', true) ? 'is-splited' : '';
+  const selectedClasses = [sizes, isSplited].join(' ');
+
+  return `<span class="nes-badge ${selectedClasses}">
               <span class="${optionsLeft}">npm</span>
               <span class="${optionsRight}">1.0.0</span>
           </span>`;

scss/elements/badges.scss

@@ -1,36 +1,37 @@
-@mixin span-style($color, $background, $left) {
+@mixin span-style($color, $background, $option, $width: 50%) {
   position: absolute;
   top: 0;
-  width: 50%;
+  width: $width;
   color: $color;
   background-color: $background;
 
-  @if $left == 0 {
+  @if $option == left {
     left: 0;
-  } @else {
+  } @else if $option == right {
     right: 0;
   }
 }
 
-@mixin badge-style($color, $background) {
+@mixin badge-style($color, $background, $is-splited: true) {
-  &:first-child {
+  $box-shadow-first-two: 0 0.5em $background, 0 -0.5em $background;
-    @include span-style($color, $background, 0);
-    // prettier-ignore
-    box-shadow:
-      0 4px $background,
-      0 -4px $background,
-      0 0 $background,
-      -4px 0 $background;
-  }
 
-  &:last-child {
+  @if $is-splited == true {
-    @include span-style($color, $background, 1);
+    &:first-child {
-    // prettier-ignore
+      @include span-style($color, $background, left);
-    box-shadow:
+
-      0 4px $background,
+      box-shadow: $box-shadow-first-two, 0 0 $background, -0.5em 0 $background;
-      0 -4px $background,
+    }
-      4px 0 $background,
+    &:last-child {
-      0 0 $background;
+      @include span-style($color, $background, right);
+
+      box-shadow: $box-shadow-first-two, 0.5em 0 $background, 0 0 $background;
+    }
+  } @else {
+    &:first-child {
+      @include span-style($color, $background, 0, 100%);
+
+      box-shadow: $box-shadow-first-two, 0.5em 0 $background, -0.5em 0 $background;
+    }
   }
 }
 
@@ -43,21 +44,20 @@
 
 // Default style
 .nes-badge {
-  $border-size: 4px;
-
   position: relative;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0.75em;
-  margin: $border-size;
+  margin: 4px;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
   cursor: $cursor-click-url;
   user-select: none;
   border: none;
+  @include setup(7px);
 
   // Other styles
   // prettier-ignore
@@ -69,22 +69,27 @@
     "error" $background-color map-get($error-colors, "normal");
 
   @each $type in $types {
+    &.is-splited {
+      & span.is-#{nth($type, 1)} {
+        @include badge-style(nth($type, 2), nth($type, 3));
+      }
+    }
+
     & span.is-#{nth($type, 1)} {
-      @include badge-style(nth($type, 2), nth($type, 3));
+      @include badge-style(nth($type, 2), nth($type, 3), false);
     }
   }
 
-  @include setup(9px);
+  // Other sizes
+  // prettier-ignore
+  $sizes:
+    "small" 5px,
+    "medium" 7px,
+    "large" 9px;
 
-  &.is-small {
+  @each $size in $sizes {
-    @include setup(5px);
+    &.is-#{nth($size, 1)} {
-  }
+      @include setup(nth($size, 2));
-
+    }
-  &.is-medium {
-    @include setup(7px);
-  }
-
-  &.is-large {
-    @include setup(9px);
   }
 }