@telus-uds/components-web 2.12.0 → 2.14.0

package/lib/Table/SubHeading.js

@@ -24,7 +24,10 @@ const Header = _ref => {
     children
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Row.default, {
-    children: _react.default.Children.map(children, child => /*#__PURE__*/(0, _react.cloneElement)(child, {
+    children: _react.default.Children.map(children, child =>
+    /*#__PURE__*/
+    // TO DO: pass type as a variant instead of prop
+    (0, _react.cloneElement)(child, {
       type: 'subHeading'
     }))
   });

package/lib/Table/Table.js

@@ -66,6 +66,7 @@ exports.useTableContext = useTableContext;
 const Table = _ref2 => {
   let {
     children,
+    spacing = 'default',
     fullWidth = true,
     text = 'medium',
     tokens,
@@ -110,7 +111,7 @@ const Table = _ref2 => {
         text,
         isScrollable,
         tokens,
-        variant
+        spacing
       },
       children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledTable, {
         tableWidth: tableWidth,

package/lib/TermsAndConditions/ExpandCollapse.js

@@ -41,12 +41,9 @@ const ExpandCollapseIconContainer = /*#__PURE__*/_styledComponents.default.div.w
   } = _ref;
   return {
     alignItems: tokens.expandIconContainerAlignItems,
-    border: `${tokens.expandIconContainerBorder}px solid ${tokens.expandIconContainerBorderColor}`,
-    borderRadius: '50%',
-    display: 'flex',
-    height: tokens.expandIconContainerHeight,
     justifyContent: tokens.expandIconContainerJustifyContent,
-    margin: `${tokens.expandIconContainerMarginX}px ${tokens.expandIconContainerMarginY}px`,
+    marginLeft: `${tokens.expandIconContainerMarginY}px`,
+    marginRight: `${tokens.expandIconContainerMarginY}px`,
     width: tokens.expandIconContainerWidth
   };
 });
@@ -60,7 +57,7 @@ const ExpandCollapseTitle = /*#__PURE__*/_styledComponents.default.h4.withConfig
   } = _ref2;
   return {
     color: tokens.expandTitleColor,
-    fontFamily: `${tokens.listFontName}${tokens.listFontWeight}normal`,
+    fontFamily: `${tokens.expandTitleFontName}${tokens.expandTitleFontWeight}normal`,
     fontSize: tokens.expandTitleFontSize,
     lineHeight: tokens.expandTitleLineHeight,
     margin: `${tokens.expandTitleMarginX}px ${tokens.expandTitleMarginY}px`
@@ -79,8 +76,21 @@ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     expandContentPaddingBottom,
     expandContentPaddingLeft,
     expandContentPaddingRight,
-    expandContentPaddingTop
+    expandContentPaddingTop,
+    contentBorderColor,
+    contentMarginBottom,
+    expandTitlePaddingLeft,
+    expandTitleBorder,
+    expandTitleBorderColor,
+    expandTitleUnderline
   } = getTokens();
+  const [expand, setExpand] = (0, _react.useState)(false);
+
+  const handleExpandToggle = (expandProps, event, expanded) => {
+    expandProps.onToggle('ExpandCollapsePanel', event);
+    setExpand(!expanded);
+  };
+
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse, {
     tokens: {
       borderWidth: expandBaseBorderWidth
@@ -88,7 +98,12 @@ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     children: expandProps => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.ExpandCollapse.Panel, { ...expandProps,
       panelId: "ExpandCollapsePanel",
       controlTokens: {
-        icon: null
+        icon: null,
+        backgroundColor: 'transparent',
+        paddingLeft: expandTitlePaddingLeft,
+        borderColor: expandTitleBorderColor,
+        borderWidth: expandTitleBorder,
+        textLine: expandTitleUnderline
       } // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,
@@ -102,15 +117,16 @@ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
           expanded
         });
         return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ExpandCollapseControl, {
-          onClick: event => expandProps.onToggle('ExpandCollapsePanel', event),
+          onClick: event => handleExpandToggle(expandProps, event, expanded),
           ref: ref,
           children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandCollapseIconContainer, {
             tokens: getTokens(),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.IconButton, {
               icon: icon,
               variant: {
                 size: 'small'
-              }
+              },
+              onClick: event => handleExpandToggle(expandProps, event, expanded)
             })
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(ExpandCollapseTitle, {
             tokens: getTokens(),
@@ -122,9 +138,11 @@ const ExpandCollapse = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
         contentPaddingBottom: expandContentPaddingBottom,
         contentPaddingLeft: expandContentPaddingLeft,
         contentPaddingRight: expandContentPaddingRight,
-        contentPaddingTop: expandContentPaddingTop
+        contentPaddingTop: expandContentPaddingTop,
+        borderColor: contentBorderColor,
+        marginBottom: contentMarginBottom
       },
-      children: children
+      children: expand ? children : null
     })
   });
 });

package/lib/TermsAndConditions/TermsAndConditions.js

@@ -71,7 +71,8 @@ const Unordered = /*#__PURE__*/_styledComponents.default.ul.withConfig({
   return {
     listStyleType: 'none',
     margin: 0,
-    padding: tokens.unorderedPadding
+    padding: 0,
+    paddingTop: tokens.unorderedPadding
   };
 });
 
@@ -132,17 +133,25 @@ const TermsAndConditions = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
     nonIndexedContent,
     tokens,
     variant = {},
+    dictionary = _dictionary.default,
     ...rest
   } = _ref6;
   const getCopy = (0, _componentsBase.useCopy)({
-    dictionary: _dictionary.default,
+    dictionary,
     copy
   });
   const hasIndexedContent = indexedContent.length > 0;
   const hasNonIndexedContent = nonIndexedContent.length > 0;
-  const themeTokens = (0, _componentsBase.useThemeTokens)('TermsAndConditions', tokens, variant);
+  const viewport = (0, _componentsBase.useViewport)();
+  const themeTokens = (0, _componentsBase.useThemeTokens)('TermsAndConditions', tokens, variant, {
+    viewport
+  });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...selectProps(rest),
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {
+      tokens: {
+        color: themeTokens.dividerColor
+      }
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
       collapseTitle: getCopy('headingView'),
       expandTitle: getCopy('headingHide'),
       ref: ref,
@@ -164,8 +173,11 @@ const TermsAndConditions = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
               block: true,
               heading: true,
-              variant: {
-                size: 'h4'
+              tokens: {
+                fontName: themeTokens.expandTitleFontName,
+                fontWeight: themeTokens.expandTitleFontWeight,
+                fontSize: themeTokens.titleFontSize,
+                lineHeight: themeTokens.titleLineHeight
               },
               children: getCopy('nonIndexedTitle')
             })
@@ -181,10 +193,21 @@ const TermsAndConditions = /*#__PURE__*/(0, _react.forwardRef)((_ref6, ref) => {
           })]
         })]
       })
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {})]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {
+      tokens: {
+        color: themeTokens.dividerColor
+      }
+    })]
   });
 });
-TermsAndConditions.displayName = 'TermsAndConditions';
+TermsAndConditions.displayName = 'TermsAndConditions'; // If a language dictionary entry is provided, it must contain every key
+
+const dictionaryContentShape = _propTypes.default.shape({
+  headingHide: _propTypes.default.string.isRequired,
+  headingView: _propTypes.default.string.isRequired,
+  nonIndexedTitle: _propTypes.default.string.isRequired
+});
+
 TermsAndConditions.propTypes = { ...selectedSystemPropTypes,
 
   /**
@@ -210,12 +233,21 @@ TermsAndConditions.propTypes = { ...selectedSystemPropTypes,
    *
    * nonIndexedContent do not have a corresponding superscript and instead apply to the page as a whole.
    */
-  nonIndexedContent: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]))
+  nonIndexedContent: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string])),
+
+  /**
+   * Custom dictionary containing the labels to use for `TermsAndConditions`
+   */
+  dictionary: _propTypes.default.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  })
 };
 TermsAndConditions.defaultProps = {
   copy: 'en',
   indexedContent: [],
-  nonIndexedContent: []
+  nonIndexedContent: [],
+  dictionary: _dictionary.default
 };
 var _default = TermsAndConditions;
 exports.default = _default;

package/lib/Testimonial/Testimonial.js

@@ -104,11 +104,13 @@ const Testimonial = _ref5 => {
     imageSrc,
     image = imageSrc,
     additionalInfo,
-    testimonialStyle = 'heading',
+    testimonialStyle = 'large',
     tokens,
+    copy = 'en',
     variant = {},
     ...rest
   } = _ref5;
+  const viewport = (0, _componentsBase.useViewport)();
   const {
     testimonialContainerGap,
     quoteContainerGap,
@@ -117,9 +119,34 @@ const Testimonial = _ref5 => {
     figcaptionGap,
     textColor,
     icon,
+    iconFr,
     iconColor,
-    imageSize
-  } = (0, _componentsBase.useThemeTokens)('Testimonial', tokens, variant);
+    imageSize,
+    testimonialFontSizeLarge,
+    testimonialLineHeightLarge,
+    testimonialFontWeightLarge,
+    testimonialFontSizeHeading,
+    testimonialLineHeightHeading,
+    testimonialFontNameHeading,
+    testimonialFontWeightHeading,
+    authorFontSize,
+    authorLineHeight,
+    authorFontName,
+    authorFontWeight,
+    additionalFontSize,
+    additionalLineHeight,
+    additionalFontName,
+    additionalFontWeight
+  } = (0, _componentsBase.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__*/(0, _jsxRuntime.jsxs)(TestimonialContainer, {
     testimonialContainerGap: testimonialContainerGap,
     ...selectProps(rest),
@@ -132,7 +159,7 @@ const Testimonial = _ref5 => {
         variant: {
           size: 'micro'
         },
-        icon: icon
+        icon: copy === 'en' ? icon : iconFr
       }), showDivider && /*#__PURE__*/(0, _jsxRuntime.jsx)(Divider, {
         dividerBackgroundColor: dividerBackgroundColor,
         dividerBorder: dividerBorder,
@@ -145,9 +172,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__*/(0, _jsxRuntime.jsxs)(Figcaption, {
       figcaptionGap: figcaptionGap,
@@ -160,20 +190,26 @@ const Testimonial = _ref5 => {
       }) : image), (title || additionalInfo) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(AuthorInfoContainer, {
         children: [title && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.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__*/(0, _jsxRuntime.jsx)(_componentsBase.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/VideoPicker/VideoPickerPlayer.js

@@ -39,11 +39,13 @@ const VideoPickerPlayer = _ref => {
       space: 2,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
         variant: {
-          size: 'h2',
-          colour: 'secondary'
+          size: 'h3'
         },
         children: video.title
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        variant: {
+          colour: 'default'
+        },
         children: video.description
       })]
     })]

package/lib/VideoPicker/VideoPickerThumbnail.js

@@ -61,38 +61,47 @@ const createReactNativeStyles = _ref => {
   });
 };
 
-const VideoThumbnail = /*#__PURE__*/_styledComponents.default.div.withConfig({
-  displayName: "VideoPickerThumbnail__VideoThumbnail",
+const ImageContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "VideoPickerThumbnail__ImageContainer",
   componentId: "components-web__sc-1glxurq-0"
-})(["position:relative;width:", ";flex-shrink:0;* button{display:none;}&::before{content:'';display:block;padding-bottom:56.25%;}&::after{content:'';border:", "px solid;border-color:", ";border-radius:", "px;position:absolute;top:0;left:0;right:0;bottom:0;}& > div{border-radius:", "px;}"], props => props.layout === 'vertical' ? '100%' : '144px', _ref2 => {
+})(["padding:", ";border:", ";border-radius:", "px;"], props => `${props.outerBorderGap}px`, props => `${props.outerBorderWidth}px solid ${props.outerBorderColor}`, _ref2 => {
   let {
-    borderWidth
+    outerBorderRadius
   } = _ref2;
-  return borderWidth;
-}, _ref3 => {
+  return outerBorderRadius;
+});
+
+const VideoThumbnail = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "VideoPickerThumbnail__VideoThumbnail",
+  componentId: "components-web__sc-1glxurq-1"
+})(["position:relative;width:", ";flex-shrink:0;* button{display:none;}&::before{content:'';display:block;padding-bottom:56.25%;}&::after{content:'';border:", "px solid;border-color:", ";border-radius:", "px;position:absolute;top:0;left:0;right:0;bottom:0;}& > div{border-radius:", "px;}"], props => props.layout === 'vertical' ? '100%' : '144px', _ref3 => {
   let {
-    isPlaying,
-    borderColor
+    borderWidth
   } = _ref3;
-  return isPlaying ? borderColor : 'transparent';
+  return borderWidth;
 }, _ref4 => {
   let {
-    borderRadius
+    borderColor
   } = _ref4;
-  return borderRadius;
+  return borderColor;
 }, _ref5 => {
   let {
     borderRadius
   } = _ref5;
   return borderRadius;
+}, _ref6 => {
+  let {
+    borderRadius
+  } = _ref6;
+  return borderRadius;
 });
 
 const ThumbnailTitleContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "VideoPickerThumbnail__ThumbnailTitleContainer",
-  componentId: "components-web__sc-1glxurq-1"
+  componentId: "components-web__sc-1glxurq-2"
 })(["display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;"]);
 
-const VideoPickerThumbnail = _ref6 => {
+const VideoPickerThumbnail = _ref7 => {
   let {
     videoPlayerRef,
     selectedVideoId,
@@ -103,56 +112,59 @@ const VideoPickerThumbnail = _ref6 => {
     itemPositions,
     index,
     width = '100%'
-  } = _ref6;
+  } = _ref7;
   const viewport = (0, _componentsBase.useViewport)();
-  const {
-    titleColor,
-    subTitleColor,
-    ...themeTokens
-  } = (0, _componentsBase.useThemeTokens)('VideoPickerThumbnail');
-  const rnStyles = createReactNativeStyles(themeTokens);
+  const getTokens = (0, _componentsBase.useThemeTokensCallback)('VideoPickerThumbnail', {}, {});
   const {
     timestamp
   } = (0, _helpers.getTimestamp)(video.videoLength, video.copy);
   const isPlaying = selectedVideoId === video.videoId;
 
-  const renderThumbnailImage = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoThumbnail, { ...themeTokens,
-    isPlaying: isPlaying,
-    layout: layout,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSplash.default, {
-      simpleMode: true,
-      poster: video.posterSrc || `https://img.youtube.com/vi/${video.videoId}/maxresdefault.jpg`,
-      videoLength: video.videoLength,
-      copy: video.copy
-    })
-  });
+  const renderThumbnailImage = themeTokens => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(VideoThumbnail, { ...themeTokens,
+      isPlaying: isPlaying,
+      layout: layout,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_VideoSplash.default, {
+        simpleMode: true,
+        poster: video.posterSrc || `https://img.youtube.com/vi/${video.videoId}/maxresdefault.jpg`,
+        videoLength: video.videoLength,
+        copy: video.copy
+      })
+    });
+  };
 
-  const renderThumbnailInfo = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
-    space: 2,
-    tokens: {
-      flexShrink: 1
-    },
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbnailTitleContainer, {
-      viewport: viewport,
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+  const renderThumbnailInfo = _ref8 => {
+    let {
+      titleColor,
+      subTitleColor
+    } = _ref8;
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+      space: 2,
+      tokens: {
+        flexShrink: 1
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ThumbnailTitleContainer, {
+        viewport: viewport,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          variant: {
+            bold: true
+          },
+          tokens: {
+            color: titleColor
+          },
+          children: video.title
+        })
+      }), viewport !== _systemConstants.viewports.xs && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
         variant: {
-          bold: true
+          size: 'micro'
         },
         tokens: {
-          color: isPlaying ? titleColor : 'none'
+          color: subTitleColor
         },
-        children: video.title
-      })
-    }), viewport !== _systemConstants.viewports.xs && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
-      variant: {
-        size: 'micro'
-      },
-      tokens: {
-        color: subTitleColor
-      },
-      children: timestamp
-    })]
-  });
+        children: timestamp
+      })]
+    });
+  };
 
   const handleLayout = itemPositions !== undefined ? getItemPositionLayoutHandler(itemPositions.positions, index) : undefined;
 
@@ -175,14 +187,45 @@ const VideoPickerThumbnail = _ref6 => {
     accessibilityState: {
       checked: isPlaying
     },
-    style: [rnStyles.container, layout === 'horizontal' && rnStyles.horizontal, isFramed && rnStyles.framed, isFramed && index > 0 && rnStyles.framedLine, {
-      width
-    }],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
-      space: layout === 'vertical' ? 2 : 3,
-      direction: layout === 'vertical' ? 'column' : 'row',
-      children: [renderThumbnailImage(), renderThumbnailInfo()]
-    })
+    style: _ref9 => {
+      let {
+        hovered: hover,
+        focused: focus,
+        pressed
+      } = _ref9;
+      const themeTokens = getTokens({
+        hover,
+        focus,
+        pressed,
+        selected: isPlaying
+      });
+      const rnStyles = createReactNativeStyles(themeTokens);
+      return [rnStyles.container, layout === 'horizontal' && rnStyles.horizontal, isFramed && rnStyles.framed, isFramed && index > 0 && rnStyles.framedLine, {
+        width
+      }, {
+        outline: 'none'
+      }];
+    },
+    children: _ref10 => {
+      let {
+        hovered: hover,
+        focused: focus,
+        pressed
+      } = _ref10;
+      const themeTokens = getTokens({
+        hover,
+        focus,
+        pressed,
+        selected: isPlaying
+      });
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+        space: layout === 'vertical' ? 2 : 3,
+        direction: layout === 'vertical' ? 'column' : 'row',
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(ImageContainer, { ...themeTokens,
+          children: renderThumbnailImage(themeTokens)
+        }), renderThumbnailInfo(themeTokens)]
+      });
+    }
   }, video.videoId);
 };
 

package/lib/VideoPicker/VideoSlider.js

@@ -48,7 +48,7 @@ const VideoSlider = _ref => {
     setContainerWidth(width);
   };
 
-  const itemsGap = 24; // '4' on spacing scale
+  const itemsGap = 32; // '5' on spacing scale
 
   const itemsCount = viewport === 'lg' || viewport === 'xl' ? 4 : 3;
   const itemGapPortioned = (itemsCount - 1) * itemsGap / itemsCount;
@@ -57,7 +57,7 @@ const VideoSlider = _ref => {
   Math.max(containerWidth / itemsCount - itemGapPortioned, 0 // Prevent negative width breaking layout on very narrow containers
   );
   const content = /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.StackView, {
-    space: 4,
+    space: 5,
     direction: "row",
     accessibilityRole: "radiogroup",
     tokens: {

package/lib-module/Autocomplete/Loading.js

@@ -1,9 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Box, StackView, Typography } from '@telus-uds/components-base';
+import { Box, StackView } from '@telus-uds/components-base';
 import Spinner from '../Spinner';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 
 const Loading = _ref => {
   let {
@@ -11,23 +10,18 @@ const Loading = _ref => {
   } = _ref;
   return /*#__PURE__*/_jsx(Box, {
     space: 3,
-    children: /*#__PURE__*/_jsxs(StackView, {
+    children: /*#__PURE__*/_jsx(StackView, {
       direction: "row",
       space: 2,
       tokens: {
         alignItems: 'center'
       },
-      children: [/*#__PURE__*/_jsx(Spinner, {
+      children: /*#__PURE__*/_jsx(Spinner, {
         inline: true,
         show: true,
-        size: "small"
-      }), /*#__PURE__*/_jsx(Typography, {
-        variant: {
-          size: 'small'
-        },
-        accessibilityLiveRegion: "polite",
-        children: label
-      })]
+        label: label,
+        labelPosition: "right"
+      })
     })
   });
 };

package/lib-module/Autocomplete/dictionary.js

@@ -1,12 +1,12 @@
 export default {
   en: {
     hasResults: 'Some results are available',
-    loading: 'Loading suggestions...',
+    loading: 'Searching...',
     noResults: 'No results found'
   },
   fr: {
     hasResults: 'Quelques suggestions sont disponible',
-    loading: 'Chargement en cours...',
+    loading: 'Recherche...',
     noResults: 'Aucun résultat trouvé'
   }
 };

package/lib-module/Badge/Badge.js

@@ -61,7 +61,8 @@ const Badge = _ref6 => {
     paddingTop,
     paddingBottom,
     fontName,
-    fontWeight
+    fontWeight,
+    fontSize
   } = useThemeTokens('Badge', tokens, variant);
   const semanticGradient = gradient && transformGradient(gradient);
   const {
@@ -78,6 +79,11 @@ const Badge = _ref6 => {
     background = semanticGradient;
   }
 
+  const fontSizeMapping = {
+    12: 'micro',
+    14: 'small',
+    16: 'h6'
+  };
   return /*#__PURE__*/_jsx(BadgeContainer, {
     isOutlineOffer: isOutlineOffer,
     isAlternative: alternative,
@@ -95,6 +101,9 @@ const Badge = _ref6 => {
         fontWeight,
         color
       },
+      variant: {
+        size: fontSizeMapping[fontSize]
+      },
       children: children
     })
   });