@telus-uds/components-base 1.47.0 → 1.49.0

package/CHANGELOG.md

@@ -1,12 +1,37 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 02 Jun 2023 00:27:36 GMT and should not be manually modified.
+This log was last generated on Fri, 09 Jun 2023 00:18:16 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.49.0
+
+Fri, 09 Jun 2023 00:18:16 GMT
+
+### Minor changes
+
+- refactored SideNav component for alignment to design intentions (kyle.king2@telus.com)
+- Fixed bullet alignment within ListItemBase (wlsdud194@hotmail.com)
+- expand collpase mini variant introduced (akshay.pandey1@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.31.0
+
+## 1.48.0
+
+Tue, 06 Jun 2023 20:46:12 GMT
+
+### Minor changes
+
+- add new story for 'ButtonDropdown' (kyle.king2@telus.com)
+- change animation to skeleton component (mauricio.batresmontejo@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.30.0
+
+### Patches
+
+- Fix an issue where `Button` may not align as expected in a flex container (shahzaibkhalidmalik@outlook.com)
+
 ## 1.47.0
 
-Fri, 02 Jun 2023 00:27:36 GMT
+Fri, 02 Jun 2023 00:34:55 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -307,7 +307,6 @@
         "color": "color",
         "lineHeight": "lineHeight",
         "textAlign": "flexJustifyContent",
-        "alignSelf": "flexAlign",
         "fontName": "fontName",
         "fontWeight": "fontWeight",
         "backgroundColor": "color",
@@ -595,7 +594,12 @@
         "paddingBottom": "size",
         "borderWidth": "border",
         "borderColor": "color",
-        "backgroundColor": "color"
+        "backgroundColor": "color",
+        "borderTopLeftRadius": "radius",
+        "borderBottomLeftRadius": "radius",
+        "borderTopRightRadius": "radius",
+        "borderBottomRightRadius": "radius",
+        "textLine": "textLine"
       },
       "ExpandCollapseMiniControl": {
         "size": "size",
@@ -629,20 +633,6 @@
         "expandDividerColor": "color",
         "expandDividerWidth": "size"
       },
-      "ExpandCollapseMiniPanel": {
-        "expandDuration": "duration",
-        "collapseDuration": "duration",
-        "contentPaddingLeft": "size",
-        "contentPaddingRight": "size",
-        "contentPaddingTop": "size",
-        "contentPaddingBottom": "size",
-        "marginBottom": "size",
-        "borderColor": "color",
-        "borderRadius": "radius",
-        "borderWidth": "border",
-        "expandDividerColor": "color",
-        "expandDividerWidth": "size"
-      },
       "Feedback": {
         "backgroundColor": "color",
         "borderColor": "color",
@@ -1683,6 +1673,8 @@
       },
       "Skeleton": {
         "color": "color",
+        "secondColor": "color",
+        "animationDuration": "integer",
         "size": "size",
         "radius": "radius",
         "baseWidth": "size",
@@ -2691,6 +2683,16 @@
           "platforms": [
             "rn"
           ]
+        },
+        "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
+          ],
+          "type": "state",
+          "platforms": [
+            "rn"
+          ]
         }
       },
       "SideNavItemGroup": {
@@ -3360,13 +3362,6 @@
               "required": false,
               "description": "Array of the ids of currently open groups"
             },
-            "isMiniExpandCollapse": {
-              "defaultValue": {
-                "value": "false",
-                "computed": false
-              },
-              "required": false
-            },
             "variant": {
               "type": {
                 "name": "objectOf",
@@ -3471,7 +3466,12 @@
                   "paddingBottom": "size",
                   "borderWidth": "border",
                   "borderColor": "color",
-                  "backgroundColor": "color"
+                  "backgroundColor": "color",
+                  "borderTopLeftRadius": "radius",
+                  "borderBottomLeftRadius": "radius",
+                  "borderTopRightRadius": "radius",
+                  "borderBottomRightRadius": "radius",
+                  "textLine": "textLine"
                 }
               },
               "required": false,
@@ -4305,13 +4305,6 @@
               "required": false,
               "description": "Array of the ids of currently open groups"
             },
-            "isMiniExpandCollapse": {
-              "defaultValue": {
-                "value": "false",
-                "computed": false
-              },
-              "required": false
-            },
             "variant": {
               "type": {
                 "name": "objectOf",
@@ -4416,7 +4409,12 @@
                   "paddingBottom": "size",
                   "borderWidth": "border",
                   "borderColor": "color",
-                  "backgroundColor": "color"
+                  "backgroundColor": "color",
+                  "borderTopLeftRadius": "radius",
+                  "borderBottomLeftRadius": "radius",
+                  "borderTopRightRadius": "radius",
+                  "borderBottomRightRadius": "radius",
+                  "textLine": "textLine"
                 }
               },
               "required": false,
@@ -9186,6 +9184,8 @@
               "name": "custom",
               "raw": {
                 "color": "color",
+                "secondColor": "color",
+                "animationDuration": "integer",
                 "size": "size",
                 "radius": "radius",
                 "baseWidth": "size",
@@ -10873,7 +10873,6 @@
                 "color": "color",
                 "lineHeight": "lineHeight",
                 "textAlign": "flexJustifyContent",
-                "alignSelf": "flexAlign",
                 "fontName": "fontName",
                 "fontWeight": "fontWeight",
                 "backgroundColor": "color",
@@ -11072,7 +11071,6 @@
                 "color": "color",
                 "lineHeight": "lineHeight",
                 "textAlign": "flexJustifyContent",
-                "alignSelf": "flexAlign",
                 "fontName": "fontName",
                 "fontWeight": "fontWeight",
                 "backgroundColor": "color",
@@ -11498,7 +11496,6 @@
                 "color": "color",
                 "lineHeight": "lineHeight",
                 "textAlign": "flexJustifyContent",
-                "alignSelf": "flexAlign",
                 "fontName": "fontName",
                 "fontWeight": "fontWeight",
                 "backgroundColor": "color",

package/lib/Button/ButtonBase.js

@@ -45,7 +45,6 @@ const getOuterBorderOffset = _ref => {
 
 const selectOuterContainerStyles = _ref2 => {
   let {
-    alignSelf,
     opacity,
     outerBorderColor,
     outerBorderWidth,
@@ -53,8 +52,11 @@ const selectOuterContainerStyles = _ref2 => {
     borderRadius,
     outerBackgroundColor
   } = _ref2;
-  return {
-    alignSelf,
+  return { ..._Platform.default.select({
+      native: {
+        alignSelf: 'flex-start'
+      }
+    }),
     backgroundColor: outerBackgroundColor,
     opacity,
     ...(0, _ThemeProvider.applyOuterBorder)({
@@ -221,6 +223,7 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
     web: {
       // if it would overflow the container, wraps instead
       maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
+      width: 'fit-content',
       outline: 'none',
       // removes the default browser :focus outline
       ...(0, _utils.getCursorStyle)(inactive, accessibilityRole)

package/lib/ExpandCollapse/Control.js

@@ -11,6 +11,8 @@ var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/expor
 
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _ThemeProvider = require("../ThemeProvider");
@@ -32,25 +34,34 @@ function selectContainerStyles(_ref) {
     backgroundColor,
     borderColor,
     borderWidth,
-    borderStyle,
+    borderStyle = 'solid',
     paddingLeft,
     paddingRight,
     paddingTop,
     paddingBottom,
     justifyContent,
     verticalAlign,
-    iconPosition
+    iconPosition,
+    borderTopRightRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderBottomLeftRadius
   } = _ref;
   return {
+    boxSizing: 'border-box',
     backgroundColor,
-    borderTopColor: borderColor,
-    borderTopWidth: borderWidth,
-    borderTopStyle: borderStyle,
+    borderColor,
+    borderWidth,
+    borderStyle,
     paddingLeft,
     paddingRight,
     paddingTop,
     paddingBottom,
     justifyContent,
+    borderTopRightRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderBottomLeftRadius,
     ...(0, _ThemeProvider.verticalAlignRow)(verticalAlign, iconPosition === 'right')
   };
 } // TODO: use stack / spacer when available
@@ -69,6 +80,16 @@ function selectIconContainerStyles(_ref2) {
   };
 }
 
+function selectTextContainerStyles(_ref3) {
+  let {
+    textLine
+  } = _ref3;
+  return {
+    textDecorationLine: textLine,
+    flex: 1
+  };
+}
+
 function selectIconTokens(tokens) {
   return {
     color: tokens.iconColor,
@@ -76,7 +97,7 @@ function selectIconTokens(tokens) {
   };
 }
 
-const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)((_ref4, ref) => {
   let {
     onPress,
     isExpanded,
@@ -84,10 +105,9 @@ const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) =
     tokens,
     accessibilityRole = 'button',
     variant,
-    isMiniExpandCollapse = false,
     ...rest
-  } = _ref3;
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)(isMiniExpandCollapse ? 'ExpandCollapseMiniControl' : 'ExpandCollapseControl', tokens, variant);
+  } = _ref4;
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ExpandCollapseControl', tokens, variant);
   const selectedProps = selectProps({
     accessibilityRole,
     ...rest,
@@ -96,12 +116,12 @@ const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) =
     }
   });
 
-  const getControlState = _ref4 => {
+  const getControlState = _ref5 => {
     let {
       pressed,
       hovered,
       focused
-    } = _ref4;
+    } = _ref5;
     return {
       pressed,
       hover: hovered,
@@ -112,7 +132,11 @@ const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) =
 
   const getControlTokens = pressableState => getTokens(getControlState(pressableState));
 
-  const getPressableStyle = pressableState => selectContainerStyles(getControlTokens(pressableState));
+  const getPressableStyle = pressableState => ({ ...selectContainerStyles(getControlTokens(pressableState)),
+    ...(_Platform.default.OS === 'web' ? {
+      outline: 'none'
+    } : {})
+  });
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,
@@ -129,7 +153,10 @@ const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) =
           style: selectIconContainerStyles(themeTokens),
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconTokens(themeTokens)
           })
-        }), typeof children === 'function' ? children(getControlState(pressableState)) : children]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectTextContainerStyles(themeTokens),
+          children: typeof children === 'function' ? children(getControlState(pressableState)) : children
+        })]
       });
     }
   });

package/lib/ExpandCollapse/Panel.js

@@ -70,7 +70,6 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     children,
     tokens,
     variant,
-    isMiniExpandCollapse = false,
     controlRef,
     ...rest
   } = _ref2;
@@ -81,7 +80,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
       expanded: isExpanded
     }
   });
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)(isMiniExpandCollapse ? 'ExpandCollapseMiniPanel' : 'ExpandCollapsePanel', tokens, variant, {
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ExpandCollapsePanel', tokens, variant, {
     expanded: isExpanded
   });
 
@@ -117,7 +116,6 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
       variant: variant,
       onPress: handleControlPress,
       ref: controlRef,
-      isMiniExpandCollapse: isMiniExpandCollapse,
       children: control
     }), isExpanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: {

package/lib/List/ListItemBase.js

@@ -23,6 +23,8 @@ var _ListItemMark = _interopRequireDefault(require("./ListItemMark"));
 
 var _Typography = _interopRequireDefault(require("../Typography"));
 
+var _ThemeProvider = require("../ThemeProvider");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -79,12 +81,29 @@ const ListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
   const itemBlockStyles = selectItemBlockStyles(themeTokens);
   const dividerStyles = selectDividerStyles(themeTokens);
+  const {
+    iconMarginTop,
+    itemIconSize
+  } = themeTokens;
+  let adjustedIconMarginTop = iconMarginTop;
+  const {
+    fontSize,
+    lineHeight: lineHeightRatio
+  } = (0, _ThemeProvider.useThemeTokens)('Typography', {}, {
+    size: 'h4',
+    bold: true
+  });
+
+  if (title) {
+    adjustedIconMarginTop = (fontSize * lineHeightRatio - itemIconSize) / 2;
+  }
   /**
    * Function responsible returning styling, in case the item is the last shouldn't
    * add extra margin on the bottom, if "showDivider" is true it should add a divider
    * and custom margin and padding, otherwise just adds a margin to the bottom
    */
 
+
   const getContainerStyle = () => {
     if (isLastItem) {
       return undefined;
@@ -112,11 +131,11 @@ const ListItemBase = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
       style: [{
         flex: 1,
         flexDirection: 'row'
-      }, !title && {
-        alignItems: 'center'
       }],
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ListItemMark.default, {
-        tokens: tokens,
+        tokens: { ...tokens,
+          iconMarginTop: adjustedIconMarginTop
+        },
         icon: icon,
         iconColor: iconColor,
         iconSize: iconSize

package/lib/SideNav/Item.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _utils = require("../utils");
@@ -94,16 +96,22 @@ const Item = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
 
   const getAppearanceState = _ref3 => {
     let {
-      hovered
+      hovered,
+      focused
     } = _ref3;
     return {
       hover: hovered,
       active: isActive,
-      expanded: isExpanded
+      expanded: isExpanded,
+      focus: focused
     };
   };
 
-  const getPressableStyle = pressableState => selectItemStyles(getTokens(getAppearanceState(pressableState)));
+  const getPressableStyle = pressableState => ({ ...selectItemStyles(getTokens(getAppearanceState(pressableState))),
+    ...(_Platform.default.OS === 'web' ? {
+      outline: 'none'
+    } : {})
+  });
 
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
     ref: ref,

package/lib/SideNav/ItemContent.js

@@ -42,9 +42,10 @@ const ItemContent = _ref => {
     children,
     tokens
   } = _ref;
+  const typographyTokens = (0, _utils.selectTokens)('Typography', tokens);
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
-      tokens: (0, _utils.selectTokens)('Typography', tokens),
+      tokens: typographyTokens,
       children: children
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
       style: [staticStyles.absolute, selectAccentStyles(tokens)]

package/lib/SideNav/ItemsGroup.js

@@ -61,7 +61,17 @@ const ItemsGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 
   const getGroupTokens = (0, _ThemeProvider.useThemeTokensCallback)('SideNavItemsGroup', tokens, variant);
 
-  const getPanelTokens = appearance => (0, _utils.selectTokens)('ExpandCollapsePanel', getGroupTokens(getAppearance(appearance)));
+  const getPanelTokens = appearance => {
+    const {
+      panelBorderColor,
+      ...itemsGroupTokens
+    } = getGroupTokens(getAppearance(appearance));
+    const groupTokens = { ...itemsGroupTokens,
+      borderWidth: 0,
+      marginBottom: 0
+    };
+    return (0, _utils.selectTokens)('ExpandCollapsePanel', groupTokens);
+  };
 
   const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('SideNavItem', itemTokens, variant);
 

package/lib/Skeleton/Skeleton.js

@@ -100,11 +100,18 @@ const Skeleton = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     }
   } : // Size by an index on the spacing scale (getting default index from theme if none provided)
   sizeIndex || themeTokens.size;
-  const skeletonHeight = (0, _utils.useSpacingScale)(spacingScaleValue);
-  const nativeAnimation = (0, _useSkeletonNativeAnimation.default)();
+  const skeletonHeight = (0, _utils.useSpacingScale)(spacingScaleValue); // Animation color and animation duration
+
+  const {
+    secondColor,
+    animationDuration
+  } = themeTokens;
+  const nativeAnimation = (0, _useSkeletonNativeAnimation.default)({
+    animationDuration
+  });
 
   const getAnimationBasedOnPlatform = () => {
-    const animation = _Platform.default.OS === 'web' ? _skeletonWebAnimation.default : nativeAnimation; // We must pass the animation styles through `StyleSheet.create`
+    const animation = _Platform.default.OS === 'web' ? (0, _skeletonWebAnimation.default)(secondColor, animationDuration) : nativeAnimation; // We must pass the animation styles through `StyleSheet.create`
     // @see https://github.com/necolas/react-native-web/issues/2387
 
     const styles = _StyleSheet.default.create({

package/lib/Skeleton/skeleton.constant.js

@@ -3,10 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.OPACITY_STOP = exports.DEFAULT_OPACITY = exports.ANIMATION_DURATION = void 0;
+exports.OPACITY_STOP = exports.DEFAULT_OPACITY = void 0;
 const DEFAULT_OPACITY = 1;
 exports.DEFAULT_OPACITY = DEFAULT_OPACITY;
 const OPACITY_STOP = 0.4;
-exports.OPACITY_STOP = OPACITY_STOP;
-const ANIMATION_DURATION = 1500;
-exports.ANIMATION_DURATION = ANIMATION_DURATION;
+exports.OPACITY_STOP = OPACITY_STOP;

package/lib/Skeleton/skeletonWebAnimation.js

@@ -5,23 +5,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _skeleton = require("./skeleton.constant");
-
-var _default = {
-  animationDuration: `${_skeleton.ANIMATION_DURATION}ms`,
-  animationTimingFunction: 'ease-in-out',
-  animationDelay: '0.5s',
-  animationIterationCount: 'infinite',
-  animationKeyframes: {
-    '0%': {
-      opacity: _skeleton.DEFAULT_OPACITY
-    },
-    '50%': {
-      opacity: _skeleton.OPACITY_STOP
-    },
-    '100%': {
-      opacity: _skeleton.DEFAULT_OPACITY
+const skeletonWebAnimation = (secondColor, animationTime) => {
+  return {
+    animationDuration: `${animationTime}ms`,
+    animationTimingFunction: 'ease-in-out',
+    animationDelay: '0.5s',
+    animationIterationCount: 'infinite',
+    animationKeyframes: {
+      '50%': {
+        backgroundColor: secondColor
+      }
     }
-  }
+  };
 };
+
+var _default = skeletonWebAnimation;
 exports.default = _default;

package/lib/Skeleton/useSkeletonNativeAnimation.js

@@ -15,16 +15,21 @@ var _skeleton = require("./skeleton.constant");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const useSkeletonNativeAnimation = () => {
+const useSkeletonNativeAnimation = _ref => {
+  let {
+    animationDuration
+  } = _ref;
   const fadeAnimation = (0, _react.useRef)(new _Animated.default.Value(_skeleton.DEFAULT_OPACITY)).current;
+  /* eslint-disable react-hooks/exhaustive-deps */
+
   (0, _react.useEffect)(() => {
     const fade = _Animated.default.sequence([_Animated.default.timing(fadeAnimation, {
       toValue: _skeleton.OPACITY_STOP,
-      duration: _skeleton.ANIMATION_DURATION,
+      duration: animationDuration,
       useNativeDriver: _Platform.default.OS !== 'web'
     }), _Animated.default.timing(fadeAnimation, {
       toValue: _skeleton.DEFAULT_OPACITY,
-      duration: _skeleton.ANIMATION_DURATION,
+      duration: animationDuration,
       useNativeDriver: _Platform.default.OS !== 'web'
     })]);
 

package/lib-module/Button/ButtonBase.js

@@ -21,7 +21,6 @@ const getOuterBorderOffset = _ref => {
 
 const selectOuterContainerStyles = _ref2 => {
   let {
-    alignSelf,
     opacity,
     outerBorderColor,
     outerBorderWidth,
@@ -29,8 +28,11 @@ const selectOuterContainerStyles = _ref2 => {
     borderRadius,
     outerBackgroundColor
   } = _ref2;
-  return {
-    alignSelf,
+  return { ...Platform.select({
+      native: {
+        alignSelf: 'flex-start'
+      }
+    }),
     backgroundColor: outerBackgroundColor,
     opacity,
     ...applyOuterBorder({
@@ -197,6 +199,7 @@ const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
     web: {
       // if it would overflow the container, wraps instead
       maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
+      width: 'fit-content',
       outline: 'none',
       // removes the default browser :focus outline
       ...getCursorStyle(inactive, accessibilityRole)