drop in all elements for CLA page, ref #19

_src/_assets/javascripts/bigchain.js

@@ -9,6 +9,7 @@
 
 //=include bigchain/form-earlyaccess.js
 //=include bigchain/form-contact.js
+//=include bigchain/form-cla.js
 //=include bigchain/hero-video.js
 
 jQuery(function($) {
@@ -19,6 +20,7 @@ jQuery(function($) {
     Forms.init();
     SmoothScroll.init();
     FormEarlyAccess.init();
+    FormCla.init();
 
     if ($('.hero-video').length > 0) {
         HeroVideo.init();

_src/_assets/javascripts/bigchain/form-cla.js

@@ -0,0 +1,59 @@
+
+var FormCla = (function(w, d, $) {
+
+    'use strict';
+
+    var app, _private, _config;
+
+    _config = {
+        form:       $('.form-cla'),
+        formBtn:    $('.form-cla').find('.btn'),
+        formURL:    $('.form-cla').attr('action'),
+        formMethod: $('.form-cla').attr('method')
+    };
+
+    _private = {
+        formSubmit: function() {
+            _config.form.submit(function(e) {
+                e.preventDefault();
+
+                if ( $(this).parsley().isValid() ) {
+                    $.ajax({
+                        url: _config.formURL,
+                        type: _config.formMethod,
+                        accept: {
+                            javascript: 'application/javascript'
+                        },
+                        data: _config.form.serialize(),
+                        crossDomain: true,
+                        beforeSend: function() {
+                            _config.formBtn
+                                .addClass('disabled')
+                                .attr('value', 'Sending...');
+                        },
+                        success: function(data) {
+                            _config.form.find('.form-group').addClass('hide');
+                            _config.form.find('.alert-success').removeClass('hide');
+                            _config.formBtn.removeClass('disabled');
+                        },
+                        error: function(err) {
+                            _config.form.find('.alert-danger').removeClass('hide');
+                            _config.formBtn
+                                .removeClass('disabled')
+                                .attr('value', 'Send');
+                        }
+                    });
+                }
+            });
+        }
+    };
+
+    app = {
+        init: function() {
+            _private.formSubmit();
+        }
+    };
+
+    return app;
+
+})(window, document, jQuery);

_src/_assets/javascripts/bigchain/forms.js

@@ -1,15 +1,12 @@
 
 //=include ../../../../node_modules/parsleyjs/dist/parsley.js
 
-var Forms = (function(w, d) {
+var Forms = (function(w, d, $) {
 
     'use strict'
 
     var app, _private, _config
 
-    // workaround for blog
-    var $ = jQuery
-
     _config = {
         form: $('form'),
         parsleyForm: $('form.js-parsley')
@@ -52,4 +49,4 @@ var Forms = (function(w, d) {
 
     return app
 
-})(window, document)
+})(window, document, jQuery)

_src/_assets/styles/bigchain/_forms.scss

@@ -62,8 +62,10 @@
     position: absolute;
     top: $input-padding-x;
     left: $input-padding-y;
+    right: $input-padding-y;
     transition: .15s ease-out;
     user-select: none;
+    cursor: text;
 
     // style like placeholder
     font-family: $input-font;
@@ -84,8 +86,9 @@
     &:invalid:not(.is-empty) ~ .form-label,
     &.parsley-error ~ .form-label,
     &.parsley-success ~ .form-label {
-        transform: translate3d(0, -($spacer + $input-padding-x), 0) scale(.75);
+        transform: translate3d(0, -($spacer + $input-padding-x), 0) scale(.7);
-        transform-origin: left top;
+        transform-origin: left;
+        color: $input-border-focus;
     }
 }
 
@@ -101,6 +104,108 @@
 }
 
 
+//
+// Checkboxes and radios
+//
+.radio,
+.checkbox {
+    position: relative;
+    display: block;
+    margin-bottom: ($spacer * .75);
+
+    label {
+        padding-left: 1.25rem;
+        margin-bottom: 0;
+        cursor: pointer;
+        // When there's no labels, don't position the input.
+        input:only-child {
+            position: static;
+        }
+    }
+}
+
+.radio input[type="radio"],
+.radio-inline input[type="radio"],
+.checkbox input[type="checkbox"],
+.checkbox-inline input[type="checkbox"] {
+    position: absolute;
+    margin-bottom: -0.25rem;
+    margin-left: -1.25rem;
+    margin-right: 0.25rem;
+
+    // reset styling, then style
+    -webkit-appearance:button;
+    background: none;
+
+    width: 1.3rem;
+    height: 1.3rem;
+    border-radius: 50%;
+    border: 2px solid $input-border-color;
+    outline: none;
+
+    &:focus {
+        border-color: $input-border-focus;
+    }
+
+    &:checked {
+        background: $brand-primary;
+        border-color: $input-border-focus;
+    }
+}
+
+.radio + .radio,
+.checkbox + .checkbox {
+    // Move up sibling radios or checkboxes for tighter spacing
+    margin-top: -.25rem;
+}
+
+// Radios and checkboxes on same line
+.radio-inline,
+.checkbox-inline {
+    position: relative;
+    display: inline-block;
+    padding-left: 1.25rem;
+    margin-bottom: 0;
+    vertical-align: middle;
+    cursor: pointer;
+}
+.radio-inline + .radio-inline,
+.checkbox-inline + .checkbox-inline {
+    margin-top: 0;
+    margin-left: 0.75rem;
+}
+
+// Apply same disabled cursor tweak as for inputs
+// Some special care is needed because <label>s don't inherit their parent's `cursor`.
+//
+// Note: Neither radios nor checkboxes can be readonly.
+input[type="radio"],
+input[type="checkbox"] {
+    &:disabled,
+    &.disabled {
+        cursor: not-allowed;
+    }
+}
+
+// These classes are used directly on <label>s
+.radio-inline,
+.checkbox-inline {
+    &.disabled {
+        cursor: not-allowed;
+    }
+}
+
+// These classes are used on elements with <label> descendants
+.radio,
+.checkbox {
+    &.disabled {
+        label {
+            cursor: not-allowed;
+        }
+    }
+}
+
+
 //
 // Form Validation States
 //

_src/_includes/form-cla.html

@@ -0,0 +1,116 @@
+
+<div class="grid grid--full grid-small--half">
+    <div class="grid__col">
+        <a href="#form-cla-individuals">For Individuals</a>
+    </div>
+    <div class="grid__col">
+        <a href="#form-cla-entities">For Organizations</a>
+    </div>
+</div>
+
+<form id="form-cla-individuals" class="form-cla js-parsley" action="//formspree.io/{{ site.email.contact }}" method="POST" accept-charset="UTF-8">
+
+    <p class="form-group">
+        <input class="form-control" type="text" id="name" name="name" required>
+        <label class="form-label" for="name">Your Name</label>
+    </p>
+    <p class="form-group">
+        <input class="form-control" type="email" id="email" name="_replyto" required>
+        <label class="form-label" for="email">Your Email</label>
+    </p>
+    <p class="form-group">
+        <input class="form-control" type="text" id="org" name="org">
+        <label class="form-label" for="org">Your Organization (if applicable)</label>
+    </p>
+    <p class="form-group">
+        <input class="form-control" type="text" id="github" name="github">
+        <label class="form-label" for="github">Your GitHub Account Name</label>
+    </p>
+    <p class="form-group">
+        <input class="form-control" type="tel" id="phone" name="phone">
+        <label class="form-label" for="phone">Your Phone Number</label>
+    </p>
+    <p class="text-dimmed">
+        Agreed and accepted: By clicking and accepting this Agreement, I represent and warrant that I have authority to bind the entity named above (if applicable) to the terms and conditions of this Agreement.
+    </p>
+    <div class="checkbox">
+        <label class="text-dimmed">
+            <input type="checkbox" value="agreement" required>
+            I have read and agree to the terms of this Agreement
+        </label>
+    </div>
+    <p class="form-group">
+        <input class="btn btn-primary" type="submit" value="Send">
+    </p>
+
+    <div class="alert alert-success animation-slide-in-from-bottom hide">
+        <svg class="alert__icon icon icon-success">
+            <use xlink:href="/assets/img/sprite.svg#icon-success"></use>
+        </svg>
+        <p>
+            <strong class="alert__title">Great to hear you’re interested!</strong>
+            We’ll get in touch soon to discuss how we can work together.
+        </p>
+    </div>
+    <div class="alert alert-danger hide">
+        <svg class="alert__icon icon icon-fail">
+            <use xlink:href="/assets/img/sprite.svg#icon-fail"></use>
+        </svg>
+        <p>
+            <strong class="alert__title">Ops, there was an error</strong>
+            Would you mind trying again?
+        </p>
+    </div>
+</form>
+
+
+<form id="form-cla-entities" class="form-cla js-parsley" action="//formspree.io/{{ site.email.contact }}" method="POST" accept-charset="UTF-8">
+
+    <p class="form-group">
+        <input class="form-control" type="text" id="org" name="org" required>
+        <label class="form-label" for="org">Name of organization, foundation, company or other entity</label>
+    </p>
+    <p class="form-group">
+        <input class="form-control" type="text" id="name" name="name" required>
+        <label class="form-label" for="name">Contact Person</label>
+    </p>
+    <p class="form-group">
+        <input class="form-control" type="email" id="email" name="_replyto" required>
+        <label class="form-label" for="email">Contact Email Address</label>
+    </p>
+    <p class="form-group">
+        <input class="form-control" type="tel" id="phone" name="phone">
+        <label class="form-label" for="phone">Contact Phone Number</label>
+    </p>
+    <p class="text-dimmed">
+        Agreed and accepted: By clicking and accepting this Agreement, I represent and warrant that I have authority to bind the entity named above (if applicable) to the terms and conditions of this Agreement.
+    </p>
+    <div class="checkbox">
+        <label class="text-dimmed">
+            <input type="checkbox" value="agreement" required>
+            I have read and agree to the terms of this Agreement
+        </label>
+    </div>
+    <p class="form-group">
+        <input class="btn btn-primary" type="submit" value="Send">
+    </p>
+
+    <div class="alert alert-success animation-slide-in-from-bottom hide">
+        <svg class="alert__icon icon icon-success">
+            <use xlink:href="/assets/img/sprite.svg#icon-success"></use>
+        </svg>
+        <p>
+            <strong class="alert__title">Great to hear you’re interested!</strong>
+            We’ll get in touch soon to discuss how we can work together.
+        </p>
+    </div>
+    <div class="alert alert-danger hide">
+        <svg class="alert__icon icon icon-fail">
+            <use xlink:href="/assets/img/sprite.svg#icon-fail"></use>
+        </svg>
+        <p>
+            <strong class="alert__title">Ops, there was an error</strong>
+            Would you mind trying again?
+        </p>
+    </div>
+</form>

_src/cla.md

@@ -0,0 +1,11 @@
+---
+layout: page
+
+title: Contributor License Agreement
+---
+
+Before we can accept any contributions from you or the organization you represent, you or your organization must agree to license the contributions to others under some non-exclusive open licenses (as listed in the contributor license agreement ["Agreement"]).
+
+You will retain full ownership of your work, including the ability to license it to others.
+
+{% include form-cla.html %}