@telus-uds/components-base 1.52.0 → 1.54.0

package/CHANGELOG.md

@@ -1,12 +1,44 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 21 Jun 2023 20:33:00 GMT and should not be manually modified.
+This log was last generated on Fri, 07 Jul 2023 19:17:02 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.54.0
+
+Fri, 07 Jul 2023 19:17:02 GMT
+
+### Minor changes
+
+- Koodo changes to nav bar (akshay.pandey1@telus.com)
+- Home Pro Icon added to telus (akshay.pandey1@telus.com)
+- Added "content" prop to ExpandCollapsePanel (wlsdud194@hotmail.com)
+- added capability to adjust superscript sizing with theme tokens (kyle.king2@telus.com)
+- Standardized SkipLink (wlsdud194@hotmail.com)
+- Bump @telus-uds/system-theme-tokens to v2.37.0
+
+### Patches
+
+- Fix an issue where `Modal` may crash on Android devices and also may not render longer content (shahzaibkhalidmalik@outlook.com)
+- Tooltip margin adjusted to encompass the whole component (jislaseng@gmail.com)
+
+## 1.53.0
+
+Wed, 28 Jun 2023 23:27:23 GMT
+
+### Minor changes
+
+- added/ outline, adjusted space and adjust track width to ToggleSwitch (samuraix221@hotmail.com)
+- Gradient token added to Card component (35577399+JoshHC@users.noreply.github.com)
+- Bump @telus-uds/system-theme-tokens to v2.36.0
+
+### Patches
+
+- `Carousel` breaks when single `Carousel.Item` is rendered (shahzaibkhalidmalik@outlook.com)
+
 ## 1.52.0
 
-Wed, 21 Jun 2023 20:33:00 GMT
+Wed, 21 Jun 2023 20:40:42 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -36,7 +36,11 @@
         "pressableBorderTopColor": "color",
         "pressablePaddingBottom": "size",
         "titleColor": "color",
-        "subTitleColor": "color"
+        "subTitleColor": "color",
+        "outerBorderColor": "color",
+        "outerBorderGap": "size",
+        "outerBorderRadius": "radius",
+        "outerBorderWidth": "border"
       },
       "VideoPickerSlider": {
         "previousIcon": "icon",
@@ -59,14 +63,10 @@
         "lineHeight": "lineHeight"
       },
       "Table": {
-        "tablePaddingBottom": "size",
         "cellMinWidth": "size",
-        "cellHeadingBackground": "color",
-        "cellHeadingBoxShadowColor": "color",
+        "tablePaddingBottom": "size",
         "cellBoxShadowColor": "color",
-        "cellSubheadingBackground": "color",
         "cellBackground": "color",
-        "cellRowHeadingBackground": "color",
         "cellStickyShadow": "shadow",
         "cellPaddingTop": "size",
         "cellPaddingRight": "size",
@@ -74,7 +74,9 @@
         "cellPaddingBottom": "size",
         "fontWeight": "fontWeight",
         "fontName": "fontName",
-        "fontSize": "fontSize"
+        "fontSize": "fontSize",
+        "lineHeight": "lineHeight",
+        "stickyBackgroundColor": "color"
       },
       "Image": {
         "borderRadius": "radius"
@@ -425,6 +427,7 @@
         "flex": "integer",
         "backgroundColor": "color",
         "borderColor": "color",
+        "gradient": "gradient",
         "borderRadius": "radius",
         "borderWidth": "border",
         "paddingBottom": "size",
@@ -618,6 +621,7 @@
         "iconColor": "color",
         "iconSize": "size",
         "iconGap": "size",
+        "color": "color",
         "iconPaddingTop": "size",
         "iconPosition": "position",
         "verticalAlign": "verticalAlign",
@@ -628,7 +632,9 @@
         "paddingBottom": "size",
         "borderWidth": "border",
         "borderColor": "color",
-        "backgroundColor": "color"
+        "textLine": "textLine",
+        "fontSize": "fontSize",
+        "lineHeight": "lineHeight"
       },
       "ExpandCollapsePanel": {
         "expandDuration": "duration",
@@ -642,7 +648,19 @@
         "borderRadius": "radius",
         "borderWidth": "border",
         "expandDividerColor": "color",
-        "expandDividerWidth": "size"
+        "expandDividerWidth": "size",
+        "contentPanelBackgroundColor": "color",
+        "contentPanelPaddingLeft": "size",
+        "contentPanelPaddingRight": "size",
+        "contentPanelPaddingTop": "size",
+        "contentPanelPaddingBottom": "size",
+        "contentPanelBorderWidth": "border",
+        "contentPanelBorderColor": "color",
+        "contentPanelFontName": "fontName",
+        "contentPanelFontSize": "fontSize",
+        "contentPanelFontColor": "color",
+        "contentPanelFontWeight": "fontWeight",
+        "contentPanelLineHeight": "lineHeight"
       },
       "Feedback": {
         "backgroundColor": "color",
@@ -1395,7 +1413,12 @@
         "outlineWidth": "border",
         "paddingHorizontal": "size",
         "paddingVertical": "size",
-        "borderRadius": "radius"
+        "borderRadius": "radius",
+        "textLine": "textLine",
+        "fontName": "fontName",
+        "fontWeight": "fontWeight",
+        "fontSize": "fontSize",
+        "lineHeight": "lineHeight"
       },
       "StoryCard": {
         "outerBorderColor": "color",
@@ -1507,6 +1530,8 @@
       "TermsAndConditions": {
         "contentPaddingBottom": "size",
         "contentPaddingLeft": "size",
+        "contentBorderColor": "color",
+        "contentMarginBottom": "size",
         "mdContentPaddingBottom": "size",
         "mdContentPaddingLeft": "size",
         "orderedPadding": "size",
@@ -1533,13 +1558,20 @@
         "expandTitleColor": "color",
         "expandTitleFontSize": "size",
         "expandTitleLineHeight": "lineHeight",
+        "expandTitleFontName": "fontName",
+        "expandTitleFontWeight": "fontWeight",
         "expandTitleMarginX": "size",
         "expandTitleMarginY": "size",
+        "expandTitlePaddingLeft": "size",
+        "expandTitleBorder": "border",
+        "expandTitleBorderColor": "color",
+        "expandTitleUnderline": "textLine",
         "expandBaseBorderWidth": "border",
         "expandContentPaddingBottom": "size",
         "expandContentPaddingLeft": "size",
         "expandContentPaddingRight": "size",
         "expandContentPaddingTop": "size",
+        "dividerColor": "color",
         "icon": "icon"
       },
       "TextArea": {
@@ -1607,7 +1639,10 @@
         "paddingBottom": "size",
         "shadow": "shadow",
         "alignSelf": "flexAlign",
+        "space": "integer",
         "icon": "icon",
+        "trackHeight": "size",
+        "outerBorderGapButton": "size",
         "width": "size",
         "trackBorderWidth": "border",
         "trackBorderColor": "color",
@@ -1697,6 +1732,7 @@
       },
       "Typography": {
         "fontName": "fontName",
+        "superScriptFontSize": "fontSize",
         "fontWeight": "fontWeight",
         "fontSize": "fontSize",
         "color": "color",
@@ -2130,6 +2166,19 @@
           "type": "state"
         }
       },
+      "ExpandCollapseMiniControl": {
+        "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"
+          ]
+        }
+      },
       "ExpandCollapsePanel": {
         "expanded": {
           "description": "Applies when an ExpandCollapse panel is open and the content inside is visible",
@@ -3133,6 +3182,45 @@
           "type": "state"
         }
       },
+      "VideoPickerThumbnail": {
+        "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"
+        },
+        "selected": {
+          "description": "Applies while an interactive component is the currently selected one in a set of states or components, for example a button in a `ButtonGroup`.",
+          "values": [
+            true
+          ],
+          "type": "state"
+        }
+      },
       "SkipLink": {
         "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.",
@@ -3144,6 +3232,14 @@
           "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"
         }
       }
     },
@@ -3199,8 +3295,11 @@
       },
       "fontSize": {
         "default": 16,
-        "nullable": false,
-        "type": "Number"
+        "nullable": true,
+        "type": "Number|String|null",
+        "values": {
+          "none": null
+        }
       },
       "lineHeight": {
         "default": 1,
@@ -3584,7 +3683,19 @@
                   "borderRadius": "radius",
                   "borderWidth": "border",
                   "expandDividerColor": "color",
-                  "expandDividerWidth": "size"
+                  "expandDividerWidth": "size",
+                  "contentPanelBackgroundColor": "color",
+                  "contentPanelPaddingLeft": "size",
+                  "contentPanelPaddingRight": "size",
+                  "contentPanelPaddingTop": "size",
+                  "contentPanelPaddingBottom": "size",
+                  "contentPanelBorderWidth": "border",
+                  "contentPanelBorderColor": "color",
+                  "contentPanelFontName": "fontName",
+                  "contentPanelFontSize": "fontSize",
+                  "contentPanelFontColor": "color",
+                  "contentPanelFontWeight": "fontWeight",
+                  "contentPanelLineHeight": "lineHeight"
                 }
               },
               "required": false,
@@ -3601,7 +3712,7 @@
               "type": {
                 "name": "func"
               },
-              "required": true,
+              "required": false,
               "description": "Function to call on pressing the panel's control, which should open or close the panel.\nIf Panel is a direct child of `ExpandCollapse`, this prop will be provided by the ExpandCollapse parent."
             },
             "onPress": {
@@ -3629,10 +3740,10 @@
             "control": {
               "type": {
                 "name": "custom",
-                "raw": "ExpandCollapseControl.propTypes.children.isRequired"
+                "raw": "ExpandCollapseControl.propTypes.children"
               },
               "required": false,
-              "description": "The content inside the always-visible control element that opens and closes the ExpandCollapse when pressed."
+              "description": "The content inside the control element that opens and closes the ExpandCollapse when pressed."
             },
             "controlTokens": {
               "type": {
@@ -3670,6 +3781,13 @@
               },
               "required": false,
               "description": "An optional ref to be attached to the control"
+            },
+            "content": {
+              "type": {
+                "name": "bool"
+              },
+              "required": false,
+              "description": "A boolean prop to determine if the panel is a content panel or not. If true, the panel will not have a control"
             }
           },
           "attributes": {
@@ -4112,6 +4230,7 @@
                 "flex": "integer",
                 "backgroundColor": "color",
                 "borderColor": "color",
+                "gradient": "gradient",
                 "borderRadius": "radius",
                 "borderWidth": "border",
                 "paddingBottom": "size",
@@ -4527,7 +4646,19 @@
                   "borderRadius": "radius",
                   "borderWidth": "border",
                   "expandDividerColor": "color",
-                  "expandDividerWidth": "size"
+                  "expandDividerWidth": "size",
+                  "contentPanelBackgroundColor": "color",
+                  "contentPanelPaddingLeft": "size",
+                  "contentPanelPaddingRight": "size",
+                  "contentPanelPaddingTop": "size",
+                  "contentPanelPaddingBottom": "size",
+                  "contentPanelBorderWidth": "border",
+                  "contentPanelBorderColor": "color",
+                  "contentPanelFontName": "fontName",
+                  "contentPanelFontSize": "fontSize",
+                  "contentPanelFontColor": "color",
+                  "contentPanelFontWeight": "fontWeight",
+                  "contentPanelLineHeight": "lineHeight"
                 }
               },
               "required": false,
@@ -4544,7 +4675,7 @@
               "type": {
                 "name": "func"
               },
-              "required": true,
+              "required": false,
               "description": "Function to call on pressing the panel's control, which should open or close the panel.\nIf Panel is a direct child of `ExpandCollapse`, this prop will be provided by the ExpandCollapse parent."
             },
             "onPress": {
@@ -4572,10 +4703,10 @@
             "control": {
               "type": {
                 "name": "custom",
-                "raw": "ExpandCollapseControl.propTypes.children.isRequired"
+                "raw": "ExpandCollapseControl.propTypes.children"
               },
               "required": false,
-              "description": "The content inside the always-visible control element that opens and closes the ExpandCollapse when pressed."
+              "description": "The content inside the control element that opens and closes the ExpandCollapse when pressed."
             },
             "controlTokens": {
               "type": {
@@ -4613,6 +4744,13 @@
               },
               "required": false,
               "description": "An optional ref to be attached to the control"
+            },
+            "content": {
+              "type": {
+                "name": "bool"
+              },
+              "required": false,
+              "description": "A boolean prop to determine if the panel is a content panel or not. If true, the panel will not have a control"
             }
           },
           "attributes": {
@@ -7909,6 +8047,7 @@
                 "flex": "integer",
                 "backgroundColor": "color",
                 "borderColor": "color",
+                "gradient": "gradient",
                 "borderRadius": "radius",
                 "borderWidth": "border",
                 "paddingBottom": "size",
@@ -9494,7 +9633,12 @@
                 "outlineWidth": "border",
                 "paddingHorizontal": "size",
                 "paddingVertical": "size",
-                "borderRadius": "radius"
+                "borderRadius": "radius",
+                "textLine": "textLine",
+                "fontName": "fontName",
+                "fontWeight": "fontWeight",
+                "fontSize": "fontSize",
+                "lineHeight": "lineHeight"
               }
             },
             "required": false,
@@ -10921,6 +11065,7 @@
               "name": "custom",
               "raw": {
                 "fontName": "fontName",
+                "superScriptFontSize": "fontSize",
                 "fontWeight": "fontWeight",
                 "fontSize": "fontSize",
                 "color": "color",
@@ -14702,7 +14847,10 @@
                 "paddingBottom": "size",
                 "shadow": "shadow",
                 "alignSelf": "flexAlign",
+                "space": "integer",
                 "icon": "icon",
+                "trackHeight": "size",
+                "outerBorderGapButton": "size",
                 "width": "size",
                 "trackBorderWidth": "border",
                 "trackBorderColor": "color",
@@ -15028,7 +15176,10 @@
                 "paddingBottom": "size",
                 "shadow": "shadow",
                 "alignSelf": "flexAlign",
+                "space": "integer",
                 "icon": "icon",
+                "trackHeight": "size",
+                "outerBorderGapButton": "size",
                 "width": "size",
                 "trackBorderWidth": "border",
                 "trackBorderColor": "color",

package/lib/Button/ButtonBase.js

@@ -232,19 +232,29 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
   });
 };
 
-const selectItemIconTokens = _ref9 => {
+const selectButtonStyles = _ref9 => {
+  let {
+    textAlign
+  } = _ref9;
+  return {
+    flexDirection: 'row',
+    justifyContent: textAlign
+  };
+};
+
+const selectItemIconTokens = _ref10 => {
   let {
     color,
     iconColor,
     iconSize
-  } = _ref9;
+  } = _ref10;
   return {
     size: iconSize,
     color: iconColor || color
   };
 };
 
-const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref10, ref) => {
+const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref11, ref) => {
   let {
     id,
     href,
@@ -259,7 +269,7 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref10, ref) => {
     iconPosition = icon ? 'left' : undefined,
     iconProps,
     ...rawRest
-  } = _ref10;
+  } = _ref11;
 
   const {
     onPress,
@@ -308,6 +318,7 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref10, ref) => {
 
       const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align;
       const IconComponent = icon || themeTokens.icon;
+      const rowStyles = selectButtonStyles(themeTokens);
       return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         id: id,
         style: [containerStyles, borderStyles, stretchStyles, staticStyles.row, _Platform.default.select({
@@ -315,7 +326,8 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref10, ref) => {
             maxWidth: '100%',
             // ensure overflowing content wraps
             // TODO: https://github.com/telus/universal-design-system/issues/487
-            transition: 'background-color 200ms, border-color 200ms'
+            transition: 'background-color 200ms, border-color 200ms',
+            ...rowStyles
           }
         })],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {

package/lib/Card/CardBase.js

@@ -11,6 +11,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
 var _ThemeProvider = require("../ThemeProvider");
 
 var _utils = require("../utils");
@@ -39,7 +41,8 @@ const selectStyles = _ref => {
     paddingRight,
     paddingTop,
     minWidth,
-    shadow
+    shadow,
+    gradient
   } = _ref;
   return {
     flex,
@@ -52,7 +55,13 @@ const selectStyles = _ref => {
     paddingRight,
     paddingTop,
     minWidth,
-    ...(0, _ThemeProvider.applyShadowToken)(shadow)
+    ...(0, _ThemeProvider.applyShadowToken)(shadow),
+    ...(gradient && _Platform.default.OS === 'web' ? {
+      backgroundImage: `linear-gradient(${gradient.angle}deg, ${gradient.stops[0].color}, ${gradient.stops[1].color})`,
+      backgroundOrigin: `border-box`,
+      boxShadow: `inset 0 1000px white`,
+      border: `${borderWidth}px solid transparent`
+    } : {})
   };
 };
 /**

package/lib/Carousel/Carousel.js

@@ -221,7 +221,12 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     dictionary: _dictionary.default,
     copy
   });
-  const childrenArray = (0, _utils.unpackFragment)(children);
+  let childrenArray = (0, _utils.unpackFragment)(children); // if `Carousel` only has one `Carousel.Item`, convert this to a single-item array
+
+  if (!Array.isArray(childrenArray)) {
+    childrenArray = [childrenArray];
+  }
+
   const systemProps = selectProps({ ...rest,
     accessibilityRole,
     accessibilityLabel,
@@ -364,12 +369,16 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   }, [fixOffsetAndGo]);
 
   const isSwipeAllowed = _react.default.useCallback(() => {
+    if (childrenArray.length === 1) {
+      return false;
+    }
+
     if (_Platform.default.OS === 'web') {
       return !!(viewport === 'xs' || viewport === 'sm');
     }
 
     return true;
-  }, [viewport]);
+  }, [viewport, childrenArray.length]);
 
   const panResponder = _react.default.useMemo(() => _PanResponder.default.create({
     onPanResponderTerminationRequest: () => false,
@@ -507,7 +516,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       ref: ref,
       ...systemProps,
       ...containerProps,
-      children: [showPreviousNextNavigation && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: [showPreviousNextNavigation && childrenArray.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, true),
         testID: "previous-button-container",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
@@ -517,7 +526,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           variant: previousNextIconButtonVariants,
           accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex)
         })
-      }), Boolean(skipLinkHref) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkipLink.default, {
+      }) : null, Boolean(skipLinkHref) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SkipLink.default, {
         ref: firstFocusRef,
         href: skipLinkHref,
         children: getCopyWithPlaceholders('skipLink')
@@ -554,7 +563,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
             }, index.toFixed(2));
           })
         })
-      }), showPreviousNextNavigation && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      }), showPreviousNextNavigation && childrenArray.length > 1 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: selectPreviousNextNavigationButtonStyles(previousNextNavigationButtonWidth, previousNextNavigationPosition, spaceBetweenSlideAndPreviousNextNavigation, isFirstSlide, isLastSlide, false),
         testID: "next-button-container",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
@@ -564,7 +573,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
           variant: previousNextIconButtonVariants,
           accessibilityLabel: getCopyWithPlaceholders('iconButtonLabel').replace('%{targetStep}', activeIndex + 2)
         })
-      })]
+      }) : null]
     }), showPanelNavigation ? activePanelNavigation : null]
   });
 });