@telus-uds/components-base 2.4.0 → 2.5.0

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import ExpandCollapse from '../ExpandCollapse'
+import { getTokensPropType } from '../utils'
+import ExpandCollapseMiniControl from './ExpandCollapseMiniControl'
+
+const ExpandCollapseMini = React.forwardRef(
+  ({ children, onToggle = () => {}, tokens = {}, nativeID, initialOpen = false, ...rest }, ref) => {
+    const expandCollapeMiniPanelId = 'ExpandCollapseMiniPanel'
+    const handleChange = (openPanels, event) => {
+      if (typeof onToggle === 'function') {
+        const isOpen = openPanels.length > 0
+        onToggle(event, isOpen)
+      }
+    }
+
+    return (
+      <ExpandCollapse
+        onChange={handleChange}
+        tokens={tokens}
+        initialOpen={initialOpen ? [expandCollapeMiniPanelId] : []}
+      >
+        {(expandProps) => (
+          <ExpandCollapse.Panel
+            {...expandProps}
+            panelId={expandCollapeMiniPanelId}
+            variant={{ mini: true }}
+            controlTokens={{
+              // Remove unwanted look and feel from ExpandCollapse(background pressed, focus border and text underline)
+              icon: null,
+              borderColor: 'transparent',
+              textLine: 'none',
+              backgroundColor: 'transparent'
+            }}
+            // TODO refactor
+            // eslint-disable-next-line react/no-unstable-nested-components
+            control={(pressableState) => (
+              <ExpandCollapseMiniControl pressableState={pressableState} {...rest} />
+            )}
+            controlRef={ref}
+            nativeID={nativeID}
+          >
+            {children}
+          </ExpandCollapse.Panel>
+        )}
+      </ExpandCollapse>
+    )
+  }
+)
+ExpandCollapseMini.displayName = 'ExpandCollapseMini'
+
+ExpandCollapseMini.propTypes = {
+  ...ExpandCollapseMiniControl.propTypes,
+  /**
+   * Function to call on pressing the panel's control, which should open or close the panel.
+   */
+  onToggle: PropTypes.func,
+  /**
+   * ID for DOM element on web
+   */
+  nativeID: PropTypes.string,
+  /**
+   * Children nodes that can be added
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Controls if the panel and the content is opened by default on the first load
+   */
+  initialOpen: PropTypes.bool,
+  /**
+   * Optional variant object to override the default theme tokens
+   */
+  tokens: getTokensPropType('ExpandCollapseMini')
+}
+
+export default ExpandCollapseMini

package/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx

@@ -0,0 +1,119 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import { Platform } from 'react-native'
+import { Link } from '../Link'
+import { useThemeTokens } from '../ThemeProvider'
+import { htmlAttrs, viewProps, selectSystemProps } from '../utils'
+
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps])
+
+// The ExpandCollapseControl has all the appropriate role, a11y, press handling etc
+// and a more appropriate press area, defer interaction handling to it.
+const presentationOnly = {
+  accessibilityRole: null, // Treat as regular flow content with the Control
+  pointerEvents: 'none', // Stop RNW from stopping clicks from bubbling to Control
+  focusable: false // Stop RNW from setting tabIndex={0}: focus goes to Control only
+}
+
+const selectLinkTokens = ({ color, textLine, lineHeight, fontSize }) => ({
+  color,
+  textLine,
+  blockLineHeight: lineHeight,
+  blockFontSize: fontSize
+})
+
+const ExpandCollapseMiniControl = React.forwardRef(
+  (
+    {
+      pressableState,
+      collapseTitle,
+      expandTitle = collapseTitle,
+      iconPosition = 'right',
+      tokens,
+      variant = {},
+      ...rest
+    },
+    ref
+  ) => {
+    const { expanded, hover, focus } = pressableState || {}
+    // we only want focus outline when focusing, if user is pressing we don't want the border.
+    const { outerBorderColor } = useThemeTokens(
+      'Link',
+      {},
+      {},
+      { focus: Platform.OS !== 'web' ? expanded : focus }
+    )
+    const { size, icon, ...themeTokens } = useThemeTokens(
+      'ExpandCollapseMiniControl',
+      tokens,
+      variant,
+      { expanded, focus }
+    )
+
+    // Choose hover styles when any part of Control is hoverred
+    const appearance = { ...variant, hover }
+
+    const getTokens = (linkState) => {
+      const { hover: linkHover } = linkState || {}
+      const isHovered = hover || linkHover
+
+      if (Platform.OS !== 'web') {
+        return { iconTranslateY: -1 }
+      }
+
+      if (isHovered) {
+        // Include vertical icon animation on hover alongside built-in Link theme, the size is size4
+        return { iconTranslateY: (expanded ? -1 : 1) * size }
+      }
+
+      return {}
+    }
+
+    return (
+      <Link
+        variant={appearance}
+        icon={icon}
+        iconPosition={iconPosition}
+        tokens={(linkState) => ({
+          ...getTokens(linkState),
+          ...selectLinkTokens(themeTokens),
+          outerBorderColor
+        })}
+        ref={ref}
+        {...presentationOnly}
+        {...selectProps(rest)}
+      >
+        {expanded ? expandTitle : collapseTitle}
+      </Link>
+    )
+  }
+)
+
+ExpandCollapseMiniControl.displayName = 'ExpandCollapseMiniControl'
+
+ExpandCollapseMiniControl.propTypes = {
+  ...selectedSystemPropTypes,
+  ...Link.propTypes,
+  /**
+   * Optional function to call on pressing the panel's control, in addition to opening or closing the panel
+   */
+  onPress: PropTypes.func,
+  /**
+   * ExpandCollapseMiniControl title when expanded
+   */
+  expandTitle: PropTypes.string.isRequired,
+  /**
+   * ExpandCollapseMiniControl title when collapsed
+   */
+  collapseTitle: PropTypes.string.isRequired,
+  /**
+   * React Native's `Pressable`'s state object
+   */
+  pressableState: PropTypes.object,
+  /**
+   * Optional variant object to override the default theme tokens
+   */
+  variant: PropTypes.object
+}
+
+export default ExpandCollapseMiniControl

package/src/ExpandCollapseMini/index.js

@@ -0,0 +1,3 @@
+import ExpandCollapseMini from './ExpandCollapseMini'
+
+export default ExpandCollapseMini

package/src/Link/LinkBase.jsx

@@ -81,18 +81,19 @@ const selectDecorationStyles = ({ color, textLine, textLineStyle, alignSelf }) =
   })
 })
 
-const selectIconTokens = ({ color, iconSize, blockFontSize, iconTranslateX }) => {
+const selectIconTokens = ({ color, iconSize, blockFontSize, iconTranslateX, iconTranslateY }) => {
   /**
    * These calculations were carried out using a set of linear equations to calculate that the
    * position of the icon "->"" is aligned to the first line of the tooltip text.
    * The base equation is: X/4 + Y/4 - 4 - |X - Y| = Z
    * where X = blockFontSize, Y = iconSize and Z = translateY
    */
-  const translateY = blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize)
+  const translateY =
+    iconTranslateY ?? blockFontSize / 4 + iconSize / 4 - 4 - Math.abs(iconSize - blockFontSize)
   return {
     color,
     translateX: iconTranslateX,
-    translateY: translateY < 0 ? 0 : translateY,
+    translateY,
     size: iconSize
   }
 }
@@ -274,6 +275,10 @@ const staticStyles = StyleSheet.create({
       margin: 0,
       marginHorizontal: 2,
       padding: 0
+    }),
+    ...(Platform.OS === 'android' && {
+      paddingHorizontal: 2,
+      paddingTop: 2
     })
   }
 })

package/src/index.js

@@ -18,6 +18,7 @@ export { default as ColourToggle } from './ColourToggle'
 export { default as DownloadApp } from './DownloadApp'
 export { default as Divider } from './Divider'
 export { default as ExpandCollapse, Accordion } from './ExpandCollapse'
+export { default as ExpandCollapseMini } from './ExpandCollapseMini'
 export { default as Feedback } from './Feedback'
 export { default as Fieldset } from './Fieldset'
 export { default as FlexGrid } from './FlexGrid'

package/src/utils/useOverlaidPosition.js

@@ -1,5 +1,8 @@
 import { useCallback, useEffect, useRef, useState } from 'react'
 import { Dimensions, Platform } from 'react-native'
+import debounce from 'lodash.debounce'
+
+const DEBOUNCE_DELAY = 100
 
 const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
   const offset = Math.max(0, initialOffset)
@@ -200,6 +203,26 @@ const useOverlaidPosition = ({
     return unsubscribe
   }, [readyToShow])
 
+  useEffect(() => {
+    if (Platform.OS !== 'web') {
+      return undefined
+    }
+
+    const handleScroll = debounce(() => {
+      sourceRef.current?.measureInWindow((x, y, width, height) => {
+        setWindowDimensions(window)
+        setSourceLayout({ x, y, width, height })
+      })
+    }, DEBOUNCE_DELAY)
+
+    window.addEventListener('scroll', handleScroll)
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll)
+      handleScroll.cancel()
+    }
+  }, [sourceRef])
+
   const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions)
 
   const overlaidPosition = isReady