@telus-uds/components-web 2.21.1 → 2.22.0

package/lib-module/PriceLockup/PriceLockup.js

@@ -63,37 +63,54 @@ const TopTextContainer = /*#__PURE__*/styled.div.withConfig({
   } = _ref6;
   return topTextMarginBottom;
 });
+const PriceTextContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__PriceTextContainer",
+  componentId: "components-web__sc-1x6duay-6"
+})(["display:flex;flex-direction:", ";"], _ref7 => {
+  let {
+    ratePosition
+  } = _ref7;
+  return ratePosition === 'bottom' ? 'column' : 'row';
+});
+const RateContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "PriceLockup__RateContainer",
+  componentId: "components-web__sc-1x6duay-7"
+})(["display:flex;"]);
 const RateTextContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__RateTextContainer",
-  componentId: "components-web__sc-1x6duay-6"
-})(["align-self:flex-end;"]);
+  componentId: "components-web__sc-1x6duay-8"
+})(["align-self:", ";"], _ref8 => {
+  let {
+    ratePosition
+  } = _ref8;
+  return ratePosition === 'bottom' ? 'flex-start' : 'flex-end';
+});
 const StrikeThroughContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "PriceLockup__StrikeThroughContainer",
-  componentId: "components-web__sc-1x6duay-7"
-})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref7 => {
+  componentId: "components-web__sc-1x6duay-9"
+})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref9 => {
   let {
     strikeThroughPosition
-  } = _ref7;
+  } = _ref9;
   return `${strikeThroughPosition}px`;
-}, _ref8 => {
+}, _ref10 => {
   let {
     strikeThroughHeight
-  } = _ref8;
+  } = _ref10;
   return `${strikeThroughHeight}px`;
-}, _ref9 => {
+}, _ref11 => {
   let {
     strikeThroughColor
-  } = _ref9;
+  } = _ref11;
   return strikeThroughColor;
 });
-
-const selectFootnoteLinkStyles = _ref10 => {
+const selectFootnoteLinkStyles = _ref12 => {
   let {
     footnoteLinkColor,
     footnoteLinkFontName,
     footnoteLinkFontWeight,
     footnoteLinkLineHeight
-  } = _ref10;
+  } = _ref12;
   return {
     color: footnoteLinkColor,
     fontName: footnoteLinkFontName,
@@ -101,21 +118,19 @@ const selectFootnoteLinkStyles = _ref10 => {
     lineHeight: footnoteLinkLineHeight
   };
 };
-
-const selectStrikeThroughTokens = _ref11 => {
+const selectStrikeThroughTokens = _ref13 => {
   let {
     strikeThroughPosition,
     strikeThroughHeight,
     strikeThroughColor
-  } = _ref11;
+  } = _ref13;
   return {
     strikeThroughHeight,
     strikeThroughPosition,
     strikeThroughColor
   };
 };
-
-const PriceLockup = _ref12 => {
+const PriceLockup = _ref14 => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -124,6 +139,7 @@ const PriceLockup = _ref12 => {
     price,
     currencySymbol = '$',
     rateText,
+    ratePosition = 'right',
     bottomText,
     onClickFootnote,
     strikeThrough,
@@ -131,7 +147,7 @@ const PriceLockup = _ref12 => {
     tokens: priceLockupTokens,
     variant = {},
     ...rest
-  } = _ref12;
+  } = _ref14;
   const viewport = useViewport();
   const {
     footnoteMarginTop,
@@ -144,7 +160,8 @@ const PriceLockup = _ref12 => {
     dividerColor,
     footnoteLinkFontSize,
     ...themeTokens
-  } = useThemeTokens('PriceLockup', priceLockupTokens, { ...variant,
+  } = useThemeTokens('PriceLockup', priceLockupTokens, {
+    ...variant,
     size
   }, {
     viewport,
@@ -154,59 +171,72 @@ const PriceLockup = _ref12 => {
   const priceString = String(price);
   const lastDotPosition = priceString.lastIndexOf('.');
   const lastCommaPosition = priceString.lastIndexOf(',');
-  const [separator, separatorPosition] = lastDotPosition > lastCommaPosition ? ['.', lastDotPosition] : [',', lastCommaPosition]; // If the separator is at the fourth character from the end of the string or more, it's most probably
-  // a part of the amount, and the cents are not included in the price string
+  const [separator, separatorPosition] = lastDotPosition > lastCommaPosition ? ['.', lastDotPosition] : [',', lastCommaPosition];
 
+  // If the separator is at the fourth character from the end of the string or more, it's most probably
+  // a part of the amount, and the cents are not included in the price string
   const hasCents = separatorPosition !== -1 && separatorPosition >= priceString.length - 3;
   const amount = hasCents ? priceString.substring(0, separatorPosition) : priceString;
   const cents = hasCents ? priceString.substring(separatorPosition + 1) : null;
-
-  const renderTypography = (value, tokens) => /*#__PURE__*/_jsx(Typography, {
-    tokens: { ...tokens,
-      color: fontColor
-    },
-    children: value
-  });
-
+  const renderTypography = (value, tokens, position) => {
+    const customProps = position === 'bottom' ? {
+      variant: {
+        size: 'micro'
+      },
+      tokens: {
+        color: fontColor
+      }
+    } : {
+      tokens: {
+        ...tokens,
+        color: fontColor
+      }
+    };
+    return /*#__PURE__*/_jsx(Typography, {
+      ...customProps,
+      children: value
+    });
+  };
   const renderCurrencySymbol = () => renderTypography(`${currencySymbol}`, typographyTokens.dollarSign);
-
   const renderFootnoteLinks = () => footnoteLinks && footnoteLinks.length > 0 ? /*#__PURE__*/_jsx(FootnoteLink, {
     fontSize: footnoteLinkFontSize,
     tokens: selectFootnoteLinkStyles(themeTokens),
     number: footnoteLinks,
     onClick: onClickFootnote
   }) : null;
-
   const renderAmount = () => {
     const amountComponent = renderTypography(amount, typographyTokens.amount);
-
     if (strikeThrough) {
       return /*#__PURE__*/_jsxs(_Fragment, {
         children: [/*#__PURE__*/_jsx(A11yText, {
           text: a11yText
-        }), /*#__PURE__*/_jsx(StrikeThroughContainer, { ...selectStrikeThroughTokens(themeTokens),
+        }), /*#__PURE__*/_jsx(StrikeThroughContainer, {
+          ...selectStrikeThroughTokens(themeTokens),
           children: amountComponent
         })]
       });
     }
-
     return amountComponent;
   };
-
   const renderPrice = () => /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(PriceContainer, {
       priceMarginBottom: `${priceMarginBottom}px`,
-      children: [signDirection === 'left' && renderCurrencySymbol(), renderAmount(), cents && renderTypography(`${separator}${cents}`, typographyTokens.cents), signDirection === 'right' && /*#__PURE__*/_jsxs(_Fragment, {
-        children: ["\xA0", renderCurrencySymbol()]
-      }), rateText && /*#__PURE__*/_jsx(RateTextContainer, {
-        children: renderTypography(rateText, typographyTokens.rate)
+      children: [/*#__PURE__*/_jsxs(PriceTextContainer, {
+        ratePosition: ratePosition,
+        children: [/*#__PURE__*/_jsxs(RateContainer, {
+          children: [signDirection === 'left' && renderCurrencySymbol(), renderAmount(), cents && renderTypography(`${separator}${cents}`, typographyTokens.cents), signDirection === 'right' && /*#__PURE__*/_jsxs(_Fragment, {
+            children: ["\xA0", renderCurrencySymbol()]
+          })]
+        }), rateText && /*#__PURE__*/_jsx(RateTextContainer, {
+          ratePosition: ratePosition,
+          children: renderTypography(rateText, typographyTokens.rate, ratePosition)
+        })]
       }), !bottomText && footnoteLinks.length <= 3 && /*#__PURE__*/_jsx(BottomLinksContainer, {
         bottomLinksMarginLeft: `${bottomLinksMarginLeft}px`,
         children: renderFootnoteLinks()
       })]
     }), !bottomText && footnoteLinks.length > 3 && renderFootnoteLinks()]
   });
-
   const renderFootnoteContent = () => /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsxs(FootnoteContainer, {
       footnoteMarginTop: `${footnoteMarginTop}px`,
@@ -217,12 +247,11 @@ const PriceLockup = _ref12 => {
       }), footnoteLinks.length <= 3 && renderFootnoteLinks()]
     }), footnoteLinks.length > 3 && renderFootnoteLinks()]
   });
-
   if (strikeThrough && !a11yText) {
     warn('PriceLockup', 'a11yText must be provided with strikethrough pricing');
   }
-
-  return /*#__PURE__*/_jsxs(PriceLockupContainer, { ...selectProps(rest),
+  return /*#__PURE__*/_jsxs(PriceLockupContainer, {
+    ...selectProps(rest),
     children: [topText && /*#__PURE__*/_jsx(TopTextContainer, {
       topTextMarginBottom: `${topTextMarginBottom}px`,
       children: renderTypography(topText, typographyTokens.topText)
@@ -235,68 +264,60 @@ const PriceLockup = _ref12 => {
     }), bottomText && renderFootnoteContent()]
   });
 };
-
-PriceLockup.propTypes = { ...selectedSystemPropTypes,
-
+PriceLockup.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Size of the component
    *
    * Small for pricing in product catalogue pages, medium for pricing in product comparison cards and large for pricing in banners and promo cards
    */
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-
   /**
    * If currency symbol other than `$` to be used
    */
   currencySymbol: PropTypes.string,
-
   /**
    * Shows additional info above the price
    */
   topText: PropTypes.string,
-
   /**
    * Monetary value (including decimals separated by ".")
    */
   price: PropTypes.string.isRequired,
-
   /**
    * Shows month/year unit
    */
   rateText: PropTypes.string,
-
   /**
    * Shows additional info below the price with a `Divider`
    */
   bottomText: PropTypes.string,
-
   /**
    * 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
    */
   footnoteLinks: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
-
   /**
    * Function to be called when a footnote link is clicked
    */
   onClickFootnote: PropTypes.func,
-
   /**
    * To show price savings comparison
    */
   strikeThrough: PropTypes.bool,
-
   /**
    * To provide a11y text for `PriceLockup` component
    *
    * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
    */
   a11yText: PropTypes.string,
-
   /**
    * `PriceLockup` tokens
    */

package/lib-module/Progress/ProgressBar.js

@@ -1,8 +1,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { getTokensPropType, Progress, selectSystemProps, useThemeTokens, a11yProps, viewProps, variantProp } from '@telus-uds/components-base';
-import styled from 'styled-components'; // Passes React Native-oriented system props through UDS Progress
+import styled from 'styled-components';
 
+// Passes React Native-oriented system props through UDS Progress
 import { jsx as _jsx } from "react/jsx-runtime";
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 const {
@@ -31,6 +32,7 @@ const Gradient = /*#__PURE__*/styled.div.attrs({
     background: `${type}-gradient(${angle}deg, ${stops[0].color}, ${stops[1].color})`
   };
 });
+
 /**
  * The `ProgressBar` is a visual representation of linear progression.
  * It provides simple but important information at a quick glance.
@@ -42,7 +44,6 @@ const Gradient = /*#__PURE__*/styled.div.attrs({
  * `gradient` is being used here to provide gradient filling.
  *
  */
-
 const ProgressBar = _ref2 => {
   let {
     percentage,
@@ -57,24 +58,22 @@ const ProgressBar = _ref2 => {
     tokens: tokens,
     variant: variant,
     ...selectedProps,
-    children: themeTokens.gradient && /*#__PURE__*/_jsx(Gradient, { ...themeTokens,
+    children: themeTokens.gradient && /*#__PURE__*/_jsx(Gradient, {
+      ...themeTokens,
       percentage: percentage
     })
   });
 };
-
-ProgressBar.propTypes = { ...selectedSystemPropTypes,
-
+ProgressBar.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Percentage of completion.
    */
   percentage: PropTypes.number,
-
   /**
    * ProgressBar tokens.
    */
   tokens: getTokensPropType('ProgressBar'),
-
   /**
    * ProgressBar variant.
    */

package/lib-module/QuantitySelector/QuantitySelector.js

@@ -9,11 +9,9 @@ import { jsxs as _jsxs } from "react/jsx-runtime";
 const {
   isNaN
 } = Number;
-
 const isNumber = value => {
   return typeof value === 'number' && !isNaN(value);
 };
-
 const QuantitySelector = _ref => {
   let {
     id,
@@ -41,14 +39,12 @@ const QuantitySelector = _ref => {
     dictionary,
     copy
   });
-
   const getValidatedNumber = numberToEvaluate => {
     if (isNaN(numberToEvaluate)) return null;
     if (isNumber(minNumber) && numberToEvaluate < minNumber) throw getCopy('errors').numberIsTooSmall(minNumber);
     if (isNumber(maxNumber) && numberToEvaluate > maxNumber) throw getCopy('errors').numberIsTooBig(maxNumber);
     return numberToEvaluate;
   };
-
   const {
     currentValue: number,
     setValue: setNumber
@@ -60,7 +56,6 @@ const QuantitySelector = _ref => {
   const isDecreaseEnabled = !disabled && !isNumber(minNumber) || number > minNumber;
   const isIncreaseEnabled = !disabled && !isNumber(maxNumber) || number < maxNumber;
   const inputValue = isNumber(number) ? number.toString() : '';
-
   const updateNumber = (newNumber, originalInputEvent) => {
     try {
       const validatedNumber = getValidatedNumber(newNumber);
@@ -70,18 +65,15 @@ const QuantitySelector = _ref => {
       setError(e);
     }
   };
-
   const inputChangeHandler = (textInputValue, event) => {
     if (textInputValue === '') setNumber(null);
     const numberFromTextInput = Number(textInputValue);
-
     if (isNumber(numberFromTextInput)) {
       updateNumber(numberFromTextInput, event);
     } else {
       setError(getCopy('errors').invalidCharacters);
     }
   };
-
   const renderLabel = () => label ? /*#__PURE__*/_jsx(InputLabel, {
     forId: id,
     label: label,
@@ -89,9 +81,7 @@ const QuantitySelector = _ref => {
     hintPosition: hintPosition,
     tooltip: tooltip
   }) : null;
-
   const getTokens = useThemeTokensCallback('QuantitySelector', tokens, variant);
-
   const renderTextInput = () => /*#__PURE__*/_jsx(TextInput, {
     nativeID: id,
     value: inputValue,
@@ -104,9 +94,11 @@ const QuantitySelector = _ref => {
         textColor,
         inputBackgroundColor,
         ...rest
-      } = getTokens({ ...textInputState
+      } = getTokens({
+        ...textInputState
       });
-      return { ...rest,
+      return {
+        ...rest,
         order: 1,
         borderWidth: inputBorderWidth,
         backgroundColor: inputBackgroundColor,
@@ -117,7 +109,8 @@ const QuantitySelector = _ref => {
         outerBorderWidth: 0
       };
     },
-    onChange: inputChangeHandler // Using title as an accessibility workaround
+    onChange: inputChangeHandler
+    // Using title as an accessibility workaround
     // given that accessibilityLabel is not available
     ,
     keyboardType: "numeric",
@@ -127,11 +120,9 @@ const QuantitySelector = _ref => {
     accessibilityValueMin: minNumber,
     accessibilityValueNow: number
   });
-
   const flexOrder = order => ({
     order
   });
-
   return /*#__PURE__*/_jsxs(Box, {
     space: 2,
     testID: testID,
@@ -177,9 +168,9 @@ const QuantitySelector = _ref => {
       })
     }) : null]
   });
-}; // 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({
   accessibility: PropTypes.shape({
     a11yLabel: PropTypes.string.isRequired,
@@ -197,58 +188,47 @@ QuantitySelector.propTypes = {
    * The id of the input field
    */
   id: PropTypes.string,
-
   /**
    * The minimum number allowed
    */
   minNumber: PropTypes.number,
-
   /**
    * The maximum number allowed
    */
   maxNumber: PropTypes.number,
-
   /**
    * The callback function that is called when the value of the input field changes
    */
   onChange: PropTypes.func,
-
   /**
    * The default value of the input field
    */
   defaultValue: PropTypes.number,
-
   /**
    * If the input's state is to be controlled by a parent component, use this prop
    * together with the `onChange` to pass down and update the lifted state.
    */
   value: PropTypes.number,
-
   /**
    * The label of the input field
    */
   label: PropTypes.string,
-
   /**
    * The hint of the input field
    */
   hint: PropTypes.string,
-
   /**
    * The position of the hint. Could be shown along side the label or below it
    */
   hintPosition: PropTypes.oneOf(['inline', 'below']),
-
   /**
    * Adds a question mark which will display a tooltip when clicked
    */
   tooltip: PropTypes.string,
-
   /**
    * The accessibility label of the input field
    */
   accessibilityLabel: PropTypes.string,
-
   /**
    * The dictionary object containing the content for the input field
    */
@@ -256,7 +236,6 @@ QuantitySelector.propTypes = {
     en: dictionaryContentShape,
     fr: dictionaryContentShape
   }),
-
   /**
    * The language to use for the copy.
    */
@@ -266,7 +245,6 @@ QuantitySelector.propTypes = {
     disabled: PropTypes.bool
   }),
   tokens: PropTypes.oneOf([PropTypes.object, PropTypes.func]),
-
   /**
    * Sets `data-testid` attribute on the input field for testing purposes.
    */

package/lib-module/QuantitySelector/SideButton.js

@@ -2,7 +2,6 @@ import { IconButton, useThemeTokensCallback } from '@telus-uds/components-base';
 import React from 'react';
 import PropTypes from 'prop-types';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const SideButton = _ref => {
   let {
     isEnabled,
@@ -14,7 +13,6 @@ const SideButton = _ref => {
     variant
   } = _ref;
   const getTokens = useThemeTokensCallback('QuantitySelectorSideButton', tokens, variant);
-
   const getButtonTokens = _ref2 => {
     let {
       buttonState,
@@ -27,10 +25,12 @@ const SideButton = _ref => {
       borderBottomLeftRadius,
       borderBottomRightRadius,
       ...rest
-    } = getTokens({ ...buttonState,
+    } = getTokens({
+      ...buttonState,
       disabled
     });
-    return { ...rest,
+    return {
+      ...rest,
       borderRadius,
       borderTopLeftRadius,
       borderTopRightRadius,
@@ -45,7 +45,6 @@ const SideButton = _ref => {
       outerBorderWidth: 0
     };
   };
-
   return /*#__PURE__*/_jsx(IconButton, {
     tokens: buttonState => getButtonTokens({
       disabled: !isEnabled,
@@ -57,7 +56,6 @@ const SideButton = _ref => {
     accessibilityDisabled: accessibilityDisabled
   });
 };
-
 SideButton.displayName = 'QuantitySelectorSideButton';
 SideButton.defaultProps = {
   isEnabled: true,

package/lib-module/ResponsiveImage/ResponsiveImage.js

@@ -12,10 +12,10 @@ const staticStyles = {
     width: '100%'
   }
 };
+
 /**
  * Provide different image sources for different screen sizes.
  */
-
 const ResponsiveImage = _ref => {
   let {
     xsSrc,
@@ -28,7 +28,8 @@ const ResponsiveImage = _ref => {
     loading = 'eager',
     ...rest
   } = _ref;
-  return /*#__PURE__*/_jsxs("picture", { ...selectProps(rest),
+  return /*#__PURE__*/_jsxs("picture", {
+    ...selectProps(rest),
     children: [/*#__PURE__*/_jsx("source", {
       srcSet: xlSrc,
       media: `(min-width: ${viewports.map.get(viewports.xl)}px)`
@@ -52,44 +53,36 @@ const ResponsiveImage = _ref => {
     })]
   });
 };
-
-ResponsiveImage.propTypes = { ...selectedSystemPropTypes,
-
+ResponsiveImage.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * The src attribute used for screen widths up to 575px
    */
   xsSrc: PropTypes.string.isRequired,
-
   /**
    * The src attribute used for screen widths greater than 576px
    */
   smSrc: PropTypes.string.isRequired,
-
   /**
    * The src attribute used for screen widths greater than 768px
    */
   mdSrc: PropTypes.string,
-
   /**
    * The src attribute used for screen widths greater than 992px
    */
   lgSrc: PropTypes.string,
-
   /**
    * The src attribute used for screen widths greater than 1200px
    */
   xlSrc: PropTypes.string,
-
   /**
    * The src attribute used for browsers that don't support responsive images (InternetExplorer)
    */
   fallbackSrc: 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,
-
   /**
    * Loading strategy.
    * @default 'eager'