@telus-uds/components-base 1.54.0 → 1.55.0

package/CHANGELOG.md

@@ -1,12 +1,24 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 07 Jul 2023 19:17:02 GMT and should not be manually modified.
+This log was last generated on Fri, 14 Jul 2023 19:38:21 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.55.0
+
+Fri, 14 Jul 2023 19:38:21 GMT
+
+### Minor changes
+
+- Refactored IconButton to accomodate QuantitySelector standardization (wlsdud194@hotmail.com)
+- Fixed test data and introduced background color token to base component. (akshay.pandey1@telus.com)
+- Added use of CarouselThumbnail  (kyle.king2@telus.com)
+- Bump @telus-uds/system-constants to v1.3.0
+- Bump @telus-uds/system-theme-tokens to v2.38.0
+
 ## 1.54.0
 
-Fri, 07 Jul 2023 19:17:02 GMT
+Fri, 07 Jul 2023 19:26:41 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -172,17 +172,40 @@
         "itemPadding": "size"
       },
       "QuantitySelector": {
-        "leftIcon": "icon",
-        "rightIcon": "icon",
-        "iconSize": "size",
-        "borderColor": "color",
         "inputBorderColor": "color",
         "inputBackgroundColor": "color",
-        "inputBorderWidth": "size",
+        "inputBorderWidth": "border",
         "padding": "size",
-        "backgroundColor": "color",
+        "paddingLeft": "size",
+        "paddingRight": "size",
+        "paddingTop": "size",
+        "paddingBottom": "size",
         "textColor": "color",
-        "iconColor": "color"
+        "inputWidth": "size",
+        "lineHeight": "lineHeight",
+        "fontSize": "fontSize"
+      },
+      "QuantitySelectorSideButton": {
+        "borderRadius": "radius",
+        "borderTopLeftRadius": "radius",
+        "borderTopRightRadius": "radius",
+        "borderBottomLeftRadius": "radius",
+        "borderBottomRightRadius": "radius",
+        "borderColor": "color",
+        "borderWidth": "border",
+        "borderLeftWidth": "border",
+        "borderRightWidth": "border",
+        "borderTopWidth": "border",
+        "borderBottomWidth": "border",
+        "padding": "size",
+        "paddingLeft": "size",
+        "paddingRight": "size",
+        "paddingTop": "size",
+        "paddingBottom": "size",
+        "iconColor": "color",
+        "iconSize": "size",
+        "icon": "icon",
+        "backgroundColor": "color"
       },
       "Footnote": {
         "footnoteBackground": "color",
@@ -270,6 +293,7 @@
       },
       "Badge": {
         "fontWeight": "fontWeight",
+        "fontSize": "fontSize",
         "fontName": "fontName",
         "backgroundColor": "color",
         "borderColor": "color",
@@ -465,15 +489,19 @@
         "showPanelTabs": "show",
         "spaceBetweenSlideAndPreviousNextNavigation": "size",
         "spaceBetweenSlideAndPanelNavigation": "size",
-        "thumbnailBorderColor": "color",
-        "thumbnailBorderRadius": "radius",
-        "thumbnailBorderWidth": "border",
-        "thumbnailContainerPaddingTop": "size",
-        "thumbnailMargin": "size",
-        "thumbnailPadding": "size",
-        "thumbnailSelectedBorderColor": "color",
-        "thumbnailSelectedBorderWidth": "border",
-        "thumbnailSize": "size"
+        "stepTrackerCurrentBackgroundColor": "color"
+      },
+      "CarouselThumbnail": {
+        "alignItems": "flexAlign",
+        "borderColor": "color",
+        "borderRadius": "radius",
+        "borderWidth": "border",
+        "containerPaddingTop": "size",
+        "margin": "size",
+        "padding": "size",
+        "selectedBorderColor": "color",
+        "selectedBorderWidth": "border",
+        "size": "size"
       },
       "CarouselTabsPanelItem": {
         "paddingLeft": "size",
@@ -739,6 +767,14 @@
         "icon": "icon",
         "backgroundColor": "color",
         "borderRadius": "radius",
+        "borderTopLeftRadius": "radius",
+        "borderTopRightRadius": "radius",
+        "borderBottomLeftRadius": "radius",
+        "borderBottomRightRadius": "radius",
+        "borderTopWidth": "border",
+        "borderBottomWidth": "border",
+        "borderLeftWidth": "border",
+        "borderRightWidth": "border",
         "borderColor": "color",
         "borderWidth": "border",
         "outerBorderWidth": "border",
@@ -1525,7 +1561,24 @@
         "figcaptionGap": "size",
         "textColor": "color",
         "imageSize": "size",
-        "icon": "icon"
+        "icon": "icon",
+        "iconFr": "icon",
+        "testimonialFontSizeLarge": "fontSize",
+        "testimonialLineHeightLarge": "lineHeight",
+        "testimonialFontNameLarge": "fontName",
+        "testimonialFontWeightLarge": "fontWeight",
+        "testimonialFontSizeHeading": "fontSize",
+        "testimonialLineHeightHeading": "lineHeight",
+        "testimonialFontNameHeading": "fontName",
+        "testimonialFontWeightHeading": "fontWeight",
+        "authorFontSize": "fontSize",
+        "authorLineHeight": "lineHeight",
+        "authorFontName": "fontName",
+        "authorFontWeight": "fontWeight",
+        "additionalFontSize": "fontSize",
+        "additionalLineHeight": "lineHeight",
+        "additionalFontName": "fontName",
+        "additionalFontWeight": "fontWeight"
       },
       "TermsAndConditions": {
         "contentPaddingBottom": "size",
@@ -1721,6 +1774,7 @@
       },
       "TooltipButton": {
         "outerBorderColor": "color",
+        "backgroundColor": "color",
         "outerBorderWidth": "border",
         "outerBorderGap": "size",
         "borderRadius": "radius",
@@ -2023,6 +2077,38 @@
           "type": "state"
         }
       },
+      "CarouselThumbnail": {
+        "focus": {
+          "description": "Currently only web has good support for this. Applies when an interactive component's focus handler is triggered, such as keyboard tabbing or selection.",
+          "values": [
+            true,
+            false
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "hover": {
+          "description": "Currently web only. Applies when an interactive component's hover handler is triggered, such as on mouseover.",
+          "values": [
+            true,
+            false
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
+        },
+        "pressed": {
+          "description": "Applies while an interactive component is being physically pressed. Most visible on touchscreen taps; in React Native Web, this is visible on web mouse clicks only if the pressable is held down.",
+          "values": [
+            true,
+            false
+          ],
+          "type": "state"
+        }
+      },
       "Checkbox": {
         "checked": {
           "description": "Corresponds to a selected state for a checkbox or radio",
@@ -2161,7 +2247,8 @@
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [
-            true
+            true,
+            false
           ],
           "type": "state"
         }
@@ -2183,7 +2270,8 @@
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [
-            true
+            true,
+            false
           ],
           "type": "state"
         }
@@ -2336,7 +2424,8 @@
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [
-            true
+            true,
+            false
           ],
           "type": "state"
         },
@@ -2433,7 +2522,8 @@
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [
-            true
+            true,
+            false
           ],
           "type": "state"
         },
@@ -2886,7 +2976,8 @@
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [
-            true
+            true,
+            false
           ],
           "type": "state"
         },
@@ -2917,7 +3008,8 @@
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [
-            true
+            true,
+            false
           ],
           "type": "state"
         }
@@ -3099,7 +3191,8 @@
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [
-            true
+            true,
+            false
           ],
           "type": "state"
         }
@@ -3262,9 +3355,11 @@
       },
       "border": {
         "default": 0,
-        "nullable": false,
+        "nullable": true,
+        "type": "undefined|null",
         "values": {
-          "zero": 0
+          "zero": 0,
+          "none": null
         }
       },
       "color": {
@@ -3281,6 +3376,7 @@
         "nullable": true,
         "type": "undefined|null",
         "values": {
+          "none": null,
           "zero": 0,
           "round": 99999999999999
         }
@@ -6232,6 +6328,14 @@
                 "icon": "icon",
                 "backgroundColor": "color",
                 "borderRadius": "radius",
+                "borderTopLeftRadius": "radius",
+                "borderTopRightRadius": "radius",
+                "borderBottomLeftRadius": "radius",
+                "borderBottomRightRadius": "radius",
+                "borderTopWidth": "border",
+                "borderBottomWidth": "border",
+                "borderLeftWidth": "border",
+                "borderRightWidth": "border",
                 "borderColor": "color",
                 "borderWidth": "border",
                 "outerBorderWidth": "border",
@@ -6253,7 +6357,7 @@
             "type": {
               "name": "elementType"
             },
-            "required": true,
+            "required": false,
             "description": "Defines the icon to be rendered"
           },
           "href": {
@@ -10885,6 +10989,7 @@
               "name": "custom",
               "raw": {
                 "outerBorderColor": "color",
+                "backgroundColor": "color",
                 "outerBorderWidth": "border",
                 "outerBorderGap": "size",
                 "borderRadius": "radius",
@@ -12315,15 +12420,7 @@
                 "showPanelTabs": "show",
                 "spaceBetweenSlideAndPreviousNextNavigation": "size",
                 "spaceBetweenSlideAndPanelNavigation": "size",
-                "thumbnailBorderColor": "color",
-                "thumbnailBorderRadius": "radius",
-                "thumbnailBorderWidth": "border",
-                "thumbnailContainerPaddingTop": "size",
-                "thumbnailMargin": "size",
-                "thumbnailPadding": "size",
-                "thumbnailSelectedBorderColor": "color",
-                "thumbnailSelectedBorderWidth": "border",
-                "thumbnailSize": "size"
+                "stepTrackerCurrentBackgroundColor": "color"
               }
             },
             "required": false,
@@ -12684,15 +12781,7 @@
                 "showPanelTabs": "show",
                 "spaceBetweenSlideAndPreviousNextNavigation": "size",
                 "spaceBetweenSlideAndPanelNavigation": "size",
-                "thumbnailBorderColor": "color",
-                "thumbnailBorderRadius": "radius",
-                "thumbnailBorderWidth": "border",
-                "thumbnailContainerPaddingTop": "size",
-                "thumbnailMargin": "size",
-                "thumbnailPadding": "size",
-                "thumbnailSelectedBorderColor": "color",
-                "thumbnailSelectedBorderWidth": "border",
-                "thumbnailSize": "size"
+                "stepTrackerCurrentBackgroundColor": "color"
               }
             },
             "required": false,
@@ -13098,15 +13187,7 @@
                 "showPanelTabs": "show",
                 "spaceBetweenSlideAndPreviousNextNavigation": "size",
                 "spaceBetweenSlideAndPanelNavigation": "size",
-                "thumbnailBorderColor": "color",
-                "thumbnailBorderRadius": "radius",
-                "thumbnailBorderWidth": "border",
-                "thumbnailContainerPaddingTop": "size",
-                "thumbnailMargin": "size",
-                "thumbnailPadding": "size",
-                "thumbnailSelectedBorderColor": "color",
-                "thumbnailSelectedBorderWidth": "border",
-                "thumbnailSize": "size"
+                "stepTrackerCurrentBackgroundColor": "color"
               }
             },
             "required": false,

package/lib/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -27,7 +27,10 @@ const CarouselStepTracker = _ref => {
     activeIndex,
     totalItems,
     getCopyWithPlaceholders,
-    themeTokens
+    themeTokens: {
+      stepTrackerCurrentBackgroundColor,
+      ...themeTokens
+    }
   } = (0, _CarouselContext.useCarousel)();
   const stackViewTokens = {
     justifyContent: 'center'
@@ -35,7 +38,8 @@ const CarouselStepTracker = _ref => {
   const stepTrackerTokens = {
     showStepLabel: false,
     showStepTrackerLabel: true,
-    knobCompletedBackgroundColor: 'none',
+    // TODO: StepTracker 'isComplete'/'isCurrent' is incorrect, see line StepTracker/Step.jsx line 63, refactor incorrect values and remove this
+    knobCompletedBackgroundColor: stepTrackerCurrentBackgroundColor ?? 'none',
     connectorCompletedColor: 'none',
     connectorColor: 'none',
     containerPaddingTop: themeTokens.spaceBetweenSlideAndPanelNavigation

package/lib/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -39,19 +39,20 @@ const CarouselTabsPanel = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   } = (0, _CarouselContext.useCarousel)();
   const nextFocusRef = (0, _react.useRef)();
   const firstTabRef = (0, _react.useRef)();
-  const [isInverse, setIsInverse] = (0, _react.useState)(false); // TODO: figure out a better cross-brand way to specify subcomponent variants.
-  // For now, this picks an Allium variant, and does nothing in brands that lack it.
-  // See similar comment in Carousel and https://github.com/telus/universal-design-system/issues/1549
-
-  const dividerVariant = {
-    decorative: true
-  };
+  const [isInverse, setIsInverse] = (0, _react.useState)(false);
   const lastTabSelected = activeIndex === items.length - 1; // Get current select tab style
 
   (0, _react.useEffect)(() => {
     const [selectedVariantIsInverse] = items.filter((_, index) => index === activeIndex);
     setIsInverse(selectedVariantIsInverse === null || selectedVariantIsInverse === void 0 ? void 0 : selectedVariantIsInverse.inverse);
-  }, [items, activeIndex]);
+  }, [items, activeIndex]); // TODO: figure out a better cross-brand way to specify subcomponent variants.
+  // For now, this picks an Allium variant, and does nothing in brands that lack it.
+  // See similar comment in Carousel and https://github.com/telus/universal-design-system/issues/1549
+
+  const dividerVariant = {
+    decorative: true,
+    inverse: isInverse
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
     style: selectTabPanelStyle(),
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {

package/lib/Carousel/CarouselThumbnail.js

@@ -15,29 +15,52 @@ var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/I
 
 var _CarouselContext = require("./CarouselContext");
 
+var _ThemeProvider = require("../ThemeProvider");
+
+var _ViewportProvider = require("../ViewportProvider");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+const selectPressableTokens = _ref => {
+  let {
+    borderColor,
+    borderRadius,
+    borderWidth,
+    margin,
+    padding
+  } = _ref;
+  return {
+    borderColor,
+    borderRadius,
+    borderWidth,
+    margin,
+    padding
+  };
+};
 /**
  * `Carousel.Thumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
  * only top-level component passed to the `Carousel`
  */
-const CarouselThumbnail = _ref => {
+
+
+const CarouselThumbnail = _ref2 => {
   let {
     accessibilityLabel,
     alt,
     index,
     src
-  } = _ref;
+  } = _ref2;
   const {
     activeIndex,
     itemLabel,
     totalItems,
     getCopyWithPlaceholders,
-    goTo,
-    themeTokens
+    goTo
   } = (0, _CarouselContext.useCarousel)();
+  const getThumbnailTokens = (0, _ThemeProvider.useThemeTokensCallback)('CarouselThumbnail');
+  const viewport = (0, _ViewportProvider.useViewport)();
   const thumbnailTitle = alt ?? getCopyWithPlaceholders('stepTrackerLabel').replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, index).replace(/%\{stepCount\}/g, totalItems);
 
   const handlePress = () => goTo(index);
@@ -48,37 +71,41 @@ const CarouselThumbnail = _ref => {
   };
 
   const {
-    thumbnailBorderColor,
-    thumbnailBorderRadius,
-    thumbnailBorderWidth,
-    thumbnailMargin,
-    thumbnailPadding,
-    thumbnailSelectedBorderColor,
-    thumbnailSelectedBorderWidth,
-    thumbnailSize
-  } = themeTokens;
+    borderWidth,
+    padding,
+    selectedBorderColor,
+    selectedBorderWidth,
+    size
+  } = getThumbnailTokens({
+    viewport
+  });
   const styles = {
-    pressable: {
-      borderColor: thumbnailBorderColor,
-      borderRadius: thumbnailBorderRadius,
-      borderWidth: thumbnailBorderWidth,
-      margin: thumbnailMargin,
-      padding: thumbnailPadding
-    },
     image: {
-      height: thumbnailSize,
-      width: thumbnailSize
+      height: size,
+      width: size
     },
     selected: {
-      borderColor: thumbnailSelectedBorderColor,
-      borderWidth: thumbnailSelectedBorderWidth,
-      padding: thumbnailPadding - thumbnailSelectedBorderWidth + thumbnailBorderWidth
+      borderColor: selectedBorderColor,
+      borderWidth: selectedBorderWidth,
+      padding: padding - selectedBorderWidth + borderWidth
     }
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     onKeyDown: handleKeyDown,
     onPress: handlePress,
-    style: [styles.pressable, index === activeIndex && styles.selected],
+    style: _ref3 => {
+      let {
+        hovered,
+        pressed,
+        focused
+      } = _ref3;
+      const pressableStyles = selectPressableTokens(getThumbnailTokens({
+        hover: hovered,
+        pressed,
+        focus: focused
+      }));
+      return [pressableStyles, index === activeIndex && styles.selected];
+    },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
       accessibilityIgnoresInvertColors: true,
       accessibilityLabel: accessibilityLabel ?? alt,

package/lib/Carousel/CarouselThumbnailNavigation.js

@@ -17,6 +17,10 @@ var _CarouselThumbnail = _interopRequireDefault(require("./CarouselThumbnail"));
 
 var _StackView = require("../StackView");
 
+var _ThemeProvider = require("../ThemeProvider");
+
+var _ViewportProvider = require("../ViewportProvider");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -29,9 +33,14 @@ const CarouselThumbnailNavigation = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
   let {
     thumbnails = []
   } = _ref;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    alignItems
+  } = (0, _ThemeProvider.useThemeTokens)('CarouselThumbnail', {}, {
+    viewport
+  });
   const {
-    totalItems,
-    themeTokens
+    totalItems
   } = (0, _CarouselContext.useCarousel)();
 
   if (thumbnails.length !== totalItems) {
@@ -39,15 +48,15 @@ const CarouselThumbnailNavigation = /*#__PURE__*/(0, _react.forwardRef)((_ref, r
   }
 
   const {
-    thumbnailContainerPaddingTop,
-    thumbnailMargin
-  } = themeTokens;
+    containerPaddingTop: thumbnailContainerPaddingTop,
+    margin: thumbnailMargin
+  } = (0, _ThemeProvider.useThemeTokens)('CarouselThumbnail');
   const stackWrapTokens = {
     justifyContent: 'flex-start'
   };
   const containerStyles = {
     justifyContent: 'center',
-    alignItems: 'center',
+    alignItems,
     paddingTop: thumbnailContainerPaddingTop - thumbnailMargin
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {

package/lib/IconButton/IconButton.js

@@ -36,10 +36,14 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 const selectOuterStyle = _ref => {
   let {
     backgroundColor,
-    borderRadius,
     outerBorderWidth,
     outerBorderColor,
     outerBorderGap,
+    borderRadius,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
     shadow
   } = _ref;
   return [{
@@ -47,6 +51,10 @@ const selectOuterStyle = _ref => {
     ...(0, _ThemeProvider.applyShadowToken)(shadow),
     ...(0, _ThemeProvider.applyOuterBorder)({
       borderRadius,
+      borderTopLeftRadius,
+      borderTopRightRadius,
+      borderBottomLeftRadius,
+      borderBottomRightRadius,
       outerBorderWidth,
       outerBorderColor,
       outerBorderGap
@@ -60,20 +68,46 @@ const selectOuterStyle = _ref => {
   }, staticStyles.outer];
 };
 
+const calculatePadding = (padding, borderWidth) => padding && Math.max(0, padding - borderWidth); // Stable size as border changes
+
+
 const selectInnerStyle = _ref2 => {
   let {
     borderColor,
-    borderWidth = 0,
+    borderWidth,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
     borderRadius,
-    padding = 0
+    padding = 0,
+    borderTopWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom
   } = _ref2;
   return {
     // Inner borders animate with the icon and should be treated like a themable feature of the icon
     borderColor,
     borderRadius,
     borderWidth,
-    padding: Math.max(0, padding - borderWidth) // Stable size as border changes
-
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    borderTopWidth,
+    borderRightWidth,
+    borderBottomWidth,
+    borderLeftWidth,
+    padding: calculatePadding(padding, borderWidth),
+    paddingLeft: calculatePadding(paddingLeft, borderLeftWidth),
+    paddingRight: calculatePadding(paddingRight, borderRightWidth),
+    paddingTop: calculatePadding(paddingTop, borderTopWidth),
+    paddingBottom: calculatePadding(paddingBottom, borderBottomWidth)
   };
 };
 /**
@@ -132,7 +166,7 @@ const IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: selectInnerStyle(themeTokens),
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-          icon: IconComponent,
+          icon: IconComponent || themeTokens.icon,
           title: selectedProps.accessibilityLabel,
           tokens: (0, _utils.selectTokens)('Icon', themeTokens, 'icon'),
           variant: variant
@@ -149,7 +183,7 @@ IconButton.propTypes = { ...selectedSystemPropTypes,
   /**
    * Defines the icon to be rendered
    */
-  icon: _propTypes.default.elementType.isRequired,
+  icon: _propTypes.default.elementType,
 
   /**
    * URL to navigate to when the `Iconbutton` is pressed