@telus-uds/components-web 2.21.2 → 2.22.0

package/lib/shared/VideoSplash/VideoSplash.js

@@ -4,31 +4,18 @@ 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 _systemConstants = require("@telus-uds/system-constants");
-
 var _SplashButton = _interopRequireDefault(require("./SplashButton/SplashButton"));
-
 var _SplashButtonWithDetails = _interopRequireDefault(require("./SplashButtonWithDetails/SplashButtonWithDetails"));
-
 var _videoText = _interopRequireDefault(require("../../Video/videoText"));
-
 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 SplashBackground = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "VideoSplash__SplashBackground",
   componentId: "components-web__sc-1ejxt6-0"
@@ -48,7 +35,6 @@ const SplashBackground = /*#__PURE__*/_styledComponents.default.div.withConfig({
     cursor: 'pointer'
   };
 });
-
 const VideoSplash = _ref2 => {
   let {
     poster,
@@ -61,7 +47,8 @@ const VideoSplash = _ref2 => {
   const viewport = (0, _componentsBase.useViewport)();
   const showDetails = !simpleMode && viewport !== _systemConstants.viewports.xs;
   const label = _videoText.default[copy].watch;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SplashBackground, { ...selectProps(rest),
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(SplashBackground, {
+    ...selectProps(rest),
     onClick: onClick,
     videoPoster: poster,
     children: showDetails ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_SplashButtonWithDetails.default, {
@@ -74,8 +61,8 @@ const VideoSplash = _ref2 => {
     })
   });
 };
-
-VideoSplash.propTypes = { ...selectedSystemPropTypes,
+VideoSplash.propTypes = {
+  ...selectedSystemPropTypes,
   onClick: _propTypes.default.func,
   poster: _propTypes.default.string,
   videoLength: _propTypes.default.number.isRequired,

package/lib/shared/VideoSplash/helpers.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.getTimestamp = exports.getAriaLabel = void 0;
-
 var _videoText = _interopRequireDefault(require("../../Video/videoText"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 const getTimestamp = (videoLength, copy) => {
   const minutes = Math.floor(videoLength / 60);
   const seconds = Math.ceil(videoLength % 60);
@@ -21,9 +18,7 @@ const getTimestamp = (videoLength, copy) => {
     timestamp
   };
 };
-
 exports.getTimestamp = getTimestamp;
-
 const getAriaLabel = (timestamp, copy) => {
   const {
     minutes,
@@ -34,5 +29,4 @@ const getAriaLabel = (timestamp, copy) => {
   const secondsText = `${seconds} ${seconds !== 1 ? text.seconds : text.second}`;
   return text.ariaLabel.replace('{minutes}', minutesText).replace('{seconds}', secondsText);
 };
-
 exports.getAriaLabel = getAriaLabel;

package/lib/utils/index.js

@@ -57,21 +57,12 @@ Object.defineProperty(exports, "warn", {
     return _logger.warn;
   }
 });
-
 var _componentsBase = require("@telus-uds/components-base");
-
 var _logger = require("./logger");
-
 var _transforms = require("./transforms");
-
 var _useTypographyTheme = _interopRequireDefault(require("./useTypographyTheme"));
-
 var _media = _interopRequireDefault(require("./media"));
-
 var _ssr = _interopRequireDefault(require("./ssr"));
-
 var _renderStructuredContent = _interopRequireDefault(require("./renderStructuredContent"));
-
 var _useOverlaidPosition = _interopRequireDefault(require("./useOverlaidPosition"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/utils/logger.js

@@ -4,25 +4,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.warn = exports.deprecate = exports.default = void 0;
-
 const deprecate = (componentName, message) => {
   if (process.env.NODE_ENV === 'production') {
     return;
   }
-
   console.warn(`[Allium] [Deprecate] ${componentName}: ${message}`); // eslint-disable-line no-console
 };
-
 exports.deprecate = deprecate;
-
 const warn = (componentName, message) => {
   if (process.env.NODE_ENV === 'production') {
     return;
   }
-
   console.warn(`[Allium] ${componentName}: ${message}`); // eslint-disable-line no-console
 };
-
 exports.warn = warn;
 var _default = {
   deprecate,

package/lib/utils/media.js

@@ -4,31 +4,24 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = media;
-
 var _systemConstants = require("@telus-uds/system-constants");
-
 function media() {
   return {
     query: {},
-
     from(breakpoint) {
       if (breakpoint !== _systemConstants.viewports.xs) {
         this.query.minWidth = breakpoint;
       }
-
       return this;
     },
-
     until(breakpoint) {
       this.query.maxWidth = breakpoint;
       return this;
     },
-
     and(custom) {
       this.query.and = custom;
       return this;
     },
-
     css(style) {
       const {
         minWidth,
@@ -37,18 +30,16 @@ function media() {
       } = this.query;
       const min = minWidth ? `(min-width: ${_systemConstants.viewports.map.get(minWidth)}px)` : undefined;
       const max = maxWidth ? `(max-width: ${_systemConstants.viewports.map.get(maxWidth) - 1}px)` : undefined;
-
       if (typeof min !== 'undefined' || typeof max !== 'undefined' || typeof and !== 'undefined') {
         const mediaQuery = `@media ${[min, max, and].filter(a => a).join(' and ')}`;
         this.query = {};
         return {
-          [mediaQuery]: { ...(typeof style === 'function' ? style() : style)
+          [mediaQuery]: {
+            ...(typeof style === 'function' ? style() : style)
           }
         };
       }
-
       return typeof style === 'function' ? style() : style;
     }
-
   };
 }

package/lib/utils/renderStructuredContent.js

@@ -4,86 +4,69 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _componentsBase = require("@telus-uds/components-base");
-
 var _jsxRuntime = require("react/jsx-runtime");
-
 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; }
-
 /**
  * Takes a string content and marks up all the links in it by wrapping them
  * in `Link` component.
- */
-const generateLinks = content => {
+ */const generateLinks = content => {
   const linkRegex = /<\s*a([^>]*)>(.*?)<\s*\/\s*a>/g;
   const attributeRegex = /(\w+)\s*=\s*((["'])(.*?)\3|(?=\s|\/>))/g;
   const parts = content.split(linkRegex);
-
   if (parts.length === 1) {
     return parts;
-  } // Start with first anchor text, attributes will be in the previous part
-
+  }
 
+  // Start with first anchor text, attributes will be in the previous part
   for (let i = 2; i < parts.length; i += 3) {
-    const o = {}; // Get attributes from previous part
-
-    const attributes = parts[i - 1].trim(); // Create object from attributes
+    const o = {};
+    // Get attributes from previous part
+    const attributes = parts[i - 1].trim();
 
+    // Create object from attributes
     const matchedAttributes = attributes.match(attributeRegex);
-
     if (matchedAttributes) {
       matchedAttributes.forEach(attribute => {
         const split = attribute.split('=');
         o[split[0]] = split[1].substr(1, split[1].length - 2);
       });
-    } // Remove anchor attributes from parts
-
-
-    parts[i - 1] = undefined; // Replace anchor text with Link in parts
-
-    parts[i] = /*#__PURE__*/(0, _react.createElement)(_componentsBase.Link, { ...o,
+    }
+    // Remove anchor attributes from parts
+    parts[i - 1] = undefined;
+    // Replace anchor text with Link in parts
+    parts[i] = /*#__PURE__*/(0, _react.createElement)(_componentsBase.Link, {
+      ...o,
       key: i
     }, parts[i]);
   }
-
   return parts;
 };
+
 /**
  * Takes an array of strings and in each element replaces the breaks with `<br>` tags.
  */
-
-
 const generateBreaks = parts => {
   const breakRegex = /<br\s?\/*>/g;
   const partsWithBreaks = parts;
-
   for (let i = 0; i < partsWithBreaks.length; i += 1) {
     if (typeof partsWithBreaks[i] === 'string' && partsWithBreaks[i].search(breakRegex) !== -1) {
       const toSplit = partsWithBreaks[i].split(breakRegex);
-
       for (let x = 1; x < toSplit.length; x += 2) {
         toSplit.splice(x, 0, /*#__PURE__*/(0, _jsxRuntime.jsx)("br", {}, `break-${i}-${x}`));
       }
-
       partsWithBreaks[i] = toSplit;
     }
   }
-
   return partsWithBreaks;
 };
-
 const renderStructuredContent = content => {
   if (typeof content !== 'string') {
     return content;
   }
-
   return generateBreaks(generateLinks(content));
 };
-
 var _default = renderStructuredContent;
 exports.default = _default;

package/lib/utils/ssr.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _styledComponents = require("styled-components");
-
 var _componentsBase = require("@telus-uds/components-base");
-
 /**
  * Returns object with `renderApp` and `getStyles` functions.
  * Weave these into your app's server-side render process:
@@ -33,18 +30,15 @@ const ssrStyles = function () {
     collectStyles = renderedApp => renderedApp
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const sheet = new _styledComponents.ServerStyleSheet();
-
   const getStyledComponentsStyles = () => {
     const styles = sheet.getStyleElement();
     sheet.seal();
     return styles;
   };
-
   return (0, _componentsBase.ssrStyles)(appName, {
     styleGetters: [getStyledComponentsStyles, ...styleGetters],
     collectStyles: renderedApp => collectStyles(sheet.collectStyles(renderedApp))
   });
 };
-
 var _default = ssrStyles;
 exports.default = _default;

package/lib/utils/transforms.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.transformGradient = exports.default = void 0;
-
 const transformGradient = gradient => `${gradient.type}-gradient(${gradient.angle}deg, ${gradient.stops[0].color} ${gradient.stops[0].stop * 100}%, ${gradient.stops[1].color} ${gradient.stops[1].stop * 100}%)`;
-
 exports.transformGradient = transformGradient;
 var _default = {
   transformGradient

package/lib/utils/useOverlaidPosition.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("react");
-
 var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 // TODO: add react-native as a peer dep and support native apps too.
 // That requires some fiddling with Allium repo storybook config, babel, etc,
 // unless ADS gets merged back into UDS monorepo.
@@ -24,34 +20,29 @@ const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
   if (tooWideBy) adjusted.width = Math.max(0, sourceWidth - tooWideBy);
   return adjusted;
 };
-
 const getPosition = _ref => {
   let {
     edge,
     fromEdge,
     sourceSize
   } = _ref;
-
   switch (edge) {
     case 'near':
       return fromEdge;
-
     case 'mid':
       return fromEdge + sourceSize / 2;
-
     case 'far':
       return fromEdge + sourceSize;
-
     default:
       return 0;
   }
 };
-
 const getEdgeType = (align, alignSide) => {
   const alignTo = align[alignSide];
   const edge = ['center', 'middle'].includes(alignTo) && 'mid' || (alignSide === alignTo ? 'near' : 'far');
   return edge;
 };
+
 /**
  * Based on UDS's private getTooltipPosition but generalised.
  *
@@ -62,8 +53,6 @@ const getEdgeType = (align, alignSide) => {
  * before it is shown, which makes it account for the width being limiting in styles, custom font
  * rendering, etc.
  */
-
-
 function getOverlaidPosition(_ref2) {
   let {
     sourceLayout,
@@ -78,8 +67,9 @@ function getOverlaidPosition(_ref2) {
   const {
     scrollX = 0,
     scrollY = 0
-  } = typeof window === 'object' ? window : {}; // Will have top, bottom, left and/or right offsets depending on `align`
+  } = typeof window === 'object' ? window : {};
 
+  // Will have top, bottom, left and/or right offsets depending on `align`
   const positioning = {};
   if (align.top) positioning.top = getPosition({
     edge: getEdgeType(align, 'top'),
@@ -111,20 +101,18 @@ function getOverlaidPosition(_ref2) {
     fromEdge: windowDimensions.width - (sourceLayout.x + scrollX + sourceLayout.width - (offsets.horizontal ?? 0)),
     sourceSize: sourceLayout.width
   });
-
   if (!(align.left && align.right)) {
     // Check if the position and/or width need adjusting to fit on the screen
     const side = align.right ? 'right' : 'left';
     const adjusted = adjustHorizontalToFit(positioning[side], windowDimensions.width, sourceLayout.width);
     if (typeof adjusted.width === 'number') positioning.width = adjusted.width;
-
     if (typeof adjusted.offset === 'number') {
       positioning[side] = adjusted.offset;
     }
   }
-
   return positioning;
 }
+
 /**
  * Positions an element in a modal or portal so that it appears tooltip-like below the
  * target element.
@@ -133,8 +121,6 @@ function getOverlaidPosition(_ref2) {
  * a small task because UDS's tooltip logic only really works for short text - it might be
  * better to use a third-party library).
  */
-
-
 const useOverlaidPosition = _ref3 => {
   let {
     isShown = false,
@@ -147,8 +133,9 @@ const useOverlaidPosition = _ref3 => {
   } = _ref3;
   // Element in main document flow that the targetRef element is positioned around
   const sourceRef = (0, _react.useRef)(null);
-  const [sourceLayout, setSourceLayout] = (0, _react.useState)(null); // Element in a modal or portal overlay positioned to appear adjacent to sourceRef
+  const [sourceLayout, setSourceLayout] = (0, _react.useState)(null);
 
+  // Element in a modal or portal overlay positioned to appear adjacent to sourceRef
   const targetRef = (0, _react.useRef)(null);
   const [targetDimensions, setTargetDimensions] = (0, _react.useState)(null);
   const [windowDimensions, setWindowDimensions] = (0, _react.useState)(null);
@@ -173,7 +160,6 @@ const useOverlaidPosition = _ref3 => {
           height
         };
       }
-
       return previousDimensions;
     });
   }, []);
@@ -181,7 +167,6 @@ const useOverlaidPosition = _ref3 => {
   (0, _react.useEffect)(() => {
     const handleDimensionsChange = _ref5 => {
       var _sourceRef$current;
-
       let {
         window
       } = _ref5;
@@ -196,12 +181,9 @@ const useOverlaidPosition = _ref3 => {
         });
       });
     };
-
     let subscription;
-
     const unsubscribe = () => {
       var _subscription;
-
       if (typeof ((_subscription = subscription) === null || _subscription === void 0 ? void 0 : _subscription.remove) === 'function') {
         // React Native >=0.65.0
         subscription.remove();
@@ -209,11 +191,9 @@ const useOverlaidPosition = _ref3 => {
         // React Native <0.65.0
         _Dimensions.default.remove('change', handleDimensionsChange);
       }
-
       setSourceLayout(null);
       setTargetDimensions(null);
     };
-
     if (readyToShow) {
       subscription = _Dimensions.default.addEventListener('change', handleDimensionsChange);
       handleDimensionsChange({
@@ -222,7 +202,6 @@ const useOverlaidPosition = _ref3 => {
     } else {
       unsubscribe();
     }
-
     return unsubscribe;
   }, [readyToShow]);
   const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions);
@@ -241,6 +220,5 @@ const useOverlaidPosition = _ref3 => {
     isReady
   };
 };
-
 var _default = useOverlaidPosition;
 exports.default = _default;

package/lib/utils/useTypographyTheme.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _componentsBase = require("@telus-uds/components-base");
-
 const useTypographyTheme = (variant, tokens) => {
   const viewport = (0, _componentsBase.useViewport)();
   const themeTokens = (0, _componentsBase.useThemeTokens)('Typography', tokens, variant, {
@@ -19,14 +17,15 @@ const useTypographyTheme = (variant, tokens) => {
     fontSize,
     lineHeight,
     ...rnStyles
-  } = (0, _componentsBase.applyTextStyles)({ ...themeTokens,
+  } = (0, _componentsBase.applyTextStyles)({
+    ...themeTokens,
     themeOptions
   });
-  return { ...rnStyles,
+  return {
+    ...rnStyles,
     fontSize: `${fontSize}px`,
     lineHeight: `${lineHeight}px`
   };
 };
-
 var _default = useTypographyTheme;
 exports.default = _default;

package/lib-module/Badge/Badge.js

@@ -41,7 +41,6 @@ const BadgeContainer = /*#__PURE__*/styled.div.withConfig({
 	    ${gradient && '-webkit-text-fill-color: transparent;'}
     }`;
 });
-
 const Badge = _ref6 => {
   let {
     children,
@@ -72,13 +71,11 @@ const Badge = _ref6 => {
   } = variant;
   let background = backgroundColor;
   const isOutlineOffer = purpose === 'offer' && outline;
-
   if ((isOutlineOffer || alternative) && gradient) {
     background = `linear-gradient(#fff 0 0) padding-box, ${semanticGradient} border-box`;
   } else if (purpose === 'offer' && gradient) {
     background = semanticGradient;
   }
-
   const fontSizeMapping = {
     12: 'micro',
     14: 'small',
@@ -108,8 +105,8 @@ const Badge = _ref6 => {
     })
   });
 };
-
-Badge.propTypes = { ...selectedSystemPropTypes,
+Badge.propTypes = {
+  ...selectedSystemPropTypes,
   children: PropTypes.node,
   tokens: getTokensPropType('Badge'),
   variant: PropTypes.exact({

package/lib-module/BlockQuote/BlockQuote.js

@@ -49,7 +49,6 @@ const QuoteContainer = /*#__PURE__*/styled.div.withConfig({
   } = _ref7;
   return `${marginBottom}px`;
 });
-
 const BlockQuote = _ref8 => {
   let {
     children,
@@ -100,7 +99,6 @@ const BlockQuote = _ref8 => {
     fontWeight: titleFontWeight,
     lineHeight: titleLineHeight
   };
-
   const renderLink = () => {
     if (linkHref) {
       return /*#__PURE__*/_jsx(Link, {
@@ -120,7 +118,6 @@ const BlockQuote = _ref8 => {
         children: link
       });
     }
-
     return /*#__PURE__*/_jsx(Typography, {
       tokens: {
         color,
@@ -132,7 +129,6 @@ const BlockQuote = _ref8 => {
       children: link
     });
   };
-
   const renderQuote = () => {
     const quote = /*#__PURE__*/_jsx(Typography, {
       tokens: {
@@ -144,18 +140,16 @@ const BlockQuote = _ref8 => {
       },
       children: children
     });
-
     if (additionalInfo || link) {
       return /*#__PURE__*/_jsx(QuoteContainer, {
         marginBottom: marginBottom,
         children: quote
       });
     }
-
     return quote;
   };
-
-  return /*#__PURE__*/_jsxs(BlockQuoteContainer, { ...selectProps(rest),
+  return /*#__PURE__*/_jsxs(BlockQuoteContainer, {
+    ...selectProps(rest),
     paddingTop: paddingTop,
     paddingBottom: paddingBottom,
     paddingLeft: paddingLeft,
@@ -176,35 +170,30 @@ const BlockQuote = _ref8 => {
     })]
   });
 };
-
-BlockQuote.propTypes = { ...selectedSystemPropTypes,
+BlockQuote.propTypes = {
+  ...selectedSystemPropTypes,
   ...withLinkRouter.propTypes,
   tokens: getTokensPropType('BlockQuote'),
   variant: PropTypes.exact({
     alternative: PropTypes.bool,
     size: PropTypes.string
   }),
-
   /**
    * Children nodes that can be added
    */
   children: PropTypes.node.isRequired,
-
   /**
    * External source's identifier (e.g. author's name)
    */
   link: PropTypes.string,
-
   /**
    * External source's URL
    */
   linkHref: PropTypes.string,
-
   /**
    * To provide additional information about the source, rendered underneath `link`
    */
   additionalInfo: PropTypes.string,
-
   /**
    * Whether to render BlockQuote as a heading size of `h3` or large text size
    */