@telus-uds/components-base 1.46.0 → 1.48.0

package/CHANGELOG.md

@@ -1,12 +1,42 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Tue, 30 May 2023 02:42:51 GMT and should not be manually modified.
+This log was last generated on Tue, 06 Jun 2023 20:37:42 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.48.0
+
+Tue, 06 Jun 2023 20:37:42 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:34:55 GMT
+
+### Minor changes
+
+- Override Search tokens with inactive variant if inactive is true (wlsdud194@hotmail.com)
+- New variants added for the typography component (35577399+JoshHC@users.noreply.github.com)
+- ExpandCollapse theme changes (akshay.pandey1@telus.com)
+- `Box`: Introduce new `border` related tokens (shahzaibkhalidmalik@outlook.com)
+- Bump @telus-uds/system-theme-tokens to v2.29.0
+
+### Patches
+
+- Remove unnecessary ChevronLink changes ("textLineHeight") (kyle.king2@telus.com)
+
 ## 1.46.0
 
-Tue, 30 May 2023 02:42:51 GMT
+Tue, 30 May 2023 02:46:46 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -290,7 +290,13 @@
       },
       "Box": {
         "backgroundColor": "color",
-        "gradient": "gradient"
+        "gradient": "gradient",
+        "borderWidth": "border",
+        "borderColor": "color",
+        "borderTopLeftRadius": "radius",
+        "borderTopRightRadius": "radius",
+        "borderBottomLeftRadius": "radius",
+        "borderBottomRightRadius": "radius"
       },
       "Button": {
         "borderColor": "color",
@@ -301,7 +307,6 @@
         "color": "color",
         "lineHeight": "lineHeight",
         "textAlign": "flexJustifyContent",
-        "alignSelf": "flexAlign",
         "fontName": "fontName",
         "fontWeight": "fontWeight",
         "backgroundColor": "color",
@@ -499,7 +504,6 @@
       },
       "ChevronLink": {
         "fontSize": "fontSize",
-        "textLineHeight": "lineHeight",
         "color": "color",
         "outerBorderColor": "color",
         "leftIcon": "icon",
@@ -594,7 +598,21 @@
       },
       "ExpandCollapseMiniControl": {
         "size": "size",
-        "icon": "icon"
+        "icon": "icon",
+        "iconColor": "color",
+        "iconSize": "size",
+        "iconGap": "size",
+        "iconPaddingTop": "size",
+        "iconPosition": "position",
+        "verticalAlign": "verticalAlign",
+        "justifyContent": "flexJustifyContent",
+        "paddingLeft": "size",
+        "paddingRight": "size",
+        "paddingTop": "size",
+        "paddingBottom": "size",
+        "borderWidth": "border",
+        "borderColor": "color",
+        "backgroundColor": "color"
       },
       "ExpandCollapsePanel": {
         "expandDuration": "duration",
@@ -608,7 +626,21 @@
         "borderRadius": "radius",
         "borderWidth": "border",
         "expandDividerColor": "color",
-        "expanddDividerWidth": "size"
+        "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",
@@ -1650,6 +1682,8 @@
       },
       "Skeleton": {
         "color": "color",
+        "secondColor": "color",
+        "animationDuration": "integer",
         "size": "size",
         "radius": "radius",
         "baseWidth": "size",
@@ -3327,6 +3361,13 @@
               "required": false,
               "description": "Array of the ids of currently open groups"
             },
+            "isMiniExpandCollapse": {
+              "defaultValue": {
+                "value": "false",
+                "computed": false
+              },
+              "required": false
+            },
             "variant": {
               "type": {
                 "name": "objectOf",
@@ -3363,7 +3404,7 @@
                   "borderRadius": "radius",
                   "borderWidth": "border",
                   "expandDividerColor": "color",
-                  "expanddDividerWidth": "size"
+                  "expandDividerWidth": "size"
                 }
               },
               "required": false,
@@ -3711,7 +3752,13 @@
               "name": "custom",
               "raw": {
                 "backgroundColor": "color",
-                "gradient": "gradient"
+                "gradient": "gradient",
+                "borderWidth": "border",
+                "borderColor": "color",
+                "borderTopLeftRadius": "radius",
+                "borderTopRightRadius": "radius",
+                "borderBottomLeftRadius": "radius",
+                "borderBottomRightRadius": "radius"
               }
             },
             "required": false,
@@ -4259,6 +4306,13 @@
               "required": false,
               "description": "Array of the ids of currently open groups"
             },
+            "isMiniExpandCollapse": {
+              "defaultValue": {
+                "value": "false",
+                "computed": false
+              },
+              "required": false
+            },
             "variant": {
               "type": {
                 "name": "objectOf",
@@ -4295,7 +4349,7 @@
                   "borderRadius": "radius",
                   "borderWidth": "border",
                   "expandDividerColor": "color",
-                  "expanddDividerWidth": "size"
+                  "expandDividerWidth": "size"
                 }
               },
               "required": false,
@@ -9133,6 +9187,8 @@
               "name": "custom",
               "raw": {
                 "color": "color",
+                "secondColor": "color",
+                "animationDuration": "integer",
                 "size": "size",
                 "radius": "radius",
                 "baseWidth": "size",
@@ -10820,7 +10876,6 @@
                 "color": "color",
                 "lineHeight": "lineHeight",
                 "textAlign": "flexJustifyContent",
-                "alignSelf": "flexAlign",
                 "fontName": "fontName",
                 "fontWeight": "fontWeight",
                 "backgroundColor": "color",
@@ -11019,7 +11074,6 @@
                 "color": "color",
                 "lineHeight": "lineHeight",
                 "textAlign": "flexJustifyContent",
-                "alignSelf": "flexAlign",
                 "fontName": "fontName",
                 "fontWeight": "fontWeight",
                 "backgroundColor": "color",
@@ -11445,7 +11499,6 @@
                 "color": "color",
                 "lineHeight": "lineHeight",
                 "textAlign": "flexJustifyContent",
-                "alignSelf": "flexAlign",
                 "fontName": "fontName",
                 "fontWeight": "fontWeight",
                 "backgroundColor": "color",
@@ -13183,7 +13236,6 @@
               "name": "custom",
               "raw": {
                 "fontSize": "fontSize",
-                "textLineHeight": "lineHeight",
                 "color": "color",
                 "outerBorderColor": "color",
                 "leftIcon": "icon",

package/lib/Box/Box.js

@@ -33,28 +33,41 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * @typedef {import('../utils/props/spacingProps.js').SpacingOptions} SpacingOptions
  */
 
-const selectBoxStyles = tokens => {
-  let styles = {
-    backgroundColor: tokens.backgroundColor
+const selectBoxStyles = _ref => {
+  let {
+    backgroundColor,
+    gradient,
+    borderWidth,
+    borderColor,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    ...rest
+  } = _ref;
+  const styles = {
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius
   };
 
-  if (tokens.gradient) {
+  if (gradient) {
     const {
-      gradient: {
-        angle,
-        stops: [stopOne, stopTwo]
-      }
-    } = tokens;
-    styles = { ...styles,
-      backgroundImage: `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`
-    };
+      angle,
+      stops: [stopOne, stopTwo]
+    } = gradient;
+    styles.backgroundImage = `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`;
   }
 
   const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']; // Only set on styles if token provided because we spread this object after the spacing scale values
 
   paddings.forEach(side => {
-    if (tokens[side]) {
-      styles[side] = tokens[side];
+    if (rest[side]) {
+      styles[side] = rest[side];
     }
   });
   return styles;
@@ -126,7 +139,7 @@ const selectBoxStyles = tokens => {
  */
 
 
-const Box = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+const Box = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     space,
     horizontal = space,
@@ -145,7 +158,7 @@ const Box = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     testID,
     dataSet,
     ...rest
-  } = _ref;
+  } = _ref2;
   const props = {
     accessibilityRole,
     ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),

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

@@ -84,9 +84,10 @@ const ExpandCollapseControl = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) =
     tokens,
     accessibilityRole = 'button',
     variant,
+    isMiniExpandCollapse = false,
     ...rest
   } = _ref3;
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ExpandCollapseControl', tokens, variant);
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)(isMiniExpandCollapse ? 'ExpandCollapseMiniControl' : 'ExpandCollapseControl', tokens, variant);
   const selectedProps = selectProps({
     accessibilityRole,
     ...rest,

package/lib/ExpandCollapse/Panel.js

@@ -70,6 +70,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
     children,
     tokens,
     variant,
+    isMiniExpandCollapse = false,
     controlRef,
     ...rest
   } = _ref2;
@@ -80,7 +81,7 @@ const ExpandCollapsePanel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) =>
       expanded: isExpanded
     }
   });
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ExpandCollapsePanel', tokens, variant, {
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)(isMiniExpandCollapse ? 'ExpandCollapseMiniPanel' : 'ExpandCollapsePanel', tokens, variant, {
     expanded: isExpanded
   });
 
@@ -116,11 +117,12 @@ 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: {
         borderTopColor: themeTokens.expandDividerColor,
-        borderTopWidth: themeTokens.expanddDividerWidth,
+        borderTopWidth: themeTokens.expandDividerWidth,
         marginLeft: themeTokens.contentPaddingLeft,
         marginRight: themeTokens.contentPaddingRight
       }

package/lib/Link/ChevronLink.js

@@ -46,7 +46,6 @@ const ChevronLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       rightIcon,
       iconDisplace,
       height,
-      textLineHeight,
       fontSize,
       ...otherTokens
     } = getChevronTokens(linkState);
@@ -54,7 +53,6 @@ const ChevronLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     return { ...linkTokens,
       height,
       blockFontSize: tokens.fontSize ?? fontSize,
-      textLineHeight,
       icon: direction === 'right' ? rightIcon : leftIcon,
       iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
     };

package/lib/Link/LinkBase.js

@@ -63,13 +63,11 @@ const selectOuterBorderStyles = _ref => {
 const selectTextStyles = _ref2 => {
   let {
     color,
-    textLineHeight,
     blockFontSize
   } = _ref2;
   return {
     color,
     ...(0, _ThemeProvider.applyTextStyles)({
-      lineHeight: textLineHeight,
       blockFontSize
     }),
     ..._Platform.default.select({

package/lib/Search/Search.js

@@ -108,7 +108,10 @@ const Search = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     initialValue,
     onChange
   });
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Search', tokens, variant);
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Search', tokens, {
+    inactive,
+    ...variant
+  });
   const buttonTokens = (0, _ThemeProvider.useThemeTokens)('SearchButton', tokens, variant);
   const getThemeTokens = (0, _ThemeProvider.useThemeTokensCallback)('Search', tokens, variant);
   const getButtonTokens = (0, _ThemeProvider.useThemeTokensCallback)('SearchButton', tokens, variant); // TODO: support overriding the a11y props using a custom dictionary

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/Box/Box.js

@@ -13,28 +13,41 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * @typedef {import('../utils/props/spacingProps.js').SpacingOptions} SpacingOptions
  */
 
-const selectBoxStyles = tokens => {
-  let styles = {
-    backgroundColor: tokens.backgroundColor
+const selectBoxStyles = _ref => {
+  let {
+    backgroundColor,
+    gradient,
+    borderWidth,
+    borderColor,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    ...rest
+  } = _ref;
+  const styles = {
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius
   };
 
-  if (tokens.gradient) {
+  if (gradient) {
     const {
-      gradient: {
-        angle,
-        stops: [stopOne, stopTwo]
-      }
-    } = tokens;
-    styles = { ...styles,
-      backgroundImage: `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`
-    };
+      angle,
+      stops: [stopOne, stopTwo]
+    } = gradient;
+    styles.backgroundImage = `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`;
   }
 
   const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']; // Only set on styles if token provided because we spread this object after the spacing scale values
 
   paddings.forEach(side => {
-    if (tokens[side]) {
-      styles[side] = tokens[side];
+    if (rest[side]) {
+      styles[side] = rest[side];
     }
   });
   return styles;
@@ -106,7 +119,7 @@ const selectBoxStyles = tokens => {
  */
 
 
-const Box = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Box = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     space,
     horizontal = space,
@@ -125,7 +138,7 @@ const Box = /*#__PURE__*/forwardRef((_ref, ref) => {
     testID,
     dataSet,
     ...rest
-  } = _ref;
+  } = _ref2;
   const props = {
     accessibilityRole,
     ...getA11yPropsFromHtmlTag(tag, accessibilityRole),

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)

package/lib-module/ExpandCollapse/Control.js

@@ -66,9 +66,10 @@ const ExpandCollapseControl = /*#__PURE__*/forwardRef((_ref3, ref) => {
     tokens,
     accessibilityRole = 'button',
     variant,
+    isMiniExpandCollapse = false,
     ...rest
   } = _ref3;
-  const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant);
+  const getTokens = useThemeTokensCallback(isMiniExpandCollapse ? 'ExpandCollapseMiniControl' : 'ExpandCollapseControl', tokens, variant);
   const selectedProps = selectProps({
     accessibilityRole,
     ...rest,

package/lib-module/ExpandCollapse/Panel.js

@@ -48,6 +48,7 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref2, ref) => {
     children,
     tokens,
     variant,
+    isMiniExpandCollapse = false,
     controlRef,
     ...rest
   } = _ref2;
@@ -58,7 +59,7 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref2, ref) => {
       expanded: isExpanded
     }
   });
-  const themeTokens = useThemeTokens('ExpandCollapsePanel', tokens, variant, {
+  const themeTokens = useThemeTokens(isMiniExpandCollapse ? 'ExpandCollapseMiniPanel' : 'ExpandCollapsePanel', tokens, variant, {
     expanded: isExpanded
   });
 
@@ -94,11 +95,12 @@ const ExpandCollapsePanel = /*#__PURE__*/forwardRef((_ref2, ref) => {
       variant: variant,
       onPress: handleControlPress,
       ref: controlRef,
+      isMiniExpandCollapse: isMiniExpandCollapse,
       children: control
     }), isExpanded && /*#__PURE__*/_jsx(View, {
       style: {
         borderTopColor: themeTokens.expandDividerColor,
-        borderTopWidth: themeTokens.expanddDividerWidth,
+        borderTopWidth: themeTokens.expandDividerWidth,
         marginLeft: themeTokens.contentPaddingLeft,
         marginRight: themeTokens.contentPaddingRight
       }

package/lib-module/Link/ChevronLink.js

@@ -28,7 +28,6 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
       rightIcon,
       iconDisplace,
       height,
-      textLineHeight,
       fontSize,
       ...otherTokens
     } = getChevronTokens(linkState);
@@ -36,7 +35,6 @@ const ChevronLink = /*#__PURE__*/forwardRef((_ref, ref) => {
     return { ...linkTokens,
       height,
       blockFontSize: tokens.fontSize ?? fontSize,
-      textLineHeight,
       icon: direction === 'right' ? rightIcon : leftIcon,
       iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
     };

package/lib-module/Link/LinkBase.js

@@ -38,13 +38,11 @@ const selectOuterBorderStyles = _ref => {
 const selectTextStyles = _ref2 => {
   let {
     color,
-    textLineHeight,
     blockFontSize
   } = _ref2;
   return {
     color,
     ...applyTextStyles({
-      lineHeight: textLineHeight,
       blockFontSize
     }),
     ...Platform.select({

package/lib-module/Search/Search.js

@@ -85,7 +85,10 @@ const Search = /*#__PURE__*/forwardRef((_ref3, ref) => {
     initialValue,
     onChange
   });
-  const themeTokens = useThemeTokens('Search', tokens, variant);
+  const themeTokens = useThemeTokens('Search', tokens, {
+    inactive,
+    ...variant
+  });
   const buttonTokens = useThemeTokens('SearchButton', tokens, variant);
   const getThemeTokens = useThemeTokensCallback('Search', tokens, variant);
   const getButtonTokens = useThemeTokensCallback('SearchButton', tokens, variant); // TODO: support overriding the a11y props using a custom dictionary

package/lib-module/Skeleton/Skeleton.js

@@ -75,11 +75,18 @@ const Skeleton = /*#__PURE__*/forwardRef((_ref5, ref) => {
     }
   } : // Size by an index on the spacing scale (getting default index from theme if none provided)
   sizeIndex || themeTokens.size;
-  const skeletonHeight = useSpacingScale(spacingScaleValue);
-  const nativeAnimation = useSkeletonNativeAnimation();
+  const skeletonHeight = useSpacingScale(spacingScaleValue); // Animation color and animation duration
+
+  const {
+    secondColor,
+    animationDuration
+  } = themeTokens;
+  const nativeAnimation = useSkeletonNativeAnimation({
+    animationDuration
+  });
 
   const getAnimationBasedOnPlatform = () => {
-    const animation = Platform.OS === 'web' ? skeletonWebAnimation : nativeAnimation; // We must pass the animation styles through `StyleSheet.create`
+    const animation = Platform.OS === 'web' ? skeletonWebAnimation(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.create({

package/lib-module/Skeleton/skeleton.constant.js

@@ -1,3 +1,2 @@
 export const DEFAULT_OPACITY = 1;
-export const OPACITY_STOP = 0.4;
-export const ANIMATION_DURATION = 1500;
+export const OPACITY_STOP = 0.4;

package/lib-module/Skeleton/skeletonWebAnimation.js

@@ -1,18 +1,15 @@
-import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
-export default {
-  animationDuration: `${ANIMATION_DURATION}ms`,
-  animationTimingFunction: 'ease-in-out',
-  animationDelay: '0.5s',
-  animationIterationCount: 'infinite',
-  animationKeyframes: {
-    '0%': {
-      opacity: DEFAULT_OPACITY
-    },
-    '50%': {
-      opacity: OPACITY_STOP
-    },
-    '100%': {
-      opacity: DEFAULT_OPACITY
+const skeletonWebAnimation = (secondColor, animationTime) => {
+  return {
+    animationDuration: `${animationTime}ms`,
+    animationTimingFunction: 'ease-in-out',
+    animationDelay: '0.5s',
+    animationIterationCount: 'infinite',
+    animationKeyframes: {
+      '50%': {
+        backgroundColor: secondColor
+      }
     }
-  }
-};
+  };
+};
+
+export default skeletonWebAnimation;

package/lib-module/Skeleton/useSkeletonNativeAnimation.js

@@ -1,18 +1,23 @@
 import { useEffect, useRef } from 'react';
 import Animated from "react-native-web/dist/exports/Animated";
 import Platform from "react-native-web/dist/exports/Platform";
-import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
+import { DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
 
-const useSkeletonNativeAnimation = () => {
+const useSkeletonNativeAnimation = _ref => {
+  let {
+    animationDuration
+  } = _ref;
   const fadeAnimation = useRef(new Animated.Value(DEFAULT_OPACITY)).current;
+  /* eslint-disable react-hooks/exhaustive-deps */
+
   useEffect(() => {
     const fade = Animated.sequence([Animated.timing(fadeAnimation, {
       toValue: OPACITY_STOP,
-      duration: ANIMATION_DURATION,
+      duration: animationDuration,
       useNativeDriver: Platform.OS !== 'web'
     }), Animated.timing(fadeAnimation, {
       toValue: DEFAULT_OPACITY,
-      duration: ANIMATION_DURATION,
+      duration: animationDuration,
       useNativeDriver: Platform.OS !== 'web'
     })]);
     Animated.loop(fade).start();

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.2.1",
-    "@telus-uds/system-theme-tokens": "^2.28.0",
+    "@telus-uds/system-theme-tokens": "^2.30.0",
     "airbnb-prop-types": "^2.16.0",
     "lodash.debounce": "^4.0.8",
     "lodash.merge": "^4.6.2",
@@ -72,5 +72,5 @@
   "standard-engine": {
     "skip": true
   },
-  "version": "1.46.0"
+  "version": "1.48.0"
 }

package/src/Box/Box.jsx

@@ -23,26 +23,39 @@ const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, vie
  * @typedef {import('../utils/props/spacingProps.js').SpacingOptions} SpacingOptions
  */
 
-const selectBoxStyles = (tokens) => {
-  let styles = { backgroundColor: tokens.backgroundColor }
-  if (tokens.gradient) {
+const selectBoxStyles = ({
+  backgroundColor,
+  gradient,
+  borderWidth,
+  borderColor,
+  borderTopLeftRadius,
+  borderTopRightRadius,
+  borderBottomLeftRadius,
+  borderBottomRightRadius,
+  ...rest
+}) => {
+  const styles = {
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius
+  }
+  if (gradient) {
     const {
-      gradient: {
-        angle,
-        stops: [stopOne, stopTwo]
-      }
-    } = tokens
-    styles = {
-      ...styles,
-      backgroundImage: `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`
-    }
+      angle,
+      stops: [stopOne, stopTwo]
+    } = gradient
+    styles.backgroundImage = `linear-gradient(${angle}deg, ${stopOne.color}, 75% , ${stopTwo.color})`
   }
 
   const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']
   // Only set on styles if token provided because we spread this object after the spacing scale values
   paddings.forEach((side) => {
-    if (tokens[side]) {
-      styles[side] = tokens[side]
+    if (rest[side]) {
+      styles[side] = rest[side]
     }
   })
   return styles

package/src/Button/ButtonBase.jsx

@@ -30,7 +30,6 @@ const getOuterBorderOffset = ({ outerBorderGap = 0, outerBorderWidth = 0 }) =>
   outerBorderGap + outerBorderWidth
 
 const selectOuterContainerStyles = ({
-  alignSelf,
   opacity,
   outerBorderColor,
   outerBorderWidth,
@@ -38,7 +37,11 @@ const selectOuterContainerStyles = ({
   borderRadius,
   outerBackgroundColor
 }) => ({
-  alignSelf,
+  ...Platform.select({
+    native: {
+      alignSelf: 'flex-start'
+    }
+  }),
   backgroundColor: outerBackgroundColor,
   opacity,
   ...applyOuterBorder({
@@ -162,6 +165,7 @@ const selectWebOnlyStyles = (inactive, themeTokens, { accessibilityRole }) => {
     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)
     },

package/src/ExpandCollapse/Control.jsx

@@ -52,10 +52,23 @@ function selectIconTokens(tokens) {
 
 const ExpandCollapseControl = forwardRef(
   (
-    { onPress, isExpanded, children, tokens, accessibilityRole = 'button', variant, ...rest },
+    {
+      onPress,
+      isExpanded,
+      children,
+      tokens,
+      accessibilityRole = 'button',
+      variant,
+      isMiniExpandCollapse = false,
+      ...rest
+    },
     ref
   ) => {
-    const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant)
+    const getTokens = useThemeTokensCallback(
+      isMiniExpandCollapse ? 'ExpandCollapseMiniControl' : 'ExpandCollapseControl',
+      tokens,
+      variant
+    )
 
     const selectedProps = selectProps({
       accessibilityRole,

package/src/ExpandCollapse/Panel.jsx

@@ -51,6 +51,7 @@ const ExpandCollapsePanel = forwardRef(
       children,
       tokens,
       variant,
+      isMiniExpandCollapse = false,
       controlRef,
       ...rest
     },
@@ -67,9 +68,14 @@ const ExpandCollapsePanel = forwardRef(
       }
     })
 
-    const themeTokens = useThemeTokens('ExpandCollapsePanel', tokens, variant, {
-      expanded: isExpanded
-    })
+    const themeTokens = useThemeTokens(
+      isMiniExpandCollapse ? 'ExpandCollapseMiniPanel' : 'ExpandCollapsePanel',
+      tokens,
+      variant,
+      {
+        expanded: isExpanded
+      }
+    )
 
     const handleControlPress = (event) => {
       onToggle(panelId, event)
@@ -100,6 +106,7 @@ const ExpandCollapsePanel = forwardRef(
           variant={variant}
           onPress={handleControlPress}
           ref={controlRef}
+          isMiniExpandCollapse={isMiniExpandCollapse}
         >
           {control}
         </ExpandCollapseControl>
@@ -107,7 +114,7 @@ const ExpandCollapsePanel = forwardRef(
           <View
             style={{
               borderTopColor: themeTokens.expandDividerColor,
-              borderTopWidth: themeTokens.expanddDividerWidth,
+              borderTopWidth: themeTokens.expandDividerWidth,
               marginLeft: themeTokens.contentPaddingLeft,
               marginRight: themeTokens.contentPaddingRight
             }}

package/src/Link/ChevronLink.jsx

@@ -15,22 +15,15 @@ const ChevronLink = forwardRef(
   ({ direction = 'right', children, tokens = {}, variant, dataSet, ...linkProps }, ref) => {
     const getChevronTokens = useThemeTokensCallback('ChevronLink', tokens, variant)
     const applyChevronTokens = (linkState) => {
-      const {
-        leftIcon,
-        rightIcon,
-        iconDisplace,
-        height,
-        textLineHeight,
-        fontSize,
-        ...otherTokens
-      } = getChevronTokens(linkState)
+      const { leftIcon, rightIcon, iconDisplace, height, fontSize, ...otherTokens } =
+        getChevronTokens(linkState)
+
       const linkTokens = selectTokens('Link', otherTokens)
 
       return {
         ...linkTokens,
         height,
         blockFontSize: tokens.fontSize ?? fontSize,
-        textLineHeight,
         icon: direction === 'right' ? rightIcon : leftIcon,
         iconTranslateX: iconDisplace * (direction === 'right' ? 1 : -1) || 0
       }

package/src/Link/LinkBase.jsx

@@ -42,10 +42,10 @@ const selectOuterBorderStyles = ({
       }
     : {}
 
-const selectTextStyles = ({ color, textLineHeight, blockFontSize }) => {
+const selectTextStyles = ({ color, blockFontSize }) => {
   return {
     color,
-    ...applyTextStyles({ lineHeight: textLineHeight, blockFontSize }),
+    ...applyTextStyles({ blockFontSize }),
     ...Platform.select({
       web: {
         // TODO: https://github.com/telus/universal-design-system/issues/487
@@ -168,7 +168,6 @@ const LinkBase = forwardRef(
           const themeTokens = resolveLinkTokens(linkState)
           const textStyles = selectTextStyles(themeTokens)
           const iconTokens = selectIconTokens(themeTokens)
-
           // TODO: may need to apply some smarter text inheritance here if inline to avoid native
           // issues like double-application of line heights breaking align-items: baseline
           const blockTextStyles = selectBlockStyles(themeTokens, themeOptions)

package/src/Search/Search.jsx

@@ -81,9 +81,8 @@ const Search = forwardRef(
       onChange
     })
 
-    const themeTokens = useThemeTokens('Search', tokens, variant)
+    const themeTokens = useThemeTokens('Search', tokens, { inactive, ...variant })
     const buttonTokens = useThemeTokens('SearchButton', tokens, variant)
-
     const getThemeTokens = useThemeTokensCallback('Search', tokens, variant)
     const getButtonTokens = useThemeTokensCallback('SearchButton', tokens, variant)
 

package/src/Skeleton/Skeleton.jsx

@@ -63,10 +63,17 @@ const Skeleton = forwardRef(
         : // Size by an index on the spacing scale (getting default index from theme if none provided)
           sizeIndex || themeTokens.size
     const skeletonHeight = useSpacingScale(spacingScaleValue)
-    const nativeAnimation = useSkeletonNativeAnimation()
+
+    // Animation color and animation duration
+    const { secondColor, animationDuration } = themeTokens
+
+    const nativeAnimation = useSkeletonNativeAnimation({ animationDuration })
 
     const getAnimationBasedOnPlatform = () => {
-      const animation = Platform.OS === 'web' ? skeletonWebAnimation : nativeAnimation
+      const animation =
+        Platform.OS === 'web'
+          ? skeletonWebAnimation(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.create({ animation })

package/src/Skeleton/skeleton.constant.js

@@ -1,3 +1,2 @@
 export const DEFAULT_OPACITY = 1
 export const OPACITY_STOP = 0.4
-export const ANIMATION_DURATION = 1500

package/src/Skeleton/skeletonWebAnimation.js

@@ -1,13 +1,13 @@
-import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant'
-
-export default {
-  animationDuration: `${ANIMATION_DURATION}ms`,
-  animationTimingFunction: 'ease-in-out',
-  animationDelay: '0.5s',
-  animationIterationCount: 'infinite',
-  animationKeyframes: {
-    '0%': { opacity: DEFAULT_OPACITY },
-    '50%': { opacity: OPACITY_STOP },
-    '100%': { opacity: DEFAULT_OPACITY }
+const skeletonWebAnimation = (secondColor, animationTime) => {
+  return {
+    animationDuration: `${animationTime}ms`,
+    animationTimingFunction: 'ease-in-out',
+    animationDelay: '0.5s',
+    animationIterationCount: 'infinite',
+    animationKeyframes: {
+      '50%': { backgroundColor: secondColor }
+    }
   }
 }
+
+export default skeletonWebAnimation

package/src/Skeleton/useSkeletonNativeAnimation.js

@@ -1,20 +1,21 @@
 import { useEffect, useRef } from 'react'
 import { Animated, Platform } from 'react-native'
-import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant'
+import { DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant'
 
-const useSkeletonNativeAnimation = () => {
+const useSkeletonNativeAnimation = ({ animationDuration }) => {
   const fadeAnimation = useRef(new Animated.Value(DEFAULT_OPACITY)).current
 
+  /* eslint-disable react-hooks/exhaustive-deps */
   useEffect(() => {
     const fade = Animated.sequence([
       Animated.timing(fadeAnimation, {
         toValue: OPACITY_STOP,
-        duration: ANIMATION_DURATION,
+        duration: animationDuration,
         useNativeDriver: Platform.OS !== 'web'
       }),
       Animated.timing(fadeAnimation, {
         toValue: DEFAULT_OPACITY,
-        duration: ANIMATION_DURATION,
+        duration: animationDuration,
         useNativeDriver: Platform.OS !== 'web'
       })
     ])