workarea-haven_theme 1.3.0

data/app/views/workarea/storefront/searches/no_results.html.haml

@@ -0,0 +1,33 @@
+- @title = t('workarea.storefront.searches.title')
+
+- content_for :head do
+  %meta{ name: 'robots', content: 'noindex, follow' }
+
+.search-no-results.view{ data: { analytics: search_results_view_analytics_data(@search).to_json } }
+
+  %h1.search-no-results__heading= t('workarea.storefront.searches.no_results', terms: @search.query_string)
+  .grid.grid--large
+    .grid__cell.grid__cell--50-at-medium
+      .search-no-results__search
+        %h2.search-no-results__search-heading= t('workarea.storefront.searches.search_again')
+        = form_tag search_path, method: 'get' do
+          .value.value--block
+            = text_field_tag 'q', params[:q] || 'Search Store', class: 'text-box', title: 'Search', required: true
+            .value__button= button_tag t('workarea.storefront.forms.go'), class: 'button button--small'
+
+    - if @search.query_suggestions.any?
+      .grid__cell.grid__cell--50-at-medium
+        .search-no-results__suggestions
+          %h2.search-no-results__suggestions-heading= t('workarea.storefront.searches.suggestions_heading')
+          %ul.search-no-results__suggestions-list
+            - @search.query_suggestions.each do |search|
+              %li.search-no-results__suggestions-item
+                = link_to search, search_path(q: search), class: 'search-no-results__suggestions-link'
+
+    .grid__cell
+      - if @search.no_results_content.present?
+        .search-no-results__content
+          = render_content_blocks(@search.no_results_content)
+
+  = append_partials('storefront.search_no_results', search: @search)
+  %div{ data: { recommendations_placeholder: recent_views_path } }

data/app/views/workarea/storefront/searches/show.html.haml

@@ -0,0 +1,118 @@
+- @title = t('workarea.storefront.searches.title')
+
+- content_for :head do
+  %meta{ name: 'robots', content: 'noindex' }
+  = append_partials('storefront.search_head', search: @search)
+
+  %meta{ property: 'og:url', content: url_for(only_path: false) }
+  %meta{ property: 'og:title', content: page_title }
+  %meta{ property: 'og:type', content: 'website' }
+  %meta{ property: 'og:image', content: @search.open_graph_asset.url }
+  %meta{ property: 'og:image:secure_url', content: @search.open_graph_asset.url }
+
+- content_for :breadcrumbs do
+  %p.breadcrumbs__node-group
+    %span.breadcrumbs__node
+      = link_to t('workarea.storefront.layouts.home'), root_path, rel: 'home', class: 'breadcrumbs__link'
+    %span.breadcrumbs__node
+      %span.breadcrumbs__text= t('workarea.storefront.searches.title')
+    %span.breadcrumbs__node
+      %span.breadcrumbs__text= @search.query_string
+
+- content_for :page_aside do
+  - if @search.has_filters?
+    .applied-filters
+      .result-filters
+        = render "workarea/storefront/facets/applied", facets: @search.facets
+        = link_to t('workarea.storefront.filters.clear'), search_path(q: @search.query_string), class: 'button button--small'
+  - if @search.facets.any?
+    .result-filters{ data: { filter_view_more: '', expandable_filters: '' } }
+      - @search.facets.each do |facet|
+        - unless @search.autoselected_filter?(facet.system_name)
+          = render "workarea/storefront/facets/#{facet.type}", facet: facet
+
+.view{ data: { analytics: search_results_view_analytics_data(@search).to_json } }
+
+  .search-results
+
+    - if @search.results_content.present?
+      .search-results__content= render_content_blocks(@search.results_content)
+
+    - if @search.customization_content_blocks_for('above_results').present?
+      .search-results__content= render_content_blocks(@search.customization_content_blocks_for('above_results'))
+
+    - if @search.message.present?
+      = render_message 'info', @search.message
+
+    = append_partials('storefront.above_search_results', search: @search)
+
+    - if @search.query_suggestions.any?
+      .search-results__related
+        %span.search-results__related-title= t('workarea.storefront.searches.suggestions')
+
+        .grid.grid--auto
+          - @search.query_suggestions.each do |search|
+            .grid__cell
+              %span.search-results__related-term= link_to search, search_path(q: search), class: 'search-results__related-link'
+
+  - if @search.total.zero?
+    %p
+      = t('workarea.storefront.products.none_found')
+      = link_to t('workarea.storefront.products.reset_filters'), search_path(q: @search.query_string)
+
+  - else
+
+    .grid
+      .grid__cell.grid__cell--50-at-medium
+        %h1.result-filters__heading= pluralize(@search.total, t('workarea.storefront.searches.result'))
+      .grid__cell.grid__cell--50-at-medium
+        = form_tag search_path, method: 'get', class: 'result-filters__sort hidden hidden--for-small-only' do
+          = facet_hidden_inputs(@search.facets)
+          = hidden_field_tag :q, @search.query_string
+          .property.property--responsive
+            = label_tag 'sort_top', nil, class: 'property__name' do
+              %span.property__text= t('workarea.storefront.searches.sort_by')
+            %span.value= select_tag :sort, options_for_select(@search.sorts, selected: @search.sort), id: 'sort_top', data: { form_submitting_control: '' }
+          .hidden-if-js-enabled= button_tag t('workarea.storefront.searches.sort'), value: 'sort_products_top', class: 'button'
+
+      = append_partials('storefront.search_browse_controls', search: @search)
+
+    - if @search.facets.any?
+      .hidden.hidden--for-wide
+        .mobile-filters
+          = check_box_tag 'toggle_mobile_filters', nil, false, class: 'mobile-filters__control'
+          .mobile-filters__trigger
+            = label_tag 'toggle_mobile_filters', t('workarea.storefront.products.filter_results', count: @search.filters.count), 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 search_path, method: 'get' do
+                  = facet_hidden_inputs(@search.facets)
+                  = hidden_field_tag :q, @search.query_string, {id: 'not_q'}
+                  .property
+                    = label_tag 'sort_drawer', nil, class: 'property__name' do
+                      %span.property__text= t('workarea.storefront.searches.sort_by')
+                    %span.value= select_tag :sort, options_for_select(@search.sorts, selected: @search.sort), id: 'sort_drawer', data: { form_submitting_control: '' }
+                  .hidden-if-js-enabled= button_tag t('workarea.storefront.searches.sort'), value: 'sort_products_top', class: 'button'
+            - if @search.has_filters?
+              .applied-filters
+                .result-filters
+                  = render "workarea/storefront/facets/applied", facets: @search.facets
+                  = link_to t('workarea.storefront.filters.clear'), search_path(q: @search.query_string), class: 'button button--small'
+            .result-filters{ data: { filter_view_more: '', expandable_filters: '' } }
+              - @search.facets.each do |facet|
+                - unless @search.autoselected_filter?(facet.system_name)
+                  = render "workarea/storefront/facets/#{facet.type}", facet: facet
+
+    .pagination{ data: { analytics: product_list_analytics_data("Search Results for \"#{@search.query_string}\"").to_json, pagination: pagination_data(@search.products),  back_to_top_button: '' } }
+      .grid
+        - @search.products.each_with_index do |product, position|
+          = append_partials('storefront.category_browse_grid_item', product: product, position: position)
+
+          .grid__cell.grid__cell--50.grid__cell--33-at-medium.grid__cell--25-at-wide{ data: { pagination_item: '' } }
+            .product-summary{ data: { search_results_product_grid_summary: { id: product.catalog_id, position: position }.to_json } }
+              = render 'workarea/storefront/products/summary', product: product
+      - if show_pagination?(@search.products)
+        .pagination__button
+          = link_to t('workarea.storefront.pagination.next_page'), pagination_path_for(page: @search.next_page), class: 'button button--large', data: { pagination_button: '' }

data/app/views/workarea/storefront/shared/_address_fields.html.haml

@@ -0,0 +1,99 @@
+- title_label = label.gsub(/_/, ' ').capitalize
+
+.address-fields
+  .grid
+    .grid__cell.grid__cell--50-at-medium
+      .property{ class: ('property--invalid' if address.errors[:first_name].present?) }
+        = label_tag "#{label}[first_name]", nil, class: 'property__name' do
+          %span.property__requirement.property__requirement--required= t('workarea.storefront.forms.required')
+          %span.property__text= t('workarea.storefront.addresses.first_name')
+        .value.value--block
+          = text_field_tag "#{label}[first_name]", address.first_name, class: 'text-box text-box--full', required: true, title: "#{title_label} #{t('workarea.storefront.addresses.first_name')}", autocomplete: 'given-name'
+          - if address.errors[:first_name].present?
+            %span.value__error= address.errors[:first_name].first
+    .grid__cell.grid__cell--50-at-medium
+      .property{ class: ('property--invalid' if address.errors[:last_name].present?) }
+        = label_tag "#{label}[last_name]", nil, class: 'property__name' do
+          %span.property__requirement.property__requirement--required= t('workarea.storefront.forms.required')
+          %span.property__text= t('workarea.storefront.addresses.last_name')
+        .value.value--block
+          = text_field_tag "#{label}[last_name]", address.last_name, class: 'text-box text-box--full', required: true, autocomplete: 'family-name', title: "#{title_label} #{t('workarea.storefront.addresses.last_name')}"
+          - if address.errors[:last_name].present?
+            %span.value__error= address.errors[:last_name].first
+
+  = optional_field(t('workarea.storefront.addresses.company_prompt'), address.company) do
+    .property
+      = label_tag "#{label}[company]", nil, class: 'property__name' do
+        %span.property__text= t('workarea.storefront.addresses.company')
+        %span.property__requirement.property__requirement--optional= t('workarea.storefront.forms.optional')
+      .value.value--block= text_field_tag "#{label}[company]", address.company, class: 'text-box text-box--full', title: "#{title_label} #{t('workarea.storefront.addresses.company')}", autocomplete: 'organization'
+
+  .property{ class: ('property--invalid' if address.errors[:street].present?) }
+    = label_tag "#{label}[street]", nil, class: 'property__name' do
+      %span.property__requirement.property__requirement--required= t('workarea.storefront.forms.required')
+      %span.property__text= t('workarea.storefront.addresses.street')
+    .value.value--block
+      = text_field_tag "#{label}[street]", address.street, class: 'text-box text-box--full', required: true, autocomplete: 'address-line1', title: "#{title_label} #{t('workarea.storefront.addresses.street')}"
+      - if address.errors[:street].present?
+        %span.value__error= address.errors[:street].first
+      - unless address.allow_po_box?
+        %span.value__note= t('workarea.storefront.addresses.no_po_boxes')
+
+  .property{ class: ('property--invalid' if address.errors[:street_2].present?) }
+    = label_tag "#{label}[street_2]", nil, class: 'property__name' do
+      %span.property__text= t('workarea.storefront.addresses.street_2')
+      %span.property__requirement.property__requirement--optional= t('workarea.storefront.forms.optional')
+    .value.value--block
+      = text_field_tag "#{label}[street_2]", address.street_2, class: 'text-box text-box--full', autocomplete: 'address-line2', title: "#{title_label} #{t('workarea.storefront.addresses.street_2')}"
+      - if address.errors[:street_2].present?
+        %span.value__error= address.errors[:street_2].first
+
+  .property{ class: ('property--invalid' if address.errors[:city].present?) }
+    = label_tag "#{label}[city]", nil, class: 'property__name' do
+      %span.property__requirement.property__requirement--required= t('workarea.storefront.forms.required')
+      %span.property__text= t('workarea.storefront.addresses.city')
+    .value.value--block
+      = text_field_tag "#{label}[city]", address.city, class: 'text-box text-box--full', required: true, autocomplete: 'address-level2', title: "#{title_label} #{t('workarea.storefront.addresses.city')}"
+      - if address.errors[:city].present?
+        %span.value__error= address.errors[:city].first
+      - if address.errors[:city].present?
+        %span.value__error= address.errors[:city].first
+
+  .property{ class: ('property--invalid' if address.errors[:country].present?), data: { address_region_fields: 'country' } }
+    = label_tag "#{label}[country]", nil, class: 'property__name' do
+      %span.property__requirement.property__requirement--required= t('workarea.storefront.forms.required')
+      %span.property__text= t('workarea.storefront.addresses.country')
+    .value.value--block
+      - options = options_for_select(country_options, address.country.try(:alpha2))
+      = select_tag "#{label}[country]", options, title: "#{title_label} #{t('workarea.storefront.addresses.country')}"
+      - if address.errors[:country].present?
+        %span.value__error= address.errors[:country].first
+
+  .grid
+    .grid__cell.grid__cell--50-at-medium
+      .property{ class: ('property--invalid' if address.errors[:region].present?), data: { address_region_fields: 'region' } }
+        = label_tag "#{label}[region]", nil, class: 'property__name' do
+          %span.property__requirement.property__requirement--required= t('workarea.storefront.forms.required')
+          %span.property__text= t('workarea.storefront.addresses.region')
+        .value.value--block
+          - options = grouped_options_for_select(region_options, address.region, prompt: t('workarea.storefront.addresses.select_state'))
+          = select_tag "#{label}_region_select", options, required: true, title: "#{title_label} #{t('workarea.storefront.addresses.region')}", class: 'hidden'
+          = text_field_tag "#{label}[region]", address.region, class: 'text-box text-box--full', title: "#{title_label} #{t('workarea.storefront.addresses.region')}"
+          - if address.errors[:region].present?
+            %span.value__error= address.errors[:region].first
+
+    .grid__cell.grid__cell--50-at-medium
+      .property{ class: ('property--invalid' if address.errors[:postal_code].present?) }
+        = label_tag "#{label}[postal_code]", nil, class: 'property__name' do
+          %span.property__requirement.property__requirement--required= t('workarea.storefront.forms.required')
+          %span.property__text= t('workarea.storefront.addresses.postal_code')
+        .value.value--block
+          = text_field_tag "#{label}[postal_code]", address.postal_code, class: 'text-box text-box--full', required: true, autocomplete: 'postal-code', title: "#{title_label} #{t('workarea.storefront.addresses.postal_code')}"
+          - if address.errors[:postal_code].present?
+            %span.value__error= address.errors[:postal_code].first
+
+  .property
+    = label_tag "#{label}[phone_number]", nil, class: 'property__name' do
+      %span.property__text= t('workarea.storefront.addresses.phone_number')
+      %span.property__requirement.property__requirement--optional= t('workarea.storefront.forms.optional')
+    .value.value--block= telephone_field_tag "#{label}[phone_number]", number_to_phone(address.phone_number), autocomplete: 'tel', class: 'text-box text-box--full', placeholder: '555-555-5555', title: "#{title_label} #{t('workarea.storefront.addresses.phone_number')}", pattern: '[0-9-]+'

data/app/views/workarea/storefront/shared/_left_navigation.html.haml

@@ -0,0 +1,26 @@
+- cache "#{taxon.cache_key}/left_navigation", expires_in: 1.day do
+  .secondary-nav
+    .secondary-nav__wrapper
+      %h2.secondary-nav__heading= taxon.name
+      %ul.secondary-nav__items{ role: 'navigation' }
+        - taxon.children.each do |taxon|
+          - if taxon.active?
+            %li.secondary-nav__item{ class: ('secondary-nav__item--has-children' if taxon.has_children?) }
+              - if taxon.placeholder?
+                = taxon.name
+              - elsif link_selected?(taxon)
+                %span.secondary-nav__link.secondary-nav__link--selected= taxon.name
+              - else
+                = link_to taxon.name, storefront_path_for(taxon), class: (link_selected?(taxon) ? 'secondary-nav__link secondary-nav__link--selected' : 'secondary-nav__link')
+
+              - if taxon.has_children? && link_selected?(taxon)
+                %ul.secondary-nav__children
+                  - taxon.children.each do |taxon|
+                    - if taxon.active?
+                      %li.secondary-nav__item{ class: ('secondary-nav__item--has-children' if taxon.has_children?) }
+                        - if taxon.placeholder?
+                          = taxon.name
+                        - elsif link_selected?(taxon)
+                          %span.secondary-nav__link.secondary-nav__link--selected= taxon.name
+                        - else
+                          = link_to taxon.name, storefront_path_for(taxon), class: (link_selected?(taxon) ? 'secondary-nav__link secondary-nav__link--selected' : 'secondary-nav__link')

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

@@ -0,0 +1,19 @@
+- if share_url.present?
+  .share-buttons
+    = button_tag value: 'open_shares', type: 'button', class: 'share-buttons__toggle-button', data: { toggle_class_button: { target: '.share-buttons', class: 'share-buttons--open', closest: true }.to_json } do
+      = inline_svg('workarea/storefront/icons/share.svg', class: 'share-buttons__toggle-button-icon', title: t('workarea.storefront.shares.share'))
+    %ul.share-buttons__list
+      - if share_url.present?
+        %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: 'share-buttons__social-icon')
+        %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: 'share-buttons__social-icon')
+        %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: 'share-buttons__social-icon')
+      - 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: 'share-buttons__social-icon')

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

@@ -0,0 +1,53 @@
+- @title = t('workarea.storefront.shares.share_by_email')
+
+.view
+  %h1.heading.heading--3.heading--upcase= t('workarea.storefront.shares.share_by_email')
+  - if @share.errors.any?
+    - @share.errors.full_messages.each do |message|
+      = render_message 'error', message, data: { analytics: validation_error_analytics_data('share').to_json }
+
+  = form_tag shares_path, method: 'post', id: 'email_friend_form' do
+    = hidden_field_tag 'title', @share.title
+    = hidden_field_tag 'url', @share.url
+    .grid
+      .grid__cell.grid__cell--50-at-medium
+        %fieldset
+          %legend
+            %span.heading.heading--5.heading--no-margin= t('workarea.storefront.shares.from')
+          .property-group
+            .property
+              = label_tag 'from_name', nil, class: 'property__name' do
+                %span.property__text= t('workarea.storefront.shares.name')
+                %span.property__requirement.property__requirement--optional= t('workarea.storefront.forms.optional')
+              .value.value--block= text_field_tag 'from_name', @share.from_name, class: 'text-box', placeholder: t('workarea.storefront.shares.from_name_placeholder')
+            .property
+              = label_tag 'from_email', nil, class: 'property__name' do
+                %span.property__text= t('workarea.storefront.shares.email')
+              .value.value--block= email_field_tag 'from_email', @share.from_email, class: 'text-box', required: true, autocapitalize: 'off', autocorrect: 'off', placeholder: t('workarea.storefront.shares.from_email_placeholder')
+      .grid__cell.grid__cell--50-at-medium
+        %fieldset
+          %legend
+            %span.heading.heading--5.heading--no-margin= t('workarea.storefront.shares.to')
+          .property-group
+            .property
+              = label_tag 'to_name', nil, class: 'property__name' do
+                %span.property__text= t('workarea.storefront.shares.name')
+                %span.property__requirement.property__requirement--optional= t('workarea.storefront.forms.optional')
+              .value.value--block= text_field_tag 'to_name', @share.to_name, class: 'text-box', placeholder: t('workarea.storefront.shares.to_name_placeholder')
+            .property
+              = label_tag 'to_email', nil, class: 'property__name' do
+                %span.property__text= t('workarea.storefront.shares.email')
+              .value.value--block= email_field_tag 'to_email', @share.to_email, class: 'text-box', required: true, autocapitalize: 'off', autocorrect: 'off', placeholder: t('workarea.storefront.shares.to_email_placeholder')
+      .grid__cell
+        .property
+          = label_tag 'message', nil, class: 'property__name' do
+            %span.property__text= t('workarea.storefront.shares.message')
+            %span.property__requirement.property__requirement--optional= t('workarea.storefront.forms.optional')
+          .value.value--block= text_area_tag 'message', @share.message, class: 'text-box text-box--multi-line', placeholder: t('workarea.storefront.shares.message_placeholder'), maxlength: Workarea.config.max_email_share_message_length
+
+      .grid__cell
+        .property= recaptcha_tags
+
+    .grid.grid--auto.grid--middle
+      %p.grid__cell= button_tag t('workarea.storefront.forms.send'), value: 'email_friend', class: 'button'
+      %p.grid__cell= link_to t('workarea.storefront.forms.cancel'), @share.url, class: 'text-button', data: { dialog_close_button: '' }

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

@@ -0,0 +1,100 @@
+#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
+
+  %p should have a disabled state:
+  .style-guide__example-block
+    = button_tag 'Button', class: 'button', type: 'button', disabled: true
+
+#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.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'button__full')
+
+  %p should increase the size of the button:
+  .style-guide__example-block
+    = button_tag 'Button Element', class: 'button button--full'
+
+
+#button--secondary.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'button__secondary')
+
+  %p should style the button differently
+  .style-guide__example-block
+    = button_tag 'Button Element', class: 'button button--secondary'
+
+  %p should have a different disabled state
+  .style-guide__example-block
+    = button_tag 'Button Element', class: 'button button--secondary', disabled: true
+
+
+#button--icon.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'button__icon')
+
+  %p should display an icon
+  .style-guide__example-block
+    = button_tag class: 'button button--small' do
+      Button Element
+      = inline_svg('workarea/storefront/icons/long_arrow.svg', class: 'button__icon')
+
+  .style-guide__example-block
+    = button_tag class: 'button' do
+      Button Element
+      = inline_svg('workarea/storefront/icons/long_arrow.svg', class: 'button__icon')
+
+  .style-guide__example-block
+    = button_tag class: 'button button--large' do
+      Button Element
+      = inline_svg('workarea/storefront/icons/long_arrow.svg', class: 'button__icon')
+
+  %p should display an icon in secondary buttons
+  .style-guide__example-block
+    = button_tag class: 'button button--secondary' do
+      Button Element
+      = inline_svg('workarea/storefront/icons/long_arrow.svg', class: 'button__icon')
+
+  %p should animate icon on hover when button__icon--shift-right modifier is present
+  .style-guide__example-block
+    = button_tag class: 'button button--secondary' do
+      Button Element
+      = inline_svg('workarea/storefront/icons/long_arrow.svg', class: 'button__icon button__icon--shift-right')