workarea-storefront 3.4.12

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

@@ -0,0 +1,63 @@
+#tables-base.style-guide__subsection
+
+  %h3= link_to_style_guide('base', 'tables_base')
+
+  %p Global table styling.
+
+  %p should style a horizontally oriented table:
+  .style-guide__example-block
+    %table
+      %thead
+        %tr
+          %th Heading 1
+          %th Heading 2
+          %th Heading 3
+          %th Heading 4
+          %th Heading 5
+      %tbody
+        %tr
+          %td Data 1
+          %td Data 2
+          %td Data 3
+          %td Data 4
+          %td Data 5
+
+  %p should style a vertically oriented table:
+  .style-guide__example-block
+    %table
+      %tbody
+        %tr
+          %th Heading 1
+          %td Data 1
+          %td Data 2
+          %td Data 3
+          %td Data 4
+          %td Data 5
+        %tr
+          %th Heading 2
+          %td Data 1
+          %td Data 2
+          %td Data 3
+          %td Data 4
+          %td Data 5
+        %tr
+          %th Heading 3
+          %td Data 1
+          %td Data 2
+          %td Data 3
+          %td Data 4
+          %td Data 5
+        %tr
+          %th Heading 4
+          %td Data 1
+          %td Data 2
+          %td Data 3
+          %td Data 4
+          %td Data 5
+        %tr
+          %th Heading 5
+          %td Data 1
+          %td Data 2
+          %td Data 3
+          %td Data 4
+          %td Data 5

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

@@ -0,0 +1,26 @@
+#box.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'box')
+
+  %p should visually style a section like a box:
+  .style-guide__example-block
+    .box
+      .box__body
+        Semiotics drone systemic vehicle tower apophenia paranoid bicycle post-digital artisanal. Grenade footage media franchise crypto-bomb vinyl apophenia j-pop drugs courier bicycle uplink. 3D-printed physical carbon-space nano-franchise dolphin warehouse euro-pop. Boat engine sentient-ware soul-delay human carbon courier spook claymore mine media plastic euro-pop savant. Shanty town free-market shrine dissident car futurity vehicle jeans savant-ware order-flow.
+
+  %p should support an optional header:
+  .style-guide__example-block
+    .box
+      .box__header
+        %h3.box__heading Digital semiotics
+      .box__body
+        Drone corporation camera human ablative assault denim. Refrigerator drone marketing pre-artisanal sentient soul-delay construct chrome. Papier-mache man smart-saturation point 3D-printed tower katana-ware pen marketing sub-orbital spook neon BASE jump. Military-grade girl silent tiger-team office narrative film jeans 8-bit claymore mine nodality dome vinyl physical nodal point courier.
+
+  %p should support an optional action within header:
+  .style-guide__example-block
+    .box
+      .box__header
+        .box__action= button_tag 'Drone', class: 'button'
+        %h3.box__heading Disposable franchise.
+      .box__body
+        Smart-augmented reality neural-ware RAF. Concrete dome construct shrine jeans girl tanto courier drugs systema face forwards convenience store cartel. Otaku Tokyo dissident assassin crypto-tiger-team plastic savant jeans. Market faded nodality monofilament uplink 8-bit paranoid geodesic city military-grade dolphin lights concrete spook. Weathered sub-orbital military-grade corrupted Chiba human shanty town saturation point gang math-rifle chrome grenade alcohol numinous. Free-market refrigerator numinous dome shanty town kanji neon digital. Into knife disposable crypto-drugs spook alcohol neural marketing cyber-smart.

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

@@ -0,0 +1,12 @@
+#breadcrumbs.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'breadcrumbs')
+
+  %p Styles a set of breadcrumbs.
+
+  .style-guide__example-block
+    .breadcrumbs
+      %p.breadcrumbs__node-group
+        %span.breadcrumbs__node= link_to 'Foo', '#', class: 'breadcrumbs__link'
+        %span.breadcrumbs__node= link_to 'Bar', '#', class: 'breadcrumbs__link'
+        %span.breadcrumbs__node= link_to 'Baz', '#', class: 'breadcrumbs__link'

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

@@ -0,0 +1,50 @@
+#button.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'button')
+
+  %p Displays an element as interactive button.
+
+  %p should work with <code>button[type=button]</code> elements:
+  .style-guide__example-block
+    = button_tag 'Button', class: 'button', type: 'button'
+
+  %p should work with <code>button[type=submit]</code> elements:
+  .style-guide__example-block
+    = button_tag 'Button', class: 'button', type: 'submit'
+
+  %p should work with <code>input[type=submit]</code> elements:
+  .style-guide__example-block
+    = submit_tag 'Button', class: 'button'
+
+  %p should work with <code>a</code> elements:
+  .style-guide__example-block
+    = link_to 'Button', '#', class: 'button'
+
+  %p should style non-interactive buttons wrapped in an <code>a</code> element:
+  .style-guide__example-block
+    = link_to '#' do
+      %span.button Span Button
+
+#button--small.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'button__small')
+
+  %p should reduce the size of the button:
+  .style-guide__example-block
+    = button_tag 'Button Element', class: 'button button--small'
+
+#button--large.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'button__large')
+
+  %p should increase the size of the button:
+  .style-guide__example-block
+    = button_tag 'Button Element', class: 'button button--large'
+
+#button--full.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'button__full')
+
+  %p should increase the size of the button:
+  .style-guide__example-block
+    = button_tag 'Button Element', class: 'button button--full'

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

@@ -0,0 +1,20 @@
+#button-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'button_content_block')
+
+  %p Presents a Button content block.
+
+  %p should align the button <strong>left</strong>:
+  .style-guide__example-block
+    .button-content-block.button-content-block--left
+      = link_to 'Button', '#', class: 'button'
+
+  %p should align the button <strong>center</strong>:
+  .style-guide__example-block
+    .button-content-block.button-content-block--center
+      = link_to 'Button', '#', class: 'button'
+
+  %p should align the button <strong>right</strong>:
+  .style-guide__example-block
+    .button-content-block.button-content-block--right
+      = link_to 'Button', '#', class: 'button'

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

@@ -0,0 +1,83 @@
+#button-property.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'button_property')
+
+  %p Serves the same purpose as a #{link_to_style_guide('components', 'property', true)}, ensuring a consistent layout within a form, but is tailored specifically for radio button and check box fields.
+
+  .style-guide__example-block
+    .property
+      = label_tag 'wl_button_property_text_field_1', nil, class: 'property__name' do
+        %span.property__text Label One
+        %span.property__requirement (required)
+      .value
+        = text_field_tag 'wl_button_property_text_field_1', nil, class: 'text-box'
+    .button-property
+      .value
+        = radio_button_tag 'wl_button_property_radio_button_1', '1', false
+      = label_tag 'wl_button_property_radio_button_1_1', nil, class: 'button-property__name' do
+        %span.button-property__text Radio Button Label Two With Enough Text to Make It Much Longer Than The Others
+    .button-property
+      .value
+        = check_box_tag 'wl_button_property_check_box_1'
+      = label_tag 'wl_button_property_check_box_1', nil, class: 'button-property__name' do
+        %span.button-property__text Checkbox Label Three With Enough Text to Make It Much Longer Than The Others
+    .property
+      = label_tag 'wl_button_property_select_field_1', nil, class: 'property__name' do
+        %span.property__text Label Four
+        %span.property__requirement (required)
+      .value
+        = select_tag 'wl_button_property_select_field_1', options_for_select(%w(One Two Three))
+    .button-property
+      .value
+        = radio_button_tag 'wl_button_property_radio_button_1', '2', false
+        %span.value__error Error Message
+      = label_tag 'wl_button_property_radio_button_1_2', nil, class: 'button-property__name' do
+        %span.button-property__text Radio Button Label Five
+    .button-property
+      .value
+        = check_box_tag 'wl_button_property_check_box_2'
+        %span.value__error Error Message
+      = label_tag 'wl_button_property_check_box_2', nil, class: 'button-property__name' do
+        %span.button-property__text Checkbox Label Six
+
+#button-property--responsive.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'button_property__responsive')
+
+  %p Allows #{link_to_style_guide('components', 'button_property', true)} to be displayed as a row at the medium breakpoint.
+
+  .style-guide__example-block
+    .property.property--responsive
+      = label_tag 'wl_button_property_responsive_text_field_1', nil, class: 'property__name' do
+        %span.property__text Label One
+        %span.property__requirement (required)
+      .value
+        = text_field_tag 'wl_button_property_responsive_text_field_1', nil, class: 'text-box'
+    .button-property.button-property--responsive
+      .value
+        = radio_button_tag 'wl_button_property_responsive_radio_button_1', '1', false
+      = label_tag 'wl_button_property_responsive_radio_button_1_1', nil, class: 'button-property__name' do
+        %span.button-property__text Radio Button Label Two With Enough Text to Make It Much Longer Than The Others
+    .button-property.button-property--responsive
+      .value
+        = check_box_tag 'wl_button_property_responsive_check_box_1'
+      = label_tag 'wl_button_property_responsive_check_box_1', nil, class: 'button-property__name' do
+        %span.button-property__text Checkbox Label Three With Enough Text to Make It Much Longer Than The Others
+    .property.property--responsive
+      = label_tag 'wl_button_property_responsive_select_field_1', nil, class: 'property__name' do
+        %span.property__text Label Four
+        %span.property__requirement (required)
+      .value
+        = select_tag 'wl_button_property_responsive_select_field_1', options_for_select(%w(One Two Three))
+    .button-property.button-property--responsive
+      .value
+        = radio_button_tag 'wl_button_property_responsive_radio_button_1', '2', false
+        %span.value__error Error Message
+      = label_tag 'wl_button_property_responsive_radio_button_1_2', nil, class: 'button-property__name' do
+        %span.button-property__text Radio Button Label Five
+    .button-property.button-property--responsive
+      .value
+        = check_box_tag 'wl_button_property_responsive_check_box_2'
+        %span.value__error Error Message
+      = label_tag 'wl_button_property_responsive_check_box_2', nil, class: 'button-property__name' do
+        %span.button-property__text Checkbox Label Six

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

@@ -0,0 +1,29 @@
+#category-summary-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'category_summary_content_block')
+
+  %p Displays a heading followed by a #{link_to_style_guide('components', 'product_grid', true)}, unless the products are empty. Produced by the content editor in the admin.
+
+  %p Category with products:
+  .style-guide__example-block
+    .category-summary-content-block
+      %h2.category-summary-content-block__heading Category Name
+      .grid
+        - 4.times do
+          .grid__cell.grid__cell--50.grid__cell--33-at-medium.grid__cell--16-at-wide
+            .product-summary
+              %p.product-summary__media
+                = link_to('#', class: 'product-summary__media-link') do
+                  = image_tag('workarea/storefront/style_guide_product.jpg', alt: 'Product Name', class: 'product-summary__media-image')
+              .product-summary__info
+                %p.product-summary__name= link_to('Product Name', '#')
+                .product-prices.product-prices--summary
+                  %p.product-prices__price
+                    %span= number_to_currency(109.99)
+
+  %p Empty category:
+  .style-guide__example-block
+    .category-summary-content-block
+      %h2 Category Name
+      %p Category Name is empty.
+

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

@@ -0,0 +1,215 @@
+#data-card.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'data_card')
+
+  %p Displays account data in a "card" UI that reflows to fit the context.
+
+  %p The default component stacks these child cells in a single column.
+
+  %p Credit card data:
+  .style-guide__example-block
+
+    .data-card
+      .data-card__cell
+        %p.data-card__line.data-card__credit-card.data-card__credit-card--default
+          = credit_card_issuer_icon('Visa')
+          %span.data-card__credit-card-number ending in 4682
+        %p.data-card__line
+          %strong Expires:
+          %span
+            04/2020
+        %p.data-card__line
+          %strong Name on Card:
+          %span Bobby Clams
+      .data-card__cell
+        .grid.grid--auto
+          %p.grid__cell= link_to 'Edit', '#', class: 'button button--small'
+          = form_tag nil, class: 'grid__cell' do
+            %p= button_tag 'Delete', class: 'button button--small'
+
+    .data-card
+      .data-card__cell
+        %p.data-card__line.data-card__credit-card
+          = credit_card_issuer_icon('MasterCard')
+          %span.data-card__credit-card-number ending in 4682
+        %p.data-card__line
+          %strong Expires:
+          %span
+            04/2012
+            %strong (Expired)
+        %p.data-card__line
+          %strong Name on Card:
+          %span Bobby Clams
+      .data-card__cell
+        .grid.grid--auto
+          %p.grid__cell= link_to 'Edit', '#', class: 'button button--small'
+          = form_tag nil, class: 'grid__cell' do
+            %p= button_tag 'Delete', class: 'button button--small'
+
+    .data-card
+      .data-card__cell
+        %p.data-card__line.data-card__credit-card
+          = credit_card_issuer_icon('Discover')
+          %span.data-card__credit-card-number ending in 4682
+        %p.data-card__line
+          %strong Expires:
+          %span
+            04/2020
+        %p.data-card__line
+          %strong Name on Card:
+          %span Bobby Clams
+      .data-card__cell
+        .grid.grid--auto
+          %p.grid__cell= link_to 'Edit', '#', class: 'button button--small'
+          = form_tag nil, class: 'grid__cell' do
+            %p= button_tag 'Delete', class: 'button button--small'
+
+    .data-card
+      .data-card__cell
+        %p.data-card__line.data-card__credit-card
+          = credit_card_issuer_icon('American Express')
+          %span.data-card__credit-card-number ending in 4682
+        %p.data-card__line
+          %strong Expires:
+          %span
+            04/2020
+        %p.data-card__line
+          %strong Name on Card:
+          %span Bobby Clams
+      .data-card__cell
+        .grid.grid--auto
+          %p.grid__cell= link_to 'Edit', '#', class: 'button button--small'
+          = form_tag nil, class: 'grid__cell' do
+            %p= button_tag 'Delete', class: 'button button--small'
+
+    .data-card
+      .data-card__cell
+        %p.data-card__line.data-card__credit-card
+          = credit_card_issuer_icon('Diner\'s Club')
+          %span.data-card__credit-card-number ending in 4682
+        %p.data-card__line
+          %strong Expires:
+          %span
+            04/2020
+        %p.data-card__line
+          %strong Name on Card:
+          %span Bobby Clams
+      .data-card__cell
+        .grid.grid--auto
+          %p.grid__cell= link_to 'Edit', '#', class: 'button button--small'
+          = form_tag nil, class: 'grid__cell' do
+            %p= button_tag 'Delete', class: 'button button--small'
+
+  %p Address data:
+  .style-guide__example-block
+    .data-card
+      .data-card__cell
+        %p.data-card__line
+          Bobby Clams
+          %br
+          Workarea, LLC
+          %br
+          22 S 3rd St
+          %br
+          2nd Floor
+          %br
+          Philadelphia PA 19106
+          %br
+          = number_to_phone 2159251800
+      .data-card__cell
+        .grid.grid--auto
+          %p.grid__cell= link_to 'Edit', '#', class: 'button button--small'
+          = form_tag nil, class: 'grid__cell' do
+            %p= button_tag 'Delete', class: 'button button--small'
+
+  %p Order data:
+  .style-guide__example-block
+    .data-card
+      .data-card__cell
+        %p.data-card__line
+          %strong Order Date:
+          %span February 19, 2014
+        %p.data-card__line
+          %strong Order #:
+          %span 123456789
+        %p.data-card__line
+          %strong Order Status:
+          %span Shipped
+        %p.data-card__line
+          %strong Items:
+          %span 2 - $88.98
+      .data-card__cell
+        .grid.grid--auto
+          %p.grid__cell= link_to 'View', '#', class: 'button button--small'
+          %p.grid__cell= link_to 'Track Shipment', '#'
+          %p.grid__cell= link_to 'Track Shipment 2', '#'
+
+#data-card--row.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'data_card__row')
+
+  %p Presents the #{link_to_style_guide('components', 'data_card', true)} as stacked, rather than inline.
+
+  %p Credit card data:
+  .style-guide__example-block
+    .data-card.data-card--row
+      .data-card__cell
+        %p.data-card__line.data-card__credit-card.data-card__credit-card--default
+          = credit_card_issuer_icon('Visa')
+          %span.data-card__credit-card-number ending in 4682
+        %p.data-card__line
+          %strong Expires:
+          %span
+            04/2020
+        %p.data-card__line
+          %strong Name on Card:
+          %span Bobby Clams
+      .data-card__cell
+        .grid.grid--auto
+          %p.grid__cell= link_to 'Edit', '#', class: 'button button--small'
+          = form_tag nil, class: 'grid__cell' do
+            %p= button_tag 'Delete', class: 'button button--small'
+
+  %p Address data:
+  .style-guide__example-block
+    .data-card.data-card--row
+      .data-card__cell
+        %p.data-card__line
+          Bobby Clams
+          %br
+          Workarea, LLC
+          %br
+          22 S 3rd St
+          %br
+          2nd Floor
+          %br
+          Philadelphia PA 19106
+          %br
+          = number_to_phone 2159251800
+      .data-card__cell
+        .grid.grid--auto
+          %p.grid__cell= link_to 'Edit', '#', class: 'button button--small'
+          = form_tag nil, class: 'grid__cell' do
+            %p= button_tag 'Delete', class: 'button button--small'
+
+  %p Order data:
+  .style-guide__example-block
+    .data-card.data-card--row
+      .data-card__cell
+        %p.data-card__line
+          %strong Order Date:
+          %span February 19, 2014
+        %p.data-card__line
+          %strong Order #:
+          %span 123456789
+        %p.data-card__line
+          %strong Order Status:
+          %span Shipped
+        %p.data-card__line
+          %strong Items:
+          %span 2 - $88.98
+      .data-card__cell
+        .grid.grid--auto
+          %p.grid__cell= link_to 'View', '#', class: 'button button--small'
+          %p.grid__cell= link_to 'Track Shipment', '#'
+          %p.grid__cell= link_to 'Track Shipment 2', '#'