@telus-uds/components-base 1.24.2 → 2.0.0

package/CHANGELOG.md

@@ -1,12 +1,39 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Thu, 19 Jan 2023 21:35:52 GMT and should not be manually modified.
+This log was last generated on Thu, 09 Feb 2023 23:34:12 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 2.0.0
+
+Thu, 09 Feb 2023 23:34:12 GMT
+
+### Major changes
+
+- chore: new modal overlay component for multiselectfilter (mauricio.batresmontejo@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.10.0
+
+### Patches
+
+- fixing icon gap to the right side (evander.owusu@telus.com)
+- Fixing carousel StepTracker variant for mobile (tiagohldb@gmail.com)
+- Tooltip implementation is separated into web and native for a fix on smaller screen size (akshay.pandey@telus.com)
+
+## 1.25.0
+
+Wed, 01 Feb 2023 20:56:49 GMT
+
+### Minor changes
+
+- Floating ui integration for Tooltip component (tiagohldb@gmail.com)
+
+### Patches
+
+- Fixing sub and sup elements line height (tiagohldb@gmail.com)
+
 ## 1.24.2
 
-Thu, 19 Jan 2023 21:35:52 GMT
+Thu, 19 Jan 2023 21:39:36 GMT
 
 ### Patches
 

package/component-docs.json

@@ -58,6 +58,8 @@
         "shadow": "shadow",
         "fontSize": "fontSize",
         "color": "color",
+        "dividerColor": "color",
+        "subtitleColor": "color",
         "lineHeight": "lineHeight",
         "textAlign": "flexJustifyContent",
         "alignSelf": "flexAlign",
@@ -103,6 +105,7 @@
         "paddingRight": "size",
         "paddingTop": "size",
         "paddingBottom": "size",
+        "height": "size",
         "width": "size",
         "minWidth": "size",
         "outerBorderColor": "color",
@@ -5867,6 +5870,13 @@
             "required": true,
             "description": "The text displayed to the user in a ButtonDropdown."
           },
+          "subtitle": {
+            "type": {
+              "name": "string"
+            },
+            "required": false,
+            "description": "The text for the subtitle"
+          },
           "variant": {
             "type": {
               "name": "objectOf",
@@ -5909,6 +5919,8 @@
                 "shadow": "shadow",
                 "fontSize": "fontSize",
                 "color": "color",
+                "dividerColor": "color",
+                "subtitleColor": "color",
                 "lineHeight": "lineHeight",
                 "textAlign": "flexJustifyContent",
                 "alignSelf": "flexAlign",
@@ -10672,7 +10684,7 @@
           },
           "panelNavigation": {
             "defaultValue": {
-              "value": "thumbnails ? (\n  <CarouselThumbnailNavigation thumbnails={thumbnails} />\n) : (\n  <CarouselStepTracker />\n)",
+              "value": "thumbnails ? (\n  <CarouselThumbnailNavigation thumbnails={thumbnails} />\n) : (\n  <CarouselStepTracker variant={stepTrackerVariant} />\n)",
               "computed": false
             },
             "type": {
@@ -10824,6 +10836,27 @@
             "required": false,
             "description": ""
           },
+          "stepTrackerVariant": {
+            "type": {
+              "name": "objectOf",
+              "value": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "number"
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
+            },
+            "required": false,
+            "description": "Prop related to StepTracker Variants"
+          },
           "children": {
             "type": {
               "name": "union",
@@ -11172,6 +11205,27 @@
             "required": false,
             "description": ""
           },
+          "stepTrackerVariant": {
+            "type": {
+              "name": "objectOf",
+              "value": {
+                "name": "union",
+                "value": [
+                  {
+                    "name": "string"
+                  },
+                  {
+                    "name": "number"
+                  },
+                  {
+                    "name": "bool"
+                  }
+                ]
+              }
+            },
+            "required": false,
+            "description": "Prop related to StepTracker Variants"
+          },
           "children": {
             "type": {
               "name": "union",

package/lib/Button/ButtonBase.js

@@ -232,7 +232,8 @@ const ButtonBase = /*#__PURE__*/(0, _react.forwardRef)((_ref9, ref) => {
 
   const extraButtonState = {
     inactive,
-    selected
+    selected,
+    iconPosition
   };
 
   const resolveButtonTokens = pressableState => (0, _utils.resolvePressableTokens)(tokens, pressableState, extraButtonState);

package/lib/Carousel/Carousel.js

@@ -165,6 +165,7 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     children,
     itemLabel = 'item',
     previousNextNavigationPosition = 'inside',
+    stepTrackerVariant,
     previousNextIconSize = 'default',
     minDistanceToCapture = 5,
     minDistanceForAction = 0.2,
@@ -179,7 +180,9 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     thumbnails = undefined,
     panelNavigation = thumbnails ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselThumbnailNavigation.default, {
       thumbnails: thumbnails
-    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselStepTracker.default, {}),
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselStepTracker.default, {
+      variant: stepTrackerVariant
+    }),
     tag = 'ul',
     accessibilityRole,
     accessibilityLabel,
@@ -562,6 +565,11 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
   tokens: (0, _utils.getTokensPropType)('Carousel'),
   variant: _utils.variantProp.propType,
 
+  /**
+   * Prop related to StepTracker Variants
+   */
+  stepTrackerVariant: _utils.variantProp.propType,
+
   /**
    * Slides to render in Carousel. Wrap individual slides in `Carousel.Item`
    */

package/lib/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -13,11 +13,16 @@ var _StepTracker = _interopRequireDefault(require("../../StepTracker"));
 
 var _StackView = _interopRequireDefault(require("../../StackView"));
 
+var _utils = require("../../utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const CarouselStepTracker = () => {
+const CarouselStepTracker = _ref => {
+  let {
+    variant
+  } = _ref;
   const {
     activeIndex,
     totalItems,
@@ -47,10 +52,14 @@ const CarouselStepTracker = () => {
         stepLabel: getCopyWithPlaceholders('stepLabel'),
         stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
       },
-      tokens: stepTrackerTokens
+      tokens: stepTrackerTokens,
+      variant: variant
     })
   });
 };
 
+CarouselStepTracker.propTypes = {
+  variant: _utils.variantProp.propType
+};
 var _default = CarouselStepTracker;
 exports.default = _default;

package/lib/MultiSelectFilter/ModalOverlay.js

@@ -0,0 +1,136 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _portal = require("@gorhom/portal");
+
+var _utils = require("../utils");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
+var _Card = _interopRequireDefault(require("../Card"));
+
+var _IconButton = _interopRequireDefault(require("../IconButton"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const staticStyles = _StyleSheet.default.create({
+  positioner: {
+    flex: 1,
+    // Grow to maxWidth when possible, shrink when not possible
+    position: 'absolute',
+    height: 330,
+    paddingTop: 5,
+    zIndex: 10000 // Position on top of all the other overlays, including backdrops and modals
+
+  },
+  closeButtonContainer: {
+    position: 'absolute',
+    top: 0,
+    right: 0,
+    zIndex: 1
+  }
+});
+
+const selectCloseButtonContainerStyles = _ref => {
+  let {
+    paddingRight,
+    paddingTop
+  } = _ref;
+  return {
+    paddingRight,
+    paddingTop
+  };
+};
+
+const selectPaddingContainerStyles = _ref2 => {
+  let {
+    paddingTop,
+    paddingLeft,
+    paddingRight
+  } = _ref2;
+  return {
+    paddingBottom: 35,
+    paddingTop,
+    paddingLeft,
+    paddingRight
+  };
+};
+
+const ModalOverlay = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    children,
+    tokens,
+    variant,
+    copy,
+    onClose
+  } = _ref3;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
+    viewport,
+    maxWidth: false
+  });
+  const {
+    closeIcon: CloseIconComponent,
+    maxWidth
+  } = themeTokens;
+  const getCopy = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    copy
+  });
+  const closeLabel = getCopy('closeButton');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_portal.Portal, {
+      ref: ref,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [{
+          minWidth: maxWidth
+        }, staticStyles.positioner],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.default, {
+          tokens: selectPaddingContainerStyles(themeTokens),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
+              onPress: onClose,
+              icon: CloseIconComponent,
+              accessibilityRole: "button",
+              accessibilityLabel: closeLabel,
+              tokens: (0, _utils.selectTokens)('IconButton', themeTokens, 'close')
+            })
+          }), children]
+        })
+      })
+    })
+  });
+});
+ModalOverlay.displayName = 'ModalOverlay';
+ModalOverlay.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('Modal'),
+  copy: _utils.copyPropTypes,
+  onClose: _propTypes.default.func
+};
+var _default = ModalOverlay;
+exports.default = _default;

package/lib/MultiSelectFilter/MultiSelectFilter.js

@@ -25,8 +25,6 @@ var _Divider = _interopRequireDefault(require("../Divider"));
 
 var _FlexGrid = _interopRequireDefault(require("../FlexGrid"));
 
-var _Modal = _interopRequireDefault(require("../Modal"));
-
 var _Spacer = _interopRequireDefault(require("../Spacer"));
 
 var _StackView = _interopRequireDefault(require("../StackView"));
@@ -35,6 +33,8 @@ var _Typography = _interopRequireDefault(require("../Typography"));
 
 var _Link = require("../Link");
 
+var _ModalOverlay = _interopRequireDefault(require("./ModalOverlay"));
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -47,9 +47,35 @@ const {
   Col,
   Row
 } = _FlexGrid.default;
-const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+
+const selectSubTitleTokens = _ref => {
+  let {
+    subtitleColor
+  } = _ref;
+  return {
+    color: subtitleColor
+  };
+};
+
+const selectDividerToknes = _ref2 => {
+  let {
+    dividerColor,
+    width,
+    decorative = true,
+    weight = 'thin'
+  } = _ref2;
+  return {
+    color: dividerColor,
+    width,
+    decorative,
+    weight
+  };
+};
+
+const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   let {
     label,
+    subtitle,
     id = label,
     variant,
     tokens,
@@ -63,7 +89,7 @@ const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     inactive = false,
     rowLimit = 12,
     ...rest
-  } = _ref;
+  } = _ref3;
   const {
     currentValues,
     setValues
@@ -74,6 +100,7 @@ const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     onChange,
     readOnly
   });
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ButtonDropdown', tokens, variant);
   const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', tokens, variant);
 
   const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getItemTokens(buttonState));
@@ -101,7 +128,7 @@ const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
 
   const handleChange = event => {
     if (pressHandlers.onPress) pressHandlers === null || pressHandlers === void 0 ? void 0 : pressHandlers.onPress(event);
-    setIsOpen(true);
+    setIsOpen(!isOpen);
   };
 
   const onApply = e => {
@@ -110,12 +137,20 @@ const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   };
 
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, {
-      isOpen: isOpen,
-      onClose: () => setIsOpen(false),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonDropdown, {
+      ref: ref,
+      ...pressHandlers,
+      value: isOpen,
+      selected: isSelected,
+      label: label,
+      onChange: handleChange,
+      tokens: getButtonTokens,
+      inactive: inactive
+    }, id), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalOverlay.default, {
       variant: {
         width: colSize > 1 ? 'size576' : 's'
       },
+      onClose: () => setIsOpen(false),
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           variant: {
@@ -123,10 +158,20 @@ const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           },
           children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
         })
+      }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+          space: 5
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
+            variant: {
+              size: 'h5'
+            },
+            tokens: selectSubTitleTokens(themeTokens),
+            children: subtitle
+          })
+        })]
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
         space: 4
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
-        space: 1
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
         scroll: true,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
@@ -143,12 +188,9 @@ const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           }, i))
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
-        variant: {
-          width: 'full',
-          color: 'E3E6E8',
-          decorative: true,
-          weight: 'thin'
-        },
+        variant: selectDividerToknes({ ...themeTokens,
+          width: 'full'
+        }),
         space: 4
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
@@ -172,16 +214,7 @@ const MultiSelectFilter = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
           })]
         })
       })]
-    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.ButtonDropdown, {
-      ref: ref,
-      ...pressHandlers,
-      value: isOpen,
-      selected: isSelected,
-      label: label,
-      onChange: handleChange,
-      tokens: getButtonTokens,
-      inactive: inactive
-    }, id)]
+    })]
   });
 });
 MultiSelectFilter.displayName = 'MultiSelectFilter';
@@ -191,6 +224,11 @@ MultiSelectFilter.propTypes = {
    */
   label: _propTypes.default.string.isRequired,
 
+  /**
+   * The text for the subtitle
+   */
+  subtitle: _propTypes.default.string,
+
   /**
    * An optional unique string may be provided to identify the ButtonDropdown.
    * If not provided, the label is used.

package/lib/Typography/Typography.js

@@ -92,17 +92,42 @@ const Typography = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
     ...(0, _utils2.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
     ...selectContainerProps(rest)
   };
+
+  const resetTagStyling = child => {
+    if (typeof child === 'object' && ((child === null || child === void 0 ? void 0 : child.type) === 'sub' || (child === null || child === void 0 ? void 0 : child.type) === 'sup')) {
+      var _child$props;
+
+      const sanitizedChild = /*#__PURE__*/_react.default.cloneElement(child, {
+        style: { ...(child === null || child === void 0 ? void 0 : (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.style),
+          lineHeight: 0
+        }
+      });
+
+      return sanitizedChild;
+    }
+
+    return child;
+  };
+
+  const sanitizeChildren = () => {
+    if (Array.isArray(children)) {
+      return children.map(resetTagStyling);
+    }
+
+    return resetTagStyling(children);
+  };
+
   return block ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     ...containerProps,
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, { ...resolvedTextProps,
-      children: children
+      children: sanitizeChildren(children)
     })
   }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
     ref: ref,
     ...containerProps,
     ...resolvedTextProps,
-    children: children
+    children: sanitizeChildren(children)
   });
 });
 Typography.displayName = 'Typography';

package/lib-module/Button/ButtonBase.js

@@ -206,7 +206,8 @@ const ButtonBase = /*#__PURE__*/forwardRef((_ref9, ref) => {
   } = clickProps.toPressProps(rawRest);
   const extraButtonState = {
     inactive,
-    selected
+    selected,
+    iconPosition
   };
 
   const resolveButtonTokens = pressableState => resolvePressableTokens(tokens, pressableState, extraButtonState);

package/lib-module/Carousel/Carousel.js

@@ -135,6 +135,7 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     children,
     itemLabel = 'item',
     previousNextNavigationPosition = 'inside',
+    stepTrackerVariant,
     previousNextIconSize = 'default',
     minDistanceToCapture = 5,
     minDistanceForAction = 0.2,
@@ -149,7 +150,9 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     thumbnails = undefined,
     panelNavigation = thumbnails ? /*#__PURE__*/_jsx(CarouselThumbnailNavigation, {
       thumbnails: thumbnails
-    }) : /*#__PURE__*/_jsx(CarouselStepTracker, {}),
+    }) : /*#__PURE__*/_jsx(CarouselStepTracker, {
+      variant: stepTrackerVariant
+    }),
     tag = 'ul',
     accessibilityRole,
     accessibilityLabel,
@@ -504,6 +507,11 @@ Carousel.propTypes = { ...selectedSystemPropTypes,
   tokens: getTokensPropType('Carousel'),
   variant: variantProp.propType,
 
+  /**
+   * Prop related to StepTracker Variants
+   */
+  stepTrackerVariant: variantProp.propType,
+
   /**
    * Slides to render in Carousel. Wrap individual slides in `Carousel.Item`
    */

package/lib-module/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -2,9 +2,13 @@ import React from 'react';
 import { useCarousel } from '../CarouselContext';
 import StepTracker from '../../StepTracker';
 import StackView from '../../StackView';
+import { variantProp } from '../../utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 
-const CarouselStepTracker = () => {
+const CarouselStepTracker = _ref => {
+  let {
+    variant
+  } = _ref;
   const {
     activeIndex,
     totalItems,
@@ -34,9 +38,13 @@ const CarouselStepTracker = () => {
         stepLabel: getCopyWithPlaceholders('stepLabel'),
         stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
       },
-      tokens: stepTrackerTokens
+      tokens: stepTrackerTokens,
+      variant: variant
     })
   });
 };
 
+CarouselStepTracker.propTypes = {
+  variant: variantProp.propType
+};
 export default CarouselStepTracker;