@telus-uds/components-base 1.54.0 → 1.56.0

package/CHANGELOG.md

@@ -1,12 +1,41 @@
 # 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, 21 Jul 2023 00:42:38 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.56.0
+
+Fri, 21 Jul 2023 00:42:38 GMT
+
+### Minor changes
+
+- Rebranded Box for Koodo (wlsdud194@hotmail.com)
+- Branch updated with rebase for components base (35577399+JoshHC@users.noreply.github.com)
+- space of 4px added between the validation and the chevron icons for select component (35577399+JoshHC@users.noreply.github.com)
+- fix content shifting issue in Card component (kyle.king2@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.39.0
+
+### Patches
+
+- fix stories for inverse variant icon (mauricio.batresmontejo@telus.com)
+- rebrand inputlabel for koodo (mauricio.batresmontejo@telus.com)
+
+## 1.55.0
+
+Fri, 14 Jul 2023 19:47:50 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",
@@ -1613,6 +1666,7 @@
         "animationPaddingBottomBefore": "size",
         "animationPaddingBottomAfter": "size",
         "animationPaddingTopBefore": "size",
+        "padding": "size",
         "animationPaddingTopAfter": "size",
         "animationBackgroundColorBefore": "color",
         "animationBackgroundColorAfter": "color",
@@ -1721,6 +1775,7 @@
       },
       "TooltipButton": {
         "outerBorderColor": "color",
+        "backgroundColor": "color",
         "outerBorderWidth": "border",
         "outerBorderGap": "size",
         "borderRadius": "radius",
@@ -2023,6 +2078,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 +2248,8 @@
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [
-            true
+            true,
+            false
           ],
           "type": "state"
         }
@@ -2183,7 +2271,8 @@
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [
-            true
+            true,
+            false
           ],
           "type": "state"
         }
@@ -2336,7 +2425,8 @@
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [
-            true
+            true,
+            false
           ],
           "type": "state"
         },
@@ -2433,7 +2523,8 @@
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [
-            true
+            true,
+            false
           ],
           "type": "state"
         },
@@ -2886,7 +2977,8 @@
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [
-            true
+            true,
+            false
           ],
           "type": "state"
         },
@@ -2917,7 +3009,8 @@
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [
-            true
+            true,
+            false
           ],
           "type": "state"
         }
@@ -3099,7 +3192,8 @@
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
           "values": [
-            true
+            true,
+            false
           ],
           "type": "state"
         }
@@ -3262,9 +3356,11 @@
       },
       "border": {
         "default": 0,
-        "nullable": false,
+        "nullable": true,
+        "type": "undefined|null",
         "values": {
-          "zero": 0
+          "zero": 0,
+          "none": null
         }
       },
       "color": {
@@ -3281,6 +3377,7 @@
         "nullable": true,
         "type": "undefined|null",
         "values": {
+          "none": null,
           "zero": 0,
           "round": 99999999999999
         }
@@ -6232,6 +6329,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 +6358,7 @@
             "type": {
               "name": "elementType"
             },
-            "required": true,
+            "required": false,
             "description": "Defines the icon to be rendered"
           },
           "href": {
@@ -10885,6 +10990,7 @@
               "name": "custom",
               "raw": {
                 "outerBorderColor": "color",
+                "backgroundColor": "color",
                 "outerBorderWidth": "border",
                 "outerBorderGap": "size",
                 "borderRadius": "radius",
@@ -12315,15 +12421,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 +12782,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 +13188,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, {