@telus-uds/components-web 1.10.0 → 1.11.0

package/CHANGELOG.md

@@ -1,12 +1,36 @@
 # Change Log - @telus-uds/components-web
 
-This log was last generated on Mon, 01 May 2023 22:02:12 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:02:12 GMT
+Mon, 01 May 2023 22:09:07 GMT
 
 ### Minor changes
 

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");
@@ -312,7 +310,8 @@ 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);
@@ -528,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`
                   }

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))
   });

package/lib/NavigationBar/NavigationBar.js

@@ -0,0 +1,231 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _utils = require("../utils");
+
+var _NavigationItem = _interopRequireDefault(require("./NavigationItem"));
+
+var _NavigationSubMenu = _interopRequireDefault(require("./NavigationSubMenu"));
+
+var _collapseItems = _interopRequireDefault(require("./collapseItems"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _withLinkRouter$propT, _withLinkRouter$propT2, _withLinkRouter$propT3, _withLinkRouter$propT4;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+
+const Heading = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "NavigationBar__Heading",
+  componentId: "components-web__sc-1vis1gt-0"
+})({
+  alignItems: 'center',
+  display: 'flex',
+  flex: 1,
+  justifyContent: 'flex-start',
+  '> *': {
+    display: 'contents',
+    letterSpacing: 0
+  }
+});
+/**
+ * NavigationBar can be used to allow customers to consistently navigate across
+ * key pages within a specific product line
+ */
+
+
+const NavigationBar = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    accessibilityRole = 'navigation',
+    heading,
+    headingLevel = 'h1',
+    items,
+    onChange = () => {},
+    selectedId,
+    LinkRouter,
+    linkRouterProps,
+    ...rest
+  } = _ref;
+  const direction = (0, _componentsBase.useResponsiveProp)({
+    xs: 'column',
+    sm: 'row'
+  });
+  const itemsForViewport = (0, _componentsBase.useResponsiveProp)({
+    xs: (0, _collapseItems.default)(items, selectedId),
+    lg: items
+  });
+  const openOverlayRef = (0, _react.useRef)(null);
+  const [openSubMenuId, setOpenSubMenuId] = (0, _react.useState)(null);
+
+  const handleSubMenuClose = event => {
+    var _openOverlayRef$curre, _openOverlayRef$curre2;
+
+    if (event.type === 'keydown') {
+      if (event.key === 'Escape' || event.key === 27) {
+        setOpenSubMenuId(null);
+      }
+    } else if (event.type === 'click' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre = openOverlayRef.current) !== null && _openOverlayRef$curre !== void 0 && _openOverlayRef$curre.contains(event.target))) {
+      setOpenSubMenuId(null);
+    } else if (event.type === 'touchstart' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.touches[0].target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre2 = openOverlayRef.current) !== null && _openOverlayRef$curre2 !== void 0 && _openOverlayRef$curre2.contains(event.touches[0].target))) {
+      setOpenSubMenuId(null);
+    }
+  }; // Add listeners for mouse clicks outside and for ESCAPE key presses
+  // TODO: create a custom hook for that and use here and in the Footnote
+
+
+  (0, _react.useEffect)(() => {
+    if (openSubMenuId !== null) {
+      window.addEventListener('click', handleSubMenuClose);
+      window.addEventListener('keydown', handleSubMenuClose);
+      window.addEventListener('touchstart', handleSubMenuClose);
+    }
+
+    return () => {
+      if (openSubMenuId !== null) {
+        window.removeEventListener('click', handleSubMenuClose);
+        window.removeEventListener('keydown', handleSubMenuClose);
+        window.removeEventListener('touchstart', handleSubMenuClose);
+      }
+    };
+  }, [openSubMenuId]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+    accessibilityRole: accessibilityRole,
+    direction: direction,
+    ref: ref,
+    space: 2,
+    tokens: {
+      alignItems: direction === 'column' ? 'flex-start' : 'center',
+      justifyContent: 'flex-end'
+    },
+    ...selectProps(rest),
+    children: [heading && /*#__PURE__*/(0, _jsxRuntime.jsx)(Heading, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
+        variant: {
+          size: 'h5'
+        },
+        heading: headingLevel,
+        children: heading
+      })
+    }), itemsForViewport === null || itemsForViewport === void 0 ? void 0 : itemsForViewport.map((_ref2, index) => {
+      let {
+        href,
+        label,
+        id,
+        onClick,
+        ref: itemRef,
+        LinkRouter: ItemLinkRouter = LinkRouter,
+        linkRouterProps: itemLinkRouterProps,
+        items: nestedItems,
+        ...itemRest
+      } = _ref2;
+      const itemId = id ?? label;
+
+      const handleClick = event => {
+        if (nestedItems) {
+          setOpenSubMenuId(openSubMenuId !== itemId ? itemId : null);
+        }
+
+        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        onChange === null || onChange === void 0 ? void 0 : onChange(itemId, event);
+      };
+
+      const ItemComponent = nestedItems ? _NavigationSubMenu.default : _NavigationItem.default;
+      const isOpen = itemId === openSubMenuId;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemComponent, {
+        ref: itemRef,
+        href: href,
+        onClick: handleClick // TODO: refactor to pass selected ID via context
+        ,
+        selectedId: selectedId,
+        index: index,
+        LinkRouter: ItemLinkRouter,
+        linkRouterProps: { ...linkRouterProps,
+          ...itemLinkRouterProps
+        },
+        items: nestedItems,
+        selected: itemId === selectedId,
+        ...itemRest,
+        ...(nestedItems && {
+          isOpen
+        }),
+        ...(nestedItems && isOpen && {
+          openOverlayRef
+        }),
+        children: label
+      }, itemId);
+    })]
+  });
+});
+NavigationBar.displayName = 'NavigationBar';
+NavigationBar.propTypes = { ...selectedSystemPropTypes,
+  ..._componentsBase.withLinkRouter.propTypes,
+
+  /**
+   * NavigationBar pages
+   *
+   * Each `item` object must contain:
+   *  - `heading` - user-facing text in the tab link
+   *  - `href` - the URL of the page linked to. Do not use hash links, for content within a page, use `Tabs`.
+   *  - `id` - a stable, unique identifier of the page within the set. Not written into the HTML.
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    label: _propTypes.default.string.isRequired,
+    href: _propTypes.default.string,
+    id: _propTypes.default.string.isRequired,
+    onClick: _propTypes.default.func,
+    selected: _propTypes.default.bool,
+    LinkRouter: (_withLinkRouter$propT = _componentsBase.withLinkRouter.propTypes) === null || _withLinkRouter$propT === void 0 ? void 0 : _withLinkRouter$propT.LinkRouter,
+    linkRouterProps: (_withLinkRouter$propT2 = _componentsBase.withLinkRouter.propTypes) === null || _withLinkRouter$propT2 === void 0 ? void 0 : _withLinkRouter$propT2.linkRouterProps,
+    // One layer of nested links is allowed
+    items: _propTypes.default.arrayOf(_propTypes.default.shape({
+      label: _propTypes.default.string.isRequired,
+      href: _propTypes.default.string,
+      id: _propTypes.default.string.isRequired,
+      onClick: _propTypes.default.func,
+      selected: _propTypes.default.bool,
+      LinkRouter: (_withLinkRouter$propT3 = _componentsBase.withLinkRouter.propTypes) === null || _withLinkRouter$propT3 === void 0 ? void 0 : _withLinkRouter$propT3.LinkRouter,
+      linkRouterProps: (_withLinkRouter$propT4 = _componentsBase.withLinkRouter.propTypes) === null || _withLinkRouter$propT4 === void 0 ? void 0 : _withLinkRouter$propT4.linkRouterProps
+    }))
+  })).isRequired,
+
+  /**
+   * Common navigation bar heading.
+   */
+  heading: _propTypes.default.string,
+  headingLevel: _propTypes.default.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
+
+  /**
+   * Matches the `id` property of the item in `items` corresponding to the current page
+   */
+  selectedId: _propTypes.default.string.isRequired,
+
+  /**
+   * Optional function to be called on pressing a link
+   */
+  onChange: _propTypes.default.func
+};
+NavigationBar.defaultProps = {
+  heading: undefined,
+  headingLevel: 'h1',
+  onChange: () => {}
+};
+var _default = NavigationBar;
+exports.default = _default;