@telus-uds/components-web 2.10.0 → 2.12.0

package/src/Listbox/PressableItem.jsx

@@ -1,121 +0,0 @@
-/* eslint-disable react/require-default-props */
-import React, { forwardRef } from 'react'
-import PropTypes from 'prop-types'
-import { selectSystemProps, useThemeTokens } from '@telus-uds/components-base'
-import styled from 'styled-components'
-import { htmlAttrs } from '../utils'
-
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
-
-const getItemStyles = ({ tokens }) => ({
-  fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
-  fontSize: tokens.itemFontSize,
-  paddingTop: tokens.itemPaddingTop,
-  paddingBottom: tokens.itemPaddingBottom,
-  paddingLeft: tokens.itemPaddingLeft,
-  paddingRight: tokens.itemPaddingRight,
-  borderWidth: tokens.itemBorderWidth,
-  width: '100%',
-  backgroundColor: tokens.itemBackgroundColor,
-  color: tokens.groupColor,
-  display: tokens.itemDisplay,
-  outline: tokens.itemOutline,
-  textDecoration: tokens.itemTextDecoration
-})
-
-const StyledLink = styled.a(({ isChild, tokens }) => ({
-  ...getItemStyles({ isChild, tokens }),
-  borderLeft: isChild
-    ? `${tokens.itemBorderWidth}px solid ${tokens.itemBorderBackgroundColor}`
-    : 'none',
-  cursor: 'pointer',
-
-  [`&:hover, &:focus, &:active`]: {
-    color: tokens.itemColor
-  },
-
-  '&:hover': {
-    backgroundColor: tokens.groupBackgroundColor
-  },
-
-  // Highlighting for pressable items that are not links per se
-  // TODO: find a better way to display and style a pressable link
-  '&:hover > div, &:hover > div > span': {
-    color: `${tokens.itemColor} !important`
-  },
-
-  '&:focus': {
-    border: `${tokens.groupBorderWidth}px solid ${tokens.itemBorderLeftColor}`,
-    borderLeft: isChild && `${tokens.itemBorderWidth}px solid ${tokens.itemBorderLeftColor}`,
-    borderRadius: !isChild && tokens.groupBorderRadius,
-    paddingLeft: !isChild && `calc(${tokens.itemPaddingLeft}px - ${tokens.groupBorderWidth}px)`,
-    paddingRight: `calc(${tokens.itemPaddingRight}px - ${tokens.groupBorderWidth}px)`,
-    paddingTop: `calc(${tokens.itemPaddingTop}px - ${tokens.groupBorderWidth}px)`,
-    paddingBottom: `calc(${tokens.itemPaddingBottom}px - ${tokens.groupBorderWidth}px)`,
-    backgroundColor: tokens.groupBackgroundColor
-  },
-
-  '&:active': {
-    backgroundColor: tokens.itemBorderBackgroundColor
-  }
-}))
-
-const PressableItem = forwardRef(
-  (
-    {
-      children,
-      href,
-      isChild = false,
-      onBlur,
-      onPress,
-      tabIndex = 0,
-      nextItemRef,
-      prevItemRef,
-      tokens,
-      variant = {},
-      ...rest
-    },
-    ref
-  ) => {
-    const handleKeyPress = (event) => {
-      if (['Enter', ' '].includes(event?.key)) {
-        onPress?.(event)
-      } else if (event?.key === 'ArrowDown' && nextItemRef?.current) {
-        nextItemRef.current.focus()
-      } else if (event?.key === 'ArrowUp' && prevItemRef?.current) {
-        prevItemRef.current.focus()
-      }
-    }
-    const systemTokens = useThemeTokens('ListBox', tokens, variant, { isChild, hover: true })
-
-    return (
-      <StyledLink
-        isChild={isChild}
-        tokens={systemTokens}
-        onBlur={onBlur}
-        onClick={onPress}
-        onKeyPress={handleKeyPress}
-        ref={ref}
-        tabIndex={tabIndex}
-        {...(href && { href })}
-        {...(onPress && { onClick: onPress })}
-        {...selectProps(rest)}
-      >
-        {children}
-      </StyledLink>
-    )
-  }
-)
-PressableItem.displayName = 'PressableItem'
-PressableItem.propTypes = {
-  ...selectedSystemPropTypes,
-  href: PropTypes.string,
-  isChild: PropTypes.bool,
-  children: PropTypes.node.isRequired,
-  onBlur: PropTypes.func,
-  onPress: PropTypes.func,
-  nextItemRef: PropTypes.object,
-  prevItemRef: PropTypes.object
-}
-
-export default PressableItem

package/src/utils/htmlAttrs.js

@@ -1,29 +0,0 @@
-import PropTypes from 'prop-types'
-
-const htmlAttrTypes = {
-  dataSet: PropTypes.object,
-  id: PropTypes.string,
-  loading: PropTypes.oneOf(['eager', 'lazy']),
-  // @todo figure out if we need to enum all the possible roles or maybe use
-  // an npm package
-  role: PropTypes.string,
-  src: PropTypes.string,
-  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  testID: PropTypes.string,
-  title: PropTypes.string
-}
-
-export default {
-  types: htmlAttrTypes,
-  select: (props) =>
-    Object.entries(props).reduce(
-      (items, [key, value]) =>
-        Object.keys(htmlAttrTypes).includes(key) || /^(data|aria)-/.test(key)
-          ? {
-              ...items,
-              [key]: value
-            }
-          : items,
-      {}
-    )
-}