@telus-uds/components-web 2.21.1 → 2.22.0

package/lib-module/shared/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.js

@@ -115,7 +115,6 @@ const DetailsContainer = /*#__PURE__*/styled.div.withConfig({
     return `${detailsContainerPadding}px`;
   }
 });
-
 const selectPlayIconContainerTokens = _ref12 => {
   let {
     playIconContainerBackground
@@ -124,7 +123,6 @@ const selectPlayIconContainerTokens = _ref12 => {
     playIconContainerBackground
   };
 };
-
 const selectDetailsContainerTokens = _ref13 => {
   let {
     detailsContainerPadding
@@ -133,7 +131,6 @@ const selectDetailsContainerTokens = _ref13 => {
     detailsContainerPadding
   };
 };
-
 const selectButtonContentTokens = _ref14 => {
   let {
     buttonBackground,
@@ -156,7 +153,6 @@ const selectButtonContentTokens = _ref14 => {
     buttonPaddingRight
   };
 };
-
 const getLabelTokens = _ref15 => {
   let {
     labelFontName: fontName,
@@ -167,7 +163,6 @@ const getLabelTokens = _ref15 => {
     fontWeight
   };
 };
-
 const SplashButtonWithDetails = _ref16 => {
   let {
     label,
@@ -190,14 +185,17 @@ const SplashButtonWithDetails = _ref16 => {
   const ariaLabel = getAriaLabel(mappedVideoLength, copy);
   return /*#__PURE__*/_jsx(ButtonContainer, {
     "aria-label": ariaLabel,
-    children: /*#__PURE__*/_jsxs(ButtonContent, { ...selectButtonContentTokens(themeTokens),
+    children: /*#__PURE__*/_jsxs(ButtonContent, {
+      ...selectButtonContentTokens(themeTokens),
       buttonContentChildrenBackground: buttonContentChildrenBackground,
-      children: [/*#__PURE__*/_jsx(PlayIconContainer, { ...selectPlayIconContainerTokens(themeTokens),
+      children: [/*#__PURE__*/_jsx(PlayIconContainer, {
+        ...selectPlayIconContainerTokens(themeTokens),
         children: /*#__PURE__*/_jsx(PlayIcon, {
           size: 13,
           color: playIconColor
         })
-      }), /*#__PURE__*/_jsxs(DetailsContainer, { ...selectDetailsContainerTokens(themeTokens),
+      }), /*#__PURE__*/_jsxs(DetailsContainer, {
+        ...selectDetailsContainerTokens(themeTokens),
         children: [/*#__PURE__*/_jsx(Typography, {
           variant: {
             bold: true
@@ -206,9 +204,7 @@ const SplashButtonWithDetails = _ref16 => {
           children: label
         }), /*#__PURE__*/_jsx(Typography, {
           variant: {
-            colour: 'secondary'
-            /* TODO: this is not the same color as in designs */
-            ,
+            colour: 'secondary' /* TODO: this is not the same color as in designs */,
             size: 'micro'
           },
           children: mappedVideoLength.timestamp
@@ -217,7 +213,6 @@ const SplashButtonWithDetails = _ref16 => {
     })
   });
 };
-
 SplashButtonWithDetails.propTypes = {
   label: PropTypes.string,
   tokens: PropTypes.object,

package/lib-module/shared/VideoSplash/VideoSplash.js

@@ -28,7 +28,6 @@ const SplashBackground = /*#__PURE__*/styled.div.withConfig({
     cursor: 'pointer'
   };
 });
-
 const VideoSplash = _ref2 => {
   let {
     poster,
@@ -41,7 +40,8 @@ const VideoSplash = _ref2 => {
   const viewport = useViewport();
   const showDetails = !simpleMode && viewport !== viewports.xs;
   const label = videoText[copy].watch;
-  return /*#__PURE__*/_jsx(SplashBackground, { ...selectProps(rest),
+  return /*#__PURE__*/_jsx(SplashBackground, {
+    ...selectProps(rest),
     onClick: onClick,
     videoPoster: poster,
     children: showDetails ? /*#__PURE__*/_jsx(SplashButtonWithDetails, {
@@ -54,8 +54,8 @@ const VideoSplash = _ref2 => {
     })
   });
 };
-
-VideoSplash.propTypes = { ...selectedSystemPropTypes,
+VideoSplash.propTypes = {
+  ...selectedSystemPropTypes,
   onClick: PropTypes.func,
   poster: PropTypes.string,
   videoLength: PropTypes.number.isRequired,

package/lib-module/utils/logger.js

@@ -2,16 +2,16 @@ export const deprecate = (componentName, message) => {
   if (process.env.NODE_ENV === 'production') {
     return;
   }
-
   console.warn(`[Allium] [Deprecate] ${componentName}: ${message}`); // eslint-disable-line no-console
 };
+
 export const warn = (componentName, message) => {
   if (process.env.NODE_ENV === 'production') {
     return;
   }
-
   console.warn(`[Allium] ${componentName}: ${message}`); // eslint-disable-line no-console
 };
+
 export default {
   deprecate,
   warn

package/lib-module/utils/media.js

@@ -2,25 +2,20 @@ import { viewports } from '@telus-uds/system-constants';
 export default function media() {
   return {
     query: {},
-
     from(breakpoint) {
       if (breakpoint !== 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,
@@ -29,18 +24,16 @@ export default function media() {
       } = this.query;
       const min = minWidth ? `(min-width: ${viewports.map.get(minWidth)}px)` : undefined;
       const max = maxWidth ? `(max-width: ${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-module/utils/renderStructuredContent.js

@@ -1,77 +1,66 @@
 import React from 'react';
 import { Link } from '@telus-uds/components-base';
+
 /**
  * Takes a string content and marks up all the links in it by wrapping them
  * in `Link` component.
  */
-
 import { createElement as _createElement } from "react";
 import { jsx as _jsx } from "react/jsx-runtime";
-
 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__*/_createElement(Link, { ...o,
+    }
+    // Remove anchor attributes from parts
+    parts[i - 1] = undefined;
+    // Replace anchor text with Link in parts
+    parts[i] = /*#__PURE__*/_createElement(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__*/_jsx("br", {}, `break-${i}-${x}`));
       }
-
       partsWithBreaks[i] = toSplit;
     }
   }
-
   return partsWithBreaks;
 };
-
 const renderStructuredContent = content => {
   if (typeof content !== 'string') {
     return content;
   }
-
   return generateBreaks(generateLinks(content));
 };
-
 export default renderStructuredContent;

package/lib-module/utils/ssr.js

@@ -17,7 +17,6 @@ import { ssrStyles as baseSsrStyles } from '@telus-uds/components-base';
  * @param {boolean} [options.styleGetters]
  * @param {(ReactElement) => ReactElement} [options.collectStyles]
  */
-
 const ssrStyles = function () {
   let appName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'Allium app';
   let {
@@ -25,17 +24,14 @@ const ssrStyles = function () {
     collectStyles = renderedApp => renderedApp
   } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
   const sheet = new ServerStyleSheet();
-
   const getStyledComponentsStyles = () => {
     const styles = sheet.getStyleElement();
     sheet.seal();
     return styles;
   };
-
   return baseSsrStyles(appName, {
     styleGetters: [getStyledComponentsStyles, ...styleGetters],
     collectStyles: renderedApp => collectStyles(sheet.collectStyles(renderedApp))
   });
 };
-
 export default ssrStyles;

package/lib-module/utils/useOverlaidPosition.js

@@ -1,9 +1,8 @@
-import { useCallback, useEffect, useRef, useState } from 'react'; // TODO: add react-native as a peer dep and support native apps too.
+import { useCallback, useEffect, useRef, useState } from 'react';
+// 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.
-
 import Dimensions from "react-native-web/dist/exports/Dimensions";
-
 const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
   const offset = Math.max(0, initialOffset);
   const otherEdgeOverflow = Math.max(0, offset + sourceWidth - windowWidth);
@@ -14,34 +13,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.
  *
@@ -52,8 +46,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,
@@ -68,8 +60,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'),
@@ -101,20 +94,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.
@@ -123,8 +114,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,
@@ -137,8 +126,9 @@ const useOverlaidPosition = _ref3 => {
   } = _ref3;
   // Element in main document flow that the targetRef element is positioned around
   const sourceRef = useRef(null);
-  const [sourceLayout, setSourceLayout] = useState(null); // Element in a modal or portal overlay positioned to appear adjacent to sourceRef
+  const [sourceLayout, setSourceLayout] = useState(null);
 
+  // Element in a modal or portal overlay positioned to appear adjacent to sourceRef
   const targetRef = useRef(null);
   const [targetDimensions, setTargetDimensions] = useState(null);
   const [windowDimensions, setWindowDimensions] = useState(null);
@@ -163,7 +153,6 @@ const useOverlaidPosition = _ref3 => {
           height
         };
       }
-
       return previousDimensions;
     });
   }, []);
@@ -171,7 +160,6 @@ const useOverlaidPosition = _ref3 => {
   useEffect(() => {
     const handleDimensionsChange = _ref5 => {
       var _sourceRef$current;
-
       let {
         window
       } = _ref5;
@@ -186,12 +174,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();
@@ -199,11 +184,9 @@ const useOverlaidPosition = _ref3 => {
         // React Native <0.65.0
         Dimensions.remove('change', handleDimensionsChange);
       }
-
       setSourceLayout(null);
       setTargetDimensions(null);
     };
-
     if (readyToShow) {
       subscription = Dimensions.addEventListener('change', handleDimensionsChange);
       handleDimensionsChange({
@@ -212,7 +195,6 @@ const useOverlaidPosition = _ref3 => {
     } else {
       unsubscribe();
     }
-
     return unsubscribe;
   }, [readyToShow]);
   const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions);
@@ -231,5 +213,4 @@ const useOverlaidPosition = _ref3 => {
     isReady
   };
 };
-
 export default useOverlaidPosition;

package/lib-module/utils/useTypographyTheme.js

@@ -1,5 +1,4 @@
 import { applyTextStyles, useTheme, useThemeTokens, useViewport } from '@telus-uds/components-base';
-
 const useTypographyTheme = (variant, tokens) => {
   const viewport = useViewport();
   const themeTokens = useThemeTokens('Typography', tokens, variant, {
@@ -12,13 +11,14 @@ const useTypographyTheme = (variant, tokens) => {
     fontSize,
     lineHeight,
     ...rnStyles
-  } = applyTextStyles({ ...themeTokens,
+  } = applyTextStyles({
+    ...themeTokens,
     themeOptions
   });
-  return { ...rnStyles,
+  return {
+    ...rnStyles,
     fontSize: `${fontSize}px`,
     lineHeight: `${lineHeight}px`
   };
 };
-
 export default useTypographyTheme;

package/package.json

@@ -5,14 +5,14 @@
   ],
   "dependencies": {
     "@gorhom/portal": "^1.0.14",
-    "@telus-uds/components-base": "1.65.0",
+    "@telus-uds/components-base": "1.67.0",
     "@telus-uds/system-constants": "^1.3.0",
     "fscreen": "^1.2.0",
     "lodash.omit": "^4.5.0",
     "react-dates": "^21.8.0",
     "react-helmet-async": "^1.3.0",
     "react-moment-proptypes": "^1.8.1",
-    "@telus-uds/system-theme-tokens": "^2.42.0",
+    "@telus-uds/system-theme-tokens": "^2.44.0",
     "prop-types": "^15.7.2",
     "lodash.throttle": "^4.1.1",
     "react-youtube": "^10.1.0",
@@ -62,5 +62,5 @@
     "skip": true
   },
   "types": "types/index.d.ts",
-  "version": "2.21.1"
+  "version": "2.22.0"
 }

package/src/PriceLockup/PriceLockup.jsx

@@ -46,8 +46,17 @@ const TopTextContainer = styled.div`
   margin-bottom: ${({ topTextMarginBottom }) => topTextMarginBottom};
 `
 
+const PriceTextContainer = styled.div`
+  display: flex;
+  flex-direction: ${({ ratePosition }) => (ratePosition === 'bottom' ? 'column' : 'row')};
+`
+
+const RateContainer = styled.div`
+  display: flex;
+`
+
 const RateTextContainer = styled.div`
-  align-self: flex-end;
+  align-self: ${({ ratePosition }) => (ratePosition === 'bottom' ? 'flex-start' : 'flex-end')};
 `
 
 const StrikeThroughContainer = styled.div`
@@ -96,6 +105,7 @@ const PriceLockup = ({
   price,
   currencySymbol = '$',
   rateText,
+  ratePosition = 'right',
   bottomText,
   onClickFootnote,
   strikeThrough,
@@ -135,9 +145,13 @@ const PriceLockup = ({
   const amount = hasCents ? priceString.substring(0, separatorPosition) : priceString
   const cents = hasCents ? priceString.substring(separatorPosition + 1) : null
 
-  const renderTypography = (value, tokens) => (
-    <Typography tokens={{ ...tokens, color: fontColor }}>{value}</Typography>
-  )
+  const renderTypography = (value, tokens, position) => {
+    const customProps =
+      position === 'bottom'
+        ? { variant: { size: 'micro' }, tokens: { color: fontColor } }
+        : { tokens: { ...tokens, color: fontColor } }
+    return <Typography {...customProps}>{value}</Typography>
+  }
 
   const renderCurrencySymbol = () =>
     renderTypography(`${currencySymbol}`, typographyTokens.dollarSign)
@@ -171,13 +185,20 @@ const PriceLockup = ({
   const renderPrice = () => (
     <>
       <PriceContainer priceMarginBottom={`${priceMarginBottom}px`}>
-        {signDirection === 'left' && renderCurrencySymbol()}
-        {renderAmount()}
-        {cents && renderTypography(`${separator}${cents}`, typographyTokens.cents)}
-        {signDirection === 'right' && <>&nbsp;{renderCurrencySymbol()}</>}
-        {rateText && (
-          <RateTextContainer>{renderTypography(rateText, typographyTokens.rate)}</RateTextContainer>
-        )}
+        <PriceTextContainer ratePosition={ratePosition}>
+          <RateContainer>
+            {signDirection === 'left' && renderCurrencySymbol()}
+            {renderAmount()}
+            {cents && renderTypography(`${separator}${cents}`, typographyTokens.cents)}
+            {signDirection === 'right' && <>&nbsp;{renderCurrencySymbol()}</>}
+          </RateContainer>
+          {rateText && (
+            <RateTextContainer ratePosition={ratePosition}>
+              {renderTypography(rateText, typographyTokens.rate, ratePosition)}
+            </RateTextContainer>
+          )}
+        </PriceTextContainer>
+
         {!bottomText && footnoteLinks.length <= 3 && (
           <BottomLinksContainer bottomLinksMarginLeft={`${bottomLinksMarginLeft}px`}>
             {renderFootnoteLinks()}
@@ -259,6 +280,10 @@ PriceLockup.propTypes = {
    * Displays which side the currency should apperar (left, right)
    */
   signDirection: PropTypes.oneOf(['right', 'left']),
+  /**
+   * Displays where the rate should apperar (bottom, right)
+   */
+  ratePosition: PropTypes.oneOf(['right', 'bottom']),
   /**
    * Shows additional link for context
    */

package/src/baseExports.js

@@ -31,6 +31,7 @@ export {
   InputSupports,
   Link,
   Listbox,
+  Modal,
   MultiSelectFilter,
   Notification,
   Pagination,

package/src/index.js

@@ -1,5 +1,4 @@
 export { default as Badge } from './Badge'
-export { default as Modal } from './Modal'
 export { default as OrderedList } from './OrderedList'
 export { default as PreviewCard } from './PreviewCard'
 export { default as ResponsiveImage } from './ResponsiveImage'