workarea-haven_theme 1.3.0

data/app/views/workarea/storefront/style_guides/components/_data_card.html.haml

@@ -0,0 +1,218 @@
+#data-card.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'data_card')
+
+  %p Displays account data in a "card" UI that reflows to fit the context.
+
+  %p The default component stacks these child cells in a single column.
+
+  %p Credit card data:
+  .style-guide__example-block
+
+    .data-card
+      .data-card__cell
+        %p.data-card__line.data-card__credit-card.data-card__credit-card--default
+          = credit_card_issuer_icon('Visa')
+          %span.data-card__credit-card-number Visa ending in 4682
+        %p.data-card__line
+          %strong Expires:
+          %span
+            04/2020
+        %p.data-card__line
+          %strong Name on Card:
+          %span Bobby Clams
+      .data-card__cell
+        .grid.grid--auto
+          %p.grid__cell= link_to 'Edit', '#', class: 'button button--small'
+          = form_tag nil, class: 'grid__cell' do
+            %p= button_tag 'Delete', class: 'button button--small'
+
+    .data-card
+      .data-card__cell
+        %p.data-card__line.data-card__credit-card
+          = credit_card_issuer_icon('MasterCard')
+          %span.data-card__credit-card-number Master Card ending in 4682
+        %p.data-card__line
+          %strong Expires:
+          %span
+            04/2012
+            %strong (Expired)
+        %p.data-card__line
+          %strong Name on Card:
+          %span Bobby Clams
+      .data-card__cell
+        .grid.grid--auto
+          %p.grid__cell= link_to 'Edit', '#', class: 'button button--small'
+          = form_tag nil, class: 'grid__cell' do
+            %p= button_tag 'Delete', class: 'button button--small'
+
+    .data-card
+      .data-card__cell
+        %p.data-card__line.data-card__credit-card
+          = credit_card_issuer_icon('Discover')
+          %span.data-card__credit-card-number Discover ending in 4682
+        %p.data-card__line
+          %strong Expires:
+          %span
+            04/2020
+        %p.data-card__line
+          %strong Name on Card:
+          %span Bobby Clams
+      .data-card__cell
+        .grid.grid--auto
+          %p.grid__cell= link_to 'Edit', '#', class: 'button button--small'
+          = form_tag nil, class: 'grid__cell' do
+            %p= button_tag 'Delete', class: 'button button--small'
+
+    .data-card
+      .data-card__cell
+        %p.data-card__line.data-card__credit-card
+          = credit_card_issuer_icon('American Express')
+          %span.data-card__credit-card-number American Express ending in 4682
+        %p.data-card__line
+          %strong Expires:
+          %span
+            04/2020
+        %p.data-card__line
+          %strong Name on Card:
+          %span Bobby Clams
+      .data-card__cell
+        .grid.grid--auto
+          %p.grid__cell= link_to 'Edit', '#', class: 'button button--small'
+          = form_tag nil, class: 'grid__cell' do
+            %p= button_tag 'Delete', class: 'button button--small'
+
+    .data-card
+      .data-card__cell
+        %p.data-card__line.data-card__credit-card
+          = credit_card_issuer_icon('Diner\'s Club')
+          %span.data-card__credit-card-number Diner's Club ending in 4682
+        %p.data-card__line
+          %strong Expires:
+          %span
+            04/2020
+        %p.data-card__line
+          %strong Name on Card:
+          %span Bobby Clams
+      .data-card__cell
+        .grid.grid--auto
+          %p.grid__cell= link_to 'Edit', '#', class: 'button button--small'
+          = form_tag nil, class: 'grid__cell' do
+            %p= button_tag 'Delete', class: 'button button--small'
+
+  %p Address data:
+  .style-guide__example-block
+    .data-card
+      .data-card__cell
+        %p.data-card__line
+          Bobby Clams
+          %br
+          Workarea, LLC
+          %br
+          22 S 3rd St
+          %br
+          2nd Floor
+          %br
+          Philadelphia PA 19106
+          %br
+          = number_to_phone 2159251800
+      .data-card__cell
+        .grid.grid--auto
+          %p.grid__cell= link_to 'Edit', '#', class: 'button button--small'
+          = form_tag nil, class: 'grid__cell' do
+            %p= button_tag 'Delete', class: 'button button--small'
+
+  %p Order data:
+  .style-guide__example-block
+    .data-card.data-card--row
+      .data-card__cell
+        %p.data-card__line
+          %strong Order Date:
+          %span February 19, 2014
+        %p.data-card__line
+          %strong Order #:
+          %span 123456789
+        %p.data-card__line
+          %strong Order Status:
+          %span Shipped
+        %p.data-card__line
+          %strong Items:
+          %span 2 - $88.98
+      .data-card__cell
+        .grid
+          .grid__cell
+            %p= link_to 'View', '#', class: 'button button--small'
+          .grid__cell
+            %p= link_to 'Track Shipment', '#'
+          .grid__cell
+            %p= link_to 'Track Shipment 2', '#'
+
+#data-card--row.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'data_card__row')
+
+  %p Presents the #{link_to_style_guide('components', 'data_card', true)} as stacked, rather than inline.
+
+  %p Credit card data:
+  .style-guide__example-block
+    .data-card.data-card--row
+      .data-card__cell
+        %p.data-card__line.data-card__credit-card.data-card__credit-card--default
+          = credit_card_issuer_icon('Visa')
+          %span.data-card__credit-card-number ending in 4682
+        %p.data-card__line
+          %strong Expires:
+          %span
+            04/2020
+        %p.data-card__line
+          %strong Name on Card:
+          %span Bobby Clams
+      .data-card__cell
+        .grid.grid--auto
+          %p.grid__cell= link_to 'Edit', '#', class: 'button button--small'
+          = form_tag nil, class: 'grid__cell' do
+            %p= button_tag 'Delete', class: 'button button--small'
+
+  %p Address data:
+  .style-guide__example-block
+    .data-card.data-card--row
+      .data-card__cell
+        %p.data-card__line
+          Bobby Clams
+          %br
+          Workarea, LLC
+          %br
+          22 S 3rd St
+          %br
+          2nd Floor
+          %br
+          Philadelphia PA 19106
+          %br
+          = number_to_phone 2159251800
+      .data-card__cell
+        .grid.grid--auto
+          %p.grid__cell= link_to 'Edit', '#', class: 'button button--small'
+          = form_tag nil, class: 'grid__cell' do
+            %p= button_tag 'Delete', class: 'button button--small'
+
+  %p Order data:
+  .style-guide__example-block
+    .data-card.data-card--row
+      .data-card__cell
+        %p.data-card__line
+          %strong Order Date:
+          %span February 19, 2014
+        %p.data-card__line
+          %strong Order #:
+          %span 123456789
+        %p.data-card__line
+          %strong Order Status:
+          %span Shipped
+        %p.data-card__line
+          %strong Items:
+          %span 2 - $88.98
+      .data-card__cell
+        .grid.grid--auto
+          %p.grid__cell= link_to 'View', '#', class: 'button button--small'
+          %p.grid__cell= link_to 'Track Shipment', '#'
+          %p.grid__cell= link_to 'Track Shipment 2', '#'

data/app/views/workarea/storefront/style_guides/components/_mobile_filters.html.haml

@@ -0,0 +1,146 @@
+#mobile-filters.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'mobile_filters')
+
+  %p Provides a toggling UI for filtering search results for mobile devices.
+
+  %p should toggle content between a visible and invisible state:
+  .style-guide__example-block
+    .mobile-filters
+      .mobile-filters__trigger
+        = label_tag 'toggle_mobile_filters', 'Filter Results', class: 'button button--full', data: { mobile_filter_button: '' }
+
+      .mobile-filters__content
+        .mobile-filters__sort
+          .mobile-filters__wrapper
+            %h2.mobile-filters__heading= t('workarea.storefront.products.refine_results')
+            = form_tag '#', method: :get do
+              .property
+                = label_tag 'sort_drawer', nil, class: 'property__name' do
+                  %span.property__text= t('workarea.storefront.searches.sort_by')
+                %span.value= select_tag :sort, ['Top Sellers', 'Most Popular'], id: 'sort_drawer', data: { form_submitting_control: '' }
+              .hidden-if-js-enabled
+                = button_tag t('workarea.storefront.searches.sort'), value: 'sort_products_top', class: 'button'
+        .applied-filters
+          .result-filters
+            %ul.result-filters__group
+              %li.result-filters__filter.result-filters__filter--selected
+                %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                  .swatch-facet.swatch-facet--orange.swatch-facet--hex{ style: "background-color: #ff9800;" }
+                  %span.result-filters__filter-text Orange
+                  %span.result-filters__filter-remove= inline_svg('workarea/storefront/icons/x.svg', class: 'svg-icon svg-icon--tiny svg-icon--blue', title: t('workarea.storefront.products.remove_filter'))
+              %li.result-filters__filter.result-filters__filter--selected
+                %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                  .swatch-facet.swatch-facet--light_blue.swatch-facet--hex{ style: "background-color: #03a9f4;" }
+                  %span.result-filters__filter-text Light Blue
+                  %span.result-filters__filter-remove= inline_svg('workarea/storefront/icons/x.svg', class: 'svg-icon svg-icon--tiny svg-icon--blue', title: t('workarea.storefront.products.remove_filter'))
+              %li.result-filters__filter.result-filters__filter--selected
+                %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                  %span.swatch-facet.swatch-facet--10_0_19_99.swatch-facet--empty
+                  %span.result-filters__filter-text $10.00 - $19.99
+                  %span.result-filters__filter-remove= inline_svg('workarea/storefront/icons/x.svg', class: 'svg-icon svg-icon--tiny svg-icon--blue', title: t('workarea.storefront.products.remove_filter'))
+            = link_to t('workarea.storefront.filters.clear'), '#', class: 'button button--small'
+
+        .result-filters{ data: { filter_view_more: '', expandable_filters: '' } }
+          .result-filters__container
+            %h2.result-filters__attribute Color
+            .result-filters__section.result-filters__section--color
+              %ul.result-filters__group.result-filters__group--truncated
+                %li.result-filters__filter.result-filters__filter--selected
+                  %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                    .swatch-facet.swatch-facet--orange.swatch-facet--hex{ style: "background-color: #ff9800;" }
+                    %span.result-filters__filter-text Orange
+                    %span.result-filters__filter-remove= inline_svg('workarea/storefront/icons/x.svg', class: 'svg-icon svg-icon--tiny svg-icon--blue', title: t('workarea.storefront.products.remove_filter'))
+                %li.result-filters__filter
+                  %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                    .swatch-facet.swatch-facet--green.swatch-facet--hex{ style: "background-color: #4caf50;" }
+                    %span.result-filters__filter-text Green
+                    %span.result-filters__filter-count 9
+                %li.result-filters__filter
+                  %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                    .swatch-facet.swatch-facet--red.swatch-facet--hex{ style: "background-color: #f44336;" }
+                    %span.result-filters__filter-text Red
+                    %span.result-filters__filter-count 9
+                %li.result-filters__filter
+                  %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                    .swatch-facet.swatch-facet--yellow.swatch-facet--hex{ style: "background-color: #ffeb3b;" }
+                    %span.result-filters__filter-text Yellow
+                    %span.result-filters__filter-count 9
+                %li.result-filters__filter
+                  %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                    .swatch-facet.swatch-facet--white.swatch-facet--hex{ style: "background-color: #ffffff;" }
+                    %span.result-filters__filter-text White
+                    %span.result-filters__filter-count 8
+                %li.result-filters__filter
+                  %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                    .swatch-facet.swatch-facet--blue_grey.swatch-facet--hex{ style: "background-color: #607d8b;" }
+                    %span.result-filters__filter-text Blue Grey
+                    %span.result-filters__filter-count 6
+                %li.result-filters__filter
+                  %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                    .swatch-facet.swatch-facet--grey.swatch-facet--hex{ style: "background-color: #9e9e9e;" }
+                    %span.result-filters__filter-text Grey
+                    %span.result-filters__filter-count 6
+                %li.result-filters__filter.result-filters__filter--selected
+                  %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                    .swatch-facet.swatch-facet--light_blue.swatch-facet--hex{ style: "background-color: #03a9f4;" }
+                    %span.result-filters__filter-text Light Blue
+                    %span.result-filters__filter-remove= inline_svg('workarea/storefront/icons/x.svg', class: 'svg-icon svg-icon--tiny svg-icon--blue', title: t('workarea.storefront.products.remove_filter'))
+                %li.result-filters__filter
+                  %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                    .swatch-facet.swatch-facet--light_green.swatch-facet--hex{ style: "background-color: #8bc34a;" }
+                    %span.result-filters__filter-text Light Green
+                    %span.result-filters__filter-count 6
+                %li.result-filters__filter
+                  %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                    .swatch-facet.swatch-facet--blue.swatch-facet--hex{ style: "background-color: #2196f3;" }
+                    %span.result-filters__filter-text Blue
+                    %span.result-filters__filter-count 5
+              %button.result-filters__view-more-button View More
+          .result-filters__container.result-filters__container--closed
+            %h2.result-filters__attribute Price
+            .result-filters__section
+              %ul.result-filters__group.result-filters__group--truncated
+                %li.result-filters__filter
+                  %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                    %span.result-filters__filter-text Under $9.99
+                    %span.result-filters__filter-count 12
+                %li.result-filters__filter.result-filters__filter--selected
+                  %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                    %span.result-filters__filter-text $10.00 - $19.99
+                    %span.result-filters__filter-remove= inline_svg('workarea/storefront/icons/x.svg', class: 'svg-icon svg-icon--tiny svg-icon--blue', title: t('workarea.storefront.products.remove_filter'))
+                %li.result-filters__filter
+                  %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                    %span.result-filters__filter-text $20.00 - $29.99
+                    %span.result-filters__filter-count 11
+                %li.result-filters__filter
+                  %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                    %span.result-filters__filter-text $30.00 - $39.99
+                    %span.result-filters__filter-count 12
+                %li.result-filters__filter
+                  %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                    %span.result-filters__filter-text $40.00 - $49.99
+                    %span.result-filters__filter-count 8
+                %li.result-filters__filter
+                  %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                    %span.result-filters__filter-text $50.00 - $59.99
+                    %span.result-filters__filter-count 11
+                %li.result-filters__filter
+                  %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                    %span.result-filters__filter-text $60.00 - $69.99
+                    %span.result-filters__filter-count 17
+                %li.result-filters__filter
+                  %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                    %span.result-filters__filter-text $70.00 - $79.99
+                    %span.result-filters__filter-count 19
+                %li.result-filters__filter
+                  %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                    %span.result-filters__filter-text $80.00 - $89.99
+                    %span.result-filters__filter-count 11
+                %li.result-filters__filter
+                  %a.result-filters__filter-link{ href: "#", rel: "nofollow" }
+                    %span.result-filters__filter-text $90.00 - $99.99
+                    %span.result-filters__filter-count 12
+              %button.result-filters__view-more-button View More
+
+#mobile-filters-nav.mobile-filters-nav

data/app/views/workarea/storefront/style_guides/components/_personalized_recommendations_content_block.html.haml

@@ -0,0 +1,34 @@
+#personalized-recommendations-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'personalized_recommendations_content_block')
+
+  %p A content block containing <code>.product-summary</code> components.
+
+  %p should provide a responsive layout for multiple <code>.product-summary</code> components:
+  .style-guide__example-block
+    .personalized-recommendations-content-block
+      .content-wrapper
+        .grid
+          - (1..4).each do |i|
+            .grid__cell.grid__cell--50.grid__cell--25-at-medium
+              .product-summary.product-summary--small
+                .product-summary__media
+                  .product-summary__image-wrapper
+                    = image_tag 'workarea/core/placeholder.png', size: '180x180', class: 'product-summary__image'
+                .product-summary__info
+                  %span.product-summary__name Product Title #{i}
+
+  %p should support a heading:
+  .style-guide__example-block
+    .personalized-recommendations-content-block
+      .content-wrapper
+        %h2.personalized-recommendations-content-block__heading Personalized Recommendations Content Block
+        .grid
+          - (1..4).each do |i|
+            .grid__cell.grid__cell--50.grid__cell--25-at-medium
+              .product-summary.product-summary--small
+                .product-summary__media
+                  .product-summary__image-wrapper
+                    = image_tag 'workarea/core/placeholder.png', size: '180x180', class: 'product-summary__image'
+                .product-summary__info
+                  %span.product-summary__name Product Title #{i}

data/app/views/workarea/storefront/style_guides/components/_product_insights_content_block.html.haml

@@ -0,0 +1,34 @@
+#product-insights-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'product_insights_content_block')
+
+  %p A content block containing <code>.product-summary</code> components.
+
+  %p should provide a responsive layout for multiple <code>.product-summary</code> components:
+  .style-guide__example-block
+    .product-insights-content-block
+      .content-wrapper
+        .grid
+          - (1..4).each do |i|
+            .grid__cell.grid__cell--50.grid__cell--25-at-medium
+              .product-summary.product-summary--small
+                .product-summary__media
+                  .product-summary__image-wrapper
+                    = image_tag 'workarea/core/placeholder.png', size: '180x180', class: 'product-summary__image'
+                .product-summary__info
+                  %span.product-summary__name Product Title #{i}
+
+    %p should support a heading:
+    .style-guide__example-block
+      .product-insights-content-block
+        .content-wrapper
+        %h2.product-insights-content-block__heading Product List Content Block
+        .grid
+          - (1..4).each do |i|
+            .grid__cell.grid__cell--50.grid__cell--25-at-medium
+              .product-summary.product-summary--small
+                .product-summary__media
+                  .product-summary__image-wrapper
+                    = image_tag 'workarea/core/placeholder.png', size: '180x180', class: 'product-summary__image'
+                .product-summary__info
+                  %span.product-summary__name Product Title #{i}

data/app/views/workarea/storefront/style_guides/components/_product_list.html.haml

@@ -0,0 +1,222 @@
+#product-list.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'product_list')
+
+  %p Displays a list of product line-items. Uses include cart, checkout payment, checkout shipping, order summary, public wish list, and private wish list.
+
+  %p Cart items:
+  .style-guide__example-block
+    .product-list
+      .product-list__item
+        .product-list__summary
+          .product-list__media= link_to(image_tag('workarea/storefront/style_guide_product.jpg', alt: 'Product Name', class: 'product-list__media-image'), '#', class: 'product-list__media-link')
+          .product-list__info
+            %p.product-list__name= link_to('Product Name', '#')
+            .product-list__option-group
+              %p.product-list__option Color: Blue
+              %p.product-list__option Size: Small
+            %p.product-list__customization Custom 1: Value of Custom 1
+        .product-list__actions
+          = form_tag nil, method: :patch, class: 'inline-form' do
+            .inline-form__cell
+
+              .quantity-control
+                = button_tag '-', { type: 'button', data: { quantity_control: { 'direction': 'dec', 'autosubmit': true }.to_json }, class: 'quantity-control__button quantity-control__button--decrement'}
+                .value= number_field_tag :quantity, 1, min: 1, required: true, class: 'quantity-control__input text-box text-box--x-small', data: { form_submitting_control: '' }, title: t('workarea.storefront.orders.quantity'), id: "product_list_item_quantity_1"
+                = button_tag '+', { type: 'button', data: { quantity_control: { 'direction': 'inc', 'autosubmit': true }.to_json }, class: 'quantity-control__button quantity-control__button--increment'}
+
+            %p.inline-form__cell.hidden-if-js-enabled= button_tag t('workarea.storefront.carts.update'), value: 'change_quantity', class: 'button'
+
+          = form_tag nil, class: 'product-list__remove-item' do
+            %p= button_tag 'Remove', class: 'text-button'
+
+        .product-list__prices
+          .product-prices
+            %p.product-prices__price
+              %s= number_to_currency(100.00)
+            %p.product-prices__price
+              %strong.product-prices__price--sale= number_to_currency(90.00)
+            %p.product-prices__price
+              %span.product-prices__price-label Customizations:
+              %span= number_to_currency(10.00)
+            .product-prices__discounts
+              .product-prices__discount
+                %span.product-prices__price-label Item Level Discount:
+                %strong.product-prices__discount-price= number_to_currency(-5.00)
+              .product-prices__discount
+                %span.product-prices__price-label An Item Level Discount With a Longer Name Than the Last:
+                %strong.product-prices__discount-price= number_to_currency(-5.00)
+            .product-list__total-price
+              %span.product-prices__price-label Total:
+              %span= number_to_currency(100.00)
+
+      .product-list__item
+        .product-list__summary
+          .product-list__media= link_to(image_tag('workarea/storefront/style_guide_product.jpg', alt: 'Product Name', class: 'product-list__media-image'), '#', class: 'product-list__media-link')
+          .product-list__info
+            %p.product-list__name= link_to('Product Name', '#')
+        .product-list__actions
+          %p.product-list__quantity
+            = t('workarea.storefront.orders.quantity')
+            1
+        .product-list__prices
+          .product-prices
+            .product-prices__price
+              %span= t('workarea.storefront.carts.free_gift')
+
+  %p Checkout summary:
+  .style-guide__example-block
+    .product-list
+      .product-list__item
+        .product-list__summary
+          .product-list__media= link_to(image_tag('workarea/storefront/style_guide_product.jpg', alt: 'Product Name', class: 'product-list__media-image'), '#', class: 'product-list__media-link')
+          .product-list__info
+            %p.product-list__name= link_to('Product Name', '#')
+            .product-list__option-group
+              %p.product-list__option Color: Blue
+              %p.product-list__option Size: Small
+        .product-list__actions
+          %p.product-list__quantity
+            = t('workarea.storefront.orders.quantity')
+            1
+
+        .product-list__prices
+          .product-prices
+            %p.product-prices__price
+              %s= number_to_currency(100.00)
+            %p.product-prices__price
+              %strong.product-prices__price--sale= number_to_currency(90.00)
+            %p.product-prices__price
+              %span.product-prices__price-label Customizations:
+              %span= number_to_currency(10.00)
+            .product-prices__discounts
+              .product-prices__discount
+                %span.product-prices__price-label Item Level Discount:
+                %strong.product-prices__discount-price= number_to_currency(-5.00)
+              .product-prices__discount
+                %span.product-prices__price-label An Item Level Discount With a Longer Name Than the Last:
+                %strong.product-prices__discount-price= number_to_currency(-5.00)
+            .product-list__total-price
+              %span.product-prices__price-label Total:
+              %span= number_to_currency(100.00)
+
+      .product-list__item
+        .product-list__summary
+          .product-list__media= link_to(image_tag('workarea/storefront/style_guide_product.jpg', alt: 'Product Name', class: 'product-list__media-image'), '#', class: 'product-list__media-link')
+          .product-list__info
+            %p.product-list__name= link_to('Product Name', '#')
+        .product-list__actions
+          %p.product-list__quantity
+            = t('workarea.storefront.orders.quantity')
+            1
+        .product-list__prices
+          .product-prices
+            .product-prices__price
+              %span= t('workarea.storefront.carts.free_gift')
+
+  %p Order shipments:
+  .style-guide__example-block
+    .product-list
+      - 2.times do
+        .product-list__item
+          .product-list__summary
+            .product-list__media= link_to(image_tag('workarea/storefront/style_guide_product.jpg', alt: 'Product Name', class: 'product-list__media-image'), '#', class: 'product-list__media-link')
+            .product-list__info
+              %p.product-list__name= link_to('Product Name', '#')
+              %p.product-list__id 1234
+              .product-list__option-group
+                %p.product-list__option Color: Blue
+                %p.product-list__option Size: Small
+
+          .product-list__shipments
+            %h6.product-list__shipments-heading Tracking
+            .product-list__tracking
+              %span.product-list__tracking__qty 1
+              %span.product-list__tracking__link UPS #123456789 #{link_to 'Track Shipment', '#', target: '_blank', rel: 'noopener', class: 'button button--small'}
+            .product-list__tracking
+              %span.product-list__tracking__quantity 3
+              %span.product-list__tracking__link UPS #987654321 #{link_to 'Track Shipment', '#', target: '_blank', rel: 'noopener', class: 'button button--small'}
+
+  %p Order pending/canceled items:
+  .style-guide__example-block
+    .product-list
+      - 2.times do
+        .product-list__item
+          .product-list__summary
+            .product-list__media= link_to(image_tag('workarea/storefront/style_guide_product.jpg', alt: 'Product Name', class: 'product-list__media-image'), '#', class: 'product-list__media-link')
+            .product-list__info
+              %p.product-list__name= link_to('Product Name', '#')
+              .product-list__option-group
+                %p.product-list__option Color: Blue
+                %p.product-list__option Size: Small
+          .product-list__actions
+            %p.product-list__quantity
+              = t('workarea.storefront.orders.quantity')
+              1
+
+  = append_partials('storefront.style_guide_product_list')
+
+#product-list--narrow.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'product_list__narrow')
+
+  %p For when #{link_to_style_guide('components', 'product_list', true)} appears in narrow contexts such as an off canvas menu or dialog.
+
+  .style-guide__example-block
+    .product-list.product-list--narrow
+      .product-list__item
+        .product-list__summary
+          .product-list__media= link_to(image_tag('workarea/storefront/style_guide_product.jpg', alt: 'Product Name', class: 'product-list__media-image'), '#', class: 'product-list__media-link')
+          .product-list__info
+            %p.product-list__name= link_to('Product Name', '#')
+            .product-list__option-group
+              %p.product-list__option Color: Blue
+              %p.product-list__option Size: Small
+            %p.product-list__customization Custom 1: Value of Custom 1
+        .product-list__actions
+          = form_tag nil, method: :patch, class: 'inline-form' do
+            .inline-form__cell
+
+              .quantity-control
+                = button_tag '-', { type: 'button', data: { quantity_control: { 'direction': 'dec', 'autosubmit': true }.to_json }, class: 'quantity-control__button quantity-control__button--decrement'}
+                .value= number_field_tag :quantity, 1, min: 1, required: true, class: 'quantity-control__input text-box text-box--x-small', data: { form_submitting_control: '' }, title: t('workarea.storefront.orders.quantity'), id: "product_list_item_quantity_2"
+                = button_tag '+', { type: 'button', data: { quantity_control: { 'direction': 'inc', 'autosubmit': true }.to_json }, class: 'quantity-control__button quantity-control__button--increment'}
+
+            %p.inline-form__cell.hidden-if-js-enabled= button_tag t('workarea.storefront.carts.update'), value: 'change_quantity', class: 'button'
+
+          = form_tag nil, class: 'product-list__remove-item' do
+            %p= button_tag 'Remove', class: 'text-button'
+
+        .product-list__prices
+          .product-prices
+            %p.product-prices__price
+              %s= number_to_currency(100.00)
+            %p.product-prices__price
+              %strong.product-prices__price--sale= number_to_currency(90.00)
+            %p.product-prices__price
+              %span.product-prices__price-label Customizations:
+              %span= number_to_currency(10.00)
+            .product-prices__discounts
+              .product-prices__discount
+                %span.product-prices__price-label Item Level Discount:
+                %strong.product-prices__discount-price= number_to_currency(-5.00)
+              .product-prices__discount
+                %span.product-prices__price-label An Item Level Discount With a Longer Name Than the Last:
+                %strong.product-prices__discount-price= number_to_currency(-5.00)
+            .product-list__total-price
+              %span.product-prices__price-label Total:
+              %span= number_to_currency(100.00)
+
+      .product-list__item
+        .product-list__summary
+          .product-list__media= link_to(image_tag('workarea/storefront/style_guide_product.jpg', alt: 'Product Name', class: 'product-list__media-image'), '#', class: 'product-list__media-link')
+          .product-list__info
+            %p.product-list__name= link_to('Product Name', '#')
+        .product-list__actions
+          %p.product-list__quantity
+            = t('workarea.storefront.orders.quantity')
+            1
+        .product-list__prices
+          .product-prices
+            .product-prices__price
+              %span= t('workarea.storefront.carts.free_gift')