diff --git a/src/implementations/twig/components/datepicker/datepicker.story.js b/src/implementations/twig/components/datepicker/datepicker.story.js index 3b355287488..7006b073e26 100644 --- 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 ` + + ${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 index 81c78e34451..ab12cd028a7 100644 --- 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,