workarea-storefront 3.4.12

data/app/views/workarea/storefront/recent_views/narrow.html.haml

@@ -0,0 +1,25 @@
+- if @recent_views.products.any? || @recent_views.categories.any? || @recent_views.searches.any?
+  .recent-views
+
+    - if @recent_views.products.any?
+      .recent-views__section.recent-views__section--products
+        %h2.recent-views__heading= t('workarea.storefront.recommendations.recent_products')
+        - @recent_views.products.each do |product|
+          .product-summary.product-summary--small{ itemscope: true, itemtype: 'http://schema.org/Product' }
+            = render 'workarea/storefront/products/summary', product: product
+
+    - if @recent_views.categories.any?
+      .recent-views__section.recent-views__section--categories
+        %h2.recent-views__heading= t('workarea.storefront.recommendations.recent_categories')
+        %ul.recent-views__list
+          - @recent_views.categories.each do |category|
+            %li.recent-views__item
+              = link_to category.name, category_path(category), class: 'recent-views__link'
+
+    - if @recent_views.searches.any?
+      .recent-views__section.recent-views__section--searches
+        %h2.recent-views__heading= t('workarea.storefront.recommendations.recent_searches')
+        %ul.recent-views__list
+          - @recent_views.searches.each do |search|
+            %li.recent-views__item
+              = link_to search, search_path(q: search), class: 'recent-views__link'

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

@@ -0,0 +1,27 @@
+- if @recent_views.products.any? || @recent_views.categories.any? || @recent_views.searches.any?
+  .recent-views
+
+    - if @recent_views.products.any?
+      .recent-views__section.recent-views__section--products
+        %h2.recent-views__heading= t('workarea.storefront.recommendations.recent_products')
+        .grid
+          - @recent_views.products.each do |product|
+            .grid__cell.grid__cell--50.grid__cell--33-at-medium.grid__cell--16-at-wide
+              .product-summary.product-summary--small{ itemscope: true, itemtype: 'http://schema.org/Product' }
+                = render 'workarea/storefront/products/summary', product: product
+
+    - if @recent_views.categories.any?
+      .recent-views__section.recent-views__section--categories
+        %h2.recent-views__heading= t('workarea.storefront.recommendations.recent_categories')
+        %ul.recent-views__list
+          - @recent_views.categories.each do |category|
+            %li.recent-views__item
+              = link_to category.name, category_path(category), class: 'recent-views__link'
+
+    - if @recent_views.searches.any?
+      .recent-views__section.recent-views__section--searches
+        %h2.recent-views__heading= t('workarea.storefront.recommendations.recent_searches')
+        %ul.recent-views__list
+          - @recent_views.searches.each do |search|
+            %li.recent-views__item
+              = link_to search, search_path(q: search), class: 'recent-views__link'

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

@@ -0,0 +1,12 @@
+-# TODO v4 just use product-list-content-block for recommendations
+- if @recommendations.any?
+
+  %section.personalized-recommendations-content-block{ role: 'presentation' }
+
+    %h1.personalized-recommendations-content-block__heading= t('workarea.storefront.recommendations.personalized_heading')
+
+    .grid
+      - @recommendations.each do |product|
+        .grid__cell.grid__cell--50.grid__cell--33-at-medium.grid__cell--16-at-wide
+          .product-summary.product-summary--small{ itemscope: true, itemtype: 'http://schema.org/Product' }
+            = render 'workarea/storefront/products/summary', product: product

data/app/views/workarea/storefront/searches/index.json.jbuilder

@@ -0,0 +1 @@
+json.results @results

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

@@ -0,0 +1,31 @@
+- @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)
+
+  - if @search.query_suggestions.any?
+    .search-no-results__suggestions
+      %h2.search-no-results__suggestions-heading Did You Mean?
+      %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'
+
+  - if @search.no_results_content.present?
+    .search-no-results__content
+      = render_content_blocks(@search.no_results_content)
+
+  .search-no-results__search
+    %h2.search-no-results__search-heading= t('workarea.storefront.searches.search_again')
+    = form_tag search_path, method: 'get', class: 'inline-form' do
+      .inline-form__cell
+        .value= search_field_tag :q, params[:q], id: 'no_results_storefront_search', class: 'text-box', aria: { label: t('workarea.storefront.searches.search') }, placeholder: t('workarea.storefront.searches.search'), data: { search_field: '' }, role: 'search'
+      .inline-form__cell= button_tag t('workarea.storefront.forms.go'), class: 'button'
+
+
+  %div{ data: { recommendations_placeholder: recent_views_path } }
+  = append_partials('storefront.search_no_results', search: @search)

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

@@ -0,0 +1,99 @@
+- @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
+      - @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'))
+
+    %h1= pluralize(@search.total, t('workarea.storefront.searches.result'))
+
+    - 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--auto.grid--middle
+      .grid__cell
+        = form_tag search_path, method: 'get' 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?
+      .visible.visible--for-small-only
+        .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--large', 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
+
+    .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--25-at-medium.grid__cell--20-at-wide{ 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,105 @@
+- 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'
+          - 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')}"
+          - 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')}"
+      - 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--wide', 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
+    = 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', 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{ 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
+
+  .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', title: "#{title_label} #{t('workarea.storefront.addresses.region')}", autocomplete: 'address-level1'
+      - if address.errors[:region].present?
+        %span.value__error= address.errors[:region].first
+
+  .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--small', 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
+
+  .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,24 @@
+- cache taxon_cache_key(taxon, :left_navigation, selected: selected_child_taxon), expires_in: Workarea.config.cache_expirations.left_navigation_fragment_cache do
+  %h2= taxon.name
+  %ul.secondary-nav{ 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/shared/_message.html.haml

@@ -0,0 +1,4 @@
+.message{ html_options }
+  %p.message__type
+    %span.message__icon= type.titleize
+  %p.message__text= message

data/app/views/workarea/storefront/sitemaps/_pagination.html.haml

@@ -0,0 +1,37 @@
+- number_of_pages = collection.total_pages
+- current_page = collection.current_page
+
+%ul.sitemap-pagination
+  %li.sitemap-pagination__node
+    - if collection.first_page?
+      %span.sitemap-pagination__navigation.sitemap-pagination__navigation--disabled= t('workarea.storefront.sitemaps.pagination.prev')
+    - else
+      = link_to t('workarea.storefront.sitemaps.pagination.prev'), pagination_path_for(page: current_page - 1), class: 'sitemap-pagination__navigation'
+  - max_page = [current_page + 1, 3].max
+  - start = [1, current_page - 1].max
+  - if start > number_of_pages - 3 && start >= 2
+    - start = number_of_pages - 2
+  - stop = [max_page, number_of_pages].min
+  - if start > 1
+    %li.sitemap-pagination__node= link_to 1, pagination_path_for(page: 1), class: 'sitemap-pagination__link'
+    - if start == 3
+      %li.sitemap-pagination__node= link_to 2, pagination_path_for(page: 2), class: 'sitemap-pagination__link'
+    - if start >= 4
+      %li.sitemap-pagination__node
+        %span …
+  - Range.new(start, stop).each do |page|
+    - if page == current_page
+      %li.sitemap-pagination__node
+        %strong= page
+    - else
+      %li.sitemap-pagination__node= link_to page, pagination_path_for(page: page), class: 'sitemap-pagination__link'
+  - if stop < number_of_pages
+    - if (stop + 1) != number_of_pages
+      %li.sitemap-pagination__node
+        %span …
+    %li.sitemap-pagination__node= link_to number_of_pages, pagination_path_for(page: number_of_pages), class: 'sitemap-pagination__link'
+  %li.sitemap-pagination__node
+    - if collection.last_page?
+      %span.sitemap-pagination__navigation.sitemap-pagination__navigation--disabled= t('workarea.storefront.sitemaps.pagination.next')
+    - else
+      = link_to t('workarea.storefront.sitemaps.pagination.next'), pagination_path_for(page: current_page + 1), class: 'sitemap-pagination__navigation'

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

@@ -0,0 +1,36 @@
+- @title = t('workarea.storefront.sitemaps.heading')
+
+- content_for :head do
+  - cache "#{@sitemap.cache_key}/head", expires_in: Workarea.config.cache_expirations.sitemap_fragment_cache do
+    - if @sitemap.first_page?
+      %meta{ name: 'robots', content: 'index, follow' }
+    - else
+      %meta{ name: 'robots', content: 'noindex, follow' }
+
+    - if @sitemap.first_page?
+      %link{ href: sitemap_path, rel: 'canonical' }
+    - else
+      %link{ href: sitemap_path(page: @sitemap.page), rel: 'canonical' }
+
+    - if @sitemap.second_page?
+      %link{ href: sitemap_path, rel: 'prev' }
+    - elsif !@sitemap.first_page?
+      %link{ href: url_for(page: @sitemap.prev_page), rel: 'prev' }
+
+    - unless @sitemap.last_page?
+      %link{ href: url_for(page: @sitemap.next_page), rel: 'next' }
+
+.view
+
+  %h1= t('workarea.storefront.sitemaps.heading')
+
+  - cache @sitemap, expires_in: Workarea.config.cache_expirations.sitemap_fragment_cache do
+    - unless @sitemap.results.any?
+      %p= t('workarea.storefront.sitemaps.none_found')
+    - else
+      %ul.sitemap
+        - @sitemap.results.each do |taxon|
+          - name = taxon.ancestors_and_self.map(&:name).join(' > ')
+          %li.sitemap__item= link_to name, storefront_path_for(taxon), class: 'sitemap__link'
+      - if @sitemap.total_pages > 1
+        = render 'workarea/storefront/sitemaps/pagination', collection: @sitemap.taxons

data/app/views/workarea/storefront/style_guides/_navigation.html.haml

@@ -0,0 +1,11 @@
+%ul.style-guide__nav
+  %li
+    %p= link_to 'Back to Storefront', storefront.root_path
+  - %w(settings base typography objects components trumps).each do |category|
+    %li
+      %strong= category.titleize
+      %ul
+        - partial_paths_for(category).each do |partial|
+          - name = partial.split('/').last
+          %li= link_to_style_guide(category, name)
+

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

@@ -0,0 +1,82 @@
+#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
+      %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;' }
+      %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
+    %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
+      %select
+        %option Disabled Option
+
+  %p should support disabled select options:
+  .style-guide__example-block
+    %select
+      %optgroup
+        %option Select Optgroup Option
+      %optgroup{ disabled: true }
+        %option Disabled Select Optgroup Option
+  .style-guide__example-block
+    %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')