<form class="registration-form">
    <div class="personal-info registration-section">
        <h4 class="registration-title">Personal Info</h4>
        <div class="personal-info__form-items">
            <div class="form-item form-item--text form-item--registration-first-name form-item--required">
                <label for="registration-first-name" class="label label--text label--required">First Name Test</label>
                <input type="text" id="registration-first-name" name="first-name" class="input input--text" autocomplete="given-name" value="John">
            </div>

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

            <div class="form-item form-item--email form-item--registration-email">
                <label for="registration-email" class="label label--email">Email Address</label>
                <input type="email" id="registration-email" class="input input--email" value="johndoe@mauijim.com">
            </div>

            <div class="form-item form-item--text form-item--registration-address-1 form-item--required">
                <label for="registration-address-1" class="label label--text label--required">Address 1</label>
                <input type="text" id="registration-address-1" name="address-1" class="input input--text" autocomplete="address-line1" value="112 W Monroe St">
            </div>

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

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

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

            <div class="form-item form-item--select form-item--required">
                <label for="registration-state" class="label label--required">State</label>
                <div class="select-wrapper">
                    <select id="registration-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>
      <option value="IL" selected>Illinois</option>
    </select>
                </div>
            </div>

            <div class="form-item form-item--checkbox">
                <input type="checkbox" id="receive-updates" name="receive-updates" class="checkbox checkbox--default" checked="true">
                <label for="receive-updates">
    I'd like to receive email 'ohana updates from Maui Jim.
    
  </label>
            </div>

        </div>
    </div>
    <div class="proof-of-purchase registration-section">
        <h4 class="registration-title">Proof of Purchase</h4>
        <div class="proof-of-purchase__form-items">
            <div class="form-item form-item--select form-item--required">
                <label for="purchase-month" class="label label--required">Date of Purchase</label>
                <div class="select-wrapper">
                    <select id="purchase-month" name="month" class="select js-select">
      <option value="">Month</option>
      <option value="m01">January</option>
      <option value="m02">February</option>
      <option value="m03">March</option>
      <option value="m04">April</option>
      <option value="m05">May</option>
      <option value="m06">June</option>
      <option value="m07">July</option>
      <option value="m08">August</option>
      <option value="m09">September</option>
      <option value="m10">October</option>
      <option value="m11">November</option>
      <option value="m12">December</option>
    </select>
                </div>
            </div>

            <div class="form-item form-item--select form-item--required">
                <div class="select-wrapper">
                    <select id="purchase-year" name="year" class="select js-select">
      <option value="">Year</option>
      <option value="y17">2017</option>
      <option value="y16">2016</option>
      <option value="y15">2015</option>
      <option value="y14">2014</option>
      <option value="y13">2013</option>
    </select>
                </div>
            </div>

            <div class="form-item form-item--select form-item--required">
                <label for="purchase-where" class="label label--required">Where?</label>
                <div class="select-wrapper">
                    <select id="purchase-where" name="where" class="select js-select js-select--purchase-where">
      <option value="">Choose</option>
      <option value="direct">Direct from Maui Jim</option>
      <option value="authorized-retail">Authorized Retail Location</option>
      <option value="authorized-online">Authorized Online Retailer</option>
    </select>
                </div>
            </div>

            <div class="form-item form-item--text form-item--purchase-location form-item--required js-form-item--purchase-location">
                <label for="purchase-location" class="label label--text label--required"></label>
                <input type="text" id="purchase-location" name="purchase-info" class="input input--text" placeholder="Order Details" disabled>
            </div>

        </div>
    </div>
    <div class="product-details registration-section">
        <h4 class="registration-title">Product Details</h4>
        <div class="product-details__form-items">
            <div class="form-item form-item--select form-item--required">
                <label for="product-details-prescription" class="label label--required">Is This Product Prescription?</label>
                <div class="select-wrapper">
                    <select id="product-details-prescription" name="prescription" class="select js-select">
      <option value="">Choose Yes/No</option>
      <option value="m01">Yes</option>
      <option value="m02">No</option>
    </select>
                </div>
            </div>

            <div class="form-item form-item--select form-item--required">
                <label for="product-details-custom" class="label label--required">Is This Product MyMaui (Custom)?</label>
                <div class="select-wrapper">
                    <select id="product-details-custom" name="custom" class="select js-select">
      <option value="">Choose Yes/No</option>
      <option value="m01">Yes</option>
      <option value="m02">No</option>
    </select>
                </div>
            </div>

            <div class="form-item form-item--text-tooltip-drawer form-item--sku form-item--required">
                <label for="sku" class="label label--text-tooltip-drawer label--required">Product SKU</label>
                <button class="form-item__tooltip js-tooltip-drawer-open-link">
    <svg class="icon icon--question-mark-circle">
  <use xlink:href="/assets/icons/icons.svg#question-mark-circle"></use>
</svg>

  </button>
                <input type="text-tooltip-drawer" id="sku" name="sku" class="input input--text-tooltip-drawer" placeholder="MJ 737-63W">
            </div>

            <div class="form-item form-item--checkbox">
                <input type="checkbox" id="terms-and-conditions" name="terms-and-conditions" class="checkbox checkbox--default">
                <label for="terms-and-conditions">
    I agree to the <a href='#'>Terms and Conditions</a> of the website
    
  </label>
            </div>

            <div class="drawer js-drawer">
                <div class="find-model" id="find-model">
                    <h4 class="find-model__title">Find your style model</h4>
                    <p class="find-model__content">Refer to the right temple of your sunglasses (refer to image below) for the Style Number. Style Number begins with MJ-</p>
                    <img class="find-model__image" alt="An image displaying the model number on the right temple of the sunglasses" src="/assets/images/find-model.jpg">
                </div>

            </div>

        </div>
    </div>
    <div class="registration-form__actions">
        <button class="button button--primary">Submit</button>

    </div>
</form>
<form class="registration-form">
  <div class="personal-info registration-section">
    <h4 class="registration-title">{{info.title}}</h4>
    <div class="personal-info__form-items">
      {{#each info.formItems}}
      {{render (dynamicComponent component) this}}
      {{/each}}
    </div>
  </div>
  <div class="proof-of-purchase registration-section">
    <h4 class="registration-title">{{purchase.title}}</h4>
    <div class="proof-of-purchase__form-items">
      {{#each purchase.formItems}}
      {{render (dynamicComponent component) this}}
      {{/each}}
    </div>
  </div>
  <div class="product-details registration-section">
    <h4 class="registration-title">{{details.title}}</h4>
    <div class="product-details__form-items">
      {{#each details.formItems}}
      {{render (dynamicComponent component) this}}
      {{/each}}
      {{render '@drawer' drawerOverrides merge=true}}
    </div>
  </div>
  <div class="registration-form__actions">
    {{#each actions}}
    {{render (dynamicVariant 'buttons' type) this merge=true}}
    {{/each}}
  </div>
</form>
{
  "info": {
    "title": "Personal Info",
    "formItems": [
      {
        "component": "input",
        "type": "text",
        "id": "registration-first-name",
        "name": "first-name",
        "label": "First Name Test",
        "placeholder": null,
        "required": true,
        "autocomplete": "given-name",
        "value": "John"
      },
      {
        "component": "input",
        "type": "text",
        "id": "registration-last-name",
        "name": "last-name",
        "label": "Last Name",
        "placeholder": null,
        "required": true,
        "autocomplete": "family-name",
        "value": "Doe"
      },
      {
        "component": "input--email",
        "type": "email",
        "id": "registration-email",
        "label": "Email Address",
        "value": "johndoe@mauijim.com"
      },
      {
        "component": "input",
        "type": "text",
        "id": "registration-address-1",
        "name": "address-1",
        "label": "Address 1",
        "autocomplete": "address-line1",
        "required": true,
        "value": "112 W Monroe St"
      },
      {
        "component": "input",
        "type": "text",
        "id": "registration-address-2",
        "name": "address-2",
        "label": "Address 2",
        "autocomplete": "address-line2",
        "placeholder": "Optional"
      },
      {
        "component": "input",
        "type": "text",
        "id": "registration-city",
        "name": "city",
        "label": "City",
        "autocomplete": "address-level2",
        "required": true,
        "value": "Chicago"
      },
      {
        "component": "input",
        "type": "text",
        "id": "registration-zip",
        "name": "zip",
        "label": "Zip Code",
        "autocomplete": "postal-code",
        "required": true,
        "value": "60603"
      },
      {
        "component": "select-normal",
        "id": "registration-state",
        "name": "state",
        "label": "State",
        "options": {
          "": "Select",
          "AL": "Alabama",
          "AK": "Alaska",
          "AZ": "Arizona",
          "AR": "Arkansas",
          "CA": "California",
          "CO": "Colorado"
        },
        "selected": {
          "value": "IL",
          "option": "Illinois"
        },
        "autocomplete": "address-level1",
        "required": true
      },
      {
        "component": "checkbox",
        "modifier": "default",
        "label": "I'd like to receive email 'ohana updates from Maui Jim.",
        "name": "receive-updates",
        "id": "receive-updates",
        "checked": true
      }
    ]
  },
  "purchase": {
    "title": "Proof of Purchase",
    "formItems": [
      {
        "component": "select-normal",
        "id": "purchase-month",
        "name": "month",
        "label": "Date of Purchase",
        "options": {
          "": "Month",
          "m01": "January",
          "m02": "February",
          "m03": "March",
          "m04": "April",
          "m05": "May",
          "m06": "June",
          "m07": "July",
          "m08": "August",
          "m09": "September",
          "m10": "October",
          "m11": "November",
          "m12": "December"
        },
        "required": true
      },
      {
        "component": "select-normal",
        "id": "purchase-year",
        "name": "year",
        "label": null,
        "options": {
          "": "Year",
          "y17": "2017",
          "y16": "2016",
          "y15": "2015",
          "y14": "2014",
          "y13": "2013"
        },
        "required": true
      },
      {
        "component": "select-normal",
        "id": "purchase-where",
        "name": "where",
        "label": "Where?",
        "selectClasses": {
          "class": "js-select--purchase-where"
        },
        "options": {
          "": "Choose",
          "direct": "Direct from Maui Jim",
          "authorized-retail": "Authorized Retail Location",
          "authorized-online": "Authorized Online Retailer"
        },
        "required": true
      },
      {
        "component": "input",
        "type": "text",
        "id": "purchase-location",
        "name": "purchase-info",
        "label": null,
        "inputContainerClasses": {
          "class": "js-form-item--purchase-location"
        },
        "placeholder": "Order Details",
        "disabled": true,
        "required": true
      }
    ]
  },
  "details": {
    "title": "Product Details",
    "formItems": [
      {
        "component": "select-normal",
        "id": "product-details-prescription",
        "name": "prescription",
        "label": "Is This Product Prescription?",
        "options": {
          "": "Choose Yes/No",
          "m01": "Yes",
          "m02": "No"
        },
        "required": true
      },
      {
        "component": "select-normal",
        "id": "product-details-custom",
        "name": "custom",
        "label": "Is This Product MyMaui (Custom)?",
        "options": {
          "": "Choose Yes/No",
          "m01": "Yes",
          "m02": "No"
        },
        "required": true
      },
      {
        "component": "input--tooltip-drawer",
        "type": "text-tooltip-drawer",
        "id": "sku",
        "name": "sku",
        "label": "Product SKU",
        "placeholder": "MJ 737-63W",
        "required": true,
        "tooltip-drawer": true
      },
      {
        "component": "checkbox",
        "modifier": "default",
        "label": "I agree to the <a href='#'>Terms and Conditions</a> of the website",
        "name": "terms-and-conditions",
        "id": "terms-and-conditions",
        "checked": null
      }
    ]
  },
  "drawerOverrides": {
    "mauijim": true
  },
  "actions": [
    {
      "type": "primary",
      "buttonValue": "Submit"
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      /*
        This does two things when a user selects where they purchased:
        Set the order details label based on their selection.
        Remove the disabled attribute from order details input.
        If no selection, revert to original state.
      */
      const purchaseWhere = document.querySelector('.js-select--purchase-where');
      const purchaseLocation = document.querySelector('.js-form-item--purchase-location');
      const placeholderInfo = ["Order Number", "Store Name", "Website"];
    
      if (purchaseWhere && purchaseLocation) {
        const locationLabel = purchaseLocation.getElementsByTagName('label')[0];
        const locationInput = purchaseLocation.getElementsByTagName('input')[0];
    
        purchaseWhere.addEventListener('change', (e) => {
          const selection = e.target.options[e.target.selectedIndex].text;
          const selectionIndex = e.target.selectedIndex - 1;
    
          if (e.target.value) {
            locationLabel.innerHTML = selection;
            locationInput.placeholder = placeholderInfo[selectionIndex];
            locationInput.removeAttribute('disabled');
          }
          else {
            locationLabel.innerHTML = "";
            locationInput.value = "";
            locationInput.placeholder = "Order Details";
            locationInput.setAttribute('disabled', true);
          }
        });
      }
    
    })(this);
    
  • URL: /components/raw/registration/registration.js
  • Filesystem Path: src/components/01-elements/forms/registration/registration.js
  • Size: 1.3 KB
  • Content:
    .registration-form {
      @include breakpoint($breakpoint-md) {
        margin: 0 20px;
      }
    }
    
    .registration-title {
      margin: 0 0 13px;
      color: $color-dark;
      font-size: 1.6rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 1.9rem;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 10px;
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-bottom: 11px;
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .registration-section {
      @include clearfix;
      margin-bottom: 85px;
    }
    
    .proof-of-purchase__form-items {
      display: flex;
      flex-wrap: wrap;
      align-items: flex-end;
    }
    
    .product-details {
      margin-bottom: 50px;
    }
    
    .registration-form__actions {
      margin-bottom: 100px;
    }
    
    .form-item {
      .registration-form & {
        margin-bottom: 30px;
      }
    
      .personal-info__form-items & {
        @include breakpoint($breakpoint-smd) {
          width: calc(50% - 10px);
          margin-right: 20px;
          float: left;
    
          &:nth-child(even) {
            margin-right: 0;
          }
        }
    
        @include breakpoint($breakpoint-md) {
          width: calc((100% * 1/3) - 14px);
    
          &:nth-child(even) {
            margin-right: 20px;
          }
    
          &:nth-child(3n + 3) {
            margin-right: 0;
          }
        }
      }
    
      .proof-of-purchase__form-items & {
        @include breakpoint($breakpoint-sm-only) {
          width: 100%;
    
          &:nth-child(-n+2) {
            width: calc(50% - 10px);
          }
    
          &:first-child {
            margin-right: 20px;
          }
        }
    
        @include breakpoint($breakpoint-smd) {
          width: calc(50% - 10px);
          margin-right: 20px;
    
          &:nth-child(even) {
            margin-right: 0;
          }
        }
    
        @include breakpoint($breakpoint-lg) {
          width: calc(25% - 15px);
    
          &:nth-child(even) {
            margin-right: 20px;
          }
    
          &:last-child {
            margin-right: 0;
          }
        }
    
        .l-registration & {
          .input-error {
            @include breakpoint($breakpoint-sm) {
              position: absolute;
              top: calc(100% + 14px);
              margin-top: 0;
            }
          }
        }
      }
    
      .product-details__form-items & {
        @include breakpoint($breakpoint-md) {
          width: calc((100% * 1/3) - 14px);
          margin: 10px 20px 10px 0;
          float: left;
    
          &:nth-last-child(-n+2) {
            margin-right: 0;
          }
        }
      }
    
      .l-registration & {
        input,
        select {
          margin-bottom: 0;
        }
    
        .input-error {
          @include breakpoint($breakpoint-md) {
            position: absolute;
            top: calc(100% + 10px);
            margin-top: 0;
          }
        }
      }
    
      &.form-item--checkbox {
        width: auto;
        padding-top: 20px;
        clear: both;
      }
    }
    
    .product-details__form-items {
      .form-item--checkbox {
        width: 100%;
      }
    
      .label {
        margin-bottom: 7px;
      }
    
      .input {
        padding: 10px 20px;
      }
    
      @include breakpoint($breakpoint-md) {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-end;
    
        .form-item__help-anchor {
          display: none;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .form-item {
          margin-bottom: 13px;
        }
      }
    }
    
    .drawer {
      .product-details__form-items & {
        padding-top: 20px;
        clear: both;
      }
    }
    
  • URL: /components/raw/registration/registration.scss
  • Filesystem Path: src/components/01-elements/forms/registration/registration.scss
  • Size: 3.2 KB

There are no notes for this item.