<form class="your-account">
    <div class="your-account__form-items">
        <h4 class="your-account__form-item-group-title">Your Account</h4>
        <div class="your-account__form-item-group">
            <div class="form-item form-item--fake js-modal-form-item">
                <label for="account-fullname" class="label">Full Name</label>
                <span class="input input--fake-editable">
    <span data-value-id="fullname-first-name">John</span>
                <span data-value-id="fullname-last-name">Doe</span>

                <button class="button button--plain-text js-modal-open-link js-modal-form-item-edit-button" data-modal-id="fullname-edit" formnovalidate>Edit</button>

                </span>
            </div>

            <div class="form-item form-item--fake">
                <label for="account-email-address" class="label">Email Address</label>
                <span class="input input--fake">
    johndoe@email.component
  </span>
            </div>

            <div class="form-item form-item--fake js-modal-form-item">
                <label for="account-password" class="label">Password</label>
                <span class="input input--fake-editable">
    &bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;
    <button class="button button--plain-text js-modal-open-link js-modal-form-item-edit-button" data-modal-id="password-edit" formnovalidate>Edit</button>

  </span>
            </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 want to receive email updates and information.
    
  </label>
            </div>

        </div>
        <h4 class="your-account__form-item-group-title">Shipping Addresses</h4>
        <div class="your-account__form-item-group your-account__form-item-group--shipping-addresses">
            <div class="shipping-address js-modal-form-item">
                <input type="radio" id="checkout-shipping-address-1" name="checkout-shipping-address" class="radio radio--default" checked="true">
                <label class="shipping-address__details" for="checkout-shipping-address-1">
    <p class="shipping-address__name">
      <span class="js-shipping-address-value" data-value-id="shipping-address-first-name">John</span>
      <span class="js-shipping-address-value" data-value-id="shipping-address-last-name">Doe</span>
    </p>
    <p class="shipping-address__address">
      <span class="js-shipping-address-value" data-value-id="shipping-address-address-1">112 W Monroe St</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-city">Chicago</span>,
      <span class="js-shipping-address-value" data-value-id="shipping-address-state">IL</span>
      <span class="js-shipping-address-value" data-value-id="shipping-address-zip">60603</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-country" data-value-value="USA">United States</span>
    </p>
    <p class="shipping-address__phone">
      <span class="js-shipping-address-value" data-value-id="shipping-address-phone-number">888-888-1234</span>
    </p>
  </label>
                <div class="shipping-address__actions">
                    <button class="button button--plain-text js-modal-open-link shipping-address__edit js-modal-form-item-edit-button" data-modal-id="shipping-address-edit" formnovalidate>Edit</button>
                    <button class="button button--plain-text shipping-address__delete">Delete</button>
                </div>
                <span class="shipping-address__accent"></span>
            </div>

            <div class="shipping-address js-modal-form-item">
                <input type="radio" id="checkout-shipping-address-2" name="checkout-shipping-address" class="radio radio--default">
                <label class="shipping-address__details" for="checkout-shipping-address-2">
    <p class="shipping-address__name">
      <span class="js-shipping-address-value" data-value-id="shipping-address-first-name">John</span>
      <span class="js-shipping-address-value" data-value-id="shipping-address-last-name">Smith</span>
    </p>
    <p class="shipping-address__address">
      <span class="js-shipping-address-value" data-value-id="shipping-address-address-1">One Aloha Lane</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-city">Peoria</span>,
      <span class="js-shipping-address-value" data-value-id="shipping-address-state">IL</span>
      <span class="js-shipping-address-value" data-value-id="shipping-address-zip">61615</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-country" data-value-value="USA">United States</span>
    </p>
    <p class="shipping-address__phone">
      <span class="js-shipping-address-value" data-value-id="shipping-address-phone-number">888-888-4321</span>
    </p>
  </label>
                <div class="shipping-address__actions">
                    <button class="button button--plain-text js-modal-open-link shipping-address__edit js-modal-form-item-edit-button" data-modal-id="shipping-address-edit" formnovalidate>Edit</button>
                    <button class="button button--plain-text shipping-address__delete">Delete</button>
                </div>
                <span class="shipping-address__accent"></span>
            </div>

            <button class="shipping-address shipping-address--button js-modal-open-link" data-modal-id="shipping-address-add" formnovalidate>
  <svg class="icon icon--new-address">
  <use xlink:href="/assets/icons/icons.svg#new-address"></use>
</svg>

  <p class="shipping-address__button-label">Add New Shipping Address</p>
  <span class="shipping-address__accent"></span>
</button>

        </div>
    </div>
</form>
{{#if messages}}{{render '@messages' messages}}{{/if}}
<form class="your-account">
  <div class="your-account__form-items">
    {{#if formItemGroups}}
    {{#each formItemGroups}}
    <h4 class="your-account__form-item-group-title">{{groupTitle}}</h4>
    <div class="your-account__form-item-group{{#if modifier}} your-account__form-item-group--{{modifier}}{{/if}}">
      {{#each formItems}}
      {{render (dynamicComponent component) this}}
      {{/each}}
    </div>
    {{/each}}
    {{/if}}
  </div>
</form>
{
  "formItemGroups": [
    {
      "groupTitle": "Your Account",
      "formItems": [
        {
          "component": "input-fake",
          "id": "account-fullname",
          "editableValues": {
            "fullname-first-name": "John",
            "fullname-last-name": "Doe"
          },
          "label": "Full Name",
          "editButton": {
            "modifier": "plain-text",
            "buttonValue": "Edit",
            "buttonModal": "fullname-edit",
            "noValidate": true,
            "classes": [
              "js-modal-form-item-edit-button"
            ]
          }
        },
        {
          "component": "input-fake",
          "id": "account-email-address",
          "value": "johndoe@email.component",
          "label": "Email Address"
        },
        {
          "component": "input-fake",
          "id": "account-password",
          "label": "Password",
          "value": "&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;&bullet;",
          "editButton": {
            "modifier": "plain-text",
            "buttonValue": "Edit",
            "buttonModal": "password-edit",
            "noValidate": true,
            "classes": [
              "js-modal-form-item-edit-button"
            ]
          }
        },
        {
          "component": "checkbox",
          "modifier": "default",
          "label": "I want to receive email updates and information.",
          "name": "receive-updates",
          "id": "receive-updates",
          "checked": true
        }
      ]
    },
    {
      "groupTitle": "Shipping Addresses",
      "modifier": "shipping-addresses",
      "formItems": [
        {
          "component": "shipping-address",
          "id": "checkout-shipping-address-1",
          "name": "checkout-shipping-address",
          "checked": true,
          "label": {
            "firstName": "John",
            "lastName": "Doe",
            "address1": "112 W Monroe St",
            "city": "Chicago",
            "state": "IL",
            "zip": "60603",
            "country": "United States",
            "phone": "888-888-1234"
          },
          "actions": [
            {
              "action": "edit",
              "buttonValue": "Edit",
              "modifier": "plain-text",
              "buttonModal": "shipping-address-edit",
              "noValidate": true,
              "classes": [
                "shipping-address__edit",
                "js-modal-form-item-edit-button"
              ]
            },
            {
              "action": "delete",
              "buttonValue": "Delete",
              "modifier": "plain-text",
              "classes": [
                "shipping-address__delete"
              ]
            }
          ]
        },
        {
          "component": "shipping-address",
          "id": "checkout-shipping-address-2",
          "name": "checkout-shipping-address",
          "label": {
            "firstName": "John",
            "lastName": "Smith",
            "address1": "One Aloha Lane",
            "city": "Peoria",
            "state": "IL",
            "zip": "61615",
            "country": "United States",
            "phone": "888-888-4321"
          },
          "actions": [
            {
              "action": "edit",
              "buttonValue": "Edit",
              "modifier": "plain-text",
              "buttonModal": "shipping-address-edit",
              "noValidate": true,
              "classes": [
                "shipping-address__edit",
                "js-modal-form-item-edit-button"
              ]
            },
            {
              "action": "delete",
              "buttonValue": "Delete",
              "modifier": "plain-text",
              "classes": [
                "shipping-address__delete"
              ]
            }
          ]
        },
        {
          "component": "shipping-address--button",
          "icon": "new-address",
          "label": "Add New Shipping Address",
          "buttonModal": "shipping-address-add"
        }
      ]
    }
  ],
  "pageModals": [
    {
      "component": "form-modal",
      "context": {
        "id": "fullname-edit",
        "title": "Edit Full Name",
        "form": "fullname-edit",
        "formContext": {
          "columns": 1
        }
      }
    },
    {
      "component": "form-modal",
      "context": {
        "id": "password-edit",
        "title": "Change Password",
        "form": "password-edit",
        "formContext": {
          "columns": 1
        }
      }
    },
    {
      "component": "form-modal--shipping-address-add"
    },
    {
      "component": "form-modal--shipping-address-edit"
    }
  ]
}
  • Content:
    .your-account {
      @include clearfix;
      margin: 0 auto;
    }
    
    .your-account__form-item-group-title {
      margin: 5px 0 15px;
      border-bottom: 1px solid $color-light;
      font-size: 1.6rem;
      font-weight: bold;
      letter-spacing: 1px;
      line-height: 1.9rem;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    // On-page forms.
    .your-account__form-item-group {
      @include clearfix;
      margin-bottom: 15px;
    
      & > .shipping-address {
        margin-bottom: 10px;
    
        &:first-child {
          margin-top: 20px;
        }
      }
    
      & > .form-item--fake {
        margin: 10px 0 25px;
      }
    
      & > .form-item--checkbox {
        padding-bottom: 20px;
      }
    
      @include breakpoint($breakpoint-md) {
        & > .shipping-address,
        & > .form-item {
          // The parent width = 2 * (.shipping.address width + 10px). Thus, each
          // .shipping-address must have a width of 50% - 10px
          width: calc(50% - 10px);
          margin-top: 0;
          margin-right: $gutter-width-half;
          margin-left: $gutter-width-half;
          float: left;
        }
    
        & > .shipping-address {
          margin-top: 5px;
          margin-bottom: 15px;
    
          &:first-child {
            margin-top: 5px;
          }
    
          &:nth-child(odd) {
            margin-left: 0;
          }
    
          &:nth-child(even) {
            margin-right: 0;
          }
        }
    
        & > .form-item {
          &:nth-child(odd) {
            margin-right: 0;
          }
    
          &:nth-child(even) {
            margin-left: 0;
          }
        }
    
        & > .form-item--fake {
          &:first-child {
            margin-right: 50%;
            margin-left: 0;
          }
        }
    
        & > .form-item--checkbox {
          width: 100%;
          margin: 0;
          padding-top: 10px;
          float: none;
          clear: both;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        & > .form-item {
          width: calc(50% - 50px);
          margin-right: 90px;
        }
    
        & > .shipping-address {
          // The parent width = 3 * (.shipping.address width) + 40px. Thus, each
          // .shipping-address must have a width of 33 1/3% - 40px/3. If we minus
          // a bit more than the padding, we can insure against rounding issues in
          // browsers.
          width: calc(33.333% - 40px/3);
    
          &:nth-child(odd),
          &:nth-child(even) {
            margin-right: $gutter-width-half;
            margin-left: $gutter-width-half;
          }
    
          &:nth-child(3n) {
            margin-right: 0;
          }
    
          &:nth-child(3n + 1) {
            margin-left: 0;
          }
        }
    
        & > .form-item--checkbox {
          width: 100%;
          margin: 0;
          padding-top: 25px;
        }
      }
    }
    
    // Ensures children have equal height.
    .your-account__form-item-group--shipping-addresses {
      @include breakpoint($breakpoint-md) {
        display: flex;
        flex-wrap: wrap;
      }
    }
    
    // Modal form styles.
    .modal--fullname-edit,
    .modal--password-edit {
      .modal__content {
        position: relative;
        width: 100%;
        height: 100%;
      }
    
      .modal-form__actions {
        width: 100%;
        margin-top: 10px;
    
        button {
          height: 50px;
          font-weight: bold;
          line-height: 50px;
          text-transform: uppercase;
        }
    
        .button--primary {
          color: $color-white;
        }
      }
    
      .label {
        margin-bottom: 5px;
      }
    
      @include breakpoint($breakpoint-md) {
        .modal__inner {
          max-width: 344px;
        }
    
        .modal__content {
          padding-top: 25px;
          padding-bottom: 25px;
        }
    
        .modal-form__actions {
          position: static;
          margin-top: 20px;
    
          button {
            width: 100%;
          }
        }
    
        .modal-form__action {
          width: 50%;
    
          &:first-child {
            padding-left: 0;
          }
    
          &:last-child {
            padding-right: 0;
          }
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        .modal__inner {
          max-width: 420px;
        }
      }
    }
    
  • URL: /components/raw/your-account/your-account.scss
  • Filesystem Path: src/components/01-elements/forms/your-account/your-account.scss
  • Size: 3.7 KB

There are no notes for this item.