Added text field

2 files changed, 20 insertions, 0 deletions

diff --git a/tpl/objects/icon.pug b/tpl/objects/icon.pug
new file mode 100644
index 0000000..a77a3ed
--- /dev/null
+++ b/tpl/objects/icon.pug
@@ -0,0 +1,7 @@
+mixin icon(id)
+  -
+    let href    = '../node_modules/iro-icons/src/icons/' + id + '.svg'
+    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)
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
new file mode 100644
index 0000000..9bbe0a1
--- /dev/null
+++ b/tpl/objects/text-field.pug
@@ -0,0 +1,13 @@
+include icon.pug
+
+mixin text-field
+  -
+    let classes = {
+      'o-text-field': true,
+      'is-invalid':   attributes.invalid,
+      'is-disabled':  attributes.disabled,
+    }
+
+  div(class=classes)
+    input(class='o-text-field__input')&attributes(attributes)
+    .o-text-field__bg