Pill version for action button

2 files changed, 63 insertions, 32 deletions

diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
index c0d7582..976a646 100644
--- a/tpl/objects/action-button.pug
+++ b/tpl/objects/action-button.pug
@@ -6,9 +6,13 @@ mixin action-button
             'o-action-button':        true,
             'u-d-block':              attributes.block,
             'o-action-button--quiet': attributes.quiet,
-            'o-action-button--round': attributes.round,
+            'o-action-button--pill':  attributes.pill,
+            'o-action-button--icon':  !!attributes.icon && !block,
             'is-selected':            attributes.selected
         }
+        if (attributes.size) {
+            classes['o-action-button--' + attributes.size] = true
+        }
         if (attributes.class) {
             classes[attributes.class] = true;
         }
diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug
index 8fb4e58..2c94c68 100644
--- a/tpl/views/action-button.pug
+++ b/tpl/views/action-button.pug
@@ -1,31 +1,63 @@
 mixin view-action-button 
     +view('action-button', 'Action button')
         .c-box
+            +action-button(size='sm')= 'Idle'
+            = ' '
             +action-button= 'Idle'
             = ' '
-            +action-button(selected=true)= 'Selected'
+            +action-button(size='lg')= 'Idle'
             = ' '
-            +action-button(disabled=true)= 'Disabled'
+            +action-button(size='xl')= 'Idle'
+
+        .c-box
+            +action-button(icon='trash' size='sm')
             = ' '
-            +action-button(selected=true disabled=true)= 'Selected + disabled'
-            br
-            br
-            +action-button(icon='trash')= 'Idle'
+            +action-button(icon='trash')
+            = ' '
+            +action-button(icon='trash' size='lg')
+            = ' '
+            +action-button(icon='trash' size='xl')
+
+        .c-box
+            +action-button(pill=true size='sm')= 'Idle'
             = ' '
-            +action-button(icon='trash' selected=true)= 'Selected'
+            +action-button(pill=true)= 'Idle'
             = ' '
-            +action-button(icon='trash' disabled=true)= 'Disabled'
+            +action-button(pill=true size='lg')= 'Idle'
+            = ' '
+            +action-button(pill=true size='xl')= 'Idle'
+
+        .c-box
+            +action-button(pill=true icon='trash' size='sm')
+            = ' '
+            +action-button(pill=true icon='trash')
+            = ' '
+            +action-button(pill=true icon='trash' size='lg')
+            = ' '
+            +action-button(pill=true icon='trash' size='xl')
+
+        .c-box
+            +action-button= 'Label'
+            = ' '
+            +action-button(icon='trash')= 'Label'
             = ' '
-            +action-button(icon='trash' selected=true disabled=true)= 'Selected + disabled'
-            br
-            br
             +action-button(icon='trash')
+
+        .c-box
+            +action-button(quiet=true)= 'Label'
+            = ' '
+            +action-button(quiet=true icon='trash')= 'Label'
+            = ' '
+            +action-button(quiet=true icon='trash')
+
+        .c-box
+            +action-button= 'Idle'
             = ' '
-            +action-button(icon='trash' selected=true)
+            +action-button(selected=true)= 'Selected'
             = ' '
-            +action-button(icon='trash' disabled=true)
+            +action-button(disabled=true)= 'Disabled'
             = ' '
-            +action-button(icon='trash' selected=true disabled=true)
+            +action-button(selected=true disabled=true)= 'Selected + disabled'
 
         .c-box
             +action-button(quiet=true )= 'Idle'
@@ -35,26 +67,21 @@ mixin view-action-button
             +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')
+
+        .c-box
+            +action-button(pill=true)= 'Idle'
             = ' '
-            +action-button(quiet=true icon='trash' selected=true)
+            +action-button(pill=true selected=true)= 'Selected'
             = ' '
-            +action-button(quiet=true icon='trash' disabled=true)
+            +action-button(pill=true disabled=true)= 'Disabled'
             = ' '
-            +action-button(quiet=true icon='trash' selected=true disabled=true)
+            +action-button(pill=true selected=true disabled=true)= 'Selected + disabled'
 
         .c-box
-            +action-button= 'Idle'
+            +action-button(pill=true quiet=true)= 'Idle'
             = ' '
-            +action-button(icon='trash')
+            +action-button(pill=true quiet=true selected=true)= 'Selected'
+            = ' '
+            +action-button(pill=true quiet=true disabled=true)= 'Disabled'
+            = ' '
+            +action-button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled'