@telus-uds/components-web 2.11.0 → 2.13.0

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/Card/Card.js

@@ -12,6 +12,7 @@ const selectCardBaseTokens = _ref => {
   let {
     backgroundColor,
     borderColor,
+    gradient,
     borderWidth,
     borderRadius,
     shadow,
@@ -20,6 +21,7 @@ const selectCardBaseTokens = _ref => {
   return {
     backgroundColor,
     borderColor,
+    gradient,
     borderWidth,
     borderRadius,
     shadow,

package/lib-module/DatePicker/DatePicker.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useState } from 'react';
+import React, { forwardRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import momentPropTypes from 'react-moment-proptypes';
@@ -110,6 +110,12 @@ const DatePicker = /*#__PURE__*/forwardRef((_ref, ref) => {
     dictionary,
     copy
   });
+  useEffect(() => {
+    if (!moment(date).isSame(inputDate)) {
+      setInputDate(date);
+      setInputText(date instanceof moment ? date.format(dateFormat) : '');
+    }
+  }, [date, inputDate]);
 
   const onFocusChange = _ref2 => {
     let {

package/lib-module/ExpandCollapseMini/ExpandCollapseMini.js

@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
-import { ExpandCollapse, useThemeTokens } from '@telus-uds/components-base';
+import { ExpandCollapse } from '@telus-uds/components-base';
 import ExpandCollapseMiniControl from './ExpandCollapseMiniControl';
 import { jsx as _jsx } from "react/jsx-runtime";
 const ExpandCollapseMini = /*#__PURE__*/forwardRef((_ref, ref) => {
@@ -10,12 +10,6 @@ const ExpandCollapseMini = /*#__PURE__*/forwardRef((_ref, ref) => {
     tokens,
     ...rest
   } = _ref;
-  const {
-    variant
-  } = rest;
-  const {
-    borderWidth
-  } = useThemeTokens('ExpandCollapseMini', tokens, variant);
 
   const handleChange = (openPanels, event) => {
     if (typeof onToggle === 'function') {
@@ -25,9 +19,6 @@ const ExpandCollapseMini = /*#__PURE__*/forwardRef((_ref, ref) => {
   };
 
   return /*#__PURE__*/_jsx(ExpandCollapse, {
-    tokens: {
-      borderWidth
-    },
     onChange: handleChange,
     children: expandProps => /*#__PURE__*/_jsx(ExpandCollapse.Panel, { ...expandProps,
       panelId: "ExpandCollapseMiniPanel",
@@ -35,7 +26,11 @@ const ExpandCollapseMini = /*#__PURE__*/forwardRef((_ref, ref) => {
         mini: true
       },
       controlTokens: {
-        icon: null
+        // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
+        icon: null,
+        borderColor: 'transparent',
+        textLine: 'none',
+        backgroundColor: 'transparent'
       } // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,

package/lib-module/ExpandCollapseMini/ExpandCollapseMiniControl.js

@@ -15,7 +15,22 @@ const presentationOnly = {
 
 };
 
-const ExpandCollapseMiniControl = _ref => {
+const selectLinkTokens = _ref => {
+  let {
+    color,
+    textLine,
+    lineHeight,
+    fontSize
+  } = _ref;
+  return {
+    color,
+    textLine,
+    blockLineHeight: lineHeight,
+    blockFontSize: fontSize
+  };
+};
+
+const ExpandCollapseMiniControl = _ref2 => {
   let {
     pressableState,
     collapseTitle,
@@ -24,16 +39,25 @@ const ExpandCollapseMiniControl = _ref => {
     tokens,
     variant = {},
     ...rest
-  } = _ref;
+  } = _ref2;
   const {
     expanded,
-    hover
-  } = pressableState || {};
+    hover,
+    focus
+  } = pressableState || {}; // we only want focus outline when focusing, if user is pressing we don't want the border.
+
+  const {
+    outerBorderColor
+  } = useThemeTokens('Link', {}, {}, {
+    focus
+  });
   const {
     size,
-    icon
+    icon,
+    ...themeTokens
   } = useThemeTokens('ExpandCollapseMiniControl', tokens, variant, {
-    expanded
+    expanded,
+    focus
   }); // Choose hover styles when any part of Control is hoverred
 
   const appearance = { ...variant,
@@ -61,7 +85,8 @@ const ExpandCollapseMiniControl = _ref => {
     icon: icon,
     iconPosition: iconPosition,
     tokens: linkState => ({ ...getTokens(linkState),
-      outerBorderWidth: 0
+      ...selectLinkTokens(themeTokens),
+      outerBorderColor
     }),
     ...presentationOnly,
     ...selectProps(rest),

package/lib-module/Footnote/FootnoteLink.js

@@ -122,7 +122,6 @@ FootnoteLink.propTypes = { ...selectedSystemPropTypes,
   fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 FootnoteLink.defaultProps = {
-  copy: 'en',
-  fontSize: 'smaller'
+  copy: 'en'
 };
 export default FootnoteLink;

package/lib-module/NavigationBar/NavigationSubMenu.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import { Icon, Spacer, useResponsiveProp, useThemeTokens } from '@telus-uds/components-base';
+import { Icon, useResponsiveProp, useThemeTokens } from '@telus-uds/components-base';
 import NavigationItem from './NavigationItem';
 import Listbox from '../Listbox';
 import useOverlaidPosition from '../utils/useOverlaidPosition';
@@ -98,22 +98,18 @@ const NavigationSubMenu = _ref => {
       onClick: handleClick,
       icon: icoMenu,
       children: _ref2 => {
-        var _textStyles$, _textStyles$2;
+        var _textStyles$;
 
         let {
           textStyles
         } = _ref2;
-        return [children, /*#__PURE__*/_jsx(Spacer, {
-          space: 1,
-          direction: "row"
-        }, `${id}_spacer`), /*#__PURE__*/_jsx(Icon, {
+        return [children, /*#__PURE__*/_jsx(Icon, {
           icon: icoMenu,
           variant: {
-            size: 'small'
+            size: 'micro'
           },
           tokens: {
-            color: (_textStyles$ = textStyles[0]) === null || _textStyles$ === void 0 ? void 0 : _textStyles$.color,
-            size: (_textStyles$2 = textStyles[0]) === null || _textStyles$2 === void 0 ? void 0 : _textStyles$2.fontSize
+            color: (_textStyles$ = textStyles[0]) === null || _textStyles$ === void 0 ? void 0 : _textStyles$.color
           }
         }, `${id}_icon`)];
       }

package/lib-module/PriceLockup/PriceLockup.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { A11yText, Divider, selectSystemProps, Typography, useThemeTokens, useViewport } from '@telus-uds/components-base';
+import { A11yText, Divider, selectSystemProps, Typography, useThemeTokens, useViewport, getTokensPropType } from '@telus-uds/components-base';
 import styled from 'styled-components';
 import FootnoteLink from '../Footnote/FootnoteLink';
 import getTypographyTokens from './tokens';
@@ -293,6 +293,11 @@ PriceLockup.propTypes = { ...selectedSystemPropTypes,
    *
    * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
    */
-  a11yText: PropTypes.string
+  a11yText: PropTypes.string,
+
+  /**
+   * `PriceLockup` tokens
+   */
+  tokens: getTokensPropType('PriceLockup')
 };
 export default PriceLockup;

package/lib-module/Spinner/Spinner.js

@@ -88,6 +88,7 @@ const Spinner = _ref3 => {
     fullScreen = false,
     inline = false,
     label,
+    labelPosition,
     show = false,
     isStatic = false,
     tokens,
@@ -120,6 +121,7 @@ const Spinner = _ref3 => {
           ...selectProps(rest),
           children: /*#__PURE__*/_jsx(SpinnerContent, {
             label: label,
+            labelPosition: labelPosition,
             overlay: true,
             size: size,
             thickness: thickness,
@@ -139,6 +141,7 @@ const Spinner = _ref3 => {
       ...selectProps(rest),
       children: [/*#__PURE__*/_jsx(SpinnerContent, {
         label: label,
+        labelPosition: labelPosition,
         overlay: true,
         size: size,
         thickness: thickness,
@@ -164,6 +167,7 @@ const Spinner = _ref3 => {
   return /*#__PURE__*/_jsx(SpinnerContainer, { ...selectProps(rest),
     children: /*#__PURE__*/_jsx(SpinnerContent, {
       label: label,
+      labelPosition: labelPosition,
       size: size,
       thickness: thickness,
       sizeVariant: sizeVariant,
@@ -211,6 +215,11 @@ Spinner.propTypes = { ...selectedSystemPropTypes,
   /**
    * If true, it should render a static spinner
    */
-  isStatic: PropTypes.bool
+  isStatic: PropTypes.bool,
+
+  /**
+   * Determine where the label of the spinner should be placed, left, right, bottom or top.
+   */
+  labelPosition: PropTypes.string
 };
 export default Spinner;

package/lib-module/Spinner/SpinnerContent.js

@@ -31,6 +31,7 @@ const Container = /*#__PURE__*/styled.div.withConfig({
 const SpinnerContent = _ref2 => {
   let {
     label,
+    labelPosition,
     overlay = false,
     sizeVariant,
     size,
@@ -38,6 +39,12 @@ const SpinnerContent = _ref2 => {
     isStatic,
     ...rest
   } = _ref2;
+  const labelMapping = {
+    top: 'column-reverse',
+    bottom: 'column',
+    left: 'row-reverse',
+    right: 'row'
+  };
   return /*#__PURE__*/_jsx(Container, {
     overlay: overlay,
     children: /*#__PURE__*/_jsxs(StackView, {
@@ -45,6 +52,7 @@ const SpinnerContent = _ref2 => {
       tokens: {
         alignItems: 'center'
       },
+      direction: labelMapping[labelPosition],
       children: [/*#__PURE__*/_jsx(ActivityIndicator, {
         label: label,
         tokens: {

package/lib-module/Table/Cell.js

@@ -1,93 +1,80 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
-import { Typography, useThemeTokens } from '@telus-uds/components-base';
+import { Typography, useThemeTokens, applyShadowToken } from '@telus-uds/components-base';
 import { useTableContext } from './Table';
 import { jsx as _jsx } from "react/jsx-runtime";
-const stickyStyles = /*#__PURE__*/css(["position:sticky;left:0;z-index:2;clip-path:inset(0 -8px 0 0);&::before{content:'';box-shadow:", ";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}"], _ref => {
+const HEADER_TYPE = {
+  HEADING: 'heading',
+  SUBHEADING: 'subHeading',
+  ROWHEADING: 'rowHeading'
+};
+
+const stickyStyles = _ref => {
   let {
-    cellStickyShadow
+    cellStickyShadow,
+    stickyBackgroundColor,
+    type
   } = _ref;
-  return cellStickyShadow;
-});
+  return css(["position:sticky;left:0;z-index:2;clip-path:inset(0 -8px 0 0);", " &::before{content:'';box-shadow:", ";position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;}"], type !== HEADER_TYPE.SUBHEADING && type !== HEADER_TYPE.HEADING ? `background-color: ${stickyBackgroundColor};` : undefined, cellStickyShadow);
+};
+
 const sharedStyles = /*#__PURE__*/css(["", ""], _ref2 => {
   let {
     isSticky,
-    cellBoxShadowColor,
     align,
     cellPaddingTop,
     cellPaddingRight,
     cellPaddingBottom,
     cellPaddingLeft,
-    cellMinWidth
+    cellMinWidth,
+    cellBackground,
+    cellStickyShadow,
+    stickyBackgroundColor,
+    type
   } = _ref2;
-  return css(["", ";box-shadow:inset 0 -1px 0 ", ";text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;"], isSticky ? stickyStyles : undefined, cellBoxShadowColor, align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft);
+  return css(["text-align:", ";min-width:", "px;padding:", "px ", "px ", "px ", "px;background-color:", ";", ";"], align, cellMinWidth, cellPaddingTop, cellPaddingRight, cellPaddingBottom, cellPaddingLeft, cellBackground, isSticky && stickyStyles({
+    type,
+    cellStickyShadow,
+    stickyBackgroundColor
+  }));
 });
-const StyledHeading = /*#__PURE__*/styled.th.withConfig({
-  displayName: "Cell__StyledHeading",
+
+const createStyledCell = htmlElement => styled[htmlElement].withConfig({
+  displayName: "Cell__createStyledCell",
   componentId: "components-web__sc-ltgfic-0"
-})(["", ";", ""], sharedStyles, _ref3 => {
+})(["", ";box-shadow:", ";"], sharedStyles, _ref3 => {
   let {
-    cellHeadingBackground,
-    cellHeadingBoxShadowColor
+    cellBoxShadowColor,
+    type
   } = _ref3;
-  return `
-  background-color: ${cellHeadingBackground};
-  box-shadow: inset 0 1px 0 ${cellHeadingBoxShadowColor}, inset 0 -1px 0 ${cellHeadingBoxShadowColor};`;
-});
-const StyledSubHeading = /*#__PURE__*/styled.th.withConfig({
-  displayName: "Cell__StyledSubHeading",
-  componentId: "components-web__sc-ltgfic-1"
-})(["", ";background-color:", ";"], sharedStyles, _ref4 => {
-  let {
-    cellSubheadingBackground
-  } = _ref4;
-  return cellSubheadingBackground;
-});
-const StyledCell = /*#__PURE__*/styled.td.withConfig({
-  displayName: "Cell__StyledCell",
-  componentId: "components-web__sc-ltgfic-2"
-})(["", ";background-color:", ";"], sharedStyles, _ref5 => {
-  let {
-    cellBackground
-  } = _ref5;
-  return cellBackground;
-});
-const StyledRowHeading = /*#__PURE__*/styled.th.withConfig({
-  displayName: "Cell__StyledRowHeading",
-  componentId: "components-web__sc-ltgfic-3"
-})(["", ";background-color:", ";"], sharedStyles, _ref6 => {
-  let {
-    cellRowHeadingBackground
-  } = _ref6;
-  return cellRowHeadingBackground;
+  return type === HEADER_TYPE.HEADING ? `inset 0 1px 0 ${cellBoxShadowColor}, inset 0 -1px 0 ${cellBoxShadowColor}` : `inset 0 1px 0 ${cellBoxShadowColor}`;
 });
 
-const Cell = _ref7 => {
+const StyledHeaderCell = createStyledCell('th');
+const StyledDataCell = createStyledCell('td');
+
+const Cell = _ref4 => {
   let {
     children,
-    type = 'default',
     isFirstInRow,
     align = 'left',
-    tokens: cellTokens
-  } = _ref7;
+    tokens: cellTokens,
+    type
+  } = _ref4;
   const {
     text,
     isScrollable: isTableScrollable,
-    variant,
-    tokens: tableTokens
+    tokens: tableTokens,
+    spacing
   } = useTableContext();
   const themeTokens = { ...tableTokens,
     ...cellTokens
   };
   const {
     cellMinWidth,
-    cellHeadingBackground,
-    cellHeadingBoxShadowColor,
     cellBoxShadowColor,
-    cellSubheadingBackground,
     cellBackground,
-    cellRowHeadingBackground,
     cellStickyShadow,
     cellPaddingTop,
     cellPaddingRight,
@@ -95,80 +82,72 @@ const Cell = _ref7 => {
     cellPaddingBottom,
     fontName,
     fontWeight,
-    fontSize
-  } = useThemeTokens('Table', themeTokens, variant);
+    fontSize,
+    lineHeight,
+    stickyBackgroundColor
+  } = useThemeTokens('Table', themeTokens, {
+    spacing,
+    type,
+    text
+  });
   const sharedProps = {
     align,
     isSticky: isTableScrollable && isFirstInRow,
+    cellBackground,
     cellMinWidth,
-    cellStickyShadow,
+    cellStickyShadow: applyShadowToken(cellStickyShadow).boxShadow,
     cellPaddingTop,
     cellPaddingRight,
     cellPaddingLeft,
     cellPaddingBottom,
+    stickyBackgroundColor,
     cellBoxShadowColor
   };
   const typographyTokens = {
     fontName,
     fontWeight,
-    fontSize
+    fontSize,
+    lineHeight
   };
 
   switch (type) {
-    case 'heading':
-      return /*#__PURE__*/_jsx(StyledHeading, {
+    case HEADER_TYPE.HEADING:
+      return /*#__PURE__*/_jsx(StyledHeaderCell, {
         scope: "col",
-        cellHeadingBackground: cellHeadingBackground,
-        cellHeadingBoxShadowColor: cellHeadingBoxShadowColor,
         ...sharedProps,
+        type: type,
         children: /*#__PURE__*/_jsx(Typography, {
           tokens: typographyTokens,
-          variant: {
-            size: 'h4'
-          },
           children: children
         })
       });
 
-    case 'subHeading':
-      return /*#__PURE__*/_jsx(StyledSubHeading, {
+    case HEADER_TYPE.SUBHEADING:
+      return /*#__PURE__*/_jsx(StyledHeaderCell, {
         scope: "col",
-        cellSubheadingBackground: cellSubheadingBackground,
         ...sharedProps,
+        type: type,
         children: /*#__PURE__*/_jsx(Typography, {
           tokens: typographyTokens,
-          variant: {
-            size: 'h5'
-          },
           children: children
         })
       });
 
-    case 'rowHeading':
-      return /*#__PURE__*/_jsx(StyledRowHeading, {
+    case HEADER_TYPE.ROWHEADING:
+      return /*#__PURE__*/_jsx(StyledHeaderCell, {
         scope: "row",
-        cellRowHeadingBackground: cellRowHeadingBackground,
         ...sharedProps,
+        type: type,
         children: /*#__PURE__*/_jsx(Typography, {
           tokens: typographyTokens,
-          variant: {
-            size: text === 'small' ? 'h5' : 'h4'
-          },
           children: children
         })
       });
 
     default:
-      return /*#__PURE__*/_jsx(StyledCell, {
-        cellBackground: cellBackground,
-        ...sharedProps,
+      return /*#__PURE__*/_jsx(StyledDataCell, { ...sharedProps,
         children: /*#__PURE__*/_jsx(Typography, {
-          tokens: {
-            fontSize
-          },
-          variant: {
-            size: text
-          },
+          tokens: typographyTokens,
           children: children
         })
       });
@@ -176,14 +155,10 @@ const Cell = _ref7 => {
 };
 
 Cell.propTypes = {
+  type: PropTypes.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
   tokens: PropTypes.object,
   children: PropTypes.node,
 
-  /**
-   * Defines the visual styles of a cell, and whether it should be a `td` or `th` element
-   */
-  type: PropTypes.oneOf(['default', 'heading', 'subHeading', 'rowHeading']),
-
   /**
    * @ignore
    * Used internally for making the first column sticky

package/lib-module/Table/Header.js

@@ -9,7 +9,10 @@ const Header = _ref => {
   } = _ref;
   return /*#__PURE__*/_jsx("thead", {
     children: /*#__PURE__*/_jsx(Row, {
-      children: React.Children.map(children, child => /*#__PURE__*/cloneElement(child, {
+      children: React.Children.map(children, child =>
+      /*#__PURE__*/
+      // TO DO: pass type as a variant instead of prop
+      cloneElement(child, {
         type: 'heading'
       }))
     })

package/lib-module/Table/SubHeading.js

@@ -8,7 +8,10 @@ const Header = _ref => {
     children
   } = _ref;
   return /*#__PURE__*/_jsx(Row, {
-    children: React.Children.map(children, child => /*#__PURE__*/cloneElement(child, {
+    children: React.Children.map(children, child =>
+    /*#__PURE__*/
+    // TO DO: pass type as a variant instead of prop
+    cloneElement(child, {
       type: 'subHeading'
     }))
   });

package/lib-module/Table/Table.js

@@ -39,6 +39,7 @@ export const useTableContext = () => useContext(TableContext);
 const Table = _ref2 => {
   let {
     children,
+    spacing = 'default',
     fullWidth = true,
     text = 'medium',
     tokens,
@@ -83,7 +84,7 @@ const Table = _ref2 => {
         text,
         isScrollable,
         tokens,
-        variant
+        spacing
       },
       children: /*#__PURE__*/_jsx(StyledTable, {
         tableWidth: tableWidth,