workarea-storefront 3.4.12

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

@@ -0,0 +1,73 @@
+#text-box.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'text_box')
+
+  %p Provides uniform styling for <code>input</code> elements.
+
+  .style-guide__example-block
+    = text_field_tag 'wl_text_box_blank', nil, class: 'text-box'
+  .style-guide__example-block
+    = text_field_tag 'wl_text_box_placeholder', nil, class: 'text-box', placeholder: 'Placeholder'
+  .style-guide__example-block
+    = text_field_tag 'wl_text_box_value', 'Value', class: 'text-box'
+  .style-guide__example-block
+    = number_field_tag 'wl_text_box_number', 99, class: 'text-box'
+
+  %p should style the disabled state:
+  .style-guide__example-block
+    = text_field_tag 'wl_disabled_text_box_blank', nil, class: 'text-box', disabled: true
+  .style-guide__example-block
+    = text_field_tag 'wl_disabled_text_box_placeholder', nil, class: 'text-box', placeholder: 'Placeholder', disabled: true
+  .style-guide__example-block
+    = text_field_tag 'wl_disabled_text_box_value', 'Value', class: 'text-box', disabled: true
+  .style-guide__example-block
+    = number_field_tag 'wl_disabled_text_box_number', 99, class: 'text-box', disabled: true
+
+#text-box--multi-line.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'text_box__multi_line')
+
+  %p Increases the height of a #{link_to_style_guide('components', 'text_box', true)}. Typically used with <code>textarea</code> elements.
+
+  .style-guide__example-block
+    = text_area_tag 'wl_text_box_multi_line_blank', nil, class: 'text-box text-box--multi-line'
+  .style-guide__example-block
+    = text_area_tag 'wl_text_box_multi_line_placeholder', nil, class: 'text-box text-box--multi-line', placeholder: 'Placeholder'
+  .style-guide__example-block
+    = text_area_tag 'wl_text_box_multi_line_value', "Value line 1\nValue line 2\nValue line 3\nValue line 4\nValue line 5\nValue line 6", class: 'text-box text-box--multi-line'
+
+#text-box--small.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'text_box__small')
+
+  %p Reduces width of a #{link_to_style_guide('components', 'text_box', true)}. Used mostly for short strings of text, or longer numerical values.
+
+  .style-guide__example-block
+    = text_field_tag 'wl_text_box_small', 19106, class: 'text-box text-box--small'
+
+#text-box--wide.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'text_box__wide')
+
+  %p Increases width of a #{link_to_style_guide('components', 'text_box', true)}. Frequently used with #{link_to_style_guide('components', 'text_box__multi_line', true)}.
+
+  .style-guide__example-block
+    = text_field_tag 'wl_text_box_wide', nil, class: 'text-box text-box--wide'
+
+#text-box--x-small.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'text_box__x_small')
+
+  %p Reduces width of a #{link_to_style_guide('components', 'text_box', true)}. Used mostly for sort numerical values.
+
+  .style-guide__example-block
+    = number_field_tag 'wl_text_box_x_small', 99, class: 'text-box text-box--x-small'
+
+#text-box--full.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'text_box__full')
+
+  %p Increases width to fill parent element
+
+  .style-guide__example-block
+    = number_field_tag 'wl_text_box_full', 99, class: 'text-box text-box--full'

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

@@ -0,0 +1,26 @@
+#text-button.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'text_button')
+
+  %p Displays an element as a bold link, underlined on hover. Primarily used for styling secondary actions, like "Cancel" next to a "Submit" action.
+
+  %p should work with <code>button[type=button]</code> elements:
+  .style-guide__example-block
+    = button_tag 'Text Button', class: 'text-button', type: 'button'
+
+  %p should work with <code>button[type=submit]</code> elements:
+  .style-guide__example-block
+    = button_tag 'Text Button', class: 'text-button', type: 'submit'
+
+  %p should work with <code>input[type=submit]</code> elements:
+  .style-guide__example-block
+    = submit_tag 'Text Button', class: 'text-button'
+
+  %p should work with <code>a</code> elements:
+  .style-guide__example-block
+    = link_to 'Text Button', '#', class: 'text-button'
+
+  %p should style non-interactive buttons wrapped in an <code>a</code> element:
+  .style-guide__example-block
+    = link_to '#' do
+      %span.text-button Span Text Button

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

@@ -0,0 +1,10 @@
+#text-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'text_content_block')
+
+  %p A content block that wraps user-set text
+
+  .style-guide__example-block
+    .text-content-block
+      %h1 Text Content Block
+      %p Cardboard shanty town tiger-team Tokyo augmented reality boy computer spook cyber-dead garage refrigerator carbon vinyl DIY singularity. Neural euro-pop hacker vinyl plastic franchise corrupted crypto-network bomb rebar sensory silent. Advert convenience store footage sensory knife Tokyo RAF singularity artisanal dead Legba neon office garage paranoid computer. Courier human plastic concrete 3D-printed boat cartel drone man assault stimulate vinyl. Digital 3D-printed nano-military-grade corporation dolphin monofilament advert vinyl semiotics tank-traps boat savant numinous. Decay hacker corrupted shoes augmented reality post-cartel warehouse long-chain hydrocarbons-space woman free-market. Drone hotdog camera motion denim computer vinyl shoes corrupted office.

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

@@ -0,0 +1,11 @@
+#ui-autocomplete.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'ui_autocomplete')
+
+  %p An example of the default jQuery UI autocomplete widget instance.
+
+  %p Enter the string "sweater" in the field below to see an example.
+
+  .style-guide__example-block
+    = text_field_tag 'ui_autocomplete_field', nil, class: 'text-box', data: { style_guide_autocomplete_field: '' }
+

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

@@ -0,0 +1,5 @@
+#ui-dialog.style-guide__subsection
+
+  %p An example of the default jQuery UI dialog widget instance.
+
+  %p Click here to view the example: #{link_to_style_guide('components', 'ui_dialog', true)}

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

@@ -0,0 +1,5 @@
+#ui-dialog-image.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'ui_dialog_image')
+
+  %p An example of the default jQuery UI dialog widget instance, but specifically styled to house an image.

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

@@ -0,0 +1,6 @@
+#ui-helper-hidden-accessible.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'ui_helper_hidden_accessible')
+
+  %p This component is used by many jQuery UI widgets. It simply extends the #{link_to_style_guide('trumps', 'visually_hidden', true)} trump.
+

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

@@ -0,0 +1,70 @@
+#value.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'value')
+
+  %p Manages the layout of a form field, note, or error displayed for the field.
+
+  .style-guide__example-block
+    .value
+      = text_field_tag 'wl_value_text_field', nil, class: 'value__error text-box'
+      %span.value__error Error Message Text
+      = link_to 'What\'s This?', '#', class: 'value__note'
+
+  .style-guide__unit-test
+
+    %h4 Unit Test
+
+    %p should work with a <code>div</code> (block-level) element, containing only a form field
+    .style-guide__example-block
+      .value
+        = text_field_tag 'wl_value_text_field_div', nil, class: 'text-box'
+
+    %p should work with a <code>span</code> (inline) element, containing only a form field
+    .style-guide__example-block
+      %span.value
+        = text_field_tag 'wl_value_text_field_span', nil, class: 'text-box'
+
+    %p should work with a <code>p</code> (block-level) element, containing only a form field
+    .style-guide__example-block
+      %p.value
+        = text_field_tag 'wl_value_text_field_p', nil, class: 'text-box'
+
+    %p should work with a <code>div</code> (block-level) element, containing a form field and a note
+    .style-guide__example-block
+      .value
+        = text_field_tag 'wl_value_text_field_div_note', nil, class: 'text-box'
+        %span.value__note This is a note
+
+    %p should work with a <code>span</code> (inline) element, containing a form field and a note
+    .style-guide__example-block
+      %span.value
+        = text_field_tag 'wl_value_text_field_span_note', nil, class: 'text-box'
+        %span.value__note This is a note
+
+    %p should work with a <code>p</code> (block-level) element, containing a form field and a note
+    .style-guide__example-block
+      %p.value
+        = text_field_tag 'wl_value_text_field_p_note', nil, class: 'text-box'
+        %span.value__note This is a note
+
+    %p should work with a <code>div</code> (block-level) element, containing a form field, error message, and a note with a link:
+    .style-guide__example-block
+      .value
+        = text_field_tag 'wl_value_text_field_div_error', nil, class: 'value__error text-box'
+        %span.value__error Error Message Text
+        = link_to 'What\'s This?', '#', class: 'value__note'
+
+    %p should work with a <code>span</code> (inline) element, containing a form field, error message, and a note with a link:
+    .style-guide__example-block
+      %span.value
+        = text_field_tag 'wl_value_text_field_span_error', nil, class: 'value__error text-box'
+        %span.value__error Error Message Text
+        = link_to 'What\'s This?', '#', class: 'value__note'
+
+    %p should work with a <code>p</code> (block-level) element, containing a form field, error message, and a note with a link:
+    .style-guide__example-block
+      %p.value
+        = text_field_tag 'wl_value_text_field_p_error', nil, class: 'value__error text-box'
+        %span.value__error Error Message Text
+        = link_to 'What\'s This?', '#', class: 'value__note'
+

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

@@ -0,0 +1,21 @@
+#video-and-text-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'video_and_text_content_block')
+
+  %p A content block that provides layout for a video and accompanying text.
+
+  - %w(left right).each do |video_alignment|
+    %p should display the <strong>video on the #{video_alignment}</strong>:
+    .style-guide__example-block
+      .video-and-text-content-block
+        .video-and-text-content-block__video-container{ class: "video-and-text-content-block__video-container--#{video_alignment}" }
+          %iframe{ width: 560, height: 315, frameborder: 0, allowfullscreen: true, src: ('https://www.youtube.com/embed/A21I70ggSQw' unless Rails.env.test?)}
+        .video-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>video is aligned #{video_alignment}</strong>:
+      .style-guide__example-block
+        .video-and-text-content-block
+          .video-and-text-content-block__video-container{ class: "video-and-text-content-block__video-container--#{video_alignment}" }
+            %iframe{ width: 560, height: 315, frameborder: 0, allowfullscreen: true, src: ('https://www.youtube.com/embed/A21I70ggSQw' unless Rails.env.test?)}
+          .video-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/_video_content_block.html.haml

@@ -0,0 +1,11 @@
+#video-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'video_content_block')
+
+  %p A content block that wraps an <code>iframe</code> embed code.
+
+  %p should preserve video ratio as it scales:
+  .style-guide__example-block
+    .video-content-block
+      .video-content-block__responsive-frame{ style: 'padding-bottom: 56.25%; height: 0;' }
+        %iframe{ width: 560, height: 315, frameborder: 0, allowfullscreen: true, src: ('https://www.youtube.com/embed/A21I70ggSQw' unless Rails.env.test?)}

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

@@ -0,0 +1,87 @@
+.style-guide.view
+
+  = render 'navigation'
+
+  .style-guide__main
+
+    %h1 Style Guide
+
+    %p This page is intended to showcase the visual aspects of each layer of the CSS architecture.
+
+
+    #settings.style-guide__section
+
+      %h2 Settings
+
+      %p This layer contains global variables for use throughout the application. These are not the only variables available to use. Be sure to familiarize yourself with the code to see what else might be at your disposal.
+
+      - partial_paths_for('settings').each do |partial|
+        = render partial
+
+      = append_partials('storefront.style_guide_settings')
+
+
+    #base.style-guide__section
+
+      %h2 Base
+
+      %p This layer styles standalone elements.
+
+      - partial_paths_for('base').each do |partial|
+        = render partial
+
+      = append_partials('storefront.style_guide_base')
+
+
+    #typography.style-guide__section
+
+      %h2 Typography
+
+      %p Typography styles define global patterns for paragraphs, headings, links and other generic text elements.
+
+      %p Typography styles provide element selectors as well as <code>%placeholder-selectors</code> and <code>.class-selectors</code>. This allows you to use class selectors to force an element to use type styles for a different element, for example making headings appear larger, or making non-heading elements appear to be headings.
+
+      - partial_paths_for('typography').each.each do |partial|
+        = render partial
+
+      = append_partials('storefront.style_guide_typography')
+
+
+    #objects.style-guide__section
+
+      %h2 Objects
+
+      %p Objects are "design-free" patterns that can be applied throughout the application. If you notice yourself writing the same structural code over and over you'll probably want to abstract it into an object.
+
+      %p Objects are offered as both <code>%placeholder-selectors</code> and <code>.class-selectors</code>. They appear higher in the code code to ensure that, if you use an object, you'll be able to override it's styles contextually, if needed.
+
+      - partial_paths_for('objects').each.each do |partial|
+        = render partial
+
+      = append_partials('storefront.style_guide_objects')
+
+
+    #components.style-guide__section
+
+      %h2 Components
+
+      %p Components are the heavily designed building blocks of the site. They can include specific chunks of the UI (like the <code>page-header</code>) or reusable chunks of the UI (like a <code>button</code>). Below are the reusable patterns defined in the components layer:
+
+      - partial_paths_for('components').each.each do |partial|
+        = render partial
+
+      = append_partials('storefront.style_guide_components')
+
+
+    #trumps.style-guide__section
+
+      %h2 Trumps
+
+      %p Trumps are absolute decisions you make with an element. If you say to yourself "No matter what, this element should always X" then you should make a trump for X.
+
+      %p Trumps are offered as both <code>%placeholder-selectors</code> and as <code>.class-selectors</code>. They appear lower in the code to ensure that, if you use a trump, it will ensure that it's styles take precedence, overriding any other styles applied to that element as needed.
+
+      - partial_paths_for('trumps').each.each do |partial|
+        = render partial
+
+      = append_partials('storefront.style_guide_trumps')

data/app/views/workarea/storefront/style_guides/objects/_button_reset.html.haml

@@ -0,0 +1,17 @@
+#button-reset-object.style-guide__subsection
+
+  %h3= link_to_style_guide('objects', 'button_reset')
+
+  %p Resets browser-default button styling.
+
+  %p should work with a <code>button</code> element
+  .style-guide__example-block
+    = button_tag 'Button'
+  .style-guide__example-block
+    = button_tag 'Reset Button', class: 'button-reset'
+
+  %p should work with an <code>input</code> element
+  .style-guide__example-block
+    = submit_tag 'Button'
+  .style-guide__example-block
+    = submit_tag 'Reset Button', class: 'button-reset'

data/app/views/workarea/storefront/style_guides/objects/_inline_list.html.haml

@@ -0,0 +1,20 @@
+#inline-list-object.style-guide__subsection
+
+  %h3= link_to_style_guide('objects', 'inline_list')
+
+  %p Resets the list-specific styling of a <code>ul</code> or <code>ol</code> element, and displays each child <code>li</code> element as <code>inline-block</code>.
+
+  .style-guide__unit-test
+    %h4 Unit Test
+
+    %p should work with <code>ul</code> elements
+    .style-guide__example-block
+      %ul.inline-list
+        - 5.times do |i|
+          %li List Item #{i}
+
+    %p should work with <code>ol</code> elements
+    .style-guide__example-block
+      %ol.inline-list
+        - 5.times do |i|
+          %li List Item #{i}

data/app/views/workarea/storefront/style_guides/objects/_list_reset.html.haml

@@ -0,0 +1,20 @@
+#list-reset-object.style-guide__subsection
+
+  %h3= link_to_style_guide('objects', 'list_reset')
+
+  %p Resets the list-specific styling of a <code>ul</code> or <code>ol</code> element.
+
+  .style-guide__unit-test
+    %h4 Unit Test
+
+    %p should work with <code>ul</code> elements
+    .style-guide__example-block
+      %ul.list-reset
+        - 5.times do |i|
+          %li List Item #{i}
+
+    %p should work with <code>ol</code> elements
+    .style-guide__example-block
+      %ol.list-reset
+        - 5.times do |i|
+          %li List Item #{i}

data/app/views/workarea/storefront/style_guides/objects/_text_field_reset.html.haml

@@ -0,0 +1,11 @@
+#text-field-reset-object.style-guide__subsection
+
+  %h3= link_to_style_guide('objects', 'text_field_reset')
+
+  %p Resets browser-default text-field styling.
+
+  %p should work with a <code>input</code> element
+  .style-guide__example-block
+    = text_field_tag 'Text Field 1', nil, placeholder: 'Text Field'
+  .style-guide__example-block
+    = text_field_tag 'Text Field 2', nil, placeholder: 'Unstyled Text Field', class: 'text-field-reset'

data/app/views/workarea/storefront/style_guides/settings/_color_variables.html.haml

@@ -0,0 +1,21 @@
+#color-variables.style-guide__subsection
+
+  %h3= link_to_style_guide('settings', 'color_variables')
+
+  %p The color palette for the storefront.
+
+  .grid.grid--auto
+    - colors = %w(blue yellow red green white gray light-gray black black-alpha-50 black-alpha-15 white-alpha-50)
+    - colors.each do |color|
+      .grid__cell
+        .style-guide__color
+          .style-guide__color-swatch{ class: "style-guide__color-swatch--#{color}" }
+        $#{color}
+
+  .grid.grid--auto
+    - colors = %w(transparent background-color highlight-color link-color overlay-shadow-color focus-ring-color)
+    - colors.each do |color|
+      .grid__cell
+        .style-guide__color
+          .style-guide__color-swatch{ class: "style-guide__color-swatch--#{color}" }
+        $#{color}

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

@@ -0,0 +1,10 @@
+.style-guide.view
+
+  .grid
+    .grid__cell.grid__cell--20
+
+      = render 'navigation'
+
+    .grid__cell.grid__cell--80
+
+      = render @style_guide_partial