@telus-uds/components-web 3.2.1 → 3.4.0

package/src/ExpandCollapseMini/ExpandCollapseMini.jsx

@@ -1,72 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { ExpandCollapse, getTokensPropType } from '@telus-uds/components-base'
-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,
-  tokens: getTokensPropType('ExpandCollapseMini')
-}
-
-export default ExpandCollapseMini

package/src/ExpandCollapseMini/ExpandCollapseMiniControl.jsx

@@ -1,104 +0,0 @@
-import React from 'react'
-import PropTypes from 'prop-types'
-import { selectSystemProps, Link, useThemeTokens } from '@telus-uds/components-base'
-import { htmlAttrs } from '../utils'
-
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
-
-// 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 })
-    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 (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,
-  variant: PropTypes.object
-}
-
-export default ExpandCollapseMiniControl

package/src/ExpandCollapseMini/index.js

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