From dbb6887ce219342e6a110e0cef536a0c29c19f7d Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sun, 6 Feb 2022 15:06:00 +0100
Subject: Added action button

---
 package.json                    |   2 +-
 src/index.scss                  |   1 +
 src/objects/_action-button.scss | 243 ++++++++++++++++++++++++++++++++++++++++
 tpl/index.pug                   |  61 ++++++++++
 tpl/objects/action-button.pug   |  21 ++++
 5 files changed, 327 insertions(+), 1 deletion(-)
 create mode 100644 src/objects/_action-button.scss
 create mode 100644 tpl/objects/action-button.pug

diff --git a/package.json b/package.json
index b19ffa4..273342d 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 check public/icons.svg",
+        "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js check trash public/icons.svg",
         "build:style": "sass --load-path=node_modules src/index.scss public/style.css",
         "lint:style": "stylelint \"src/**/*.scss\"",
         "fix:style": "stylelint \"src/**/*.scss\" --fix",
diff --git a/src/index.scss b/src/index.scss
index 9f7f85e..1124840 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -15,6 +15,7 @@
 @import 'objects/radio';
 @import 'objects/checkbox';
 @import 'objects/switch';
+@import 'objects/action-button';
 
 @import 'layouts/form';
 
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
new file mode 100644
index 0000000..153780d
--- /dev/null
+++ b/src/objects/_action-button.scss
@@ -0,0 +1,243 @@
+@use 'iro-sass/src/index' as iro;
+
+@include iro.props-namespace('action-button') {
+    @include iro.props-store((
+        --dims: (
+            --padding-x: .6rem,
+            --padding-y: .6rem,
+            --rounding:  3px,
+        ),
+        --colors: (
+            --bg:     iro.props-get(--colors --bg-hi, $global: true),
+            --label:  iro.props-get(--colors --fg, $global: true),
+            --border: iro.props-get(--colors --obj-lo, $global: true),
+            --shadow: 0 0 0 0 transparent,
+    
+            --hover: (
+                --bg:     iro.props-get(--colors --bg-hi2, $global: true),
+                --label:  iro.props-get(--colors --fg-lo, $global: true),
+                --border: iro.props-get(--colors --fg-hi2, $global: true),
+                --shadow: 0 0 0 0 transparent,
+            ),
+            --active: (
+                --bg:     iro.props-get(--colors --obj-hi, $global: true),
+                --label:  iro.props-get(--colors --fg-lo, $global: true),
+                --border: iro.props-get(--colors --fg-hi2, $global: true),
+                --shadow: 0 0 0 0 transparent,
+            ),
+            --selected: (
+                --bg:     iro.props-get(--colors --obj-hi, $global: true),
+                --label:  iro.props-get(--colors --fg-lo, $global: true),
+                --border: iro.props-get(--colors --fg-hi3, $global: true),
+                --shadow: 0 0 0 0 transparent,
+    
+                --hover: (
+                    --border: iro.props-get(--colors --fg-hi2, $global: true),
+                    --shadow: 0 0 0 0 transparent,
+                ),
+                --key-focus: (
+                    --bg: iro.props-get(--colors --obj-hi, $global: true),
+                ),
+            ),
+            --disabled: (
+                --bg:     iro.props-get(--colors --obj-hi, $global: true),
+                --label:  iro.props-get(--colors --fg-hi3, $global: true),
+                --border: iro.props-get(--colors --obj-hi, $global: true),
+                --shadow: 0 0 0 0 transparent,
+            ),
+            --key-focus: (
+                --bg:     iro.props-get(--colors --bg-hi2, $global: true),
+                --label:  iro.props-get(--colors --fg-lo, $global: true),
+                --border: iro.props-get(--colors --focus --fill, $global: true),
+                --shadow: iro.props-get(--colors --focus --shadow, $global: true),
+            ),
+            --quiet: (
+                --label: iro.props-get(--colors --fg, $global: true),
+    
+                --hover: (
+                    --bg:    iro.props-get(--colors --obj-hi, $global: true),
+                    --label: iro.props-get(--colors --fg-lo, $global: true),
+                ),
+                --active: (
+                    --bg:    iro.props-get(--colors --obj, $global: true),
+                    --label: iro.props-get(--colors --fg-lo, $global: true),
+                ),
+                --selected: (
+                    --bg:    iro.props-get(--colors --obj-hi, $global: true),
+                    --label: iro.props-get(--colors --fg-lo, $global: true),
+    
+                    --key-focus: (
+                        --bg: iro.props-get(--colors --obj, $global: true),
+                    ),
+                ),
+                --disabled: (
+                    --label: iro.props-get(--colors --fg-hi3, $global: true),
+                ),
+                --key-focus: (
+                    --bg:     iro.props-get(--colors --bg-hi2, $global: true),
+                    --label:  iro.props-get(--colors --fg-lo, $global: true),
+                    --border: iro.props-get(--colors --focus --fill, $global: true),
+                    --shadow: iro.props-get(--colors --focus --shadow, $global: true),
+                ),
+            ),
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:          inline-block;
+        padding:          iro.props-get(--dims --padding-y) iro.props-get(--dims --padding-x);
+        border:           1px solid iro.props-get(--colors --border);
+        border-radius:    iro.props-get(--dims --rounding);
+        background-color: iro.props-get(--colors --bg);
+        box-shadow:       iro.props-get(--colors --shadow);
+        color:            iro.props-get(--colors --label);
+        line-height:      1;
+        text-align:       center;
+        text-decoration:  none;
+        text-overflow:    ellipsis;
+        white-space:      nowrap;
+    
+        @include iro.bem-multi('&:link, &:visited', 'modifier:' 'native') {
+            &:hover {
+                border-color:     iro.props-get(--colors --hover --border);
+                background-color: iro.props-get(--colors --hover --bg);
+                box-shadow:       iro.props-get(--colors --hover --shadow);
+                color:            iro.props-get(--colors --hover --label);
+            }
+    
+            &:active {
+                border-color:     iro.props-get(--colors --active --border);
+                background-color: iro.props-get(--colors --active --bg);
+                box-shadow:       iro.props-get(--colors --active --shadow);
+                color:            iro.props-get(--colors --active --label);
+            }
+        }
+    
+        @include iro.bem-at-theme('keyboard') {
+            &:focus {
+                border-color:     iro.props-get(--colors --key-focus --border);
+                background-color: iro.props-get(--colors --key-focus --bg);
+                box-shadow:       inset 0 0 0 1px iro.props-get(--colors --key-focus --border), iro.props-get(--colors --key-focus --shadow);
+                color:            iro.props-get(--colors --key-focus --label);
+            }
+        }
+    
+        @include iro.bem-is('selected') {
+            border-color:     iro.props-get(--colors --selected --border);
+            background-color: iro.props-get(--colors --selected --bg);
+            box-shadow:       iro.props-get(--colors --selected --shadow);
+            color:            iro.props-get(--colors --selected --label);
+    
+            @include iro.bem-multi('&:link, &:visited', 'modifier:' 'native') {
+                &:hover,
+                &:active {
+                    border-color:     iro.props-get(--colors --selected --hover --border);
+                    background-color: iro.props-get(--colors --selected --bg);
+                    box-shadow:       iro.props-get(--colors --selected --hover --shadow);
+                    color:            iro.props-get(--colors --selected --label);
+                }
+            }
+    
+            @include iro.bem-at-theme('keyboard') {
+                &:focus {
+                    border-color:     iro.props-get(--colors --key-focus --border);
+                    background-color: iro.props-get(--colors --selected --key-focus --bg);
+                    box-shadow:       inset 0 0 0 1px iro.props-get(--colors --key-focus --border), iro.props-get(--colors --key-focus --shadow);
+                    color:            iro.props-get(--colors --key-focus --label);
+                }
+            }
+        }
+    
+        @include iro.bem-modifier('quiet') {
+            border-color:     transparent;
+            background-color: transparent;
+            box-shadow:       none;
+            color:            iro.props-get(--colors --quiet --label);
+    
+            @include iro.bem-multi('&:link, &:visited', 'modifier:' 'native') {
+                &:hover {
+                    border-color:     transparent;
+                    background-color: iro.props-get(--colors --quiet --hover --bg);
+                    box-shadow:       none;
+                    color:            iro.props-get(--colors --quiet --hover --label);
+                }
+    
+                &:active {
+                    border-color:     transparent;
+                    background-color: iro.props-get(--colors --quiet --active --bg);
+                    box-shadow:       none;
+                    color:            iro.props-get(--colors --quiet --active --label);
+                }
+            }
+    
+            @include iro.bem-at-theme('keyboard') {
+                &:focus {
+                    border-color:     iro.props-get(--colors --quiet --key-focus --border);
+                    background-color: iro.props-get(--colors --quiet --key-focus --bg);
+                    box-shadow:       inset 0 0 0 1px iro.props-get(--colors --quiet --key-focus --border), iro.props-get(--colors --quiet --key-focus --shadow);
+                    color:            iro.props-get(--colors --quiet --key-focus --label);
+                }
+            }
+    
+            @include iro.bem-is('selected') {
+                border-color:     transparent;
+                background-color: iro.props-get(--colors --quiet --selected --bg);
+                box-shadow:       none;
+                color:            iro.props-get(--colors --quiet --selected --label);
+    
+                @include iro.bem-multi('&:link, &:visited', 'modifier:' 'native') {
+                    &:hover,
+                    &:active {
+                        border-color:     transparent;
+                        background-color: iro.props-get(--colors --quiet --selected --bg);
+                        box-shadow:       none;
+                        color:            iro.props-get(--colors --quiet --selected --label);
+                    }
+                }
+    
+                @include iro.bem-at-theme('keyboard') {
+                    &:focus {
+                        border-color:     iro.props-get(--colors --quiet --key-focus --border);
+                        background-color: iro.props-get(--colors --quiet --selected --key-focus --bg);
+                        box-shadow:       inset 0 0 0 1px iro.props-get(--colors --quiet --key-focus --border), iro.props-get(--colors --quiet --key-focus --shadow);
+                        color:            iro.props-get(--colors --quiet --key-focus --label);
+                    }
+                }
+            }
+        }
+    
+        @include iro.bem-is('disabled') {
+            border-color:     iro.props-get(--colors --disabled --border);
+            background-color: iro.props-get(--colors --disabled --bg);
+            box-shadow:       iro.props-get(--colors --disabled --shadow);
+            color:            iro.props-get(--colors --disabled --label);
+    
+            @include iro.bem-multi('&:link, &:visited', 'modifier:' 'native') {
+                &:hover,
+                &:active {
+                    border-color:     iro.props-get(--colors --disabled --border);
+                    background-color: iro.props-get(--colors --disabled --bg);
+                    box-shadow:       iro.props-get(--colors --disabled --shadow);
+                    color:            iro.props-get(--colors --disabled --label);
+                }
+            }
+    
+            @include iro.bem-modifier('quiet') {
+                border-color:     transparent;
+                background-color: transparent;
+                box-shadow:       none;
+                color:            iro.props-get(--colors --quiet --disabled --label);
+    
+                @include iro.bem-multi('&:link, &:visited', 'modifier:' 'native') {
+                    &:hover,
+                    &:active {
+                        border-color:     transparent;
+                        background-color: transparent;
+                        box-shadow:       none;
+                        color:            iro.props-get(--colors --quiet --disabled --label);
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/tpl/index.pug b/tpl/index.pug
index 6971faa..2980016 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -12,6 +12,7 @@ include objects/radio.pug
 include objects/checkbox.pug
 include objects/switch.pug
 include objects/form.pug
+include objects/action-button.pug
 
 mixin box 
     +container(padX=true padY=true inPage=true theme="raised")
@@ -302,3 +303,63 @@ html
 
                     +form-item('')
                         +a-button(variant='primary')= 'Register'
+
+            //-----------------------------------------
+
+            +h1-heading(level='xl')= 'Action button'
+            +rule(level='medium')
+
+            +box
+                +action-button= 'Idle'
+                = ' '
+                +action-button(selected=true)= 'Selected'
+                = ' '
+                +action-button(disabled=true)= 'Disabled'
+                = ' '
+                +action-button(selected=true disabled=true)= 'Selected + disabled'
+                br
+                br
+                +action-button(icon='trash')= 'Idle'
+                = ' '
+                +action-button(icon='trash' selected=true)= 'Selected'
+                = ' '
+                +action-button(icon='trash' disabled=true)= 'Disabled'
+                = ' '
+                +action-button(icon='trash' selected=true disabled=true)= 'Selected + disabled'
+                br
+                br
+                +action-button(icon='trash')
+                = ' '
+                +action-button(icon='trash' selected=true)
+                = ' '
+                +action-button(icon='trash' disabled=true)
+                = ' '
+                +action-button(icon='trash' selected=true disabled=true)
+
+            +box
+                +action-button(quiet=true )= 'Idle'
+                = ' '
+                +action-button(quiet=true selected=true)= 'Selected'
+                = ' '
+                +action-button(quiet=true disabled=true)= 'Disabled'
+                = ' '
+                +action-button(quiet=true selected=true disabled=true)= 'Selected + disabled'
+                br
+                br
+                +action-button(quiet=true icon='trash')= 'Idle'
+                = ' '
+                +action-button(quiet=true icon='trash' selected=true)= 'Selected'
+                = ' '
+                +action-button(quiet=true icon='trash' disabled=true)= 'Disabled'
+                = ' '
+                +action-button(quiet=true icon='trash' selected=true disabled=true)= 'Selected + disabled'
+                br
+                br
+                +action-button(quiet=true icon='trash')
+                = ' '
+                +action-button(quiet=true icon='trash' selected=true)
+                = ' '
+                +action-button(quiet=true icon='trash' disabled=true)
+                = ' '
+                +action-button(quiet=true icon='trash' selected=true disabled=true)
+
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
new file mode 100644
index 0000000..0afe1ea
--- /dev/null
+++ b/tpl/objects/action-button.pug
@@ -0,0 +1,21 @@
+include icon.pug
+
+mixin action-button
+  -
+    let classes = {
+      'o-action-button':        true,
+      'o-action-button--block': attributes.block,
+      'o-action-button--quiet': attributes.quiet,
+      'is-disabled':            attributes.disabled,
+      'is-selected':            attributes.selected
+    }
+    
+    let href = attributes.disabled ? null : '#';
+
+  a(class=classes href=href)
+    if attributes.icon
+      +icon(attributes.icon)
+      = ' '
+    if block
+      span.o-action-button__label
+        block
-- 
cgit v1.2.3-54-g00ecf