Implement example form component

julkue · Sep 15, 2017 · 69f2251 · 69f2251
1 parent 51e7a58
commit 69f2251
Show file tree

Hide file tree

Showing 18 changed files with 206 additions and 32 deletions.
diff --git a/.npmignore b/.npmignore
@@ -3,6 +3,7 @@ node_modules/
 .settings/
 build/library/
 dist/bundle
+dist/example-form
 
 yarn.lock
 *.js.map

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@julmot/form-components",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Custom Form Components. Without Any Framework.",
   "keywords": [
     "form",

diff --git a/src/components/_bright.hbs b/src/components/_bright.hbs
@@ -21,7 +21,10 @@
 
 </head>
 <body>
-  {{{ yield }}}
+
+  <main>
+    {{{ yield }}}
+  </main>
 
   <!-- Bundled scripts for development -->
   <script src="{{path "/bundle/bundle.js"}}"></script>

diff --git a/src/components/_dark.hbs b/src/components/_dark.hbs
@@ -21,7 +21,10 @@
 
 </head>
 <body style="background-color: #000;">
-  {{{ yield }}}
+
+  <main>
+    {{{ yield }}}
+  </main>
 
   <!-- Bundled scripts for development -->
   <script src="{{path "/bundle/bundle.js"}}"></script>

diff --git a/src/components/checkbox/checkbox.config.yml b/src/components/checkbox/checkbox.config.yml
@@ -8,6 +8,7 @@ context:
   required: false
   disabled: false
   checked: false
+  error: "Please provide a value for this field"
 default: "default-black"
 variants:
   - name: "default-black"

diff --git a/src/components/checkbox/checkbox.hbs b/src/components/checkbox/checkbox.hbs
@@ -3,7 +3,10 @@
     <input class="checkbox__input" id="{{id}}" type="checkbox" name="{{name}}" {{#if value}}value="{{value}}"{{/if}} {{#if disabled}}disabled{{/if}} {{#if required}}required="true"{{/if}} {{#if checked}}checked{{/if}} />
     <label class="checkbox__label" for="{{id}}">{{{label}}}</label>
   </div>
-  <!-- NOTE: This div is reserved for field-specific error messages by Drupal
-  <div class="select__error"></div>
-  -->
+  <!-- NOTE: This div is reserved for field-specific error messages by a backend -->
+  {{#if error}}
+    <div class="checkbox__error">{{error}}</div>
+  {{else}}
+    <!--<div class="checkbox__error">Put in the error message here...</div>-->
+  {{/if}}
 </div>
diff --git a/src/components/example-form/example-form.config.yml b/src/components/example-form/example-form.config.yml
@@ -0,0 +1,125 @@
+title: "Example Form"
+status: "ready"
+variants:
+  - name: "default"
+    context:
+      salutation:
+        id: "salutation"
+        name: "salutation"
+        label: "Salutation"
+        required: true
+        disabled: false
+        selected: false
+        options:
+          - "Mr."
+          - "Ms."
+          - "Mrs."
+        error: ""
+      firstname:
+        id: "firstname"
+        name: "firstname"
+        label: "Firstname"
+        required: true
+        value: ""
+        disabled: false
+        type: "text"
+        autocomplete: ""
+        error: ""
+      lastname:
+        id: "lastname"
+        name: "lastname"
+        label: "Lastname"
+        required: true
+        value: ""
+        disabled: false
+        type: "text"
+        autocomplete: ""
+        error: ""
+      email:
+        id: "email"
+        name: "email"
+        label: "Email"
+        required: true
+        value: ""
+        disabled: false
+        type: "email"
+        autocomplete: ""
+        error: ""
+      message:
+        id: "message"
+        name: "message"
+        label: "Message"
+        required: true
+        value: ""
+        disabled: false
+        error: ""
+      copy:
+        id: "copy"
+        name: "copy"
+        label: "I want a copy of my message"
+        value: "true"
+        required: false
+        disabled: false
+        checked: false
+        error: ""
+  - name: "with-validation"
+    context:
+      salutation:
+        id: "salutation"
+        name: "salutation"
+        label: "Salutation"
+        required: true
+        disabled: false
+        selected: false
+        options:
+          - "Mr."
+          - "Ms."
+          - "Mrs."
+        error: "Please provide a value for this field"
+      firstname:
+        id: "firstname"
+        name: "firstname"
+        label: "Firstname"
+        required: true
+        value: ""
+        disabled: false
+        type: "text"
+        autocomplete: ""
+        error: "Please provide a value for this field"
+      lastname:
+        id: "lastname"
+        name: "lastname"
+        label: "Lastname"
+        required: true
+        value: ""
+        disabled: false
+        type: "text"
+        autocomplete: ""
+        error: "Please provide a value for this field"
+      email:
+        id: "email"
+        name: "email"
+        label: "Email"
+        required: true
+        value: ""
+        disabled: false
+        type: "email"
+        autocomplete: ""
+        error: "Please provide a value for this field"
+      message:
+        id: "message"
+        name: "message"
+        label: "Message"
+        required: true
+        value: ""
+        disabled: false
+        error: "Please provide a value for this field"
+      copy:
+        id: "copy"
+        name: "copy"
+        label: "I want a copy of my message"
+        value: "true"
+        required: false
+        disabled: false
+        checked: false
+        error: "Please provide a value for this field"
diff --git a/src/components/example-form/example-form.hbs b/src/components/example-form/example-form.hbs
@@ -0,0 +1,11 @@
+{{#ifCond _self.name "===" "with-validation"}}
+  {{render '@message--error'}}
+{{/ifCond}}
+<form novalidate>
+  {{render '@select--default-black' salutation}}
+  {{render '@text-field--default-black' firstname}}
+  {{render '@text-field--default-black' lastname}}
+  {{render '@text-field--default-black' email}}
+  {{render '@text-field--multiline-black' message}}
+  {{render '@checkbox--default-black' copy}}
+</form>
diff --git a/src/components/example-form/example-form.js b/src/components/example-form/example-form.js
@@ -0,0 +1 @@
+import './example-form.scss';
diff --git a/src/components/example-form/example-form.scss b/src/components/example-form/example-form.scss
@@ -0,0 +1,12 @@
+@import "base";
+
+form {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 20px;
+  box-sizing: border-box;
+
+  > *:not(:last-child) {
+    margin-bottom: 20px;
+  }
+}
diff --git a/src/components/select/select.config.yml b/src/components/select/select.config.yml
@@ -25,6 +25,7 @@ context:
     - "option 13"
     - "option 14"
     - "option 15"
+  error: "Please provide a value for this field"
 default: "default-black"
 variants:
   - name: "default-black"

diff --git a/src/components/select/select.hbs b/src/components/select/select.hbs
@@ -12,7 +12,10 @@
       <label class="select__label" for="{{id}}">{{label}}</label>
     {{/if}}
   </div>
-  <!-- NOTE: This div is reserved for field-specific error messages by a backend
-  <div class="select__error"></div>
-  -->
+  <!-- NOTE: This div is reserved for field-specific error messages by a backend -->
+  {{#if error}}
+    <div class="select__error">{{error}}</div>
+  {{else}}
+    <!--<div class="select__error">Put in the error message here...</div>-->
+  {{/if}}
 </div>
diff --git a/src/components/select/select.js b/src/components/select/select.js
@@ -12,6 +12,7 @@ export default class Select extends FormComponent {
 
     this.wrapper = context.querySelector('.select__wrapper');
     this.label = this.wrapper.querySelector('.select__label');
+    this.error = context.querySelector('.select__error');
     this.dropdown = null;
     this.dropdownOptions = [];
 
@@ -38,7 +39,11 @@ export default class Select extends FormComponent {
       this.dropdown.appendChild(option);
       return option;
     });
-    this.context.appendChild(this.dropdown);
+    if (!this.error) {
+      this.context.appendChild(this.dropdown);
+    } else {
+      this.context.insertBefore(this.dropdown, this.error);
+    }
   }
 
   initEvents() {

diff --git a/src/components/text-field/text-field.config.yml b/src/components/text-field/text-field.config.yml
@@ -7,6 +7,7 @@ context:
   required: false
   value: ""
   disabled: false
+  error: "Please provide a value for this field"
 default: "default-black"
 variants:
   - name: "default-black"

diff --git a/src/components/text-field/text-field.hbs b/src/components/text-field/text-field.hbs
@@ -7,7 +7,10 @@
     {{/ifStartsWith}}
     <label class="text-field__label" for="{{id}}">{{label}}</label>
   </div>
-  <!-- NOTE: This div is reserved for field-specific error messages by a backend
-  <div class="select__error"></div>
-  -->
+  <!-- NOTE: This div is reserved for field-specific error messages by a backend -->
+  {{#if error}}
+    <div class="text-field__error">{{error}}</div>
+  {{else}}
+    <!--<div class="text-field__error">Put in the error message here...</div>-->
+  {{/if}}
 </div>
diff --git a/src/components/text-field/text-field.scss b/src/components/text-field/text-field.scss
@@ -16,6 +16,11 @@ $textFieldLabelFontSizeFilledIn: 0.75rem;
 $textFieldLabelFontFamily: inherit;
 $textFieldFontSize: 1.125rem;
 $textFieldFontFamily: inherit;
+// Don't use the same line height as "height" to avoid a large cursor
+// in Safari on macOS. Also multiply the font size with 1.35 and use it
+// as line height to avoid text jump in FF when you mark the text
+$textFieldLineHeight: $textFieldFontSize * 1.35;
+$textFieldPadding: ($textFieldHeight - $textFieldLineHeight) / 2;
 
 // need to use string here due to:
 // https://github.com/webpack-contrib/sass-loader/issues/487
@@ -64,15 +69,10 @@ $variants: "black", "white";
         cursor: text;
         display: block;
         height: $textFieldHeight;
-        // Don't use the same line height as "height" to avoid a large cursor
-        // in Safari on macOS. Also multiply the font size with 1.35 and use it
-        // as line height to avoid text jump in FF when you mark the text
-        $lineHeight: $textFieldFontSize * 1.35;
-        line-height: $lineHeight;
+        line-height: $textFieldLineHeight;
         // add 1 px additional padding to avoid text jumping when
         // border-bottom-width is set to 2px when focused
-        $padding: ($textFieldHeight - $lineHeight) / 2;
-        padding: $padding $textFieldPaddingX calc(#{$padding} + 1px) $textFieldPaddingX;
+        padding: $textFieldPadding $textFieldPaddingX calc(#{$textFieldPadding} + 1px) $textFieldPaddingX;
         background: $textFieldBackgroundColor;
         color: $textFieldColor;
         box-sizing: border-box;
@@ -97,13 +97,23 @@ $variants: "black", "white";
 
         &:focus {
           border-bottom-width: 2px;
-          padding: $padding $textFieldPaddingX;
+          padding: $textFieldPadding $textFieldPaddingX;
         }
       }
       &.is-disabled #{$block}__input {
         cursor: not-allowed;
       }
 
+      /*************************************************************************
+       * Textarea Input
+       ************************************************************************/
+      #{selector-append("textarea", $block, "__input")} {
+        height: $textFieldTextareaHeight;
+        resize: vertical;
+        line-height: 1.25;
+        box-sizing: content-box;
+      }
+
       /*************************************************************************
        * Label (will be moved to top when value available)
        ************************************************************************/
@@ -155,17 +165,6 @@ $variants: "black", "white";
         user-select: none;
       }
 
-      /*************************************************************************
-       * Textarea Input
-       ************************************************************************/
-      #{selector-append("textarea", $block, "__input")} {
-        $paddingTop: 5px;
-        height: calc(#{$textFieldTextareaHeight} - #{$paddingTop});
-        resize: vertical;
-        line-height: 1.25;
-        padding-top: $paddingTop;
-      }
-
       /*************************************************************************
        * Error
        ************************************************************************/

diff --git a/src/docs/index.md b/src/docs/index.md
@@ -34,6 +34,7 @@ new Message.default(document.querySelector(Message.selector));
 - Checkbox
 - Message (e.g. to output validation messages at the top of a document)
 
+There's also an example form that renders all of them in a single form for demonstration purposes.
 
 ## Browser Compatibility
 
@@ -50,5 +51,6 @@ Successfully tested in:
 
 - Root _content_ element must be the `<main>` element (necessary for detection of inline messages)
 - Needs the [babel polyfill](https://babeljs.io/docs/usage/polyfill/) to work with old browsers
+- Expects a `novalidate` attribute on the `<form>` tag
 - Work best with embedded [normalize.css](https://github.com/necolas/normalize.css)
 - Inherits your app-specific fonts
diff --git a/src/fonts/form-components-icons/form-components-icons.woff b/src/fonts/form-components-icons/form-components-icons.woff