@telus-uds/components-web 2.13.0 → 2.14.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/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'
@@ -106,7 +107,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 +144,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

package/src/QuantitySelector/styles.js

@@ -1,83 +1,17 @@
 import styled from 'styled-components'
 
 export const InputField = styled.div`
-  order: 2;
-  min-width: 3.5rem;
-  max-width: 5 rem;
-  height: 28px;
-  padding: 0;
-  width: 64px;
+  order: 1;
   text-align: center;
   z-index: 10;
   input {
     text-align: center;
   }
-
-  &.alternative {
-    input {
-      height: 40px;
-    }
-  }
-`
-
-const ButtonWrapper = styled.div`
-  &.alternative {
-    div[role='button'] {
-      height: 42px;
-      > div {
-        height: 40px;
-        > div {
-          padding: 12px 16px;
-        }
-      }
-    }
-  }
-`
-
-export const LeftButtonWrapper = styled(ButtonWrapper)`
-  order: 0;
-  div[role='button'] {
-    border-radius: 4px 0px 0px 4px !important;
-    > div {
-      border-right: none;
-      border-radius: 4px 0px 0px 4px !important;
-    }
-  }
-
-  &.alternative {
-    div[role='button'] {
-      border-radius: 36px 0px 0px 36px !important;
-      > div {
-        border-radius: 24px 0px 0px 24px !important;
-      }
-    }
-  }
-`
-
-export const RightButtonWrapper = styled(ButtonWrapper)`
-  order: 3;
-  div[role='button'] {
-    border-radius: 0px 4px 4px 0px !important;
-    > div {
-      border-left: none;
-      border-radius: 0px 4px 4px 0px !important;
-    }
-  }
-
-  &.alternative {
-    div[role='button'] {
-      border-radius: 0px 36px 36px 0px !important;
-      > div {
-        border-radius: 0px 36px 36px 0px !important;
-      }
-    }
-  }
 `
 
 export const InputWrapper = styled.div`
-  textalign: start;
+  text-align: start;
   display: flex;
-  flexdirection: row;
-  flexwrap: nowrap;
-  justifycontent: center;
+  flex-direction: row;
+  flex-wrap: nowrap;
 `

package/src/TermsAndConditions/TermsAndConditions.jsx

@@ -13,7 +13,7 @@ import {
 import ExpandCollapse from './ExpandCollapse'
 import OrderedListBase from '../OrderedList/OrderedListBase'
 import { htmlAttrs, media, renderStructuredContent } from '../utils'
-import dictionary from './dictionary'
+import defaultDictionary from './dictionary'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
@@ -72,7 +72,18 @@ const NonIndexedContentTitle = styled.div(({ tokens }) => ({
  * - Use `copy` to set language, ‘en’ for English or ‘fr’ for French
  */
 const TermsAndConditions = forwardRef(
-  ({ copy = 'en', indexedContent, nonIndexedContent, tokens, variant = {}, ...rest }, ref) => {
+  (
+    {
+      copy = 'en',
+      indexedContent,
+      nonIndexedContent,
+      tokens,
+      variant = {},
+      dictionary = defaultDictionary,
+      ...rest
+    },
+    ref
+  ) => {
     const getCopy = useCopy({ dictionary, copy })
     const hasIndexedContent = indexedContent.length > 0
     const hasNonIndexedContent = nonIndexedContent.length > 0
@@ -135,6 +146,13 @@ const TermsAndConditions = forwardRef(
 
 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,
   /**
@@ -161,13 +179,21 @@ TermsAndConditions.propTypes = {
    *
    * 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/src/Testimonial/Testimonial.jsx

@@ -1,7 +1,13 @@
 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'
 
@@ -48,11 +54,13 @@ const Testimonial = ({
   imageSrc,
   image = imageSrc,
   additionalInfo,
-  testimonialStyle = 'heading',
+  testimonialStyle = 'large',
   tokens,
+  copy = 'en',
   variant = {},
   ...rest
 }) => {
+  const viewport = useViewport()
   const {
     testimonialContainerGap,
     quoteContainerGap,
@@ -61,13 +69,43 @@ const Testimonial = ({
     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 (
     <TestimonialContainer testimonialContainerGap={testimonialContainerGap} {...selectProps(rest)}>
       <QuoteContainer quoteContainerGap={quoteContainerGap}>
-        <Icon tokens={{ color: iconColor }} variant={{ size: 'micro' }} icon={icon} />
+        <Icon
+          tokens={{ color: iconColor }}
+          variant={{ size: 'micro' }}
+          icon={copy === 'en' ? icon : iconFr}
+        />
         {showDivider && (
           <Divider
             dividerBackgroundColor={dividerBackgroundColor}
@@ -81,10 +119,22 @@ const Testimonial = ({
           variant={{ size: testimonialStyle === 'large' ? 'large' : 'h3' }}
           tokens={{
             color: textColor,
-            fontWeight: '400'
+            fontSize:
+              testimonialStyle === 'heading'
+                ? testimonialFontSizeHeading
+                : testimonialFontSizeLarge,
+            lineHeight:
+              testimonialStyle === 'heading'
+                ? testimonialLineHeightHeading
+                : testimonialLineHeightLarge,
+            fontName: testimonialFontNameHeading,
+            fontWeight:
+              testimonialStyle === 'heading'
+                ? testimonialFontWeightHeading
+                : testimonialFontWeightLarge
           }}
         >
-          {`\u201C${testimonial}\u201D`}
+          {`${getQuoteTestimonial(true)}${testimonial}${getQuoteTestimonial()}`}
         </Typography>
       </BlockQuote>
       {(image || title || additionalInfo) && (
@@ -105,16 +155,28 @@ const Testimonial = ({
             <AuthorInfoContainer>
               {title && (
                 <Typography
-                  variant={{ size: 'small', colour: 'secondary' }}
-                  tokens={{ fontWeight: '500' }}
+                  variant={{ size: 'small' }}
+                  tokens={{
+                    color: textColor,
+                    fontSize: authorFontSize,
+                    lineHeight: authorLineHeight,
+                    fontName: authorFontName,
+                    fontWeight: authorFontWeight
+                  }}
                 >
                   {title}
                 </Typography>
               )}
               {additionalInfo && (
                 <Typography
-                  variant={{ size: 'micro', colour: 'secondary' }}
-                  tokens={{ fontWeight: '400' }}
+                  variant={{ size: 'small' }}
+                  tokens={{
+                    color: textColor,
+                    fontSize: additionalFontSize,
+                    lineHeight: additionalLineHeight,
+                    fontName: additionalFontName,
+                    fontWeight: additionalFontWeight
+                  }}
                 >
                   {additionalInfo}
                 </Typography>