@telus-uds/components-base 1.24.2 → 1.26.0

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;

package/lib-module/MultiSelectFilter/ModalOverlay.js

@@ -0,0 +1,112 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import { Portal } from '@gorhom/portal';
+import { copyPropTypes, getTokensPropType, selectTokens, useCopy, variantProp } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import { useThemeTokens } from '../ThemeProvider';
+import dictionary from './dictionary';
+import Card from '../Card';
+import IconButton from '../IconButton';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+const staticStyles = StyleSheet.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__*/forwardRef((_ref3, ref) => {
+  let {
+    children,
+    tokens,
+    variant,
+    copy,
+    onClose
+  } = _ref3;
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Modal', tokens, variant, {
+    viewport,
+    maxWidth: false
+  });
+  const {
+    closeIcon: CloseIconComponent,
+    maxWidth
+  } = themeTokens;
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const closeLabel = getCopy('closeButton');
+  return /*#__PURE__*/_jsx(_Fragment, {
+    children: /*#__PURE__*/_jsx(Portal, {
+      ref: ref,
+      children: /*#__PURE__*/_jsx(View, {
+        style: [{
+          minWidth: maxWidth
+        }, staticStyles.positioner],
+        children: /*#__PURE__*/_jsxs(Card, {
+          tokens: selectPaddingContainerStyles(themeTokens),
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
+            children: /*#__PURE__*/_jsx(IconButton, {
+              onPress: onClose,
+              icon: CloseIconComponent,
+              accessibilityRole: "button",
+              accessibilityLabel: closeLabel,
+              tokens: selectTokens('IconButton', themeTokens, 'close')
+            })
+          }), children]
+        })
+      })
+    })
+  });
+});
+ModalOverlay.displayName = 'ModalOverlay';
+ModalOverlay.propTypes = {
+  children: PropTypes.node.isRequired,
+  variant: variantProp.propType,
+  tokens: getTokensPropType('Modal'),
+  copy: copyPropTypes,
+  onClose: PropTypes.func
+};
+export default ModalOverlay;

package/lib-module/MultiSelectFilter/MultiSelectFilter.js

@@ -1,6 +1,6 @@
 import React, { forwardRef, useState } from 'react';
 import PropTypes from 'prop-types';
-import { useThemeTokensCallback } from '../ThemeProvider';
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider';
 import { containUniqueFields, getTokensPropType, getPressHandlersWithArgs, selectTokens, useCopy, useMultipleInputValues, variantProp } from '../utils';
 import dictionary from './dictionary';
 import Box from '../Box';
@@ -8,21 +8,47 @@ import { Button, ButtonDropdown } from '../Button';
 import { CheckboxGroup } from '../Checkbox';
 import Divider from '../Divider';
 import FlexGrid from '../FlexGrid';
-import Modal from '../Modal';
 import Spacer from '../Spacer';
 import StackView from '../StackView';
 import Typography from '../Typography';
 import { TextButton } from '../Link';
+import ModalOverlay from './ModalOverlay';
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 const {
   Col,
   Row
 } = FlexGrid;
-const MultiSelectFilter = /*#__PURE__*/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__*/forwardRef((_ref3, ref) => {
   let {
     label,
+    subtitle,
     id = label,
     variant,
     tokens,
@@ -36,7 +62,7 @@ const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref, ref) => {
     inactive = false,
     rowLimit = 12,
     ...rest
-  } = _ref;
+  } = _ref3;
   const {
     currentValues,
     setValues
@@ -47,6 +73,7 @@ const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref, ref) => {
     onChange,
     readOnly
   });
+  const themeTokens = useThemeTokens('ButtonDropdown', tokens, variant);
   const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant);
 
   const getButtonTokens = buttonState => selectTokens('Button', getItemTokens(buttonState));
@@ -74,7 +101,7 @@ const MultiSelectFilter = /*#__PURE__*/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 => {
@@ -83,12 +110,20 @@ const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref, ref) => {
   };
 
   return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsxs(Modal, {
-      isOpen: isOpen,
-      onClose: () => setIsOpen(false),
+    children: [/*#__PURE__*/_jsx(ButtonDropdown, {
+      ref: ref,
+      ...pressHandlers,
+      value: isOpen,
+      selected: isSelected,
+      label: label,
+      onChange: handleChange,
+      tokens: getButtonTokens,
+      inactive: inactive
+    }, id), isOpen && /*#__PURE__*/_jsxs(ModalOverlay, {
       variant: {
         width: colSize > 1 ? 'size576' : 's'
       },
+      onClose: () => setIsOpen(false),
       children: [/*#__PURE__*/_jsx(Row, {
         children: /*#__PURE__*/_jsx(Typography, {
           variant: {
@@ -96,10 +131,20 @@ const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref, ref) => {
           },
           children: getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())
         })
+      }), subtitle && /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx(Spacer, {
+          space: 5
+        }), /*#__PURE__*/_jsx(Row, {
+          children: /*#__PURE__*/_jsx(Typography, {
+            variant: {
+              size: 'h5'
+            },
+            tokens: selectSubTitleTokens(themeTokens),
+            children: subtitle
+          })
+        })]
       }), /*#__PURE__*/_jsx(Spacer, {
         space: 4
-      }), /*#__PURE__*/_jsx(Spacer, {
-        space: 1
       }), /*#__PURE__*/_jsx(Box, {
         scroll: true,
         children: /*#__PURE__*/_jsx(Row, {
@@ -116,12 +161,9 @@ const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref, ref) => {
           }, i))
         })
       }), /*#__PURE__*/_jsx(Divider, {
-        variant: {
-          width: 'full',
-          color: 'E3E6E8',
-          decorative: true,
-          weight: 'thin'
-        },
+        variant: selectDividerToknes({ ...themeTokens,
+          width: 'full'
+        }),
         space: 4
       }), /*#__PURE__*/_jsx(Row, {
         children: /*#__PURE__*/_jsxs(StackView, {
@@ -145,16 +187,7 @@ const MultiSelectFilter = /*#__PURE__*/forwardRef((_ref, ref) => {
           })]
         })
       })]
-    }), /*#__PURE__*/_jsx(ButtonDropdown, {
-      ref: ref,
-      ...pressHandlers,
-      value: isOpen,
-      selected: isSelected,
-      label: label,
-      onChange: handleChange,
-      tokens: getButtonTokens,
-      inactive: inactive
-    }, id)]
+    })]
   });
 });
 MultiSelectFilter.displayName = 'MultiSelectFilter';
@@ -164,6 +197,11 @@ MultiSelectFilter.propTypes = {
    */
   label: PropTypes.string.isRequired,
 
+  /**
+   * The text for the subtitle
+   */
+  subtitle: PropTypes.string,
+
   /**
    * An optional unique string may be provided to identify the ButtonDropdown.
    * If not provided, the label is used.

package/lib-module/Typography/Typography.js

@@ -71,17 +71,41 @@ const Typography = /*#__PURE__*/forwardRef((_ref2, ref) => {
     ...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.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__*/_jsx(View, {
     ref: ref,
     ...containerProps,
     children: /*#__PURE__*/_jsx(Text, { ...resolvedTextProps,
-      children: children
+      children: sanitizeChildren(children)
     })
   }) : /*#__PURE__*/_jsx(Text, {
     ref: ref,
     ...containerProps,
     ...resolvedTextProps,
-    children: children
+    children: sanitizeChildren(children)
   });
 });
 Typography.displayName = 'Typography';

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.0",
-    "@telus-uds/system-theme-tokens": "^2.9.0",
+    "@telus-uds/system-theme-tokens": "^2.10.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.24.2"
+  "version": "1.26.0"
 }

package/src/Button/ButtonBase.jsx

@@ -174,7 +174,7 @@ const ButtonBase = forwardRef(
     ref
   ) => {
     const { onPress, ...rest } = clickProps.toPressProps(rawRest)
-    const extraButtonState = { inactive, selected }
+    const extraButtonState = { inactive, selected, iconPosition }
     const resolveButtonTokens = (pressableState) =>
       resolvePressableTokens(tokens, pressableState, extraButtonState)
 

package/src/Carousel/Carousel.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { View, Animated, PanResponder, StyleSheet, Platform } from 'react-native'
+import { View, Animated, PanResponder, StyleSheet, Platform, Dimensions } from 'react-native'
 import PropTypes from 'prop-types'
 import { useThemeTokens } from '../ThemeProvider'
 import { useViewport } from '../ViewportProvider'
@@ -145,6 +145,7 @@ const Carousel = React.forwardRef(
       children,
       itemLabel = 'item',
       previousNextNavigationPosition = 'inside',
+      stepTrackerVariant,
       previousNextIconSize = 'default',
       minDistanceToCapture = 5,
       minDistanceForAction = 0.2,
@@ -160,7 +161,7 @@ const Carousel = React.forwardRef(
       panelNavigation = thumbnails ? (
         <CarouselThumbnailNavigation thumbnails={thumbnails} />
       ) : (
-        <CarouselStepTracker />
+        <CarouselStepTracker variant={stepTrackerVariant} />
       ),
       tag = 'ul',
       accessibilityRole,
@@ -220,6 +221,7 @@ const Carousel = React.forwardRef(
       y: 0,
       width: 0
     })
+
     const [previousNextNavigationButtonWidth, setPreviousNextNavigationButtonWidth] =
       React.useState(0)
     const firstFocusRef = React.useRef(null)
@@ -382,6 +384,14 @@ const Carousel = React.forwardRef(
       }
     }, [pan.x, pan.y])
 
+    React.useEffect(() => {
+      const subscription = Dimensions.addEventListener('change', () => {
+        updateOffset()
+      })
+
+      return () => subscription?.remove()
+    })
+
     const goToNext = React.useCallback(() => {
       goToNeighboring()
     }, [goToNeighboring])
@@ -563,6 +573,10 @@ 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/src/Carousel/CarouselStepTracker/CarouselStepTracker.jsx

@@ -2,8 +2,9 @@ import React from 'react'
 import { useCarousel } from '../CarouselContext'
 import StepTracker from '../../StepTracker'
 import StackView from '../../StackView'
+import { variantProp } from '../../utils'
 
-const CarouselStepTracker = () => {
+const CarouselStepTracker = ({ variant }) => {
   const { activeIndex, totalItems, getCopyWithPlaceholders, themeTokens } = useCarousel()
   const stackViewTokens = {
     justifyContent: 'center'
@@ -28,9 +29,14 @@ const CarouselStepTracker = () => {
           stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
         }}
         tokens={stepTrackerTokens}
+        variant={variant}
       />
     </StackView>
   )
 }
 
+CarouselStepTracker.propTypes = {
+  variant: variantProp.propType
+}
+
 export default CarouselStepTracker

package/src/MultiSelectFilter/ModalOverlay.jsx

@@ -0,0 +1,86 @@
+import React, { forwardRef } from 'react'
+import PropTypes from 'prop-types'
+import { View, StyleSheet } from 'react-native-web'
+import { Portal } from '@gorhom/portal'
+import { copyPropTypes, getTokensPropType, selectTokens, useCopy, variantProp } from '../utils'
+import { useViewport } from '../ViewportProvider'
+import { useThemeTokens } from '../ThemeProvider'
+import dictionary from './dictionary'
+
+import Card from '../Card'
+import IconButton from '../IconButton'
+
+const staticStyles = StyleSheet.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 = ({ paddingRight, paddingTop }) => ({
+  paddingRight,
+  paddingTop
+})
+
+const selectPaddingContainerStyles = ({ paddingTop, paddingLeft, paddingRight }) => ({
+  paddingBottom: 35,
+  paddingTop,
+  paddingLeft,
+  paddingRight
+})
+
+const ModalOverlay = forwardRef(({ children, tokens, variant, copy, onClose }, ref) => {
+  const viewport = useViewport()
+  const themeTokens = useThemeTokens('Modal', tokens, variant, { viewport, maxWidth: false })
+
+  const { closeIcon: CloseIconComponent, maxWidth } = themeTokens
+
+  const getCopy = useCopy({ dictionary, copy })
+  const closeLabel = getCopy('closeButton')
+
+  return (
+    <>
+      <Portal ref={ref}>
+        <View style={[{ minWidth: maxWidth }, staticStyles.positioner]}>
+          <Card tokens={selectPaddingContainerStyles(themeTokens)}>
+            <View
+              style={[
+                staticStyles.closeButtonContainer,
+                selectCloseButtonContainerStyles(themeTokens)
+              ]}
+            >
+              <IconButton
+                onPress={onClose}
+                icon={CloseIconComponent}
+                accessibilityRole="button"
+                accessibilityLabel={closeLabel}
+                tokens={selectTokens('IconButton', themeTokens, 'close')}
+              />
+            </View>
+            {children}
+          </Card>
+        </View>
+      </Portal>
+    </>
+  )
+})
+ModalOverlay.displayName = 'ModalOverlay'
+
+ModalOverlay.propTypes = {
+  children: PropTypes.node.isRequired,
+  variant: variantProp.propType,
+  tokens: getTokensPropType('Modal'),
+  copy: copyPropTypes,
+  onClose: PropTypes.func
+}
+
+export default ModalOverlay