feat(datepicker): Adding translatibility - FRONT-3573

ec-europa · Mar 18, 2022 · 0b6247f · 0b6247f
1 parent 1019c6b
commit 0b6247f
Show file tree

Hide file tree

Showing 2 changed files with 67 additions and 0 deletions.
diff --git a/src/implementations/twig/components/datepicker/datepicker.story.js b/src/implementations/twig/components/datepicker/datepicker.story.js
@@ -5,12 +5,40 @@ import getSystem from '@ecl/builder/utils/getSystem';
 
 import specsEc from '@ecl/specs-component-datepicker/demo/data--ec';
 import specsEu from '@ecl/specs-component-datepicker/demo/data--eu';
+
 import datepicker from './datepicker.html.twig';
 import notes from './README.md';
 
 const system = getSystem();
 const dataDefault = system === 'eu' ? specsEu : specsEc;
 
+const dataTranslated = {
+  ...dataDefault,
+  autoinit: false,
+  helper_text: "Ceci est le texte d'aide de l'entrée",
+  invalid_text: "Ceci est le message d'erreur",
+};
+
+const withInit = (story) => {
+  const demo = story();
+  return `
+  <script>
+    var elt = document.querySelector('[data-ecl-datepicker-toggle]');
+    var datepicker = new ECL.Datepicker(elt, {
+      format: 'DD/MMM/YYYY',
+      i18n: {
+        previousMonth : 'Mois précédent',
+        nextMonth     : 'Mois prochain',
+        months        : ['Janvier','Février','Mars','Avril','Mai','Juin','Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
+        weekdays      : ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
+        weekdaysShort : ['Dim','Lun','Mar','Mer','Jeu','Ven','Sam']
+      }
+    });
+    datepicker.init();
+  </script>
+  ${demo}`;
+};
+
 const getArgs = (data) => ({
   show_label: true,
   show_helper: true,
@@ -61,3 +89,12 @@ Default.args = getArgs(dataDefault);
 Default.argTypes = getArgTypes(dataDefault);
 Default.parameters = { notes: { markdown: notes, json: dataDefault } };
 Default.decorators = [withNotes, withCode];
+
+export const Translated = (args) =>
+  datepicker(prepareData(dataTranslated, args));
+
+Translated.storyName = 'translated';
+Translated.args = getArgs(dataTranslated);
+Translated.argTypes = getArgTypes(dataTranslated);
+Translated.parameters = { notes: { markdown: notes, json: dataTranslated } };
+Translated.decorators = [withNotes, withInit, withCode];
diff --git a/src/implementations/vanilla/components/datepicker/datepicker.js b/src/implementations/vanilla/components/datepicker/datepicker.js
@@ -29,6 +29,34 @@ export class Datepicker {
       theme = 'ecl-datepicker-theme',
       yearRange = 40,
       reposition = false,
+      i18n = {
+        previousMonth: 'Previous Month',
+        nextMonth: 'Next Month',
+        months: [
+          'January',
+          'February',
+          'March',
+          'April',
+          'May',
+          'June',
+          'July',
+          'August',
+          'September',
+          'October',
+          'November',
+          'December',
+        ],
+        weekdays: [
+          'Sunday',
+          'Monday',
+          'Tuesday',
+          'Wednesday',
+          'Thursday',
+          'Friday',
+          'Saturday',
+        ],
+        weekdaysShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
+      },
       showDaysInNextAndPreviousMonths = true,
       enableSelectionDaysInNextAndPreviousMonths = true,
     } = {}
@@ -46,6 +74,7 @@ export class Datepicker {
     this.format = format;
     this.theme = theme;
     this.yearRange = yearRange;
+    this.i18n = i18n;
     this.showDaysInNextAndPreviousMonths = showDaysInNextAndPreviousMonths;
     this.enableSelectionDaysInNextAndPreviousMonths =
       enableSelectionDaysInNextAndPreviousMonths;
@@ -61,6 +90,7 @@ export class Datepicker {
       format: this.format,
       yearRange: this.yearRange,
       firstDay: 1,
+      i18n: this.i18n,
       theme: this.theme,
       reposition: this.reposition,
       showDaysInNextAndPreviousMonths: this.showDaysInNextAndPreviousMonths,