@telus-uds/components-web 2.25.1 → 2.27.0

package/lib-module/DatePicker/DatePicker.js

@@ -1,13 +1,13 @@
-import React, { forwardRef, useEffect, useState } from 'react';
+import React, { forwardRef, useEffect, useState, useRef } 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 { IconButton, TextInput, selectSystemProps, useCopy, useViewport, useThemeTokens, applyTextStyles, getTokensPropType } from '@telus-uds/components-base';
+import { IconButton, TextInput, selectSystemProps, useCopy, useViewport, useThemeTokens, applyTextStyles, getTokensPropType, Portal, useSafeLayoutEffect } from '@telus-uds/components-base';
 import moment from 'moment';
-import { isUndefined } from 'lodash';
+import { isUndefined, throttle } from 'lodash';
 import CalendarContainer from './CalendarContainer';
 import dictionary from './dictionary';
 import { htmlAttrs } from '../utils';
@@ -47,6 +47,24 @@ const DateInputWrapper = /*#__PURE__*/styled.div.withConfig({
   display: 'flex',
   flexDirection: 'column'
 });
+const PortalPositionedContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "DatePicker__PortalPositionedContainer",
+  componentId: "components-web__sc-mz8fi3-2"
+})({
+  position: 'absolute',
+  left: _ref => {
+    let {
+      left
+    } = _ref;
+    return `${left}px`;
+  },
+  top: _ref2 => {
+    let {
+      top
+    } = _ref2;
+    return `${top}px`;
+  }
+});
 
 /**
  * Use DatePicker to select a date on a calendar.
@@ -69,7 +87,7 @@ const DateInputWrapper = /*#__PURE__*/styled.div.withConfig({
  * - Optimized for keyboard interaction and tablet touch
  * - Recommended for viewports greater than or equal to 576px
  */
-const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
+const DatePicker = /*#__PURE__*/forwardRef((_ref3, ref) => {
   var _dictionary$copy;
   let {
     copy = 'en',
@@ -90,9 +108,33 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     prevTestID,
     nextTestID,
     ...rest
-  } = _ref;
+  } = _ref3;
   const [inputDate, setInputDate] = useState(date instanceof moment ? date : undefined);
   const [inputText, setInputText] = useState(date instanceof moment ? date.format(dateFormat) : '');
+  const textInputRef = useRef();
+  const [datePickerPosition, setDatePickerPosition] = useState({
+    left: 0,
+    top: 0
+  });
+  useSafeLayoutEffect(() => {
+    const updateDimensions = () => {
+      if (inline) return;
+      const {
+        left,
+        top
+      } = textInputRef.current.getBoundingClientRect();
+      setDatePickerPosition({
+        left,
+        top: top + textInputRef.current.offsetHeight
+      });
+    };
+    const throttledUpdateDimensions = throttle(updateDimensions, 100, {
+      leading: false
+    });
+    updateDimensions();
+    window.addEventListener('resize', throttledUpdateDimensions);
+    return () => window.removeEventListener('resize', throttledUpdateDimensions);
+  }, []);
   const [isFocused, setIsFocused] = useState(false);
   const [isClickedInside, setIsClickedInside] = useState(false);
   const getCopy = useCopy({
@@ -109,10 +151,10 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       setInputText(date instanceof moment ? date.format(dateFormat) : '');
     }
   }, [date, inputDate]);
-  const onFocusChange = _ref2 => {
+  const onFocusChange = _ref4 => {
     let {
       focused
-    } = _ref2;
+    } = _ref4;
     if (!isClickedInside) {
       setIsFocused(focused);
     }
@@ -157,7 +199,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
   const circleSize = getResponsiveCircleSize(inline, viewport);
   const HiddenInputFieldContainer = /*#__PURE__*/styled.div.withConfig({
     displayName: "DatePicker__HiddenInputFieldContainer",
-    componentId: "components-web__sc-mz8fi3-2"
+    componentId: "components-web__sc-mz8fi3-3"
   })(["height:", ";width:", ";overflow:hidden;"], props => props.height, props => props.width);
   const {
     hiddenInputFieldContainerHeight,
@@ -183,10 +225,10 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     fontName: remainingTokens.dayPickerWeekHeaderFontName,
     fontWeight: remainingTokens.dayPickerWeekHeaderFontWeight
   });
-  const renderPrevButton = _ref3 => {
+  const renderPrevButton = _ref5 => {
     let {
       onClick
-    } = _ref3;
+    } = _ref5;
     return /*#__PURE__*/_jsx(IconButton, {
       onPress: () => {
         onClick();
@@ -198,10 +240,10 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       testID: prevTestID
     });
   };
-  const renderNextButton = _ref4 => {
+  const renderNextButton = _ref6 => {
     let {
       onClick
-    } = _ref4;
+    } = _ref6;
     return /*#__PURE__*/_jsx(IconButton, {
       onPress: () => {
         onClick();
@@ -213,18 +255,7 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
       testID: nextTestID
     });
   };
-  return /*#__PURE__*/_jsx(CalendarContainer, {
-    ...selectProps(rest),
-    daySize: daySize,
-    validation: validation,
-    remainingTokens: {
-      ...remainingTokens
-    },
-    calendarDayDefaultHeight: circleSize,
-    calendarDayDefaultWidth: circleSize,
-    calendarMonthFontTokens: calendarMonthFontTokens,
-    calendarWeekFontTokens: calendarWeekFontTokens,
-    defaultFontTokens: defaultFontTokens,
+  return /*#__PURE__*/_jsx(_Fragment, {
     children: inline ? /*#__PURE__*/_jsxs(_Fragment, {
       children: [/*#__PURE__*/_jsx(HiddenInputFieldContainer, {
         height: hiddenInputFieldContainerHeight,
@@ -236,68 +267,33 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
           value: inputText,
           readOnly: true
         })
-      }), /*#__PURE__*/_jsx(DayPickerSingleDateController, {
-        date: inputDate,
-        onDateChange: onChange,
-        focused: isFocused,
-        onFocusChange: onFocusChange,
-        numberOfMonths: 1,
-        hideKeyboardShortcutsPanel: true,
-        keepOpenOnDateSelect: false,
+      }), /*#__PURE__*/_jsx(CalendarContainer, {
+        ...selectProps(rest),
         daySize: daySize,
-        renderNavPrevButton: renderPrevButton,
-        renderNavNextButton: renderNextButton,
-        isOutsideRange: isDayDisabled,
-        phrases: getCopy(),
-        renderMonthElement: _ref5 => {
-          let {
-            month
-          } = _ref5;
-          return /*#__PURE__*/_jsx(MonthCenterContainer, {
-            children: /*#__PURE__*/_jsxs("div", {
-              children: [dictionary[copy] ? dictionary[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
-            })
-          });
-        },
-        renderWeekHeaderElement: day => /*#__PURE__*/_jsx("div", {
-          children: dictionary[copy] ? dictionary[copy].weekDays[day] : day
-        })
-      })]
-    }) : /*#__PURE__*/_jsx(DateInputWrapper, {
-      onMouseDown: handleMouseDown,
-      onFocus: handleFocus,
-      children: /*#__PURE__*/_jsx(TextInput, {
-        copy: copy,
-        feedback: feedback,
-        hint: hint,
-        placeholder: "DD / MM / YYYY",
-        onChange: onChangeInput,
-        tooltip: tooltip,
-        hintPosition: hintPosition,
-        label: ((_dictionary$copy = dictionary[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription) ?? label,
-        value: inputText,
         validation: validation,
-        inactive: disabled,
-        children: /*#__PURE__*/_jsx(SingleDatePicker, {
+        remainingTokens: remainingTokens,
+        calendarDayDefaultHeight: circleSize,
+        calendarDayDefaultWidth: circleSize,
+        calendarMonthFontTokens: calendarMonthFontTokens,
+        calendarWeekFontTokens: calendarWeekFontTokens,
+        defaultFontTokens: defaultFontTokens,
+        children: /*#__PURE__*/_jsx(DayPickerSingleDateController, {
           date: inputDate,
-          disabled: disabled,
           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,
-          renderNavNextButton: renderNextButton,
-          renderMonthElement: _ref6 => {
+          renderMonthElement: _ref7 => {
             let {
               month
-            } = _ref6;
+            } = _ref7;
             return /*#__PURE__*/_jsx(MonthCenterContainer, {
               children: /*#__PURE__*/_jsxs("div", {
                 children: [dictionary[copy] ? dictionary[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
@@ -308,6 +304,70 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
             children: dictionary[copy] ? dictionary[copy].weekDays[day] : day
           })
         })
+      })]
+    }) : /*#__PURE__*/_jsx(DateInputWrapper, {
+      onMouseDown: handleMouseDown,
+      onFocus: handleFocus,
+      children: /*#__PURE__*/_jsx(TextInput, {
+        copy: copy,
+        feedback: feedback,
+        hint: hint,
+        placeholder: "DD / MM / YYYY",
+        onChange: onChangeInput,
+        tooltip: tooltip,
+        hintPosition: hintPosition,
+        label: ((_dictionary$copy = dictionary[copy]) === null || _dictionary$copy === void 0 ? void 0 : _dictionary$copy.roleDescription) ?? label,
+        value: inputText,
+        validation: validation,
+        inactive: disabled,
+        ref: textInputRef,
+        children: /*#__PURE__*/_jsx(Portal, {
+          children: /*#__PURE__*/_jsx(PortalPositionedContainer, {
+            top: datePickerPosition.top,
+            left: datePickerPosition.left,
+            children: /*#__PURE__*/_jsx(CalendarContainer, {
+              ...selectProps(rest),
+              daySize: daySize,
+              validation: validation,
+              remainingTokens: remainingTokens,
+              calendarDayDefaultHeight: circleSize,
+              calendarDayDefaultWidth: circleSize,
+              calendarMonthFontTokens: calendarMonthFontTokens,
+              calendarWeekFontTokens: calendarWeekFontTokens,
+              defaultFontTokens: defaultFontTokens,
+              children: /*#__PURE__*/_jsx(SingleDatePicker, {
+                date: inputDate,
+                disabled: disabled,
+                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: _ref8 => {
+                  let {
+                    month
+                  } = _ref8;
+                  return /*#__PURE__*/_jsx(MonthCenterContainer, {
+                    children: /*#__PURE__*/_jsxs("div", {
+                      children: [dictionary[copy] ? dictionary[copy].months[month.month()] : month.format('MMMM'), ' ', month.year()]
+                    })
+                  });
+                },
+                renderWeekHeaderElement: day => /*#__PURE__*/_jsx("div", {
+                  children: dictionary[copy] ? dictionary[copy].weekDays[day] : day
+                })
+              })
+            })
+          })
+        })
       })
     })
   });

package/lib-module/OptimizeImage/OptimizeImage.js

@@ -33,7 +33,7 @@ const OptimizeImage = _ref => {
         mdSrc: getOptimizedUrl(contentfulAssetUrl, dimension, md, quality, disableRetina, supportsWebp),
         lgSrc: getOptimizedUrl(contentfulAssetUrl, dimension, lg, quality, disableRetina, supportsWebp),
         xlSrc: getOptimizedUrl(contentfulAssetUrl, dimension, xl, quality, disableRetina, supportsWebp),
-        fallbackSrc: getFallbackUrl(contentfulAssetUrl, xl, quality)
+        fallbackSrc: getFallbackUrl(contentfulAssetUrl, dimension, xl, quality)
       });
     });
   }, [contentfulAssetUrl, dimension, disableRetina, lg, md, quality, sm, xl, xs]);

package/lib-module/OptimizeImage/utils/getFallbackUrl.js

@@ -1,7 +1,7 @@
 import isSvgUrl from './isSvgUrl';
-export default function getFallbackUrl(url, width, quality) {
+export default function getFallbackUrl(url, dimension, size, quality) {
   if (!isSvgUrl(url)) {
-    return `${url}?w=${width}&q=${quality}`;
+    return `${url}?${dimension}=${size}&q=${quality}`;
   }
   return url;
 }

package/lib-module/baseExports.js

@@ -5,7 +5,7 @@ export {
 /**
  * Most base components should be re-exported as-is.
  */
-A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
+A11yText, ActivityIndicator, Autocomplete, Box, Button, BaseProvider, A11yInfoProvider, ViewportProvider, ThemeProvider, ButtonDropdown, ButtonGroup, ButtonLink, Carousel, CarouselTabs, Checkbox, CheckboxGroup, ChevronLink, ColourToggle, Divider, ExpandCollapse, Feedback, FlexGrid, Icon, InputLabel, InputSupports, Link, Listbox, Modal, MultiSelectFilter, Notification, Pagination, QuickLinks, QuickLinksFeature, Radio, RadioGroup, RadioCard, RadioCardGroup, Responsive, Search, Select, SideNav, Skeleton, SkipLink, Spacer, StackView, StackWrap, StepTracker, Tabs, Tags, TextButton, TextArea, TextInput, Timeline, ToggleSwitch, ToggleSwitchGroup, TooltipButton, Tooltip, Typography, Validator,
 /*
  * Most utilities exported from @telus-uds/components-base are for building systems, not apps.
  * Re-export only those utilities with a stable API and known use cases within apps / pages.

package/package.json

@@ -5,14 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.70.0",
+    "@telus-uds/components-base": "1.72.0",
     "@telus-uds/system-constants": "^1.3.0",
     "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.46.0",
+    "@telus-uds/system-theme-tokens": "^2.48.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -62,5 +62,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.25.1"
+  "version": "2.27.0"
 }

package/src/Card/Card.jsx

@@ -9,9 +9,11 @@ import {
   selectSystemProps,
   StackView,
   useThemeTokens,
+  useThemeTokensCallback,
   variantProp,
   a11yProps,
-  viewProps
+  viewProps,
+  PressableCardBase
 } from '@telus-uds/components-base'
 import CardContent from './CardContent'
 import CardFooter from './CardFooter'
@@ -20,26 +22,6 @@ import FullBleedContent, {
   useFullBleedContentProps
 } from '../shared/FullBleedContent'
 
-const selectCardBaseTokens = ({
-  backgroundColor,
-  borderColor,
-  gradient,
-  borderWidth,
-  borderRadius,
-  shadow,
-  minWidth
-}) => {
-  return {
-    backgroundColor,
-    borderColor,
-    gradient,
-    borderWidth,
-    borderRadius,
-    shadow,
-    minWidth
-  }
-}
-
 // Passes React Native-oriented system props through UDS Card
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps])
 
@@ -79,8 +61,11 @@ const Card = forwardRef(
       footerPadding,
       fullBleedImage,
       fullBleedContent = fullBleedImage,
-      tokens,
+      tokens = {},
       variant,
+      interactiveCard,
+      onPress,
+      dataSet,
       ...rest
     } = {
       fullBleedContent: { position: null }
@@ -96,10 +81,14 @@ const Card = forwardRef(
 
     // If the card has rounded corners and a full bleed image, we need to apply
     // those corners on the image as well, but partially
-    const cardTokens = useThemeTokens('Card', tokens, variant)
+    const { borderRadius } = useThemeTokens('Card', tokens, variant)
+    const getThemeTokens = useThemeTokensCallback('Card', interactiveCard?.tokens, {
+      interactive: true,
+      ...(interactiveCard?.variant || {})
+    })
     const hasFooter = Boolean(footer)
     const fullBleedBorderRadius = getFullBleedBorderRadius(
-      cardTokens?.borderRadius,
+      borderRadius,
       fullBleedContentPosition,
       hasFooter
     )
@@ -110,23 +99,39 @@ const Card = forwardRef(
       flexShrink: 1,
       justifyContent: 'space-between'
     }
+    // When interactive area is present, spacing tokens should only be applied
+    // to individual Card sections, not Card as a whole
+    const { paddingTop, paddingBottom, paddingLeft, paddingRight, ...restOfTokens } = tokens
 
     return (
       <CardBase
         ref={ref}
         variant={{ ...variant, padding: 'custom' }}
-        tokens={selectCardBaseTokens(cardTokens)}
+        tokens={restOfTokens}
         {...selectProps(rest)}
       >
         <StackView space={0} tokens={columnFlex}>
+          {interactiveCard?.body ? (
+            <PressableCardBase
+              ref={ref}
+              tokens={getThemeTokens}
+              dataSet={dataSet}
+              onPress={onPress}
+              {...selectProps(rest)}
+            >
+              {interactiveCard?.body}
+            </PressableCardBase>
+          ) : null}
           <StackView
             direction={contentStackDirection}
             tokens={{ ...columnFlex, alignItems: contentStackAlign }}
             space={0}
           >
-            <CardContent tokens={tokens} variant={variant} withFooter={hasFooter}>
-              {children}
-            </CardContent>
+            {children ? (
+              <CardContent tokens={tokens} variant={variant} withFooter={hasFooter}>
+                {children}
+              </CardContent>
+            ) : null}
             {fullBleedContentPosition !== 'none' && (
               <FullBleedContent borderRadius={fullBleedBorderRadius} {...fullBleedContentProps} />
             )}
@@ -184,7 +189,20 @@ Card.propTypes = {
   /**
    * Card variant.
    */
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  /**
+   * Function to call on pressing the card.
+   * Note: This is only available when `interactive` variant is used.
+   */
+  onPress: PropTypes.func,
+  /**
+   * Object to set interactive card's properties
+   */
+  interactiveCard: PropTypes.shape({
+    body: PropTypes.node,
+    tokens: getTokensPropType('Card'),
+    variant: variantProp.propType
+  })
 }
 
 export default Card