@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/IconButton/IconButton.js

@@ -1,203 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Pressable from "react-native-web/dist/exports/Pressable";
-import Platform from "react-native-web/dist/exports/Platform";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import View from "react-native-web/dist/exports/View";
-import { applyOuterBorder, useThemeTokensCallback, applyShadowToken } from '../ThemeProvider';
-import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, resolvePressableState, selectSystemProps, selectTokens, variantProp, viewProps, withLinkRouter } from '../utils';
-import Icon from '../Icon';
-
-// function to get the dimentionals of the conditionals
-import { jsx as _jsx } from "react/jsx-runtime";
-const getPasswordDimensions = (password, width, height) => {
-  return password ? {
-    width,
-    height
-  } : {};
-};
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const selectOuterStyle = (_ref, password) => {
-  let {
-    backgroundColor,
-    outerBorderWidth,
-    outerBorderColor,
-    outerBorderGap,
-    borderRadius,
-    borderTopLeftRadius,
-    borderTopRightRadius,
-    borderBottomLeftRadius,
-    borderBottomRightRadius,
-    shadow,
-    width,
-    height
-  } = _ref;
-  return [{
-    backgroundColor,
-    ...applyShadowToken(shadow),
-    ...applyOuterBorder({
-      borderRadius,
-      borderTopLeftRadius,
-      borderTopRightRadius,
-      borderBottomLeftRadius,
-      borderBottomRightRadius,
-      outerBorderWidth,
-      outerBorderColor,
-      outerBorderGap
-    }),
-    ...getPasswordDimensions(password, width, height),
-    ...Platform.select({
-      web: {
-        outline: 'none',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }
-    })
-  }, staticStyles.outer];
-};
-const calculatePadding = (padding, borderWidth) => padding && Math.max(0, padding - borderWidth); // Stable size as border changes
-
-const selectInnerStyle = (_ref2, password) => {
-  let {
-    borderColor,
-    borderWidth,
-    borderTopLeftRadius,
-    borderTopRightRadius,
-    borderBottomLeftRadius,
-    borderBottomRightRadius,
-    borderRadius,
-    padding = 0,
-    borderTopWidth,
-    borderRightWidth,
-    borderBottomWidth,
-    borderLeftWidth,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom,
-    width,
-    height
-  } = _ref2;
-  return {
-    // Inner borders animate with the icon and should be treated like a themable feature of the icon
-    borderColor,
-    borderRadius,
-    borderWidth,
-    borderTopLeftRadius,
-    borderTopRightRadius,
-    borderBottomLeftRadius,
-    borderBottomRightRadius,
-    borderTopWidth,
-    borderRightWidth,
-    borderBottomWidth,
-    borderLeftWidth,
-    padding: calculatePadding(padding, borderWidth),
-    paddingLeft: calculatePadding(paddingLeft, borderLeftWidth),
-    paddingRight: calculatePadding(paddingRight, borderRightWidth),
-    paddingTop: calculatePadding(paddingTop, borderTopWidth),
-    paddingBottom: calculatePadding(paddingBottom, borderBottomWidth),
-    ...Platform.select({
-      web: {
-        pointerEvents: 'none',
-        display: 'inline-flex',
-        alignItems: 'center',
-        justifyContent: 'center'
-      }
-    }),
-    ...getPasswordDimensions(password, width, height)
-  };
-};
-
-/**
- * A pressable themeless base component that handles pressable states and passes tokens
- * based on these to an outer border and a base Card component. Not intended to be used in
- * apps or sites directly: build themed components on top of this.
- */
-const IconButton = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  let {
-    tokens,
-    variant = {},
-    icon: IconComponent,
-    href,
-    hrefAttrs,
-    testID,
-    accessibilityRole = href ? 'link' : 'button',
-    ...rawRest
-  } = _ref3;
-  const {
-    onPress,
-    ...rest
-  } = clickProps.toPressProps(rawRest);
-  const selectedProps = selectProps({
-    ...rest,
-    accessibilityRole
-  });
-  const handlePress = () => {
-    var _ref$current;
-    linkProps.handleHref({
-      href,
-      onPress
-    })({
-      nativeEvent: {
-        target: ref === null || ref === void 0 || (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.id
-      }
-    });
-  };
-  const getTokens = useThemeTokensCallback('IconButton', tokens, variant);
-  const getOuterStyle = pressableState => selectOuterStyle(getTokens(resolvePressableState(pressableState), variant.password));
-  return /*#__PURE__*/_jsx(Pressable, {
-    ref: ref,
-    href: href,
-    onPress: handlePress,
-    hrefAttrs: hrefAttrs,
-    style: getOuterStyle,
-    ...selectedProps,
-    testID: testID,
-    children: pressableState => {
-      const themeTokens = getTokens(resolvePressableState(pressableState));
-      return /*#__PURE__*/_jsx(View, {
-        style: selectInnerStyle(themeTokens, variant.password),
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: IconComponent || themeTokens.icon,
-          title: selectedProps.accessibilityLabel,
-          tokens: selectTokens('Icon', themeTokens, 'icon'),
-          variant: variant
-        })
-      });
-    }
-  });
-});
-IconButton.displayName = 'IconButton';
-IconButton.propTypes = {
-  ...selectedSystemPropTypes,
-  variant: variantProp.propType,
-  tokens: getTokensPropType('IconButton'),
-  /**
-   * A unique identifier for testing purposes.
-   * Will be added as a `data-testid` attribute.
-   */
-  testID: PropTypes.string,
-  /**
-   * Defines the icon to be rendered
-   */
-  icon: PropTypes.elementType,
-  /**
-   * URL to navigate to when the `Iconbutton` is pressed
-   */
-  href: PropTypes.string,
-  /**
-   * URL options to navigate to when the `Iconbutton` is pressed
-   */
-  hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
-  /**
-   * Function to execute when the `Iconbutton` is pressed
-   */
-  onPress: PropTypes.func
-};
-const staticStyles = StyleSheet.create({
-  outer: {
-    alignSelf: 'baseline'
-  }
-});
-export default withLinkRouter(IconButton);

package/lib/InputSupports/InputSupports.js

@@ -1,133 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import InputLabel from '../InputLabel';
-import Feedback from '../Feedback';
-import StackView from '../StackView';
-import { useThemeTokens } from '../ThemeProvider';
-import useInputSupports from './useInputSupports';
-import { getTokensPropType, useCopy } from '../utils';
-import dictionary from './dictionary';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const InputSupports = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    copy = 'en',
-    label,
-    hint,
-    hintPosition = 'inline',
-    feedback,
-    feedbackTokens = {},
-    feedbackProps = {},
-    tooltip,
-    validation,
-    maxCharacterAllowed,
-    inputValue,
-    nativeID
-  } = _ref;
-  const {
-    space
-  } = useThemeTokens('InputSupports');
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const maxCharsReachedErrorMessage = (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) > maxCharacterAllowed ? getCopy('maxCharsMessage').replace(/%\{charCount\}/g, maxCharacterAllowed) : '';
-  const feedbackValidation = (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length) > maxCharacterAllowed ? 'error' : validation;
-  const {
-    inputId,
-    hintId,
-    feedbackId,
-    a11yProps
-  } = useInputSupports({
-    feedback,
-    hint,
-    label,
-    validation,
-    nativeID,
-    copy,
-    maxCharacterAllowed,
-    charactersCount: maxCharacterAllowed - (inputValue === null || inputValue === void 0 ? void 0 : inputValue.length)
-  });
-  return /*#__PURE__*/_jsxs(StackView, {
-    space: space,
-    ref: ref,
-    children: [label && /*#__PURE__*/_jsx(InputLabel, {
-      copy: copy,
-      label: label,
-      hint: hint,
-      hintPosition: hintPosition,
-      hintId: hintId,
-      tooltip: tooltip,
-      forId: inputId,
-      characterCount: inputValue === null || inputValue === void 0 ? void 0 : inputValue.length,
-      maxCharacterAllowed: maxCharacterAllowed
-    }), typeof children === 'function' ? children({
-      inputId,
-      ...a11yProps,
-      validation: feedbackValidation
-    }) : children, feedback || maxCharsReachedErrorMessage ? /*#__PURE__*/_jsx(Feedback, {
-      id: feedbackId,
-      title: feedback || maxCharsReachedErrorMessage,
-      validation: feedbackValidation,
-      tokens: feedbackTokens,
-      variant: {
-        icon: feedbackProps.showFeedbackIcon
-      },
-      ...feedbackProps
-    }) : null]
-  });
-});
-InputSupports.displayName = 'InputSupports';
-InputSupports.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  /**
-   * Whether the English or French copy will be used (e.g. for accessibility labels).
-   */
-  copy: PropTypes.oneOf(['en', 'fr']),
-  /**
-   * The input label.
-   */
-  label: PropTypes.string,
-  /**
-   * A short description of the expected input.
-   */
-  hint: PropTypes.string,
-  /**
-   * Position of the hint relative to label.
-   */
-  hintPosition: PropTypes.oneOf(['inline', 'below']),
-  /**
-   * A detailed description of validation error/success or additional instructions.
-   * Visual variant is determined based on the `validation` prop.
-   */
-  feedback: PropTypes.string,
-  /**
-   * Additional tokens to override the default feedback tokens.
-   */
-  feedbackTokens: getTokensPropType('Feedback'),
-  /**
-   * Additional props to pass to the `Feedback` component.
-   */
-  feedbackProps: PropTypes.object,
-  /**
-   * Content of an optional `Tooltip`. If set, a tooltip button will be shown next to the label.
-   */
-  tooltip: PropTypes.string,
-  /**
-   * Use to visually mark an input as valid or invalid.
-   */
-  validation: PropTypes.oneOf(['error', 'success']),
-  /**
-   * ID for DOM element on web
-   */
-  nativeID: PropTypes.string,
-  /**
-   * The text value of a TextArea or TextInput
-   */
-  inputValue: PropTypes.string,
-  /**
-   * Max number of characters that allows an input text.
-   */
-  maxCharacterAllowed: PropTypes.number
-};
-export default InputSupports;

package/lib/Link/LinkBase.js

@@ -1,271 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Text from "react-native-web/dist/exports/Text";
-import Platform from "react-native-web/dist/exports/Platform";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { a11yProps, clickProps, getTokensPropType, hrefAttrsProp, linkProps, selectSystemProps, variantProp, viewProps, contentfulProps } from '../utils/props';
-import { resolvePressableTokens } from '../utils/pressability';
-import { withLinkRouter } from '../utils';
-import InlinePressable from './InlinePressable';
-import { applyTextStyles, applyOuterBorder, useTheme } from '../ThemeProvider';
-import { IconText, iconComponentPropTypes } from '../Icon';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps, contentfulProps]);
-const selectOuterBorderStyles = _ref => {
-  let {
-    outerBorderColor,
-    outerBorderWidth,
-    outerBorderGap,
-    borderRadius,
-    outerBorderOutline
-  } = _ref;
-  return {
-    outline: outerBorderOutline,
-    ...applyOuterBorder({
-      outerBorderColor,
-      outerBorderWidth,
-      outerBorderGap
-    }),
-    borderRadius
-  };
-};
-const selectTextStyles = _ref2 => {
-  let {
-    color,
-    blockFontSize
-  } = _ref2;
-  return {
-    color,
-    ...applyTextStyles({
-      blockFontSize
-    }),
-    ...Platform.select({
-      web: {
-        // TODO: https://github.com/telus/universal-design-system/issues/487
-        transition: 'color 200ms'
-      }
-    })
-  };
-};
-const selectBlockStyles = (_ref3, themeOptions) => {
-  let {
-    blockFontWeight,
-    blockFontSize,
-    blockLineHeight,
-    blockFontName
-  } = _ref3;
-  return applyTextStyles({
-    lineHeight: blockLineHeight,
-    fontWeight: blockFontWeight,
-    fontSize: blockFontSize,
-    fontName: blockFontName,
-    themeOptions
-  });
-};
-const selectDecorationStyles = _ref4 => {
-  let {
-    color,
-    textLine,
-    textLineStyle,
-    alignSelf
-  } = _ref4;
-  return {
-    color,
-    textDecorationLine: textLine,
-    textDecorationStyle: textLineStyle,
-    alignSelf,
-    ...Platform.select({
-      web: {
-        // TODO: https://github.com/telus/universal-design-system/issues/487
-        transition: 'color 200ms'
-      }
-    })
-  };
-};
-const selectIconTokens = _ref5 => {
-  let {
-    color,
-    iconSize,
-    blockFontSize,
-    iconTranslateX
-  } = _ref5;
-  /**
-   * 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);
-  return {
-    color,
-    translateX: iconTranslateX,
-    translateY: translateY < 0 ? 0 : translateY,
-    size: iconSize
-  };
-};
-
-/**
- * Renders a pressable text link, with optional icon. This is rendered as a block element
- * only (see 'Current Limitations'). On Web, renders an `<a>` anchor tag if `href` is provided.
- *
- * ## Current limitations
- *
- * - Not yet integrated with widely-used Telus navigation packages. This will probably
- *   require adding a `navigate` prop that aliases onPress so this can be passed to
- *   router's Link components' `Component` or `as` props but this needs testing
- *   as part of https://github.com/telus/universal-design-system/issues/24
- *
- * - Doesn't work inline e.g. in paragraphs. Support for inline links in native and
- *   web was implemented in https://github.com/telus/universal-design-system/pull/233
- *   but removed and will need to be restored at some point. When inline link support
- *   is restored, icons in inline links on Android will be slightly off-centre
- *   vertically (see )
- *
- * - Doesn't support :visited styles on web. Support for :visited styles was
- *   implemented in https://github.com/telus/universal-design-system/pull/234 but
- *   dropped in favour of investigating if a full-featured CSS-in-JS package could or
- *   should be used more widely (e.g. styled components)
- */
-const LinkBase = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
-  let {
-    href,
-    icon,
-    iconPosition = icon ? 'left' : undefined,
-    iconProps = {},
-    variant,
-    tokens = {},
-    children,
-    accessibilityRole = 'link',
-    ...rawRest
-  } = _ref6;
-  const {
-    onPress,
-    ...props
-  } = clickProps.toPressProps(rawRest);
-  const {
-    hrefAttrs,
-    rest
-  } = hrefAttrsProp.bundle(props);
-  const selectedProps = selectProps({
-    accessibilityRole,
-    href,
-    onPress: linkProps.handleHref({
-      href,
-      onPress
-    }),
-    hrefAttrs,
-    ...rest
-  });
-  const resolveLinkTokens = pressState => resolvePressableTokens(tokens, pressState, {
-    iconPosition
-  });
-  const defaultThemeTokens = resolveLinkTokens({});
-  const hasIcon = Boolean(icon || defaultThemeTokens.icon);
-
-  // On web, this makes focus rings wrap only the link, not the entire block
-  const blockLeftStyle = Platform.OS === 'web' && staticStyles.blockLeft;
-  const {
-    themeOptions
-  } = useTheme();
-  return /*#__PURE__*/_jsx(InlinePressable, {
-    ...selectedProps,
-    inlineFlex: hasIcon
-    // assuming links without icons should be inline (even if they are long)
-    ,
-    ref: ref,
-    style: linkState => {
-      const themeTokens = resolveLinkTokens(linkState);
-      const outerBorderStyles = selectOuterBorderStyles(themeTokens);
-      const decorationStyles = selectDecorationStyles(themeTokens);
-      return [outerBorderStyles, staticStyles.outerBorderStyles, blockLeftStyle, decorationStyles, hasIcon && staticStyles.rowContainer];
-    },
-    children: linkState => {
-      const themeTokens = resolveLinkTokens(linkState);
-      const textStyles = selectTextStyles(themeTokens);
-      const iconTokens = selectIconTokens(themeTokens);
-      // TODO: may need to apply some smarter text inheritance here if inline to avoid native
-      // issues like double-application of line heights breaking align-items: baseline
-      const blockTextStyles = selectBlockStyles(themeTokens, themeOptions);
-      const IconComponent = icon || themeTokens.icon;
-      const {
-        iconSpace
-      } = themeTokens;
-      return /*#__PURE__*/_jsx(IconText, {
-        icon: IconComponent,
-        iconPosition: iconPosition,
-        space: iconSpace,
-        iconProps: {
-          ...iconProps,
-          tokens: iconTokens,
-          style: staticStyles.bubblePointerEvents
-        },
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [textStyles, blockTextStyles, staticStyles.baseline, staticStyles.bubblePointerEvents],
-          children: typeof children === 'function' ? children(linkState) : children
-        })
-      });
-    }
-  });
-});
-LinkBase.displayName = 'LinkBase';
-LinkBase.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('Link'),
-  /**
-   * href for the Link
-   */
-  href: PropTypes.string,
-  /**
-   * AccesibilityRole for the link base
-   */
-  accessibilityrole: PropTypes.string,
-  /**
-   * Children nodes that can be added
-   */
-  variant: variantProp.propType,
-  /**
-   * Optional variant that may be passed down to the link's icon if there is one
-   */
-  iconProps: PropTypes.exact(iconComponentPropTypes),
-  /**
-   * A function component for an SVG icon to render inside the link. Inherits size and color from
-   * the link and any Typography the link is nested inside.
-   */
-  icon: PropTypes.elementType,
-  /**
-   * When `icon` is provided, use `iconPosition` to place the Icon to the left, right or inline with Link.
-   */
-  iconPosition: PropTypes.oneOf(['left', 'right', 'inline']),
-  /**
-   * On Web if href is passed, React Native Web maps this object's props to
-   * `rel`, `target` and `download` attrs.
-   */
-  hrefAttrs: PropTypes.shape(hrefAttrsProp.types)
-};
-const staticStyles = StyleSheet.create({
-  blockLeft: {
-    alignSelf: 'flex-start'
-  },
-  rowContainer: {
-    flexDirection: 'row',
-    justifyContent: 'flex-start'
-  },
-  baseline: {
-    alignSelf: 'baseline'
-  },
-  bubblePointerEvents: {
-    ...Platform.select({
-      web: {
-        pointerEvents: 'none'
-      }
-    })
-  },
-  outerBorderStyles: {
-    ...(Platform.OS !== 'web' && {
-      margin: 0,
-      marginHorizontal: 2,
-      padding: 0
-    })
-  }
-});
-export default withLinkRouter(LinkBase);

package/lib/List/List.js

@@ -1,77 +0,0 @@
-import React from 'react';
-import View from "react-native-web/dist/exports/View";
-import Platform from "react-native-web/dist/exports/Platform";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import PropTypes from 'prop-types';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const isListItem = element => {
-  var _element$type, _element$type2;
-  const elementName = (element === null || element === void 0 || (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type.displayName) || (element === null || element === void 0 || (_element$type2 = element.type) === null || _element$type2 === void 0 ? void 0 : _element$type2.name);
-  // Match our own ListItem, and also, custom list items
-  return Boolean(elementName.match(/Item/));
-};
-
-/**
- * An unordered List component has a child a ListItem that
- * allows icon, dividers and customized typography
- */
-const List = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    showDivider,
-    tokens,
-    variant,
-    accessibilityRole = Platform.select({
-      web: 'list',
-      default: undefined
-    }),
-    ...rest
-  } = _ref;
-  const items = React.Children.map(children, (child, index) => {
-    // Pass ListItem-specific props to children (by name so teams can add their own ListItems)
-    if (isListItem(child)) {
-      return /*#__PURE__*/React.cloneElement(child, {
-        showDivider,
-        isLastItem: index + 1 === React.Children.count(children),
-        tokens,
-        variant,
-        ...child.props
-      });
-    }
-    return child;
-  });
-  const content = /*#__PURE__*/_jsx(View, {
-    style: styles.list,
-    accessibilityRole: accessibilityRole,
-    ref: ref,
-    ...selectProps(rest),
-    children: items
-  });
-  return Platform.OS === 'web' ? /*#__PURE__*/_jsx("div", {
-    style: styles.container,
-    children: content
-  }) : content;
-});
-const styles = StyleSheet.create({
-  container: {
-    display: 'block'
-  },
-  list: {
-    flex: 1,
-    flexShrink: 1
-  }
-});
-List.displayName = 'List';
-List.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('List'),
-  variant: variantProp.propType,
-  children: PropTypes.node,
-  /**
-   * In case it is not the last item allow display divider
-   */
-  showDivider: PropTypes.bool
-};
-export default List;