@telus-uds/components-base 1.57.0 → 1.59.0

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Fri, 28 Jul 2023 18:10:45 GMT and should not be manually modified.
+This log was last generated on Tue, 08 Aug 2023 23:51:39 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.59.0
+
+Tue, 08 Aug 2023 23:51:39 GMT
+
+### Minor changes
+
+- `MultiSelectFilter`: Add custom `dictionary` prop and custom callback for `onConfirm` and `onCancel` (shahzaibkhalidmalik@outlook.com)
+- Added a Inverse story to Tabs stories (kyle.king2@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.41.0
+
+## 1.58.0
+
+Wed, 02 Aug 2023 18:13:48 GMT
+
+### Minor changes
+
+- added condition on applying "raised" in Carousel for next/prev buttons (kyle.king2@telus.com)
+
 ## 1.57.0
 
-Fri, 28 Jul 2023 18:10:45 GMT
+Fri, 28 Jul 2023 18:18:38 GMT
 
 ### Minor changes
 

package/component-docs.json

@@ -76,7 +76,10 @@
         "fontName": "fontName",
         "fontSize": "fontSize",
         "lineHeight": "lineHeight",
-        "stickyBackgroundColor": "color"
+        "stickyBackgroundColor": "color",
+        "fontColor": "color",
+        "borderColor": "color",
+        "borderWidth": "border"
       },
       "Image": {
         "borderRadius": "radius"
@@ -284,7 +287,8 @@
         "footnoteLinkColor": "color",
         "footnoteLinkFontName": "fontName",
         "footnoteLinkFontWeight": "fontWeight",
-        "footnoteLinkFontSize": "fontSize"
+        "footnoteLinkFontSize": "fontSize",
+        "footnoteLinkLineHeight": "lineHeight"
       },
       "ActivityIndicator": {
         "size": "size",
@@ -7312,6 +7316,28 @@
             "required": false,
             "description": "If provided sets maxHeight to be active"
           },
+          "onConfirm": {
+            "defaultValue": {
+              "value": "() => {}",
+              "computed": false
+            },
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "If provided, this function is called when the selection is confirmed."
+          },
+          "onCancel": {
+            "defaultValue": {
+              "value": "() => {}",
+              "computed": false
+            },
+            "type": {
+              "name": "func"
+            },
+            "required": false,
+            "description": "If provided, this function is called when `MultiSelectFilter` is closed."
+          },
           "copy": {
             "defaultValue": {
               "value": "'en'",
@@ -7366,6 +7392,29 @@
             "required": false,
             "description": "Sets the maximum number of items in one column. If number of items are more\nthan the `rowLimit`, they will be rendered in 2 columns."
           },
+          "dictionary": {
+            "defaultValue": {
+              "value": "{\n  en: {\n    filterByLabel: 'Filter by %{filterCategory}:',\n    applyButtonLabel: 'Apply',\n    clearButtonLabel: 'Clear'\n  },\n  fr: {\n    filterByLabel: 'Filtrer par %{filterCategory}:',\n    applyButtonLabel: 'Appliquer',\n    clearButtonLabel: 'Effacer'\n  }\n}",
+              "computed": false
+            },
+            "type": {
+              "name": "shape",
+              "value": {
+                "en": {
+                  "name": "custom",
+                  "raw": "dictionaryContentShape",
+                  "required": false
+                },
+                "fr": {
+                  "name": "custom",
+                  "raw": "dictionaryContentShape",
+                  "required": false
+                }
+              }
+            },
+            "required": false,
+            "description": "Custom dictionary containing the labels"
+          },
           "label": {
             "type": {
               "name": "string"

package/lib/Carousel/Carousel.js

@@ -461,7 +461,8 @@ const Carousel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
 
   const previousNextIconButtonVariants = {
     size: previousNextIconSize,
-    raised: true
+    raised: !(variant !== null && variant !== void 0 && variant.inverse) && true,
+    inverse: variant === null || variant === void 0 ? void 0 : variant.inverse
   };
 
   const getCopyWithPlaceholders = _react.default.useCallback(copyKey => {

package/lib/Carousel/CarouselThumbnail.js

@@ -104,7 +104,9 @@ const CarouselThumbnail = _ref2 => {
         pressed,
         focus: focused
       }));
-      return [pressableStyles, index === activeIndex && styles.selected];
+      return [pressableStyles, index === activeIndex && styles.selected, {
+        outline: 'none'
+      }];
     },
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
       accessibilityIgnoresInvertColors: true,

package/lib/MultiSelectFilter/MultiSelectFilter.js

@@ -93,10 +93,13 @@ const MultiSelectFilter = _ref3 => {
     initialValues,
     maxValues,
     onChange,
+    onConfirm = () => {},
+    onCancel = () => {},
     copy = 'en',
     readOnly = false,
     inactive = false,
     rowLimit = 12,
+    dictionary = _dictionary.default,
     ...rest
   } = _ref3;
   const viewport = (0, _ViewportProvider.useViewport)();
@@ -119,7 +122,7 @@ const MultiSelectFilter = _ref3 => {
   const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getItemTokens(buttonState));
 
   const getCopy = (0, _utils.useCopy)({
-    dictionary: _dictionary.default,
+    dictionary,
     copy
   });
   const colSizeNotMobile = items.length > rowLimit ? 2 : 1;
@@ -171,11 +174,19 @@ const MultiSelectFilter = _ref3 => {
   const onApply = e => {
     setValues(e);
     setIsOpen(false);
+    onConfirm(e);
   };
 
   const onClear = () => {
     setCheckedIds(() => []);
-    onApply([]);
+    setValues([]);
+    setIsOpen(false);
+    onCancel();
+  };
+
+  const onClose = () => {
+    setIsOpen(false);
+    onCancel();
   };
 
   const {
@@ -230,7 +241,7 @@ const MultiSelectFilter = _ref3 => {
       inactive: inactive
     }, id), isOpen && viewport === 'xs' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Modal.default, {
       isOpen: isOpen,
-      onClose: () => setIsOpen(false),
+      onClose: onClose,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Row, {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Typography.default, {
           tokens: { ...headerStyles,
@@ -294,7 +305,7 @@ const MultiSelectFilter = _ref3 => {
             children: getCopy('applyButtonLabel')
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.TextButton, {
-              onPress: () => onClear(),
+              onPress: onClear,
               children: getCopy('clearButtonLabel')
             })
           })]
@@ -302,7 +313,7 @@ const MultiSelectFilter = _ref3 => {
       })]
     }), isOpen && viewport !== 'xs' && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_ModalOverlay.default, {
       overlaidPosition: overlaidPosition,
-      onClose: () => setIsOpen(false),
+      onClose: onClose,
       maxHeight: maxHeight,
       maxHeightSize: maxHeightSize,
       maxWidthSize: maxWidthSize,
@@ -380,7 +391,7 @@ const MultiSelectFilter = _ref3 => {
             children: getCopy('applyButtonLabel')
           }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Box.default, {
             children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.TextButton, {
-              onPress: () => onClear(),
+              onPress: onClear,
               children: getCopy('clearButtonLabel')
             })
           })]
@@ -396,6 +407,13 @@ const styles = _StyleSheet.default.create({
   textContainerStyle: {
     marginRight: 52
   }
+}); // If a language dictionary entry is provided, it must contain every key
+
+
+const dictionaryContentShape = _propTypes.default.shape({
+  filterByLabel: _propTypes.default.string.isRequired,
+  applyButtonLabel: _propTypes.default.string.isRequired,
+  clearButtonLabel: _propTypes.default.string.isRequired
 });
 
 MultiSelectFilter.propTypes = {
@@ -472,11 +490,29 @@ MultiSelectFilter.propTypes = {
    */
   onChange: _propTypes.default.func,
 
+  /**
+   * If provided, this function is called when the selection is confirmed.
+   */
+  onConfirm: _propTypes.default.func,
+
+  /**
+   * If provided, this function is called when `MultiSelectFilter` is closed.
+   * */
+  onCancel: _propTypes.default.func,
+
   /**
    * Select English or French copy for the accessible label.
    */
   copy: _propTypes.default.oneOf(['en', 'fr']),
 
+  /**
+   * Custom dictionary containing the labels
+   */
+  dictionary: _propTypes.default.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+
   /**
    * If true, the ButtonDropdown cannot be selected by the user and simply show their current state.
    */

package/lib-module/Carousel/Carousel.js

@@ -405,7 +405,8 @@ const Carousel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
 
   const previousNextIconButtonVariants = {
     size: previousNextIconSize,
-    raised: true
+    raised: !(variant !== null && variant !== void 0 && variant.inverse) && true,
+    inverse: variant === null || variant === void 0 ? void 0 : variant.inverse
   };
   const getCopyWithPlaceholders = React.useCallback(copyKey => {
     const copyText = getCopy(copyKey).replace(/%\{title\}/g, title).replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, activeIndex + 1).replace(/%\{stepCount\}/g, childrenArray.length); // First word might be a lowercase placeholder: capitalize the first letter

package/lib-module/Carousel/CarouselThumbnail.js

@@ -88,7 +88,9 @@ const CarouselThumbnail = _ref2 => {
         pressed,
         focus: focused
       }));
-      return [pressableStyles, index === activeIndex && styles.selected];
+      return [pressableStyles, index === activeIndex && styles.selected, {
+        outline: 'none'
+      }];
     },
     children: /*#__PURE__*/_jsx(Image, {
       accessibilityIgnoresInvertColors: true,

package/lib-module/MultiSelectFilter/MultiSelectFilter.js

@@ -4,7 +4,7 @@ import View from "react-native-web/dist/exports/View";
 import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import { useThemeTokens, useThemeTokensCallback, applyTextStyles } from '../ThemeProvider';
 import { containUniqueFields, getTokensPropType, getPressHandlersWithArgs, selectTokens, useOverlaidPosition, useCopy, useMultipleInputValues, useResponsiveProp, variantProp } from '../utils';
-import dictionary from './dictionary';
+import defaultDictionary from './dictionary';
 import { useViewport } from '../ViewportProvider';
 import Box from '../Box';
 import { Button, ButtonDropdown } from '../Button';
@@ -62,10 +62,13 @@ const MultiSelectFilter = _ref3 => {
     initialValues,
     maxValues,
     onChange,
+    onConfirm = () => {},
+    onCancel = () => {},
     copy = 'en',
     readOnly = false,
     inactive = false,
     rowLimit = 12,
+    dictionary = defaultDictionary,
     ...rest
   } = _ref3;
   const viewport = useViewport();
@@ -140,11 +143,19 @@ const MultiSelectFilter = _ref3 => {
   const onApply = e => {
     setValues(e);
     setIsOpen(false);
+    onConfirm(e);
   };
 
   const onClear = () => {
     setCheckedIds(() => []);
-    onApply([]);
+    setValues([]);
+    setIsOpen(false);
+    onCancel();
+  };
+
+  const onClose = () => {
+    setIsOpen(false);
+    onCancel();
   };
 
   const {
@@ -199,7 +210,7 @@ const MultiSelectFilter = _ref3 => {
       inactive: inactive
     }, id), isOpen && viewport === 'xs' && /*#__PURE__*/_jsxs(Modal, {
       isOpen: isOpen,
-      onClose: () => setIsOpen(false),
+      onClose: onClose,
       children: [/*#__PURE__*/_jsx(Row, {
         children: /*#__PURE__*/_jsx(Typography, {
           tokens: { ...headerStyles,
@@ -263,7 +274,7 @@ const MultiSelectFilter = _ref3 => {
             children: getCopy('applyButtonLabel')
           }), /*#__PURE__*/_jsx(Box, {
             children: /*#__PURE__*/_jsx(TextButton, {
-              onPress: () => onClear(),
+              onPress: onClear,
               children: getCopy('clearButtonLabel')
             })
           })]
@@ -271,7 +282,7 @@ const MultiSelectFilter = _ref3 => {
       })]
     }), isOpen && viewport !== 'xs' && /*#__PURE__*/_jsxs(ModalOverlay, {
       overlaidPosition: overlaidPosition,
-      onClose: () => setIsOpen(false),
+      onClose: onClose,
       maxHeight: maxHeight,
       maxHeightSize: maxHeightSize,
       maxWidthSize: maxWidthSize,
@@ -349,7 +360,7 @@ const MultiSelectFilter = _ref3 => {
             children: getCopy('applyButtonLabel')
           }), /*#__PURE__*/_jsx(Box, {
             children: /*#__PURE__*/_jsx(TextButton, {
-              onPress: () => onClear(),
+              onPress: onClear,
               children: getCopy('clearButtonLabel')
             })
           })]
@@ -364,6 +375,12 @@ const styles = StyleSheet.create({
   textContainerStyle: {
     marginRight: 52
   }
+}); // If a language dictionary entry is provided, it must contain every key
+
+const dictionaryContentShape = PropTypes.shape({
+  filterByLabel: PropTypes.string.isRequired,
+  applyButtonLabel: PropTypes.string.isRequired,
+  clearButtonLabel: PropTypes.string.isRequired
 });
 MultiSelectFilter.propTypes = {
   /**
@@ -439,11 +456,29 @@ MultiSelectFilter.propTypes = {
    */
   onChange: PropTypes.func,
 
+  /**
+   * If provided, this function is called when the selection is confirmed.
+   */
+  onConfirm: PropTypes.func,
+
+  /**
+   * If provided, this function is called when `MultiSelectFilter` is closed.
+   * */
+  onCancel: PropTypes.func,
+
   /**
    * Select English or French copy for the accessible label.
    */
   copy: PropTypes.oneOf(['en', 'fr']),
 
+  /**
+   * Custom dictionary containing the labels
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+
   /**
    * If true, the ButtonDropdown cannot be selected by the user and simply show their current state.
    */

package/package.json

@@ -11,7 +11,7 @@
     "@floating-ui/react-native": "^0.8.1",
     "@gorhom/portal": "^1.0.14",
     "@telus-uds/system-constants": "^1.3.0",
-    "@telus-uds/system-theme-tokens": "^2.40.0",
+    "@telus-uds/system-theme-tokens": "^2.41.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.57.0"
+  "version": "1.59.0"
 }

package/src/Carousel/Carousel.jsx

@@ -420,7 +420,11 @@ const Carousel = React.forwardRef(
     // @TODO: - these are Allium-theme variants and won't have any effect in themes that don't implement them.
     // Normally we avoid setting variants of subcomponents, however this could be re-considered.
     // Related discussion - https://github.com/telus/universal-design-system/issues/1549
-    const previousNextIconButtonVariants = { size: previousNextIconSize, raised: true }
+    const previousNextIconButtonVariants = {
+      size: previousNextIconSize,
+      raised: !variant?.inverse && true,
+      inverse: variant?.inverse
+    }
 
     const getCopyWithPlaceholders = React.useCallback(
       (copyKey) => {

package/src/Carousel/CarouselThumbnail.jsx

@@ -60,7 +60,13 @@ const CarouselThumbnail = ({ accessibilityLabel, alt, index, src }) => {
           })
         )
 
-        return [pressableStyles, index === activeIndex && styles.selected]
+        return [
+          pressableStyles,
+          index === activeIndex && styles.selected,
+          {
+            outline: 'none'
+          }
+        ]
       }}
     >
       <Image

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -14,7 +14,7 @@ import {
   useResponsiveProp,
   variantProp
 } from '../utils'
-import dictionary from './dictionary'
+import defaultDictionary from './dictionary'
 import { useViewport } from '../ViewportProvider'
 import Box from '../Box'
 import { Button, ButtonDropdown } from '../Button'
@@ -53,10 +53,13 @@ const MultiSelectFilter = ({
   initialValues,
   maxValues,
   onChange,
+  onConfirm = () => {},
+  onCancel = () => {},
   copy = 'en',
   readOnly = false,
   inactive = false,
   rowLimit = 12,
+  dictionary = defaultDictionary,
   ...rest
 }) => {
   const viewport = useViewport()
@@ -116,11 +119,19 @@ const MultiSelectFilter = ({
   const onApply = (e) => {
     setValues(e)
     setIsOpen(false)
+    onConfirm(e)
   }
 
   const onClear = () => {
     setCheckedIds(() => [])
-    onApply([])
+    setValues([])
+    setIsOpen(false)
+    onCancel()
+  }
+
+  const onClose = () => {
+    setIsOpen(false)
+    onCancel()
   }
 
   const { align, offsets } = useResponsiveProp({
@@ -163,7 +174,7 @@ const MultiSelectFilter = ({
         inactive={inactive}
       />
       {isOpen && viewport === 'xs' && (
-        <Modal isOpen={isOpen} onClose={() => setIsOpen(false)}>
+        <Modal isOpen={isOpen} onClose={onClose}>
           <Row>
             <Typography tokens={{ ...headerStyles, lineHeight: headerLineHeight }}>
               {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
@@ -215,7 +226,7 @@ const MultiSelectFilter = ({
                 {getCopy('applyButtonLabel')}
               </Button>
               <Box>
-                <TextButton onPress={() => onClear()}>{getCopy('clearButtonLabel')}</TextButton>
+                <TextButton onPress={onClear}>{getCopy('clearButtonLabel')}</TextButton>
               </Box>
             </StackView>
           </Row>
@@ -224,7 +235,7 @@ const MultiSelectFilter = ({
       {isOpen && viewport !== 'xs' && (
         <ModalOverlay
           overlaidPosition={overlaidPosition}
-          onClose={() => setIsOpen(false)}
+          onClose={onClose}
           maxHeight={maxHeight}
           maxHeightSize={maxHeightSize}
           maxWidthSize={maxWidthSize}
@@ -291,7 +302,7 @@ const MultiSelectFilter = ({
                 {getCopy('applyButtonLabel')}
               </Button>
               <Box>
-                <TextButton onPress={() => onClear()}>{getCopy('clearButtonLabel')}</TextButton>
+                <TextButton onPress={onClear}>{getCopy('clearButtonLabel')}</TextButton>
               </Box>
             </StackView>
           </Row>
@@ -307,6 +318,13 @@ const styles = StyleSheet.create({
   textContainerStyle: { marginRight: 52 }
 })
 
+// If a language dictionary entry is provided, it must contain every key
+const dictionaryContentShape = PropTypes.shape({
+  filterByLabel: PropTypes.string.isRequired,
+  applyButtonLabel: PropTypes.string.isRequired,
+  clearButtonLabel: PropTypes.string.isRequired
+})
+
 MultiSelectFilter.propTypes = {
   /**
    * The text displayed to the user in a ButtonDropdown.
@@ -370,12 +388,26 @@ MultiSelectFilter.propTypes = {
    * If provided, this function is called when the current selection is changed
    * and is passed an array of the `id`s of all currently selected `items`.
    */
-
   onChange: PropTypes.func,
+  /**
+   * If provided, this function is called when the selection is confirmed.
+   */
+  onConfirm: PropTypes.func,
+  /**
+   * If provided, this function is called when `MultiSelectFilter` is closed.
+   * */
+  onCancel: PropTypes.func,
   /**
    * Select English or French copy for the accessible label.
    */
   copy: PropTypes.oneOf(['en', 'fr']),
+  /**
+   * Custom dictionary containing the labels
+   */
+  dictionary: PropTypes.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
   /**
    * If true, the ButtonDropdown cannot be selected by the user and simply show their current state.
    */