From 911f281b4763e39fd5d8038a9034e32cda5b77c2 Mon Sep 17 00:00:00 2001
From: Igor Guastalla de Lima <limaguastallaigor@gmail.com>
Date: Thu, 20 Dec 2018 20:21:51 -0200
Subject: [PATCH] feat(badges): changes made that was asked by the reviewer

Removed box-sizing and border none, and classes that changed the size. Added cursor fallback and
size change by the font-size. Changed from span to a; display type; margin.

#211
---
 docs/badge.stories.js     | 18 +++++++++---------
 scss/elements/badges.scss | 31 +++++++------------------------
 2 files changed, 16 insertions(+), 33 deletions(-)

diff --git a/docs/badge.stories.js b/docs/badge.stories.js
index 220431e..e6c3255 100644
--- a/docs/badge.stories.js
+++ b/docs/badge.stories.js
@@ -1,6 +1,6 @@
 import { storiesOf } from '@storybook/html'; // eslint-disable-line import/no-extraneous-dependencies
 import { // eslint-disable-line import/no-extraneous-dependencies
-  withKnobs, radios, boolean,
+  withKnobs, radios, boolean, number
 } from '@storybook/addon-knobs';
 
 const stories = storiesOf('Badges', module);
@@ -23,17 +23,17 @@ stories.add('badges', () => {
     'is-error': 'is-error',
   }, 'is-success');
 
-  const sizes = radios('size', {
-    'is-small': 'is-small',
-    'is-medium': 'is-medium',
-    'is-large': 'is-large',
-  }, 'is-medium');
+  const fontSize = number('font-size', 1, {
+    range: true,
+    min: 0,
+    max: 100,
+    step: 0.01,
+  });
 
   const isSplited = boolean('is-splited', true) ? 'is-splited' : '';
-  const selectedClasses = [sizes, isSplited].join(' ');
 
-  return `<span class="nes-badge ${selectedClasses}">
+  return `<a href="#" class="nes-badge ${isSplited}" style="font-size:${fontSize}em">
               <span class="${optionsLeft}">npm</span>
               <span class="${optionsRight}">1.0.0</span>
-          </span>`;
+          </a>`;
 });
diff --git a/scss/elements/badges.scss b/scss/elements/badges.scss
index e06ca2a..c785cd2 100644
--- a/scss/elements/badges.scss
+++ b/scss/elements/badges.scss
@@ -36,27 +36,23 @@
 }
 
 @mixin setup($px) {
-  width: $px * 14;
-  height: $px;
-  font-size: $px * 1.2;
-  line-height: 1.5;
 }
 
 // Default style
 .nes-badge {
+  $em: 0.75em;
+  width: $em * 14;
+  height: $em;
+  font-size: $em * 1.2;
   position: relative;
-  box-sizing: border-box;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
+  display: inline-block;
   padding: 0.75em;
-  margin: 4px;
+  margin: 0.5em;
   text-align: center;
   white-space: nowrap;
   vertical-align: middle;
-  cursor: $cursor-click-url;
+  cursor: $cursor-click-url, pointer;
   user-select: none;
-  border: none;
   @include setup(7px);
 
   // Other styles
@@ -79,17 +75,4 @@
       @include badge-style(nth($type, 2), nth($type, 3), false);
     }
   }
-
-  // Other sizes
-  // prettier-ignore
-  $sizes:
-    "small" 5px,
-    "medium" 7px,
-    "large" 9px;
-
-  @each $size in $sizes {
-    &.is-#{nth($size, 1)} {
-      @include setup(nth($size, 2));
-    }
-  }
 }