@telus-uds/components-web 1.2.0 → 1.4.0

package/lib/DatePicker/CalendarContainer.js

@@ -0,0 +1,221 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactDatesCss = _interopRequireDefault(require("./reactDatesCss"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const CalendarContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "CalendarContainer",
+  componentId: "components-web__sc-qdc1tg-0"
+})(_ref => {
+  let {
+    daySize,
+    validation,
+    remainingTokens,
+    calendarMonthFontTokens,
+    dayPickerNavigationButtonTokens,
+    defaultFontTokens
+  } = _ref;
+  return `
+  ${_reactDatesCss.default}
+  > div {
+    z-index: 3;
+  }
+  .SingleDatePicker,
+  .SingleDatePickerInput {
+    display: block;
+  }
+  .SingleDatePicker_picker {
+    box-shadow: none;
+    border: 1px solid ${remainingTokens.singleDatePickerBorderColor};
+    border-radius: ${remainingTokens.singleDatePickerRadius};
+    padding: ${remainingTokens.singleDatePickerPaddingTopBottom}px ${remainingTokens.singleDatePickerLeftRight}px;
+    z-index: 3;
+  }
+  .DateInput {
+    width: 100%;
+    border: 2px solid ${remainingTokens.dateInputBorderColor};
+    border-radius: ${remainingTokens.dateInputBorderRadius};
+    ${validation === 'error' && `input { border-color: ${remainingTokens.invalidInputMixin}; }`};
+    ${validation === 'success' && `input { border-color: ${remainingTokens.validInputMixin}; }`};
+  }
+  .DateInput:hover {
+    border: 2px solid ${remainingTokens.dateInputHoverBorderColor};
+  }
+  .DateInput:focus {
+    border: 2px solid ${remainingTokens.dateInputFocusBorderColor};
+  }
+  .SingleDatePickerInput__withBorder {
+    border: 0 !important;
+  }
+  .DateInput_input {
+    box-sizing: border-box;
+    padding: 1rem;
+    border: 1px solid ${remainingTokens.dateInputInsideBorderColor};
+    border-radius: 4px;
+    min-height: 3.25rem;
+    color: ${remainingTokens.dateInputInsideColor};
+    font-weight: 400;
+    font-size: 1rem;
+    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.05);
+  }
+  .DateInput_fang {
+    transform: translateY(2px);
+    z-index: 4;
+    left: ${(daySize * 8.5 - 20) / 2}px;
+  }
+  .DateInput_fangStroke {
+    stroke: ${remainingTokens.dateInputStrokeColor};
+  }
+  .CalendarMonth_caption {
+    color: ${remainingTokens.calendarMonthCaptionColor};
+    font-family: ${calendarMonthFontTokens.fontFamily};
+    font-size: ${remainingTokens.calendarMonthCaptionFontSize};
+    font-weight: ${calendarMonthFontTokens.fontWeight};
+    line-height: ${remainingTokens.calendarMonthCaptionLineHeight};
+    padding-bottom: ${remainingTokens.calendarMonthCaptionPaddingBottom}px;
+  }
+  .DayPicker__withBorder {
+    box-shadow: none;
+  }
+  .DayPickerNavigation_button {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    border: 1px solid ${remainingTokens.dayPickerNavigationButtonBorderColor};
+    background-color: ${remainingTokens.dayPickerNavigationButtonBackgroundColor};
+    border-radius: 50%;
+    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
+    max-height: ${remainingTokens.dayPickerNavigationButtonMaxHeight}px;
+    max-width: ${remainingTokens.dayPickerNavigationButtonMaxWidth}px;
+    position: absolute;
+    top: 18px;
+    line-height: 0.78;
+    padding: ${remainingTokens.dayPickerNavigationButtonPadding}px;
+    cursor: pointer;
+    user-select: none;
+    &:nth-child(1) {
+      left: ${remainingTokens.dayPickerNavigationButtonChildLeft}px;
+    }
+    &:nth-child(2) {
+      right: ${remainingTokens.dayPickerNavigationButtonChildRight}px;
+      i {
+        font-family: 'TELUS Core Icons';
+        display: inline-block;
+        font-weight: normal;
+        font-style: normal;
+        speak: none;
+        text-decoration: inherit;
+        text-transform: none;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        line-height: 1;
+        vertical-align: middle;
+        &:before {
+          content: '\\F107';
+          display: inline-block;
+        }
+      }
+    }
+    & svg {
+      fill: ${remainingTokens.dayPickerNavigationButtonChildSvgFill};
+    }
+  }
+  .DayPickerNavigation_button__default:focus,
+  .DayPickerNavigation_button__default:hover {
+    border: 1px solid ${remainingTokens.dayPickerNavigationButtonDefaultHoverBorderColor};
+  }
+  .DayPickerNavigation_svg__horizontal {
+    fill: ${remainingTokens.dayPickerNavigationSVGHorizontalFill};
+  }
+  .DayPicker_weekHeader {
+    color: ${remainingTokens.dayPickerWeekHeaderColor};
+    font-family: ${dayPickerNavigationButtonTokens.fontFamily};
+    font-weight: ${dayPickerNavigationButtonTokens.fontWeight};
+    font-feature-settings: 'ss01' on, 'ss03' on, 'ss08' on;
+    line-height: ${remainingTokens.dayPickerWeekHeaderLineHeight};
+    & small {
+      font-size: ${remainingTokens.dayPickerWeekHeaderSmall};
+    }
+    & li {
+      max-width: ${daySize}px !important;
+    }
+  }
+  .CalendarDay__default {
+    padding: 0px;
+    position: relative;
+    background-clip: padding-box;
+    border: ${remainingTokens.calendarDayDefaultBorder} solid ${remainingTokens.calendarDayDefaultBorderColor};
+    vertical-align: middle;
+    font-family: ${defaultFontTokens.fontFamily};
+    font-weight: ${defaultFontTokens.fontWeight}
+    font-feature-settings: 'ss01' on, 'ss03' on, 'ss08' on;
+    font-size: ${remainingTokens.calendarDayDefaultFontSize};
+    line-height: ${daySize - 3}px !important;
+    color: ${remainingTokens.calendarDayDefaultColor};
+    text-decoration: none;
+    transition: all 0.3s;
+    &:before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      height: ${remainingTokens.calendarDayDefaultBeforeHeight}px;
+      width: ${remainingTokens.calendarDayDefaultBeforeWidth}px;
+      border-radius: 50%;
+      background: transparent;
+      transition: all 0.3s;
+      z-index: -1;
+    }
+  }
+  .CalendarDay__default:hover,
+  .CalendarDay__selected,
+  .CalendarDay__selected:active,
+  .CalendarDay__selected:hover {
+    background: none;
+    border: 1px solid ${remainingTokens.calendarDaySelectedHoverBorderColor};
+    color: ${remainingTokens.calendarDaySelectedHoverColor};
+    text-decoration: none;
+    z-index: 0;
+    &:before {
+      background: ${remainingTokens.calendarDaySelectedHoverBeforeBackground};
+    }
+  }
+  .CalendarDay__default.CalendarDay__selected,
+  .CalendarDay__default.CalendarDay__selected:active
+    .CalendarDay__default.CalendarDay__selected:hover {
+    color: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverColor};
+    text-decoration: none;
+    &:before {
+      background: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBackground};
+    }
+  }
+  .CalendarDay__blocked_out_of_range,
+  .CalendarDay__blocked_out_of_range:active,
+  .CalendarDay__blocked_out_of_range:hover,
+  .CalendarDay__blocked_calendar,
+  .CalendarDay__blocked_calendar:active,
+  .CalendarDay__blocked_calendar:hover {
+    font-weight: 300;
+    background: ${remainingTokens.calendarDayBlockedCalendarHoverBackground};
+    background-clip: padding-box;
+    color: ${remainingTokens.calendarDayBlockedCalendarHoverColor};
+    text-decoration: none;
+    &:before {
+      content: none;
+    }
+  }
+`;
+});
+
+var _default = CalendarContainer;
+exports.default = _default;

package/lib/DatePicker/DatePicker.js

@@ -0,0 +1,329 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _reactMomentProptypes = _interopRequireDefault(require("react-moment-proptypes"));
+
+require("react-dates/initialize");
+
+var _SingleDatePicker = _interopRequireDefault(require("react-dates/lib/components/SingleDatePicker"));
+
+var _DayPickerSingleDateController = _interopRequireDefault(require("react-dates/lib/components/DayPickerSingleDateController"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _CalendarContainer = _interopRequireDefault(require("./CalendarContainer"));
+
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+
+const getResponsiveDaySize = function () {
+  let inline = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+  let viewport = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'md';
+  let responsiveDaySize;
+
+  if (viewport === 'xs') {
+    responsiveDaySize = inline ? undefined : 36;
+  } else {
+    responsiveDaySize = inline ? 60 : 44;
+  }
+
+  return responsiveDaySize;
+};
+
+const getIcon = icon => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+  icon: icon,
+  variant: {
+    size: 'small'
+  }
+});
+
+const MonthCenterContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "DatePicker__MonthCenterContainer",
+  componentId: "components-web__sc-mz8fi3-0"
+})({
+  display: 'flex',
+  justifyContent: 'center'
+});
+/**
+ * Use DatePicker to select a date on a calendar.
+ *
+ * ## Usage Criteria
+ *
+ * - Use DatePicker to select a date on a calendar
+ * - Available in 2 formats: Overlay and Inline
+ *
+ * ### Overlay DatePicker
+ * - Use Overlay to display in a modal container
+ * - Use Overlay whenever possible as it is the most accessible solution; the input form field is type-accessible and optimized for mobile customers
+ * - Includes an input form field to allow manual key-in of dates
+ * - Opens the modal when the input form field receives focus
+ * - Width expands 100% until max-width of 340px
+ *
+ * ### Inline DatePicker
+ * - Use Inline to display the DatePicker in a larger vieweable area; allows the customer to quickly and easily date availability
+ * - Does not include an input form field
+ * - Optimized for keyboard interaction and tablet touch
+ * - Recommended for viewports greater than or equal to 576px
+ */
+
+
+const DatePicker = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  var _dictionary$copy;
+
+  let {
+    copy = 'en',
+    id,
+    date,
+    feedback,
+    inline,
+    isDayDisabled,
+    label,
+    onDateChange,
+    hint,
+    hintPosition = 'inline',
+    tooltip,
+    tokens,
+    variant = {},
+    validation,
+    ...rest
+  } = _ref;
+  const [inputDate, setInputDate] = (0, _react.useState)(date);
+  const [isFocused, setIsFocused] = (0, _react.useState)(false);
+  const getCopy = (0, _componentsBase.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+
+  const onFocusChange = _ref2 => {
+    let {
+      focused
+    } = _ref2;
+    setIsFocused(focused);
+  };
+
+  const onChange = value => {
+    setInputDate(value);
+    if (onDateChange) onDateChange(value);
+  };
+
+  const viewport = (0, _componentsBase.useViewport)();
+  const daySize = getResponsiveDaySize(inline, viewport);
+  const value = date ?? inputDate;
+
+  const HiddenInputFieldContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+    displayName: "DatePicker__HiddenInputFieldContainer",
+    componentId: "components-web__sc-mz8fi3-1"
+  })(["height:", ";width:", ";overflow:hidden;"], props => props.height, props => props.width);
+
+  const {
+    hiddenInputFieldContainerHeight,
+    hiddenInputFieldContainerWidth,
+    previousIcon,
+    nextIcon,
+    ...remainingTokens
+  } = (0, _componentsBase.useThemeTokens)('DatePicker', tokens, variant, {
+    viewport
+  });
+  const defaultFontTokens = (0, _componentsBase.applyTextStyles)({
+    fontName: remainingTokens.calendarDayDefaultFontName,
+    fontWeight: remainingTokens.calendarDayDefaultFontWeight
+  });
+  const calendarMonthFontTokens = (0, _componentsBase.applyTextStyles)({
+    fontName: remainingTokens.calendarMonthCaptionFontName,
+    fontWeight: remainingTokens.calendarMonthCaptionFontWeight
+  });
+  const dayPickerNavigationButtonTokens = (0, _componentsBase.applyTextStyles)({
+    fontName: remainingTokens.dayPickerWeekHeaderFontName,
+    fontWeight: remainingTokens.dayPickerWeekHeaderFontWeight
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CalendarContainer.default, { ...selectProps(rest),
+    daySize: daySize,
+    validation: validation,
+    remainingTokens: remainingTokens,
+    calendarMonthFontTokens: calendarMonthFontTokens,
+    dayPickerNavigationButtonTokens: dayPickerNavigationButtonTokens,
+    defaultFontTokens: defaultFontTokens,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.InputSupports, {
+      copy: copy,
+      feedback: feedback,
+      hint: hint,
+      hintPosition: hintPosition,
+      label: ((_dictionary$copy = _dictionary.default[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription) ?? label,
+      nativeID: id,
+      tooltip: tooltip,
+      validation: validation,
+      children: inline ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HiddenInputFieldContainer, {
+          height: hiddenInputFieldContainerHeight,
+          width: hiddenInputFieldContainerWidth,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+            ref: ref,
+            id: id,
+            type: "text",
+            value: (value === null || value === void 0 ? void 0 : value.format('YYYY-MM-DD')) ?? '',
+            readOnly: true
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_DayPickerSingleDateController.default, {
+          date: value,
+          onDateChange: onChange,
+          focused: isFocused,
+          onFocusChange: onFocusChange,
+          numberOfMonths: 1,
+          hideKeyboardShortcutsPanel: true,
+          keepOpenOnDateSelect: false,
+          daySize: daySize,
+          navPrev: getIcon(previousIcon),
+          navNext: getIcon(nextIcon),
+          isOutsideRange: isDayDisabled,
+          phrases: getCopy(),
+          renderMonthElement: _ref3 => {
+            let {
+              month
+            } = _ref3;
+            return /*#__PURE__*/(0, _jsxRuntime.jsx)(MonthCenterContainer, {
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+                children: [_dictionary.default[copy] ? _dictionary.default[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
+              })
+            });
+          },
+          renderWeekHeaderElement: day => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: _dictionary.default[copy] ? _dictionary.default[copy].weekDays[day] : day
+          })
+        })]
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleDatePicker.default, {
+        ref: ref,
+        id: id,
+        date: value,
+        onDateChange: onChange,
+        focused: isFocused,
+        onFocusChange: onFocusChange,
+        numberOfMonths: 1,
+        hideKeyboardShortcutsPanel: true,
+        displayFormat: "DD / MM / YYYY",
+        placeholder: "DD / MM / YYYY",
+        keepOpenOnDateSelect: false,
+        daySize: daySize,
+        navPrev: getIcon(previousIcon),
+        navNext: getIcon(nextIcon),
+        isOutsideRange: isDayDisabled,
+        phrases: getCopy(),
+        renderMonthElement: _ref4 => {
+          let {
+            month
+          } = _ref4;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(MonthCenterContainer, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+              children: [_dictionary.default[copy] ? _dictionary.default[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
+            })
+          });
+        },
+        renderWeekHeaderElement: day => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          children: _dictionary.default[copy] ? _dictionary.default[copy].weekDays[day] : day
+        })
+      })
+    })
+  });
+});
+DatePicker.displayName = 'DatePicker';
+DatePicker.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * A unique identifier.
+   */
+  id: _propTypes.default.string.isRequired,
+
+  /**
+   *  Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+
+  /**
+   * A Moment instance representing the currently selected date, i.e. `moment()`
+   */
+  date: _reactMomentProptypes.default.momentObj,
+
+  /**
+   * A detailed description of validation error/success or additional instructions.
+   * Visual variant is determined based on the `validation` prop.
+   */
+  feedback: _propTypes.default.string,
+
+  /**
+   * Event triggered every time a new date is clicked on
+   * @param {Moment} date The new date that was selected
+   */
+  onDateChange: _propTypes.default.func,
+
+  /**
+   * A function determining whether a given date should be disabled
+   * @param {Moment} date The date to optionally disable
+   * @returns {bool}
+   */
+  isDayDisabled: _propTypes.default.func,
+
+  /**
+   * The field label to be displayed above the calendar
+   */
+  label: _propTypes.default.string,
+
+  /**
+   * A flag determining if the calendar picker is standalone or an input with overlay
+   */
+  inline: _propTypes.default.bool,
+
+  /**
+   * A short description of the expected input.
+   */
+  hint: _propTypes.default.string,
+
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+
+  /**
+   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+   */
+  tooltip: _propTypes.default.string,
+
+  /**
+   * Use to visually mark an input as valid or invalid.
+   */
+  validation: _propTypes.default.oneOf(['error', 'success'])
+};
+DatePicker.defaultProps = {
+  copy: 'en',
+  date: undefined,
+  feedback: undefined,
+  inline: false,
+  isDayDisabled: undefined,
+  label: undefined,
+  hint: undefined,
+  hintPosition: 'inline',
+  tooltip: undefined,
+  onDateChange: () => {},
+  validation: undefined
+};
+var _default = DatePicker;
+exports.default = _default;

package/lib/DatePicker/dictionary.js

@@ -0,0 +1,134 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// from https://github.com/airbnb/react-dates/blob/master/src/defaultPhrases.js
+const calendarLabel = 'Calendrier';
+const roleDescription = 'Sélecteur de date';
+const closeDatePicker = 'Fermer ';
+const clearDate = 'Supprimer la date';
+const jumpToPrevMonth = 'Reculer pour passer au mois précédent.';
+const jumpToNextMonth = 'Avancer pour passer au mois suivant.';
+const keyboardShortcuts = 'Raccourcis clavier ';
+const showKeyboardShortcutsPanel = 'Ouvrir le panneau de raccourcis clavier.';
+const hideKeyboardShortcutsPanel = 'Fermez le panneau de raccourcis.';
+const openThisPanel = 'Ouvrir le panneau. ';
+const enterKey = 'Touche Entrée ';
+const leftArrowRightArrow = 'Touches de direction droite et gauche';
+const upArrowDownArrow = 'Touches de direction haut et bas';
+const pageUpPageDown = 'Touches Page précédente et Page suivante';
+const homeEnd = 'Touches Accueil et Fin';
+const escape = 'Touche Échap.';
+const questionMark = `Point d'interrogation`;
+const selectFocusedDate = 'Sélectionner la date mise au point.';
+const moveFocusByOneDay = `Reculer (à gauche) et avancer (à droite) d'un jour.`;
+const moveFocusByOneWeek = `Reculer (vers le haut) et avancer (vers le bas) d'une semaine.`;
+const moveFocusByOneMonth = 'Changer de mois.';
+const moveFocustoStartAndEndOfWeek = 'Aller au premier ou au dernier jour de la semaine.';
+const returnFocusToInput = 'Revenir au champ de saisie de la date.';
+const keyboardForwardNavigationInstructions = `Naviguer vers l'avant pour interagir avec le calendrier et sélectionner une date. Appuyer sur la touche Point d'interrogation pour obtenir les raccourcis clavier permettant de modifier les dates.`;
+const keyboardBackwardNavigationInstructions = `Naviguer en arrière pour interagir avec le calendrier et sélectionner une date. Appuyer sur la touche Point d'interrogation pour obtenir les raccourcis clavier permettant de modifier les dates.`;
+const months = ['Janvier', 'Février', 'Mars', 'Avril', 'Mai', 'Juin', 'Julliet', 'Août', 'Septembre', 'Octobre', 'Novembre', 'Décembre'];
+const weekDays = {
+  Su: 'Dim',
+  Mo: 'Lun',
+  Tu: 'Mar',
+  We: 'Mer',
+  Th: 'Jeu',
+  Fr: 'Ven',
+  Sa: 'Sam'
+};
+
+const chooseAvailableStartDate = _ref => {
+  let {
+    date
+  } = _ref;
+  return `Choisir ${date}. Disponible.`;
+};
+
+const chooseAvailableEndDate = _ref2 => {
+  let {
+    date
+  } = _ref2;
+  return `Non disponible. ${date}`;
+};
+
+const chooseAvailableDate = _ref3 => {
+  let {
+    date
+  } = _ref3;
+  return date;
+};
+
+const dateIsUnavailable = _ref4 => {
+  let {
+    date
+  } = _ref4;
+  return `Not available. ${date}`;
+};
+
+const dateIsSelected = _ref5 => {
+  let {
+    date
+  } = _ref5;
+  return `Choisie. ${date}`;
+};
+
+const dateIsSelectedAsStartDate = _ref6 => {
+  let {
+    date
+  } = _ref6;
+  return `Choisie comme date de début. ${date}`;
+};
+
+const dateIsSelectedAsEndDate = _ref7 => {
+  let {
+    date
+  } = _ref7;
+  return `Choisie comme date de fin. ${date}`;
+};
+
+const dictionary = {
+  en: undefined,
+  // uses react-dates defaults
+  fr: {
+    calendarLabel,
+    roleDescription,
+    jumpToPrevMonth,
+    jumpToNextMonth,
+    keyboardShortcuts,
+    showKeyboardShortcutsPanel,
+    hideKeyboardShortcutsPanel,
+    openThisPanel,
+    enterKey,
+    leftArrowRightArrow,
+    upArrowDownArrow,
+    pageUpPageDown,
+    homeEnd,
+    escape,
+    questionMark,
+    selectFocusedDate,
+    moveFocusByOneDay,
+    moveFocusByOneWeek,
+    moveFocusByOneMonth,
+    moveFocustoStartAndEndOfWeek,
+    returnFocusToInput,
+    months,
+    weekDays,
+    chooseAvailableStartDate,
+    chooseAvailableEndDate,
+    chooseAvailableDate,
+    dateIsUnavailable,
+    dateIsSelected,
+    dateIsSelectedAsStartDate,
+    dateIsSelectedAsEndDate,
+    closeDatePicker,
+    clearDate,
+    keyboardForwardNavigationInstructions,
+    keyboardBackwardNavigationInstructions
+  }
+};
+var _default = dictionary;
+exports.default = _default;

package/lib/DatePicker/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _DatePicker = _interopRequireDefault(require("./DatePicker"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _DatePicker.default;
+exports.default = _default;