@telus-uds/components-web 2.6.0 → 2.8.0

package/lib-module/StoryCard/StoryCard.js

@@ -120,8 +120,7 @@ const StoryCard = /*#__PURE__*/forwardRef((_ref3, ref) => {
             },
             children: [Boolean(tag) && /*#__PURE__*/_jsx(Typography, {
               variant: {
-                size: 'eyebrow',
-                colour: 'secondary'
+                size: 'eyebrow'
               },
               children: tag
             }), Boolean(date) &&
@@ -130,8 +129,7 @@ const StoryCard = /*#__PURE__*/forwardRef((_ref3, ref) => {
             // Get locale based on decision of https://github.com/telus/universal-design-system/issues/715
             _jsx(Typography, {
               variant: {
-                size: 'small',
-                colour: 'secondary'
+                size: 'small'
               },
               children: date
             })]
@@ -145,8 +143,7 @@ const StoryCard = /*#__PURE__*/forwardRef((_ref3, ref) => {
             space: 3
           }), /*#__PURE__*/_jsx(Typography, {
             variant: {
-              size: 'h3',
-              colour: 'secondary'
+              size: 'h3'
             },
             children: title
           }), /*#__PURE__*/_jsx(Spacer, {

package/lib-module/Table/Table.js

@@ -39,7 +39,7 @@ export const useTableContext = () => useContext(TableContext);
 const Table = _ref2 => {
   let {
     children,
-    fullWidth = false,
+    fullWidth = true,
     text = 'medium',
     tokens,
     variant,

package/lib-module/WebPortal/WebPortal.js

@@ -0,0 +1,35 @@
+import { useEffect } from 'react';
+import ReactDOM from 'react-dom';
+/**
+ * WebPortal component renders its children in a separate portal container appended to the document body.
+ *
+ * While `@gorhom/portal` works well for a lot of use-cases, there are some issues with it, particularly around
+ * reading context values (see issues below). For web-only components, it is safe to replace `Portal` from `@gorhom/portal`
+ * to `WebPortal` to solve such issues
+ *
+ * https://github.com/gorhom/react-native-portal/issues/34
+ * https://github.com/gorhom/react-native-portal/issues/2
+ * https://github.com/gorhom/react-native-portal/issues/3
+ * https://github.com/gorhom/react-native-portal/issues/31
+ *
+ * @component
+ * @param {object} props - The component props.
+ * @param {React.ReactNode} props.children - The content to render within the portal.
+ * @returns {React.ReactPortal} The React portal component.
+ */
+
+const WebPortal = _ref => {
+  let {
+    children
+  } = _ref;
+  const portalContainer = document.createElement('div');
+  useEffect(() => {
+    document.body.appendChild(portalContainer);
+    return () => {
+      document.body.removeChild(portalContainer);
+    };
+  }, [portalContainer]);
+  return /*#__PURE__*/ReactDOM.createPortal(children, portalContainer);
+};
+
+export default WebPortal;

package/lib-module/WebPortal/index.js

@@ -0,0 +1,2 @@
+import WebPortal from './WebPortal';
+export default WebPortal;

package/lib-module/WebVideo/WebVideo.js

@@ -133,7 +133,7 @@ export const VideoProps = { ...selectedSystemPropTypes,
   /**
    * 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/lib-module/baseExports.js

@@ -12,4 +12,4 @@ A11yText, ActivityIndicator, Box, Button, BaseProvider, A11yInfoProvider, Viewpo
  */
 // Enable access to the viewports system for app-specific responsive layouts and features
 useResponsiveProp, useViewport, // TODO reenable ViewportContext once published from base  // enable localised viewport overrides e.g. in tests, narrow columns, etc
-useCarousel } from '@telus-uds/components-base';
+useCarousel, useSetTheme } from '@telus-uds/components-base';

package/lib-module/index.js

@@ -37,5 +37,6 @@ export { default as TermsAndConditions } from './TermsAndConditions';
 export { default as NavigationBar } from './NavigationBar';
 export { default as Progress } from './Progress';
 export { default as SkeletonProvider } from './SkeletonProvider';
+export { default as WebPortal } from './WebPortal';
 export { ssrStyles } from './utils';
 export * from './baseExports';

package/package.json

@@ -5,17 +5,18 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.48.0",
+    "@telus-uds/components-base": "1.50.0",
     "@telus-uds/system-constants": "^1.2.1",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.30.0",
+    "@telus-uds/system-theme-tokens": "^2.32.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
-    "react-youtube": "^10.1.0"
+    "react-youtube": "^10.1.0",
+    "moment": "2.29.4"
   },
   "description": "UDS mult-brand web components",
   "devDependencies": {
@@ -62,5 +63,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.6.0"
+  "version": "2.8.0"
 }

package/src/Autocomplete/Autocomplete.jsx

@@ -32,8 +32,6 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([
   textInputProps
 ])
 
-const inputTokens = { paddingLeft: INPUT_LEFT_PADDING }
-
 // Returns JSX to display a bold string `str` with unbolded occurrences of the
 // `substring` based in the array of `matchIndexes` provided
 const highlightAllMatches = (str, substring = '', matchIndexes = []) => (
@@ -104,6 +102,8 @@ const Autocomplete = forwardRef(
     // We need to store the current value as well to be able to highlight it
     const [currentValue, setCurrentValue] = useState(value ?? initialValue)
 
+    const inputTokens = { paddingLeft: INPUT_LEFT_PADDING }
+
     // Setting up the overlay
     const openOverlayRef = useRef()
     const [isExpanded, setIsExpanded] = useState((value ?? initialValue)?.length >= minToSuggestion)
@@ -229,6 +229,7 @@ const Autocomplete = forwardRef(
                 readOnly={readOnly}
                 ref={inputRef}
                 tokens={inputTokens}
+                validation={validation}
                 {...selectedProps}
                 {...props}
                 {...(isControlled ? { value } : { initialValue })}

package/src/DatePicker/CalendarContainer.jsx

@@ -7,7 +7,6 @@ import defaultReactDatesCss from './reactDatesCss'
 const CalendarContainer = styled.div(
   ({
     daySize,
-    validation,
     remainingTokens,
     calendarMonthFontTokens,
     calendarDayDefaultHeight,
@@ -35,31 +34,10 @@ const CalendarContainer = styled.div(
   }
   .DateInput {
     width: 100%;
-    border: 2px solid ${remainingTokens.dateInputBorderColor};
-    ${validation === 'error' && `input { border-color: ${remainingTokens.invalidInputMixin}; }`};
-    ${validation === 'success' && `input { border-color: ${remainingTokens.validInputMixin}; }`};
-  }
-  .DateInput:hover {
-    border-radius: ${remainingTokens.dateInputBorderRadius}px;
-    border: 2px solid ${remainingTokens.dateInputHoverBorderColor};
-  }
-  .DateInput_input:focus {
-    border: 3px 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;
@@ -166,10 +144,8 @@ const CalendarContainer = styled.div(
   }
   .CalendarDay__selected,
   .CalendarDay__selected:active,
-  .CalendarDay__selected:hover
   .CalendarDay__default.CalendarDay__selected,
-  .CalendarDay__default.CalendarDay__selected:active
-    .CalendarDay__default.CalendarDay__selected:hover{
+  .CalendarDay__default.CalendarDay__selected:active{
     background: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBackground};
     border: 1px solid ${remainingTokens.calendarDaySelectedHoverBorderColor};
     color: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverColor};
@@ -179,6 +155,15 @@ const CalendarContainer = styled.div(
       background: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBeforeBackground}; 
   }
 }
+
+
+.CalendarDay__selected:hover
+  .CalendarDay__default.CalendarDay__selected:hover{
+  &:before {
+    background: ${remainingTokens.calendarDayDefaultCalendarDaySelectedHoverBeforeBackground}; 
+  }
+}
+
   .CalendarDay__blocked_out_of_range,
   .CalendarDay__blocked_out_of_range:active,
   .CalendarDay__blocked_out_of_range:hover,

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.
  *
@@ -90,15 +97,40 @@ const DatePicker = forwardRef(
   ) => {
     const [inputDate, setInputDate] = useState(date)
     const [isFocused, setIsFocused] = useState(false)
-
+    const [inputText, setInputText] = useState(moment(date, dateFormat, true).isValid() ? date : '')
+    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)
@@ -164,76 +196,33 @@ 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>
-                )}
+        {inline ? (
+          <>
+            <HiddenInputFieldContainer
+              height={hiddenInputFieldContainerHeight}
+              width={hiddenInputFieldContainerWidth}
+            >
+              <input
+                ref={ref}
+                id={id}
+                type="text"
+                value={value?.format('DD/MM/YYYY') ?? ''}
+                readOnly
               />
-            </>
-          ) : (
-            <SingleDatePicker
+            </HiddenInputFieldContainer>
+            <DayPickerSingleDateController
               date={value}
               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 +237,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={value}
+                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/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -20,7 +20,7 @@ const ExpandCollapseMini = forwardRef(({ children, onToggle, tokens, ...rest },
         <ExpandCollapse.Panel
           {...expandProps}
           panelId="ExpandCollapseMiniPanel"
-          isMiniExpandCollapse={true}
+          variant={{ mini: true }}
           controlTokens={{ icon: null }}
           // TODO refactor
           // eslint-disable-next-line react/no-unstable-nested-components

package/src/Footnote/Footnote.jsx

@@ -271,6 +271,10 @@ const Footnote = (props) => {
   // Listen for ESCAPE, close button clicks, and clicks outside of the Footnote. Call onClose.
   const handleClose = useCallback(
     (event) => {
+      if (!isVisible) {
+        return
+      }
+
       if (event.type === 'keydown') {
         if (event.key === 'Escape' || event.key === 27) {
           closeFootnote(event, { returnFocus: true })
@@ -293,7 +297,7 @@ const Footnote = (props) => {
         closeFootnote(event, { returnFocus: false })
       }
     },
-    [closeFootnote]
+    [closeFootnote, isVisible]
   )
 
   const saveCurrentHeight = () => {
@@ -365,7 +369,7 @@ const Footnote = (props) => {
     }
     return () => {
       if (isOpen) {
-        document.addEventListener('mousedown', handleClose)
+        document.removeEventListener('mousedown', handleClose)
         window.removeEventListener('click', handleClose)
         window.removeEventListener('keydown', handleClose)
         window.removeEventListener('touchstart', handleClose)

package/src/Listbox/ListboxItem.jsx

@@ -53,6 +53,8 @@ const ListboxItem = forwardRef(
       prevItemRef,
       tokens,
       variant = {},
+      LinkRouter,
+      linkRouterProps,
       ...rest
     },
     ref
@@ -94,8 +96,7 @@ ListboxItem.propTypes = {
   nextItemRef: PropTypes.object,
   prevItemRef: PropTypes.object,
   onPress: PropTypes.func,
-  selected: PropTypes.bool,
-  reactRouterLinkComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  selected: PropTypes.bool
 }
 
 export default withLinkRouter(ListboxItem)

package/src/Listbox/ListboxOverlay.jsx

@@ -1,8 +1,9 @@
 /* eslint-disable react/require-default-props */
 import React, { forwardRef } from 'react'
-import { Card, Portal, useThemeTokens } from '@telus-uds/components-base'
+import { Card, useThemeTokens } from '@telus-uds/components-base'
 import PropTypes from 'prop-types'
 import { View, StyleSheet } from 'react-native-web'
+import WebPortal from '../WebPortal'
 
 const staticStyles = StyleSheet.create({
   positioner: {
@@ -25,7 +26,7 @@ const DropdownOverlay = forwardRef(
     const systemTokens = useThemeTokens('ListBox', {}, {})
 
     return (
-      <Portal>
+      <WebPortal>
         <View
           ref={ref}
           onLayout={onLayout}
@@ -48,7 +49,7 @@ const DropdownOverlay = forwardRef(
             {children}
           </Card>
         </View>
-      </Portal>
+      </WebPortal>
     )
   }
 )

package/src/NavigationBar/NavigationItem.jsx

@@ -5,7 +5,6 @@ import {
   selectSystemProps,
   useResponsiveProp,
   useViewport,
-  withLinkRouter,
   useThemeTokensCallback
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
@@ -41,6 +40,8 @@ const NavigationItem = forwardRef(
       href,
       tokens,
       variant = {},
+      LinkRouter,
+      linkRouterProps,
       ...rest
     },
     ref
@@ -61,6 +62,8 @@ const NavigationItem = forwardRef(
           tokens={getStateTokens}
           variant={{ selected }}
           href={href}
+          LinkRouter={LinkRouter}
+          linkRouterProps={linkRouterProps}
           {...selectedProps}
         >
           {children}
@@ -73,11 +76,10 @@ NavigationItem.displayName = 'NavigationItem'
 
 NavigationItem.propTypes = {
   ...selectedSystemPropTypes,
-  ...withLinkRouter.propTypes,
   onClick: PropTypes.func,
   selected: PropTypes.bool,
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired
 }
 NavigationItem.defaultProps = { onClick: () => {}, selected: false }
 
-export default withLinkRouter(NavigationItem)
+export default NavigationItem