workarea-admin 3.4.12

data/app/views/workarea/admin/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/admin/style_guides/components/_pagination.html.haml

@@ -0,0 +1,156 @@
+#pagination.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'pagination')
+
+  %p Displays a set of pagination controls. Hidden by default unless JavaScript is enabled.
+
+  .style-guide__example-block
+    %ul.pagination
+      %li.pagination__node
+        %span.pagination__navigation.pagination__navigation--disabled Prev
+      %li.pagination__node
+        %strong 1
+      %li.pagination__node
+        = link_to 2, '#', class: 'pagination__link'
+      %li.pagination__node
+        = link_to 'Next', '#', class: 'pagination__navigation'
+
+  %p should work with 2 pages, the first being selected:
+  .style-guide__example-block
+    %ul.pagination
+      %li.pagination__node
+        %span.pagination__navigation.pagination__navigation--disabled Prev
+      %li.pagination__node
+        %strong 1
+      %li.pagination__node
+        = link_to 2, '#', class: 'pagination__link'
+      %li.pagination__node
+        = link_to 'Next', '#', class: 'pagination__navigation'
+
+  %p should work with 2 pages, the last being selected:
+  .style-guide__example-block
+    %ul.pagination
+      %li.pagination__node
+        = link_to 'Prev', '#', class: 'pagination__navigation'
+      %li.pagination__node
+        = link_to 1, '#', class: 'pagination__link'
+      %li.pagination__node
+        %strong 2
+      %li.pagination__node
+        %span.pagination__navigation.pagination__navigation--disabled Next
+
+  %p should work with 3 pages, the middle being selected:
+  .style-guide__example-block
+    %ul.pagination
+      %li.pagination__node
+        = link_to 'Prev', '#', class: 'pagination__navigation'
+      %li.pagination__node
+        = link_to 1, '#', class: 'pagination__link'
+      %li.pagination__node
+        %strong 2
+      %li.pagination__node
+        = link_to 3, '#', class: 'pagination__link'
+      %li.pagination__node
+        = link_to 'Next', '#', class: 'pagination__navigation'
+
+  %p should work with many pages, the first being selected, with latter placeholder displayed:
+  .style-guide__example-block
+    %ul.pagination
+      %li.pagination__node
+        %span.pagination__navigation.pagination__navigation--disabled Prev
+      %li.pagination__node
+        %strong 1
+      %li.pagination__node
+        = link_to 2, '#', class: 'pagination__link'
+      %li.pagination__node
+        = link_to 3, '#', class: 'pagination__link'
+      %li.pagination__node
+        %span …
+      %li.pagination__node
+        = link_to 288, '#', class: 'pagination__link'
+      %li.pagination__node
+        = link_to 'Next', '#', class: 'pagination__navigation'
+
+  %p should work with many pages, with latter placeholder displayed:
+  .style-guide__example-block
+    %ul.pagination
+      %li.pagination__node
+        %span.pagination__navigation.pagination__navigation--disabled Prev
+      %li.pagination__node
+        = link_to 1, '#', class: 'pagination__link'
+      %li.pagination__node
+        = link_to 2, '#', class: 'pagination__link'
+      %li.pagination__node
+        = link_to 3, '#', class: 'pagination__link'
+      %li.pagination__node
+        %strong 4
+      %li.pagination__node
+        = link_to 5, '#', class: 'pagination__link'
+      %li.pagination__node
+        %span …
+      %li.pagination__node
+        = link_to 288, '#', class: 'pagination__link'
+      %li.pagination__node
+        = link_to 'Next', '#', class: 'pagination__navigation'
+
+  %p should work with many pages, with former and latter placeholder displayed:
+  .style-guide__example-block
+    %ul.pagination
+      %li.pagination__node
+        = link_to 'Prev', '#', class: 'pagination__navigation'
+      %li.pagination__node
+        = link_to 1, '#', class: 'pagination__link'
+      %li.pagination__node
+        %span …
+      %li.pagination__node
+        = link_to 274, '#', class: 'pagination__link'
+      %li.pagination__node
+        %strong 275
+      %li.pagination__node
+        = link_to 276, '#', class: 'pagination__link'
+      %li.pagination__node
+        %span …
+      %li.pagination__node
+        = link_to 288, '#', class: 'pagination__link'
+      %li.pagination__node
+        = link_to 'Next', '#', class: 'pagination__navigation'
+
+  %p shoudl work with many pages, with former placeholder displayed:
+  .style-guide__example-block
+    %ul.pagination
+      %li.pagination__node
+        = link_to 'Prev', '#', class: 'pagination__navigation'
+      %li.pagination__node
+        = link_to 1, '#', class: 'pagination__link'
+      %li.pagination__node
+        %span …
+      %li.pagination__node
+        = link_to 284, '#', class: 'pagination__link'
+      %li.pagination__node
+        %strong 285
+      %li.pagination__node
+        = link_to 286, '#', class: 'pagination__link'
+      %li.pagination__node
+        = link_to 287, '#', class: 'pagination__link'
+      %li.pagination__node
+        = link_to 288, '#', class: 'pagination__link'
+      %li.pagination__node
+        = link_to 'Next', '#', class: 'pagination__navigation'
+
+  %p should work with many pages, the last being selected, with former placeholder displayed:
+  .style-guide__example-block
+    %ul.pagination
+      %li.pagination__node
+        = link_to 'Prev', '#', class: 'pagination__navigation'
+      %li.pagination__node
+        = link_to 1, '#', class: 'pagination__link'
+      %li.pagination__node
+        %span …
+      %li.pagination__node
+        = link_to 286, '#', class: 'pagination__link'
+      %li.pagination__node
+        = link_to 287, '#', class: 'pagination__link'
+      %li.pagination__node
+        %strong 288
+      %li.pagination__node
+        %span.pagination__navigation.pagination__navigation--disabled Next

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

@@ -0,0 +1,28 @@
+#product-summary.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'product_summary')
+
+  %p Small, concise cards representing a product. Designed to be grouped together horizontally, reflowing based on their container's width.
+
+  %p The product's name will automatically truncate.
+
+  %p Supports an optional <code>.product-summary__remove</code> link.
+
+  .style-guide__example-block
+
+    .product-summary
+      .product-summary__media
+        .product-summary__image-wrapper
+          = image_tag 'workarea/core/placeholder.png', size: '64x88', class: 'product-summary__image'
+      %span.product-summary__name Product Title 1
+      %span.product-summary__graph
+        %span.spark {#{(0..9).to_a.shuffle.join(',')}}
+
+    .product-summary
+      .product-summary__media
+        .product-summary__image-wrapper
+          = image_tag 'workarea/core/placeholder.png', size: '64x88', class: 'product-summary__image'
+      = link_to inline_svg('workarea/admin/icons/close.svg', class: 'svg-icon svg-icon--small svg-icon--red', title: t('workarea.admin.actions.remove')), '#', class: 'product-summary__remove'
+      %span.product-summary__name Very Long Product Title 3
+      %span.product-summary__graph
+        %span.spark {#{(0..9).to_a.shuffle.join(',')}}

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

@@ -0,0 +1,147 @@
+#property.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'property')
+
+  %p Handles the presentation form control.
+
+  %p should not visually separate singular properties:
+  .style-guide__example-block
+    .property
+      = label_tag 'property_1', 'Label One', class: 'property__name'
+      = text_field_tag 'property_1', 'Input', class: 'text-box'
+
+  %p should visually separate adjacent properties, margin between and after:
+  .style-guide__example-block
+    .property
+      = label_tag 'property_2', 'Label One', class: 'property__name'
+      = text_field_tag 'property_2', 'Input', class: 'text-box'
+    .property
+      = label_tag 'property_3', 'Label Two', class: 'property__name'
+      = text_field_tag 'property_3', 'Input', class: 'text-box'
+
+  %p should properly style the name (<code>label</code>) of form control:
+  .style-guide__example-block
+    .property
+      = label_tag 'property_4', 'Label One', class: 'property__name'
+      = text_field_tag 'property_4', 'Input', class: 'text-box'
+  .style-guide__example-block
+    .property
+      = label_tag 'property_5', 'Label Three', class: 'property__name'
+      = select_tag 'property_5', options_for_select(['Select Option', 'Select Option', 'Select Option'])
+  .style-guide__example-block
+    .property
+      = check_box_tag 'property_6'
+      = label_tag 'property_6', 'Checkbox', class: 'property__name'
+  .style-guide__example-block
+    .property
+      = radio_button_tag 'property_7', '1', false
+      = label_tag 'property_7_1', 'Radio Button', class: 'property__name'
+
+  %p should support notes:
+  .style-guide__example-block
+    .property
+      = label_tag 'property_8', 'Label One', class: 'property__name'
+      = text_field_tag 'property_8', 'Input', class: 'text-box'
+      %span.property__note Property Note
+      %span.property__note.property__note--error Property Error Note
+  .style-guide__example-block
+    .property
+      = check_box_tag 'property_9'
+      = label_tag 'property_9', 'Checkbox', class: 'property__name'
+      %span.property__note Property Note
+      %span.property__note.property__note--error Property Error Note
+
+
+#property--required.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'property__required')
+
+  %p Visually indicates a form control is required.
+
+  %p should add a required indicator to the <code>property__name</code>:
+  .style-guide__example-block
+    .property.property--required
+      = label_tag 'property_required_1', 'Label One', class: 'property__name'
+      = text_field_tag 'property_required_1', 'Input', class: 'text-box'
+  .style-guide__example-block
+    .property.property--required
+      = check_box_tag 'property_required_2'
+      = label_tag 'property_required_2', 'Checkbox', class: 'property__name'
+
+
+#property--invalid.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'property__invalid')
+
+  %p Visually indicates when a property is invalid
+
+  %p should change the property name's color:
+  .style-guide__example-block
+    .property.property--invalid
+      %span.property__name Property Name
+
+  %p should change and persist the focus ring color around form elements:
+  .style-guide__example-block
+    .property.property--invalid
+      %input{ value: 'Text Box Input', type: 'text', class: 'text-box' }
+  .style-guide__example-block
+    .property.property--invalid
+      %input{ value: 'Input', type: 'text' }
+  .style-guide__example-block
+    .property.property--invalid
+      %textarea Textarea
+  .style-guide__example-block
+    .property.property--invalid
+      %select
+        %option Select Option
+
+
+#property--inline.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'property__inline')
+
+  %p Intended to be used within a sentence UI. <code>property__name</code> elements should be omitted in favor of <code>title</code> attributes on the field. When used within a <code>p</code> tag, the classes should be applied to a <code>span</code> tag.
+
+  %p should display inline within a paragraph:
+  .style-guide__example-block
+    %p
+      Hacker knife shoes physical shanty town rifle artisanal
+      %span.property.property--inline
+        = text_field_tag 'property_inline', 'Input', class: 'text-box', title: 'Property Name'
+      semiotics jeans Kowloon boy sprawl pre-towards voodoo god realism.
+
+  %p should work with <code>property--invalid</code>:
+  .style-guide__example-block
+    %p
+      Hacker knife shoes physical shanty town rifle artisanal
+      %span.property.property--inline.property--invalid
+        = text_field_tag 'property_inline_invalid_1', 'Input', class: 'text-box text-box--invalid', title: 'Property Name'
+      semiotics jeans Kowloon boy sprawl pre-towards voodoo god realism.
+
+  %p should not allow <code>property__note</code> or <code>property__name</code> elements, which break layout:
+  .style-guide__example-block
+    %p
+      Hacker knife shoes physical shanty town rifle artisanal
+      %span.property.property--inline
+        = label_tag 'property_inline_invalid_2', 'Label One', class: 'property__name'
+        = text_field_tag 'property_inline_invalid_2', 'Input', class: 'text-box'
+        %span.property__note Property Note
+        %span.property__note.property__note--error Property Error Note
+      semiotics jeans Kowloon boy sprawl pre-towards voodoo god realism.
+
+
+#property--no-margin.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'property__no_margin')
+
+  %p Removes all margin from component.
+
+  %p should remove margin:
+  .style-guide__example-block
+    .property.property--no-margin
+      = label_tag 'property_no_margin_1', 'Label One', class: 'property__name'
+      = text_field_tag 'property_no_margin_1', 'Input', class: 'text-box'
+    .property.property--no-margin
+      = label_tag 'property_no_margin_2', 'Label One', class: 'property__name'
+      = text_field_tag 'property_no_margin_2', 'Input', class: 'text-box'
+

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

@@ -0,0 +1,48 @@
+#property-toggle.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'property_toggle')
+
+  %p Wraps a #{link_to_style_guide('components', 'property', true)} or #{link_to_style_guide('components', 'compound_property', true)} component, restyling the default UI to include a checkbox before the component.
+
+  %p The component expects all contained form controls to be disabled. The component appears disabled by default, "activating" itself when the preceeding checkbox is checked.
+
+  %p This component is progressively enhanced by <code>WORKAREA.propertyToggles</code> to ensure that the fields become editable when the component is interacted with.
+
+  .style-guide__example-block
+
+    .property-toggle
+      .property-toggle__checkbox
+        = check_box_tag 'property_toggle_checkbox_1', nil, nil
+      .property-toggle__property
+        .property
+          = label_tag 'property_toggle_text_field_1', 'Label One', class: 'property__name'
+          = text_field_tag 'property_toggle_text_field_1', nil, class: 'text-box', disabled: true
+
+    .property-toggle
+      .property-toggle__checkbox
+        = check_box_tag 'property_toggle_checkbox_2', nil, nil
+      .property-toggle__property
+        .property
+          %span.property__name Label Two
+          .toggle-button
+            .toggle-button__switch
+              = radio_button 'property_toggle_toggle_button', nil, 'yes', class: 'toggle-button__input toggle-button__input--positive', disabled: true
+              = label_tag 'property_toggle_toggle_button__no', 'Yes', class: 'toggle-button__label toggle-button__label--positive'
+              = radio_button 'property_toggle_toggle_button', nil, 'no', checked: true, class: 'toggle-button__input toggle-button__input--negative', disabled: true
+              = label_tag 'property_toggle_toggle_button__yes', 'No', class: 'toggle-button__label toggle-button__label--negative'
+
+    .property-toggle
+      .property-toggle__checkbox
+        = check_box_tag 'property_toggle_checkbox_3', nil, nil
+      .property-toggle__property
+        .property
+          = label_tag 'property_toggle_text_field_2', 'A much longer labels than the others', class: 'property__name'
+          = text_field_tag 'property_toggle_text_field_2', nil, class: 'text-box', disabled: true
+
+    .property-toggle
+      .property-toggle__checkbox
+        = check_box_tag 'property_toggle_checkbox_4', nil, true
+      .property-toggle__property
+        .property
+          = label_tag 'property_toggle_select_1', 'Already Active Label', class: 'property__name'
+          = select_tag 'property_toggle_select_1', options_for_select(%w(One Two Three))

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

@@ -0,0 +1,55 @@
+#release_changeset.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'release_changeset')
+
+  %p A release changeset
+
+  .style-guide__example-block
+    .release-changeset
+      %ul.release-changeset__list
+        %li.release-changeset__list-item
+          %span.release-changeset__field HTML
+          %span.release-changeset__old <p>Thanks for your order!</p>
+          %span.release-changeset__new
+            <h3>You Rock!</h3>
+            <p>Thanks for your order!</p>
+
+  %p A release changeset in an activity log
+
+  .style-guide__example-block
+    .grid
+      .activity-group
+        .grid__cell.grid__cell--20
+          .date-marker
+            .date-marker__annotation Today
+            .date-marker__month= local_time(Time.current, format: '%b')
+            .date-marker__day= local_time(Time.current, format: '%e')
+
+        .grid__cell.grid__cell--80
+          .activity
+            .activity__header
+              .activity__avatar
+                %span.avatar BC
+              %h3.activity__name Release Name
+              %p.activity__time
+                Publishes on
+                =time_tag(Time.current)
+              .activity__actions
+                .grid.grid--auto
+                  .grid__cell
+                    = button_tag value: 'edit_changes', class: 'text-button' do
+                      %span Edit
+                      = inline_svg('workarea/admin/icons/edit.svg', class: 'text-button__icon')
+                  .grid__cell
+                    = button_tag value: 'delete_changeset', class: 'text-button' do
+                      %span= t('workarea.admin.actions.delete')
+                      = inline_svg('workarea/admin/icons/delete.svg', class: 'text-button__icon')
+            .activity__message
+              .release-changeset.release-changeset--activity
+                %ul.release-changeset__list
+                  %li.release-changeset__list-item
+                    %span.release-changeset__field HTML
+                    %span.release-changeset__old <p>Thanks for your order!</p>
+                    %span.release-changeset__new
+                      <h3>You Rock!</h3>
+                      <p>Thanks for your order!</p>