@telus-uds/components-web 1.3.0 → 1.5.0

package/src/DatePicker/DatePicker.jsx

@@ -0,0 +1,303 @@
+import React, { forwardRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import styled from 'styled-components'
+import momentPropTypes from 'react-moment-proptypes'
+import 'react-dates/initialize'
+import SingleDatePicker from 'react-dates/lib/components/SingleDatePicker'
+import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController'
+import {
+  Icon,
+  InputSupports,
+  selectSystemProps,
+  useCopy,
+  useViewport,
+  useThemeTokens,
+  applyTextStyles
+} from '@telus-uds/components-base'
+import CalendarContainer from './CalendarContainer'
+import dictionary from './dictionary'
+import { htmlAttrs } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
+
+const getResponsiveDaySize = (inline = false, viewport = 'md') => {
+  let responsiveDaySize
+  if (viewport === 'xs') {
+    responsiveDaySize = inline ? undefined : 36
+  } else {
+    responsiveDaySize = inline ? 60 : 44
+  }
+
+  return responsiveDaySize
+}
+
+const getIcon = (icon) => <Icon icon={icon} variant={{ size: 'small' }} />
+
+const MonthCenterContainer = styled.div({
+  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 = forwardRef(
+  (
+    {
+      copy = 'en',
+      id,
+      date,
+      feedback,
+      inline,
+      isDayDisabled,
+      label,
+      onDateChange,
+      hint,
+      hintPosition = 'inline',
+      tooltip,
+      tokens,
+      variant = {},
+      validation,
+      ...rest
+    },
+    ref
+  ) => {
+    const [inputDate, setInputDate] = useState(date)
+    const [isFocused, setIsFocused] = useState(false)
+    const getCopy = useCopy({ dictionary, copy })
+    const onFocusChange = ({ focused }) => {
+      setIsFocused(focused)
+    }
+    const onChange = (value) => {
+      setInputDate(value)
+      if (onDateChange) onDateChange(value)
+    }
+    const viewport = useViewport()
+    const daySize = getResponsiveDaySize(inline, viewport)
+
+    const value = date ?? inputDate
+
+    const HiddenInputFieldContainer = styled.div`
+      height: ${(props) => props.height};
+      width: ${(props) => props.width};
+      overflow: hidden;
+    `
+
+    const {
+      hiddenInputFieldContainerHeight,
+      hiddenInputFieldContainerWidth,
+      previousIcon,
+      nextIcon,
+      ...remainingTokens
+    } = useThemeTokens('DatePicker', tokens, variant, {
+      viewport
+    })
+
+    const defaultFontTokens = applyTextStyles({
+      fontName: remainingTokens.calendarDayDefaultFontName,
+      fontWeight: remainingTokens.calendarDayDefaultFontWeight
+    })
+
+    const calendarMonthFontTokens = applyTextStyles({
+      fontName: remainingTokens.calendarMonthCaptionFontName,
+      fontWeight: remainingTokens.calendarMonthCaptionFontWeight
+    })
+
+    const dayPickerNavigationButtonTokens = applyTextStyles({
+      fontName: remainingTokens.dayPickerWeekHeaderFontName,
+      fontWeight: remainingTokens.dayPickerWeekHeaderFontWeight
+    })
+
+    return (
+      <CalendarContainer
+        {...selectProps(rest)}
+        daySize={daySize}
+        validation={validation}
+        remainingTokens={remainingTokens}
+        calendarMonthFontTokens={calendarMonthFontTokens}
+        dayPickerNavigationButtonTokens={dayPickerNavigationButtonTokens}
+        defaultFontTokens={defaultFontTokens}
+      >
+        <InputSupports
+          copy={copy}
+          feedback={feedback}
+          hint={hint}
+          hintPosition={hintPosition}
+          label={dictionary[copy]?.roleDescription ?? label}
+          nativeID={id}
+          tooltip={tooltip}
+          validation={validation}
+        >
+          {inline ? (
+            <>
+              <HiddenInputFieldContainer
+                height={hiddenInputFieldContainerHeight}
+                width={hiddenInputFieldContainerWidth}
+              >
+                <input
+                  ref={ref}
+                  id={id}
+                  type="text"
+                  value={value?.format('YYYY-MM-DD') ?? ''}
+                  readOnly
+                />
+              </HiddenInputFieldContainer>
+              <DayPickerSingleDateController
+                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={({ month }) => (
+                  <MonthCenterContainer>
+                    <div>
+                      {dictionary[copy]
+                        ? dictionary[copy].months[month.month()]
+                        : month.format('MMMM')}{' '}
+                      {month.year()}
+                    </div>
+                  </MonthCenterContainer>
+                )}
+                renderWeekHeaderElement={(day) => (
+                  <div>{dictionary[copy] ? dictionary[copy].weekDays[day] : day}</div>
+                )}
+              />
+            </>
+          ) : (
+            <SingleDatePicker
+              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={({ month }) => (
+                <MonthCenterContainer>
+                  <div>
+                    {dictionary[copy]
+                      ? dictionary[copy].months[month.month()]
+                      : month.format('MMMM')}{' '}
+                    {month.year()}
+                  </div>
+                </MonthCenterContainer>
+              )}
+              renderWeekHeaderElement={(day) => (
+                <div>{dictionary[copy] ? dictionary[copy].weekDays[day] : day}</div>
+              )}
+            />
+          )}
+        </InputSupports>
+      </CalendarContainer>
+    )
+  }
+)
+
+DatePicker.displayName = 'DatePicker'
+
+DatePicker.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * A unique identifier.
+   */
+  id: PropTypes.string.isRequired,
+  /**
+   *  Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: PropTypes.oneOf(['en', 'fr']),
+  /**
+   * A Moment instance representing the currently selected date, i.e. `moment()`
+   */
+  date: momentPropTypes.momentObj,
+  /**
+   * A detailed description of validation error/success or additional instructions.
+   * Visual variant is determined based on the `validation` prop.
+   */
+  feedback: PropTypes.string,
+  /**
+   * Event triggered every time a new date is clicked on
+   * @param {Moment} date The new date that was selected
+   */
+  onDateChange: PropTypes.func,
+  /**
+   * A function determining whether a given date should be disabled
+   * @param {Moment} date The date to optionally disable
+   * @returns {bool}
+   */
+  isDayDisabled: PropTypes.func,
+  /**
+   * The field label to be displayed above the calendar
+   */
+  label: PropTypes.string,
+  /**
+   * A flag determining if the calendar picker is standalone or an input with overlay
+   */
+  inline: PropTypes.bool,
+  /**
+   * A short description of the expected input.
+   */
+  hint: PropTypes.string,
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: PropTypes.oneOf(['inline', 'below']),
+
+  /**
+   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
+   */
+  tooltip: PropTypes.string,
+  /**
+   * Use to visually mark an input as valid or invalid.
+   */
+  validation: PropTypes.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
+}
+
+export default DatePicker

package/src/DatePicker/dictionary.js

@@ -0,0 +1,92 @@
+// 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 = ({ date }) => `Choisir ${date}. Disponible.`
+const chooseAvailableEndDate = ({ date }) => `Non disponible. ${date}`
+const chooseAvailableDate = ({ date }) => date
+const dateIsUnavailable = ({ date }) => `Not available. ${date}`
+const dateIsSelected = ({ date }) => `Choisie. ${date}`
+const dateIsSelectedAsStartDate = ({ date }) => `Choisie comme date de début. ${date}`
+const dateIsSelectedAsEndDate = ({ date }) => `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
+  }
+}
+
+export default dictionary

package/src/DatePicker/index.js

@@ -0,0 +1,3 @@
+import DatePicker from './DatePicker'
+
+export default DatePicker