Maui Jim Style Guide

Checkout Forms: Billing information (Edit) 

<form class="checkout-form checkout-form--billing-information js-checkout-form js-checkout-form-billing-information">
    <span class="checkout-form__step-number checkout-form__step-number--present">3</span>
    <h4 class="checkout-form__title">Billing Information</h4>
    <div class="checkout-form__form-items">
        <div class="checkout-form__form-item-group js-checkout-form-item-group">
            <div class="form-item form-item--radio">
                <input type="radio" id="checkout-billing-address-shipping" value="" name="checkout-billing-address" class="radio radio--default" checked="true">
                <label for="checkout-billing-address-shipping">
    
    <span class="radio__label-text">Use delivery information</span>
  </label>
            </div>

            <div class="form-item form-item--radio">
                <input type="radio" id="checkout-billing-address-new" value="" name="checkout-billing-address" class="radio radio--default">
                <label for="checkout-billing-address-new">
    
    <span class="radio__label-text">Add New</span>
  </label>
            </div>

        </div>
        <div class="checkout-form__form-item-group js-checkout-form-item-group js-hidden" data-radio-id="checkout-billing-address-new">
            <div class="form-item form-item--text form-item--checkout-first-name form-item--required">
                <label for="checkout-first-name" class="label label--text label--required">First Name</label>
                <input type="text" id="checkout-first-name" name="first-name" class="input input--text" autocomplete="given-name">
            </div>

            <div class="form-item form-item--text form-item--checkout-last-name form-item--required">
                <label for="checkout-last-name" class="label label--text label--required">Last Name</label>
                <input type="text" id="checkout-last-name" name="last-name" class="input input--text" autocomplete="family-name">
            </div>

            <div class="form-item form-item--text form-item--checkout-company-name">
                <label for="checkout-company-name" class="label label--text">Company Name or c/o</label>
                <input type="text" id="checkout-company-name" name="company-name" class="input input--text" placeholder="Optional" autocomplete="organization">
            </div>

            <div class="form-item form-item--text form-item--checkout-address-1 form-item--required">
                <label for="checkout-address-1" class="label label--text label--required">Address 1</label>
                <input type="text" id="checkout-address-1" name="address-1" class="input input--text" autocomplete="address-line1">
            </div>

            <div class="form-item form-item--text form-item--checkout-address-2">
                <label for="checkout-address-2" class="label label--text">Address 2</label>
                <input type="text" id="checkout-address-2" name="address-2" class="input input--text" placeholder="Optional" autocomplete="address-line2">
            </div>

            <div class="form-item form-item--text form-item--checkout-city form-item--required">
                <label for="checkout-city" class="label label--text label--required">City</label>
                <input type="text" id="checkout-city" name="city" class="input input--text" autocomplete="address-level2">
            </div>

            <div class="form-item form-item--text form-item--checkout-zip form-item--required">
                <label for="checkout-zip" class="label label--text label--required">Zip Code</label>
                <input type="text" id="checkout-zip" name="zip" class="input input--text" autocomplete="postal-code">
            </div>

            <div class="form-item form-item--select form-item--required">
                <label for="checkout-state" class="label label--required">State</label>
                <div class="select-wrapper">
                    <select id="checkout-state" name="state" class="select js-select" autocomplete="address-level1">
      <option value="">Select</option>
      <option value="AL">Alabama</option>
      <option value="AK">Alaska</option>
      <option value="AZ">Arizona</option>
      <option value="AR">Arkansas</option>
      <option value="CA">California</option>
      <option value="CO">Colorado</option>
    </select>
                </div>
            </div>

            <div class="form-item form-item--select form-item--required">
                <label for="checkout-country" class="label label--required">Country</label>
                <div class="select-wrapper">
                    <select id="checkout-country" name="country" class="select js-select" autocomplete="country">
      <option value="">Select</option>
      <option value="USA">United States</option>
      <option value="AUS">Australia</option>
      <option value="CAN">Canada</option>
      <option value="FRA">France</option>
      <option value="GER">Germany</option>
      <option value="HK">Hong Kong</option>
      <option value="IND">India</option>
      <option value="IRE">Ireland</option>
      <option value="ITA">Italy</option>
      <option value="MEX">Mexico</option>
      <option value="NZE">New Zealand</option>
      <option value="SAF">South Africa</option>
      <option value="SPA">Spain</option>
      <option value="SWE">Sweden</option>
      <option value="UAE">United Arab Emirates</option>
      <option value="UK">United Kingdom</option>
    </select>
                </div>
            </div>

            <div class="form-item form-item--text form-item--checkout-phone form-item--required">
                <label for="checkout-phone" class="label label--text label--required">Phone Number</label>
                <input type="text" id="checkout-phone" name="phone" class="input input--text" placeholder="000-123-4567" autocomplete="tel">
            </div>

        </div>
        <div class="checkout-form__actions js-checkout-form-actions">
            <button class="button button--primary">Continue</button>

        </div>
    </div>
</form>
 
<form class="checkout-form checkout-form--{{_self.name}}{{#if spinning}} js-spinning-form{{/if}} js-checkout-form js-checkout-form-{{_self.name}}">
  {{#if stepNumber}}
  <span class="checkout-form__step-number checkout-form__step-number--{{stepStatus}}">{{stepNumber}}</span>
  {{/if}}
  {{#if title}}
  <h4 class="checkout-form__title">{{title}}</h4>
  {{/if}}
  {{#if editButton}}
  <button class="checkout-form__edit-button button button--outlined">Edit</button>
  {{/if}}
  <div class="checkout-form__form-items">
    {{#each formItemGroups}}
    <div class="checkout-form__form-item-group{{#if modifier}} checkout-form__form-item-group--{{modifier}}{{/if}} js-checkout-form-item-group{{#if hiddenByDefault}} js-hidden{{/if}}"{{#if radioId}} data-radio-id="{{radioId}}"{{/if}}>
      {{#each formItems}}
      {{render (dynamicComponent component) this}}
      {{/each}}
    </div>
    {{/each}}
    {{#if actions}}
    <div class="checkout-form__actions js-checkout-form-actions">
      {{#each actions}}
      {{render (dynamicVariant 'buttons' type) this merge=true}}
      {{/each}}
    </div>
    {{/if}}
  </div>
  {{#if reviewGroups}}
  <div class="checkout-form__review-items">
    {{#each reviewGroups}}
    <div class="checkout-form__review-item-group">
      {{#if label}}
      <span class="checkout-form__review-label">{{label}}</span>
      {{/if}}
      {{#each items}}
      <p class="checkout-form__review-item">
        {{#if icon}}
        {{render (dynamicVariant 'icons' icon)}}
        {{/if}}
        {{{value}}}
      </p>
      {{/each}}
    </div>
    {{/each}}
  </div>
  {{/if}}
</form>
 
{
  "stepNumber": "3",
  "stepStatus": "present",
  "title": "Billing Information",
  "formItemGroups": [
    {
      "formItems": [
        {
          "component": "radio",
          "id": "checkout-billing-address-shipping",
          "name": "checkout-billing-address",
          "modifier": "default",
          "label": "Use delivery information",
          "checked": true
        },
        {
          "component": "radio",
          "id": "checkout-billing-address-new",
          "name": "checkout-billing-address",
          "modifier": "default",
          "label": "Add New"
        }
      ]
    },
    {
      "hiddenByDefault": true,
      "radioId": "checkout-billing-address-new",
      "formItems": [
        {
          "component": "input",
          "type": "text",
          "id": "checkout-first-name",
          "name": "first-name",
          "label": "First Name",
          "autocomplete": "given-name",
          "required": true
        },
        {
          "component": "input",
          "type": "text",
          "id": "checkout-last-name",
          "name": "last-name",
          "label": "Last Name",
          "autocomplete": "family-name",
          "required": true
        },
        {
          "component": "input",
          "type": "text",
          "id": "checkout-company-name",
          "name": "company-name",
          "label": "Company Name or c/o",
          "placeholder": "Optional",
          "autocomplete": "organization"
        },
        {
          "component": "input",
          "type": "text",
          "id": "checkout-address-1",
          "name": "address-1",
          "label": "Address 1",
          "required": true,
          "autocomplete": "address-line1"
        },
        {
          "component": "input",
          "type": "text",
          "id": "checkout-address-2",
          "name": "address-2",
          "label": "Address 2",
          "placeholder": "Optional",
          "autocomplete": "address-line2"
        },
        {
          "component": "input",
          "type": "text",
          "id": "checkout-city",
          "name": "city",
          "label": "City",
          "autocomplete": "address-level2",
          "required": true
        },
        {
          "component": "input",
          "type": "text",
          "id": "checkout-zip",
          "name": "zip",
          "label": "Zip Code",
          "autocomplete": "postal-code",
          "required": true
        },
        {
          "component": "select-normal",
          "id": "checkout-state",
          "name": "state",
          "label": "State",
          "options": {
            "": "Select",
            "AL": "Alabama",
            "AK": "Alaska",
            "AZ": "Arizona",
            "AR": "Arkansas",
            "CA": "California",
            "CO": "Colorado"
          },
          "autocomplete": "address-level1",
          "required": true
        },
        {
          "component": "select-normal",
          "id": "checkout-country",
          "name": "country",
          "label": "Country",
          "options": {
            "": "Select",
            "USA": "United States",
            "AUS": "Australia",
            "CAN": "Canada",
            "FRA": "France",
            "GER": "Germany",
            "HK": "Hong Kong",
            "IND": "India",
            "IRE": "Ireland",
            "ITA": "Italy",
            "MEX": "Mexico",
            "NZE": "New Zealand",
            "SAF": "South Africa",
            "SPA": "Spain",
            "SWE": "Sweden",
            "UAE": "United Arab Emirates",
            "UK": "United Kingdom"
          },
          "autocomplete": "country",
          "required": true
        },
        {
          "component": "input",
          "type": "text",
          "id": "checkout-phone",
          "name": "phone",
          "label": "Phone Number",
          "placeholder": "000-123-4567",
          "autocomplete": "tel",
          "required": true
        }
      ]
    }
  ],
  "actions": [
    {
      "type": "primary",
      "buttonValue": "Continue"
    }
  ]
}
  • Content: 
    (function (window) {
  'use strict';

  // Shows/hides form groups as radios within the form are selected.
  function handleRadioChange(e) {
    const form = e.target.closest('.js-checkout-form');

    if (form) {
      hideFormGroups(form);
    }
  }

  // Some form item groups should only be exposed if a particular radio value
  // is selected. These are shown on initial page load for anyone without JS.
  function hideFormGroups(form) {
    const itemGroups = form.querySelectorAll('.js-checkout-form-item-group');

    for (let i = 0; i < itemGroups.length; i++) {
      const itemGroupRadioId = itemGroups[i].getAttribute('data-radio-id');
      const radio = document.getElementById(itemGroupRadioId);

      if (itemGroupRadioId && radio) {
        if (radio.checked) {
          itemGroups[i].classList.remove('js-hidden');
        }
        else {
          itemGroups[i].classList.add('js-hidden');
        }
      }
    }
  }

  function initForm(form) {
    const radios = form.querySelectorAll('.radio');

    hideFormGroups(form);

    for (let i = 0; i < radios.length; i++) {
      radios[i].addEventListener('change', handleRadioChange);
    }
  }

  function init() {
    const forms = document.querySelectorAll('.js-checkout-form');

    for (let i = 0; i < forms.length; i++) {
      if (!forms[i].classList.contains('js-component-init')) {
        initForm(forms[i]);

        forms[i].classList.add('js-component-init');
      }
    }
  }

  // Allow application JS to reinitialize any instances added with Ajax, etc.
  if (typeof componentEvents !== 'undefined') {
    componentEvents.on('component-init', init);
  }

  init();

})(this);
  • URL: /components/raw/checkout-form/checkout-form.js
  • Filesystem Path: src/components/01-elements/forms/checkout-form/checkout-form.js
  • Size: 1.7 KB
  • Content: 
    .checkout-form {
  position: relative;
  margin: 15px 0;
  padding-top: 1px;

  .shipping-address {
    margin-bottom: 10px;
  }

  .label {
    margin-bottom: 7px;
  }

  .radio:checked + label:not(.shipping-address__details) {
    font-weight: $font-weight-bold;
  }

  @include breakpoint($breakpoint-md) {
    @include clearfix;

    .shipping-address,
    .form-item {
      @include span(6);

      &:nth-of-type(odd) {
        clear: left;
      }
    }

    .shipping-address {
      width: calc(50% - 20px);
      margin-right: $gutter-width-half;
      margin-bottom: 20px;
      margin-left: $gutter-width-half;
    }

    .form-item--radio,
    .form-item--payment-widget,
    .form-item--paypal-widget {
      width: calc(100% - 20px);
      margin-top: 10px;
      float: none;
      clear: both;
    }

    .form-item--checkbox {
      width: calc(100% - 20px);
      margin-top: 10px;
      clear: both;
    }
  }

  @include breakpoint($breakpoint-xl) {
    .shipping-address,
    .form-item {
      @include span(4);

      &:nth-of-type(odd) {
        clear: none;
      }

      &:nth-of-type(3n+1) {
        clear: left;
      }
    }

    .shipping-address {
      width: calc(33.3333% - 20px);
    }

    .form-item--checkbox {
      width: calc(100% - 20px);
    }

    .form-item--payment-widget,
    .form-item--paypal-widget {
      width: calc(100% - 20px);
      float: left;
    }
  }
}

.checkout-form--payment-information,
.checkout-form--payment-information-repairs {
  @include breakpoint($breakpoint-xl) {
    // Allow the actions to float alongside the payment widget.
    .checkout-form__form-item-group:after {
      content: none;
    }
  }
}

.checkout-form--shipping-method {
  // Changes widths from above into min-widths for long Shipping Method values.
  @include breakpoint($breakpoint-md) {
    .form-item--select {
      width: auto;
      min-width: calc(50% - 20px);
      max-width: 100%;
    }
  }

  @include breakpoint($breakpoint-xl) {
    .form-item--select {
      min-width: calc(33% - 20px);
    }
  }
}

.checkout-form--order-submission {
  .form-item {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  @include breakpoint($breakpoint-xl) {
    text-align: right;
  }
}

.checkout-form--payment-information-repairs {
  .paragraph {
    color: $color-dark;
    font-size: 1.4rem;
    line-height: 1.7rem;
  }

  @include breakpoint($breakpoint-xl) {
    .paragraph {
      font-size: 1.9rem;
      line-height: 2.3rem;
    }
  }
}

// Styles for .checkout-form__step-number, and .checkout-form__step-number--*
// now belong to the form-step component.

.checkout-form__form-item-group {
  .checkout-form--shipping-information-edit-auth & {
    margin-bottom: 30px;
  }

  @include breakpoint($breakpoint-md) {
    @include clearfix;
    margin-left: 40px;
    clear: both;

    .checkout-form--shipping-information-edit-auth & {
      margin-bottom: 10px;
    }
  }
}

// Ensures children have equal height.
.checkout-form__form-item-group--shipping-addresses {
  @include breakpoint($breakpoint-md) {
    display: flex;
    flex-wrap: wrap;
  }
}

.checkout-form__radio-help {
  margin: 0 0 20px;
  padding-left: 30px;

  @include breakpoint($breakpoint-md) {
    padding-left: 40px;
  }
}

.checkout-form__actions {
  margin-top: 20px;

  @include breakpoint($breakpoint-md) {
    @include clearfix;
    margin-right: $gutter-width-half;
    float: right;
  }

  @include breakpoint($breakpoint-xl) {
    margin-right: $gutter-width;

    .checkout-form--payment-information-repairs & {
      margin-top: 10px;
    }

    .checkout-form--order-submission & {
      margin: 0;
    }
  }
}

.checkout-form__review-items {
  color: $color-darkest;
  font-size: 1.4rem;
  line-height: 2.0rem;

  @include breakpoint($breakpoint-md) {
    @include clearfix;
    margin-left: 40px;
    clear: both;
  }
}

.checkout-form__review-item-group {
  margin-bottom: 20px;

  @include breakpoint($breakpoint-md) {
    width: calc(50% - 20px);
    margin-right: $gutter-width-half;
    margin-bottom: 0;
    margin-left: $gutter-width-half;
    float: left;

    &:nth-child(odd) {
      clear: left;
    }
  }

  @include breakpoint($breakpoint-xl) {
    width: calc(33.3333% - 20px);

    &:nth-child(odd) {
      clear: none;
    }
  }
}

.checkout-form__review-label {
  display: block;
  font-weight: $font-weight-bold;

  @include breakpoint($breakpoint-xl) {
    margin-bottom: 10px;
  }
}

.checkout-form__review-item {
  margin: 0;
  word-wrap: break-word;

  .icon {
    margin-right: 5px;
  }

  @include breakpoint($breakpoint-xl) {
    margin-bottom: 10px;
  }
}
  • URL: /components/raw/checkout-form/checkout-form.scss
  • Filesystem Path: src/components/01-elements/forms/checkout-form/checkout-form.scss
  • Size: 4.6 KB

There are no notes for this item.