workarea-one_theme 1.3.0

data/app/views/workarea/storefront/shares/_share_buttons.html.haml

@@ -0,0 +1,17 @@
+- if share_url.present?
+  %ul.share-buttons
+    %li.share-buttons__item
+      %p.share-buttons__title= t('workarea.storefront.shares.share_heading')
+    %li.share-buttons__item
+      = link_to "https://www.facebook.com/sharer/sharer.php?#{facebook_query_string(share_url)}", class: 'share-buttons__button', title: t('workarea.storefront.shares.share_on_facebook'), target: '_blank', data: { popup_button: '', analytics: share_analytics_data('facebook', share_url).to_json } do
+        = inline_svg('workarea/storefront/icons/facebook.svg', class: 'svg-icon svg-icon--gray svg-icon--hover-primary-color')
+    %li.share-buttons__item
+      = link_to "https://twitter.com/intent/tweet?#{twitter_query_string(share_url, message)}", class: 'share-buttons__button', title: t('workarea.storefront.shares.share_on_twitter'), target: '_blank', data: { popup_button: '', analytics: share_analytics_data('twitter', share_url).to_json } do
+        = inline_svg('workarea/storefront/icons/twitter.svg', class: 'svg-icon svg-icon--gray svg-icon--hover-primary-color')
+    %li.share-buttons__item
+      = link_to "https://pinterest.com/pin/create/button/?#{share_query_string(share_url, message, local_assigns[:image])}", class: 'share-buttons__button', title: t('workarea.storefront.shares.share_on_pinterest'), target: '_blank', data: { popup_button: '', analytics: share_analytics_data('pinterest', share_url).to_json } do
+        = inline_svg('workarea/storefront/icons/pinterest.svg', class: 'svg-icon svg-icon--gray svg-icon--hover-primary-color')
+    - if message.present?
+      %li.share-buttons__item
+        = link_to new_share_path(url: share_url, title: message), class: 'share-buttons__button', rel: 'nofollow', title: t('workarea.storefront.shares.share_by_email'), data: { dialog_button: '', analytics: share_analytics_data('email', share_url).to_json } do
+          = inline_svg('workarea/storefront/share/icons/email.svg', class: 'svg-icon svg-icon--gray svg-icon--hover-primary-color')

data/app/views/workarea/storefront/style_guides/base/_forms.html.haml

@@ -0,0 +1,91 @@
+#forms-base.style-guide__subsection
+
+  %h3= link_to_style_guide('base', 'forms_base')
+
+  %p Global form & form control styling.
+
+  %p should apply a bottom margin to containment elements:
+  .style-guide__example-block
+    %fieldset Fieldset Element
+  .style-guide__example-block
+    %legend Legend Element
+
+  %p should display a larger font for elements:
+  .style-guide__example-block
+    %p Regular font-size
+    .select-menu
+      %select
+        %option Larger Font Size
+    %input{ value: 'Larger Font Size' }
+    %textarea Larger Font Size
+
+  %p should add <code>focus-ring</code> to rectangular form controls (click to focus):
+  .style-guide__example-block
+    %input{ type: 'text', value: 'Input' }
+  .style-guide__example-block
+    %textarea Textarea
+  .style-guide__example-block
+    .select-menu
+      %select
+        %option Select Option
+
+  %p should not allow selects to exceed the width of their container:
+  .style-guide__example-block{ style: 'width: 100px;' }
+    .select-menu
+      %select
+        %option Supercalifragilisticexpialidocious
+
+  %p should align a label to the top of a textarea:
+  .style-guide__example-block
+    %label Label
+    %textarea Textarea
+
+  %p should support a disabled state:
+  .style-guide__example-block
+    %button{ disabled: true } Disabled Button
+  .style-guide__example-block
+    %input{ disabled: true, value: 'Disabled Input' }
+  .style-guide__example-block
+    %textarea{ disabled: true } Disabled Textarea
+  .style-guide__example-block
+    .select-menu
+      %select{ disabled: true }
+        %option Disabled Select
+        %option Disabled Select
+        %option Disabled Select
+  .style-guide__example-block
+    .select-menu
+      %select
+        %optgroup
+          %option Select Optgroup Option
+        %optgroup{ disabled: true }
+          %option Disabled Select Optgroup Option
+  .style-guide__example-block
+    .select-menu
+      %select
+        %option Select Option
+        %option{ disabled: true } Disabled Select Option
+        %option Select Option
+  .style-guide__example-block
+    %fieldset{ disabled: true }
+      %button Disabled Button
+      %input{ value: 'Disabled Input' }
+      %textarea Disabled Textarea
+      .select-menu
+        %select
+          %option Disabled Option
+
+  %p should set the color of placeholder text:
+  .style-guide__example-block
+    %input{ placeholder: 'Placeholder Text' }
+  .style-guide__example-block
+    %textarea{ placeholder: 'Placeholder Text' }
+  .style-guide__example-block
+    %textarea{ placeholder: 'Placeholder Text' }
+
+  %p should style checkboxes
+  .style-guide__example-block
+    .button-property
+      .value= check_box_tag :email_signup, true, params[:email_signup]
+      = label_tag :email_signup, nil, class: 'button-property__name' do
+        %span.button-property__text Example checkbox label

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

@@ -0,0 +1,13 @@
+#breadcrumbs.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'breadcrumbs')
+
+  %p Styles a set of breadcrumbs.
+  %p Note: breadcrumbs are hidden by default in Workarea OneTheme
+
+  .style-guide__example-block
+    .breadcrumbs
+      %p.breadcrumbs__node-group
+        %span.breadcrumbs__node= link_to 'Foo', '#'
+        %span.breadcrumbs__node= link_to 'Bar', '#'
+        %span.breadcrumbs__node= link_to 'Baz', '#'

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

@@ -0,0 +1,69 @@
+#button.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'button')
+
+  %p Displays an element as interactive button.
+
+  %p should work with <code>button[type=button]</code> elements:
+  .style-guide__example-block
+    = button_tag 'Button', class: 'button', type: 'button'
+
+  %p should work with <code>button[type=submit]</code> elements:
+  .style-guide__example-block
+    = button_tag 'Button', class: 'button', type: 'submit'
+
+  %p should work with <code>input[type=submit]</code> elements:
+  .style-guide__example-block
+    = submit_tag 'Button', class: 'button'
+
+  %p should work with <code>a</code> elements:
+  .style-guide__example-block
+    = link_to 'Button', '#', class: 'button'
+
+  %p should style non-interactive buttons wrapped in an <code>a</code> element:
+  .style-guide__example-block
+    = link_to '#' do
+      %span.button Span Button
+
+#button--small.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'button__small')
+
+  %p should reduce the size of the button:
+  .style-guide__example-block
+    = button_tag 'Button Element', class: 'button button--small'
+
+#button--large.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'button__large')
+
+  %p should increase the size of the button:
+  .style-guide__example-block
+    = button_tag 'Button Element', class: 'button button--large'
+
+#button--full-width.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'button__full_width')
+
+  %p should make the button full width
+  .style-guide__example-block
+    = button_tag 'Button Element', class: 'button button--full-width'
+
+
+#button--full-height.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'button__full_height')
+
+  %p should make the button full height of it's container
+  .style-guide__example-block
+    %div{ style: "height: 100px;"}
+      = button_tag 'Button Element', class: 'button button--full-height'
+
+
+#button--transparent.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'button__transparent')
+
+  %p should make the button background transparent
+  .style-guide__example-block
+    = button_tag 'Button Element', class: 'button button--transparent'

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

@@ -0,0 +1,54 @@
+#category-summary-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'category_summary_content_block')
+
+  %p Displays a heading followed by a #{link_to_style_guide('components', 'product_grid', true)}, unless the products are empty. Produced by the content editor in the admin.
+
+  %p Category with products and no custom content
+  .style-guide__example-block
+    .category-summary-content-block
+      = link_to '#', class: 'category-summary-content-block__content' do
+        %span.category-summary-content-block__content-container
+          %span.category-summary-content-block__heading Category Name
+          %span.category-summary-content-block__call-to-action View all
+      .category-summary-content-block__products  
+        .grid.grid--flush
+          - 4.times do
+            .grid__cell.grid__cell--50.grid__cell--33-at-medium.grid__cell--16-at-wide
+              .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)
+
+  %p Category with customized heading, CTA, and background image.
+  .style-guide__example-block
+    .category-summary-content-block
+      = link_to '#', class: 'category-summary-content-block__content', style: "background-image: url('/assets//workarea/storefront/style_guide_light_banner.png'); background-size: cover; background-position: center;" do
+        %span.category-summary-content-block__content-container
+          %span.category-summary-content-block__heading Custom heading
+          %span.category-summary-content-block__call-to-action Custom call to action!
+      .category-summary-content-block__products  
+        .grid.grid--flush
+          - 4.times do
+            .grid__cell.grid__cell--50.grid__cell--33-at-medium.grid__cell--16-at-wide
+              .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)
+
+  %p Empty category:
+  .style-guide__example-block
+    .category-summary-content-block
+      %h2 Category Name
+      %p Category Name is empty.
+

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

@@ -0,0 +1,18 @@
+#header.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'header')
+
+  %p A stylistic wrapper for page headers, providing modifiers to implement responsive layout.
+
+  .style-guide__example-block
+    .header
+      %h1.header__title Header Title
+      %h4.header__sub-title Header Sub-title
+
+  %p Header can be centered for small devices
+
+  .style-guide__example-block
+    .header.header--center-at-small
+      %h1.header__title Header Title
+      %h4.header__sub-title Header Sub-title
+

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

@@ -0,0 +1,46 @@
+#hero-slider-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'hero_slider_content_block')
+
+  %p Displays a series of up to 5 slides in a carousel with image, heading, and subheading.
+
+  %p Hero slider
+  .style-guide__example-block
+    .hero-slider-content-block{ data: { slick_slider: '{"options":{"slidesToShow":1,"slidesToScroll":1,"autoplay":false,"dots":true,"arrows":true,"centerMode":false,"pauseOnHover":true,"pauseOnDotsHover":true,"pauseOnFocus":true,"mobileFirst":true,"responsive":[{"breakpoint":959,"settings":{"autoplay":false,"autoplaySpeed":0.0}}]},"stopOnInteraction":true}'  } }
+      .hero-slider-content-block__slide
+        = image_tag 'workarea/storefront/style_guide_light_banner.png', class: 'hero-slider-content-block__slide-image', alt: 'Descriptive alt text'
+        .hero-slider-content-block__slide-content
+          .hero-slider-content-block__slide-heading Heading slide 1
+          .hero-slider-content-block__slide-sub-heading Sub-heading slide 1
+      .hero-slider-content-block__slide
+        = image_tag 'workarea/storefront/style_guide_light_banner.png', class: 'hero-slider-content-block__slide-image', alt: 'Descriptive alt text'
+        .hero-slider-content-block__slide-content
+          .hero-slider-content-block__slide-heading Heading slide 2
+          .hero-slider-content-block__slide-sub-heading Sub-heading slide 2
+      .hero-slider-content-block__slide
+        = image_tag 'workarea/storefront/style_guide_light_banner.png', class: 'hero-slider-content-block__slide-image', alt: 'Descriptive alt text'
+        .hero-slider-content-block__slide-content
+          .hero-slider-content-block__slide-heading Heading slide 3
+          .hero-slider-content-block__slide-sub-heading Sub-heading slide 3
+
+  %p Hero slider - full bleed mode
+  .style-guide__example-block
+    .hero-slider-content-block.hero-slider-content-block--full-bleed{ data: { slick_slider: '{"options":{"slidesToShow":1,"slidesToScroll":1,"autoplay":false,"dots":true,"arrows":true,"centerMode":false,"pauseOnHover":true,"pauseOnDotsHover":true,"pauseOnFocus":true,"mobileFirst":true,"responsive":[{"breakpoint":959,"settings":{"autoplay":false,"autoplaySpeed":0.0}}]},"stopOnInteraction":true}'  } }
+      .hero-slider-content-block__slide
+        = image_tag 'workarea/storefront/style_guide_light_banner.png', class: 'hero-slider-content-block__slide-image', alt: 'Descriptive alt text'
+        .content-wrapper
+          .hero-slider-content-block__slide-content
+            .hero-slider-content-block__slide-heading Heading slide 1
+            .hero-slider-content-block__slide-sub-heading Sub-heading slide 1
+      .hero-slider-content-block__slide
+        = image_tag 'workarea/storefront/style_guide_light_banner.png', class: 'hero-slider-content-block__slide-image', alt: 'Descriptive alt text'
+        .content-wrapper
+          .hero-slider-content-block__slide-content
+            .hero-slider-content-block__slide-heading Heading slide 2
+            .hero-slider-content-block__slide-sub-heading Sub-heading slide 2
+      .hero-slider-content-block__slide
+        = image_tag 'workarea/storefront/style_guide_light_banner.png', class: 'hero-slider-content-block__slide-image', alt: 'Descriptive alt text'
+        .content-wrapper
+          .hero-slider-content-block__slide-content
+            .hero-slider-content-block__slide-heading Heading slide 3
+            .hero-slider-content-block__slide-sub-heading Sub-heading slide 3

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

@@ -0,0 +1,17 @@
+#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
+      = check_box_tag 'toggle_mobile_filters', nil, true, class: 'mobile-filters__control'
+      .mobile-filters__trigger
+        %button.button{ data: { mobile_filters: ''} } Filter Results
+      .mobile-filters__content
+        %ol
+          %li Filter 1
+          %li Filter 2
+          %li Filter 3

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

@@ -0,0 +1,46 @@
+#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.grid--flush
+        - (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-list-content-block
+      %h2.product-list-content-block__heading Product List Content Block
+      .grid.grid--flush
+        - (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 initialize as a carousel if more than 4 products are present:
+  .style-guide__example-block
+    .product-list-content-block
+      %h2.product-list-content-block__heading Product List Content Block with 6 products
+      .grid.grid--flush{ data: { slick_slider: '{"options":{"slidesToShow":1,"slidesToScroll":1,"autoplay":false,"dots":false,"arrows":true,"centerMode":false,"pauseOnHover":true,"pauseOnDotsHover":true,"pauseOnFocus":true,"mobileFirst":true,"responsive":[{"breakpoint":759,"settings":{"slidesToShow":2}},{"breakpoint":959,"settings":{"slidesToShow":4,"autoplay":false,"autoplaySpeed":0.0}}]},"stopOnInteraction":true}' } }
+        - (1..6).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--flush
+      .grid__cell.grid__cell--25-at-medium
+        .product-summary
+          .product-summary__media
+            .product-summary__media-container
+              = 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)
+
+          .product-summary__overlay
+            .quickview-button
+              %button.button View
+
+    = 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
+      .product-summary__media
+        .product-summary__media-container
+          = 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)
+
+      .product-summary__overlay
+        .quickview-button
+          %button.button View

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

@@ -0,0 +1,63 @@
+#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')
+
+#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 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')