Better badge

4 files changed, 69 insertions, 22 deletions

diff --git a/package.json b/package.json
index 81ec80a..f4b0792 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
         "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets",
         "build:assets": "cp -r static/* public/",
         "build:app": "pug tpl/index.pug -p tpl --out public/",
-        "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js video volume-2 check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile repeat heart star arrow-corner-down-left public/icons.svg",
+        "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js image video volume-2 check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile repeat heart star arrow-corner-down-left public/icons.svg",
         "build:style": "sass --load-path=node_modules src_demo/index.scss public/style.css",
         "lint:style": "stylelint \"src/**/*.scss\"",
         "fix:style": "stylelint \"src/**/*.scss\" --fix",
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 06261b8..8a9fb58 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -55,29 +55,33 @@ $static-themes: 'black' 'white' !default;
 @include iro.props-namespace('badge') {
     @include iro.props-store((
         --dims: (
-            --pad-b:      fn.global-dim(--size --50),
-            --pad-i:      fn.global-dim(--size --150),
-            --pad-i-pill: fn.global-dim(--size --200),
-            --rounding:   fn.global-dim(--rounding),
-            --font-size:  fn.global-dim(--font-size --75),
+            --pad-b:       fn.global-dim(--size --50),
+            --pad-i:       fn.global-dim(--size --100),
+            --pad-i-pill:  fn.global-dim(--size --150),
+            --pad-i-label: fn.global-dim(--size --50),
+            --rounding:    fn.global-dim(--rounding),
+            --font-size:   fn.global-dim(--font-size --75),
 
             --sm: (
-                --pad-b:      fn.global-dim(--size --25),
-                --pad-i:      fn.global-dim(--size --115),
-                --pad-i-pill: fn.global-dim(--size --150),
-                --font-size:  fn.global-dim(--font-size --50),
+                --pad-b:       fn.global-dim(--size --25),
+                --pad-i:       fn.global-dim(--size --75),
+                --pad-i-pill:  fn.global-dim(--size --125),
+                --pad-i-label: fn.global-dim(--size --25),
+                --font-size:   fn.global-dim(--font-size --50),
             ),
             --lg: (
-                --pad-b:      fn.global-dim(--size --75),
-                --pad-i:      fn.global-dim(--size --175),
-                --pad-i-pill: fn.global-dim(--size --225),
-                --font-size:  fn.global-dim(--font-size --100),
-            ),
-            --xl: (
-                --pad-b:      fn.global-dim(--size --100),
-                --pad-i:      fn.global-dim(--size --225),
-                --pad-i-pill: fn.global-dim(--size --300),
-                --font-size:  fn.global-dim(--font-size --150),
+                --pad-b:       fn.global-dim(--size --75),
+                --pad-i:       fn.global-dim(--size --125),
+                --pad-i-pill:  fn.global-dim(--size --175),
+                --pad-i-label: fn.global-dim(--size --50),
+                --font-size:   fn.global-dim(--font-size --100),
+            ), 
+            --xl: ( 
+                --pad-b:       fn.global-dim(--size --100),
+                --pad-i:       fn.global-dim(--size --150),
+                --pad-i-pill:  fn.global-dim(--size --225),
+                --pad-i-label: fn.global-dim(--size --75),
+                --font-size:   fn.global-dim(--font-size --150),
             ),
             
             --key-focus: (
@@ -223,6 +227,10 @@ $static-themes: 'black' 'white' !default;
             }
         }
 
+        @include iro.bem-elem('label') {
+            margin-inline: fn.dim(--pad-i-label);
+        }
+
         @include iro.bem-modifier('quiet') {
             background-color: fn.color(--quiet --bg);
             color:            fn.color(--quiet --label);
@@ -277,6 +285,10 @@ $static-themes: 'black' 'white' !default;
                 padding-block:  fn.dim(--#{$size} --pad-b);
                 padding-inline: fn.dim(--#{$size} --pad-i);
                 font-size:      fn.dim(--#{$size} --font-size);
+
+                @include iro.bem-elem('label') {
+                    margin-inline: fn.dim(--#{$size} --pad-i-label);
+                }
         
                 @include iro.bem-modifier('pill') {
                     padding-inline: fn.dim(--#{$size} --pad-i-pill);
diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug
index 500f062..c91e74f 100644
--- a/tpl/objects/badge.pug
+++ b/tpl/objects/badge.pug
@@ -15,7 +15,15 @@ mixin badge(variant)
 
     if attributes.href
         a(href=attributes.href class=classes)
-            block
+            if attributes.icon
+                +icon(attributes.icon)
+                = ' '
+            span.o-badge__label
+                block
     else
         span(class=classes)
-            block
+            if attributes.icon
+                +icon(attributes.icon)
+                = ' '
+            span.o-badge__label
+                block
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug
index e1aa9e2..cc1f346 100644
--- a/tpl/views/badge.pug
+++ b/tpl/views/badge.pug
@@ -10,6 +10,33 @@ mixin view-badge
             +badge(size='xl' href='#')= '300'
 
         .c-box
+            +badge(pill=true size='sm' href='#')= '50'
+            = ' '
+            +badge(pill=true href='#')= '100'
+            = ' '
+            +badge(pill=true size='lg' href='#')= '200'
+            = ' '
+            +badge(pill=true size='xl' href='#')= '300'
+
+        .c-box
+            +badge(icon='image' size='sm' href='#')= '50'
+            = ' '
+            +badge(icon='image' href='#')= '100'
+            = ' '
+            +badge(icon='image' size='lg' href='#')= '200'
+            = ' '
+            +badge(icon='image' size='xl' href='#')= '300'
+
+        .c-box
+            +badge(pill=true icon='image' size='sm' href='#')= '50'
+            = ' '
+            +badge(pill=true icon='image' href='#')= '100'
+            = ' '
+            +badge(pill=true icon='image' size='lg' href='#')= '200'
+            = ' '
+            +badge(pill=true icon='image' size='xl' href='#')= '300'
+
+        .c-box
             +badge(href='#')= '100'
             = ' '
             +badge(quiet=true href='#')= '100'