@telus-uds/components-base 1.24.2 → 2.0.0

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": "2.0.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

@@ -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,
@@ -563,6 +564,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

package/src/MultiSelectFilter/MultiSelectFilter.jsx

@@ -1,7 +1,7 @@
 import React, { forwardRef, useState } from 'react'
 import PropTypes from 'prop-types'
 
-import { useThemeTokensCallback } from '../ThemeProvider'
+import { useThemeTokens, useThemeTokensCallback } from '../ThemeProvider'
 import {
   containUniqueFields,
   getTokensPropType,
@@ -18,18 +18,30 @@ 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'
 
 const { Col, Row } = FlexGrid
 
+const selectSubTitleTokens = ({ subtitleColor }) => ({
+  color: subtitleColor
+})
+
+const selectDividerToknes = ({ dividerColor, width, decorative = true, weight = 'thin' }) => ({
+  color: dividerColor,
+  width,
+  decorative,
+  weight
+})
+
 const MultiSelectFilter = forwardRef(
   (
     {
       label,
+      subtitle,
       id = label,
       variant,
       tokens,
@@ -54,6 +66,7 @@ const MultiSelectFilter = forwardRef(
       readOnly
     })
 
+    const themeTokens = useThemeTokens('ButtonDropdown', tokens, variant)
     const getItemTokens = useThemeTokensCallback('ButtonDropdown', tokens, variant)
     const getButtonTokens = (buttonState) => selectTokens('Button', getItemTokens(buttonState))
     const getCopy = useCopy({ dictionary, copy })
@@ -74,7 +87,7 @@ const MultiSelectFilter = forwardRef(
 
     const handleChange = (event) => {
       if (pressHandlers.onPress) pressHandlers?.onPress(event)
-      setIsOpen(true)
+      setIsOpen(!isOpen)
     }
 
     const onApply = (e) => {
@@ -84,52 +97,6 @@ const MultiSelectFilter = forwardRef(
 
     return (
       <>
-        <Modal
-          isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
-          variant={{ width: colSize > 1 ? 'size576' : 's' }}
-        >
-          <Row>
-            <Typography variant={{ size: 'h4' }}>
-              {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
-            </Typography>
-          </Row>
-          <Spacer space={4} />
-          <Spacer space={1} />
-          <Box scroll={true}>
-            <Row distribute="between">
-              {[...Array(colSize).keys()].map((i) => (
-                <Col xs={12 / colSize} key={i}>
-                  <CheckboxGroup
-                    items={items.slice(i * rowLimit, (i + 1) * rowLimit)}
-                    checkedIds={checkedIds}
-                    onChange={(e) => setCheckedIds(e, i)}
-                  />
-                  <Spacer size={4} />
-                </Col>
-              ))}
-            </Row>
-          </Box>
-          <Divider
-            variant={{ width: 'full', color: 'E3E6E8', decorative: true, weight: 'thin' }}
-            space={4}
-          />
-          <Row>
-            <StackView direction="row" space={3} tokens={{ alignItems: 'center' }}>
-              <Button
-                onPress={() => onApply(checkedIds)}
-                variant={{ size: 'small', priority: 'high' }}
-              >
-                {getCopy('applyButtonLabel')}
-              </Button>
-              <Box>
-                <TextButton onPress={() => setCheckedIds([])}>
-                  {getCopy('clearButtonLabel')}
-                </TextButton>
-              </Box>
-            </StackView>
-          </Row>
-        </Modal>
         <ButtonDropdown
           ref={ref}
           key={id}
@@ -141,6 +108,59 @@ const MultiSelectFilter = forwardRef(
           tokens={getButtonTokens}
           inactive={inactive}
         />
+        {isOpen && (
+          <ModalOverlay
+            variant={{ width: colSize > 1 ? 'size576' : 's' }}
+            onClose={() => setIsOpen(false)}
+          >
+            <Row>
+              <Typography variant={{ size: 'h4' }}>
+                {getCopy('filterByLabel').replace(/%\{filterCategory\}/g, label.toLowerCase())}
+              </Typography>
+            </Row>
+            {subtitle && (
+              <>
+                <Spacer space={5} />
+                <Row>
+                  <Typography variant={{ size: 'h5' }} tokens={selectSubTitleTokens(themeTokens)}>
+                    {subtitle}
+                  </Typography>
+                </Row>
+              </>
+            )}
+            <Spacer space={4} />
+            <Box scroll={true}>
+              <Row distribute="between">
+                {[...Array(colSize).keys()].map((i) => (
+                  <Col xs={12 / colSize} key={i}>
+                    <CheckboxGroup
+                      items={items.slice(i * rowLimit, (i + 1) * rowLimit)}
+                      checkedIds={checkedIds}
+                      onChange={(e) => setCheckedIds(e, i)}
+                    />
+                    <Spacer size={4} />
+                  </Col>
+                ))}
+              </Row>
+            </Box>
+            <Divider variant={selectDividerToknes({ ...themeTokens, width: 'full' })} space={4} />
+            <Row>
+              <StackView direction="row" space={3} tokens={{ alignItems: 'center' }}>
+                <Button
+                  onPress={() => onApply(checkedIds)}
+                  variant={{ size: 'small', priority: 'high' }}
+                >
+                  {getCopy('applyButtonLabel')}
+                </Button>
+                <Box>
+                  <TextButton onPress={() => setCheckedIds([])}>
+                    {getCopy('clearButtonLabel')}
+                  </TextButton>
+                </Box>
+              </StackView>
+            </Row>
+          </ModalOverlay>
+        )}
       </>
     )
   }
@@ -152,6 +172,10 @@ MultiSelectFilter.propTypes = {
    * The text displayed to the user in a ButtonDropdown.
    */
   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.