<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-company">Apple, Inc.</span><br>
      <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="{{id}}" name="{{name}}" class="radio radio--default"{{#if checked}} checked="true"{{/if}}>
  {{#if label}}
  <label class="shipping-address__details" for="{{id}}">
    <p class="shipping-address__name">
      {{#if label.firstName}}
      <span class="js-shipping-address-value" data-value-id="shipping-address-first-name">{{label.firstName}}</span>
      {{/if}}
      {{#if label.lastName}}
      <span class="js-shipping-address-value" data-value-id="shipping-address-last-name">{{label.lastName}}</span>
      {{/if}}
    </p>
    <p class="shipping-address__address">
      {{#if label.company}}
      <span class="js-shipping-address-value" data-value-id="shipping-address-company">{{label.company}}</span><br>
      {{/if}}
      <span class="js-shipping-address-value" data-value-id="shipping-address-address-1">{{label.address1}}</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-city">{{label.city}}</span>,
      <span class="js-shipping-address-value" data-value-id="shipping-address-state">{{label.state}}</span>
      <span class="js-shipping-address-value" data-value-id="shipping-address-zip">{{label.zip}}</span><br>
      <span class="js-shipping-address-value" data-value-id="shipping-address-country" data-value-value="USA">{{label.country}}</span>
    </p>
    <p class="shipping-address__phone">
      <span class="js-shipping-address-value" data-value-id="shipping-address-phone-number">{{label.phone}}</span>
    </p>
  </label>
  {{/if}}
  {{#if actions}}
  <div class="shipping-address__actions">
    {{#each actions}}
    {{> @buttons this}}
    {{/each}}
  </div>
  {{/if}}
  <span class="shipping-address__accent"></span>
</div>
{
  "id": "checkout-shipping-address-1",
  "name": "checkout-shipping-address",
  "label": {
    "firstName": "John",
    "lastName": "Doe",
    "company": "Apple, Inc.",
    "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"
      ]
    }
  ],
  "pageModals": [
    {
      "component": "form-modal--shipping-address-edit"
    }
  ],
  "checked": true
}
  • Content:
    // The JavaScript that handles the "Edit" button functionality can be found in
    // ../input-fake/input-fake.js.
    
  • URL: /components/raw/shipping-address/shipping-address.js
  • Filesystem Path: src/components/01-elements/form-items/shipping-address/shipping-address.js
  • Size: 111 Bytes
  • Content:
    .shipping-address {
      position: relative;
      min-height: 150px;
      padding: 10px;
      box-sizing: border-box;
    
      .radio--default + label {
        padding-left: 5px;
        color: $color-dark;
        font-size: 1.4rem;
        line-height: 1.7rem;
    
        &:before {
          top: 0;
          right: 10px;
          left: auto;
          transform: none;
        }
    
        &:after {
          top: 4px;
          right: 14px;
          left: auto;
        }
    
        @include breakpoint($breakpoint-xl) {
          color: $color-darkest;
          font-size: 1.9rem;
          line-height: 2.3rem;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        min-height: 180px;
      }
    
      @include breakpoint($breakpoint-xl) {
        min-height: 200px;
      }
    }
    
    .shipping-address--button {
      @include reset-button;
      display: block;
      width: 100%;
    
      .icon {
        fill: $color-medium-dark;
        pointer-events: none;
      }
    
      .icon--new-address {
        width: 24px;
        height: 24px;
      }
    
      @include breakpoint($breakpoint-xl) {
        .icon--new-address {
          width: 35px;
          height: 36px;
        }
      }
    }
    
    .shipping-address__name {
      margin: 5px 0 10px;
      padding-right: 34px;
      font-weight: $font-weight-medium;
      word-break: break-all;
      hyphens: auto;
    
      @include breakpoint($breakpoint-md) {
        margin: 10px 0;
        font-weight: $font-weight-bold;
      }
    }
    
    .shipping-address__address {
      margin: 5px 0 0;
    }
    
    // Removes the need for JS to change the border when the radio is checked.
    .shipping-address__accent {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border: 1px solid $color-light;
      pointer-events: none;
    
      .radio--default:checked ~ & {
        border: 3px solid $color-primary;
      }
    }
    
    .shipping-address__button-label {
      margin: 8px 0;
      color: $color-darkest;
      font-size: 1.4rem;
      letter-spacing: 1px;
      line-height: 2.0rem;
      pointer-events: none;
    
      @include breakpoint($breakpoint-xl) {
        margin: 10px 0;
      }
    }
    
    .shipping-address__actions {
      position: absolute;
      right: 0;
      bottom: 0;
      text-align: right;
    
      .button--plain-text {
        position: relative;
        min-width: 0;
        height: 30px;
        line-height: 30px;
        overflow: visible;
        z-index: 10;
    
        &:not(:first-child)::before {
          display: block;
          position: absolute;
          top: 9px;
          bottom: 9px;
          left: -4px;
          width: 1px;
          height: 12px;
          border-right: 1px solid $color-light;
          content: '';
        }
      }
    
      @include breakpoint($breakpoint-md) {
        bottom: 10px;
      }
    
      @include breakpoint($breakpoint-xl) {
        right: 10px;
      }
    }
    
    .shipping-address__edit {
      color: $color-darkest;
    }
    
    .shipping-address__delete {
      color: $color-error;
    
      &:hover {
        color: $color-error;
      }
    }
    
  • URL: /components/raw/shipping-address/shipping-address.scss
  • Filesystem Path: src/components/01-elements/form-items/shipping-address/shipping-address.scss
  • Size: 2.6 KB

There are no notes for this item.