workarea-nvy_theme 1.1.2

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

@@ -0,0 +1,104 @@
+- @title = t('workarea.storefront.searches.title')
+
+- content_for :head do
+  %meta{ property: 'recent-view', content: recent_view_content(search: @search.query_string) }
+  %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{ itemprop: 'breadcrumb' }
+      = link_to t('workarea.storefront.layouts.home'), root_path, rel: 'home', class: 'breadcrumbs__link'
+    %span.breadcrumbs__node{ itemprop: 'breadcrumb' }
+      %span.breadcrumbs__text= t('workarea.storefront.searches.title')
+    %span.breadcrumbs__node{ itemprop: 'breadcrumb' }
+      %span.breadcrumbs__text= @search.query_string
+
+- content_for :page_aside do
+  - if @search.facets.any?
+    .result-filters
+      %h2.result-filters__title= t('workarea.storefront.products.result_filters_title')
+      - @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
+    .browsing-controls
+      .grid.grid--middle
+        .grid__cell.grid__cell--50-at-medium
+          %h1.browsing-controls__heading= pluralize(@search.total, t('workarea.storefront.searches.result'))
+
+        - unless @search.total.zero?
+          .grid__cell.grid__cell--50-at-medium
+            .browsing-controls__sort
+              = form_tag search_path, method: 'get', class: 'browsing-controls__sort-form' 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'
+
+          .grid__cell
+            = append_partials('storefront.search_browse_controls', search: @search)
+
+          - if @search.facets.any?
+            .grid__cell
+              .browsing-controls__filter-button
+                .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'), class: 'button button--solid button--large button--full', data: { mobile_filter_button: '' }
+                  .mobile-filters__content
+                    - if @search.facets.any?
+                      .result-filters
+                        - @search.facets.each do |facet|
+                          - unless @search.autoselected_filter?(facet.system_name)
+                            = render "workarea/storefront/facets/#{facet.type}", facet: facet
+
+    - 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
+    - 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'))
+
+    .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.search_grid_item', product: product, position: position)
+
+          .grid__cell.grid__cell--50.grid__cell--33-at-medium{ data: { pagination_item: '' } }
+            .product-summary{ itemscope: true, itemtype: 'http://schema.org/Product', 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,113 @@
+- title_label = label.gsub(/_/, ' ').capitalize
+
+.address-fields
+  .grid
+    .grid__cell.grid__cell--50-at-medium
+      .property
+        = 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
+          = 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'
+          = inline_svg('workarea/storefront/icons/validation_icon.svg', class: 'value__icon')
+          - if address.errors[:first_name].present?
+            %span.value__error= address.errors[:first_name].first
+    .grid__cell.grid__cell--50-at-medium
+      .property
+        = 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
+          = 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')}"
+          = inline_svg('workarea/storefront/icons/validation_icon.svg', class: 'value__icon')
+          - 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= text_field_tag "#{label}[company]", address.company, class: 'text-box text-box--wide', title: "#{title_label} #{t('workarea.storefront.addresses.company')}", autocomplete: 'organization'
+
+  .property
+    = 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
+      = 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')}"
+      = inline_svg('workarea/storefront/icons/validation_icon.svg', class: 'value__icon')
+      - 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
+    = 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
+      = 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')}", placeholder: t('workarea.storefront.addresses.street_2_placeholder')
+      - if address.errors[:street_2].present?
+        %span.value__error= address.errors[:street_2].first
+
+
+  .property{ 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
+      - 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--33-at-wide
+      .property
+        = 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
+          = 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')}"
+          = inline_svg('workarea/storefront/icons/validation_icon.svg', class: 'value__icon')
+          - if address.errors[:city].present?
+            %span.value__error= address.errors[:city].first
+
+    .grid__cell.grid__cell--33-at-wide
+      .property{ 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
+          - options = grouped_options_for_select(region_options, address.region)
+          = select_tag "#{label}_region_select", options, required: true, title: "#{title_label} #{t('workarea.storefront.addresses.region')}", class: 'hidden', prompt: t('workarea.storefront.addresses.select_state'), aria: { label: "#{title_label} #{t('workarea.storefront.addresses.region')}"}
+          = 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--33
+      .property
+        = 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
+          = 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')}"
+          = inline_svg('workarea/storefront/icons/validation_icon.svg', class: 'value__icon')
+          - if address.errors[:postal_code].present?
+            %span.value__error= address.errors[:postal_code].first
+
+  .grid.grid--auto.grid--bottom
+    .grid__cell
+      .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= telephone_field_tag "#{label}[phone_number]", number_to_phone(address.phone_number), autocomplete: 'tel', class: 'text-box', placeholder: '555-555-5555', title: "#{title_label} #{t('workarea.storefront.addresses.phone_number')}", pattern: '[0-9-]+'
+    .grid__cell
+      .property
+        .grid.grid--auto.grid--middle
+          .grid__cell
+            = label_tag "#{label}[phone_extension]", nil, class: 'property__name' do
+              %span.property__text= t('workarea.storefront.addresses.phone_extension')
+            .value= telephone_field_tag "#{label}[phone_extension]", address.phone_extension, autocomplete: 'tel-extension', class: 'text-box text-box--x-small', title: "#{title_label} #{t('workarea.storefront.addresses.phone_extension')}", pattern: '\d+'

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

@@ -0,0 +1,25 @@
+- cache taxon_cache_key(taxon, :left_navigation, selected: selected_child_taxon), expires_in: Workarea.config.cache_expirations.left_navigation_fragment_cache do
+  .secondary-nav
+    %h2.secondary-nav__heading= t('workarea.storefront.left_navigation.categories')
+    %ul.secondary-nav__links{ 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?
+              %span.secondary-nav__link= 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?
+                        %span.secondary-nav__link= 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?
+  %ul.share-buttons
+    - 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__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__icon')
+      %li.share-buttons__item
+        = link_to "https://plus.google.com/share?#{share_query_string(share_url)}", class: 'share-buttons__button', title: t('workarea.storefront.shares.share_on_google'), target: '_blank', data: { popup_button: '', analytics: share_analytics_data('google plus', share_url).to_json } do
+          = inline_svg('workarea/storefront/icons/google_plus.svg', class: 'share-buttons__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__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__icon')

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

@@ -0,0 +1,50 @@
+- @title = t('workarea.storefront.shares.share_by_email')
+
+.view
+  %h1= 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
+
+    %fieldset
+      %legend
+        %span.heading.heading--2= 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= 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= 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')
+
+    %fieldset
+      %legend
+        %span.heading.heading--2= 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= 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= 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')
+    .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= text_area_tag 'message', @share.message, class: 'text-box text-box--multi-line text-box--wide', placeholder: t('workarea.storefront.shares.message_placeholder'), maxlength: Workarea.config.max_email_share_message_length
+
+    .property= recaptcha_tags
+
+    .grid.grid--auto
+      %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/base/_forms.html.haml

@@ -0,0 +1,88 @@
+#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
+    .styled-select
+      %select
+        %option Larger Font Size
+    %input{ value: 'Larger Font Size' }
+    %textarea Larger Font Size
+
+  %p should not allow selects to exceed the width of their container (100px in this example):
+  .style-guide__example-block
+    %div{ style: 'width: 100px;' }
+      .styled-select
+        %select
+          %option Supercalifragilisticexpialidocious
+
+  %p should align a label to the with the text of a textarea:
+  .style-guide__example-block
+    %label Label
+    %textarea Textarea
+
+  %p should style readonly form controls:
+  .style-guide__example-block
+    %input{ readonly: true, value: 'Readonly Input' }
+  .style-guide__example-block
+    %textarea{ readonly: true } Readonly Textarea
+
+  %p should style disabled form controls:
+  .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
+    .styled-select
+      %select{ disabled: true }
+        %option Disabled Select
+        %option Disabled Select
+        %option Disabled Select
+
+  %p should style form controls within a disabled fieldset:
+  .style-guide__example-block
+    %fieldset{ disabled: true }
+      %button Disabled Button
+      %input{ value: 'Disabled Input' }
+      %textarea Disabled Textarea
+      .styled-select
+        %select
+          %option Disabled Option
+
+  %p should support disabled select options:
+  .style-guide__example-block
+    .styled-select
+      %select
+        %optgroup
+          %option Select Optgroup Option
+        %optgroup{ disabled: true }
+          %option Disabled Select Optgroup Option
+  .style-guide__example-block
+    .styled-select
+      %select
+        %option Select Option
+        %option{ disabled: true } Disabled Select Option
+        %option Select 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' }
+
+  %p should properly outline radio buttons:
+  .style-guide__example-block
+    = radio_button('foo', 'bar', 'true', checked: true)
+    = radio_button('foo', 'bar', 'false')

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

@@ -0,0 +1,89 @@
+#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'
+    = button_tag 'Button', class: 'button button--solid', type: 'button'
+
+  %p should work with <code>button[type=submit]</code> elements:
+  .style-guide__example-block
+    = button_tag 'Button', class: 'button', type: 'submit'
+    = button_tag 'Button', class: 'button button--solid', type: 'submit'
+
+  %p should work with <code>input[type=submit]</code> elements:
+  .style-guide__example-block
+    = submit_tag 'Button', class: 'button'
+    = submit_tag 'Button', class: 'button button--solid'
+
+  %p should work with <code>a</code> elements:
+  .style-guide__example-block
+    = link_to 'Button', '#', class: 'button'
+    = link_to 'Button', '#', class: 'button button--solid'
+
+  %p should style non-interactive buttons wrapped in an <code>a</code> element:
+  .style-guide__example-block
+    = link_to '#' do
+      %span.button Span Button
+    = link_to '#' do
+      %span.button.button--solid 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_tag 'Button Element', class: 'button button--solid 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_tag 'Button Element', class: 'button button--solid button--large'
+
+#button--extra-large.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'button__extra-large')
+
+  %p should further increase the size of the button, intended for use in content blocks only!
+  .style-guide__example-block
+    = button_tag 'Button Element', class: 'button button--extra-large'
+    = button_tag 'Button Element', class: 'button button--solid button--extra-large'
+
+#button--full.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'button__full')
+
+  %p Should make the button the full width of it's parent
+  .style-guide__example-block
+    = button_tag 'Button Element', class: 'button button--full'
+    = button_tag 'Button Element', class: 'button button--solid button--full'
+
+#button--disabled.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'button__disabled')
+
+  %p should have a disabled state for the button:
+  .style-guide__example-block
+    = button_tag 'Button Element', class: 'button', disabled: true
+    = button_tag 'Button Element', class: 'button button--solid', disabled: true
+
+  .style-guide__example-block
+    = button_tag 'Button Element', class: 'button button--small', disabled: true
+    = button_tag 'Button Element', class: 'button button--solid button--small', disabled: true
+
+  .style-guide__example-block
+    = button_tag 'Button Element', class: 'button button--large', disabled: true
+    = button_tag 'Button Element', class: 'button button--solid button--large', disabled: true
+
+  .style-guide__example-block
+    = button_tag 'Button Element', class: 'button button--extra-large', disabled: true
+    = button_tag 'Button Element', class: 'button button--solid button--extra-large', disabled: true