Language switcher frontend

app/assets/stylesheets/darkswarm/menu.css.scss

@@ -36,10 +36,15 @@ nav {
   .top-bar-section .has-dropdown > a {
     padding-right: ($topbar-height / 3) !important;
 
-    i.ofn-i_022-cog {
+    i.ofn-i_022-cog, i.fa{
       font-size: 24px;
       line-height: $topbar-height;
     }
+
+    i.fa.fa-globe {
+      color: #666;
+      font-size: 27px
+    }
   }
 
   .top-bar-section .has-dropdown > a:after {
@@ -95,6 +100,11 @@ nav {
   background-color: white;
 }
 
+.off-canvas-list li.language-switcher ul li {
+  list-style-type: none;
+  padding-left: 0.5em;
+}
+
 .off-canvas-wrap.move-right .tab-bar .menu-icon {
   @include box-shadow(inset 0 0 6px 2px rgba(0, 0, 0, 0.5));
 }

app/views/layouts/darkswarm.html.haml

@@ -13,6 +13,7 @@
     - else
       = favicon_link_tag "/favicon-staging.ico"
     %link{href: "https://fonts.googleapis.com/css?family=Roboto:400,300italic,400italic,300,700,700italic|Oswald:300,400,700", rel: "stylesheet", type: "text/css"}
+    %link{href: "https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css", rel: "stylesheet"}
 
     = yield :scripts
     %script{:src => "https://js.stripe.com/v3/", :type => "text/javascript"}

app/views/shared/menu/_large_menu.html.haml

@@ -60,6 +60,14 @@
           = t 'powered_by'
           %a{href: '/'}
             = t 'title'
+      - if I18n.available_locales.count > 1
+        %li.language-switcher.has-dropdown.not-click
+          %a{href: '#'}
+            %i.fa.fa-globe
+          %ul.dropdown
+            - I18n.available_locales.each do |l|
+              %li
+                %a{href: "?locale=#{l.to_s}" }= t('language_name', locale: l)
       - if spree_current_user.nil?
         = render 'shared/signed_out'
       - else

app/views/shared/menu/_mobile_menu.html.haml

@@ -40,6 +40,16 @@
         %span.nav-primary
           %i.ofn-i_036-producers
           = t 'label_producers'
+    - if I18n.available_locales.count > 1
+      %li.language-switcher.li-menu
+        %a
+          %i.fa.fa-globe
+          = t('language_name')
+        %ul
+          - I18n.available_locales.each do |l|
+            - if I18n.locale != l
+              %li
+                %a{href: "?locale=#{l.to_s}" }= t('language_name', locale: l)
     - if feature? :connect_learn_homepage
       %li.li-menu
         %a{href: "https://openfoodnetwork.org/au/connect/"}

config/locales/en.yml

@@ -55,6 +55,7 @@
 
 en:
   # Overridden here due to a bug in spree i18n (Issue #870, and issue #1800)
+  language_name: "English" # Localised name of this language
   activerecord:
     attributes:
       spree/order:

spec/features/consumer/multilingual_spec.rb

@@ -68,4 +68,36 @@ feature 'Multilingual', js: true do
       expect(page).to have_content 'TIENDAS'
     end
   end
+
+  describe "using the language switcher UI" do
+    context "when there is only one language available" do
+      around do |example|
+        I18n.available_locales = ['en']
+        example.run
+        I18n.available_locales = ['en', 'es']
+      end
+
+      it "hides the dropdown language menu" do
+        visit root_path
+        expect(page).to_not have_css 'ul.right li.language-switcher.has-dropdown'
+      end
+    end
+
+    it "allows switching language via the main navigation" do
+      visit root_path
+
+      expect(page).to have_content 'SHOPS'
+
+      find('ul.right li.language-switcher').click
+      within'ul.right li.language-switcher ul.dropdown' do
+        expect(page).to have_link I18n.t('language_name', locale: :en), href: '?locale=en'
+        expect(page).to have_link I18n.t('language_name', locale: :es, default: 'Language Name'), href: '?locale=es'
+
+        find('li a[href="?locale=es"]').click
+      end
+
+      expect(page.driver.browser.cookies['locale'].value).to eq 'es'
+      expect(page).to have_content 'TIENDAS'
+    end
+  end
 end