workarea-storefront 3.4.12

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

@@ -0,0 +1,302 @@
+#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__item-cell
+          .product-list__summary
+            %p.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
+              %p.product-list__customization Custom 1: Value of Custom 1
+          .grid.grid--auto
+            = form_tag nil, class: 'grid__cell' do
+              %p= button_tag 'Remove', class: 'text-button'
+        .product-list__item-cell
+          %table.table
+            %thead
+              %tr
+                %th.table__prices Price
+                %th.table__quantity Qty
+                %th.table__prices Total
+            %tbody
+              %tr
+                %td.table__prices
+                  %p.table__price
+                    %span.table__price-label Now:
+                    %strong.table__price-discount= number_to_currency(90.00)
+                  %p.table__price
+                    %span.table__price-label Was:
+                    %s= number_to_currency(100.00)
+                  %p.table__price
+                    %span.table__price-label Customizations:
+                    %span= number_to_currency(10.00)
+                %td.table__quantity
+                  = form_tag nil, class: 'inline-form' do
+                    .inline-form__cell
+                      .value= number_field_tag 'wl_table_cart_item_quantity_1', 1, min: 1, required: true, class: 'text-box text-box--x-small', data: { form_submitting_control: '' }, title: 'Quantity'
+                    %p.inline-form__cell.hidden-if-js-enabled= button_tag 'Update', value: 'change_quantity', class: 'button'
+                %td.table__prices
+                  %p.table__price
+                    %span.table__price-label Subtotal:
+                    %span= number_to_currency(100.00)
+                  %p.table__price
+                    %span.table__price-label Item Level Discount:
+                    %strong.table__price-discount= number_to_currency(-5.00)
+                  %p.table__price
+                    %span.table__price-label An Item Level Discount With a Longer Name Than the Last:
+                    %strong.table__price-discount= number_to_currency(-5.00)
+                  %p.table__price
+                    %span.table__price-label Total:
+                    %span= number_to_currency(100.00)
+      .product-list__item
+        .product-list__item-cell
+          .product-list__summary
+            %p.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__item-cell
+          %table.table
+            %thead
+              %tr
+                %th.table__prices Price
+                %th.table__quantity Qty
+                %th.table__prices Total
+            %tbody
+              %tr
+                %td.table__prices
+                  %p.table__price
+                    %span Free Gift!
+                %td.table__quantity
+                  %p 1
+                %td.table__prices
+                  %p.table__price
+                    %span Free Gift!
+
+  %p Checkout payment:
+  .style-guide__example-block
+    .product-list
+      .product-list__item
+        .product-list__item-cell
+          .product-list__summary
+            %p.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__item-cell
+          %table.table
+            %thead
+              %tr
+                %th.table__prices Price
+                %th.table__quantity Qty
+                %th.table__prices Total
+            %tbody
+              %tr
+                %td.table__prices
+                  %p.table__price
+                    %span.table__price-label Now:
+                    %strong.table__price-discount= number_to_currency(90.00)
+                  %p.table__price
+                    %span.table__price-label Was:
+                    %s= number_to_currency(100.00)
+                  %p.table__price
+                    %span.table__price-label Customizations:
+                    %span= number_to_currency(10.00)
+                %td.table__quantity
+                  %p 1
+                %td.table__prices
+                  %p.table__price
+                    %span.table__price-label Subtotal:
+                    %span= number_to_currency(100.00)
+                  %p.table__price
+                    %span.table__price-label Item Level Discount:
+                    %strong.table__price-discount= number_to_currency(-5.00)
+                  %p.table__price
+                    %span.table__price-label An Item Level Discount With a Longer Name Than the Last:
+                    %strong.table__price-discount= number_to_currency(-5.00)
+                  %p.table__price
+                    %span.table__price-label Total:
+                    %span= number_to_currency(100.00)
+      .product-list__item
+        .product-list__item-cell
+          .product-list__summary
+            %p.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__item-cell
+          %table.table
+            %thead
+              %tr
+                %th.table__prices Price
+                %th.table__quantity Qty
+                %th.table__prices Total
+            %tbody
+              %tr
+                %td.table__prices
+                  %p.table__price
+                    %span Free Gift!
+                %td.table__quantity
+                  %p 1
+                %td.table__prices
+                  %p.table__price
+                    %span Free Gift!
+
+  %p Order shipments:
+  .style-guide__example-block
+    .product-list
+      - 2.times do
+        .product-list__item
+          .product-list__item-cell
+            .product-list__summary
+              %p.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__item-cell
+            %table.table
+              %thead
+                %tr
+                  %th.table__quantity Qty
+                  %th.tracking Tracking
+              %tbody
+                %tr
+                  %td.table__quantity
+                    %p 1
+                  %td.tracking
+                    %p UPS #123456789 #{link_to 'Track Shipment', '#', target: '_blank', rel: 'noopener', class: 'button button--small'}
+                %tr
+                  %td.table__quantity
+                    %p 3
+                  %td.tracking
+                    %p 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__item-cell
+            .product-list__summary
+              %p.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
+                %p.product-list__quantity Qty: 3
+
+  %p Checkout shipping:
+  .style-guide__example-block
+    .product-list
+      - 2.times do
+        .product-list__item
+          .product-list__item-cell
+            .product-list__summary
+              %p.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
+
+  = 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__item-cell
+          .product-list__summary
+            %p.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
+              %p.product-list__customization Custom 1: Value of Custom 1
+          .grid.grid--auto
+            = form_tag nil, class: 'grid__cell' do
+              %p= button_tag 'Remove', class: 'text-button'
+        .product-list__item-cell
+          %table.table
+            %thead
+              %tr
+                %th.table__prices Price
+                %th.table__quantity Qty
+                %th.table__prices Total
+            %tbody
+              %tr
+                %td.table__prices
+                  %p.table__price
+                    %span.table__price-label Now:
+                    %strong.table__price-discount= number_to_currency(90.00)
+                  %p.table__price
+                    %span.table__price-label Was:
+                    %s= number_to_currency(100.00)
+                  %p.table__price
+                    %span.table__price-label Customizations:
+                    %span= number_to_currency(10.00)
+                %td.table__quantity
+                  = form_tag nil, class: 'inline-form' do
+                    .inline-form__cell
+                      .value= number_field_tag 'wl_table_cart_item_quantity_2', 1, min: 1, required: true, class: 'text-box text-box--x-small', data: { form_submitting_control: '' }, title: 'Quantity'
+                    %p.inline-form__cell.hidden-if-js-enabled= button_tag 'Update', value: 'change_quantity', class: 'button'
+                %td.table__prices
+                  %p.table__price
+                    %span.table__price-label Subtotal:
+                    %span= number_to_currency(100.00)
+                  %p.table__price
+                    %span.table__price-label Item Level Discount:
+                    %strong.table__price-discount= number_to_currency(-5.00)
+                  %p.table__price
+                    %span.table__price-label An Item Level Discount With a Longer Name Than the Last:
+                    %strong.table__price-discount= number_to_currency(-5.00)
+                  %p.table__price
+                    %span.table__price-label Total:
+                    %span= number_to_currency(100.00)
+      .product-list__item
+        .product-list__item-cell
+          .product-list__summary
+            %p.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__item-cell
+          %table.table
+            %thead
+              %tr
+                %th.table__prices Price
+                %th.table__quantity Qty
+                %th.table__prices Total
+            %tbody
+              %tr
+                %td.table__prices
+                  %p.table__price
+                    %span Free Gift!
+                %td.table__quantity
+                  %p 1
+                %td.table__prices
+                  %p.table__price
+                    %span Free Gift!

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

@@ -0,0 +1,32 @@
+#product-list-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'product_list_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-list-content-block
+      .grid
+        - (1..6).each do |i|
+          .grid__cell.grid__cell--50.grid__cell--33-at-medium.grid__cell--16-at-wide
+            .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-list-content-block
+      %h2.product-list-content-block__heading Product List Content Block
+      .grid
+        - (1..6).each do |i|
+          .grid__cell.grid__cell--50.grid__cell--33-at-medium.grid__cell--16-at-wide
+            .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_prices.html.haml

@@ -0,0 +1,79 @@
+#product-prices.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'product_prices')
+
+  %p Displays a list of one or more product prices or price ranges, potentially with price labels.
+
+  .style-guide__example-block
+    .product-prices
+      %p.product-prices__price
+        %span= number_to_currency(109.99)
+
+  %p With price range:
+  .style-guide__example-block
+    .product-prices
+      %p.product-prices__price
+        %span= number_to_currency(109.99)
+        %span – #{number_to_currency(129.99)}
+
+  %p With MSRP:
+  .style-guide__example-block
+    .product-prices
+      %p.product-prices__price
+        %span= number_to_currency(109.99)
+      %p.product-prices__price
+        %s= number_to_currency(129.99)
+
+  %p With MSRP range:
+  .style-guide__example-block
+    .product-prices
+      %p.product-prices__price
+        %span= number_to_currency(109.99)
+        %span – #{number_to_currency(129.99)}
+      %p.product-prices__price
+        %s #{number_to_currency(129.99)} – #{number_to_currency(149.99)}
+
+  %p With sale price:
+  .style-guide__example-block
+    .product-prices
+      %p.product-prices__price
+        %strong= number_to_currency(109.99)
+      %p.product-prices__price
+        %s= number_to_currency(129.99)
+
+  %p With sale range:
+  .style-guide__example-block
+    .product-prices
+      %p.product-prices__price
+        %strong= number_to_currency(109.99)
+        %strong – #{number_to_currency(129.99)}
+      %p.product-prices__price
+        %s #{number_to_currency(129.99)} – #{number_to_currency(149.99)}
+
+#product-prices--details.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'product_prices__details')
+
+  %p Styling for when #{link_to_style_guide('components', 'product_prices', true)} is displayed on the Product Detail template.
+
+  .style-guide__example-block
+    .product-prices.product-prices--details
+      %p.product-prices__price
+        %strong= number_to_currency(109.99)
+        %strong – #{number_to_currency(129.99)}
+      %p.product-prices__price
+        %s #{number_to_currency(129.99)} – #{number_to_currency(149.99)}
+
+#product-prices--summary.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'product_prices__summary')
+
+  %p Styling for when #{link_to_style_guide('components', 'product_prices', true)} is displayed within the #{link_to_style_guide('components', 'product_summary', true)} component.
+
+  .style-guide__example-block
+    .product-prices.product-prices--summary
+      %p.product-prices__price
+        %strong= number_to_currency(109.99)
+        %strong – #{number_to_currency(129.99)}
+      %p.product-prices__price
+        %s #{number_to_currency(129.99)} – #{number_to_currency(149.99)}

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

@@ -0,0 +1,35 @@
+#product-summary.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'product_summary')
+
+  %p Displays a compact product summary for use within #{link_to_style_guide('components', 'product_grid', true)} on product browse and search results pages.
+
+  .style-guide__example-block
+    .product-summary
+      %p.product-summary__media
+        = link_to('#', class: 'product-summary__media-link') do
+          = image_tag('workarea/storefront/style_guide_product.jpg', alt: 'Product Name', class: 'product-summary__media-image')
+      .product-summary__info
+        %p.product-summary__name= link_to('Product Name', '#')
+        .product-prices.product-prices--summary
+          %p.product-prices__price
+            %span= number_to_currency(109.99)
+
+  = append_partials('storefront.style_guide_product_summary')
+
+#product-summary--small.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'product_summary__small')
+
+  %p Displays a compact #{link_to_style_guide('components', 'product_summary', true)} for independent use. Reduces the overall size of the component, by shrinking and/or reducing its contents. Frequently used within #{link_to_style_guide('components', 'product_grid__small_summaries', true)} components.
+
+  .style-guide__example-block
+    .product-summary.product-summary--small
+      %p.product-summary__media
+        = link_to('#', class: 'product-summary__media-link') do
+          = image_tag('workarea/storefront/style_guide_product.jpg', alt: 'Product Name', class: 'product-summary__media-image')
+      .product-summary__info
+        %p.product-summary__name= link_to('Product Name', '#')
+        .product-prices.product-prices--summary
+          %p.product-prices__price
+            %span= number_to_currency(109.99)