@telus-uds/components-web 2.7.0 → 2.8.1

package/src/DatePicker/DatePicker.jsx

@@ -7,19 +7,21 @@ import SingleDatePicker from 'react-dates/lib/components/SingleDatePicker'
 import DayPickerSingleDateController from 'react-dates/lib/components/DayPickerSingleDateController'
 import {
   IconButton,
-  InputSupports,
+  TextInput,
   selectSystemProps,
   useCopy,
   useViewport,
   useThemeTokens,
   applyTextStyles
 } from '@telus-uds/components-base'
+import moment from 'moment'
 import CalendarContainer from './CalendarContainer'
 import dictionary from './dictionary'
 import { htmlAttrs } from '../utils'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
-
+const dateFormat = 'DD / MM / YYYY'
+const dateFormatWithoutSpaces = 'DD/MM/YYYY'
 const getResponsiveDaySize = (inline = false, viewport = 'md') => {
   let responsiveDaySize
   if (viewport === 'xs') {
@@ -46,6 +48,11 @@ const MonthCenterContainer = styled.div({
   justifyContent: 'center'
 })
 
+const DateInputWrapper = styled.div({
+  display: 'flex',
+  flexDirection: 'column'
+})
+
 /**
  * Use DatePicker to select a date on a calendar.
  *
@@ -88,22 +95,49 @@ const DatePicker = forwardRef(
     },
     ref
   ) => {
-    const [inputDate, setInputDate] = useState(date)
-    const [isFocused, setIsFocused] = useState(false)
+    const [inputDate, setInputDate] = useState(date instanceof moment ? date : undefined)
+    const [inputText, setInputText] = useState(
+      date instanceof moment ? date.format(dateFormat) : ''
+    )
 
+    const [isFocused, setIsFocused] = useState(false)
+    const [isClickedInside, setIsClickedInside] = useState(false)
     const getCopy = useCopy({ dictionary, copy })
     const onFocusChange = ({ focused }) => {
-      setIsFocused(focused)
+      if (!isClickedInside) {
+        setIsFocused(focused)
+      }
+      setIsClickedInside(false)
+    }
+    const handleFocus = () => {
+      setIsFocused(true)
+    }
+    const handleMouseDown = (event) => {
+      if (event.target.tagName === 'INPUT') {
+        setIsClickedInside(true)
+        setIsFocused(true)
+      } else {
+        event.stopPropagation()
+      }
     }
     const onChange = (value) => {
       setInputDate(value)
+      setInputText(value.format(dateFormat))
       if (onDateChange) onDateChange(value)
     }
+    const onChangeInput = (value) => {
+      if (moment(value.replace(/\s/g, ''), dateFormatWithoutSpaces, true).isValid()) {
+        setInputDate(moment(value, dateFormat))
+        if (onDateChange) onDateChange(moment(value, dateFormat))
+        setInputText(moment(value, dateFormatWithoutSpaces).format(dateFormat))
+      } else {
+        setInputText(value)
+      }
+    }
     const viewport = useViewport()
     const daySize = getResponsiveDaySize(inline, viewport)
     const circleSize = getResponsiveCircleSize(inline, viewport)
 
-    const value = date ?? inputDate
     const HiddenInputFieldContainer = styled.div`
       height: ${(props) => props.height};
       width: ${(props) => props.width};
@@ -164,76 +198,27 @@ const DatePicker = forwardRef(
         calendarWeekFontTokens={calendarWeekFontTokens}
         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}
-                renderNavPrevButton={renderPrevButton}
-                renderNavNextButton={renderNextButton}
-                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
-              date={value}
+        {inline ? (
+          <>
+            <HiddenInputFieldContainer
+              height={hiddenInputFieldContainerHeight}
+              width={hiddenInputFieldContainerWidth}
+            >
+              <input ref={ref} id={id} type="text" value={inputText} readOnly />
+            </HiddenInputFieldContainer>
+            <DayPickerSingleDateController
+              date={inputDate}
               onDateChange={onChange}
               focused={isFocused}
               onFocusChange={onFocusChange}
               numberOfMonths={1}
               hideKeyboardShortcutsPanel={true}
-              keepOpenOnDateSelect={true}
+              keepOpenOnDateSelect={false}
               daySize={daySize}
-              ref={ref}
               renderNavPrevButton={renderPrevButton}
+              renderNavNextButton={renderNextButton}
               isOutsideRange={isDayDisabled}
               phrases={getCopy()}
-              id={id}
-              displayFormat="DD / MM / YYYY"
-              placeholder="DD / MM / YYYY"
-              renderNavNextButton={renderNextButton}
               renderMonthElement={({ month }) => (
                 <MonthCenterContainer>
                   <div>
@@ -248,8 +233,53 @@ const DatePicker = forwardRef(
                 <div>{dictionary[copy] ? dictionary[copy].weekDays[day] : day}</div>
               )}
             />
-          )}
-        </InputSupports>
+          </>
+        ) : (
+          <DateInputWrapper onMouseDown={handleMouseDown} onFocus={handleFocus}>
+            <TextInput
+              copy={copy}
+              feedback={feedback}
+              hint={hint}
+              placeholder="DD / MM / YYYY"
+              onChange={onChangeInput}
+              tooltip={tooltip}
+              hintPosition={hintPosition}
+              label={dictionary[copy]?.roleDescription ?? label}
+              value={inputText}
+              validation={validation}
+            >
+              <SingleDatePicker
+                date={inputDate}
+                onDateChange={onChange}
+                focused={isFocused}
+                onFocusChange={onFocusChange}
+                numberOfMonths={1}
+                hideKeyboardShortcutsPanel={true}
+                keepOpenOnDateSelect={true}
+                daySize={daySize}
+                ref={ref}
+                renderNavPrevButton={renderPrevButton}
+                isOutsideRange={isDayDisabled}
+                phrases={getCopy()}
+                id={id}
+                renderNavNextButton={renderNextButton}
+                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>
+                )}
+              />
+            </TextInput>
+          </DateInputWrapper>
+        )}
       </CalendarContainer>
     )
   }

package/src/DatePicker/reactDatesCss.js

@@ -31,13 +31,8 @@ const defaultReactDatesCss = css`
   .SingleDatePickerInput {
     display: inline-block;
     background-color: #fff;
-  }
-  .SingleDatePickerInput__withBorder {
-    border-radius: 2px;
-    border: 1px solid #dbdbdb;
-  }
-  .SingleDatePickerInput__rtl {
-    direction: rtl;
+    position: absolute;
+    top: -55px;
   }
   .SingleDatePickerInput__disabled {
     background-color: #f2f2f2;
@@ -658,67 +653,8 @@ const defaultReactDatesCss = css`
     left: 0;
     overflow-y: scroll;
   }
-  .DateInput {
-    margin: 0;
-    padding: 0;
-    background: #fff;
-    position: relative;
-    display: inline-block;
-    width: 130px;
-    vertical-align: middle;
-  }
-  .DateInput__small {
-    width: 97px;
-  }
-  .DateInput__block {
-    width: 100%;
-  }
-  .DateInput__disabled {
-    background: #f2f2f2;
-    color: #dbdbdb;
-  }
   .DateInput_input {
-    font-weight: 200;
-    font-size: 19px;
-    line-height: 24px;
-    color: #484848;
-    background-color: #fff;
-    width: 100%;
-    padding: 11px 11px 9px;
-    border: 0;
-    border-top: 0;
-    border-right: 0;
-    border-bottom: 2px solid transparent;
-    border-left: 0;
-    border-radius: 0;
-  }
-  .DateInput_input__small {
-    font-size: 15px;
-    line-height: 18px;
-    letter-spacing: 0.2px;
-    padding: 7px 7px 5px;
-  }
-  .DateInput_input__regular {
-    font-weight: auto;
-  }
-  .DateInput_input__readOnly {
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    -ms-user-select: none;
-    user-select: none;
-  }
-  .DateInput_input__focused {
-    outline: 0;
-    background: #fff;
-    border: 0;
-    border-top: 0;
-    border-right: 0;
-    border-bottom: 2px solid #008489;
-    border-left: 0;
-  }
-  .DateInput_input__disabled {
-    background: #f2f2f2;
-    font-style: italic;
+    display: none;
   }
   .DateInput_screenReaderMessage {
     border: 0;
@@ -732,6 +668,7 @@ const defaultReactDatesCss = css`
   }
   .DateInput_fang {
     position: absolute;
+    top: 55px;
     width: 20px;
     height: 10px;
     left: 22px;

package/src/StoryCard/StoryCard.jsx

@@ -115,21 +115,17 @@ const StoryCard = forwardRef(
                   space={1}
                   tokens={{ justifyContent: 'space-between', alignItems: 'baseline' }}
                 >
-                  {Boolean(tag) && (
-                    <Typography variant={{ size: 'eyebrow', colour: 'secondary' }}>
-                      {tag}
-                    </Typography>
-                  )}
+                  {Boolean(tag) && <Typography variant={{ size: 'eyebrow' }}>{tag}</Typography>}
                   {Boolean(date) && (
                     // TODO: get user locale and apply date formatting: "MMM DD, YYYY" for `en` and "YYYY-MM-DD" for `fr`
                     // Get locale based on decision of https://github.com/telus/universal-design-system/issues/715
-                    <Typography variant={{ size: 'small', colour: 'secondary' }}>{date}</Typography>
+                    <Typography variant={{ size: 'small' }}>{date}</Typography>
                   )}
                 </StackWrap>
                 <Spacer space={2} />
                 <Divider variant={{ decorative: true }} />
                 <Spacer space={3} />
-                <Typography variant={{ size: 'h3', colour: 'secondary' }}>{title}</Typography>
+                <Typography variant={{ size: 'h3' }}>{title}</Typography>
                 <Spacer space={2} />
                 <Typography>{description}</Typography>
               </Box>

package/src/WebVideo/WebVideo.jsx

@@ -119,7 +119,7 @@ export const VideoProps = {
   /**
    * The splash screen UI's language as an ISO language code. It currently supports English and French.
    */
-  copy: PropTypes.oneOf(['en', 'fr']).isRequired,
+  copy: PropTypes.oneOf(['en', 'fr']),
   /**
    * A function to be run when the play button is pressed on the video splash screen and the video is ready to play.
    */

package/types/WebVideo.d.ts

@@ -8,8 +8,8 @@ export interface WebVideoProps extends HTMLAttrs {
   defaultVolume?: number
   beginMuted?: boolean
   videoLength: number
-  copy: 'en' | 'fr'
-  onStart: () => void
+  copy?: 'en' | 'fr'
+  onStart?: () => void
 }
 
 declare const WebVideo: ComponentType<WebVideoProps>