@telus-uds/components-web 2.21.2 → 2.22.0

package/lib-module/Table/Table.js

@@ -21,6 +21,7 @@ const StyledTable = /*#__PURE__*/styled.table.withConfig({
 }, props => `${props.borderWidth}px solid ${props.borderColor}`);
 const TableContext = /*#__PURE__*/React.createContext({});
 export const useTableContext = () => useContext(TableContext);
+
 /**
  * Use `Table` to display tabular data.
  *
@@ -35,7 +36,6 @@ export const useTableContext = () => useContext(TableContext);
  * - Use `Table.Row` and `Table.Cell` to build up the tabular data
  * - Use `Cell`'s `type` prop to visually mark it as a row heading (`type="rowHeading"`)
  */
-
 const Table = _ref2 => {
   let {
     children,
@@ -62,12 +62,12 @@ const Table = _ref2 => {
       setContainerWidth(containerClientWidth);
       setTableWidth(responsiveTableWidth);
     };
-
     const throttledUpdateDimensions = throttle(updateDimensions, 100, {
       leading: false
     });
-    updateDimensions(); // a pretty naive way of repeating the measurement after the fonts are loaded
+    updateDimensions();
 
+    // a pretty naive way of repeating the measurement after the fonts are loaded
     window.addEventListener('load', updateDimensions);
     window.addEventListener('resize', throttledUpdateDimensions);
     return () => {
@@ -99,11 +99,10 @@ const Table = _ref2 => {
     })
   });
 };
-
-Table.propTypes = { ...selectedSystemPropTypes,
+Table.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Table'),
   children: PropTypes.node,
-
   /**
    * Sets text style
    */

package/lib-module/TermsAndConditions/ExpandCollapse.js

@@ -69,7 +69,8 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
     tokens: {
       borderWidth: expandBaseBorderWidth
     },
-    children: expandProps => /*#__PURE__*/_jsx(ExpandCollapseBase.Panel, { ...expandProps,
+    children: expandProps => /*#__PURE__*/_jsx(ExpandCollapseBase.Panel, {
+      ...expandProps,
       panelId: "ExpandCollapsePanel",
       controlTokens: {
         icon: null,
@@ -78,7 +79,8 @@ const ExpandCollapse = /*#__PURE__*/forwardRef((_ref3, ref) => {
         borderColor: expandTitleBorderColor,
         borderWidth: expandTitleBorder,
         textLine: expandTitleUnderline
-      } // TODO refactor
+      }
+      // TODO refactor
       // eslint-disable-next-line react/no-unstable-nested-components
       ,
       control: pressableState => {

package/lib-module/TermsAndConditions/TermsAndConditions.js

@@ -89,6 +89,7 @@ const NonIndexedContentTitle = /*#__PURE__*/styled.div.withConfig({
     paddingLeft: tokens.titlePaddingLeft
   };
 });
+
 /**
  * Use `TermsAndConditions` to display important legal content.
  *
@@ -98,7 +99,6 @@ const NonIndexedContentTitle = /*#__PURE__*/styled.div.withConfig({
  * - Responsive display based on breakpoints
  * - Use `copy` to set language, ‘en’ for English or ‘fr’ for French
  */
-
 const TermsAndConditions = /*#__PURE__*/forwardRef((_ref6, ref) => {
   let {
     copy = 'en',
@@ -119,7 +119,8 @@ const TermsAndConditions = /*#__PURE__*/forwardRef((_ref6, ref) => {
   const themeTokens = useThemeTokens('TermsAndConditions', tokens, variant, {
     viewport
   });
-  return /*#__PURE__*/_jsxs("div", { ...selectProps(rest),
+  return /*#__PURE__*/_jsxs("div", {
+    ...selectProps(rest),
     children: [/*#__PURE__*/_jsx(Divider, {
       tokens: {
         color: themeTokens.dividerColor
@@ -173,15 +174,16 @@ const TermsAndConditions = /*#__PURE__*/forwardRef((_ref6, ref) => {
     })]
   });
 });
-TermsAndConditions.displayName = 'TermsAndConditions'; // If a language dictionary entry is provided, it must contain every key
+TermsAndConditions.displayName = 'TermsAndConditions';
 
+// If a language dictionary entry is provided, it must contain every key
 const dictionaryContentShape = PropTypes.shape({
   headingHide: PropTypes.string.isRequired,
   headingView: PropTypes.string.isRequired,
   nonIndexedTitle: PropTypes.string.isRequired
 });
-TermsAndConditions.propTypes = { ...selectedSystemPropTypes,
-
+TermsAndConditions.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
    *
@@ -192,26 +194,22 @@ TermsAndConditions.propTypes = { ...selectedSystemPropTypes,
     headingHide: PropTypes.string,
     nonIndexedTitle: PropTypes.string
   })]),
-
   /**
    * Sets the tokens for TermsAndConditions element.
    */
   tokens: getTokensPropType('TermsAndConditions'),
-
   /**
    * An array of nodes, strings, or a combination to be displayed in an ordered list.
    *
    * Each item in the array must have a corresponding superscript in the page.
    */
   indexedContent: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.node, PropTypes.string])),
-
   /**
    * An array of nodes, strings, or a combination to be displayed in an unordered list.
    *
    * nonIndexedContent do not have a corresponding superscript and instead apply to the page as a whole.
    */
   nonIndexedContent: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.node, PropTypes.string])),
-
   /**
    * Custom dictionary containing the labels to use for `TermsAndConditions`
    */

package/lib-module/Testimonial/Testimonial.js

@@ -74,7 +74,6 @@ const Figcaption = /*#__PURE__*/styled.figcaption.withConfig({
     gap: figcaptionGap
   };
 });
-
 const Testimonial = _ref5 => {
   let {
     showDivider,
@@ -119,13 +118,11 @@ const Testimonial = _ref5 => {
   } = 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__*/_jsxs(TestimonialContainer, {
     testimonialContainerGap: testimonialContainerGap,
     ...selectProps(rest),
@@ -200,30 +197,25 @@ const Testimonial = _ref5 => {
     })]
   });
 };
-
-Testimonial.propTypes = { ...selectedSystemPropTypes,
+Testimonial.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Testimonial'),
-
   /**
    * Testimonial content
    */
   testimonial: PropTypes.string.isRequired,
-
   /**
    * Testimonial author or source
    */
   title: PropTypes.string,
-
   /**
    * Additional information on the author or source
    */
   additionalInfo: PropTypes.string,
-
   /**
    * Testimonial style
    */
   testimonialStyle: PropTypes.oneOf(['large', 'heading']),
-
   /**
    * Whether to show or not dividers at the top and the bottom of the testimonial
   showDivider: PropTypes.bool,
@@ -231,7 +223,6 @@ Testimonial.propTypes = { ...selectedSystemPropTypes,
    * The src attribute for the Image component or custom JSX content to render instead
    */
   image: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-
   /**
    * The src attribute for the `Image` component to be displayed on the testimonial
    * @deprecated please use the `image` prop instead

package/lib-module/Toast/Toast.js

@@ -1,5 +1,4 @@
 var _withLinkRouter$propT, _withLinkRouter$propT2;
-
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ChevronLink, selectSystemProps, useThemeTokens, Typography, withLinkRouter, Spacer, useViewport, getTokensPropType } from '@telus-uds/components-base';
@@ -8,16 +7,12 @@ import { htmlAttrs } from '../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-
 const transform = property => (from, to) => keyframes(["from{", ":", ";}to{", ":", ";}"], property, from, property, to);
-
 const slideDown = property => function (from, to) {
   let end = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : to;
   return keyframes(["0%{", ":", ";}99%{", ":", ";}100%{", ":", ";}"], property, from, property, to, property, end);
 };
-
 const animation = props => css(["", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 2s forwards,", " 1s ease-in-out 3.2s forwards;& *{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}& > a svg{animation:", " 1s ease-in-out 3s forwards;}& > a div{animation:", " 1s ease-in-out 3s forwards;}"], slideDown('height')(`${props.animationHeightBefore}px`, `${props.animationHeightAfter}px`, 'auto'), transform('padding-bottom')(`${props.animationPaddingBottomBefore}px`, `${props.animationPaddingBottomAfter}px`), transform('padding-top')(`${props.animationPaddingTopBefore}px`, `${props.animationPaddingTopAfter}px`), transform('background')(props.animationBackgroundColorBefore, props.animationBackgroundColorAfter), transform('color')(props.animationColorBefore, props.animationColorAfter), transform('color')(props.animationDivColorBefore, props.animationDivColorAfter), transform('fill')(props.animationFillColorBefore, props.animationFillColorAfter), transform('color')(props.animationFillColorBefore, props.animationFillColorAfter));
-
 const ToastContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Toast__ToastContainer",
   componentId: "components-web__sc-p78jdh-0"
@@ -42,7 +37,6 @@ const ToastContainer = /*#__PURE__*/styled.div.withConfig({
   } = _ref4;
   return containerGap;
 }, animation);
-
 const Toast = _ref5 => {
   let {
     toast,
@@ -72,8 +66,9 @@ const Toast = _ref5 => {
     ...extraTokens
   } = useThemeTokens('Toast', tokens, variant, {
     viewport
-  }); // inherit ChevronLink tokens for animation colors
+  });
 
+  // inherit ChevronLink tokens for animation colors
   const {
     color: chevronDefaultColor
   } = useThemeTokens('ChevronLink', {}, {});
@@ -82,11 +77,9 @@ const Toast = _ref5 => {
   } = useThemeTokens('ChevronLink', {}, {
     inverse: true
   });
-
   if (!toast) {
     return null;
   }
-
   return /*#__PURE__*/_jsxs(ToastContainer, {
     containerBackgroundColor: containerBackgroundColor,
     containerGap: containerGap,
@@ -135,25 +128,21 @@ const Toast = _ref5 => {
     })]
   });
 };
-
-Toast.propTypes = { ...selectedSystemPropTypes,
+Toast.propTypes = {
+  ...selectedSystemPropTypes,
   tokens: getTokensPropType('Toast'),
-
   /**
    * If true, the toast will be displayed
    */
   toast: PropTypes.bool,
-
   /**
    * The copy to display in the toast
    */
   copy: PropTypes.string.isRequired,
-
   /**
    * The headline to display in the toast (before copy)
    */
   headline: PropTypes.string,
-
   /**
    * The link to display in the toast (after copy)
    */

package/lib-module/Video/ControlBar/ControlBar.js

@@ -11,11 +11,9 @@ import { htmlAttrs } from '../../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-
 const getIcon = icon => /*#__PURE__*/_jsx(Icon, {
   icon: icon
 });
-
 const ControlBarContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "ControlBar__ControlBarContainer",
   componentId: "components-web__sc-13y61ky-0"
@@ -80,7 +78,6 @@ const MenuContainer = /*#__PURE__*/styled.div.withConfig({
     marginLeft: menuMarginLeft
   };
 });
-
 const ControlBar = _ref4 => {
   let {
     videoPlayer,
@@ -137,7 +134,6 @@ const ControlBar = _ref4 => {
   } = useThemeTokens('VideoControlBar', tokens, variant, {
     viewport
   });
-
   const parseVideoQuality = () => {
     return sources.map(source => {
       if (!source.isFallback) {
@@ -146,11 +142,9 @@ const ControlBar = _ref4 => {
           value: source.qualityRank
         };
       }
-
       return {};
     });
   };
-
   const parseTracks = () => {
     const parsed = tracks.map((track, trackNumber) => {
       return {
@@ -164,7 +158,6 @@ const ControlBar = _ref4 => {
     });
     return parsed;
   };
-
   const menuContainerStyleProps = {
     menuBottom,
     menuRight,
@@ -256,8 +249,8 @@ const ControlBar = _ref4 => {
     })
   });
 };
-
-ControlBar.propTypes = { ...selectedSystemPropTypes,
+ControlBar.propTypes = {
+  ...selectedSystemPropTypes,
   videoPlayer: PropTypes.object.isRequired,
   videoPlayerContainer: PropTypes.object.isRequired,
   sources: PropTypes.array.isRequired,

package/lib-module/Video/ControlBar/Controls/VideoButton/VideoButton.js

@@ -24,7 +24,6 @@ const StyledButton = /*#__PURE__*/styled.button.withConfig({
     }
   };
 });
-
 const VideoButton = _ref2 => {
   let {
     icon,
@@ -38,22 +37,19 @@ const VideoButton = _ref2 => {
   const {
     color
   } = useThemeTokens('VideoButton', tokens, variant);
-
   const handleOnKeyDown = event => {
-    const key = event.key || event.keyCode; // Disables playing by space bar, as that can be used to click a button
+    const key = event.key || event.keyCode;
 
+    // Disables playing by space bar, as that can be used to click a button
     if (key === ' ' || key === 32) {
       event.stopPropagation();
     }
   };
-
   const handleClick = event => {
     var _rest$onClick;
-
     event.preventDefault();
     (_rest$onClick = rest.onClick) === null || _rest$onClick === void 0 ? void 0 : _rest$onClick.call(rest, event);
   };
-
   return /*#__PURE__*/_jsxs(StyledButton, {
     "aria-label": label,
     onKeyDown: handleOnKeyDown,
@@ -64,8 +60,8 @@ const VideoButton = _ref2 => {
     children: [icon, children]
   });
 };
-
-VideoButton.propTypes = { ...selectedSystemPropTypes,
+VideoButton.propTypes = {
+  ...selectedSystemPropTypes,
   icon: PropTypes.element.isRequired,
   label: PropTypes.string.isRequired,
   disableFocus: PropTypes.bool.isRequired,

package/lib-module/Video/ControlBar/Controls/VideoMenu/VideoMenu.js

@@ -64,7 +64,6 @@ const CheckmarkContainer = /*#__PURE__*/styled.div.withConfig({
     }
   };
 });
-
 const VideoMenu = _ref3 => {
   let {
     menuLabel,
@@ -87,7 +86,6 @@ const VideoMenu = _ref3 => {
     checkMarkUnselectedColor,
     checkMarkIcon
   } = useThemeTokens('VideoMenu', tokens, variant);
-
   const getMenuItems = () => {
     return menuOptions.map(option => {
       if (option.name) {
@@ -122,19 +120,17 @@ const VideoMenu = _ref3 => {
           })]
         }, option.value);
       }
-
       return null;
     });
   };
-
   const handleOnKeyDown = event => {
-    const key = event.key || event.keyCode; // Disables playing by space bar, as that can be used to click a button
+    const key = event.key || event.keyCode;
 
+    // Disables playing by space bar, as that can be used to click a button
     if (key === ' ' || key === 32) {
       event.stopPropagation();
     }
   };
-
   return /*#__PURE__*/_jsx(MenuContainer, {
     onKeyDown: handleOnKeyDown,
     padding: padding,
@@ -156,8 +152,8 @@ const VideoMenu = _ref3 => {
     })
   });
 };
-
-VideoMenu.propTypes = { ...selectedSystemPropTypes,
+VideoMenu.propTypes = {
+  ...selectedSystemPropTypes,
   menuLabel: PropTypes.string.isRequired,
   menuOptions: PropTypes.array.isRequired,
   setSelection: PropTypes.func.isRequired,

package/lib-module/Video/ControlBar/Controls/VideoProgressBar/VideoProgressBar.js

@@ -15,7 +15,6 @@ const ProgressBarContainer = /*#__PURE__*/styled.div.withConfig({
   width: '100%',
   alignItems: 'center'
 });
-
 const sharedStyles = _ref => {
   let {
     thumbHeight,
@@ -43,7 +42,6 @@ const sharedStyles = _ref => {
       cursor: 'pointer',
       borderRadius: 1.3,
       background: `linear-gradient(to right, ${trackGradientStart} 0%,${trackGradientEnd} ${videoBufferDisplay - 0.01}% ,rgba(255,255,255,0.5) ${videoBufferDisplay}%)` // TODO: replace with opaque white from palette
-
     })
   };
 };
@@ -77,16 +75,19 @@ const StyledProgressBar = /*#__PURE__*/styled.input.attrs(_ref2 => {
       outline: 'none'
     },
     'input[type=range]&::-webkit-slider-thumb': sharedStyles(sharedProps).thumb,
-    'input[type=range]&::-moz-range-thumb': { ...sharedStyles(sharedProps).thumb,
+    'input[type=range]&::-moz-range-thumb': {
+      ...sharedStyles(sharedProps).thumb,
       border: 'none'
     },
-    'input[type=range]&::-ms-thumb': { ...sharedStyles(sharedProps).thumb,
+    'input[type=range]&::-ms-thumb': {
+      ...sharedStyles(sharedProps).thumb,
       margin: 0,
       border: 'none'
     },
     'input[type=range]&::-webkit-slider-runnable-track': sharedStyles(sharedProps).track(videoBufferDisplay),
     'input[type=range]&::-moz-range-track': sharedStyles(sharedProps).track(videoBufferDisplay),
-    'input[type=range]&::-ms-track': { ...sharedStyles(sharedProps).track(videoBufferDisplay),
+    'input[type=range]&::-ms-track': {
+      ...sharedStyles(sharedProps).track(videoBufferDisplay),
       margin: '6px 0',
       border: 'none'
     },
@@ -108,14 +109,13 @@ const StyledTimestamp = /*#__PURE__*/styled.span.withConfig({
   return {
     margin
   };
-}); // TODO: unify with the helper from `VideoSplash`
-
+});
+// TODO: unify with the helper from `VideoSplash`
 function getTimestamp(duration) {
   const minutes = Math.floor(duration / 60);
   const seconds = Math.floor(duration - 60 * minutes);
   return `${minutes}:${seconds < 10 ? 0 : ''}${seconds}`;
 }
-
 const VideoProgressBar = _ref5 => {
   let {
     copy = 'en',
@@ -142,11 +142,9 @@ const VideoProgressBar = _ref5 => {
     playing
   });
   const videoProgressBar = /*#__PURE__*/React.createRef();
-
   const handleVideoSkip = () => {
     setSeek(videoProgressBar.current.value);
   };
-
   const videoBufferDisplay = videoBufferEnd / videoLength * 100;
   const isVideoUnplayed = videoCurrentTime === -1;
   const currentTime = isVideoUnplayed ? 0 : videoCurrentTime;
@@ -161,7 +159,8 @@ const VideoProgressBar = _ref5 => {
     trackGradientEnd,
     rangeBackground
   };
-  return /*#__PURE__*/_jsxs(ProgressBarContainer, { ...selectProps(rest),
+  return /*#__PURE__*/_jsxs(ProgressBarContainer, {
+    ...selectProps(rest),
     children: [/*#__PURE__*/_jsx(StyledTimestamp, {
       margin: `0 ${timestampMarginRight}px 0 ${timestampMarginLeft}px`,
       children: /*#__PURE__*/_jsx(Typography, {
@@ -192,8 +191,8 @@ const VideoProgressBar = _ref5 => {
     })]
   });
 };
-
-VideoProgressBar.propTypes = { ...selectedSystemPropTypes,
+VideoProgressBar.propTypes = {
+  ...selectedSystemPropTypes,
   copy: PropTypes.oneOf(['en', 'fr']),
   videoLength: PropTypes.number.isRequired,
   videoCurrentTime: PropTypes.number.isRequired,

package/lib-module/Video/ControlBar/Controls/VolumeSlider/VolumeSlider.js

@@ -25,7 +25,6 @@ const VolumeSliderContainer = /*#__PURE__*/styled.div.withConfig({
     alignItems: 'center'
   };
 });
-
 const sharedStyles = _ref2 => {
   let {
     thumbHeight,
@@ -56,7 +55,6 @@ const sharedStyles = _ref2 => {
     })
   };
 };
-
 const StyledVolumeSlider = /*#__PURE__*/styled.input.attrs(_ref3 => {
   let {
     videoCurrentVolume
@@ -86,16 +84,19 @@ const StyledVolumeSlider = /*#__PURE__*/styled.input.attrs(_ref3 => {
       outline: 'none'
     },
     'input[type=range]&::-webkit-slider-thumb': sharedStyles(sharedProps).thumb,
-    'input[type=range]&::-moz-range-thumb': { ...sharedStyles.thumb,
+    'input[type=range]&::-moz-range-thumb': {
+      ...sharedStyles.thumb,
       border: 'none'
     },
-    'input[type=range]&::-ms-thumb': { ...sharedStyles.thumb,
+    'input[type=range]&::-ms-thumb': {
+      ...sharedStyles.thumb,
       margin: 0,
       border: 'none'
     },
     'input[type=range]&::-webkit-slider-runnable-track': sharedStyles(sharedProps).track(videoCurrentVolume),
     'input[type=range]&::-moz-range-track': sharedStyles(sharedProps).track(videoCurrentVolume),
-    'input[type=range]&::-ms-track': { ...sharedStyles(sharedProps).track(videoCurrentVolume),
+    'input[type=range]&::-ms-track': {
+      ...sharedStyles(sharedProps).track(videoCurrentVolume),
       margin: '6px 0',
       border: 'none'
     },
@@ -107,7 +108,6 @@ const StyledVolumeSlider = /*#__PURE__*/styled.input.attrs(_ref3 => {
     }
   };
 });
-
 const VolumeSlider = _ref5 => {
   let {
     setVolume,
@@ -144,9 +144,7 @@ const VolumeSlider = _ref5 => {
     trackGradientEnd,
     rangeBackground
   };
-
   const handleVolumeChange = () => setVolume(refVolumeSlider.current.value);
-
   return /*#__PURE__*/_jsxs(VolumeSliderContainer, {
     compactModeThreshold: compactModeThreshold,
     videoPlayerWidth: videoPlayerWidth,
@@ -178,8 +176,8 @@ const VolumeSlider = _ref5 => {
     })]
   });
 };
-
-VolumeSlider.propTypes = { ...selectedSystemPropTypes,
+VolumeSlider.propTypes = {
+  ...selectedSystemPropTypes,
   videoCurrentVolume: PropTypes.number.isRequired,
   setVolume: PropTypes.func.isRequired,
   videoIsMuted: PropTypes.bool.isRequired,

package/lib-module/Video/MiddleControlButton/MiddleControlButton.js

@@ -31,7 +31,6 @@ const StyledMiddleControlButton = /*#__PURE__*/styled.button.withConfig({
     alignItems: 'center'
   };
 });
-
 const MiddleControlButton = _ref2 => {
   let {
     icon: Icon,
@@ -62,8 +61,8 @@ const MiddleControlButton = _ref2 => {
     })
   });
 };
-
-MiddleControlButton.propTypes = { ...selectedSystemPropTypes,
+MiddleControlButton.propTypes = {
+  ...selectedSystemPropTypes,
   icon: PropTypes.elementType.isRequired,
   isHidden: PropTypes.bool,
   onClick: PropTypes.func,