@telus-uds/components-base 1.24.2 → 1.26.0

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.

package/src/Typography/Typography.jsx

@@ -60,6 +60,7 @@ const Typography = forwardRef(
     const viewport = useViewport()
     const themeTokens = useThemeTokens('Typography', tokens, variant, { viewport })
     const { themeOptions } = useTheme()
+
     const resolvedTextProps = {
       ...selectTextProps(rest),
       style: selectTextStyles(
@@ -76,13 +77,36 @@ const Typography = forwardRef(
       ...selectContainerProps(rest)
     }
 
+    const resetTagStyling = (child) => {
+      if (typeof child === 'object' && (child?.type === 'sub' || child?.type === 'sup')) {
+        const sanitizedChild = React.cloneElement(child, {
+          style: {
+            ...child?.props?.style,
+            lineHeight: 0
+          }
+        })
+
+        return sanitizedChild
+      }
+
+      return child
+    }
+
+    const sanitizeChildren = () => {
+      if (Array.isArray(children)) {
+        return children.map(resetTagStyling)
+      }
+
+      return resetTagStyling(children)
+    }
+
     return block ? (
       <View ref={ref} {...containerProps}>
-        <Text {...resolvedTextProps}>{children}</Text>
+        <Text {...resolvedTextProps}>{sanitizeChildren(children)}</Text>
       </View>
     ) : (
       <Text ref={ref} {...containerProps} {...resolvedTextProps}>
-        {children}
+        {sanitizeChildren(children)}
       </Text>
     )
   }