workarea-admin 3.4.12

data/app/views/workarea/admin/style_guides/components/_search_form.html.haml

@@ -0,0 +1,28 @@
+#search-form.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'search_form')
+
+  %p Provides a search form UI.
+
+  %p should appear full-width, icon on the left:
+  .style-guide__example-block
+    .search-form
+      = text_field_tag :q, params[:q], class: 'search-form__input', id: 'style-guide-search-form', title: 'Title', placeholder: 'Placeholder'
+      = submit_tag 'search', class: 'search-form__button', id: nil
+
+  %p should support <code>form</code> tags by removing bottom margin:
+  .style-guide__example-block
+    %form.search-form
+      = text_field_tag :q, params[:q], class: 'search-form__input', id: 'style-guide-search-form_form-element', title: 'Title', placeholder: 'Placeholder'
+      = submit_tag 'search', class: 'search-form__button', id: nil
+
+
+#search-form--major.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'search_form__major')
+
+  %p should increase the visual weight of the form, adding a bottom margin.
+  .style-guide__example-block
+    %form.search-form.search-form--major
+      = text_field_tag :q, params[:q], class: 'search-form__input', id: 'style-guide-search-form-major', title: 'Title', placeholder: 'Placeholder'
+      = submit_tag 'search', class: 'search-form__button', id: nil

data/app/views/workarea/admin/style_guides/components/_state.html.haml

@@ -0,0 +1,35 @@
+#state.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'state')
+
+  %p Reserves space for a state indicator, which is added by a modifier (below).
+
+  .style-guide__example-block
+    %span.state Lorem ipsum
+
+#state--pending.style-guide__subsection
+
+  %h3 state--pending
+
+  %p Modifies state to change the background color.
+
+  .style-guide__example-block
+    %span.state.state--pending Lorem ipsum
+
+#state--danger.style-guide__subsection
+
+  %h3 state--danger
+
+  %p Modifies state to change the background color.
+
+  .style-guide__example-block
+    %span.state.state--danger Lorem ipsum
+
+#state--done.style-guide__subsection
+
+  %h3 state--done
+
+  %p Modifies state to change the background color.
+
+  .style-guide__example-block
+    %span.state.state--done Lorem ipsum

data/app/views/workarea/admin/style_guides/components/_summary.html.haml

@@ -0,0 +1,66 @@
+#summary.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'summary')
+
+  %p Displays information about an object. Typically used on indexes.
+
+  %p should support photography:
+  .style-guide__example-block
+    = link_to '#', class: 'summary' do
+      .summary__image-container
+        = image_tag 'workarea/core/placeholder.png', size: '200x200', alt: 'Placeholder Image', class: 'summary__image'
+      %span.summary__name Name of Summary
+      .summary__info-container
+        %span.summary__info 13 hours ago
+        %span.summary__info 1234ABCD, 8 SKUS
+      %span.summary__type{ title: 'Summary Type' } Summary Type
+
+  %p should work without an image:
+  .style-guide__example-block
+    = link_to '#', class: 'summary' do
+      %span.summary__name Name of Summary
+      .summary__info-container
+        %span.summary__info 13 hours ago
+        %span.summary__info 1234ABCD, 8 SKUS
+      %span.summary__type{ title: 'Summary Type' } Summary Type
+
+  %p should support multiple lines of secondary info
+  .style-guide__example-block
+    = link_to '#', class: 'summary' do
+      .summary__image-container
+        = image_tag 'workarea/core/placeholder.png', size: '200x200', alt: 'Placeholder Image', class: 'summary__image'
+      %span.summary__name Name of Summary
+      .summary__info-container.summary__info-container--multi-line
+        .summary__info 13 Hours ago
+        .summary__info
+          %p Item #12345
+          %span 3 Variants, 10 Sold
+      %span.summary__type{ title: 'Summary Type' } Summary Type
+
+  %p should retain info if no secondary info is provided:
+  .style-guide__example-block
+    = link_to '#', class: 'summary' do
+      .summary__image-container
+        = image_tag 'workarea/core/placeholder.png', size: '200x200', alt: 'Placeholder Image', class: 'summary__image'
+      %span.summary__name Name of Summary
+      .summary__info-container
+        %span.summary__info 13 hours ago
+      %span.summary__type{ title: 'Summary Type' } Summary Type
+
+
+#summary--inactive.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'summary__inactive')
+
+  %p Indicates that a summary is set as inactive:
+
+  %p should indicate that the object is inactive:
+  .style-guide__example-block
+    = link_to '#', class: 'summary summary--inactive' do
+      .summary__image-container
+        = image_tag 'workarea/core/placeholder.png', size: '200x200', alt: 'Placeholder Image', class: 'summary__image'
+      %span.summary__name Name of Summary
+      .summary__info-container
+        %span.summary__info 13 hours ago
+        %span.summary__info 1234ABCD, 8 SKUS
+      %span.summary__type{ title: 'Summary Type' } Summary Type

data/app/views/workarea/admin/style_guides/components/_svg_icon.html.haml

@@ -0,0 +1,51 @@
+#svg-icon.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'svg_icon')
+
+  %p should resize the icon to a default, medium size:
+  .grid.grid--auto.grid--huge
+    - style_guide_icons.each do |path|
+      .grid__cell
+        .align-center
+          = inline_svg path, title: File.basename(path), class: 'svg-icon'
+          %p= File.basename(path, '.svg')
+
+
+#svg-icon--small.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'svg_icon__small')
+
+  %p should resize the icon to a smaller size:
+  .grid.grid--auto.grid--huge
+    - style_guide_icons.each do |path|
+      .grid__cell
+        .align-center
+          = inline_svg path, title: File.basename(path), class: 'svg-icon svg-icon--small'
+          %p= File.basename(path, '.svg')
+
+
+#svg-icon--large.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'svg_icon__large')
+
+  %p should resize the icon to a larger size:
+  .grid.grid--auto.grid--huge
+    - style_guide_icons.each do |path|
+      .grid__cell
+        .align-center
+          = inline_svg path, title: File.basename(path), class: 'svg-icon svg-icon--large'
+          %p= File.basename(path, '.svg')
+
+
+- %w(off-black blue bright-blue green bright-green red dark-gray gray light-gray off-white white link-color).each do |color|
+  .style-guide__subsection{ id: "svg-icon--#{color}" }
+
+    %h3= link_to_style_guide('components', "svg_icon__#{color}")
+
+    %p should change the fill color of the icon to <strong>#{color}</strong>:
+    .grid.grid--auto.grid--huge{ style: ('background: #303541; color: white; padding-top: 16px;' if color == 'white') }
+      - style_guide_icons.each do |path|
+        .grid__cell
+          .align-center
+            = inline_svg path, title: File.basename(path), class: "svg-icon svg-icon--#{color}"
+            %p= File.basename(path, '.svg')

data/app/views/workarea/admin/style_guides/components/_tabs.html.haml

@@ -0,0 +1,17 @@
+#tabs.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'tabs')
+
+  %p Provides structure & styling necessary for jQuery UI Tabs to work effectively.
+
+  %p Functionality provided by <code>WORKAREA.tabs</code>.
+
+  .style-guide__example-block
+    .tabs
+      .tabs__panel
+        %span.tabs__heading Tab 1
+        %p Panel 1
+      .tabs__panel
+        %span.tabs__heading Tab 2
+        %p Panel 2
+

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

@@ -0,0 +1,147 @@
+#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--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 sort numerical values.  When <code>.text-box--small</code> is used with a number input, some extra width will be added to account for the number spinners.
+
+  %p Should work with <code>input type="text"</code> fields:
+  .style-guide__example-block
+    = text_field_tag 'wl_text_box_small', 'text', class: 'text-box text-box--small'
+
+  %p Should increase the width to accommodate for browser-supplied spinner UI of <code>input type="number"</code> fields:
+  .style-guide__example-block
+    = number_field_tag 'wl_text_box_small_number', 99, class: 'text-box text-box--small'
+
+
+#text-box--medium.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'text_box__medium')
+
+  %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_medium', 19106, class: 'text-box text-box--medium'
+
+
+#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__code', true)} and #{link_to_style_guide('components', 'text_box__multi_line', true)}.
+
+  .style-guide__example-block
+    = text_field_tag 'wl_text_box_wide', 'Value', class: 'text-box text-box--wide'
+
+
+#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, and frequently conjoined with the #{link_to_style_guide('components', 'text_box__code', true)} class.
+
+  .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--code.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'text_box__code')
+
+  %p Changes the #{link_to_style_guide('components', 'text_box', true)} to display a monospaced font. Typically used with <code>textarea</code> elements for displaying or editing blocks of code.
+
+  .style-guide__example-block
+    = text_area_tag 'wl_text_box_code_blank', nil, class: 'text-box text-box--code'
+  .style-guide__example-block
+    = text_area_tag 'wl_text_box_code_placeholder', nil, class: 'text-box text-box--code', placeholder: 'Placeholder'
+  .style-guide__example-block
+    = text_area_tag 'wl_text_box_code_value', "Value line 1\nValue line 2\nValue line 3\nValue line 4\nValue line 5\nValue line 6", class: 'text-box text-box--code'
+
+
+#text-box--i18n.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'text_box__i18n')
+
+  %p Adds a internationalization icon to the left of the #{link_to_style_guide('components', 'text_box', true)}.
+
+  %p These styles are conditionally output, based on if a class of <code>i18n</code> has been found within this class's ancestor tree.
+
+  .style-guide__example-block
+    .i18n
+      = text_field_tag 'wl_text_box_blank_i18n', nil, class: 'text-box text-box--i18n'
+
+  .style-guide__example-block
+    .i18n
+      = text_area_tag 'wl_text_box_multi_line_blank_i18n', nil, class: 'text-box text-box--multi-line text-box--i18n'
+
+  .style-guide__example-block
+    .i18n
+      .wysiwyg{ data: { wysiwyg: '' } }=text_area_tag 'wysiwyg', nil, id: nil, class: 'text-box text-box--multi-line text-box--i18n'
+
+  %p The modifiers <code>textbox--small</code>, <code>textbox--medium</code>, <code>textbox--large</code> are getting a bigger width to keep the same fillable size.
+
+  .style-guide__example-block
+    .i18n
+      = text_field_tag 'wl_text_box_i18n_small_blank', '1999,99', class: 'text-box text-box--small text-box--i18n'
+      = text_field_tag 'wl_text_box_small_blank', '1999,99', class: 'text-box text-box--small'
+      = number_field_tag 'wl_text_box_number_i18_small_blank', '12345678', class: 'text-box text-box--small text-box--i18n'
+      = number_field_tag 'wl_text_box_number_small_blank', '12345678', class: 'text-box text-box--small'
+
+  .style-guide__example-block
+    .i18n
+      = text_field_tag 'wl_text_box_i18n_medium_blank', 'sku-56789-1234567', class: 'text-box text-box--medium text-box--i18n'
+      = text_field_tag 'wl_text_box_medium_blank', 'sku-56789-1234567', class: 'text-box text-box--medium'
+
+  .style-guide__example-block
+    .i18n
+      = text_field_tag 'wl_text_box_i18n_wide_blank', 'sku-Z2lkOi8vZHVtbXktYXBwL1dvcmthcmVhil', class: 'text-box text-box--wide text-box--i18n'
+      = text_field_tag 'wl_text_box_wide_blank', 'sku-Z2lkOi8vZHVtbXktYXBwL1dvcmthcmVhil', class: 'text-box text-box--wide'
+
+#text-box--valid.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'text_box__valid')
+
+  %p Indicates that the text box is in a valid state.
+
+  %p should add a green check to the right of the text box:
+  .style-guide__example-block
+    = text_field_tag 'wl_text_box_blank_valid', nil, class: 'text-box text-box--valid'
+
+
+#text-box--invalid.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'text_box__invalid')
+
+  %p Indicates that the text box is in an invalid state.
+
+  %p should make it clear the text-box is invalid.
+  .style-guide__example-block
+    = text_field_tag 'wl_text_box_blank_invalid', nil, class: 'text-box text-box--invalid'

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

@@ -0,0 +1,58 @@
+#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 support an icon
+  .style-guide__example-block
+    = button_tag class: 'text-button', type: 'button' do
+      Text Button
+      = inline_svg('workarea/core/icon.svg', class: 'text-button__icon')
+
+  %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 elements wrapped in an <code>a</code> element:
+  .style-guide__example-block
+    = link_to '#' do
+      %span.text-button Span Text Button
+
+#text-button--create.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'text_button__create')
+
+  %p should change the color of the component
+  .style-guide__example-block
+    = button_tag 'Text Button', class: 'text-button text-button--create', type: 'button'
+
+  .style-guide__example-block
+    = button_tag class: 'text-button text-button--create', type: 'button' do
+      Text Button
+      = inline_svg('workarea/core/icon.svg', class: 'text-button__icon')
+
+#text-button--destroy.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'text_button__destroy')
+
+  %p should change the color of the component
+  .style-guide__example-block
+    = button_tag 'Text Button', class: 'text-button text-button--destroy', type: 'button'
+
+  .style-guide__example-block
+    = button_tag class: 'text-button text-button--destroy', type: 'button' do
+      Text Button
+      = inline_svg('workarea/core/icon.svg', class: 'text-button__icon')

data/app/views/workarea/admin/style_guides/components/_toggle_button.html.haml

@@ -0,0 +1,59 @@
+#toggle-button.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'toggle_button')
+
+  %p Provides an alternate UI for selecting binary radio buttons.
+
+  %p Progressively enhanced by the <code>WORKAREA.toggleButtons</code> module, which provides additional functionality if a <code>[data-toggle-button]</code> attribute is found in addition to the component's class name.
+
+  %p <strong>Note:</strong> Requires a specific order of radio buttons and labels be maintained:
+
+  %ol
+    %li Positive radio input
+    %li Label with positive text, <code>for</code> attribute points to negative radio input ID
+    %li Negative radio input
+    %li Label with negative text, <code>for</code> attribute points to positive radio input ID
+
+  %p The order of positive and negative can change, but they must always be grouped together. In other words 1 & 2 (in the above list) can swap with 3 & 4
+
+  %p Default example:
+  .style-guide__example-block
+    .toggle-button
+      .toggle-button__switch
+        = radio_button 'toggle_1', nil, 'yes', class: 'toggle-button__input toggle-button__input--positive'
+        = label_tag 'toggle_1__no', 'Yes', class: 'toggle-button__label toggle-button__label--positive'
+        = radio_button 'toggle_1', nil, 'no', checked: true, class: 'toggle-button__input toggle-button__input--negative'
+        = label_tag 'toggle_1__yes', 'No', class: 'toggle-button__label toggle-button__label--negative'
+
+    .toggle-button
+      .toggle-button__switch
+        = radio_button 'toggle_2', nil, 'yes', checked: true, class: 'toggle-button__input toggle-button__input--positive'
+        = label_tag 'toggle_2__no', 'Yes', class: 'toggle-button__label toggle-button__label--positive'
+        = radio_button 'toggle_2', nil, 'no', class: 'toggle-button__input toggle-button__input--negative'
+        = label_tag 'toggle_2__yes', 'No', class: 'toggle-button__label toggle-button__label--negative'
+
+  %p Progressively enhanced:
+  .style-guide__example-block
+    .toggle-button{ data: { toggle_button: '' } }
+      .toggle-button__switch
+        = radio_button 'toggle_3', nil, 'yes', class: 'toggle-button__input toggle-button__input--positive'
+        = label_tag 'toggle_3__no', 'Yes', class: 'toggle-button__label toggle-button__label--positive'
+        = radio_button 'toggle_3', nil, 'no', checked: true, class: 'toggle-button__input toggle-button__input--negative'
+        = label_tag 'toggle_3__yes', 'No', class: 'toggle-button__label toggle-button__label--negative'
+      .toggle-button__more.toggle-button__more--to-right{ data: { toggle_button_positive_element: '' } }
+        = select_tag "activate", options_for_select([ 'now', 'with Release 1', 'with Release 2' ], 'now')
+
+  .style-guide__example-block
+    .toggle-button{ data: { toggle_button: '' } }
+      .toggle-button__switch
+        = radio_button 'toggle_4', nil, 'yes', class: 'toggle-button__input toggle-button__input--positive'
+        = label_tag 'toggle_4__no', 'Yes', class: 'toggle-button__label toggle-button__label--positive'
+        = radio_button 'toggle_4', nil, 'no', checked: true, class: 'toggle-button__input toggle-button__input--negative'
+        = label_tag 'toggle_4__yes', 'No', class: 'toggle-button__label toggle-button__label--negative'
+      .toggle-button__more.toggle-button__more--below{ data: { toggle_button_positive_element: '' } }
+        %span.toggle-button__note Definition: an affirmative answer or decision, especially in voting.
+      .toggle-button__more.toggle-button__more--below{ data: { toggle_button_negative_element: '' } }
+        %span.toggle-button__note Definition: a negative answer or decision, as in voting.
+
+
+