workarea-nvy_theme 1.1.2

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

@@ -0,0 +1,32 @@
+#personalized-recommendations-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'personalized_recommendations_content_block')
+
+  %p A content block containing <code>.product-summary</code> components.
+
+  %p should provide a responsive layout for multiple <code>.product-summary</code> components:
+  .style-guide__example-block
+    .personalized-recommendations-content-block
+      .grid
+        - (1..4).each do |i|
+          .grid__cell.grid__cell--50.grid__cell--25-at-medium
+            .product-summary.product-summary--small
+              .product-summary__media
+                .product-summary__image-wrapper
+                  = image_tag 'workarea/core/placeholder.png', size: '180x180', class: 'product-summary__image'
+              .product-summary__info
+                %span.product-summary__name Product Title #{i}
+
+  %p should support a heading:
+  .style-guide__example-block
+    .personalized-recommendations-content-block
+      %h2.personalized-recommendations-content-block__heading Personalized Recommendations Content Block
+      .grid
+        - (1..4).each do |i|
+          .grid__cell.grid__cell--50.grid__cell--25-at-medium
+            .product-summary.product-summary--small
+              .product-summary__media
+                .product-summary__image-wrapper
+                  = image_tag 'workarea/core/placeholder.png', size: '180x180', class: 'product-summary__image'
+              .product-summary__info
+                %span.product-summary__name Product Title #{i}

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

@@ -0,0 +1,32 @@
+#product-insights-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'product_insights_content_block')
+
+  %p A content block containing <code>.product-summary</code> components.
+
+  %p should provide a responsive layout for multiple <code>.product-summary</code> components:
+  .style-guide__example-block
+    .product-insights-content-block
+      .grid
+        - (1..4).each do |i|
+          .grid__cell.grid__cell--50.grid__cell--25-at-medium
+            .product-summary.product-summary--small
+              .product-summary__media
+                .product-summary__image-wrapper
+                  = image_tag 'workarea/core/placeholder.png', size: '180x180', class: 'product-summary__image'
+              .product-summary__info
+                %span.product-summary__name Product Title #{i}
+
+  %p should support a heading:
+  .style-guide__example-block
+    .product-insights-content-block
+      %h2.product-insights-content-block__heading Product List Content Block
+      .grid
+        - (1..4).each do |i|
+          .grid__cell.grid__cell--50.grid__cell--25-at-medium
+            .product-summary.product-summary--small
+              .product-summary__media
+                .product-summary__image-wrapper
+                  = image_tag 'workarea/core/placeholder.png', size: '180x180', class: 'product-summary__image'
+              .product-summary__info
+                %span.product-summary__name Product Title #{i}

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

@@ -0,0 +1,32 @@
+#product-list-content-block.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'product_list_content_block')
+
+  %p A content block containing <code>.product-summary</code> components.
+
+  %p should provide a responsive layout for multiple <code>.product-summary</code> components:
+  .style-guide__example-block
+    .product-list-content-block
+      .grid
+        - (1..4).each do |i|
+          .grid__cell.grid__cell--50.grid__cell--25-at-medium
+            .product-summary.product-summary--small
+              .product-summary__media
+                .product-summary__image-wrapper
+                  = image_tag 'workarea/core/placeholder.png', size: '180x180', class: 'product-summary__image'
+              .product-summary__info
+                %span.product-summary__name Product Title #{i}
+
+  %p should support a heading:
+  .style-guide__example-block
+    .product-list-content-block
+      %h2.product-list-content-block__heading Product List Content Block
+      .grid
+        - (1..4).each do |i|
+          .grid__cell.grid__cell--50.grid__cell--25-at-medium
+            .product-summary.product-summary--small
+              .product-summary__media
+                .product-summary__image-wrapper
+                  = image_tag 'workarea/core/placeholder.png', size: '180x180', class: 'product-summary__image'
+              .product-summary__info
+                %span.product-summary__name Product Title #{i}

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

@@ -0,0 +1,27 @@
+#styled-select.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'styled_select')
+
+  %p Provides a stylized select menu UI
+  %p The select_tag helper is decorated to automatically wrap most select tags in your application. You will need to update the markup of select tags injected as JST templates
+
+  .style-guide__example-block
+    .value
+      = select_tag "style-guide-example", options_for_select([ "Option 1", "Option 2", "Option 3" ], "Option 1")
+
+  %p should allow the optional passing of a modifier
+  .style-guide__example-block
+    = select_tag "style-guide-example-modified", options_for_select([ "Option 1", "Option 2", "Option 3" ], "Option 1"), modifier: 'styled-select--modified'
+
+  %p Displays validation state
+  .style-guide__example-block
+    .value
+      .styled-select
+        %select{ class: 'jquery-validation-error' }
+          %option{ disabled: true } Disabled Select Option
+
+  .style-guide__example-block
+    .value
+      .styled-select
+        %select{ class: 'jquery-validation-valid' }
+          %option Select Option

data/app/views/workarea/storefront/style_guides/components/_validation_icon.haml

@@ -0,0 +1,21 @@
+#validation-icon.style-guide__subsection
+
+  %h3= link_to_style_guide('components', 'validation-icon')
+
+  %p An icon which responds to validation state within a form field
+
+  .style-guide__example-block
+    .value
+      = text_field_tag 'validation_icon_field', nil, class: 'text-box'
+      = inline_svg('workarea/storefront/icons/validation_icon.svg', class: 'value__icon')
+
+  .style-guide__example-block
+    .value
+      = text_field_tag 'validation_icon_field_invalid', nil, class: 'value__error text-box'
+      = inline_svg('workarea/storefront/icons/validation_icon.svg', class: 'value__icon')
+      %span.value__error Error Message Text
+
+  .style-guide__example-block
+    .value
+      = text_field_tag 'validation_icon_field_valid', 'Value', class: 'text-box text-box--valid', required: true
+      = inline_svg('workarea/storefront/icons/validation_icon.svg', class: 'value__icon')

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

@@ -0,0 +1,77 @@
+#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'
+
+
+  %p Optionally contains an icon, use #{link_to_style_guide('components', 'validation-icon')} for stateful icon display
+
+  .style-guide__example-block
+    .value
+      = text_field_tag 'wl_value_text_field_icon', nil, class: 'text-box'
+      = inline_svg('workarea/storefront/icons/plus.svg', class: 'value__icon')
+
+  .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/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/_neutral_color_scheme.html.haml

@@ -0,0 +1,15 @@
+.grid.grid--auto
+  - colors = %w(white lightest-gray light-gray gray dark-gray black)
+  - colors.each do |color|
+    .grid__cell
+      .color-box
+        .color-box__swatch{ class: "color-box__swatch--#{color}" }
+        .color-box__swatch-name $#{color}
+
+.grid.grid--auto
+  - colors = %w(denim denim-wash cyan muted-blue)
+  - 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/_nvy_color_scheme.html.haml

@@ -0,0 +1,15 @@
+.grid.grid--auto
+  - colors = %w(white lightest-gray light-gray gray dark-gray black)
+  - colors.each do |color|
+    .grid__cell
+      .color-box
+        .color-box__swatch{ class: "color-box__swatch--#{color}" }
+        .color-box__swatch-name $#{color}
+
+.grid.grid--auto
+  - colors = %w(off-black deep-turqoise light-teal gold)
+  - 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/_vermillion_color_scheme.html.haml

@@ -0,0 +1,7 @@
+.grid.grid--auto
+  - colors = %w(off-black merlot rose-taupe rusty ginger light-beige beige dark-beige meadow)
+  - 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/_fonts.html.haml

@@ -0,0 +1,15 @@
+#fonts.style-guide__subsection
+
+  %h3= link_to_style_guide('typography', 'fonts')
+
+  %p These are the fonts available to the front-end.
+
+  %p Primary font, used site wide:
+  .style-guide__example-block
+    %p{ style: "font-family: #{Workarea.config.theme[:font_stacks][Workarea.config.theme[:primary_font_family].to_sym]};" }
+      Primary Font: #{Workarea.config.theme[:primary_font_family]}
+
+  %p Secondary font, used for headings, buttons etc.:
+  .style-guide__example-block
+    %p{ style: "font-family: #{Workarea.config.theme[:font_stacks][Workarea.config.theme[:secondary_font_family].to_sym]};" }
+      Secondary Font: #{Workarea.config.theme[:secondary_font_family]}

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

@@ -0,0 +1,40 @@
+#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
+
+  %p should display larger headings in the context of content blocks
+  .style-guide__example-block
+    .content-block
+      %h1 Heading 1
+      %h2 Heading 2
+      %h3 Heading 3
+
+  %p Optionally add a background to a heading using the heading--background modifier
+  .style-guide__example-block
+    %h1.heading.heading--background Heading 1
+    %h2.heading.heading--background Heading 2
+    %h3.heading.heading--background Heading 3
+    %h4.heading.heading--background Heading 4
+    %h5.heading.heading--background Heading 5
+    %h6.heading.heading--background Heading 6

data/app/views/workarea/storefront/users/_nvy_current_user.json.jbuilder

@@ -0,0 +1 @@
+json.first_name current_user.try(:first_name)

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

@@ -0,0 +1,15 @@
+.grid
+  .grid__cell
+    .box
+      .box__header
+        %span.box__action= link_to t('workarea.storefront.wish_lists.manage'), users_wish_list_path, class: 'button button--solid'
+        %h2.box__heading= t('workarea.storefront.wish_lists.wish_list')
+      .box__body
+        - if user.wish_list_items.any?
+          .grid
+            - user.wish_list_items.each do |item|
+              .grid__cell.grid__cell--50.grid__cell--33-at-medium
+                .product-summary{ itemscope: true, itemtype: 'http://schema.org/Product' }
+                  = render 'workarea/storefront/products/summary', product: item.product
+        - else
+          %p= t('workarea.storefront.wish_lists.empty_wish_list')

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

@@ -0,0 +1,51 @@
+- @title = t('workarea.storefront.users.edit_title')
+
+- content_for :breadcrumbs do
+  %p.breadcrumbs__node-group
+    %span.breadcrumbs__node{ itemprop: 'breadcrumb' }
+      = link_to t('workarea.storefront.layouts.home'), root_path, rel: 'home', class: 'breadcrumbs__link'
+    %span.breadcrumbs__node{ itemprop: 'breadcrumb' }
+      = link_to t('workarea.storefront.users.account'), users_account_path, class: 'breadcrumbs__link'
+    %span.breadcrumbs__node{ itemprop: 'breadcrumb' }
+      %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--large
+      .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 text-box--full', 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 text-box--full', 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 text-box--full', 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 text-box--full', minlength: minimum_password_length, autocomplete: 'off'
+            = inline_svg('workarea/storefront/icons/eye.svg', class: 'value__icon')
+      .grid__cell
+        = append_partials('storefront.edit_account_details', user: @user)
+      .grid__cell
+        .button-property
+          .value
+            = hidden_field_tag :email_signup, false, id: nil
+            = check_box_tag :email_signup, true, @user.email_signup?
+          = label_tag :email_signup, nil, class: 'button-property__name' do
+            %span.button-property__text= t('workarea.storefront.users.sign_up_for_email')
+    .grid.grid--auto.grid--middle.grid--center
+      %p.grid__cell= button_tag t('workarea.storefront.forms.save'), value: 'save_info', class: 'button'
+      %p.grid__cell= link_to t('workarea.storefront.forms.cancel'), users_account_path, class: "text-button", data: { dialog_close_button: '' }