@telus-uds/components-web 2.13.0 → 2.15.0

package/lib-module/TermsAndConditions/TermsAndConditions.js

@@ -5,7 +5,7 @@ import { Box, Divider, selectSystemProps, Typography, useCopy, useThemeTokens, u
 import ExpandCollapse from './ExpandCollapse';
 import OrderedListBase from '../OrderedList/OrderedListBase';
 import { htmlAttrs, media, renderStructuredContent } from '../utils';
-import dictionary from './dictionary';
+import defaultDictionary from './dictionary';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
@@ -106,6 +106,7 @@ const TermsAndConditions = /*#__PURE__*/forwardRef((_ref6, ref) => {
     nonIndexedContent,
     tokens,
     variant = {},
+    dictionary = defaultDictionary,
     ...rest
   } = _ref6;
   const getCopy = useCopy({
@@ -172,7 +173,13 @@ const TermsAndConditions = /*#__PURE__*/forwardRef((_ref6, ref) => {
     })]
   });
 });
-TermsAndConditions.displayName = 'TermsAndConditions';
+TermsAndConditions.displayName = 'TermsAndConditions'; // If a language dictionary entry is provided, it must contain every key
+
+const dictionaryContentShape = PropTypes.shape({
+  headingHide: PropTypes.string.isRequired,
+  headingView: PropTypes.string.isRequired,
+  nonIndexedTitle: PropTypes.string.isRequired
+});
 TermsAndConditions.propTypes = { ...selectedSystemPropTypes,
 
   /**
@@ -198,11 +205,20 @@ TermsAndConditions.propTypes = { ...selectedSystemPropTypes,
    *
    * nonIndexedContent do not have a corresponding superscript and instead apply to the page as a whole.
    */
-  nonIndexedContent: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.node, PropTypes.string]))
+  nonIndexedContent: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.node, PropTypes.string])),
+
+  /**
+   * Custom dictionary containing the labels to use for `TermsAndConditions`
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  })
 };
 TermsAndConditions.defaultProps = {
   copy: 'en',
   indexedContent: [],
-  nonIndexedContent: []
+  nonIndexedContent: [],
+  dictionary: defaultDictionary
 };
 export default TermsAndConditions;

package/lib-module/Testimonial/Testimonial.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { Icon, selectSystemProps, Typography, useThemeTokens } from '@telus-uds/components-base';
+import { Icon, selectSystemProps, Typography, useThemeTokens, useViewport } from '@telus-uds/components-base';
 import Image from '../Image';
 import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -83,11 +83,13 @@ const Testimonial = _ref5 => {
     imageSrc,
     image = imageSrc,
     additionalInfo,
-    testimonialStyle = 'heading',
+    testimonialStyle = 'large',
     tokens,
+    copy = 'en',
     variant = {},
     ...rest
   } = _ref5;
+  const viewport = useViewport();
   const {
     testimonialContainerGap,
     quoteContainerGap,
@@ -96,9 +98,34 @@ const Testimonial = _ref5 => {
     figcaptionGap,
     textColor,
     icon,
+    iconFr,
     iconColor,
-    imageSize
-  } = useThemeTokens('Testimonial', tokens, variant);
+    imageSize,
+    testimonialFontSizeLarge,
+    testimonialLineHeightLarge,
+    testimonialFontWeightLarge,
+    testimonialFontSizeHeading,
+    testimonialLineHeightHeading,
+    testimonialFontNameHeading,
+    testimonialFontWeightHeading,
+    authorFontSize,
+    authorLineHeight,
+    authorFontName,
+    authorFontWeight,
+    additionalFontSize,
+    additionalLineHeight,
+    additionalFontName,
+    additionalFontWeight
+  } = useThemeTokens('Testimonial', tokens, variant, {
+    viewport
+  });
+
+  const getQuoteTestimonial = open => {
+    let quote = '';
+    if (copy === 'en') quote = open ? '\u201C' : '\u201D';else quote = open ? '\u00AB ' : ' \u00BB';
+    return quote;
+  };
+
   return /*#__PURE__*/_jsxs(TestimonialContainer, {
     testimonialContainerGap: testimonialContainerGap,
     ...selectProps(rest),
@@ -111,7 +138,7 @@ const Testimonial = _ref5 => {
         variant: {
           size: 'micro'
         },
-        icon: icon
+        icon: copy === 'en' ? icon : iconFr
       }), showDivider && /*#__PURE__*/_jsx(Divider, {
         dividerBackgroundColor: dividerBackgroundColor,
         dividerBorder: dividerBorder,
@@ -124,9 +151,12 @@ const Testimonial = _ref5 => {
         },
         tokens: {
           color: textColor,
-          fontWeight: '400'
+          fontSize: testimonialStyle === 'heading' ? testimonialFontSizeHeading : testimonialFontSizeLarge,
+          lineHeight: testimonialStyle === 'heading' ? testimonialLineHeightHeading : testimonialLineHeightLarge,
+          fontName: testimonialFontNameHeading,
+          fontWeight: testimonialStyle === 'heading' ? testimonialFontWeightHeading : testimonialFontWeightLarge
         },
-        children: `\u201C${testimonial}\u201D`
+        children: `${getQuoteTestimonial(true)}${testimonial}${getQuoteTestimonial()}`
       })
     }), (image || title || additionalInfo) && /*#__PURE__*/_jsxs(Figcaption, {
       figcaptionGap: figcaptionGap,
@@ -139,20 +169,26 @@ const Testimonial = _ref5 => {
       }) : image), (title || additionalInfo) && /*#__PURE__*/_jsxs(AuthorInfoContainer, {
         children: [title && /*#__PURE__*/_jsx(Typography, {
           variant: {
-            size: 'small',
-            colour: 'secondary'
+            size: 'small'
           },
           tokens: {
-            fontWeight: '500'
+            color: textColor,
+            fontSize: authorFontSize,
+            lineHeight: authorLineHeight,
+            fontName: authorFontName,
+            fontWeight: authorFontWeight
           },
           children: title
         }), additionalInfo && /*#__PURE__*/_jsx(Typography, {
           variant: {
-            size: 'micro',
-            colour: 'secondary'
+            size: 'small'
           },
           tokens: {
-            fontWeight: '400'
+            color: textColor,
+            fontSize: additionalFontSize,
+            lineHeight: additionalLineHeight,
+            fontName: additionalFontName,
+            fontWeight: additionalFontWeight
           },
           children: additionalInfo
         })]

package/lib-module/Toast/Toast.js

@@ -21,19 +21,29 @@ const animation = props => css(["", " 1s ease-in-out 2s forwards,", " 1s ease-in
 const ToastContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Toast__ToastContainer",
   componentId: "components-web__sc-p78jdh-0"
-})(["display:flex;justify-content:center;align-items:center;flex-wrap:wrap;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
+})(["display:flex;justify-content:center;align-items:center;flex-wrap:wrap;padding-left:", "px;padding-right:", "px;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
   let {
-    containerBackgroundColor
+    padding
   } = _ref;
-  return containerBackgroundColor;
+  return padding;
 }, _ref2 => {
   let {
-    containerGap
+    padding
   } = _ref2;
+  return padding;
+}, _ref3 => {
+  let {
+    containerBackgroundColor
+  } = _ref3;
+  return containerBackgroundColor;
+}, _ref4 => {
+  let {
+    containerGap
+  } = _ref4;
   return containerGap;
 }, animation);
 
-const Toast = _ref3 => {
+const Toast = _ref5 => {
   let {
     toast,
     copy,
@@ -42,7 +52,7 @@ const Toast = _ref3 => {
     tokens,
     variant = {},
     ...rest
-  } = _ref3;
+  } = _ref5;
   // viewport hook added to work adjust the padding to different sizes
   const viewport = useViewport();
   const {
@@ -58,7 +68,8 @@ const Toast = _ref3 => {
     animationBackgroundColorAfter,
     animationColorBefore,
     animationColorAfter,
-    chevronlinkFontWeight
+    chevronlinkFontWeight,
+    ...extraTokens
   } = useThemeTokens('Toast', tokens, variant, {
     viewport
   }); // inherit ChevronLink tokens for animation colors
@@ -91,6 +102,7 @@ const Toast = _ref3 => {
     animationColorAfter: animationColorAfter,
     animationFillColorBefore: chevronInverseColor,
     animationFillColorAfter: chevronDefaultColor,
+    ...extraTokens,
     ...selectProps(rest),
     children: [headline && /*#__PURE__*/_jsx(Typography, {
       variant: {

package/package.json

@@ -5,14 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.54.0",
-    "@telus-uds/system-constants": "^1.2.1",
+    "@telus-uds/components-base": "1.56.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.37.0",
+    "@telus-uds/system-theme-tokens": "^2.39.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -63,5 +63,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.13.0"
+  "version": "2.15.0"
 }

package/src/Badge/Badge.jsx

@@ -42,7 +42,8 @@ const Badge = ({ children, tokens, variant = {}, ...rest }) => {
     paddingTop,
     paddingBottom,
     fontName,
-    fontWeight
+    fontWeight,
+    fontSize
   } = useThemeTokens('Badge', tokens, variant)
 
   const semanticGradient = gradient && transformGradient(gradient)
@@ -56,6 +57,12 @@ const Badge = ({ children, tokens, variant = {}, ...rest }) => {
     background = semanticGradient
   }
 
+  const fontSizeMapping = {
+    12: 'micro',
+    14: 'small',
+    16: 'h6'
+  }
+
   return (
     <BadgeContainer
       isOutlineOffer={isOutlineOffer}
@@ -69,7 +76,12 @@ const Badge = ({ children, tokens, variant = {}, ...rest }) => {
       border={`${borderWidth}px solid ${borderColor}`}
       {...selectProps(rest)}
     >
-      <Typography tokens={{ fontName, fontWeight, color }}>{children}</Typography>
+      <Typography
+        tokens={{ fontName, fontWeight, color }}
+        variant={{ size: fontSizeMapping[fontSize] }}
+      >
+        {children}
+      </Typography>
     </BadgeContainer>
   )
 }

package/src/Card/CardContent.jsx

@@ -23,7 +23,8 @@ const CardContentContainer = styled.div(
     contentAlignItems: alignItems,
     contentFlexGrow: flexGrow,
     contentFlexShrink: flexShrink,
-    contentJustifyContent: justifyContent
+    contentJustifyContent: justifyContent,
+    borderWidth
   }) => ({
     // We need to make sure to have sharp corners on the bottom
     // if the card has a footer
@@ -31,10 +32,10 @@ const CardContentContainer = styled.div(
     borderBottomRightRadius: withFooter ? 0 : borderRadius,
     borderTopLeftRadius: borderRadius,
     borderTopRightRadius: borderRadius,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
+    paddingBottom: paddingBottom - borderWidth,
+    paddingLeft: paddingLeft - borderWidth,
+    paddingRight: paddingRight - borderWidth,
+    paddingTop: paddingTop - borderWidth,
     display: 'flex',
     flexDirection: 'column',
     alignItems,

package/src/DatePicker/DatePicker.jsx

@@ -15,6 +15,7 @@ import {
   applyTextStyles
 } from '@telus-uds/components-base'
 import moment from 'moment'
+import { isUndefined } from 'lodash'
 import CalendarContainer from './CalendarContainer'
 import dictionary from './dictionary'
 import { htmlAttrs } from '../utils'
@@ -23,25 +24,17 @@ 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') {
-    responsiveDaySize = inline ? undefined : 36
-  } else {
-    responsiveDaySize = inline ? 60 : 44
+    return inline ? undefined : 36
   }
-
-  return responsiveDaySize
+  return inline ? 60 : 44
 }
 
 const getResponsiveCircleSize = (inline = false, viewport = 'md') => {
-  let responsiveCircleSize
   if (viewport === 'xs') {
-    responsiveCircleSize = 26
-  } else {
-    responsiveCircleSize = inline ? 44 : 26
+    return 26
   }
-
-  return responsiveCircleSize
+  return inline ? 44 : 26
 }
 
 const MonthCenterContainer = styled.div({
@@ -106,7 +99,11 @@ const DatePicker = forwardRef(
     const [isClickedInside, setIsClickedInside] = useState(false)
     const getCopy = useCopy({ dictionary, copy })
     useEffect(() => {
-      if (!moment(date).isSame(inputDate)) {
+      /**
+       * `date` could be passed as `null` to reset the value so explicitly
+       * checking for not being `undefined`
+       */
+      if (!isUndefined(date) && !moment(date).isSame(inputDate)) {
         setInputDate(date)
         setInputText(date instanceof moment ? date.format(dateFormat) : '')
       }
@@ -139,6 +136,7 @@ const DatePicker = forwardRef(
     const onChange = (value) => {
       setInputDate(value)
       setInputText(value.format(dateFormat))
+      setIsFocused(false)
       if (onDateChange) onDateChange(value)
     }
     const onChangeInput = (value) => {

package/src/QuantitySelector/QuantitySelector.jsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import {
-  getThemeTokens,
   Box,
   TextInput,
   Spacer,
@@ -9,13 +8,12 @@ import {
   InputLabel,
   useInputValue,
   useCopy,
-  useThemeTokens,
-  useTheme
+  useThemeTokensCallback
 } from '@telus-uds/components-base'
 
-import IconButton from '../IconButton'
-import { InputField, InputWrapper, LeftButtonWrapper, RightButtonWrapper } from './styles'
+import { InputField, InputWrapper } from './styles'
 import defaultDictionary from './dictionary'
+import SideButton from './SideButton'
 
 const { isNaN } = Number
 
@@ -28,6 +26,7 @@ const QuantitySelector = ({
   minNumber,
   maxNumber,
   defaultValue,
+  value,
   label,
   hint,
   hintPosition,
@@ -40,13 +39,8 @@ const QuantitySelector = ({
   tokens,
   testID
 }) => {
-  const {
-    components: { QuantitySelector: componentTheme }
-  } = useTheme()
-
-  const { leftIcon, rightIcon, padding } = useThemeTokens('QuantitySelector', tokens, variant)
+  const { disabled } = variant
   const [error, setError] = useState('')
-  const { alternative } = variant
   const getCopy = useCopy({ dictionary, copy })
 
   const getValidatedNumber = (numberToEvaluate) => {
@@ -58,16 +52,14 @@ const QuantitySelector = ({
     return numberToEvaluate
   }
 
-  const initialValue = getValidatedNumber(defaultValue)
-
   const { currentValue: number, setValue: setNumber } = useInputValue({
-    value: undefined,
-    initialValue,
+    value: getValidatedNumber(value),
+    initialValue: getValidatedNumber(defaultValue),
     onChange
   })
 
-  const isDecreaseEnabled = !isNumber(minNumber) || number > minNumber
-  const isIncreaseEnabled = !isNumber(maxNumber) || number < maxNumber
+  const isDecreaseEnabled = (!disabled && !isNumber(minNumber)) || number > minNumber
+  const isIncreaseEnabled = (!disabled && !isNumber(maxNumber)) || number < maxNumber
   const inputValue = isNumber(number) ? number.toString() : ''
 
   const updateNumber = (newNumber, originalInputEvent) => {
@@ -101,24 +93,34 @@ const QuantitySelector = ({
       />
     ) : null
 
+  const getTokens = useThemeTokensCallback('QuantitySelector', tokens, variant)
+
   const renderTextInput = () => (
     <TextInput
       nativeID={id}
       value={inputValue}
+      defaultValue={defaultValue}
       tokens={(textInputState) => {
-        const { inputBorderColor, inputBackgroundColor } = getThemeTokens(
-          componentTheme,
-          tokens,
-          variant,
-          textInputState
-        )
-
+        const {
+          inputWidth,
+          inputBorderWidth,
+          inputBorderColor,
+          textColor,
+          inputBackgroundColor,
+          ...rest
+        } = getTokens({
+          ...textInputState
+        })
         return {
-          borderRadius: 0,
-          margin: 0,
-          padding: 0,
+          ...rest,
+          order: 1,
+          borderWidth: inputBorderWidth,
+          backgroundColor: inputBackgroundColor,
+          color: textColor,
+          width: inputWidth,
           borderColor: inputBorderColor,
-          backgroundColor: inputBackgroundColor
+          borderRadius: 0,
+          outerBorderWidth: 0
         }
       }}
       onChange={inputChangeHandler}
@@ -133,58 +135,34 @@ const QuantitySelector = ({
     />
   )
 
-  const getButtonTokens = (isEnabled) => (buttonState) => {
-    const disabled = !isEnabled
-    const { ...buttonTokens } = getThemeTokens(componentTheme, tokens, variant, {
-      ...buttonState,
-      disabled
-    })
-
-    return {
-      ...buttonTokens,
-      outerBorderGap: 0,
-      padding
-    }
-  }
-
-  const renderLeftButton = () => {
-    return (
-      <IconButton
-        icon={leftIcon}
-        tokens={getButtonTokens(isDecreaseEnabled)}
-        onPress={(event) => updateNumber(number - 1, event)}
-        onDoubleClick={(event) => updateNumber(number - 1, event)}
-        accessibilityLabel={getCopy('accessibility').decreaseButton}
-        accessibilityDisabled={!isDecreaseEnabled}
-      />
-    )
-  }
-
-  const renderRightButton = () => (
-    <IconButton
-      icon={rightIcon}
-      tokens={getButtonTokens(isIncreaseEnabled)}
-      onPress={() => updateNumber(number + 1)}
-      onDoubleClick={() => updateNumber(number + 1)}
-      accessibilityLabel={getCopy('accessibility').increaseButton}
-      accessibilityDisabled={!isIncreaseEnabled}
-    />
-  )
-
   return (
     <Box space={2} testID={testID}>
       {renderLabel()}
       <Spacer space={2} />
       <InputWrapper>
-        <InputField className={`${alternative ? 'alternative' : ''}`}>
-          {renderTextInput()}
-        </InputField>
-        <RightButtonWrapper className={`${alternative ? 'alternative' : ''}`}>
-          {renderRightButton()}
-        </RightButtonWrapper>
-        <LeftButtonWrapper className={`${alternative ? 'alternative' : ''}`}>
-          {renderLeftButton()}
-        </LeftButtonWrapper>
+        <InputField>{renderTextInput()}</InputField>
+        <div style={{ order: 0 }}>
+          <SideButton
+            isEnabled={isDecreaseEnabled}
+            onPress={() => updateNumber(number - 1)}
+            onDoubleClick={() => updateNumber(number - 1)}
+            tokens={tokens}
+            variant={{ decrease: true, ...variant }}
+            accessibilityLabel={getCopy('accessibility').decreaseButton}
+            accessibilityDisabled={!isDecreaseEnabled}
+          />
+        </div>
+        <div style={{ order: 2 }}>
+          <SideButton
+            isEnabled={isIncreaseEnabled}
+            onPress={() => updateNumber(number + 1)}
+            onDoubleClick={() => updateNumber(number + 1)}
+            accessibilityLabel={getCopy('accessibility').increaseButton}
+            accessibilityDisabled={!isIncreaseEnabled}
+            tokens={tokens}
+            variant={{ increase: true, ...variant }}
+          />
+        </div>
       </InputWrapper>
       {error ? (
         <Box vertical={2}>
@@ -230,6 +208,11 @@ QuantitySelector.propTypes = {
    * The default value of the input field
    */
   defaultValue: PropTypes.number,
+  /**
+   * If the input's state is to be controlled by a parent component, use this prop
+   * together with the `onChange` to pass down and update the lifted state.
+   */
+  value: PropTypes.number,
   /**
    * The label of the input field
    */
@@ -262,7 +245,8 @@ QuantitySelector.propTypes = {
    */
   copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr'])]),
   variant: PropTypes.exact({
-    alternative: PropTypes.bool
+    alternative: PropTypes.bool,
+    disabled: PropTypes.bool
   }),
   tokens: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
   /**

package/src/QuantitySelector/SideButton.jsx

@@ -0,0 +1,74 @@
+import { IconButton, useThemeTokensCallback } from '@telus-uds/components-base'
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const SideButton = ({
+  isEnabled,
+  onPress,
+  onDoubleClick,
+  accessibilityLabel,
+  accessibilityDisabled,
+  tokens,
+  variant
+}) => {
+  const getTokens = useThemeTokensCallback('QuantitySelectorSideButton', tokens, variant)
+  const getButtonTokens = ({ buttonState, disabled }) => {
+    const {
+      borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      ...rest
+    } = getTokens({ ...buttonState, disabled })
+
+    return {
+      ...rest,
+      borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
+      outerBorderRadius: borderRadius,
+      outerBorderTopLeftRadius: borderTopLeftRadius,
+      outerBorderTopRightRadius: borderTopRightRadius,
+      outerBorderBottomLeftRadius: borderBottomLeftRadius,
+      outerBorderBottomRightRadius: borderBottomRightRadius,
+      outerBorderGap: 0,
+      outerBorderWidth: 0
+    }
+  }
+
+  return (
+    <IconButton
+      tokens={(buttonState) => getButtonTokens({ disabled: !isEnabled, buttonState })}
+      onPress={onPress}
+      onDoubleClick={onDoubleClick}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityDisabled={accessibilityDisabled}
+    />
+  )
+}
+
+SideButton.displayName = 'QuantitySelectorSideButton'
+
+SideButton.defaultProps = {
+  isEnabled: true,
+  onPress: () => {},
+  onDoubleClick: () => {},
+  accessibilityLabel: '',
+  accessibilityDisabled: false,
+  tokens: {},
+  variant: {}
+}
+
+SideButton.propTypes = {
+  isEnabled: PropTypes.bool,
+  onPress: PropTypes.func,
+  onDoubleClick: PropTypes.func,
+  accessibilityLabel: PropTypes.string,
+  accessibilityDisabled: PropTypes.bool,
+  tokens: PropTypes.object,
+  variant: PropTypes.object
+}
+export default SideButton