@telus-uds/components-web 1.9.0 → 1.11.0

package/lib-module/PriceLockup/tokens.js

@@ -1,120 +1,55 @@
-import palette from '@telus-uds/palette-allium/build/rn/palette';
-const {
-  fontSize: {
-    size14,
-    size16,
-    size20,
-    size28,
-    size36,
-    size40,
-    size64
-  },
-  lineHeight: {
-    ratio1to1,
-    ratio10to7,
-    ratio3to2,
-    ratio8to5,
-    ratio5to4,
-    ratio6to5,
-    ratio9to8,
-    ratio4to3,
-    ratio8to7
-  },
-  letterSpacing: {
-    condensed
-  }
-} = palette;
-const typographyTokens = {
-  topText: {
-    small: {
-      fontSize: size14,
-      lineHeight: ratio10to7
-    },
-    medium: {
-      fontSize: size16,
-      lineHeight: ratio3to2
-    },
-    large: {
-      fontSize: size20,
-      lineHeight: ratio8to5
-    }
-  },
-  dollarSign: {
-    small: {
-      fontSize: size16,
-      lineHeight: ratio5to4
-    },
-    medium: {
-      fontSize: size20,
-      lineHeight: ratio6to5
-    },
-    large: {
-      fontSize: size36,
-      lineHeight: ratio9to8
-    }
-  },
-  // TODO - fontWeight should have its own const on palette
-  amount: {
-    small: {
-      fontSize: size28,
-      lineHeight: ratio1to1,
-      letterSpacing: condensed,
-      fontWeight: '300'
-    },
-    medium: {
-      fontSize: size40,
-      lineHeight: ratio1to1,
-      letterSpacing: condensed,
-      fontWeight: '300'
-    },
-    large: {
-      fontSize: size64,
-      lineHeight: ratio1to1,
-      letterSpacing: condensed,
-      fontWeight: '300'
-    }
-  },
-  cents: {
-    small: {
-      fontSize: size16,
-      lineHeight: ratio4to3
-    },
-    medium: {
-      fontSize: size20,
-      lineHeight: ratio6to5
-    },
-    large: {
-      fontSize: size36,
-      lineHeight: ratio9to8
-    }
-  },
-  rate: {
-    small: {
-      fontSize: size14,
-      lineHeight: ratio8to7
-    },
-    medium: {
-      fontSize: size16,
-      lineHeight: ratio5to4
-    },
-    large: {
-      fontSize: size20,
-      lineHeight: ratio8to5
-    }
-  },
-  bottomText: {
-    small: {
-      fontSize: size14,
-      lineHeight: ratio10to7
-    },
-    medium: {
-      fontSize: size16,
-      lineHeight: ratio3to2
-    },
-    large: {
-      fontSize: size20,
-      lineHeight: ratio8to5
+// map typography tokens accordenly
+export default (_ref => {
+  let {
+    topTextFontSize,
+    fontColor,
+    topTextLineHeight,
+    currencySymbolFontSize,
+    currencySymbolLineHeight,
+    currencySymbolFontWeight,
+    amountFontSize,
+    amountLineHeight,
+    amountLetterSpacing,
+    amountFontWeight,
+    centsFontSize,
+    centsLineHeight,
+    rateFontSize,
+    rateLineHeight,
+    bottomTextFontSize,
+    bottomTextLineHeight,
+    rateFontWeight,
+    centsFontWeight
+  } = _ref;
+  return {
+    topText: {
+      fontSize: topTextFontSize,
+      lineHeight: topTextLineHeight
+    },
+    dollarSign: {
+      fontSize: currencySymbolFontSize,
+      lineHeight: currencySymbolLineHeight,
+      fontWeight: currencySymbolFontWeight
+    },
+    amount: {
+      color: fontColor,
+      fontSize: amountFontSize,
+      lineHeight: amountLineHeight,
+      letterSpacing: amountLetterSpacing,
+      fontWeight: amountFontWeight
+    },
+    cents: {
+      fontSize: centsFontSize,
+      lineHeight: centsLineHeight,
+      fontWeight: centsFontWeight
+    },
+    rate: {
+      fontSize: rateFontSize,
+      lineHeight: rateLineHeight,
+      fontWeight: rateFontWeight
+    },
+    bottomText: {
+      fontSize: bottomTextFontSize,
+      lineHeight: bottomTextLineHeight
     }
-  }
-};
-export default typographyTokens;
+  };
+});

package/lib-module/Progress/ProgressBar.js

@@ -0,0 +1,83 @@
+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 { jsx as _jsx } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const {
+  Bar: ProgressBarBase
+} = Progress;
+const Gradient = /*#__PURE__*/styled.div.attrs({
+  'data-testid': 'ProgressBar-Gradient'
+}).withConfig({
+  displayName: "ProgressBar__Gradient",
+  componentId: "components-web__sc-1vmzyq5-0"
+})(_ref => {
+  let {
+    percentage,
+    gradient: {
+      angle,
+      stops,
+      type
+    }
+  } = _ref;
+  return {
+    height: '100%',
+    // As per the design specs, we need to have the gradient expanding to 100% and being
+    // revealed by bar width, so we need to stretch it beyond the parent (progress element)
+    // to the full length of the progress bar
+    width: `${100 * 100 / percentage}%`,
+    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.
+ * This is a  Web-specific progress bar.
+ *
+ * ## Component API
+ *
+ * Use props and tokens from the base ProgressBar component. The difference is that the
+ * `gradient` is being used here to provide gradient filling.
+ *
+ */
+
+const ProgressBar = _ref2 => {
+  let {
+    percentage,
+    tokens,
+    variant,
+    ...rest
+  } = _ref2;
+  const themeTokens = useThemeTokens('ProgressBar', tokens, variant);
+  const selectedProps = selectProps(rest);
+  return /*#__PURE__*/_jsx(ProgressBarBase, {
+    percentage: percentage,
+    tokens: tokens,
+    variant: variant,
+    ...selectedProps,
+    children: themeTokens.gradient && /*#__PURE__*/_jsx(Gradient, { ...themeTokens,
+      percentage: percentage
+    })
+  });
+};
+
+ProgressBar.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Percentage of completion.
+   */
+  percentage: PropTypes.number,
+
+  /**
+   * ProgressBar tokens.
+   */
+  tokens: getTokensPropType('ProgressBar'),
+
+  /**
+   * ProgressBar variant.
+   */
+  variant: variantProp.propType
+};
+export default ProgressBar;

package/lib-module/Progress/index.js

@@ -0,0 +1,4 @@
+import { Progress } from '@telus-uds/components-base';
+import ProgressBar from './ProgressBar';
+Progress.Bar = ProgressBar;
+export default Progress;

package/lib-module/Ribbon/Ribbon.js

@@ -29,7 +29,7 @@ const RibbonWrapper = /*#__PURE__*/styled.div.withConfig({
 const RibbonContainer = /*#__PURE__*/styled.div.withConfig({
   displayName: "Ribbon__RibbonContainer",
   componentId: "components-web__sc-186270k-1"
-})(["display:flex;justify-content:center;background:", ";padding:", ";border-radius:", ";width:fit-content;box-shadow:", ";"], _ref4 => {
+})(["display:flex;justify-content:center;background:", ";padding:", ";border-radius:", ";width:fit-content;box-shadow:", ";border-bottom-right-radius:", ";border-bottom-left-radius:", ";"], _ref4 => {
   let {
     backgroundColor
   } = _ref4;
@@ -50,53 +50,63 @@ const RibbonContainer = /*#__PURE__*/styled.div.withConfig({
     shouldWrap
   } = _ref7;
   return shouldWrap && boxShadow;
+}, _ref8 => {
+  let {
+    borderRadiusBottomLeft
+  } = _ref8;
+  return borderRadiusBottomLeft;
+}, _ref9 => {
+  let {
+    borderRadiusBottomRight
+  } = _ref9;
+  return borderRadiusBottomRight;
 });
 const RibbonCurve = /*#__PURE__*/styled.div.withConfig({
   displayName: "Ribbon__RibbonCurve",
   componentId: "components-web__sc-186270k-2"
-})(["background:", ";width:", ";height:", ";margin-top:-", ";border-radius:0 0 0 100%;position:relative;z-index:-1;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref8 => {
+})(["background:", ";width:", ";height:", ";margin-top:-", ";border-radius:0 0 0 100%;position:relative;z-index:-1;&::after{content:'';border-bottom-left-radius:", ";position:absolute;height:", ";background:", ";width:", ";}"], _ref10 => {
   let {
     curveBackgroundColor
-  } = _ref8;
+  } = _ref10;
   return curveBackgroundColor;
-}, _ref9 => {
+}, _ref11 => {
   let {
     curveWidth
-  } = _ref9;
+  } = _ref11;
   return curveWidth;
-}, _ref10 => {
+}, _ref12 => {
   let {
     curveHeight
-  } = _ref10;
+  } = _ref12;
   return curveHeight;
-}, _ref11 => {
+}, _ref13 => {
   let {
     curveMarginTop
-  } = _ref11;
+  } = _ref13;
   return curveMarginTop;
-}, _ref12 => {
+}, _ref14 => {
   let {
     curveAfterRadius
-  } = _ref12;
+  } = _ref14;
   return curveAfterRadius;
-}, _ref13 => {
+}, _ref15 => {
   let {
     curveAfterHeight
-  } = _ref13;
+  } = _ref15;
   return curveAfterHeight;
-}, _ref14 => {
+}, _ref16 => {
   let {
     curveAfterBackgroundColor
-  } = _ref14;
+  } = _ref16;
   return curveAfterBackgroundColor;
-}, _ref15 => {
+}, _ref17 => {
   let {
     curveAfterWidth
-  } = _ref15;
+  } = _ref17;
   return curveAfterWidth;
 });
 
-const Ribbon = _ref16 => {
+const Ribbon = _ref18 => {
   let {
     children,
     tokens,
@@ -105,7 +115,7 @@ const Ribbon = _ref16 => {
     top,
     variant = {},
     ...rest
-  } = _ref16;
+  } = _ref18;
   const {
     backgroundColor,
     borderRadius,
@@ -126,19 +136,25 @@ const Ribbon = _ref16 => {
     paddingLeft,
     paddingRight,
     paddingTop,
-    gradient
-  } = useThemeTokens('Ribbon', tokens, variant);
-  const {
-    purpose
-  } = variant;
-  const {
-    type: gradientType,
-    angle: gradientAngle,
-    stops: gradientColors
-  } = gradient;
-  const isOfferPurpose = purpose === 'offer';
-  const gradientBackground = `${gradientType}-gradient(${gradientAngle}deg, ${gradientColors[0].color}, ${gradientColors[1].color})`;
-  const background = isOfferPurpose ? gradientBackground : backgroundColor;
+    gradient,
+    fontColor,
+    borderRadiusBottomLeft,
+    borderRadiusBottomRight
+  } = useThemeTokens('Ribbon', tokens, { ...variant,
+    wrap: shouldWrap
+  });
+  let background = backgroundColor;
+
+  if (gradient) {
+    const {
+      type: gradientType,
+      angle: gradientAngle,
+      stops: gradientColors
+    } = gradient;
+    const gradientBackground = `${gradientType}-gradient(${gradientAngle}deg, ${gradientColors[0].color}, ${gradientColors[1].color})`;
+    background = gradientBackground;
+  }
+
   return /*#__PURE__*/_jsxs(RibbonWrapper, {
     left: left,
     top: top,
@@ -150,12 +166,17 @@ const Ribbon = _ref16 => {
       padding: `${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`,
       borderRadius: `${borderRadius}px`,
       boxShadow: `${boxShadowPaddingTop}px ${boxShadowPaddingRight}px ${boxShadowPaddingBottom}px ${boxShadowPaddingLeft}px ${boxShadowColor}`,
+      borderRadiusBottomLeft: `${borderRadiusBottomLeft}px`,
+      borderRadiusBottomRight: `${borderRadiusBottomRight}px`,
       children: /*#__PURE__*/_jsx(Typography, {
         variant: {
           size: 'micro',
           bold: true,
           inverse: true
         },
+        tokens: {
+          color: fontColor
+        },
         children: children
       })
     }), shouldWrap && /*#__PURE__*/_jsx(RibbonCurve, {

package/lib-module/Spinner/Spinner.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
 import { selectSystemProps, useScrollBlocking, useThemeTokens } from '@telus-uds/components-base';
+import { Portal } from '@gorhom/portal';
 import SpinnerContent from './SpinnerContent';
 import { htmlAttrs, media } from '../utils';
 import { BACKDROP_OPACITY, BACKDROP_Z_INDEX } from './constants';
@@ -109,20 +110,22 @@ const Spinner = _ref3 => {
 
 
   if (fullScreen) {
-    return /*#__PURE__*/_jsx(FullscreenOverlay, {
-      fullScreenOverLayBackground: fullScreenOverLayBackground,
-      children: /*#__PURE__*/_jsx(SpinnerContainer, {
-        inline: inline,
-        fullScreen: fullScreen,
-        "aria-live": "assertive",
-        ...selectProps(rest),
-        children: /*#__PURE__*/_jsx(SpinnerContent, {
-          label: label,
-          overlay: true,
-          size: size,
-          thickness: thickness,
-          sizeVariant: sizeVariant,
-          isStatic: isStatic
+    return /*#__PURE__*/_jsx(Portal, {
+      children: /*#__PURE__*/_jsx(FullscreenOverlay, {
+        fullScreenOverLayBackground: fullScreenOverLayBackground,
+        children: /*#__PURE__*/_jsx(SpinnerContainer, {
+          inline: inline,
+          fullScreen: fullScreen,
+          "aria-live": "assertive",
+          ...selectProps(rest),
+          children: /*#__PURE__*/_jsx(SpinnerContent, {
+            label: label,
+            overlay: true,
+            size: size,
+            thickness: thickness,
+            sizeVariant: sizeVariant,
+            isStatic: isStatic
+          })
         })
       })
     });

package/lib-module/Table/Cell.js

@@ -86,7 +86,10 @@ const Cell = _ref7 => {
     cellPaddingTop,
     cellPaddingRight,
     cellPaddingLeft,
-    cellPaddingBottom
+    cellPaddingBottom,
+    fontName,
+    fontWeight,
+    fontSize
   } = useThemeTokens('Table', tokens, variant);
   const sharedProps = {
     align,
@@ -98,6 +101,11 @@ const Cell = _ref7 => {
     cellPaddingBottom,
     cellBoxShadowColor
   };
+  const typographyTokens = {
+    fontName,
+    fontWeight,
+    fontSize
+  };
 
   switch (type) {
     case 'heading':
@@ -107,6 +115,7 @@ const Cell = _ref7 => {
         cellHeadingBoxShadowColor: cellHeadingBoxShadowColor,
         ...sharedProps,
         children: /*#__PURE__*/_jsx(Typography, {
+          tokens: typographyTokens,
           variant: {
             size: 'h4'
           },
@@ -120,6 +129,7 @@ const Cell = _ref7 => {
         cellSubheadingBackground: cellSubheadingBackground,
         ...sharedProps,
         children: /*#__PURE__*/_jsx(Typography, {
+          tokens: typographyTokens,
           variant: {
             size: 'h5'
           },
@@ -133,6 +143,7 @@ const Cell = _ref7 => {
         cellRowHeadingBackground: cellRowHeadingBackground,
         ...sharedProps,
         children: /*#__PURE__*/_jsx(Typography, {
+          tokens: typographyTokens,
           variant: {
             size: text === 'small' ? 'h5' : 'h4'
           },
@@ -145,6 +156,9 @@ const Cell = _ref7 => {
         cellBackground: cellBackground,
         ...sharedProps,
         children: /*#__PURE__*/_jsx(Typography, {
+          tokens: {
+            fontSize
+          },
           variant: {
             size: text
           },

package/lib-module/Toast/Toast.js

@@ -16,12 +16,12 @@ const slideDown = property => function (from, 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;}"], 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));
+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"
-})(["display:flex;justify-content:center;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
+})(["display:flex;justify-content:center;align-items:center;background:", ";gap:", ";height:0;overflow:hidden;animation:", ";"], _ref => {
   let {
     containerBackgroundColor
   } = _ref;
@@ -55,10 +55,17 @@ const Toast = _ref3 => {
     animationBackgroundColorBefore,
     animationBackgroundColorAfter,
     animationColorBefore,
-    animationColorAfter,
-    animationFillColorBefore,
-    animationFillColorAfter
-  } = useThemeTokens('Toast', tokens, variant);
+    animationColorAfter
+  } = useThemeTokens('Toast', tokens, variant); // inherit ChevronLink tokens for animation colors
+
+  const {
+    color: chevronDefaultColor
+  } = useThemeTokens('ChevronLink', {}, {});
+  const {
+    color: chevronInverseColor
+  } = useThemeTokens('ChevronLink', {}, {
+    inverse: true
+  });
 
   if (!toast) {
     return null;
@@ -77,8 +84,8 @@ const Toast = _ref3 => {
     animationBackgroundColorAfter: animationBackgroundColorAfter,
     animationColorBefore: animationColorBefore,
     animationColorAfter: animationColorAfter,
-    animationFillColorBefore: animationFillColorBefore,
-    animationFillColorAfter: animationFillColorAfter,
+    animationFillColorBefore: chevronInverseColor,
+    animationFillColorAfter: chevronDefaultColor,
     ...selectProps(rest),
     children: [headline && /*#__PURE__*/_jsx(Typography, {
       variant: {