Added field-label

4 files changed, 103 insertions, 2 deletions

diff --git a/tpl/index.pug b/tpl/index.pug
index 7dab86f..e3918de 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -7,6 +7,7 @@ include objects/heading.pug
 include objects/rule.pug
 include objects/button.pug
 include objects/text-field.pug
+include objects/field-label.pug
 
 mixin box 
     +container(padX=true padY=true inPage=true theme="raised")
@@ -121,3 +122,80 @@ html
                 br
                 br
                 +text-field(value='Incorrect input' pattern='a+' required=true disabled=true)
+
+            //-----------------------------------------
+
+            +h1-heading(level='xl')= 'Field label'
+            +rule(level='medium')
+
+            +box
+                +field-label('First name')
+                    +text-field(placeholder='Placeholder')
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')
+                    +text-field(placeholder='Placeholder' type='password')
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')(invalid=true)
+                    +text-field(placeholder='Placeholder' type='password' invalid=true)
+                br
+                br
+                +field-label('First name')(disabled=true)
+                    +text-field(placeholder='Placeholder' disabled=true)
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')(disabled=true)
+                    +text-field(placeholder='Placeholder' type='password' disabled=true)
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')(invalid=true disabled=true)
+                    +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
+
+            +box
+                +field-label('First name')(align='left' labelWidth='100px')
+                    +text-field(placeholder='Placeholder')
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px')
+                    +text-field(placeholder='Placeholder' type='password')
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true)
+                    +text-field(placeholder='Placeholder' type='password' invalid=true)
+                br
+                br
+                +field-label('First name')(align='left' labelWidth='100px' disabled=true)
+                    +text-field(placeholder='Placeholder' disabled=true)
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' disabled=true)
+                    +text-field(placeholder='Placeholder' type='password' disabled=true)
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')(align='left' labelWidth='100px' invalid=true disabled=true)
+                    +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
+
+            +box
+                +field-label('First name')(align='right' labelWidth='100px')
+                    +text-field(placeholder='Placeholder')
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px')
+                    +text-field(placeholder='Placeholder' type='password')
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true)
+                    +text-field(placeholder='Placeholder' type='password' invalid=true)
+                br
+                br
+                +field-label('First name')(align='right' labelWidth='100px' disabled=true)
+                    +text-field(placeholder='Placeholder' disabled=true)
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' disabled=true)
+                    +text-field(placeholder='Placeholder' type='password' disabled=true)
+                br
+                br
+                +field-label('Password', 'At least 6 characters required')(align='right' labelWidth='100px' invalid=true disabled=true)
+                    +text-field(placeholder='Placeholder' type='password' invalid=true disabled=true)
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index 243ff58..3b10ea0 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -12,5 +12,5 @@ mixin a-button
 
         let href = attributes.disabled ? null : '#';
 
-    a(class=classes href=href)
+    a(class=classes href=href aria-disabled=attributes.disabled && String(attributes.disabled))
         block
diff --git a/tpl/objects/field-label.pug b/tpl/objects/field-label.pug
new file mode 100644
index 0000000..151e084
--- /dev/null
+++ b/tpl/objects/field-label.pug
@@ -0,0 +1,23 @@
+mixin field-label(label, hint=null)
+    -
+        let classes = {
+            'o-field-label':        true,
+            'o-field-label--left':  attributes.align === 'left',
+            'o-field-label--right': attributes.align === 'right',
+            'is-invalid':           attributes.invalid,
+            'is-disabled':          attributes.disabled,
+        }
+        if (attributes.class) {
+            classes[attributes.class] = true;
+        }
+
+        let needsLabelWidth = attributes.align === 'left' || attributes.align === 'right';
+
+        let labelStyle = needsLabelWidth ? 'width: ' + attributes.labelWidth : '';
+
+    div(class=classes)
+        .o-field-label__label(style=labelStyle class=attributes.labelClass)= label
+        .o-field-label__content(class=attributes.contentClass)
+            block
+            if hint
+                .o-field-label__hint= hint
diff --git a/tpl/objects/text-field.pug b/tpl/objects/text-field.pug
index 9bbe0a1..9069200 100644
--- a/tpl/objects/text-field.pug
+++ b/tpl/objects/text-field.pug
@@ -8,6 +8,6 @@ mixin text-field
       'is-disabled':  attributes.disabled,
     }
 
-  div(class=classes)
+  div(class=classes aria-disabled=attributes.disabled && String(attributes.disabled))
     input(class='o-text-field__input')&attributes(attributes)
     .o-text-field__bg