@telus-uds/components-web 4.17.0 → 4.18.1

package/lib/cjs/NavigationBar/NavigationBar.js

@@ -28,12 +28,28 @@ const Heading = /*#__PURE__*/_styledComponents.default.div.withConfig({
     letterSpacing: 0
   }
 });
+const ContentWrapper = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "NavigationBar__ContentWrapper",
+  componentId: "components-web__sc-1vis1gt-1"
+})(_ref => {
+  let {
+    maxWidth
+  } = _ref;
+  return {
+    width: '100%',
+    ...(maxWidth && {
+      maxWidth,
+      marginLeft: 'auto',
+      marginRight: 'auto'
+    })
+  };
+});
 
 /**
  * NavigationBar can be used to allow customers to consistently navigate across
  * key pages within a specific product line
  */
-const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     accessibilityRole = 'navigation',
     heading,
@@ -46,8 +62,9 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     linkRouterProps,
     tokens,
     variant,
+    contentMaxWidth,
     ...rest
-  } = _ref;
+  } = _ref2;
   const {
     currentValue,
     setValue
@@ -56,29 +73,35 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     initialValue: selectedId,
     onChange
   });
+  const {
+    themeOptions
+  } = (0, _componentsBase.useTheme)();
+  const contentWidthValue = (0, _componentsBase.useResponsiveProp)(contentMaxWidth);
+  const responsiveWidth = (0, _componentsBase.useResponsiveProp)(themeOptions?.contentMaxWidth);
+  const maxWidth = (0, _componentsBase.resolveContentMaxWidth)(contentWidthValue, responsiveWidth);
   (0, _componentsBase.useHash)((hash, event) => {
-    let hashItem = hash && items.find(_ref2 => {
+    let hashItem = hash && items.find(_ref3 => {
       let {
         href
-      } = _ref2;
+      } = _ref3;
       return hash === href;
     });
     if (!hashItem) {
-      const parentItem = items.find(_ref3 => {
+      const parentItem = items.find(_ref4 => {
         let {
           items: parentItems
-        } = _ref3;
-        return parentItems?.some(_ref4 => {
+        } = _ref4;
+        return parentItems?.some(_ref5 => {
           let {
             href
-          } = _ref4;
+          } = _ref5;
           return hash === href;
         });
       });
-      hashItem = parentItem?.items.find(_ref5 => {
+      hashItem = parentItem?.items.find(_ref6 => {
         let {
           href
-        } = _ref5;
+        } = _ref6;
         return hash === href;
       });
     }
@@ -145,7 +168,7 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       }
     };
   }, [openSubMenuId, handleMouseDown]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
+  const stackView = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_componentsBase.StackView, {
     accessibilityRole: accessibilityRole,
     direction: direction,
     ref: navRef,
@@ -163,7 +186,7 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         heading: headingLevel,
         children: heading
       })
-    }), itemsForViewport?.map((_ref6, index) => {
+    }), itemsForViewport?.map((_ref7, index) => {
       let {
         href,
         label,
@@ -174,7 +197,7 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
         linkRouterProps: itemLinkRouterProps,
         items: nestedItems,
         ...itemRest
-      } = _ref6;
+      } = _ref7;
       const itemId = id ?? label;
       const handleClick = event => {
         if (nestedItems) {
@@ -200,9 +223,7 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemComponent, {
         ref: itemRef,
         href: href,
-        onClick: handleClick
-        // TODO: refactor to pass selected ID via context
-        ,
+        onClick: handleClick,
         selectedId: currentValue,
         index: index,
         LinkRouter: ItemLinkRouter,
@@ -226,6 +247,10 @@ const NavigationBar = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       }, itemId);
     })]
   });
+  return maxWidth ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ContentWrapper, {
+    maxWidth: maxWidth,
+    children: stackView
+  }) : stackView;
 });
 NavigationBar.displayName = 'NavigationBar';
 NavigationBar.propTypes = {
@@ -285,6 +310,23 @@ NavigationBar.propTypes = {
   /**
    * Variant configuration
    */
-  variant: _componentsBase.variantProp.propType
+  variant: _componentsBase.variantProp.propType,
+  /**
+   * The maximum width of the content in the NavigationBar.
+   * This prop accepts responsive values for different viewports. If a number is provided,
+   * it will be the max content width for the desired viewport.
+   * - `xs`: 'max' | 'full' | <number>
+   * - `sm`: 'max' | 'full' | <number>
+   * - `md`: 'max' | 'full' | <number>
+   * - `lg`: 'max' | 'full' | <number>
+   * - `xl`: 'max' | 'full' | <number>
+   */
+  contentMaxWidth: _propTypes.default.shape({
+    xl: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
+    lg: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
+    md: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
+    sm: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number]),
+    xs: _propTypes.default.oneOfType([_propTypes.default.oneOf(['max', 'full']), _propTypes.default.number])
+  })
 };
 var _default = exports.default = NavigationBar;

package/lib/cjs/NavigationBar/collapseItems.js

@@ -18,7 +18,7 @@ const collapseItems = (items, selectedId) => {
       label,
       id
     } = _ref;
-    return selectedId === id ?? label;
+    return selectedId === (id ?? label);
   };
 
   // Linter doesn't like for loops, simulate loop that breaks

package/lib/cjs/QuantitySelector/QuantitySelector.js

@@ -40,6 +40,7 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     },
     tokens,
     testID = 'quantity-selector-testid',
+    inactive = false,
     ...rest
   } = _ref;
   const {
@@ -64,8 +65,8 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     initialValue: getValidatedNumber(defaultValue),
     onChange
   });
-  const isDecreaseEnabled = !disabled && !isNumber(minNumber) || number > minNumber;
-  const isIncreaseEnabled = !disabled && !isNumber(maxNumber) || number < maxNumber;
+  const isDecreaseEnabled = (!disabled && !isNumber(minNumber) || number > minNumber) && !inactive;
+  const isIncreaseEnabled = (!disabled && !isNumber(maxNumber) || number < maxNumber) && !inactive;
   const inputValue = isNumber(number) ? number.toString() : '';
   const updateNumber = (newNumber, originalInputEvent) => {
     try {
@@ -85,15 +86,30 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       setError(getCopy('errors').invalidCharacters);
     }
   };
-  const renderLabel = () => label || hint ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.InputLabel, {
-    forId: id,
-    label: label,
-    hint: hint,
-    hintPosition: hintPosition,
-    tooltip: tooltip
-  }) : null;
-  const getTokens = (0, _componentsBase.useThemeTokensCallback)('QuantitySelector', tokens, variant);
+  const getTokens = (0, _componentsBase.useThemeTokensCallback)('QuantitySelector', tokens, {
+    inactive,
+    ...variant
+  });
+  const renderLabelAndSpacer = () => {
+    const {
+      showTopSpace
+    } = getTokens();
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [(label || hint) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.InputLabel, {
+        forId: id,
+        label: label,
+        hint: hint,
+        hintPosition: hintPosition,
+        tooltip: tooltip
+      }), label || hint ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+        space: 2
+      }) : showTopSpace && /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
+        space: 2
+      })]
+    });
+  };
   const renderTextInput = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.TextInput, {
+    inactive: inactive,
     nativeID: id,
     value: inputValue,
     defaultValue: defaultValue,
@@ -138,9 +154,7 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     testID: testID,
     ref: ref,
     ...selectProps(rest),
-    children: [renderLabel(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Spacer, {
-      space: 2
-    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputWrapper, {
+    children: [renderLabelAndSpacer(), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.InputWrapper, {
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.InputField, {
         children: renderTextInput()
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
@@ -152,6 +166,7 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           tokens: tokens,
           variant: {
             decrease: true,
+            inactive,
             ...variant
           },
           accessibilityLabel: getCopy('accessibility').decreaseButton,
@@ -168,6 +183,7 @@ const QuantitySelector = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           tokens: tokens,
           variant: {
             increase: true,
+            inactive,
             ...variant
           }
         })
@@ -262,6 +278,10 @@ QuantitySelector.propTypes = {
   /**
    * Sets `data-testid` attribute on the input field for testing purposes.
    */
-  testID: _propTypes.default.string
+  testID: _propTypes.default.string,
+  /**
+   * If true, the quantity selector will be disabled
+   */
+  inactive: _propTypes.default.bool
 };
 var _default = exports.default = QuantitySelector;

package/lib/cjs/Testimonial/Testimonial.js

@@ -226,7 +226,8 @@ Testimonial.propTypes = {
   testimonialStyle: _propTypes.default.oneOf(['large', 'heading']),
   /**
    * Whether to show or not dividers at the top and the bottom of the testimonial
-  showDivider: PropTypes.bool,
+   */
+  showDivider: _propTypes.default.bool,
   /**
    * The src attribute for the Image component or custom JSX content to render instead
    */

package/lib/cjs/shared/FullBleedContent/FullBleedContent.js

@@ -10,6 +10,10 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _ResponsiveImage = _interopRequireDefault(require("../../ResponsiveImage"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+// Interactive overlay opacity constants
+const OVERLAY_OPACITY_PRESSED = 0.2;
+const OVERLAY_OPACITY_HOVER = 0.1;
+const OVERLAY_OPACITY_DEFAULT = 0;
 const selectFullBleedContentProps = _ref => {
   let {
     alt,
@@ -48,9 +52,11 @@ const FullBleedContentContainer = /*#__PURE__*/_styledComponents.default.div.wit
     borderTopLeftRadius,
     borderTopRightRadius,
     opacity,
-    transform
+    transform,
+    hasCardState
   } = _ref2;
   return {
+    position: hasCardState ? 'relative' : 'static',
     overflow: 'hidden',
     borderBottomLeftRadius,
     borderBottomRightRadius,
@@ -61,24 +67,56 @@ const FullBleedContentContainer = /*#__PURE__*/_styledComponents.default.div.wit
     transition: 'opacity 0.2s ease, transform 0.2s ease'
   };
 });
+const InteractiveOverlay = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "FullBleedContent__InteractiveOverlay",
+  componentId: "components-web__sc-1130ea5-1"
+})(_ref3 => {
+  let {
+    overlayOpacity,
+    overlayBackgroundColor
+  } = _ref3;
+  return {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: overlayBackgroundColor || 'rgba(0, 0, 0, 0.1)',
+    opacity: overlayOpacity || 0,
+    pointerEvents: 'none',
+    transition: 'opacity 0.2s ease',
+    zIndex: 1
+  };
+});
 
 /**
  * Full bleed content component can accept either a single source,
  * a number of sources corresponding to the `ResponsiveImage` component API,
  * or a custom component.
  */
-const FullBleedContent = _ref3 => {
+const FullBleedContent = _ref4 => {
   let {
     borderRadius,
     content,
     cardState,
     ...rest
-  } = _ref3;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(FullBleedContentContainer, {
+  } = _ref4;
+  let overlayOpacity = OVERLAY_OPACITY_DEFAULT;
+  if (cardState) {
+    if (cardState.pressed) {
+      overlayOpacity = OVERLAY_OPACITY_PRESSED;
+    } else if (cardState.hover) {
+      overlayOpacity = OVERLAY_OPACITY_HOVER;
+    }
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(FullBleedContentContainer, {
     ...borderRadius,
-    children: content ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveImage.default, {
+    hasCardState: !!cardState,
+    children: [content ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveImage.default, {
       ...selectFullBleedContentProps(rest)
-    })
+    }), cardState && /*#__PURE__*/(0, _jsxRuntime.jsx)(InteractiveOverlay, {
+      overlayOpacity: overlayOpacity
+    })]
   });
 };
 FullBleedContent.propTypes = {
@@ -96,10 +134,10 @@ FullBleedContent.propTypes = {
    */
   content: _propTypes.default.node,
   /**
-   * Card state object containing interactive states (hovered, pressed, focused).
+   * Card state object containing interactive states (hover, pressed, focused).
    */
   cardState: _propTypes.default.shape({
-    hovered: _propTypes.default.bool,
+    hover: _propTypes.default.bool,
     pressed: _propTypes.default.bool,
     focused: _propTypes.default.bool
   }),