@telus-uds/components-web 1.10.0 → 1.12.0

package/lib/NavigationBar/collapseItems.js

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * Make a list of items into a one-item list where all items are nested under the first item
+ */
+const collapseItems = (items, selectedId) => {
+  if (!(items !== null && items !== void 0 && items.length)) return items; // Give the root item the label of the current active link
+  // (or the first item if for some reason there's no match on the selectedId)
+
+  let rootLabel = items[0].label;
+
+  const isSelected = _ref => {
+    let {
+      label,
+      id
+    } = _ref;
+    return selectedId === id ?? label;
+  }; // Linter doesn't like for loops, simulate loop that breaks
+
+
+  items.some(item => {
+    var _item$items;
+
+    if (isSelected(item)) {
+      rootLabel = item.label;
+      return true; // break
+    }
+
+    const nestedMatch = (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.find(isSelected);
+
+    if (nestedMatch) {
+      rootLabel = nestedMatch.label;
+      return true; // break
+    }
+
+    return false; // continue
+  });
+  return [{
+    id: 'navigation-bar-root',
+    label: rootLabel,
+    items
+  }];
+};
+
+var _default = collapseItems;
+exports.default = _default;

package/lib/NavigationBar/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _NavigationBar = _interopRequireDefault(require("./NavigationBar"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _NavigationBar.default;
+exports.default = _default;

package/lib/PriceLockup/PriceLockup.js

@@ -93,19 +93,50 @@ const RateTextContainer = /*#__PURE__*/_styledComponents.default.div.withConfig(
 const StrikeThroughContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
   displayName: "PriceLockup__StrikeThroughContainer",
   componentId: "components-web__sc-1x6duay-7"
-})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;height:", ";background:", ";position:absolute;}"], _ref7 => {
+})(["display:flex;position:relative;align-items:center;::before{content:'';width:100%;top:", ";height:", ";background:", ";position:absolute;}"], _ref7 => {
   let {
-    strikeThroughHeight
+    strikeThroughPosition
   } = _ref7;
-  return strikeThroughHeight;
+  return `${strikeThroughPosition}px`;
 }, _ref8 => {
   let {
-    strikeThroughBackground
+    strikeThroughHeight
   } = _ref8;
-  return strikeThroughBackground;
+  return `${strikeThroughHeight}px`;
+}, _ref9 => {
+  let {
+    strikeThroughColor
+  } = _ref9;
+  return strikeThroughColor;
 });
 
-const PriceLockup = _ref9 => {
+const selectFootnoteLinkStyles = _ref10 => {
+  let {
+    footnoteLinkColor,
+    footnoteLinkFontName,
+    footnoteLinkFontWeight
+  } = _ref10;
+  return {
+    color: footnoteLinkColor,
+    fontName: footnoteLinkFontName,
+    fontWeight: footnoteLinkFontWeight
+  };
+};
+
+const selectStrikeThroughTokens = _ref11 => {
+  let {
+    strikeThroughPosition,
+    strikeThroughHeight,
+    strikeThroughColor
+  } = _ref11;
+  return {
+    strikeThroughHeight,
+    strikeThroughPosition,
+    strikeThroughColor
+  };
+};
+
+const PriceLockup = _ref12 => {
   let {
     size = 'medium',
     signDirection = 'left',
@@ -121,7 +152,8 @@ const PriceLockup = _ref9 => {
     tokens: priceLockupTokens,
     variant = {},
     ...rest
-  } = _ref9;
+  } = _ref12;
+  const viewport = (0, _componentsBase.useViewport)();
   const {
     footnoteMarginTop,
     footnoteGap,
@@ -129,11 +161,17 @@ const PriceLockup = _ref9 => {
     priceMarginBottom,
     bottomLinksMarginLeft,
     topTextMarginBottom,
-    strikeThroughHeight,
-    strikeThroughBackground,
     fontColor,
-    dividerColor
-  } = (0, _componentsBase.useThemeTokens)('PriceLockup', priceLockupTokens, variant);
+    dividerColor,
+    footnoteLinkFontSize,
+    ...themeTokens
+  } = (0, _componentsBase.useThemeTokens)('PriceLockup', priceLockupTokens, { ...variant,
+    size
+  }, {
+    viewport,
+    strikeThrough
+  });
+  const typographyTokens = (0, _tokens.default)(themeTokens);
   const priceString = String(price);
   const lastDotPosition = priceString.lastIndexOf('.');
   const lastCommaPosition = priceString.lastIndexOf(',');
@@ -143,32 +181,31 @@ const PriceLockup = _ref9 => {
   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 color = strikeThrough ? strikeThroughBackground : fontColor;
 
   const renderTypography = (value, tokens) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
     tokens: { ...tokens,
-      color
+      color: fontColor
     },
     children: value
   });
 
-  const renderCurrencySymbol = () => renderTypography(`${currencySymbol}`, _tokens.default.dollarSign[size]);
+  const renderCurrencySymbol = () => renderTypography(`${currencySymbol}`, typographyTokens.dollarSign);
 
   const renderFootnoteLinks = () => footnoteLinks && footnoteLinks.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_FootnoteLink.default, {
+    fontSize: footnoteLinkFontSize,
+    tokens: selectFootnoteLinkStyles(themeTokens),
     number: footnoteLinks,
     onClick: onClickFootnote
   }) : null;
 
   const renderAmount = () => {
-    const amountComponent = renderTypography(amount, _tokens.default.amount[size]);
+    const amountComponent = renderTypography(amount, typographyTokens.amount);
 
     if (strikeThrough) {
       return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.A11yText, {
           text: a11yText
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StrikeThroughContainer, {
-          strikeThroughHeight: `${strikeThroughHeight}px`,
-          strikeThroughBackground: strikeThroughBackground,
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(StrikeThroughContainer, { ...selectStrikeThroughTokens(themeTokens),
           children: amountComponent
         })]
       });
@@ -180,10 +217,10 @@ const PriceLockup = _ref9 => {
   const renderPrice = () => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceContainer, {
       priceMarginBottom: `${priceMarginBottom}px`,
-      children: [signDirection === 'left' && renderCurrencySymbol(), renderAmount(), cents && renderTypography(`${separator}${cents}`, _tokens.default.cents[size]), signDirection === 'right' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [signDirection === 'left' && renderCurrencySymbol(), renderAmount(), cents && renderTypography(`${separator}${cents}`, typographyTokens.cents), signDirection === 'right' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: ["\xA0", renderCurrencySymbol()]
       }), rateText && /*#__PURE__*/(0, _jsxRuntime.jsx)(RateTextContainer, {
-        children: renderTypography(rateText, _tokens.default.rate[size])
+        children: renderTypography(rateText, typographyTokens.rate)
       }), !bottomText && footnoteLinks.length <= 3 && /*#__PURE__*/(0, _jsxRuntime.jsx)(BottomLinksContainer, {
         bottomLinksMarginLeft: `${bottomLinksMarginLeft}px`,
         children: renderFootnoteLinks()
@@ -197,7 +234,7 @@ const PriceLockup = _ref9 => {
       footnoteGap: `${footnoteGap}px`,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(BottomTextContainer, {
         bottomTextMarginTop: `${bottomTextMarginTop}px`,
-        children: renderTypography(bottomText, _tokens.default.bottomText[size])
+        children: renderTypography(bottomText, typographyTokens.bottomText)
       }), footnoteLinks.length <= 3 && renderFootnoteLinks()]
     }), footnoteLinks.length > 3 && renderFootnoteLinks()]
   });
@@ -209,12 +246,12 @@ const PriceLockup = _ref9 => {
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(PriceLockupContainer, { ...selectProps(rest),
     children: [topText && /*#__PURE__*/(0, _jsxRuntime.jsx)(TopTextContainer, {
       topTextMarginBottom: `${topTextMarginBottom}px`,
-      children: renderTypography(topText, _tokens.default.topText[size])
+      children: renderTypography(topText, typographyTokens.topText)
     }), renderPrice(), bottomText && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Divider, {
       testID: "price-lockup-divider",
       role: "separator",
       tokens: {
-        color: dividerColor
+        color: dividerColor ?? 'rgba(0, 0, 0, 0)'
       }
     }), bottomText && renderFootnoteContent()]
   });

package/lib/PriceLockup/tokens.js

@@ -5,127 +5,60 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _palette = _interopRequireDefault(require("@telus-uds/palette-allium/build/rn/palette"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const {
-  fontSize: {
-    size14,
-    size16,
-    size20,
-    size28,
-    size36,
-    size40,
-    size64
-  },
-  lineHeight: {
-    ratio1to1,
-    ratio10to7,
-    ratio3to2,
-    ratio8to5,
-    ratio5to4,
-    ratio6to5,
-    ratio9to8,
-    ratio4to3,
-    ratio8to7
-  },
-  letterSpacing: {
-    condensed
-  }
-} = _palette.default;
-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
+// map typography tokens accordenly
+var _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
     },
-    large: {
-      fontSize: size36,
-      lineHeight: ratio9to8
-    }
-  },
-  // TODO - fontWeight should have its own const on palette
-  amount: {
-    small: {
-      fontSize: size28,
-      lineHeight: ratio1to1,
-      letterSpacing: condensed,
-      fontWeight: '300'
+    dollarSign: {
+      fontSize: currencySymbolFontSize,
+      lineHeight: currencySymbolLineHeight,
+      fontWeight: currencySymbolFontWeight
     },
-    medium: {
-      fontSize: size40,
-      lineHeight: ratio1to1,
-      letterSpacing: condensed,
-      fontWeight: '300'
+    amount: {
+      color: fontColor,
+      fontSize: amountFontSize,
+      lineHeight: amountLineHeight,
+      letterSpacing: amountLetterSpacing,
+      fontWeight: amountFontWeight
     },
-    large: {
-      fontSize: size64,
-      lineHeight: ratio1to1,
-      letterSpacing: condensed,
-      fontWeight: '300'
-    }
-  },
-  cents: {
-    small: {
-      fontSize: size16,
-      lineHeight: ratio4to3
+    cents: {
+      fontSize: centsFontSize,
+      lineHeight: centsLineHeight,
+      fontWeight: centsFontWeight
     },
-    medium: {
-      fontSize: size20,
-      lineHeight: ratio6to5
+    rate: {
+      fontSize: rateFontSize,
+      lineHeight: rateLineHeight,
+      fontWeight: rateFontWeight
     },
-    large: {
-      fontSize: size36,
-      lineHeight: ratio9to8
+    bottomText: {
+      fontSize: bottomTextFontSize,
+      lineHeight: bottomTextLineHeight
     }
-  },
-  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
-    }
-  }
+  };
 };
-var _default = typographyTokens;
+
 exports.default = _default;

package/lib/Progress/ProgressBar.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// Passes React Native-oriented system props through UDS Progress
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_componentsBase.a11yProps, _componentsBase.viewProps]);
+const {
+  Bar: ProgressBarBase
+} = _componentsBase.Progress;
+
+const Gradient = /*#__PURE__*/_styledComponents.default.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 = (0, _componentsBase.useThemeTokens)('ProgressBar', tokens, variant);
+  const selectedProps = selectProps(rest);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ProgressBarBase, {
+    percentage: percentage,
+    tokens: tokens,
+    variant: variant,
+    ...selectedProps,
+    children: themeTokens.gradient && /*#__PURE__*/(0, _jsxRuntime.jsx)(Gradient, { ...themeTokens,
+      percentage: percentage
+    })
+  });
+};
+
+ProgressBar.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Percentage of completion.
+   */
+  percentage: _propTypes.default.number,
+
+  /**
+   * ProgressBar tokens.
+   */
+  tokens: (0, _componentsBase.getTokensPropType)('ProgressBar'),
+
+  /**
+   * ProgressBar variant.
+   */
+  variant: _componentsBase.variantProp.propType
+};
+var _default = ProgressBar;
+exports.default = _default;

package/lib/Progress/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _componentsBase = require("@telus-uds/components-base");
+
+var _ProgressBar = _interopRequireDefault(require("./ProgressBar"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_componentsBase.Progress.Bar = _ProgressBar.default;
+var _default = _componentsBase.Progress;
+exports.default = _default;

package/lib/Ribbon/Ribbon.js

@@ -45,7 +45,7 @@ const RibbonWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
 const RibbonContainer = /*#__PURE__*/_styledComponents.default.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;
@@ -66,54 +66,64 @@ const RibbonContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
     shouldWrap
   } = _ref7;
   return shouldWrap && boxShadow;
+}, _ref8 => {
+  let {
+    borderRadiusBottomLeft
+  } = _ref8;
+  return borderRadiusBottomLeft;
+}, _ref9 => {
+  let {
+    borderRadiusBottomRight
+  } = _ref9;
+  return borderRadiusBottomRight;
 });
 
 const RibbonCurve = /*#__PURE__*/_styledComponents.default.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,
@@ -122,7 +132,7 @@ const Ribbon = _ref16 => {
     top,
     variant = {},
     ...rest
-  } = _ref16;
+  } = _ref18;
   const {
     backgroundColor,
     borderRadius,
@@ -143,19 +153,25 @@ const Ribbon = _ref16 => {
     paddingLeft,
     paddingRight,
     paddingTop,
-    gradient
-  } = (0, _componentsBase.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
+  } = (0, _componentsBase.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__*/(0, _jsxRuntime.jsxs)(RibbonWrapper, {
     left: left,
     top: top,
@@ -167,12 +183,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__*/(0, _jsxRuntime.jsx)(_componentsBase.Typography, {
         variant: {
           size: 'micro',
           bold: true,
           inverse: true
         },
+        tokens: {
+          color: fontColor
+        },
         children: children
       })
     }), shouldWrap && /*#__PURE__*/(0, _jsxRuntime.jsx)(RibbonCurve, {