workarea-one_theme 1.3.0

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

@@ -0,0 +1,33 @@
+#taxonomy-with-category-summary-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'taxonomy_with_category_summary_content_block')
+
+  %p Displays a column of taxonomy with up to 4 products from a specified category
+
+  %p Taxonomy with category summary content block
+  .style-guide__example-block
+    .taxonomy-content-block.taxonomy-content-block--with-products
+      .taxonomy-content-block__container
+        %span.taxonomy-content-block__menu-heading Taxonomy Heading
+
+        %ul.taxonomy-content-block__menu
+          - (1..5).each do |i|
+            %li.taxonomy-content-block__menu-item
+              - if i.even?
+                Taxon #{i}
+              - else
+                = link_to "Taxon #{i}", '#', class: 'taxonomy-content-block__menu-link'
+
+      .taxonomy-content-block__products
+        .grid.grid--flush
+          - 4.times do
+            .grid__cell.grid__cell--50.grid__cell--25-at-medium
+              .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)

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

@@ -0,0 +1,33 @@
+#taxonomy-with-products-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'taxonomy_with_products_content_block')
+
+  %p Displays a column of taxonomy with up to 4 manually selected products, similar to product list blocktype.
+
+  %p Taxonomy with products content block
+  .style-guide__example-block
+    .taxonomy-content-block.taxonomy-content-block--with-products
+      .taxonomy-content-block__container
+        %span.taxonomy-content-block__menu-heading Taxonomy Heading
+
+        %ul.taxonomy-content-block__menu
+          - (1..5).each do |i|
+            %li.taxonomy-content-block__menu-item
+              - if i.even?
+                Taxon #{i}
+              - else
+                = link_to "Taxon #{i}", '#', class: 'taxonomy-content-block__menu-link'
+
+      .taxonomy-content-block__products
+        .grid.grid--flush
+          - 2.times do
+            .grid__cell.grid__cell--50.grid__cell--25-at-medium
+              .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)

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

@@ -0,0 +1,63 @@
+#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'
+
+#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--secondary.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'text_box__secondary')
+
+  %p Changes styles of a #{link_to_style_guide('components', 'text_box', true)} used primarily in header and footer.
+
+  .style-guide__example-block
+    = text_field_tag 'wl_text_secondary', 99, class: 'text-box text-box--secondary'

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

@@ -0,0 +1,79 @@
+#color-variables.style-guide__subsection
+
+  %h3= link_to_style_guide('settings', 'color_variables')
+
+  %h5 Base colors
+  .grid.grid--auto
+    - colors = %w(red green blue yellow black white black-alpha-15 black-alpha-50 white-alpha-50 transparent)
+    - colors.each do |color|
+      .grid__cell
+        .color-box
+          .color-box__swatch{ class: "style-guide__color-swatch--#{color}" }
+          .color-box__swatch-name $#{color}
+  %br
+
+  %h4 Brand colors
+
+  = render "workarea/storefront/style_guides/settings/color_schemes/#{Workarea.config.theme[:color_scheme].downcase}_color_scheme"
+
+  %h4 Functional Color variables - these should be used in the storefront
+  %br
+
+  %h5 Primary colors
+  .grid.grid--auto
+    - colors = %w(primary-color primary-color-light primary-color-dark)
+    - colors.each do |color|
+      .grid__cell
+        .color-box
+          .color-box__swatch{ class: "color-box__swatch--#{color}" }
+          .color-box__swatch-name $#{color}
+  %br
+
+  %h5 Background colors
+  .grid.grid--auto
+    - colors = %w(background-color background-color-component background-secondary-color)
+    - colors.each do |color|
+      .grid__cell
+        .color-box
+          .color-box__swatch{ class: "color-box__swatch--#{color}" }
+          .color-box__swatch-name $#{color}
+  %br
+
+  %h5 Text colors
+  .grid.grid--auto
+    - colors = %w(font-color heading-color product-name-color)
+    - colors.each do |color|
+      .grid__cell
+        .color-box
+          .color-box__swatch{ class: "color-box__swatch--#{color}" }
+          .color-box__swatch-name $#{color}
+  %br
+
+  %h5 Input colors
+  .grid.grid--auto
+    - colors = %w(input-color input-background-color input-secondary-color input-secondary-bg-color)
+    - colors.each do |color|
+      .grid__cell
+        .color-box
+          .color-box__swatch{ class: "color-box__swatch--#{color}" }
+          .color-box__swatch-name $#{color}
+  %br
+
+  %h5 Header + Navigation colors
+  .grid.grid--auto
+    - colors = %w(header-icon-color utility-nav-background-color primary-nav-links primary-nav-dropdown-links mobile-nav-links)
+    - colors.each do |color|
+      .grid__cell
+        .color-box
+          .color-box__swatch{ class: "color-box__swatch--#{color}" }
+          .color-box__swatch-name $#{color}
+  %br
+
+  %h5 Other colors
+  .grid.grid--auto
+    - colors = %w(border-color highlight-color overlay-shadow-color focus-ring-color)
+    - colors.each do |color|
+      .grid__cell
+        .color-box
+          .color-box__swatch{ class: "color-box__swatch--#{color}" }
+          .color-box__swatch-name $#{color}

data/app/views/workarea/storefront/style_guides/settings/color_schemes/_midnight_color_scheme.html.haml

@@ -0,0 +1,7 @@
+.grid.grid--auto
+  - colors = %w(mustard gray lightest-gray light-gray dark-gray off-black denim lightest-denim light-denim dark-denim)
+  - colors.each do |color|
+    .grid__cell
+      .color-box
+        .color-box__swatch{ class: "color-box__swatch--#{color}" }
+        .color-box__swatch-name $#{color}

data/app/views/workarea/storefront/style_guides/settings/color_schemes/_one_color_scheme.html.haml

@@ -0,0 +1,7 @@
+.grid.grid--auto
+  - colors = %w(dark-gray gray light-gray off-black off-white burnt-orange dark-burnt-orange)
+  - colors.each do |color|
+    .grid__cell
+      .color-box
+        .color-box__swatch{ class: "color-box__swatch--#{color}" }
+        .color-box__swatch-name $#{color}

data/app/views/workarea/storefront/style_guides/settings/color_schemes/_workarea_color_scheme.html.haml

@@ -0,0 +1,8 @@
+.grid.grid--auto
+  - colors = %w(off-black blue alt-blue gray light-gray dark-gray lighter-gray)
+  - colors.each do |color|
+    .grid__cell
+      .color-box
+        .color-box__swatch{ class: "color-box__swatch--#{color}" }
+        .color-box__swatch-name $#{color}
+ 

data/app/views/workarea/storefront/style_guides/typography/_headings.html.haml

@@ -0,0 +1,47 @@
+#headings.style-guide__subsection
+
+  %h3= link_to_style_guide('typography', 'headings')
+
+  %p Sets up the element to be styled the same as an <code>h1-6</code>, using the <code>heading</code> class in combination with a <code>heading--X</code> modifier, where <code>X</code> is the
+
+  %p Can be used on any inline or block-level element to visually present the element as a heading. Frequently applied when, semantically speaking, using a given <code>h1-6</code> tag wouldn't be appropriate.
+
+  %p In the following examples we have a variety of text-wrapping elements:
+
+  %p should style a variety of elements properly.
+  .style-guide__example-block
+    %h1 Heading 1
+    %span.heading.heading--1 Heading 1
+    %h2 Heading 2
+    %p.heading.heading--2 Heading 2
+    %h3 Heading 3
+    %strong.heading.heading--3 Heading 3
+    %h4 Heading 4
+    %h6.heading.heading--4 Heading 4
+    %h5 Heading 5
+    %h3.heading.heading--5 Heading 5
+    %h6 Heading 6
+    %h1.heading.heading--6 Heading 6
+
+#heading--fancy.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'heading__fancy')
+
+  %p Changes heading to use 'fancy' styles, this  H1 is fancy by default
+
+  .style-guide__example-block
+    %span.heading.heading--1 Heading 1 -- fancy
+    %p.heading.heading--fancy.heading--2 Heading 2 -- fancy
+    %strong.heading.heading--fancy.heading--3 Heading 3 -- fancy
+    %h6.heading.heading--fancy.heading--4 Heading 4 -- fancy
+    %h3.heading.heading--fancy.heading--5 Heading 5 -- fancy
+    %h1.heading.heading--fancy.heading--6 Heading 6 -- fancy
+
+#heading--center-at-small.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'heading__center_at_small')
+
+  %p Center a heading for small devices, left align at medium breakpoint
+
+  .style-guide__example-block
+    %span.heading.heading--center-at-small Heading 1

data/app/views/workarea/storefront/style_guides/typography/_links.html.haml

@@ -0,0 +1,27 @@
+#links.style-guide__subsection
+
+  %h3= link_to_style_guide('typography', 'links')
+
+  %p Provides styles for link elements as well as a .link selector which is designed to be a baseline for any link modifiers you may need in your project.
+
+  %p should style <code>a</code> elements.
+  .style-guide__example-block
+    = link_to('A link', 'www.example.com')
+
+  %p should style <code>link</code> classes.
+  .style-guide__example-block
+    %span.link Not really a link
+
+#link--secondary.style-guide__subsection
+
+  %h3= link_to_style_guide('typography', 'link__secondary')
+
+  %p Secondary link styles, inverted colors used primarily in application header, footer, and filter drawer.
+
+  %p should style <code>a</code> elements.
+  .style-guide__example-block
+    = link_to('A link', 'www.example.com', class: "link link--secondary")
+
+  %p should style <code>link link--secondary</code> classes.
+  .style-guide__example-block
+    %span.link.link--secondary Not really a link

data/app/views/workarea/storefront/users/accounts/_wish_list_summary.html.haml

@@ -0,0 +1,16 @@
+.grid
+  .grid__cell
+    .box
+      .box__header
+        %span.box__action= link_to t('workarea.storefront.wish_lists.manage'), users_wish_list_path, class: 'button'
+        %h2.box__heading= t('workarea.storefront.wish_lists.wish_list')
+      .box__body
+        - if user.wish_list_items.any?
+          .grid.grid--flush
+            - user.wish_list_items.each do |item|
+              = render_schema_org(product_schema(item.product))
+              .grid__cell.grid__cell--50.grid__cell--33-at-medium.grid__cell--16-at-wide
+                .product-summary.product-summary--small
+                  = render 'workarea/storefront/products/summary', product: item.product
+        - else
+          %p= t('workarea.storefront.wish_lists.empty.message', state: t('workarea.storefront.wish_lists.empty.states.unpurchased'))

data/app/views/workarea/storefront/users/accounts/edit.html.haml

@@ -0,0 +1,41 @@
+- @title = t('workarea.storefront.users.edit_title')
+
+- content_for :breadcrumbs do
+  %p.breadcrumbs__node-group
+    %span.breadcrumbs__node
+      = link_to t('workarea.storefront.layouts.home'), root_path, rel: 'home', class: 'breadcrumbs__link'
+    %span.breadcrumbs__node
+      = link_to t('workarea.storefront.users.account'), users_account_path, class: 'breadcrumbs__link'
+    %span.breadcrumbs__node
+      %span.breadcrumbs__text= t('workarea.storefront.users.edit_title')
+
+.view
+
+  %h1= t('workarea.storefront.users.edit_title')
+
+  = form_tag users_account_path, method: :patch, id: 'info_form' do
+    .grid
+      .grid__cell
+        .property
+          = label_tag :email, nil, class: 'property__name' do
+            %span.property__text= t('workarea.storefront.users.email')
+          .value= email_field_tag :email, @user.email, class: 'text-box', autocapitalize: 'off', autocomplete: 'email', required: true, placeholder: t('workarea.storefront.forms.email_placeholder')
+      .grid__cell.grid__cell--50-at-medium
+        .property
+          = label_tag :first_name, nil, class: 'property__name' do
+            %span.property__text= t('workarea.storefront.users.first_name')
+          .value= text_field_tag :first_name, @user.first_name, class: 'text-box', autocomplete: 'given-name'
+      .grid__cell.grid__cell--50-at-medium
+        .property
+          = label_tag :last_name, nil, class: 'property__name' do
+            %span.property__text= t('workarea.storefront.users.last_name')
+          .value= text_field_tag :last_name, @user.last_name, class: 'text-box', autocomplete: 'family-name'
+      .grid__cell
+        .property
+          = label_tag :password, nil, class: 'property__name' do
+            %span.property__text= t('workarea.storefront.users.new_password')
+          .value= password_field_tag :password, nil, class: 'text-box', minlength: minimum_password_length
+      = append_partials('storefront.edit_account_details', user: @user)
+      .grid.grid--auto.grid--right.grid--middle
+        %p.grid__cell= link_to t('workarea.storefront.forms.cancel'), users_account_path, class: "text-button", data: { dialog_close_button: '' }
+        %p.grid__cell= button_tag t('workarea.storefront.forms.save'), value: 'save_info', class: 'button'

data/app/views/workarea/storefront/users/accounts/show.html.haml

@@ -0,0 +1,118 @@
+- @title = t('workarea.storefront.users.account')
+
+- content_for :breadcrumbs do
+  %p.breadcrumbs__node-group
+    %span.breadcrumbs__node
+      = link_to t('workarea.storefront.layouts.home'), root_path, rel: 'home', class: 'breadcrumbs__link'
+    %span.breadcrumbs__node
+      %span.breadcrumbs__text= t('workarea.storefront.users.account')
+
+.view
+
+  %h1= t('workarea.storefront.users.account')
+
+  .grid.grid--large
+    .grid__cell.grid__cell--50-at-medium
+      .box
+        .box__header
+          .box__action= link_to t('workarea.storefront.forms.update'), edit_users_account_path, class: 'button', data: { dialog_button: '' }
+          %h2.box__heading= t('workarea.storefront.users.details')
+        .box__body
+          %table.table
+            %tbody
+              %tr
+                %th
+                  %span= t('workarea.storefront.users.email')
+                %td= @user.email
+              %tr
+                %th
+                  %span= t('workarea.storefront.users.name')
+                %td #{@user.first_name} #{@user.last_name}
+              %tr
+                %th
+                  %span= t('workarea.storefront.users.password')
+                %td ********
+              = append_partials('storefront.show_account_details', user: @user)
+
+      .box
+        .box__header
+          .box__action= link_to t('workarea.storefront.users.add_credit_card'), new_users_credit_card_path, class: 'button', data: { dialog_button: '' }
+          %h2.box__heading= t('workarea.storefront.users.credit_cards')
+
+        .box__body
+          - unless @user.has_credit_card?
+            = t('workarea.storefront.users.no_saved_credit_cards')
+          - else
+            .grid.grid--large
+              - @user.credit_cards.each do |credit_card|
+                .grid__cell.grid__cell--50-at-medium
+                  .data-card
+                    .data-card__cell
+                      %p.data-card__line.data-card__credit-card{ class: (credit_card.default?) ? 'data-card__credit-card--default' : nil }
+                        = credit_card_issuer_icon(card_icon_name(credit_card.issuer))
+                        %span.data-card__credit-card-number
+                          = t('workarea.storefront.credit_cards.summary', issuer: nil, number: credit_card.display_number.slice(-4..-1))
+                      %p.data-card__line
+                        %strong= t('workarea.storefront.credit_cards.expires')
+                        %span
+                          = t('workarea.storefront.credit_cards.expiry', month: credit_card.month, year: credit_card.year)
+                          - if credit_card.expired?
+                            %strong= t('workarea.storefront.credit_cards.expired')
+                      %p.data-card__line
+                        %strong= t('workarea.storefront.credit_cards.name_on_card')
+                        %span #{credit_card.first_name} #{credit_card.last_name}
+                    .data-card__cell
+                      .grid.grid--auto
+                        .grid__cell= link_to t('workarea.storefront.forms.edit'), edit_users_credit_card_path(credit_card), class: 'button button--small', data: { dialog_button: '' }
+                        = form_tag users_credit_card_path(credit_card), method: 'delete', class: 'grid__cell' do
+                          = button_tag t('workarea.storefront.forms.delete'), class: 'button button--small'
+
+      .box
+        .box__header
+          .box__action= link_to t('workarea.storefront.users.add_address'), new_users_address_path, class: 'button', data: { dialog_button: '' }
+          %h2.box__heading= t('workarea.storefront.users.addresses')
+        .box__body
+          - unless @user.has_default_addresses?
+            = t('workarea.storefront.users.no_saved_addresses')
+          - else
+            .grid.grid--large
+              - @user.addresses.each do |address|
+                .grid__cell.grid__cell--50-at-medium
+                  .data-card
+                    .data-card__cell
+                      %p.data-card__line= formatted_address(address)
+
+                    .data-card__cell
+                      .grid.grid--auto
+                        .grid__cell= link_to t('workarea.storefront.forms.edit'), edit_users_address_path(address), class: 'button button--small', data: { dialog_button: '' }
+                        = form_tag users_address_path(address), method: 'delete', class: 'grid__cell' do
+                          = button_tag t('workarea.storefront.forms.delete'), class: 'button button--small'
+
+      = append_partials('storefront.account_section_left', user: @user)
+
+    .grid__cell.grid__cell--50-at-medium
+
+      .box
+        .box__header
+          .box__action= link_to t('workarea.storefront.users.order_history'), users_orders_path, class: 'button'
+          %h2.box__heading= t('workarea.storefront.users.recent_orders')
+        .box__body
+          - unless @user.recent_orders.any?
+            = t('workarea.storefront.users.no_orders')
+          - else
+            - @user.recent_orders.each do |order|
+              = render 'workarea/storefront/users/orders/summary', order: order
+      = append_partials('storefront.account_section_right', user: @user)
+    = append_partials('storefront.account_grid_cell', user: @user)
+
+  = append_partials('storefront.account_section', user: @user)
+
+  - if @recommendations.any?
+    .recommendations
+      %h2.recommendations__heading= t('workarea.storefront.users.recommendations')
+      .recommendations__products
+        .grid.grid--flush
+          - @recommendations.each do |product|
+            .grid__cell.grid__cell--50.grid__cell--33-at-medium.grid__cell--16-at-wide
+              .product-summary.product-summary--small
+                = render 'workarea/storefront/products/summary', product: product