workarea-storefront 3.4.12

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

@@ -0,0 +1,93 @@
+#property.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'property')
+
+  %p Handles the layout of a form control. Provides styling a #{link_to_style_guide('components', 'value', true)} component, which wraps the form control, and a name, which is typically a <code>label</code> element.
+
+  .style-guide__example-block
+    .property
+      = label_tag 'wl_property_text_field_1', nil, class: 'property__name' do
+        %span.property__text Label One
+      .value
+        = text_field_tag 'wl_property_text_field_1', nil, class: 'text-box'
+    .property
+      = label_tag 'wl_property_text_field_2', nil, class: 'property__name' do
+        %span.property__text Label Two
+        %span.property__requirement (required)
+      .value
+        = text_field_tag 'wl_property_text_field_2', nil, class: 'value__error text-box'
+        %label.value__error Error message text
+    .property
+      = label_tag 'wl_property_select_field_1', nil, class: 'property__name' do
+        %span.property__text Label Three
+        %span.property__requirement.property__requirement--optional (optional)
+      .value
+        = select_tag 'wl_property_select_field_1', options_for_select(%w(One Two Three))
+    .property
+      = label_tag 'wl_property_select_field_2', nil, class: 'property__name' do
+        %span.property__text Label Four
+        %span.property__requirement (required)
+      .value
+        = select_tag 'wl_property_select_field_2', options_for_select(%w(One Two Three)), class: 'value__error'
+        %label.value__error Error message text
+    .property
+      = label_tag 'wl_property_textarea_1', nil, class: 'property__name' do
+        %span.property__text Label Five
+        %span.property__requirement (required)
+      .value
+        = text_area_tag 'wl_property_textarea_1', nil, class: 'text-box text-box--multi-line text-box--wide'
+    .property
+      = label_tag 'wl_property_textarea_2', nil, class: 'property__name' do
+        %span.property__text Label Six
+        %span.property__requirement (required)
+      .value
+        = text_area_tag 'wl_property_textarea_2', nil, class: 'value__error text-box text-box--multi-line text-box--wide'
+        %label.value__error Error message text
+
+#property--responsive.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'property__responsive')
+
+  %p Allows #{link_to_style_guide('components', 'property', true)} to be displayed as a row at the medium breakpoint.
+
+  .style-guide__example-block
+    .property.property--responsive
+      = label_tag 'wl_property_responsive_text_field_1', nil, class: 'property__name' do
+        %span.property__text Label One
+      .value
+        = text_field_tag 'wl_property_responsive_text_field_1', nil, class: 'text-box'
+    .property.property--responsive
+      = label_tag 'wl_property_responsive_text_field_2', nil, class: 'property__name' do
+        %span.property__text Label Two
+        %span.property__requirement (required)
+      .value
+        = text_field_tag 'wl_property_responsive_text_field_2', nil, class: 'value__error text-box'
+        %label.value__error Error message text
+    .property.property--responsive
+      = label_tag 'wl_property_responsive_select_field_1', nil, class: 'property__name' do
+        %span.property__text Label Three
+        %span.property__requirement.property__requirement--optional (optional)
+      .value
+        = select_tag 'wl_property_responsive_select_field_1', options_for_select(%w(One Two Three))
+    .property.property--responsive
+      = label_tag 'wl_property_responsive_select_field_2', nil, class: 'property__name' do
+        %span.property__text Label Four
+        %span.property__requirement (required)
+      .value
+        = select_tag 'wl_property_responsive_select_field_2', options_for_select(%w(One Two Three)), class: 'value__error'
+        %label.value__error Error message text
+    .property.property--responsive
+      = label_tag 'wl_property_responsive_textarea_1', nil, class: 'property__name' do
+        %span.property__text Label Five
+        %span.property__requirement (required)
+      .value
+        = text_area_tag 'wl_property_responsive_textarea_1', nil, class: 'text-box text-box--multi-line text-box--wide'
+    .property.property--responsive
+      = label_tag 'wl_property_responsive_textarea_2', nil, class: 'property__name' do
+        %span.property__text Label Six
+        %span.property__requirement (required)
+      .value
+        = text_area_tag 'wl_property_responsive_textarea_2', nil, class: 'value__error text-box text-box--multi-line text-box--wide'
+        %label.value__error Error message text
+
+= append_partials('storefront.style_guide_components.property')

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

@@ -0,0 +1,18 @@
+#quote-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'quote_content_block')
+
+  %p Styles a block of text like a quote.
+
+  %p should add a quote icon to the left of the text:
+  .style-guide__example-block
+    %blockquote.quote-content-block
+      .quote-content-block__text
+        %p= Workarea.config.placeholder_text
+
+  %p should support author subtext:
+  .style-guide__example-block
+    %blockquote.quote-content-block
+      .quote-content-block__text
+        %p= Workarea.config.placeholder_text
+      %span.quote-content-block__author Bob Clams

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

@@ -0,0 +1,34 @@
+#recommendations.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'recommendations')
+
+  %p A component used to display recommended products in embedded <code>.product-summary</code> components.
+
+  %p should provide a responsive layout for multiple <code>.product-summary</code> components:
+  .style-guide__example-block
+    .recommendations
+      .recommendations__products
+        .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
+    .recommendations
+      %h2.recommendations__heading Recommended For You
+      .recommendations__products
+        .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/_social_networks_content_block.html.haml

@@ -0,0 +1,20 @@
+#social-networks-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'social_networks_content_block')
+
+  %p A content block that wraps various social network icons
+
+  .style-guide__example-block
+    %ul.social-networks-content-block
+      %li.social-networks-content-block__item
+        = link_to '#', class: 'social-networks-content-block__button' do
+          = inline_svg('workarea/storefront/icons/facebook.svg', class: 'svg-icon svg-icon--extra-large svg-icon--blue')
+      %li.social-networks-content-block__item
+        = link_to '#', class: 'social-networks-content-block__button' do
+          = inline_svg('workarea/storefront/icons/twitter.svg', class: 'svg-icon svg-icon--extra-large svg-icon--blue')
+      %li.social-networks-content-block__item
+        = link_to '#', class: 'social-networks-content-block__button' do
+          = inline_svg('workarea/storefront/icons/google_plus.svg', class: 'svg-icon svg-icon--extra-large svg-icon--blue')
+      %li.social-networks-content-block__item
+        = link_to '#', class: 'social-networks-content-block__button' do
+          = inline_svg('workarea/storefront/icons/pinterest.svg', class: 'svg-icon svg-icon--extra-large svg-icon--blue')

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

@@ -0,0 +1,51 @@
+#svg-icon.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'svg_icon')
+
+  %p should resize the icon to a default, medium size:
+  .grid.grid--auto.grid--huge
+    - style_guide_icons.each do |path|
+      .grid__cell
+        .align-center
+          = inline_svg path, title: File.basename(path), class: 'svg-icon'
+          %p= File.basename(path, '.svg')
+
+
+#svg-icon--small.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'svg_icon__small')
+
+  %p should resize the icon to a smaller size:
+  .grid.grid--auto.grid--huge
+    - style_guide_icons.each do |path|
+      .grid__cell
+        .align-center
+          = inline_svg path, title: File.basename(path), class: 'svg-icon svg-icon--small'
+          %p= File.basename(path, '.svg')
+
+
+#svg-icon--large.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'svg_icon__large')
+
+  %p should resize the icon to a larger size:
+  .grid.grid--auto.grid--huge
+    - style_guide_icons.each do |path|
+      .grid__cell
+        .align-center
+          = inline_svg path, title: File.basename(path), class: 'svg-icon svg-icon--large'
+          %p= File.basename(path, '.svg')
+
+
+- %w(blue yellow red green white gray black black-alpha-50 black-alpha-15).each do |color|
+  .style-guide__subsection{ id: "svg-icon--#{color}" }
+
+    %h3= link_to_style_guide('components', "svg_icon__#{color}")
+
+    %p should change the fill color of the icon to <strong>#{color}</strong>:
+    .grid.grid--auto.grid--huge{ style: ('background: #303541; color: white; padding-top: 16px;' if color == 'white') }
+      - style_guide_icons.each do |path|
+        .grid__cell
+          .align-center
+            = inline_svg path, title: File.basename(path), class: "svg-icon svg-icon--#{color}"
+            %p= File.basename(path, '.svg')

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

@@ -0,0 +1,112 @@
+#table.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'table')
+
+  %p Styles a <code>table</code> table element.
+
+  %p <code>p</code> and #{link_to_style_guide('components', 'inline_form', true)} components are styled differently than in the global context.
+
+  %p Apply a class value of <code>table__prices</code> or <code>table__quantity</code> to control alignment within the cell. Header cells may be column headers or row headers.
+
+  %p Used within #{link_to_style_guide('components', 'product_list', true)}. Refer to that component for additional examples.
+
+  %p Account dashboard:
+  .style-guide__example-block
+    %table.table
+      %tbody
+        %tr
+          %th
+            %span Email
+          %td bclams@workarea.com
+        %tr
+          %th
+            %span Name
+          %td Bobby Clams
+        %tr
+          %th
+            %span Password
+          %td ********
+
+#table--totals.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'table__totals')
+
+  %p Displays a formatted #{link_to_style_guide('components', 'table', true)} responsible for showcasing total order price calculations.
+
+  %p Cart:
+  .style-guide__example-block
+    %table.table.table--totals
+      %tbody
+        %tr
+          %th
+            %span Subtotal
+          %td= number_to_currency(100.00)
+        %tr
+          %th
+            %span Order Level Discount
+          %td
+            %strong.table__price-discount= number_to_currency(-10.00)
+        %tr
+          %th
+            %span An Order Level Discount With a Longer Name Than the Last
+          %td
+            %strong.table__price-discount= number_to_currency(-10.00)
+        %tr
+          %th
+            %span Shipping
+          %td
+            = form_tag do
+              .inline-form
+                .inline-form__cell
+                  .value= text_field_tag 'wl_table_cart_totals_zip', nil, class: 'text-box text-box--small', minlength: 5, maxlength: 5, required: true, placeholder: 'ZIP Code', title: 'ZIP Code'
+                %p.inline-form__cell= button_tag 'Estimate', value: 'estimate_shipping', class: 'button'
+              %p= select_tag 'wl_table_cart_totals_shipping_service', options_for_select(['USPS First Class', 'UPS Ground', 'UPS 2 Day Air']), title: 'Shipping Services', data: { form_submitting_control: '' }
+        %tr
+          %th
+            %span Tax
+          %td Calculated at Checkout
+        %tr.table__total
+          %th
+            %span Total
+          %td= number_to_currency(80.00)
+
+  %p Order / checkout aside:
+  .style-guide__example-block
+    %table.table.table--totals
+      %tbody
+        %tr
+          %th
+            %span Subtotal
+          %td= number_to_currency(100.00)
+        %tr
+          %th
+            %span Order Level Discount
+          %td
+            %strong.table__price-discount= number_to_currency(-10.00)
+        %tr
+          %th
+            %span An Order Level Discount With a Longer Name Than the Last
+          %td
+            %strong.table__price-discount= number_to_currency(-10.00)
+        %tr
+          %th
+            %span Store Credit
+          %td
+            %strong.table__price-discount −#{number_to_currency(10.00)}
+        %tr
+          %th
+            %span Gift Card
+          %td
+            %strong.table__price-discount −#{number_to_currency(10.00)}
+        %tr
+          %th
+            %span Shipping
+          %td TBD
+        %tr
+          %th
+            %span Tax
+          %td TBD
+        %tr.table__total
+          %th
+            %span Total
+          %td= number_to_currency(60.00)

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

@@ -0,0 +1,205 @@
+#taxonomy-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'taxonomy_content_block')
+
+  %p A content block containing taxonomy menus.
+
+  %p should display an <strong>image to the left</strong>:
+  .style-guide__example-block
+    .taxonomy-content-block
+
+      .taxonomy-content-block__container
+        = image_tag 'workarea/core/placeholder.png', size: '150x150', class: 'taxonomy-content-block__image'
+
+      .taxonomy-content-block__container
+        %ul.taxonomy-content-block__menu
+          - (1..5).each do |i|
+            %li.taxonomy-content-block__menu-item
+              - if i.even?
+                Taxon #{i}
+              - else
+                = link_to "Taxon #{i}", '#', class: 'taxonomy-content-block__menu-link'
+
+  %p should display an <strong>image to the right</strong>:
+  .style-guide__example-block
+    .taxonomy-content-block
+
+      .taxonomy-content-block__container
+        %ul.taxonomy-content-block__menu
+          - (1..5).each do |i|
+            %li.taxonomy-content-block__menu-item
+              - if i.even?
+                Taxon #{i}
+              - else
+                = link_to "Taxon #{i}", '#', class: 'taxonomy-content-block__menu-link'
+
+      .taxonomy-content-block__container
+        = image_tag 'workarea/core/placeholder.png', size: '150x150', class: 'taxonomy-content-block__image'
+
+  %p should support <strong>no image</strong>:
+  .style-guide__example-block
+    .taxonomy-content-block
+
+      .taxonomy-content-block__container.taxonomy-content-block__container--without-image
+        %ul.taxonomy-content-block__menu
+          - (1..5).each do |i|
+            %li.taxonomy-content-block__menu-item
+              - if i.even?
+                Taxon #{i}
+              - else
+                = link_to "Taxon #{i}", '#', class: 'taxonomy-content-block__menu-link'
+
+  %p may display a link to the starting taxon:
+  .style-guide__example-block
+    .taxonomy-content-block
+
+      .taxonomy-content-block__container.taxonomy-content-block__container--without-image
+        %li.taxonomy-content-block__menu-item.taxonomy-content-block__menu-item--start
+          = link_to "Starting Taxon", '#', class: 'taxonomy-content-block__menu-link'
+        %ul.taxonomy-content-block__menu
+          - (1..5).each do |i|
+            %li.taxonomy-content-block__menu-item
+              - if i.even?
+                Taxon #{i}
+              - else
+                = link_to "Taxon #{i}", '#', class: 'taxonomy-content-block__menu-link'
+
+#taxonomy-content-block--two-column.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'taxonomy_content_block__two_column')
+
+  %p A content block containing taxonomy menus in a two column layout.
+
+  %p should display an <strong>image to the left</strong>:
+  .style-guide__example-block
+    .taxonomy-content-block.taxonomy-content-block--two-column
+
+      .taxonomy-content-block__container
+        = image_tag 'workarea/core/placeholder.png', size: '150x150', class: 'taxonomy-content-block__image'
+
+      - 2.times do
+        .taxonomy-content-block__container
+          %ul.taxonomy-content-block__menu
+            - (1..5).each do |i|
+              %li.taxonomy-content-block__menu-item
+                - if i.even?
+                  Taxon #{i}
+                - else
+                  = link_to "Taxon #{i}", '#', class: 'taxonomy-content-block__menu-link'
+
+  %p should display an <strong>image to the right</strong>:
+  .style-guide__example-block
+    .taxonomy-content-block.taxonomy-content-block--two-column
+
+      - 2.times do
+        .taxonomy-content-block__container
+          %ul.taxonomy-content-block__menu
+            - (1..5).each do |i|
+              %li.taxonomy-content-block__menu-item
+                - if i.even?
+                  Taxon #{i}
+                - else
+                  = link_to "Taxon #{i}", '#', class: 'taxonomy-content-block__menu-link'
+
+      .taxonomy-content-block__container
+        = image_tag 'workarea/core/placeholder.png', size: '150x150', class: 'taxonomy-content-block__image'
+
+  %p should support <strong>no image</strong>:
+  .style-guide__example-block
+    .taxonomy-content-block.taxonomy-content-block--two-column
+
+      - 2.times do
+        .taxonomy-content-block__container.taxonomy-content-block__container--without-image
+          %ul.taxonomy-content-block__menu
+            - (1..5).each do |i|
+              %li.taxonomy-content-block__menu-item
+                - if i.even?
+                  Taxon #{i}
+                - else
+                  = link_to "Taxon #{i}", '#', class: 'taxonomy-content-block__menu-link'
+
+  %p may display a link to the starting taxon:
+  .style-guide__example-block
+    .taxonomy-content-block.taxonomy-content-block--two-column
+
+      - 2.times do
+        .taxonomy-content-block__container.taxonomy-content-block__container--without-image
+          %ul.taxonomy-content-block__menu
+            %li.taxonomy-content-block__menu-item.taxonomy-content-block__menu-item--start
+              = link_to "Starting Taxon", '#', class: 'taxonomy-content-block__menu-link'
+            - (1..5).each do |i|
+              %li.taxonomy-content-block__menu-item
+                - if i.even?
+                  Taxon #{i}
+                - else
+                  = link_to "Taxon #{i}", '#', class: 'taxonomy-content-block__menu-link'
+
+#taxonomy-content-block--three-column.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'taxonomy_content_block__three_column')
+
+  %p A content block containing taxonomy menus in a three column layout.
+
+  %p should display an <strong>image to the left</strong>:
+  .style-guide__example-block
+    .taxonomy-content-block.taxonomy-content-block--three-column
+
+      .taxonomy-content-block__container
+        = image_tag 'workarea/core/placeholder.png', size: '150x150', class: 'taxonomy-content-block__image'
+
+      - 3.times do
+        .taxonomy-content-block__container
+          %ul.taxonomy-content-block__menu
+            - (1..5).each do |i|
+              %li.taxonomy-content-block__menu-item
+                - if i.even?
+                  Taxon #{i}
+                - else
+                  = link_to "Taxon #{i}", '#', class: 'taxonomy-content-block__menu-link'
+
+  %p should display an <strong>image to the right</strong>:
+  .style-guide__example-block
+    .taxonomy-content-block.taxonomy-content-block--three-column
+
+      - 3.times do
+        .taxonomy-content-block__container
+          %ul.taxonomy-content-block__menu
+            - (1..5).each do |i|
+              %li.taxonomy-content-block__menu-item
+                - if i.even?
+                  Taxon #{i}
+                - else
+                  = link_to "Taxon #{i}", '#', class: 'taxonomy-content-block__menu-link'
+
+      .taxonomy-content-block__container
+        = image_tag 'workarea/core/placeholder.png', size: '150x150', class: 'taxonomy-content-block__image'
+
+  %p should support <strong>no image</strong>:
+  .style-guide__example-block
+    .taxonomy-content-block.taxonomy-content-block--three-column
+
+      - 3.times do
+        .taxonomy-content-block__container.taxonomy-content-block__container--without-image
+          %ul.taxonomy-content-block__menu
+            - (1..5).each do |i|
+              %li.taxonomy-content-block__menu-item
+                - if i.even?
+                  Taxon #{i}
+                - else
+                  = link_to "Taxon #{i}", '#', class: 'taxonomy-content-block__menu-link'
+
+  %p may display a link to the starting taxon:
+  .style-guide__example-block
+    .taxonomy-content-block.taxonomy-content-block--three-column
+
+      - 3.times do
+        .taxonomy-content-block__container.taxonomy-content-block__container--without-image
+          %ul.taxonomy-content-block__menu
+            %li.taxonomy-content-block__menu-item.taxonomy-content-block__menu-item--start
+              = link_to "Starting Taxon", '#', class: 'taxonomy-content-block__menu-link'
+            - (1..5).each do |i|
+              %li.taxonomy-content-block__menu-item
+                - if i.even?
+                  Taxon #{i}
+                - else
+                  = link_to "Taxon #{i}", '#', class: 'taxonomy-content-block__menu-link'