<div class="confirmation-summary">
    <dl class="confirmation-summary__fees-list">
        <dt class="confirmation-summary__fees-list-label">Subtotal</dt>
        <dd class="confirmation-summary__fees-list-value">$1,389.97</dd>
        <dt class="confirmation-summary__fees-list-label">Gift Bag (1)</dt>
        <dd class="confirmation-summary__fees-list-value">$3.99</dd>
        <dt class="confirmation-summary__fees-list-label">Shipping</dt>
        <dd class="confirmation-summary__fees-list-value">FREE</dd>
        <dt class="confirmation-summary__fees-list-label">Estimated Tax</dt>
        <dd class="confirmation-summary__fees-list-value">$142.88</dd>
        <dt class="confirmation-summary__fees-list-label confirmation-summary__fees-list-label--total">Total</dt>
        <dd class="confirmation-summary__fees-list-value confirmation-summary__fees-list-value--total">$1,536.84</dd>
    </dl>
    <div class="confirmation-summary__meta">
        <div class="confirmation-summary__group">
            <span class="confirmation-summary__group-label">Shipping Address</span>
            <div class="confirmation-summary__data">
                <span class="confirmation-summary__data-value">John Doe<br>One Aloha Lane<br>Peoria, IL 61615<br>United States</span>
            </div>
        </div>
        <div class="confirmation-summary__group confirmation-summary__group--billing">
            <span class="confirmation-summary__group-label">Billing Information</span>
            <div class="confirmation-summary__data">
                <span class="confirmation-summary__data-value">John Doe<br>Apple, Inc.<br>888-888-1234<br>One Aloha Lane<br>Peoria, IL 61615<br>United States</span>
            </div>
            <div class="confirmation-summary__data">
                <span class="confirmation-summary__data-value">American Express<br>John Doe<br>****-****-****-3456<br>10/2018</span>
            </div>
        </div>
    </div>
</div>
<div class="confirmation-summary">
  <dl class="confirmation-summary__fees-list">
    {{#each fees}}
    <dt class="confirmation-summary__fees-list-label">{{label}}</dt>
    <dd class="confirmation-summary__fees-list-value">{{value}}</dd>
    {{/each}}
    {{#if total}}
    <dt class="confirmation-summary__fees-list-label confirmation-summary__fees-list-label--total">Total</dt>
    <dd class="confirmation-summary__fees-list-value confirmation-summary__fees-list-value--total">{{total}}</dd>
    {{/if}}
  </dl>
  <div class="confirmation-summary__meta{{#if wide}} confirmation-summary__meta--wide{{/if}}">
    {{#each items}}
    <div class="confirmation-summary__group{{#if modifier}} confirmation-summary__group--{{modifier}}{{/if}}">
      {{#if label}}
      <span class="confirmation-summary__group-label">{{label}}</span>
      {{/if}}
      {{#each data}}
      <div class="confirmation-summary__data">
        {{#if label}}
        <span class="confirmation-summary__data-label">{{label}}:</span>
        {{/if}}
        <span class="confirmation-summary__data-value">{{{value}}}</span>
      </div>
      {{/each}}
    </div>
    {{/each}}
  </div>
</div>
{
  "pageCss": [
    "checkout"
  ],
  "total": "$1,536.84",
  "fees": [
    {
      "label": "Subtotal",
      "value": "$1,389.97"
    },
    {
      "label": "Gift Bag (1)",
      "value": "$3.99"
    },
    {
      "label": "Shipping",
      "value": "FREE"
    },
    {
      "label": "Estimated Tax",
      "value": "$142.88"
    }
  ],
  "items": [
    {
      "label": "Shipping Address",
      "data": [
        {
          "value": "John Doe<br>One Aloha Lane<br>Peoria, IL 61615<br>United States"
        }
      ]
    },
    {
      "modifier": "billing",
      "label": "Billing Information",
      "data": [
        {
          "value": "John Doe<br>Apple, Inc.<br>888-888-1234<br>One Aloha Lane<br>Peoria, IL 61615<br>United States"
        },
        {
          "value": "American Express<br>John Doe<br>****-****-****-3456<br>10/2018"
        }
      ]
    }
  ]
}
  • Content:
    // .confirmation-products__* classes can be removed once it is confirmed that
    // they are not used in production.
    
    .confirmation-summary {
      margin-right: auto;
      margin-bottom: 35px;
      margin-left: auto;
    }
    
    .confirmation-summary__fees-list,
    .confirmation-summary__meta {
      max-width: 60rem;
      margin-right: auto;
      margin-left: auto;
    
      &--wide {
        max-width: none;
    
        @include breakpoint($breakpoint-md) {
          display: flex;
          justify-content: space-between;
        }
      }
    }
    
    .confirmation-summary__fees-list {
      @include clearfix;
      margin-bottom: 35px;
    
      // .confirmation-products is wider; this component should follow suit.
      .confirmation-products--repairs ~ & {
        max-width: 700px;
      }
    }
    
    .confirmation-summary__fees-list-label,
    .confirmation-summary__fees-list-value {
      font-size: 1.8rem;
      font-weight: $font-weight-medium;
      line-height: 2.4rem;
    
      &--total {
        margin-top: 12px;
        font-size: 2.4rem;
        line-height: 3rem;
      }
    
      @include breakpoint($breakpoint-smd) {
        font-size: 2rem;
        line-height: 2.6rem;
    
        &--total {
          font-size: 2.6rem;
          line-height: 3.2rem;
        }
      }
    }
    
    .confirmation-summary__fees-list-label {
      float: left;
      clear: left;
    }
    
    .confirmation-summary__fees-list-value {
      float: right;
      clear: right;
    }
    
    .confirmation-products__footer,
    .confirmation-summary__meta {
      @include clearfix;
      padding: 10px;
      background-color: $color-lighter;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
    
      @include breakpoint($breakpoint-md) {
        padding: 10px 30px;
      }
    }
    
    // This may no longer be necessary, but it’s here in case Pragiti’s still using
    // it in prod.
    .confirmation-products__footer {
      margin-right: -10px;
      margin-left: -10px;
    
      @include breakpoint($breakpoint-md) {
        margin-right: -30px;
        margin-left: -30px;
      }
    }
    
    .confirmation-products__footer-group,
    .confirmation-summary__group {
      margin-bottom: 20px;
    
      @include breakpoint($breakpoint-smd) {
        width: auto;
        margin-bottom: 0;
        float: left;
    
        .confirmation-summary__meta--wide & {
          margin-bottom: 2rem;
          float: initial;
        }
      }
    }
    
    .confirmation-products__footer-group--billing,
    .confirmation-summary__group--billing {
      @include breakpoint($breakpoint-smd) {
        float: right;
      }
    
      .confirmation-summary__data:not(:first-of-type) {
        margin-top: 15px;
      }
    }
    
    .confirmation-products__footer-group-label,
    .confirmation-summary__group-label {
      display: block;
      font-weight: $font-weight-bold;
    }
    
    .confirmation-products__footer-data-label,
    .confirmation-summary__data-label {
      font-weight: $font-weight-bold;
    }
    
  • URL: /components/raw/confirmation-summary/confirmation-summary.scss
  • Filesystem Path: src/components/02-components/confirmation/confirmation-summary/confirmation-summary.scss
  • Size: 2.6 KB
  • Handle: @confirmation-summary--default
  • Variants (2): Default , Wide
  • Preview:
  • Filesystem Path: src/components/02-components/confirmation/confirmation-summary/confirmation-summary.html

There are no notes for this item.