Merge pull request #312 from CoderDojo/text-direction-component

Text direction component

Author: Glen Pike

src/App.vue

@@ -1,11 +1,13 @@
 <template>
   <div id="app">
-    <cd-header></cd-header>
-    <div class="cd-menu__content-container">
-      <router-view></router-view>
-      <cd-cookie-notice></cd-cookie-notice>
-    </div>
-    <cd-footer></cd-footer>
+    <cd-text-direction-wrapper>
+      <cd-header></cd-header>
+      <div class="cd-menu__content-container">
+        <router-view></router-view>
+        <cd-cookie-notice></cd-cookie-notice>
+      </div>
+      <cd-footer></cd-footer>
+    </cd-text-direction-wrapper>
   </div>
 </template>
 
@@ -14,11 +16,13 @@
   import cdHeader from './common/cd-header';
   import cdFooter from './common/cd-footer';
   import cdCookieNotice from './common/cd-cookie-notice';
+  import cdTextDirectionWrapper from './common/cd-text-direction-wrapper';
 
   export default {
     name: 'app',
     store,
     components: {
+      cdTextDirectionWrapper,
       cdHeader,
       cdFooter,
       cdCookieNotice,

src/common/cd-covid-banner.vue

@@ -1,25 +1,34 @@
 <template>
     <div class="cd-banner">
-      <p>
-         {{ $t('Thank you for your interest in joining the CoderDojo community!') }}
-         {{ $t('Due to the coronavirus pandemic, there are different restrictions in place across the world.') }}
-         {{ $t('Please follow the appropriate public health advice for your country or region before planning in-person club events.') }}
-      </p>
-      <p>
-        {{ $t('If you are ready to hold in-person club events soon, please') }}
-        <a class="cd-banner-link" href="https://zen.coderdojo.com/dashboard/start-dojo">{{ $t('register your details') }}</a>
-        {{ $t('and we will be in touch.') }}
-      </p>
-      <p>
-        {{ $t('If you’re not able to start your Dojo in person yet, there are many other ways that you can get involved in the meantime.') }}
-        {{ $t('Check out the exciting opportunities for young people, parents, volunteers, and educators to learn and get creative with tech through') }}
-        <a class="cd-banner-link" target="_blank" href="https://www.raspberrypi.org/learn/?utm_source=coderdojo&amp;utm_medium=covid-banner&amp;utm_campaign=dmah">{{ $t('Digital Making at Home') }}</a>
-        {{ $t('from the Raspberry Pi Foundation.') }}
-      </p>
+      <cd-text-direction-wrapper direction="ltr">
+        <p>
+          {{ $t('Thank you for your interest in joining the CoderDojo community!') }}
+          {{ $t('Due to the coronavirus pandemic, there are different restrictions in place across the world.') }}
+          {{ $t('Please follow the appropriate public health advice for your country or region before planning in-person club events.') }}
+        </p>
+        <p>
+          {{ $t('If you are ready to hold in-person club events soon, please') }}
+          <a class="cd-banner-link" href="https://zen.coderdojo.com/dashboard/start-dojo">{{ $t('register your details') }}</a>
+          {{ $t('and we will be in touch.') }}
+        </p>
+        <p>
+          {{ $t('If you’re not able to start your Dojo in person yet, there are many other ways that you can get involved in the meantime.') }}
+          {{ $t('Check out the exciting opportunities for young people, parents, volunteers, and educators to learn and get creative with tech through') }}
+          <a class="cd-banner-link" target="_blank" href="https://www.raspberrypi.org/learn/?utm_source=coderdojo&amp;utm_medium=covid-banner&amp;utm_campaign=dmah">{{ $t('Digital Making at Home') }}</a>
+          {{ $t('from the Raspberry Pi Foundation.') }}
+        </p>
+      </cd-text-direction-wrapper>
     </div>
 </template>
 
 <script>
+import cdTextDirectionWrapper from './cd-text-direction-wrapper';
+
+export default {
+  components: {
+    cdTextDirectionWrapper,
+  },
+};
 </script>
 
 <style scoped lang="less">

src/common/cd-text-direction-wrapper.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="lang-wrapper" v-bind:dir="textDirection">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TextDirectionWrapper',
+  props: {
+    direction: String,
+  },
+  computed: {
+    textDirection() {
+      if (this.direction) {
+        return this.direction;
+      }
+
+      const config = this.$store.getters.chosenLanguageConfig;
+      let direction = 'ltr';
+      if (config && config.dir) {
+        direction = config.dir;
+      }
+      return direction;
+    },
+  },
+};
+</script>
+
+<style>
+</style>

src/locale/cd-lang-picker.vue

@@ -3,7 +3,7 @@
     <div class="col-md-4 col-sm-6">
       <span class="fa fa-language fa-2x cd-lang-picker__icon"></span>
       <select class="cd-lang-picker__select" v-model="lang">
-        <option v-for="availableLanguage in availableLanguages" :value="availableLanguage.code">{{ availableLanguage.name }} ({{ availableLanguage.country }})</option>
+        <option v-for="availableLanguage in availableLanguages" :value="availableLanguage.code" v-bind:key="availableLanguage.code">{{ availableLanguage.name }} ({{ availableLanguage.country }})</option>
       </select>
     </div>
     <div class="col-md-8 col-sm-6">
@@ -52,22 +52,26 @@
             this.setMomentLocale(val);
             this.$i18n.setLocaleMessage(val, strings);
             this.$i18n.locale = val;
+            const matchingLanguageConfig = find(this.availableLanguages,
+              language => language.code === val);
+            this.$store.dispatch('updateChosenLanguageConfig', matchingLanguageConfig);
           });
       },
     },
     async created() {
       this.availableLanguages = (await this.getAvailableLanguages()).body;
       const browserLocale = navigator.language.replace('-', '_');
-      const matchingLocale = find(this.availableLanguages,
+      const matchingLanguageConfig = find(this.availableLanguages,
         language => language.code === browserLocale);
       const langCookie = Cookie.get('NG_TRANSLATE_LANG_KEY');
       if (langCookie) {
         this.lang = langCookie.substring(1, langCookie.length - 1);
-      } else if (matchingLocale) {
+      } else if (matchingLanguageConfig) {
         this.lang = browserLocale;
       } else {
         this.lang = 'en_US';
       }
+      this.$store.dispatch('updateChosenLanguageConfig', matchingLanguageConfig);
     },
   };
 </script>

src/store/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import order from './modules/order';
+import language from './modules/language';
 
 Vue.use(Vuex);
 
@@ -52,5 +53,6 @@ export default new Vuex.Store({
   },
   modules: {
     order,
+    language,
   },
 });

src/store/modules/language.js

@@ -0,0 +1,27 @@
+import Vue from 'vue';
+
+export const mutations = {
+  setChosenLanguageConfig(state, chosenLanguageConfig) {
+    Vue.set(state, 'chosenLanguageConfig', chosenLanguageConfig);
+  },
+};
+
+export const actions = {
+  updateChosenLanguageConfig({ commit }, chosenLanguageConfig) {
+    commit('setChosenLanguageConfig', chosenLanguageConfig);
+  },
+};
+
+export const getters = {
+  chosenLanguageConfig: state => state.chosenLanguageConfig,
+};
+
+export default {
+  namespaced: false,
+  state: {
+    chosenLanguageConfig: null,
+  },
+  mutations,
+  actions,
+  getters,
+};

test/unit/index.js

@@ -1,6 +1,10 @@
 import Vue from 'vue';
 import Vuex from 'vuex';
 import VueResource from 'vue-resource';
+import chai from 'chai';
+import sinonChai from 'sinon-chai';
+
+chai.use(sinonChai);
 
 /* eslint-disable no-extend-native, no-param-reassign, func-names */
 if (!String.prototype.endsWith) {

test/unit/specs/common/cd-text-direction-wrapper.spec.js

@@ -0,0 +1,43 @@
+import vueUnitHelper from 'vue-unit-helper';
+import TextDirectionWrapper from '@/common/cd-text-direction-wrapper';
+
+describe('Text Direction Wrapper', () => {
+  describe('computed.textDirection', () => {
+    context('when chosen language specifies a direction', () => {
+      it('returns that value', () => {
+        const vm = vueUnitHelper(TextDirectionWrapper);
+        vm.$store = {
+          getters: {
+            get chosenLanguageConfig() { return { dir: 'test' }; },
+          },
+        };
+        expect(vm.textDirection).to.eql('test');
+      });
+    });
+
+    context('when chosen language doesn\'t specify a direction', () => {
+      it('returns default', () => {
+        const vm = vueUnitHelper(TextDirectionWrapper);
+        vm.$store = {
+          getters: {
+            get chosenLanguageConfig() { return { }; },
+          },
+        };
+        expect(vm.textDirection).to.eql('ltr');
+      });
+    });
+
+    context('when initialised with a prop', () => {
+      it('overrides the chosen language direction', () => {
+        const vm = vueUnitHelper(TextDirectionWrapper);
+        vm.direction = 'down';
+        vm.$store = {
+          getters: {
+            get chosenLanguageConfig() { return { dir: 'test' }; },
+          },
+        };
+        expect(vm.textDirection).to.eql('down');
+      });
+    });
+  });
+});

test/unit/specs/locale/cd-lang-picker.spec.js

@@ -1,11 +1,14 @@
 import vueUnitHelper from 'vue-unit-helper';
 import LangPicker from '!!vue-loader?inject!@/locale/cd-lang-picker';
+import { expect } from 'chai';
+import Vuex from 'vuex';
 
 describe('Lang Picker', () => {
   let CookieMock;
   let LocaleServiceMock;
   let MomentMock;
   let LangPickerWithMocks;
+  const StoreMock = new Vuex.Store();
 
   beforeEach(() => {
     CookieMock = {
@@ -23,6 +26,8 @@ describe('Lang Picker', () => {
       './service': LocaleServiceMock,
       moment: MomentMock,
     });
+
+    StoreMock.dispatch = sinon.stub();
   });
 
   afterEach(() => {
@@ -74,6 +79,7 @@ describe('Lang Picker', () => {
         };
         LocaleServiceMock.getStrings.withArgs('es_ES').returns(Promise.resolve({ body: stringsMock }));
         sinon.stub(vm, 'setMomentLocale');
+        vm.$store = StoreMock;
 
         // ACT
         vm.$watchers.lang('es_ES');
@@ -89,6 +95,7 @@ describe('Lang Picker', () => {
             foo: 'foo',
           });
           expect(vm.$i18n.locale).to.equal('es_ES');
+          expect(StoreMock.dispatch).to.have.been.calledWith('updateChosenLanguageConfig');
           done();
         });
       });
@@ -99,6 +106,7 @@ describe('Lang Picker', () => {
     it('should recover languages from the API', async () => {
       // ARRANGE
       const vm = vueUnitHelper(LangPickerWithMocks);
+      vm.$store = StoreMock;
       CookieMock.get.withArgs('NG_TRANSLATE_LANG_KEY').returns('"es_ES"');
       vm.getAvailableLanguages = sinon.stub().resolves({ body: ['a'] });
       // ACT
@@ -115,16 +123,19 @@ describe('Lang Picker', () => {
       CookieMock.get.withArgs('NG_TRANSLATE_LANG_KEY').returns('"es_ES"');
       vm.getAvailableLanguages = sinon.stub().resolves({ body: [{ code: 'es_ES' }] });
 
+      vm.$store = StoreMock;
       // ACT
       await vm.$lifecycleMethods.created();
 
       // ASSERT
       expect(vm.lang).to.equal('es_ES');
+      expect(StoreMock.dispatch).to.have.been.calledWith('updateChosenLanguageConfig');
     });
 
     it('should set lang to the browser locale if no cookie, and locale matches an available one', async () => {
       // ARRANGE
       const vm = vueUnitHelper(LangPickerWithMocks);
+      vm.$store = StoreMock;
       CookieMock.get.withArgs('NG_TRANSLATE_LANG_KEY').returns(undefined);
       vm.getAvailableLanguages = sinon.stub().resolves({ body: [{ code: 'it_IT' }] });
       Object.defineProperty(window.navigator, 'language', { value: 'it-IT', configurable: true });
@@ -134,11 +145,13 @@ describe('Lang Picker', () => {
 
       // ASSERT
       expect(vm.lang).to.equal('it_IT');
+      expect(StoreMock.dispatch).to.have.been.calledWith('updateChosenLanguageConfig');
     });
 
     it('should set lang to en_US if no cookie and browser locale doesnt match available lang', async () => {
       // ARRANGE
       const vm = vueUnitHelper(LangPickerWithMocks);
+      vm.$store = StoreMock;
       vm.getAvailableLanguages = sinon.stub().resolves({ body: [{ code: 'en_US' }] });
       CookieMock.get.withArgs('NG_TRANSLATE_LANG_KEY').returns(undefined);
       Object.defineProperty(window.navigator, 'language', { value: 'zh-CN', configurable: true });
@@ -148,6 +161,7 @@ describe('Lang Picker', () => {
 
       // ASSERT
       expect(vm.lang).to.equal('en_US');
+      expect(StoreMock.dispatch).to.have.been.calledWith('updateChosenLanguageConfig');
     });
   });
 });

test/unit/specs/store/modules/language.spec.js

@@ -0,0 +1,36 @@
+import { mutations, actions, getters } from '@/store/modules/language';
+import { expect } from 'chai';
+
+describe('Language Store', () => {
+  describe('mutations', () => {
+    const { setChosenLanguageConfig } = mutations;
+    it('setChosenLanguageConfig', () => {
+      const state = { chosenLanguageConfig: null };
+      const newLanguageConfig = { dir: 'test' };
+
+      setChosenLanguageConfig(state, newLanguageConfig);
+
+      expect(state.chosenLanguageConfig.dir).to.eq('test');
+    });
+  });
+
+  describe('actions', () => {
+    it('updateChosenLanguageConfig', () => {
+      const commit = sinon.spy();
+      const state = {};
+
+      const chosenLanguageConfig = { dir: 'down' };
+
+      actions.updateChosenLanguageConfig({ commit, state }, chosenLanguageConfig);
+
+      expect(commit.args).to.deep.equal([['setChosenLanguageConfig', chosenLanguageConfig]]);
+    });
+  });
+
+  describe('getters', () => {
+    it('chosenLanguageConfig', () => {
+      const state = { chosenLanguageConfig: { dir: 'left' } };
+      expect(getters.chosenLanguageConfig(state).dir).to.eq('left');
+    });
+  });
+});