Update button

6 files changed, 52 insertions, 17 deletions

diff --git a/package.json b/package.json
index f4b0792..a0d782a 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 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:icons": "node node_modules/iro-icons/scripts/create_sprite.js image video volume-2 arrow-right 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 8a9fb58..4e1662f 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -2,6 +2,7 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
+$sizes:         'sm' 'lg' 'xl' !default;
 $themes:        'accent' 'positive' 'negative' 'warning' !default;
 $static-themes: 'black' 'white' !default;
 
@@ -280,7 +281,7 @@ $static-themes: 'black' 'white' !default;
             }
         }
     
-        @each $size in sm lg xl {
+        @each $size in $sizes {
             @include iro.bem-modifier($size) {
                 padding-block:  fn.dim(--#{$size} --pad-b);
                 padding-inline: fn.dim(--#{$size} --pad-i);
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 98ac8ef..8f1b533 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -69,26 +69,30 @@ $static-themes: 'black' 'white' !default;
     @include iro.props-store((
         --dims: (
             --line-height: 1.4,
-            --pad-i:       fn.global-dim(--size --225),
+            --pad-i:       fn.global-dim(--size --150),
+            --pad-i-label: fn.global-dim(--size --75),
             --pad-b:       fn.global-dim(--size --65),
             --border:      fn.global-dim(--border --medium),
             --rounding:    10em,
             --font-size:   fn.global-dim(--font-size --100),
 
             --sm: (
-                --pad-i:      fn.global-dim(--size --150),
-                --pad-b:      fn.global-dim(--size --25),
-                --font-size:  fn.global-dim(--font-size --75),
+                --pad-i:       fn.global-dim(--size --100),
+                --pad-i-label: fn.global-dim(--size --50),
+                --pad-b:       fn.global-dim(--size --25),
+                --font-size:   fn.global-dim(--font-size --75),
             ),
             --lg: (
-                --pad-i:      fn.global-dim(--size --300),
-                --pad-b:      fn.global-dim(--size --100),
-                --font-size:  fn.global-dim(--font-size --150),
+                --pad-i:       fn.global-dim(--size --200),
+                --pad-i-label: fn.global-dim(--size --100),
+                --pad-b:       fn.global-dim(--size --100),
+                --font-size:   fn.global-dim(--font-size --150),
             ),
             --xl: (
-                --pad-i:      fn.global-dim(--size --400),
-                --pad-b:      fn.global-dim(--size --150),
-                --font-size:  fn.global-dim(--font-size --200),
+                --pad-i:       fn.global-dim(--size --250),
+                --pad-i-label: fn.global-dim(--size --150),
+                --pad-b:       fn.global-dim(--size --150),
+                --font-size:   fn.global-dim(--font-size --200),
             ),
             
             --key-focus: (
@@ -248,6 +252,10 @@ $static-themes: 'black' 'white' !default;
                 }
             }
         }
+
+        @include iro.bem-elem('label') {
+            margin-inline: fn.dim(--pad-i-label);
+        }
     
         @include iro.bem-modifier('block') {
             display: block;
@@ -263,6 +271,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);
+                }
             }
         }
 
diff --git a/tpl/objects/badge.pug b/tpl/objects/badge.pug
index c91e74f..48e4029 100644
--- a/tpl/objects/badge.pug
+++ b/tpl/objects/badge.pug
@@ -18,12 +18,20 @@ mixin badge(variant)
             if attributes.icon
                 +icon(attributes.icon)
                 = ' '
-            span.o-badge__label
-                block
+            if block
+                span.o-badge__label
+                    block
+            if attributes.postIcon
+                = ' '
+                +icon(attributes.postIcon)
     else
         span(class=classes)
             if attributes.icon
                 +icon(attributes.icon)
                 = ' '
-            span.o-badge__label
-                block
+            if block
+                span.o-badge__label
+                    block
+            if attributes.postIcon
+                = ' '
+                +icon(attributes.postIcon)
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index 1fa3347..0884c8d 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -20,4 +20,9 @@ mixin a-button
         if attributes.icon
             +icon(attributes.icon)
             = ' '
-        block
+        if block
+            span.o-button__label
+                block
+        if attributes.postIcon
+            = ' '
+            +icon(attributes.postIcon)
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index eacf302..edd8ef6 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -19,6 +19,15 @@ mixin view-button
             +a-button(size='xl' outline=true)= 'Button'
 
         .c-box
+            +a-button(postIcon='arrow-right' size='sm')= 'Button'
+            = ' '
+            +a-button(postIcon='arrow-right')= 'Button'
+            = ' '
+            +a-button(postIcon='arrow-right' size='lg')= 'Button'
+            = ' '
+            +a-button(postIcon='arrow-right' size='xl')= 'Button'
+
+        .c-box
             .l-button-group
                 +a-button= 'Button'
                 +a-button(disabled=true)= 'Button'