@telus-uds/components-web 2.13.0 → 2.15.0

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>

package/src/Toast/Toast.jsx

@@ -80,6 +80,8 @@ const ToastContainer = styled.div`
   justify-content: center;
   align-items: center;
   flex-wrap: wrap;
+  padding-left: ${({ padding }) => padding}px;
+  padding-right: ${({ padding }) => padding}px;
   background: ${({ containerBackgroundColor }) => containerBackgroundColor};
   gap: ${({ containerGap }) => containerGap};
   height: 0;
@@ -104,7 +106,8 @@ const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) =
     animationBackgroundColorAfter,
     animationColorBefore,
     animationColorAfter,
-    chevronlinkFontWeight
+    chevronlinkFontWeight,
+    ...extraTokens
   } = useThemeTokens('Toast', tokens, variant, { viewport })
 
   // inherit ChevronLink tokens for animation colors
@@ -131,6 +134,7 @@ const Toast = ({ toast, copy, headline, link, tokens, variant = {}, ...rest }) =
       animationColorAfter={animationColorAfter}
       animationFillColorBefore={chevronInverseColor}
       animationFillColorAfter={chevronDefaultColor}
+      {...extraTokens}
       {...selectProps(rest)}
     >
       {headline && <Typography variant={{ bold: true, inverse: true }}>{headline}</Typography>}