workarea-storefront 3.4.12

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

@@ -0,0 +1,40 @@
+#divider-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'divider_content_block')
+
+  %p A content block that shows a horizontal rule. Intended to visually divide other content blocks.
+
+  %p should support a user-set border style and width:
+  .style-guide__example-block
+    .divider-content-block.divider-content-block--small
+      .divider-content-block__line{ style: "border-bottom-style: solid; border-bottom-width: 3px" }
+
+  %p should support spacing without visual border:
+  .style-guide__example-block
+    .divider-content-block.divider-content-block--small
+      .divider-content-block__line.hidden{ style: "border-bottom-style: solid; border-bottom-width: 3px" }
+
+  %p should support various heights:
+  .style-guide__example-block
+    .divider-content-block.divider-content-block--small
+      .divider-content-block__line{ style: "border-bottom-style: dashed; border-bottom-width: 3px" }
+
+  .style-guide__example-block
+    .divider-content-block.divider-content-block--small
+      .divider-content-block__line.hidden{ style: "border-bottom-style: dashed; border-bottom-width: 3px" }
+
+  .style-guide__example-block
+    .divider-content-block.divider-content-block--medium
+      .divider-content-block__line{ style: "border-bottom-style: double; border-bottom-width: 3px" }
+
+  .style-guide__example-block
+    .divider-content-block.divider-content-block--medium
+      .divider-content-block__line.hidden{ style: "border-bottom-style: double; border-bottom-width: 3px" }
+
+  .style-guide__example-block
+    .divider-content-block.divider-content-block--large
+      .divider-content-block__line{ style: "border-bottom-style: solid; border-bottom-width: 3px" }
+
+  .style-guide__example-block
+    .divider-content-block.divider-content-block--large
+      .divider-content-block__line.hidden{ style: "border-bottom-style: solid; border-bottom-width: 3px" }

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

@@ -0,0 +1,29 @@
+#hero-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'hero_content_block')
+
+  %p A content block that displays an image with a positionable button overlay.
+
+  %p In the following examples:
+  %ul
+    %li The example block has been centered
+    %li An intrinsic ratio has been manually applied to each image.
+
+  - %w(top-left top-center top-right middle-left middle-center middle-right bottom-left bottom-center bottom-right).each do |position|
+    %p should display a <b>regular button</b> @ <b>#{position.gsub('-', ', ')}</b>
+    .style-guide__example-block
+      .hero-content-block
+        .hero-content-block__image-container{ style: "padding-bottom: 48.958333333%" }= image_tag 'workarea/storefront/style_guide_light_banner.png', alt: '', class: 'hero-content-block__image'
+        .hero-content-block__button{ class: "hero-content-block__button--#{position}" }= link_to 'Hero Action', '#', class: 'button'
+
+    %p should display a <b>large button</b> @ <b>#{position.gsub('-', ', ')}</b>
+    .style-guide__example-block
+      .hero-content-block
+        .hero-content-block__image-container{ style: "padding-bottom: 48.958333333%" }= image_tag 'workarea/storefront/style_guide_light_banner.png', alt: '', class: 'hero-content-block__image'
+        .hero-content-block__button{ class: "hero-content-block__button--#{position}" }= link_to 'Hero Action', '#', class: 'button button--large'
+
+    %p should display a <b>small button</b> @ <b>#{position.gsub('-', ', ')}</b>
+    .style-guide__example-block
+      .hero-content-block
+        .hero-content-block__image-container{ style: "padding-bottom: 48.958333333%" }= image_tag 'workarea/storefront/style_guide_light_banner.png', alt: '', class: 'hero-content-block__image'
+        .hero-content-block__button{ class: "hero-content-block__button--#{position}" }= link_to 'Hero Action', '#', class: 'button button--small'

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

@@ -0,0 +1,10 @@
+#html-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'html_content_block')
+
+  %p A content block that wraps user-set HTML
+
+  .style-guide__example-block
+    .html-content-block
+      %h1 HTML Content Block
+      %p Decay Shibuya euro-pop weathered rebar saturation point nano-vehicle carbon modem papier-mache 3D-printed corrupted RAF. Soul-delay systemic shrine render-farm computer alcohol tattoo post-voodoo god free-market sub-orbital DIY assassin. Pen katana monofilament papier-mache garage euro-pop apophenia drone bicycle hacker A.I. systema camera advert. Table beef noodles augmented reality military-grade hotdog tiger-team market computer. Boat range-rover dead film assault crypto-uplink. Range-rover-ware papier-mache franchise sign saturation point Kowloon realism carbon film. Rebar artisanal woman sensory bicycle courier range-rover Chiba free-market sprawl car table tube BASE jump soul-delay tanto.

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

@@ -0,0 +1,28 @@
+#image-and-text-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'image_and_text_content_block')
+
+  %p A content block that provides layout for an image and accompanying text.
+
+  - %w(left right).each do |image_alignment|
+    %p should display the <strong>image on the #{image_alignment}</strong>:
+    .style-guide__example-block
+      .image-and-text-content-block
+        .image-and-text-content-block__image-container{ class: "image-and-text-content-block__image-container--#{image_alignment}" }
+          = image_tag 'workarea/core/placeholder.png', size: '100x100', class: 'image-and-text-content-block__image'
+        .image-and-text-content-block__text Geodesic tower knife military-grade katana sensory courier fetishism singularity rifle pistol ablative warehouse media table woman. Industrial grade sub-orbital garage franchise futurity hacker corrupted office city military-grade tank-traps-space. Boat assault savant knife kanji convenience store decay. Savant drugs hacker industrial grade digital bicycle ablative dissident monofilament Legba.
+
+    %p should support a <strong>linked image on the #{image_alignment}</strong>:
+    .style-guide__example-block
+      .image-and-text-content-block
+        .image-and-text-content-block__image-container{ class: "image-and-text-content-block__image-container--#{image_alignment}" }
+          = link_to image_tag('workarea/core/placeholder.png', size: '100x100', class: 'image-and-text-content-block__image'), '#', class: 'image-and-text-content-block__image-link'
+        .image-and-text-content-block__text Geodesic tower knife military-grade katana sensory courier fetishism singularity rifle pistol ablative warehouse media table woman. Industrial grade sub-orbital garage franchise futurity hacker corrupted office city military-grade tank-traps-space. Boat assault savant knife kanji convenience store decay. Savant drugs hacker industrial grade digital bicycle ablative dissident monofilament Legba.
+
+    - %w(left right center justify).each do |text_alignment|
+      %p should support <strong>text align #{text_alignment}</strong> when the <strong>image is aligned #{image_alignment}</strong>:
+      .style-guide__example-block
+        .image-and-text-content-block
+          .image-and-text-content-block__image-container{ class: "image-and-text-content-block__image-container--#{image_alignment}" }
+            = link_to image_tag('workarea/core/placeholder.png', size: '100x100', class: 'image-and-text-content-block__image'), '#', class: 'image-and-text-content-block__image-link'
+          .image-and-text-content-block__text{ style: "text-align: #{text_alignment}" } Geodesic tower knife military-grade katana sensory courier fetishism singularity rifle pistol ablative warehouse media table woman. Industrial grade sub-orbital garage franchise futurity hacker corrupted office city military-grade tank-traps-space. Boat assault savant knife kanji convenience store decay. Savant drugs hacker industrial grade digital bicycle ablative dissident monofilament Legba.

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

@@ -0,0 +1,38 @@
+#image-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'image_content_block')
+
+  %p Styles an image content block which may contain a link.
+
+  %p should align the image <strong>left</strong>:
+  .style-guide__example-block
+    .image-content-block.image-content-block--left
+      = image_tag 'workarea/storefront/style_guide_light_banner.png', alt: '', class: 'image-content-block__image'
+
+  %p should align the image <strong>center</strong>:
+  .style-guide__example-block
+    .image-content-block.image-content-block--center
+      = image_tag 'workarea/storefront/style_guide_light_banner.png', alt: '', class: 'image-content-block__image'
+
+  %p should align the image <strong>right</strong>:
+  .style-guide__example-block
+    .image-content-block.image-content-block--right
+      = image_tag 'workarea/storefront/style_guide_light_banner.png', alt: '', class: 'image-content-block__image'
+
+  %p should align the <strong>linked</strong> image <strong>left</strong>:
+  .style-guide__example-block
+    .image-content-block.image-content-block--left
+      = link_to '#', class: 'image-content-block__link' do
+        = image_tag 'workarea/storefront/style_guide_light_banner.png', alt: '', class: 'image-content-block__image'
+
+  %p should align the <strong>linked</strong> image <strong>center</strong>:
+  .style-guide__example-block
+    .image-content-block.image-content-block--center
+      = link_to '#', class: 'image-content-block__link' do
+        = image_tag 'workarea/storefront/style_guide_light_banner.png', alt: '', class: 'image-content-block__image'
+
+  %p should align the <strong>linked</strong> image <strong>right</strong>:
+  .style-guide__example-block
+    .image-content-block.image-content-block--right
+      = link_to '#', class: 'image-content-block__link' do
+        = image_tag 'workarea/storefront/style_guide_light_banner.png', alt: '', class: 'image-content-block__image'

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

@@ -0,0 +1,17 @@
+#image-group-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'image_group_content_block')
+
+  %p A content block responsible for the tiled layout of up to 6 images.
+
+  %p A red border has been added to the following examples in order to give clearer distinction between images.
+
+  - (1..6).each do |i|
+    %p should support <strong>#{pluralize(i, 'image')}</strong>:
+    .style-guide__example-block
+      .image-group-content-block
+        .grid.grid--flush.grid--center
+          - i.times do
+            .grid__cell.grid__cell--50-at-medium
+              = link_to '#', class: 'image-group-content-block__link' do
+                = image_tag 'workarea/core/placeholder.png', class: 'image-group-content-block__image', style: 'width: 960px; height: 360px; border: 1px solid red'

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

@@ -0,0 +1,18 @@
+#inline-form.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'inline_form')
+
+  %p Handles the layout of a form as a simple grid, displaying the form control with a submit button to the left side.
+
+  %p Expects two children with a class of <code>inline-form__cell</code>, which wrap the form control and submit button.
+
+  %p Expects a #{link_to_style_guide('components', 'value', true)} component as a child, to handle the layout of the form control, errors, and notes.
+
+  .style-guide__example-block
+    = form_tag '#', class: 'inline-form' do
+      .inline-form__cell
+        .value
+          = text_field_tag 'wl_inline_form_field', nil, class: 'text-box'
+          %span.value__error Error Message Text
+      %p.inline-form__cell= button_tag 'Submit', class: 'button'
+

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

@@ -0,0 +1,106 @@
+#loading.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'loading')
+
+  %p Displays a general purpose loading/busy indicator.
+
+  %p Falls back to an animated gif if CSS animations is not supported by the browser.
+
+  .style-guide__example-block
+    .loading
+      = I18n.t('workarea.messages.loading')
+
+  .style-guide__unit-test
+
+    %h4 Unit Test
+
+    %p should work with <code>div</code> (block-level) elements
+    .style-guide__example-block
+      .loading
+        = I18n.t('workarea.messages.loading')
+
+    %p should work with <code>p</code> (block-level) elements
+    .style-guide__example-block
+      %p.loading
+        = I18n.t('workarea.messages.loading')
+
+    %p should work with <code>span</code> (inline) elements
+    .style-guide__example-block
+      %span.loading
+        = I18n.t('workarea.messages.loading')
+
+#loading--fill-parent.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'loading__fill_parent')
+
+  %p Displays a general purpose #{link_to_style_guide('components', 'loading', true)}/busy indicator that fills a relatively-positioned container.
+
+  - relative_styles = 'position: relative; height: 200px;'
+
+  %p The example containers below have the following styles applied: <code>#{relative_styles}</code>
+
+  .style-guide__example-block{ style: relative_styles }
+    .loading.loading--fill-parent
+
+  .style-guide__unit-test
+
+    %h4 Unit Test
+
+    %p should work with <code>div</code> (block-level) elements
+    .style-guide__example-block{ style: relative_styles }
+      .loading.loading--fill-parent
+
+    %p should work with <code>p</code> (block-level) elements
+    .style-guide__example-block{ style: relative_styles }
+      %p.loading.loading--fill-parent
+
+    %p should work with <code>span</code> (inline) elements
+    .style-guide__example-block{ style: relative_styles }
+      %span.loading.loading--fill-parent
+
+#loading--inline.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'loading__inline')
+
+  %p Displays an inline loading/busy indicator.
+
+  .style-guide__example-block
+    %span{class: 'loading loading--inline'}= I18n.t('workarea.messages.loading')
+
+  .style-guide__unit-test
+
+    %h4 Unit Test
+
+    %p should work with <code>button</code> elements and the loading--light modifier
+    .style-guide__example-block
+      = button_tag class: 'button' do
+        %span{class: 'loading loading--inline loading--light'}= I18n.t('workarea.messages.loading')
+
+    %p should work with <code>div</code> (block-level) elements
+    .style-guide__example-block
+      %div.loading.loading--inline= I18n.t('workarea.messages.loading')
+
+    %p should work with <code>p</code> (block-level) elements
+    .style-guide__example-block
+      %p{class: 'loading loading--inline'}= I18n.t('workarea.messages.loading')
+
+    %p should work with <code>span</code> (inline) elements
+    .style-guide__example-block
+      %span{class: 'loading loading--inline'}= I18n.t('workarea.messages.loading')
+
+    %p should work with <code>h1</code> (inline) elements
+    .style-guide__example-block
+      %h1{class: 'loading loading--inline'}= I18n.t('workarea.messages.loading')
+
+#loading--light.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'loading__light')
+
+  %p should change the indicator to a light option:
+
+  .style-guide__example-block{ style: 'background: black; color: white;' }
+    .loading.loading--light
+      = I18n.t('workarea.messages.loading')
+
+  .style-guide__example-block{ style: 'background: black; color: white;' }
+    %span{class: 'loading loading--inline loading--light'}= I18n.t('workarea.messages.loading')

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

@@ -0,0 +1,45 @@
+#message.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'message')
+
+  %p Displays a general-use message with an icon.
+
+  %p Progressively enhanced by <code>WORKAREA.messages</code> to add a dismiss button.
+
+  .style-guide__example-block
+    = render_message 'info' do
+      Lorem ipsum dolor sit amet consectetur adipisicing elit.
+      = link_to 'Message link', '#'
+
+#message--error.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'message__error')
+
+  %p Modifies #{link_to_style_guide('components', 'message', true)} to change the color scheme and icon.
+
+  .style-guide__example-block
+    = render_message 'error' do
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      = link_to 'Message link', '#'
+
+#message--success.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'message__success')
+
+  %p Modifies #{link_to_style_guide('components', 'message', true)} to change the color scheme and icon.
+
+  .style-guide__example-block
+    = render_message 'success' do
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
+      = link_to 'Message link', '#'
+
+#message--warning.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'message__warning')
+
+  %p Modifies #{link_to_style_guide('components', 'message', true)} to change the color scheme and icon.
+
+  .style-guide__example-block
+    = render_message 'warning' do
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit.
+      = link_to 'Message link', '#'

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
+        = label_tag 'toggle_mobile_filters', 'Filter Results', class: 'button button--large'
+      .mobile-filters__content
+        %ol
+          %li Filter 1
+          %li Filter 2
+          %li Filter 3

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

@@ -0,0 +1,24 @@
+#pagination.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'pagination')
+
+  %p Wraps a list of results intended to be paginated.
+
+  %p should center the pagination button:
+  .style-guide__example-block
+    .pagination
+      .grid
+        .grid__cell.grid__cell--25
+          .align-center
+            %span.heading.heading--1 Item 1
+        .grid__cell.grid__cell--25
+          .align-center
+            %span.heading.heading--1 Item 2
+        .grid__cell.grid__cell--25
+          .align-center
+            %span.heading.heading--1 Item 3
+        .grid__cell.grid__cell--25
+          .align-center
+            %span.heading.heading--1 Item 4
+      .pagination__button
+        = link_to 'Load More', '#', class: 'button'

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

@@ -0,0 +1,19 @@
+#payment-icon.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'payment_icon')
+
+  %p Displays a generic payment card icon.
+
+  .style-guide__example-block
+    = credit_card_issuer_icon('undefined')
+
+- Workarea.config.credit_card_issuers.each do |key, value|
+  .style-guide__subsection{ id: "payment-icon--#{value.dasherize}"}
+
+    %h3= link_to_style_guide('components', "payment_icon__#{value.systemize}")
+
+    %p Displays the #{value} icon.
+
+    .style-guide__example-block
+      = credit_card_issuer_icon(value)
+

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

@@ -0,0 +1,32 @@
+#personalized-recommendations-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'personalized_recommendations_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
+    .personalized-recommendations-content-block
+      .grid
+        - (1..6).each do |i|
+          .grid__cell.grid__cell--50.grid__cell--33-at-medium.grid__cell--16-at-wide
+            .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
+    .personalized-recommendations-content-block
+      %h2.personalized-recommendations-content-block__heading Personalized Recommendations Content Block
+      .grid
+        - (1..6).each do |i|
+          .grid__cell.grid__cell--50.grid__cell--33-at-medium.grid__cell--16-at-wide
+            .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_insights_content_block.html.haml

@@ -0,0 +1,32 @@
+#product-insights-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'product_insights_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-insights-content-block
+      .grid
+        - (1..6).each do |i|
+          .grid__cell.grid__cell--50.grid__cell--33-at-medium.grid__cell--16-at-wide
+            .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-insights-content-block
+      %h2.product-insights-content-block__heading Product List Content Block
+      .grid
+        - (1..6).each do |i|
+          .grid__cell.grid__cell--50.grid__cell--33-at-medium.grid__cell--16-at-wide
+            .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}