workarea-haven_theme 1.3.0

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

@@ -0,0 +1,34 @@
+#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
+    .content-wrapper
+      .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}
+
+    %p should support a heading:
+    .style-guide__example-block
+      .content-wrapper
+      .product-list-content-block
+        %h2.product-list-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_summary.html.haml

@@ -0,0 +1,47 @@
+#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
+    .grid
+      .grid__cell--50.grid__cell--33-at-medium.grid__cell--25-at-wide
+        .product-summary
+          %p.product-summary__media
+            = link_to('#', class: 'product-summary__media-link') do
+              %picture
+                %source{ srcset: '/../assets/workarea/storefront/style_guide_product.jpg, /../assets/workarea/storefront/style_guide_product_retina.jpg 2x', media: "(min-width: #{Workarea.config.storefront_break_points[:small_horizontal]}px)" }
+                %source{ srcset: '/../assets/workarea/storefront/style_guide_product.jpg, /../assets/workarea/storefront/style_guide_product_retina.jpg 2x'}
+                = image_tag('workarea/storefront/style_guide_product.jpg', alt: 'Product Name', class: 'product-summary__media-image')
+          .product-summary__divider
+            .product-summary__info
+              %p.product-summary__name= link_to('Product Name', '#', class: 'product-summary__name-link')
+              .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
+    .grid
+      .grid__cell--50.grid__cell--33-at-medium.grid__cell--25-at-wide
+        .product-summary.product-summary--small
+          %p.product-summary__media
+            = link_to('#', class: 'product-summary__media-link') do
+              %picture
+                %source{ srcset: '/../assets/workarea/storefront/style_guide_product.jpg, /../assets/workarea/storefront/style_guide_product_retina.jpg 2x', media: "(min-width: #{Workarea.config.storefront_break_points[:small_horizontal]}px)" }
+                %source{ srcset: '/../assets/workarea/storefront/style_guide_product.jpg, /../assets/workarea/storefront/style_guide_product_retina.jpg 2x'}
+                = image_tag('workarea/storefront/style_guide_product.jpg', alt: 'Product Name', class: 'product-summary__media-image')
+          .product-summary__divider
+            .product-summary__info
+              %p.product-summary__name= link_to('Product Name', '#', class: 'product-summary__name-link')
+              .product-prices.product-prices--summary
+                %p.product-prices__price
+                  %span= number_to_currency(109.99)

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/_recommendations.html.haml

@@ -0,0 +1,43 @@
+#recommendations.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'recommendations')
+
+  %p Displays a set of recommended products
+
+  .style-guide__example-block
+    .recommendations
+      .content-wrapper
+        %h2.recommendations__heading You may also like...
+
+        %ul.recommendations__list
+          .grid
+            - (1..4).each do |i|
+              .grid__cell.grid__cell--50.grid__cell--25-at-medium
+                .recommendations__item
+                  .product-summary.product-summary--small
+                    .product-summary__media
+                      .product-summary__image-wrapper
+                        = image_tag 'workarea/core/placeholder.png', size: '232x232', class: 'product-summary__image'
+                    .product-summary__divider
+                      .product-summary__info
+                        %p.product-summary__name= link_to "Product Title #{i}", nil, class: 'product-summary__name-link', itemprop: 'url'
+                        .product-prices.product-prices--summary{ itemprop: 'offers', itemscope: true, itemtype: 'http://schema.org/Offer' } $49.95
+
+  %p Can be displayed in a vertical layout by using recommendations--vertical modifier and removing grid and grid cell markup. This is designed to be used within an aside or other narrow layout area. Height is not restricted, this example sets the height inline as an example only.
+  .style-guide__example-block
+    .grid
+      .grid__cell.grid__cell--33
+        .recommendations.recommendations--vertical{ style: "height: 500px;" }
+          %h2.recommendations__heading You may also like...
+
+          %ul.recommendations__list
+            - (1..4).each do |i|
+              .recommendations__item
+                .product-summary.product-summary--small
+                  .product-summary__media
+                    .product-summary__image-wrapper
+                      = image_tag 'workarea/core/placeholder.png', size: '232x232', class: 'product-summary__image'
+                  .product-summary__divider
+                    .product-summary__info
+                      %p.product-summary__name= link_to "Product Title #{i}", nil, class: 'product-summary__name-link', itemprop: 'url'
+                      .product-prices.product-prices--summary{ itemprop: 'offers', itemscope: true, itemtype: 'http://schema.org/Offer' } $49.95

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: 'social-networks-content-block__icon')
+      %li.social-networks-content-block__item
+        = link_to '#', class: 'social-networks-content-block__button' do
+          = inline_svg('workarea/storefront/icons/twitter.svg', class: 'social-networks-content-block__icon')
+      %li.social-networks-content-block__item
+        = link_to '#', class: 'social-networks-content-block__button' do
+          = inline_svg('workarea/storefront/icons/google_plus.svg', class: 'social-networks-content-block__icon')
+      %li.social-networks-content-block__item
+        = link_to '#', class: 'social-networks-content-block__button' do
+          = inline_svg('workarea/storefront/icons/pinterest.svg', class: 'social-networks-content-block__icon')

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

@@ -0,0 +1,76 @@
+#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--tiny.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'svg_icon__tiny')
+
+  %p should resize the icon to a tiny 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--tiny'
+          %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')
+
+#svg-icon--extra-large.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'svg_icon__extra-large')
+
+  %p should resize the icon to a extra-large 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--extra-large'
+          %p= File.basename(path, '.svg')
+
+
+- %w(hover-primary-color theme-header primary-color link-color 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/_value.html.haml

@@ -0,0 +1,90 @@
+#value.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'value')
+
+  %p Manages the layout of a form field, note, or error displayed for the field.
+
+  .style-guide__example-block
+    .value
+      = text_field_tag 'wl_value_text_field', nil, class: 'value__error text-box'
+      %span.value__error Error Message Text
+      = link_to 'What\'s This?', '#', class: 'value__note'
+
+  %p Can contain an icon
+  .style-guide__example-block
+    .value
+      = text_field_tag 'wl_value_text_field_div_with_icon', nil, class: 'text-box'
+      = inline_svg('workarea/storefront/icons/email.svg', class: 'value__icon')
+
+  %p Can contain a button
+  .style-guide__example-block
+    .value
+      = text_field_tag 'wl_value_text_field_div_with_button', nil, class: 'text-box'
+      .value__button= button_tag 'Button', value: 'button_action', class: 'button button--small'
+
+  .style-guide__unit-test
+
+    %h4 Unit Test
+
+    %p should work with a <code>div</code> (block-level) element, containing only a form field
+    .style-guide__example-block
+      .value
+        = text_field_tag 'wl_value_text_field_div', nil, class: 'text-box'
+        = inline_svg('workarea/storefront/icons/email.svg', class: 'value__icon')
+
+    %p should work with a <code>span</code> (inline) element, containing only a form field
+    .style-guide__example-block
+      %span.value
+        = text_field_tag 'wl_value_text_field_span', nil, class: 'text-box'
+        = inline_svg('workarea/storefront/icons/email.svg', class: 'value__icon')
+
+    %p should work with a <code>p</code> (block-level) element, containing only a form field
+    .style-guide__example-block
+      %p.value
+        = text_field_tag 'wl_value_text_field_p', nil, class: 'text-box'
+        = inline_svg('workarea/storefront/icons/email.svg', class: 'value__icon')
+
+    %p should work with a <code>div</code> (block-level) element, containing a form field and a note
+    .style-guide__example-block
+      .value
+        = text_field_tag 'wl_value_text_field_div_note', nil, class: 'text-box'
+        %span.value__note This is a note
+        = inline_svg('workarea/storefront/icons/email.svg', class: 'value__icon')
+
+    %p should work with a <code>span</code> (inline) element, containing a form field and a note
+    .style-guide__example-block
+      %span.value
+        = text_field_tag 'wl_value_text_field_span_note', nil, class: 'text-box'
+        %span.value__note This is a note
+        = inline_svg('workarea/storefront/icons/email.svg', class: 'value__icon')
+
+    %p should work with a <code>p</code> (block-level) element, containing a form field and a note
+    .style-guide__example-block
+      %p.value
+        = text_field_tag 'wl_value_text_field_p_note', nil, class: 'text-box'
+        %span.value__note This is a note
+        = inline_svg('workarea/storefront/icons/email.svg', class: 'value__icon')
+
+    %p should work with a <code>div</code> (block-level) element, containing a form field, error message, and a note with a link:
+    .style-guide__example-block
+      .value
+        = text_field_tag 'wl_value_text_field_div_error', nil, class: 'value__error text-box'
+        %span.value__error Error Message Text
+        = link_to 'What\'s This?', '#', class: 'value__note'
+        = inline_svg('workarea/storefront/icons/email.svg', class: 'value__icon')
+
+    %p should work with a <code>span</code> (inline) element, containing a form field, error message, and a note with a link:
+    .style-guide__example-block
+      %span.value
+        = text_field_tag 'wl_value_text_field_span_error', nil, class: 'value__error text-box'
+        %span.value__error Error Message Text
+        = link_to 'What\'s This?', '#', class: 'value__note'
+        = inline_svg('workarea/storefront/icons/email.svg', class: 'value__icon')
+
+    %p should work with a <code>p</code> (block-level) element, containing a form field, error message, and a note with a link:
+    .style-guide__example-block
+      %p.value
+        = text_field_tag 'wl_value_text_field_p_error', nil, class: 'value__error text-box'
+        %span.value__error Error Message Text
+        = link_to 'What\'s This?', '#', class: 'value__note'
+        = inline_svg('workarea/storefront/icons/email.svg', class: 'value__icon')

data/app/views/workarea/storefront/style_guides/settings/_color_variables.html.haml

@@ -0,0 +1,90 @@
+#color-variables.style-guide__subsection
+
+  %h3= link_to_style_guide('settings', 'color_variables')
+
+  %h5 Base colors
+  .style-guide__example-block
+    .grid.grid--auto
+      - colors = %w(red green blue yellow black white black-alpha-15 black-alpha-50 white-alpha-50 transparent)
+      - colors.each do |color|
+        .grid__cell
+          .color-box
+            .color-box__swatch{ class: "style-guide__color-swatch--#{color}" }
+            .color-box__swatch-name $#{color}
+
+  %h5 Brand colors
+
+  = render "workarea/storefront/style_guides/settings/color_schemes/#{Workarea.config.theme[:color_scheme].downcase}_color_scheme"
+
+  %h4 Functional Color variables - these should be used in the storefront
+  %br
+
+  %h5 Generic functional colors
+  .style-guide__example-block
+    .grid.grid--auto
+      - colors = %w(primary-color primary-color-dark background-color background-color-component)
+      - colors.each do |color|
+        .grid__cell
+          .color-box
+            .color-box__swatch{ class: "color-box__swatch--#{color}" }
+            .color-box__swatch-name $#{color}
+
+  %h5 Site header colors
+  .style-guide__example-block
+    .grid.grid--auto
+      - colors = %w(header-icon-color header-icon-color-hover utility-nav-background-color)
+      - colors.each do |color|
+        .grid__cell
+          .color-box
+            .color-box__swatch{ class: "color-box__swatch--#{color}" }
+            .color-box__swatch-name $#{color}
+
+  %h5 Navigation colors
+  .style-guide__example-block
+    .grid.grid--auto
+      - colors = %w(primary-nav-background-color primary-nav-border-color primary-nav-links primary-nav-dropdown-links primary-nav-dropdown-links-hover mobile-nav-links)
+      - colors.each do |color|
+        .grid__cell
+          .color-box
+            .color-box__swatch{ class: "color-box__swatch--#{color}" }
+            .color-box__swatch-name $#{color}
+
+  %h5 Footer colors
+  .style-guide__example-block
+    .grid.grid--auto
+      - colors = %w(footer-color footer-background-color)
+      - colors.each do |color|
+        .grid__cell
+          .color-box
+            .color-box__swatch{ class: "color-box__swatch--#{color}" }
+            .color-box__swatch-name $#{color}
+
+  %h5 Typography colors
+  .style-guide__example-block
+    .grid.grid--auto
+      - colors = %w(font-color heading-color product-name-color)
+      - colors.each do |color|
+        .grid__cell
+          .color-box
+            .color-box__swatch{ class: "color-box__swatch--#{color}" }
+            .color-box__swatch-name $#{color}
+
+  %h5 Link & button colors
+  .style-guide__example-block
+    .grid.grid--auto
+      - colors = %w(link-color link-color-hover button-color button-background-color button-background-color-hover button-border-color button-secondary-color button-secondary-background-color  button-secondary-background-color-hover  button-secondary-border-color button-secondary-border-color-disabled  button-disabled-color button-disabled-background-color)
+      - colors.each do |color|
+        .grid__cell
+          .color-box
+            .color-box__swatch{ class: "color-box__swatch--#{color}" }
+            .color-box__swatch-name $#{color}
+
+  %h5 Input colors
+  .style-guide__example-block
+    .grid.grid--auto
+      - colors = %w(label-color input-color input-background-color input-border-color input-border-color-focus focus-ring-color invalid-color valid-color)
+      - colors.each do |color|
+        .grid__cell
+          .color-box
+            .color-box__swatch{ class: "color-box__swatch--#{color}" }
+            .color-box__swatch-name $#{color}