@telus-uds/components-web 2.21.1 → 2.22.0

package/lib-module/Footnote/Footnote.js

@@ -53,13 +53,11 @@ const StyledFootnote = /*#__PURE__*/styled.div.withConfig({
   let {
     isOpen
   } = _ref2;
-
   if (isOpen) {
     return {
       transform: 'translateY(0)'
     };
   }
-
   return {};
 });
 const StyledFootnoteHeader = /*#__PURE__*/styled.div.withConfig({
@@ -216,19 +214,17 @@ const StyledCustomContentContainer = /*#__PURE__*/styled.div.withConfig({
     fontFamily: 'HelveticaNow400normal'
   };
 });
-
 const usePrevious = value => {
   const ref = useRef();
   useEffect(() => {
     ref.current = value;
   });
-
   if (ref.current) {
     return ref.current;
   }
-
   return {};
 };
+
 /**
  * Use `Footnote` to display a single legal content.
  *
@@ -247,11 +243,8 @@ const usePrevious = value => {
  * - When `Footnote` is open, the inert prop must be set on all children of body excluding the Footnote
  * - When `Footnote` is closed, focus must return to the initiating element
  */
-
-
 const Footnote = props => {
   var _theme$themeOptions;
-
   const viewport = useViewport();
   const {
     copy,
@@ -324,15 +317,14 @@ const Footnote = props => {
   const [isScrollable, setIsScrollable] = useState(false);
   const closeFootnote = useCallback((event, options) => {
     onClose(event, options);
-  }, [onClose]); // Listen for ESCAPE, close button clicks, and clicks outside of the Footnote. Call onClose.
+  }, [onClose]);
 
+  // Listen for ESCAPE, close button clicks, and clicks outside of the Footnote. Call onClose.
   const handleClose = useCallback(event => {
     var _footnoteRef$current, _footnoteRef$current2;
-
     if (!isVisible) {
       return;
     }
-
     if (event.type === 'keydown') {
       if (event.key === 'Escape' || event.key === 27) {
         closeFootnote(event, {
@@ -349,18 +341,15 @@ const Footnote = props => {
       });
     }
   }, [closeFootnote, isVisible]);
-
   const saveCurrentHeight = () => {
     const oldHeight = contentRef.current.offsetHeight;
     setBodyHeight(oldHeight);
   };
-
   const focusHeading = () => {
     if (Boolean(content) && isVisible && headingRef && headingRef.current !== null) {
       headingRef.current.focus();
     }
   };
-
   const handleStyledFootnoteTransitionEnd = event => {
     if (event.propertyName === 'transform' && !isOpen) {
       setIsVisible(false);
@@ -368,16 +357,13 @@ const Footnote = props => {
       focusHeading();
     }
   };
-
   const handleTransitionEnd = event => {
     event.persist();
-
     if (event.propertyName === 'opacity' && !isTextVisible) {
       setData({
         content,
         number
       });
-
       if (bodyHeight !== contentRef.current.offsetHeight) {
         // Set new height
         setBodyHeight(contentRef.current.offsetHeight);
@@ -387,34 +373,30 @@ const Footnote = props => {
     } else {
       setBodyHeight(contentRef.current.offsetHeight);
     }
-
     if (event.propertyName === 'height' && !isTextVisible) {
       setIsTextVisible(true);
     }
   };
-
   const resetFootnote = () => {
     // Reset footnote state if closed
     if (!isOpen) {
       setBodyHeight('auto');
       setIsTextVisible(true);
     }
-  }; // Set height of header on mount
-
+  };
 
+  // Set height of header on mount
   useEffect(() => {
     var _headerRef$current;
-
     setHeaderHeight((_headerRef$current = headerRef.current) === null || _headerRef$current === void 0 ? void 0 : _headerRef$current.offsetHeight);
   }, []);
-
   const preventDefault = event => {
     if (!bodyRef.current.contains(event.touches[0].target)) {
       event.preventDefault();
     }
-  }; // Add listeners for mouse clicks outside of Footnote and for ESCAPE key presses
-
+  };
 
+  // Add listeners for mouse clicks outside of Footnote and for ESCAPE key presses
   useEffect(() => {
     if (isOpen) {
       setIsVisible(true);
@@ -426,7 +408,6 @@ const Footnote = props => {
         passive: false
       });
     }
-
     return () => {
       if (isOpen) {
         document.removeEventListener('mousedown', handleClose);
@@ -436,8 +417,9 @@ const Footnote = props => {
         window.removeEventListener('touchmove', preventDefault);
       }
     };
-  }, [handleClose, isOpen]); // Set data if opening a new footnote
+  }, [handleClose, isOpen]);
 
+  // Set data if opening a new footnote
   useEffect(() => {
     if (isOpen && !prevProps.isOpen) {
       setData({
@@ -451,14 +433,14 @@ const Footnote = props => {
       saveCurrentHeight();
       setIsTextVisible(false);
     }
-  }, [number, isOpen, prevProps.isOpen, prevProps.number]); // Reset footnote on close
+  }, [number, isOpen, prevProps.isOpen, prevProps.number]);
 
+  // Reset footnote on close
   useEffect(resetFootnote, [isOpen]);
   const getFootnoteBodyContent = useCallback(() => {
     if (!data.number || !data.content) {
       return null;
     }
-
     if ( /*#__PURE__*/React.isValidElement(data.content)) {
       return /*#__PURE__*/_jsx(StyledCustomContentContainer, {
         listItemColor: listItemColor,
@@ -469,7 +451,6 @@ const Footnote = props => {
         children: data.content
       });
     }
-
     return /*#__PURE__*/_jsx(List, {
       start: data.number,
       ref: contentRef,
@@ -493,7 +474,6 @@ const Footnote = props => {
   }, [data.content, data.number, listItemColor, listItemFontSize, listItemLineHeight, listItemMarkerFontSize, listItemMarkerLineHeight, listItemPaddingLeft, listPaddingLeft]);
   const checkIfScrollable = useCallback(() => {
     const footnoteElement = footnoteRef.current;
-
     if (footnoteElement) {
       const footnoteViewportHeight = footnoteElement.clientHeight ? footnoteElement.clientHeight : 0;
       const contentHeight = contentRef.current ? contentRef.current.offsetHeight : 0;
@@ -508,7 +488,8 @@ const Footnote = props => {
     }
   }, [isOpen, checkIfScrollable]);
   return /*#__PURE__*/_jsx(Portal, {
-    children: /*#__PURE__*/_jsxs("div", { ...selectProps(rest),
+    children: /*#__PURE__*/_jsxs("div", {
+      ...selectProps(rest),
       children: [isOpen && /*#__PURE__*/_jsx(GlobalBodyScrollLock, {}), /*#__PURE__*/_jsx(StyledFootnote, {
         ref: footnoteRef,
         isOpen: isOpen,
@@ -575,41 +556,37 @@ const Footnote = props => {
     })
   });
 };
-
 const copyShape = PropTypes.shape({
   close: PropTypes.string.isRequired,
   heading: PropTypes.string.isRequired
-}); // If a language dictionary entry is provided, it must contain every key
+});
 
+// If a language dictionary entry is provided, it must contain every key
 const dictionaryContentShape = PropTypes.shape({
   a11yLabel: PropTypes.string.isRequired,
   close: PropTypes.string.isRequired,
   heading: PropTypes.string.isRequired
 });
-Footnote.propTypes = { ...selectedSystemPropTypes,
+Footnote.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Footnote'),
-
   /**
    * The content.
    */
   content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-
   /**
    * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
    * To provide your own, pass a JSON object with the keys `heading` and `close`.
    */
   copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), copyShape]),
-
   /**
    * A boolean flag used hide or show the `Footnote`. Set to `true` to open the `Footnote`.
    */
   isOpen: PropTypes.bool,
-
   /**
    * The number, must match the number of the `FootnoteLink` that initiated the `Footnote`.
    */
   number: PropTypes.number,
-
   /**
    * A callback function to handle the closing of the footnote.
    *
@@ -618,7 +595,6 @@ Footnote.propTypes = { ...selectedSystemPropTypes,
    * @param {boolean} options.returnFocus Should the `Footnote` return focus on close
    */
   onClose: PropTypes.func.isRequired,
-
   /**
    * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
    */

package/lib-module/Footnote/FootnoteLink.js

@@ -34,6 +34,7 @@ const StyledSup = /*#__PURE__*/styled.sup.withConfig({
     ...applyTextStyles(fontNameAndWeight)
   };
 });
+
 /**
  * Use `FootnoteLink` to open `Footnote` component and display related legal content.
  *
@@ -43,7 +44,6 @@ const StyledSup = /*#__PURE__*/styled.sup.withConfig({
  * - Avoid using FootnoteLink if there is only one annotation on a page. Consider including
  *   the annotation as part of the content whenever possible.
  */
-
 const FootnoteLink = _ref2 => {
   let {
     copy = 'en',
@@ -57,28 +57,23 @@ const FootnoteLink = _ref2 => {
   const themeTokens = useThemeTokens('FootnoteLink', tokens, variant);
   const numbers = Array.isArray(number) ? number : [number];
   const refs = numbers.map(() => /*#__PURE__*/React.createRef());
-
   const handleClick = index => {
     onClick(numbers[index], refs[index]);
   };
-
   const getCopy = useCopy({
     dictionary,
     copy
   });
-
   const handleOnClick = (event, index) => {
     event.preventDefault();
     event.stopPropagation();
     handleClick(index);
   };
-
   const handleOnKeyDown = (event, index) => {
     if (event.key === 'Enter' || event.key === 13) {
       handleClick(index);
     }
   };
-
   return /*#__PURE__*/_jsx(_Fragment, {
     children: numbers.map((num, index) => /*#__PURE__*/_jsx(StyledSup, {
       onKeyDown: event => handleOnKeyDown(event, index),
@@ -93,29 +88,25 @@ const FootnoteLink = _ref2 => {
     }, num))
   });
 };
-
 const copyShape = PropTypes.shape({
   a11yLabel: PropTypes.string.isRequired
 });
-FootnoteLink.propTypes = { ...selectedSystemPropTypes,
-
+FootnoteLink.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
    * To provide your own, pass a JSON object with the key `a11yLabel`.
    */
   copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), copyShape]),
-
   /**
    * The footnote number, or multiple numbers if passed as an array.
    * If using an array, a comma-separated group of numbers will be rendered as superscript.
    */
   number: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number), PropTypes.string, PropTypes.arrayOf(PropTypes.string)]).isRequired,
-
   /**
    * A callback function to handle the click of a FootnoteLink.
    */
   onClick: PropTypes.func.isRequired,
-
   /**
    * Override default `fontSize` to set specific font size value
    */

package/lib-module/IconButton/IconButton.js

@@ -10,7 +10,8 @@ const IconButton = /*#__PURE__*/forwardRef((_ref, ref) => {
     variant = {},
     ...iconButtonProps
   } = _ref;
-  const variantWithAction = action && !variant.action ? { ...variant,
+  const variantWithAction = action && !variant.action ? {
+    ...variant,
     action
   } : variant;
   const {
@@ -32,7 +33,6 @@ const IconButton = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 const multiBrandIconNames = ['add', 'subtract', 'close', 'play', 'moveUp', 'moveDown', 'moveLeft', 'moveRight', 'expand'];
 IconButton.displayName = 'IconButton';
-
 const propsWithoutIcon = _ref2 => {
   let {
     icon,
@@ -40,16 +40,14 @@ const propsWithoutIcon = _ref2 => {
   } = _ref2;
   return props;
 };
-
-IconButton.propTypes = { ...propsWithoutIcon(IconButtonBase.propTypes),
+IconButton.propTypes = {
+  ...propsWithoutIcon(IconButtonBase.propTypes),
   tokens: getTokensPropType('IconButton'),
-
   /**
    * To set the icon to a multi-brand compatabile icon
    */
   // eslint-disable-next-line react/require-default-props
   action: PropTypes.oneOf(multiBrandIconNames),
-
   /**
    * To set a custom icon
    */

package/lib-module/Image/Image.js

@@ -32,7 +32,6 @@ const StyledCircularImage = /*#__PURE__*/styled(StyledImage).withConfig({
 })({
   borderRadius: '50%'
 });
-
 const Image = _ref3 => {
   let {
     src,
@@ -51,13 +50,10 @@ const Image = _ref3 => {
   const isCircle = rounded === 'circle';
   const isCorners = rounded === 'corners';
   const isSquare = width === height;
-
   if (isCircle && !isSquare) {
     warn('Image', 'rounded="circle" is not supported for non-square images. Please provide a square image, otherwise the resulting shape will not be a circle.');
   }
-
   let ImageComponent;
-
   if (isCircle) {
     ImageComponent = StyledCircularImage;
   } else if (isCorners) {
@@ -65,8 +61,8 @@ const Image = _ref3 => {
   } else {
     ImageComponent = StyledImage;
   }
-
-  return /*#__PURE__*/_jsx(ImageComponent, { ...selectProps(rest),
+  return /*#__PURE__*/_jsx(ImageComponent, {
+    ...selectProps(rest),
     borderRadius: borderRadius,
     src: src,
     width: width,
@@ -75,36 +71,31 @@ const Image = _ref3 => {
     loading: loading
   });
 };
-
-Image.propTypes = { ...selectedSystemPropTypes,
-
+Image.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * The src attribute for the HTML img element.
    */
-  src: PropTypes.string.isRequired,
 
+  src: PropTypes.string.isRequired,
   /**
    * The alt attribute for the HTML img element. Setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content, and that non-visual browsers may omit it from rendering.
    */
   alt: PropTypes.string.isRequired,
-
   /**
    * The image's width.
    */
   width: PropTypes.number.isRequired,
-
   /**
    * The image's height.
    */
   height: PropTypes.number,
-
   /**
    * Loading strategy.
    * @default 'eager'
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
    */
   loading: PropTypes.oneOf(['eager', 'lazy']),
-
   /**
    * Make image render as a circle or with rounded corners.
    */

package/lib-module/NavigationBar/NavigationBar.js

@@ -1,5 +1,4 @@
 var _withLinkRouter$propT, _withLinkRouter$propT2, _withLinkRouter$propT3, _withLinkRouter$propT4;
-
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { selectSystemProps, StackView, Typography, useResponsiveProp, withLinkRouter, getTokensPropType } from '@telus-uds/components-base';
@@ -24,11 +23,11 @@ const Heading = /*#__PURE__*/styled.div.withConfig({
     letterSpacing: 0
   }
 });
+
 /**
  * NavigationBar can be used to allow customers to consistently navigate across
  * key pages within a specific product line
  */
-
 const NavigationBar = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     accessibilityRole = 'navigation',
@@ -51,10 +50,8 @@ const NavigationBar = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
   const openOverlayRef = useRef(null);
   const [openSubMenuId, setOpenSubMenuId] = useState(null);
-
   const handleSubMenuClose = event => {
     var _openOverlayRef$curre, _openOverlayRef$curre2;
-
     if (event.type === 'keydown') {
       if (event.key === 'Escape' || event.key === 27) {
         setOpenSubMenuId(null);
@@ -64,17 +61,16 @@ const NavigationBar = /*#__PURE__*/forwardRef((_ref, ref) => {
     } 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
-
+  };
 
+  // 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
   useEffect(() => {
     if (openSubMenuId !== null) {
       window.addEventListener('click', handleSubMenuClose);
       window.addEventListener('keydown', handleSubMenuClose);
       window.addEventListener('touchstart', handleSubMenuClose);
     }
-
     return () => {
       if (openSubMenuId !== null) {
         window.removeEventListener('click', handleSubMenuClose);
@@ -114,27 +110,26 @@ const NavigationBar = /*#__PURE__*/forwardRef((_ref, ref) => {
         ...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 : NavigationItem;
       const isOpen = itemId === openSubMenuId;
       return /*#__PURE__*/_jsx(ItemComponent, {
         ref: itemRef,
         href: href,
-        onClick: handleClick // TODO: refactor to pass selected ID via context
+        onClick: handleClick
+        // TODO: refactor to pass selected ID via context
         ,
         selectedId: selectedId,
         index: index,
         LinkRouter: ItemLinkRouter,
-        linkRouterProps: { ...linkRouterProps,
+        linkRouterProps: {
+          ...linkRouterProps,
           ...itemLinkRouterProps
         },
         items: nestedItems,
@@ -152,10 +147,10 @@ const NavigationBar = /*#__PURE__*/forwardRef((_ref, ref) => {
   });
 });
 NavigationBar.displayName = 'NavigationBar';
-NavigationBar.propTypes = { ...selectedSystemPropTypes,
+NavigationBar.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('NavigationBar'),
   ...withLinkRouter.propTypes,
-
   /**
    * NavigationBar pages
    *
@@ -183,27 +178,22 @@ NavigationBar.propTypes = { ...selectedSystemPropTypes,
       linkRouterProps: (_withLinkRouter$propT4 = withLinkRouter.propTypes) === null || _withLinkRouter$propT4 === void 0 ? void 0 : _withLinkRouter$propT4.linkRouterProps
     }))
   })).isRequired,
-
   /**
    * Common navigation bar heading.
    */
   heading: PropTypes.string,
-
   /**
    * Sets the `headingLevel` of the `heading`
    */
   headingLevel: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
-
   /**
    * Matches the `id` property of the item in `items` corresponding to the current page
    */
   selectedId: PropTypes.string.isRequired,
-
   /**
    * Optional function to be called on pressing a link
    */
   onChange: PropTypes.func,
-
   /**
    * Accesibility role for stackview
    */

package/lib-module/NavigationBar/NavigationItem.js

@@ -22,12 +22,12 @@ const ItemContainer = /*#__PURE__*/styled.div.withConfig({
     flexShrink: 1
   };
 });
+
 /**
  * NavigationItem within a NavigationBar component.
  *
  * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
  */
-
 const NavigationItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     accessibilityRole = 'link',
@@ -53,11 +53,10 @@ const NavigationItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
   });
   const viewport = useViewport();
   const getTokens = useThemeTokensCallback('NavigationBar', tokens, variant);
-
-  const getStateTokens = state => getTokens({ ...state,
+  const getStateTokens = state => getTokens({
+    ...state,
     viewport
   });
-
   return /*#__PURE__*/_jsx(ItemContainer, {
     targetWidth: targetWidth,
     children: /*#__PURE__*/_jsx(Button, {
@@ -78,7 +77,8 @@ const NavigationItem = /*#__PURE__*/forwardRef((_ref2, ref) => {
   });
 });
 NavigationItem.displayName = 'NavigationItem';
-NavigationItem.propTypes = { ...selectedSystemPropTypes,
+NavigationItem.propTypes = {
+  ...selectedSystemPropTypes,
   onClick: PropTypes.func,
   selected: PropTypes.bool,
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired

package/lib-module/NavigationBar/NavigationSubMenu.js

@@ -4,16 +4,15 @@ import { Icon, useResponsiveProp, useThemeTokens, Listbox } from '@telus-uds/com
 import NavigationItem from './NavigationItem';
 import useOverlaidPosition from '../utils/useOverlaidPosition';
 import resolveItemSelection from './resolveItemSelection';
+
 /**
  * A NavigationItem that opens or closes a Listbox of other NavigationItems.
  *
  * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
  */
-
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 const NavigationSubMenu = _ref => {
   let {
     children,
@@ -29,7 +28,6 @@ const NavigationSubMenu = _ref => {
   } = _ref;
   const focusTrapRef = useRef();
   const maxWidth = 289; // Slightly over 288 of nav item to account for subpixel rounding
-
   const {
     align,
     offsets,
@@ -78,11 +76,9 @@ const NavigationSubMenu = _ref => {
     label,
     items
   }, selectedId);
-
   const handleClick = event => {
     if (typeof onClick === 'function') onClick(event);
   };
-
   const {
     icoMenu
   } = useThemeTokens('NavigationBar', {}, {}, {
@@ -98,7 +94,6 @@ const NavigationSubMenu = _ref => {
       icon: icoMenu,
       children: _ref2 => {
         var _textStyles$;
-
         let {
           textStyles
         } = _ref2;
@@ -138,9 +133,9 @@ const NavigationSubMenu = _ref => {
     })]
   });
 };
+NavigationSubMenu.displayName = 'NavigationSubMenu';
 
-NavigationSubMenu.displayName = 'NavigationSubMenu'; // @TODO - proper prop types and comments
-
+// @TODO - proper prop types and comments
 NavigationSubMenu.propTypes = {
   children: PropTypes.node,
   id: PropTypes.string,