Added checkbox and switch

5 files changed, 94 insertions, 4 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index 93c2057..8595be0 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -9,6 +9,8 @@ include objects/button.pug
 include objects/text-field.pug
 include objects/field-label.pug
 include objects/radio.pug
+include objects/checkbox.pug
+include objects/switch.pug
 
 mixin box 
     +container(padX=true padY=true inPage=true theme="raised")
@@ -214,3 +216,55 @@ html
                 +radio(name="radio-demo-2" disabled=true)= 'Cats'
                 +radio(name="radio-demo-2" disabled=true)= 'Dogs'
                 +radio(name="radio-demo-2" checked=true disabled=true)= 'Foxes'
+                br
+                +radio(accent=true name="radio-demo-3")= 'Cats'
+                +radio(accent=true name="radio-demo-3")= 'Dogs'
+                +radio(accent=true name="radio-demo-3" checked=true)= 'Foxes'
+                br
+                +radio(accent=true name="radio-demo-4" disabled=true)= 'Cats'
+                +radio(accent=true name="radio-demo-4" disabled=true)= 'Dogs'
+                +radio(accent=true name="radio-demo-4" checked=true disabled=true)= 'Foxes'
+
+            //-----------------------------------------
+
+            +h1-heading(level='xl')= 'Checkbox'
+            +rule(level='medium')
+
+            +box
+                +checkbox(indeterminate=true)= 'Cats'
+                +checkbox= 'Dogs'
+                +checkbox(checked=true)= 'Foxes'
+                br
+                +checkbox(indeterminate=true disabled=true)= 'Cats'
+                +checkbox(disabled=true)= 'Dogs'
+                +checkbox(checked=true disabled=true)= 'Foxes'
+                br
+                +checkbox(accent=true indeterminate=true)= 'Cats'
+                +checkbox(accent=true)= 'Dogs'
+                +checkbox(accent=true checked=true)= 'Foxes'
+                br
+                +checkbox(accent=true indeterminate=true disabled=true)= 'Cats'
+                +checkbox(accent=true disabled=true)= 'Dogs'
+                +checkbox(accent=true checked=true disabled=true)= 'Foxes'
+
+            //-----------------------------------------
+
+            +h1-heading(level='xl')= 'Switch'
+            +rule(level='medium')
+
+            +box
+                +switch= 'Cats'
+                +switch= 'Dogs'
+                +switch(checked=true)= 'Foxes'
+                br
+                +switch(disabled=true)= 'Cats'
+                +switch(disabled=true)= 'Dogs'
+                +switch(checked=true disabled=true)= 'Foxes'
+                br
+                +switch(accent=true)= 'Cats'
+                +switch(accent=true)= 'Dogs'
+                +switch(accent=true checked=true)= 'Foxes'
+                br
+                +switch(accent=true disabled=true)= 'Cats'
+                +switch(accent=true disabled=true)= 'Dogs'
+                +switch(accent=true checked=true disabled=true)= 'Foxes'
diff --git a/tpl/objects/checkbox.pug b/tpl/objects/checkbox.pug
new file mode 100644
index 0000000..874505b
--- /dev/null
+++ b/tpl/objects/checkbox.pug
@@ -0,0 +1,18 @@
+include icon.pug
+
+mixin checkbox
+    -
+        let classes = {
+            'o-checkbox':         true,
+            'o-checkbox--accent': attributes.accent,
+        }
+
+    label(class=classes)
+        input.o-checkbox__native(
+            type='checkbox'
+            class={ 'is-indeterminate': attributes.indeterminate }
+        )&attributes(attributes)
+        .o-checkbox__box
+            +icon('check')(class='o-checkbox__check-icon')
+        .o-checkbox__label
+            block
diff --git a/tpl/objects/icon.pug b/tpl/objects/icon.pug
index a77a3ed..0e444f9 100644
--- a/tpl/objects/icon.pug
+++ b/tpl/objects/icon.pug
@@ -1,7 +1,7 @@
 mixin icon(id)
   -
-    let href    = '../node_modules/iro-icons/src/icons/' + id + '.svg'
+    let href    = 'icons.svg#' + id
     let classes = attributes.class ? attributes.class : ''
 
-  svg(class=['o-icon', 'o-icon--iro', 'o-icon--iro-' + id, classes] width='1em' height='1em')
-    use(xlink:href=href)
+  svg(class=['o-icon', classes] width='1em' height='1em')
+    use(href=href)
diff --git a/tpl/objects/radio.pug b/tpl/objects/radio.pug
index da6a026..8cb1b1f 100644
--- a/tpl/objects/radio.pug
+++ b/tpl/objects/radio.pug
@@ -1,5 +1,11 @@
 mixin radio
-    label.o-radio
+    -
+        let classes = {
+            'o-radio':         true,
+            'o-radio--accent': attributes.accent,
+        }
+
+    label(class=classes)
         input.o-radio__native(type='radio')&attributes(attributes)
         .o-radio__circle
         .o-radio__label
diff --git a/tpl/objects/switch.pug b/tpl/objects/switch.pug
new file mode 100644
index 0000000..0c9c1ab
--- /dev/null
+++ b/tpl/objects/switch.pug
@@ -0,0 +1,12 @@
+mixin switch
+    -
+        let classes = {
+            'o-switch':         true,
+            'o-switch--accent': attributes.accent,
+        }
+
+    label(class=classes)
+        input.o-switch__native(type='checkbox')&attributes(attributes)
+        .o-switch__indicator
+        .o-switch__label
+            block