Navbar: Better icon integration

5 files changed, 36 insertions, 18 deletions

diff --git a/package.json b/package.json
index ff42d59..cc74db1 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,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 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:icons": "node node_modules/iro-icons/scripts/create_sprite.js image video volume-2 arrow-right arrow-left 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/_navbar.scss b/src/objects/_navbar.scss
index af3406a..d245e2e 100644
--- a/src/objects/_navbar.scss
+++ b/src/objects/_navbar.scss
@@ -15,7 +15,11 @@
         display:    flex;
         block-size: props.get(vars.$block-size);
 
-        @include bem.elem('item-label') {
+        @include bem.elem('item-content-text') {
+            margin-inline: props.get(vars.$item--pad-i-label);
+        }
+
+        @include bem.elem('item-content') {
             position:        relative;
             padding-block:   props.get(vars.$item--pad-b);
             padding-inline:  props.get(vars.$item--pad-i);
@@ -60,13 +64,13 @@
                 &:focus-visible {
                     color: props.get(vars.$default-theme, --hover, --label-color);
 
-                    @include bem.elem('item-label') {
+                    @include bem.elem('item-content') {
                         background-color: props.get(vars.$default-theme, --hover, --bg-color);
                     }
                 }
 
                 &:focus-visible {
-                    @include bem.elem('item-label') {
+                    @include bem.elem('item-content') {
                         &::after {
                             display: block;
                         }
@@ -76,7 +80,7 @@
                 &:active {
                     color: props.get(vars.$default-theme, --active, --label-color);
 
-                    @include bem.elem('item-label') {
+                    @include bem.elem('item-content') {
                         background-color: props.get(vars.$default-theme, --active, --bg-color);
                     }
                 }
@@ -86,7 +90,7 @@
                 font-weight: bold;
                 color:       props.get(vars.$default-theme, --selected, --disabled, --label-color);
 
-                @include bem.elem('item-label') {
+                @include bem.elem('item-content') {
                     background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color);
                 }
 
@@ -95,7 +99,7 @@
                 &:enabled {
                     color: props.get(vars.$default-theme, --selected, --label-color);
 
-                    @include bem.elem('item-label') {
+                    @include bem.elem('item-content') {
                         background-color: props.get(vars.$default-theme, --selected, --bg-color);
                     }
 
@@ -103,7 +107,7 @@
                     &:focus-visible {
                         color: props.get(vars.$default-theme, --selected, --hover, --label-color);
 
-                        @include bem.elem('item-label') {
+                        @include bem.elem('item-content') {
                             background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color);
                         }
                     }
@@ -111,7 +115,7 @@
                     &:active {
                         color: props.get(vars.$default-theme, --selected, --active, --label-color);
 
-                        @include bem.elem('item-label') {
+                        @include bem.elem('item-content') {
                             background-color: props.get(vars.$default-theme, --selected, --active, --bg-color);
                         }
                     }
@@ -148,7 +152,7 @@
                 @include bem.is('selected') {
                     color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color);
 
-                    @include bem.elem('item-label') {
+                    @include bem.elem('item-content') {
                         background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color);
                     }
 
@@ -157,7 +161,7 @@
                     &:enabled {
                         color: props.get(vars.$default-theme, --quiet, --selected, --label-color);
 
-                        @include bem.elem('item-label') {
+                        @include bem.elem('item-content') {
                             background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color);
                         }
 
@@ -165,7 +169,7 @@
                         &:focus-visible {
                             color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color);
 
-                            @include bem.elem('item-label') {
+                            @include bem.elem('item-content') {
                                 background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color);
                             }
                         }
@@ -173,7 +177,7 @@
                         &:active {
                             color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color);
 
-                            @include bem.elem('item-label') {
+                            @include bem.elem('item-content') {
                                 background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color);
                             }
                         }
diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss
index 5839eff..da280fd 100644
--- a/src/objects/_navbar.vars.scss
+++ b/src/objects/_navbar.vars.scss
@@ -6,9 +6,10 @@
 $block-size: props.def(--o-navbar--block-size, props.get(core.$size--800)) !default;
 $spacing:    props.def(--o-navbar--spacing, props.get(core.$size--200)) !default;
 
-$item--pad-i:     props.def(--o-navbar--item--pad-i, props.get(core.$size--175)) !default;
-$item--pad-b:     props.def(--o-navbar--item--pad-b, props.get(core.$size--40)) !default;
-$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default;
+$item--pad-i:       props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default;
+$item--pad-i-label: props.def(--o-action-button--pad-i-label, props.get(core.$size--25)) !default;
+$item--pad-b:       props.def(--o-navbar--item--pad-b, props.get(core.$size--40)) !default;
+$item--font-size:   props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default;
 
 $key-focus--border-width:  props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
 $key-focus--border-offset: props.def(--o-navbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
diff --git a/tpl/objects/navbar.pug b/tpl/objects/navbar.pug
index bca8c90..5c7642c 100644
--- a/tpl/objects/navbar.pug
+++ b/tpl/objects/navbar.pug
@@ -26,5 +26,12 @@ mixin navbar-item
         }
 
     #{!!attributes.tag ? attributes.tag : 'button'}(class=classes)&attributes(attributes)
-        .o-navbar__item-label
-            block
+        .o-navbar__item-content
+            if attributes.icon
+                +icon(attributes.icon)
+                = ' '
+            span.o-navbar__item-content-text
+                block
+            if attributes.postIcon
+                = ' '
+                +icon(attributes.postIcon)
diff --git a/tpl/views/navbar.pug b/tpl/views/navbar.pug
index 03f1591..345a22b 100644
--- a/tpl/views/navbar.pug
+++ b/tpl/views/navbar.pug
@@ -11,3 +11,9 @@ mixin view-navbar
                 +navbar-item= 'Home'
                 +navbar-item(selected=true)= 'Art'
                 +navbar-item= 'Emojis'
+
+        .c-box
+            +navbar(quiet=true)
+                +navbar-item(selected=true icon="arrow-left")= 'Home'
+                +navbar-item= 'Art'
+                +navbar-item= 'Emojis'