@telus-uds/components-web 1.9.0 → 1.11.0

package/CHANGELOG.md

@@ -1,12 +1,50 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Thu, 27 Apr 2023 14:32:16 GMT and should not be manually modified.
+This log was last generated on Tue, 09 May 2023 00:20:29 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.11.0
+
+Tue, 09 May 2023 00:20:29 GMT
+
+### Minor changes
+
+- Fix to import icon from palette (wlsdud194@hotmail.com)
+- make ProgressBar component to multibrand (mauricio.batresmontejo@telus.com)
+- Add fontWeight, fontName, color, currentColor to component implementation (kyle.king2@telus.com)
+- Callout has a new prop - textAlign that centers or left aligns text (akshay.pandey1@telus.com)
+- refactor 'PriceLockup' & 'FootnoteLink' to take additional properties/tokens (kyle.king2@telus.com)
+- font color as a property to follow the standarization guidelines in the brands for the ribbon components (35577399+JoshHC@users.noreply.github.com)
+- Updated snapshots for components that depend on 'Typography' (kyle.king2@telus.com)
+- added font props to Cell component (ignacio.cuyun@telus.com)
+- makes navigation bar component multibrand (mauricio.batresmontejo@telus.com)
+- moved 'Disclaimer' to components-web from ds-allium (kyle.king2@telus.com)
+- move 'VideoPicker' to components-web (kyle.king2@telus.com)
+- Bump @telus-uds/components-base to v1.40.0
+- Bump @telus-uds/system-theme-tokens to v2.25.0
+
+### Patches
+
+- Fix an issue where `Spinner` might not render correctly in `fullScreen` mode (shahzaibkhalidmalik@outlook.com)
+
+## 1.10.0
+
+Mon, 01 May 2023 22:09:07 GMT
+
+### Minor changes
+
+- `Footnote`: Allow `content` prop to take custom JSX, override copy with custom `dictionary` (shahzaibkhalidmalik@outlook.com)
+- Set Item size to micro in Breadcrumbs (wlsdud194@hotmail.com)
+- List Box merged with List changes (akshay.pandey1@telus.com)
+- Added label to Breadcrumb component (wlsdud194@hotmail.com)
+- update snapshots (kyle.king2@telus.com)
+- Bump @telus-uds/components-base to v1.39.0
+- Bump @telus-uds/system-theme-tokens to v2.24.0
+
 ## 1.9.0
 
-Thu, 27 Apr 2023 14:32:16 GMT
+Thu, 27 Apr 2023 14:41:57 GMT
 
 ### Minor changes
 

package/lib/Breadcrumbs/Breadcrumbs.js

@@ -39,7 +39,8 @@ const StyledList = /*#__PURE__*/_styledComponents.default.ol.withConfig({
   listStyle: 'none',
   listStylePosition: 'inside',
   margin: 0,
-  padding: 0
+  padding: 0,
+  alignItems: 'baseline'
 });
 
 const omitProps = _ref => {
@@ -173,7 +174,9 @@ const Breadcrumbs = _ref2 => {
       })
     })
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("nav", { ...selectProps(rest),
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("nav", {
+    "aria-label": "Breadcrumb",
+    ...selectProps(rest),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(StyledList, {
       children: items.map(_ref4 => {
         let {
@@ -194,7 +197,9 @@ const Breadcrumbs = _ref2 => {
             itemLinkRouterProps
           },
           reactRouterLinkComponent: linkComponent,
-          variant: variant,
+          variant: { ...variant,
+            size: 'micro'
+          },
           LinkRouter: ItemLinkRouter
         }, breadcrumbName);
       })

package/lib/Breadcrumbs/Item/Item.js

@@ -55,10 +55,20 @@ const IconContainer = /*#__PURE__*/_styledComponents.default.span.withConfig({
       iconPadding
     } = _ref3;
     return `${iconPadding}px`;
+  },
+  fontFamily: _ref4 => {
+    let {
+      fontName,
+      fontWeight
+    } = _ref4;
+    return (0, _componentsBase.applyTextStyles)({
+      fontName,
+      fontWeight
+    }).fontFamily;
   }
 });
 
-const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
+const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   let {
     href,
     reactRouterLinkComponent: ReactRouterLink,
@@ -70,10 +80,14 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
     },
     // `light` variant (shared with the `Link` component) is default by design
     ...rest
-  } = _ref4;
+  } = _ref5;
   const {
     iconColor,
     icon: ChevronRightIcon,
+    currentColor,
+    color,
+    iconSize,
+    fontSize,
     ...themeTokens
   } = (0, _componentsBase.useThemeTokens)('Breadcrumbs', tokens, variant);
 
@@ -87,14 +101,21 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledItemContainer, { ...themeTokens,
     children: current ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
-      variant: { ...variant,
-        secondary: true
+      tokens: {
+        color: currentColor,
+        fontSize
+      },
+      variant: { ...variant
       },
       children: children
     }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
       children: [ReactRouterLink ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ReactRouterLink, { ...linkOptions,
-        // TODO refactor
+        tokens: {
+          color,
+          blockFontSize: fontSize
+        } // TODO refactor
         // eslint-disable-next-line react/no-unstable-nested-components
+        ,
         component: props => {
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, { ...props,
             variant: variant
@@ -103,12 +124,16 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
         ref: ref,
         children: children
       }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Link, { ...linkOptions,
+        tokens: {
+          color,
+          blockFontSize: fontSize
+        },
         ref: ref,
         variant: variant,
         children: children
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(IconContainer, { ...themeTokens,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ChevronRightIcon, {
-          size: 16,
+          size: iconSize,
           color: iconColor
         })
       })]

package/lib/Callout/Callout.js

@@ -21,6 +21,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
 
+const getAlignment = (rounded, textAlignToFlex) => {
+  if (textAlignToFlex) {
+    switch (textAlignToFlex) {
+      case 'left':
+        return 'flex-star';
+
+      case 'center':
+        return 'center';
+
+      default:
+        return 'flex-start';
+    }
+  }
+
+  return rounded ? 'center' : ' flex-start';
+};
+
 const verticalAlignToFlex = verticalAlign => {
   switch (verticalAlign) {
     case 'top':
@@ -43,7 +60,8 @@ const CalloutContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
 })(_ref => {
   let {
     rounded,
-    verticalAlign = 'top',
+    verticalAlign,
+    textAlignToFlex,
     background,
     gap,
     borderRadius,
@@ -55,7 +73,7 @@ const CalloutContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
     gap,
     borderRadius,
     padding,
-    justifyContent: `${rounded ? 'center' : 'flex-start'}`,
+    justifyContent: getAlignment(rounded, textAlignToFlex),
     alignItems: verticalAlignToFlex(verticalAlign)
   };
 });
@@ -64,7 +82,8 @@ const Callout = _ref2 => {
   let {
     icon,
     children,
-    verticalAlign = 'top',
+    verticalAlign,
+    textAlignToFlex,
     tokens,
     variant = {},
     ...rest
@@ -88,6 +107,7 @@ const Callout = _ref2 => {
     rounded: rounded,
     "data-testid": "callout-container",
     verticalAlign: verticalAlign,
+    textAlignToFlex: textAlignToFlex,
     background: background,
     gap: gap,
     borderRadius: borderRadius,
@@ -118,6 +138,7 @@ const Callout = _ref2 => {
 Callout.propTypes = { ...selectedSystemPropTypes,
   icon: _propTypes.default.elementType,
   children: _propTypes.default.node.isRequired,
+  textAlignToFlex: _propTypes.default.oneOf(['center', 'left']),
   verticalAlign: _propTypes.default.oneOf(['top', 'middle', 'bottom'])
 };
 var _default = Callout;

package/lib/Disclaimer/Disclaimer.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+
+const StyledDisclaimer = /*#__PURE__*/_styledComponents.default.p.withConfig({
+  displayName: "Disclaimer__StyledDisclaimer",
+  componentId: "components-web__sc-1l4xf7u-0"
+})(_ref => {
+  let {
+    fontName,
+    fontWeight,
+    fontSize,
+    ...tokens
+  } = _ref;
+  const {
+    fontFamily
+  } = (0, _componentsBase.applyTextStyles)({
+    fontName,
+    fontWeight
+  });
+  return {
+    fontSize: `${fontSize}px`,
+    fontFamily,
+    ...tokens
+  };
+});
+/**
+ * Use Disclaimer to display singular legal statement and must be displayed
+ * immediately adjacent to the related, originating content.
+ */
+
+
+const Disclaimer = _ref2 => {
+  let {
+    children,
+    ...rest
+  } = _ref2;
+  const themeTokens = (0, _componentsBase.useThemeTokens)('Disclaimer');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDisclaimer, { ...selectProps(rest),
+    ...themeTokens,
+    children: children
+  });
+};
+
+Disclaimer.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * The content
+   */
+  children: _propTypes.default.node.isRequired
+};
+var _default = Disclaimer;
+exports.default = _default;

package/lib/Disclaimer/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _Disclaimer.default;
+  }
+});
+
+var _Disclaimer = _interopRequireDefault(require("./Disclaimer"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Footnote/Footnote.js

@@ -13,8 +13,6 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _componentsBase = require("@telus-uds/components-base");
 
-var _Close = _interopRequireDefault(require("../../__fixtures__/icons/Close"));
-
 var _OrderedListBase = _interopRequireDefault(require("../OrderedList/OrderedListBase"));
 
 var _utils = require("../utils");
@@ -228,6 +226,19 @@ const ContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   };
 });
 
+const StyledCustomContentContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "Footnote__StyledCustomContentContainer",
+  componentId: "components-web__sc-1563bo5-8"
+})(_ref11 => {
+  let {
+    color
+  } = _ref11;
+  return {
+    color,
+    fontFamily: 'HelveticaNow400normal'
+  };
+});
+
 const usePrevious = value => {
   const ref = (0, _react.useRef)();
   (0, _react.useEffect)(() => {
@@ -271,6 +282,7 @@ const Footnote = props => {
     isOpen,
     tokens,
     variant = {},
+    dictionary = _dictionary.default,
     ...rest
   } = props;
   const {
@@ -298,12 +310,13 @@ const Footnote = props => {
     closeButtonMarginRight,
     closeButtonMarginBottom,
     closeButtonWidth,
-    closeButtonIconSize
+    closeButtonIconSize,
+    closeIcon
   } = (0, _componentsBase.useThemeTokens)('Footnote', tokens, variant);
   const footnoteRef = (0, _react.useRef)(null);
   const headerRef = (0, _react.useRef)(null);
   const bodyRef = (0, _react.useRef)(null);
-  const listRef = (0, _react.useRef)(null);
+  const contentRef = (0, _react.useRef)(null);
   const headingRef = (0, _react.useRef)(null);
   const [data, setData] = (0, _react.useState)({
     content: null,
@@ -314,7 +327,7 @@ const Footnote = props => {
   const [isVisible, setIsVisible] = (0, _react.useState)(false);
   const [isTextVisible, setIsTextVisible] = (0, _react.useState)(true);
   const getCopy = (0, _componentsBase.useCopy)({
-    dictionary: _dictionary.default,
+    dictionary,
     copy
   });
   const prevProps = usePrevious(props);
@@ -345,7 +358,7 @@ const Footnote = props => {
   }, [closeFootnote]);
 
   const saveCurrentHeight = () => {
-    const oldHeight = listRef.current.offsetHeight;
+    const oldHeight = contentRef.current.offsetHeight;
     setBodyHeight(oldHeight);
   };
 
@@ -372,14 +385,14 @@ const Footnote = props => {
         number
       });
 
-      if (bodyHeight !== listRef.current.offsetHeight) {
+      if (bodyHeight !== contentRef.current.offsetHeight) {
         // Set new height
-        setBodyHeight(listRef.current.offsetHeight);
+        setBodyHeight(contentRef.current.offsetHeight);
       } else {
         setIsTextVisible(true);
       }
     } else {
-      setBodyHeight(listRef.current.offsetHeight);
+      setBodyHeight(contentRef.current.offsetHeight);
     }
 
     if (event.propertyName === 'height' && !isTextVisible) {
@@ -448,6 +461,35 @@ const Footnote = props => {
   }, [number, isOpen, prevProps.isOpen, prevProps.number]); // Reset footnote on close
 
   (0, _react.useEffect)(resetFootnote, [isOpen]);
+  const getFootnoteBodyContent = (0, _react.useCallback)(() => {
+    if (!data.number || !data.content) {
+      return null;
+    }
+
+    if ( /*#__PURE__*/_react.default.isValidElement(data.content)) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledCustomContentContainer, {
+        ref: contentRef,
+        children: data.content
+      });
+    }
+
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
+      start: data.number,
+      ref: contentRef,
+      listPaddingLeft: listPaddingLeft,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
+        listItemMarkerFontSize: listItemMarkerFontSize,
+        listItemMarkerLineHeight: listItemMarkerLineHeight,
+        listItemColor: listItemColor,
+        listItemFontSize: listItemFontSize,
+        listItemLineHeight: listItemLineHeight,
+        listItemPaddingLeft: listItemPaddingLeft,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+          children: (0, _utils.renderStructuredContent)(data.content)
+        })
+      })
+    });
+  }, [data.content, data.number, listItemColor, listItemFontSize, listItemLineHeight, listItemMarkerFontSize, listItemMarkerLineHeight, listItemPaddingLeft, listPaddingLeft]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Portal, {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", { ...selectProps(rest),
       children: [isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)(GlobalBodyScrollLock, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledFootnote, {
@@ -485,7 +527,7 @@ const Footnote = props => {
                 },
                 "aria-label": getCopy('close'),
                 children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
-                  icon: _Close.default,
+                  icon: closeIcon,
                   tokens: {
                     size: `${closeButtonIconSize}px`
                   }
@@ -501,22 +543,7 @@ const Footnote = props => {
             maxWidth: theme.contentMaxWidth,
             footnoteBodyBackground: footnoteBodyBackground,
             footnoteBodyPadding: `${footnoteBodyPaddingTop}px ${footnoteBodyPaddingRight}px ${footnoteBodyPaddingBottom}px ${footnoteBodyPaddingLeft}px`,
-            children: data.number && data.content && /*#__PURE__*/(0, _jsxRuntime.jsx)(List, {
-              start: data.number,
-              ref: listRef,
-              listPaddingLeft: listPaddingLeft,
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ListItem, {
-                listItemMarkerFontSize: listItemMarkerFontSize,
-                listItemMarkerLineHeight: listItemMarkerLineHeight,
-                listItemColor: listItemColor,
-                listItemFontSize: listItemFontSize,
-                listItemLineHeight: listItemLineHeight,
-                listItemPaddingLeft: listItemPaddingLeft,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
-                  children: (0, _utils.renderStructuredContent)(data.content)
-                })
-              })
-            })
+            children: getFootnoteBodyContent()
           })]
         })
       })]
@@ -527,6 +554,13 @@ const Footnote = props => {
 const copyShape = _propTypes.default.shape({
   close: _propTypes.default.string.isRequired,
   heading: _propTypes.default.string.isRequired
+}); // If a language dictionary entry is provided, it must contain every key
+
+
+const dictionaryContentShape = _propTypes.default.shape({
+  a11yLabel: _propTypes.default.string.isRequired,
+  close: _propTypes.default.string.isRequired,
+  heading: _propTypes.default.string.isRequired
 });
 
 Footnote.propTypes = { ...selectedSystemPropTypes,
@@ -534,7 +568,7 @@ Footnote.propTypes = { ...selectedSystemPropTypes,
   /**
    * The content.
    */
-  content: _propTypes.default.string,
+  content: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
 
   /**
    * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
@@ -559,7 +593,15 @@ Footnote.propTypes = { ...selectedSystemPropTypes,
    * @param {Object} options Custom options
    * @param {boolean} options.returnFocus Should the `Footnote` return focus on close
    */
-  onClose: _propTypes.default.func.isRequired
+  onClose: _propTypes.default.func.isRequired,
+
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: _propTypes.default.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  })
 };
 Footnote.defaultProps = {
   isOpen: false,

package/lib/Footnote/FootnoteLink.js

@@ -28,22 +28,26 @@ const StyledSup = /*#__PURE__*/_styledComponents.default.sup.withConfig({
   componentId: "components-web__sc-17nd7xo-0"
 })(_ref => {
   let {
-    fontSize = 'smaller',
+    fontSize,
     lineHeight,
     paddingLeft,
-    paddingRight
+    paddingRight,
+    ...fontNameAndWeight
   } = _ref;
   return {
     border: 0,
     color: 'inherit',
     cursor: 'pointer',
-    fontSize,
+    // we want to fallback on 'smaller' but have a valid size when a custom font size is provided.
+    fontSize: fontSize ? `${fontSize}px` : 'smaller',
     lineHeight,
     margin: 0,
     paddingVertical: 0,
     paddingLeft,
     paddingRight,
-    textDecoration: 'underline'
+    textDecoration: 'underline',
+    // apply font family
+    ...(0, _componentsBase.applyTextStyles)(fontNameAndWeight)
   };
 });
 /**
@@ -67,11 +71,7 @@ const FootnoteLink = _ref2 => {
     variant = {},
     ...rest
   } = _ref2;
-  const {
-    lineHeight,
-    paddingLeft,
-    paddingRight
-  } = (0, _componentsBase.useThemeTokens)('FootnoteLink', tokens, variant);
+  const themeTokens = (0, _componentsBase.useThemeTokens)('FootnoteLink', tokens, variant);
   const numbers = Array.isArray(number) ? number : [number];
   const refs = numbers.map(() => /*#__PURE__*/_react.default.createRef());
 
@@ -103,11 +103,9 @@ const FootnoteLink = _ref2 => {
       "aria-label": getCopy('a11yLabel'),
       ref: refs[index],
       onClick: event => handleOnClick(event, index),
-      fontSize: fontSize,
-      lineHeight: lineHeight,
-      paddingLeft: paddingLeft,
-      paddingRight: paddingRight,
       ...selectProps(rest),
+      ...themeTokens,
+      fontSize: fontSize,
       children: `${num}${index !== numbers.length - 1 ? ',' : ''}`
     }, num))
   });