forever_style_guide 2.0.3 → 3.0.0

data/app/assets/stylesheets/style_guide/modules/_hero_simple.scss

@@ -1,5 +1,4 @@
 .hero_simple-sample {
-  margin-top: $header-height;
   background-image: image-url("style_guide/hero/beach-girl-xs.jpg");
   background-size: contain;
 

data/app/helpers/forever_style_guide/application_helper.rb

@@ -3,6 +3,315 @@ require 'pathname'
 module ForeverStyleGuide
   module ApplicationHelper
 
+    #Path helpers for mounted style guide use
+    def www_url(path = '/', url = nil)
+      strip_subdomain("www", path, url)
+    end
+
+    def web_app_url(path = '/', url = nil)
+      strip_subdomain("my", path, url)
+    end
+
+    def store_url(path = '/', url = nil)
+      strip_subdomain("store", path, url)
+    end
+
+    def strip_subdomain(sub, path = '/', url = nil)
+      url ||= request.url if respond_to?(:request)
+      url = URI(url)
+      replace = url.to_s
+      protocols = ['www.', 'store.', 'my.']
+      replace = protocols.find { |protocol| replace.include?(protocol) }
+
+      #protect against a nil return that would break localhost
+      if replace.blank?
+        replace = '/'
+      end
+
+      url.host = url.host.sub(replace, "#{sub}.")
+      url.path = path
+      url.query = nil
+      url.to_s
+    end
+
+    # Web App Paths
+    def login_url
+      web_app_url('/login')
+    end
+
+    def sign_up_url
+      web_app_url('/signup')
+    end
+
+    def library_url
+      web_app_url('/inbox')
+    end
+
+    def projects_url
+      web_app_url('/projects')
+    end
+
+    def people_url
+      web_app_url('/people/family')
+    end
+
+    def app_home_url
+      web_app_url('/')
+    end
+
+    def user_settings_url
+      web_app_url('/settings') # TODO something not quite right here
+    end
+
+    def log_out_url
+      web_app_url('/logout') # TODO something not quite right here
+    end
+
+    # Marketing Site Paths
+    def marketing_home_url
+      www_url('/')
+    end
+
+    def about_url
+      www_url('/about')
+    end
+
+    def team_url
+      www_url('/about/team')
+    end
+
+    def beliefs_url
+      www_url('/about/beliefs')
+    end
+
+    def guarantee_url
+      www_url('/guarantee')
+    end
+
+    def storage_url
+      www_url('/guaranteed_storage')
+    end
+
+    def app_url
+      www_url('/app')
+    end
+
+    def valet_url
+      www_url('/valet')
+    end
+
+    def historian_url
+      www_url('/historian')
+    end
+
+    def artisan_url
+      www_url('/artisan')
+    end
+
+    def projects_marketing_url
+      www_url('/projects')
+    end
+
+    def promotions_url
+      www_url('/holidays')
+    end
+
+    def shipping_info_url
+      www_url('/shipping')
+    end
+
+    def bulk_orders_url
+      www_url('/bulk-orders')
+    end
+
+    def return_policy_url
+      www_url('/returns')
+    end
+
+    def p2p_url
+      www_url('/pixels2pages')
+    end
+
+    def customer_commitments_url
+      www_url('/commitments')
+    end
+
+    def opportunity_url
+      www_url('/opportunity')
+    end
+
+    def retreats_url
+      www_url('/retreats')
+    end
+
+    def press_url
+      www_url('/about/press')
+    end
+
+    # Store Paths
+    def cart_url
+      store_url('/cart')
+    end
+
+    def services_url
+      store_url('/services')
+    end
+
+    def digital_art_url
+      store_url('/digital_art')
+    end
+
+    def new_digital_art_url
+      store_url('/new_digital_art')
+    end
+
+    def sale_digital_art_url
+      store_url('/sale_digital_art')
+    end
+
+    def all_digital_art_url
+      store_url('/all_digital_art')
+    end
+
+    def print_url
+      store_url('/print')
+    end
+
+    def photo_books_url
+      store_url('/photobooks')
+    end
+
+    def cards_url
+      store_url('/cards')
+    end
+
+    def calendars_url
+      store_url('/calendars')
+    end
+
+    def wall_art_url
+      store_url('/wall_art')
+    end
+
+    def photo_gifts_url
+      store_url('/photo_gifts')
+    end
+
+    def page_prints_url
+      store_url('/page_prints')
+    end
+
+    def gift_certificate_url
+      store_url('/gift_certificates')
+    end
+
+    def gift_certificate_url
+      store_url('/gift_certificates')
+    end
+
+    def gifts_url
+      store_url('/gifts')
+    end
+
+    def find_ambassador_url
+      store_url('/find_ambassador')
+    end
+
+    def ambassador_direct_url
+      store_url('/ambassador-direct')
+    end
+
+    def upgrade_url
+      store_url('/upgrade')
+    end
+
+    def back_office_url
+      store_url('/back_office')
+    end
+
+    # External Paths
+    def forever_live_url
+      "http://www.foreverlive2016.com"
+    end
+
+    def facebook_url
+      "https://www.facebook.com/Forever"
+    end
+
+    def twitter_url
+      "https://www.twitter.com/forever"
+    end
+
+    def instagram_url
+      "https://www.instagram.com/forever_inc/"
+    end
+
+    def youtube_url
+      "https://www.youtube.com/channel/UCfBFL_W3FYW7W0wAr4EEGnA"
+    end
+
+    def pinterest_url
+      "https://www.pinterest.com/FOREVER/"
+    end
+
+    def blog_url
+      "https://blog.forever.com/"
+    end
+
+    def help_center_url
+      "https://forever1.zendesk.com/hc/en-us"
+    end
+
+    def contact_us_url
+      "https://forever1.zendesk.com/hc/en-us/requests/new"
+    end
+
+    def web_faq_url
+      "https://forever1.zendesk.com/hc/en-us/categories/200175058-Forever-Web-Mobile-Apps"
+    end
+
+    def artisan_faq_url
+      "https://forever1.zendesk.com/hc/en-us/sections/200632048-Artisan-software"
+    end
+
+    def historian_faq_url
+      "https://forever1.zendesk.com/hc/en-us/sections/200520187-Historian"
+    end
+
+    # TODO get updated videos on Zendesk
+    def zendesk_overview_video_url
+      "https://forever1.zendesk.com/hc/en-us/articles/204874607"
+    end
+
+    def zendesk_uploading_video_url
+      "https://forever1.zendesk.com/hc/en-us/articles/204496797"
+    end
+
+    def zendesk_organizing_video_url
+      "https://forever1.zendesk.com/hc/en-us/articles/203811218"
+    end
+
+    def zendesk_sharing_video_url
+      "https://forever1.zendesk.com/hc/en-us/articles/203935338"
+    end
+
+    def zendesk_tour_video_url
+      "https://forever1.zendesk.com/hc/en-us/articles/203913608"
+    end
+
+    def zendesk_albums_video_url
+      "https://forever1.zendesk.com/hc/en-us/articles/218144057"
+    end
+
+    def zendesk_tags_video_url
+      "https://forever1.zendesk.com/hc/en-us/articles/203834548"
+    end
+
+    def zendesk_dates_video_url
+      "https://forever1.zendesk.com/hc/en-us/articles/206462457"
+    end
+
+    # Path helpers for style guide dummy app
     def style_guide_path
       Rails.application.routes.named_routes[:forever_style_guide].path.spec.to_s
     end
@@ -31,6 +340,5 @@ module ForeverStyleGuide
       partial = File.read("#{style_guide_root}/app/views/#{partial_path}")
       escape_for_display(partial)
     end
-
   end
 end

data/app/views/forever_style_guide/demo/footer.html.erb

@@ -1,4 +1,4 @@
-<%= render partial: "layouts/forever_style_guide/navigation" %>
+<%= render partial: "forever_style_guide/sections/components/navigation/nav" %>
 
 <div class="container l-section">
   <div class="card l-section-far l-padded-thick" style="min-height: 800px;">

data/app/views/forever_style_guide/demo/hero.html.erb

@@ -1,6 +1,4 @@
-<header id="header-is_fixed">
-  <%= render partial: "layouts/forever_style_guide/navigation" %>
-</header>
+<%= render partial: "forever_style_guide/sections/components/navigation/nav" %>
 
 <div class="hero hero-sample hero-blur">
   <div class="row">

data/app/views/forever_style_guide/demo/hero_simple.html.erb

@@ -1,6 +1,4 @@
-<header id="header-is_fixed">
-  <%= render partial: "layouts/forever_style_guide/navigation" %>
-</header>
+<%= render partial: "forever_style_guide/sections/components/navigation/nav" %>
 
 <div class="hero_simple hero_simple-sample">
   <div class="container-fluid">

data/app/views/forever_style_guide/demo/navigation.html.erb

@@ -1,34 +1,50 @@
-<%= render partial: "layouts/forever_style_guide/navigation" %>
+<%= render partial: "forever_style_guide/sections/components/navigation/nav" %>
 
-<div class="jumbotron style-guide-section-header style-guide-section-header-primary hero hero-md">
-  <div class="container style-guide-section-header-title">
-    <h1>Style Guide Nav</h1>
+<div class="hero_simple hero_simple-sample">
+  <div class="container-fluid">
+    <div class="row">
+      <div class="col-xs-12 text-center color_block-trans-secondary hero_simple-block">
+        <h1 class="page-title color-white hero_simple-shadow">Check out our Unified Nav Component</h1>
+        <h2 class="page-title color-white hero_simple-shadow hero_simple-subheading">It gives users a robust and consistent experience</h2>
+        <%= link_to 'Primary Action', "#", class: 'btn btn-lg btn-primary hero_simple-block-cta', title: "Primary Action" %>
+        <%= link_to 'Learn More', "#", class: 'btn btn-lg btn-artisan btn-inverse hero_simple-block-cta', title: "Learn More" %>
+      </div>
+    </div>
   </div>
 </div>
 
-<div>
-  <%= render partial: "forever_style_guide/sections/components/navigation/dropdown" %>
-</div>
-<div class="jumbotron style-guide-section-header style-guide-section-header-secondary hero hero-md">
-  <div class="container style-guide-section-header-title">
-    <h1>Dropdown Nav</h1>
-  </div>
-</div>
-
-<div>
-  <%= render partial: "forever_style_guide/sections/components/navigation/marketing" %>
-</div>
-<div class="jumbotron style-guide-section-header style-guide-section-header-secondary hero hero-md">
-  <div class="container style-guide-section-header-title">
-    <h1>Marketing</h1>
-  </div>
-</div>
+<div class="color_block-white">
+  <div class="container">
+    <div class="l-padded-thick" style="min-height: 800px;">
+    <h1>New Nav &amp; Forever Style Guide 3.0.0</h1>
+      <ol>
+        <li class="l-section">Make sure you're using the style guide 3.0 gem
+          <pre class="well">
+            gem 'forever_style_guide', '3.0.0'
+          </pre>
+        </li>
+        <li class="l-section">
+          Add a helper to display to your application to use whole components from the style guide (not just styles)
+          <pre class="well">
+            def styleguide_component(type, properties)
+              render "forever_style_guide/sections/components/#{type}", properties
+            end
+          </pre>
+        </li>
+        <li class="l-section">
+          Call the components into your views
+          <pre class="well">
+            &lt;%= styleguide_component("navigation/nav", nil) %>
+          </pre>
+        </li>
 
-<div>
-  <%= render partial: "forever_style_guide/sections/components/navigation/signed_in" %>
-</div>
-<div class="jumbotron style-guide-section-header style-guide-section-header-secondary hero hero-md">
-  <div class="container style-guide-section-header-title">
-    <h1>Signed In</h1>
+        <li class="l-section">
+          The styleguide handles routing for all the apps to point at marketing site, store and web app.
+          <pre class="well">
+            app/helpers/forever_style_guide/application_helper.rb
+          </pre>
+        </li>
+      </ol>
+    </div>
   </div>
 </div>

data/app/views/forever_style_guide/demo/promo_banner.html.erb

@@ -1,6 +1,4 @@
-<header id="header-is_fixed">
-  <%= render partial: "forever_style_guide/sections/components/navigation/marketing_signed_in" %>
-</header>
+<%= render partial: "forever_style_guide/sections/components/navigation/nav" %>
 
 <!-- Promo banner markup -->
 <div class="promo_banner container-fluid">

data/app/views/forever_style_guide/sections/components/navigation/_nav.erb

@@ -0,0 +1,60 @@
+<header id='header-is_fixed'>
+  <nav class='navbar navbar-default color_block-white' role='navigation'>
+
+    <div class='navbar-header'>
+      <button type="button" class="navbar-toggle offcanvas-toggle pull-left nav-icon-stack" data-toggle="offcanvas" data-target="#js-main-nav-offcanvas">
+        <i class='fa fa-reorder'></i>
+        <span class='nav-icon-label'>Menu</span>
+      </button>
+
+      <div class="navbar-brand">
+        <%= link_to marketing_home_url, title: 'Forever Guaranteed Storage, Digital Scrapbooking, and Printing Logo' do %>
+          <%= image_tag image_url("forever_style_guide/forever-logo.jpg"), class: "navbar-brand-logo", alt: "Forever Guaranteed Storage, Digital Scrapbooking, and Printing Logo", title: 'Forever Guaranteed Storage, Digital Scrapbooking, and Printing Logo' %>
+        <% end %>
+      </div>
+
+      <!-- Show cart in primary header bar on mobile: see nav_account_dropdown.erb for desktop -->
+      <%= link_to cart_url, class: 'visible-grid-float-breakpoint nav-icon-stack cart-icon', title:'View Your Shopping Cart', id: 'mini-cart' do %>
+        <i class='fa fa-shopping-cart'></i>
+        <span class='nav-icon-label'>Cart</span>
+      <% end %>
+    </div>
+
+    <div class="navbar-offcanvas" id="js-main-nav-offcanvas">
+      <div class="navbar-offcanvas-container">
+
+        <ul class='nav navbar-nav navbar-left'>
+
+          <li class="visible-xs visible-sm">
+            <div class="navbar-toggle navbar-toggle-close color_block-white" id="js-close-main-nav">
+              <div class="nav-icon-stack pull-left navbar-toggle-close-left">
+                <i class='fa fa-close'></i>
+                <span class='nav-icon-label'>Close</span>
+              </div>
+            </div>
+          </li>
+
+          <li class='dropdown dropdown-full_width'>
+            <%= render partial: "forever_style_guide/sections/components/navigation/nav_my_forever_dropdown" %>
+          </li>
+
+          <li class='dropdown dropdown-full_width'>
+            <%= render partial: "forever_style_guide/sections/components/navigation/nav_products_dropdown" %>
+          </li>
+
+          <li class='dropdown dropdown-full_width'>
+            <%= render partial: "forever_style_guide/sections/components/navigation/nav_community_dropdown" %>
+          </li>
+        </ul>
+
+        <ul class='nav navbar-nav navbar-right'>
+          <%= render partial: "forever_style_guide/sections/components/navigation/nav_account_dropdown" %>
+          <%= render partial: "forever_style_guide/sections/components/navigation/nav_ambassador_dropdown" %>
+        </ul>
+
+        <%= render partial: "forever_style_guide/sections/components/navigation/nav_account_signed_out_mobile" %>
+      </div>
+    </div>
+
+  </nav>
+</header>