@telus-uds/components-base 2.0.0 → 2.0.1

package/lib-module/Link/LinkBase.js

@@ -1,244 +0,0 @@
-import React, { forwardRef } 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 } 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]);
-
-const selectOuterBorderStyles = _ref => {
-  let {
-    outerBorderColor,
-    outerBorderWidth,
-    outerBorderGap,
-    borderRadius,
-    outerBorderOutline
-  } = _ref;
-  return (// A view wrapper with a border on native messes up inline text alignment
-    // so for now make focus styles strictly web-only
-    Platform.OS === 'web' ? {
-      // Allow theme to define outline, or, turn off outline and use border if rounded corners required
-      outline: outerBorderOutline,
-      ...applyOuterBorder({
-        outerBorderColor,
-        outerBorderWidth,
-        outerBorderGap,
-        borderRadius
-      })
-    } : {}
-  );
-};
-
-const selectTextStyles = _ref2 => {
-  let {
-    color
-  } = _ref2;
-  return {
-    color,
-    ...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({
-    fontWeight: blockFontWeight,
-    fontSize: blockFontSize,
-    lineHeight: blockLineHeight,
-    fontName: blockFontName,
-    themeOptions
-  });
-};
-
-const selectDecorationStyles = _ref4 => {
-  let {
-    color,
-    textLine,
-    textLineStyle
-  } = _ref4;
-  return {
-    color,
-    textDecorationLine: textLine,
-    textDecorationStyle: textLineStyle,
-    ...Platform.select({
-      web: {
-        // TODO: https://github.com/telus/universal-design-system/issues/487
-        transition: 'color 200ms'
-      }
-    })
-  };
-};
-
-const selectIconTokens = _ref5 => {
-  let {
-    color,
-    iconSize,
-    iconTranslateX,
-    iconTranslateY
-  } = _ref5;
-  return {
-    color,
-    translateX: iconTranslateX,
-    translateY: iconTranslateY,
-    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__*/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, 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
-        },
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [textStyles, blockTextStyles, staticStyles.baseline],
-          children: children
-        })
-      });
-    }
-  });
-});
-LinkBase.displayName = 'LinkBase';
-LinkBase.propTypes = { ...selectedSystemPropTypes,
-  tokens: getTokensPropType('Link'),
-  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 or right side of Link.
-   */
-  iconPosition: PropTypes.oneOf(['left', 'right']),
-
-  /**
-   * 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',
-    alignItems: 'center',
-    justifyContent: 'flex-start'
-  },
-  baseline: {
-    alignSelf: 'baseline'
-  }
-});
-export default withLinkRouter(LinkBase);

package/lib-module/Link/TextButton.js

@@ -1,35 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import LinkBase from './LinkBase';
-/**
- * `TextButton` is a button that looks like a Link. It uses the same theming and variants as
- * Link but has the accessibility role of a `Button`. It should be used for actions that
- * take place on the current page, or for navigation within an app.
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-const TextButton = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    onPress,
-    children,
-    variant,
-    tokens,
-    accessibilityRole = 'button',
-    ...linkProps
-  } = _ref;
-  const getTokens = useThemeTokensCallback('Link', tokens, variant);
-  return /*#__PURE__*/_jsx(LinkBase, {
-    onPress: onPress,
-    accessibilityRole: accessibilityRole,
-    tokens: getTokens,
-    ref: ref,
-    ...linkProps,
-    children: children
-  });
-});
-TextButton.displayName = 'TextButton';
-TextButton.propTypes = { ...LinkBase.propTypes,
-  onPress: PropTypes.func.isRequired
-};
-export default TextButton;

package/lib-module/Link/index.js

@@ -1,5 +0,0 @@
-import ChevronLink from './ChevronLink';
-import Link from './Link';
-import LinkBase from './LinkBase';
-import TextButton from './TextButton';
-export { ChevronLink, Link, LinkBase, TextButton };

package/lib-module/List/List.js

@@ -1,66 +0,0 @@
-import React, { cloneElement, forwardRef, Children } from 'react';
-import View from "react-native-web/dist/exports/View";
-import Platform from "react-native-web/dist/exports/Platform";
-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 ? void 0 : (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type.displayName) || (element === null || element === void 0 ? 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__*/forwardRef((_ref, ref) => {
-  let {
-    children,
-    showDivider,
-    tokens,
-    variant,
-    accessibilityRole = Platform.select({
-      web: 'list',
-      default: undefined
-    }),
-    ...rest
-  } = _ref;
-  const items = 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__*/cloneElement(child, {
-        showDivider,
-        isLastItem: index + 1 === Children.count(children),
-        tokens,
-        variant,
-        ...child.props
-      });
-    }
-
-    return child;
-  });
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    accessibilityRole: accessibilityRole,
-    ...selectProps(rest),
-    children: items
-  });
-});
-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;

package/lib-module/List/ListItem.js

@@ -1,38 +0,0 @@
-import React, { forwardRef } from 'react';
-import ListItemBase from './ListItemBase';
-import Typography from '../Typography';
-import { useThemeTokens } from '../ThemeProvider';
-import { variantProp } from '../utils';
-/**
- * ListItem is responsible for rendering icon or a bullet as side item
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const ListItem = /*#__PURE__*/forwardRef((_ref, ref) => {
-  let {
-    tokens,
-    variant,
-    children,
-    title,
-    ...listItemProps
-  } = _ref;
-  const themeTokens = useThemeTokens('List', tokens, variant);
-  return /*#__PURE__*/_jsxs(ListItemBase, {
-    tokens: themeTokens,
-    ref: ref,
-    ...listItemProps,
-    children: [Boolean(title) && /*#__PURE__*/_jsx(Typography, {
-      variant: {
-        size: 'h4'
-      },
-      children: title
-    }), children]
-  });
-});
-ListItem.displayName = 'ListItem';
-ListItem.propTypes = {
-  variant: variantProp.propType,
-  ...ListItemBase.propTypes
-};
-export default ListItem;

package/lib-module/List/ListItemBase.js

@@ -1,139 +0,0 @@
-import React, { forwardRef } 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 ListItemContent from './ListItemContent';
-import ListItemMark from './ListItemMark';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-const selectItemBlockStyles = _ref => {
-  let {
-    interItemMargin
-  } = _ref;
-  return {
-    marginBottom: interItemMargin
-  };
-};
-
-const selectDividerStyles = _ref2 => {
-  let {
-    dividerColor,
-    dividerSize,
-    interItemMarginWithDivider
-  } = _ref2;
-  return {
-    borderBottomWidth: dividerSize,
-    borderColor: dividerColor,
-    marginBottom: interItemMarginWithDivider,
-    paddingBottom: interItemMarginWithDivider
-  };
-};
-/**
- * ListItem is responsible for rendering icon or a bullet as side item
- */
-
-
-const ListItemBase = /*#__PURE__*/forwardRef((_ref3, ref) => {
-  let {
-    tokens,
-    icon,
-    iconColor,
-    iconSize,
-    showDivider,
-    children,
-    isLastItem,
-    accessibilityRole = Platform.select({
-      web: 'listitem',
-      default: undefined
-    }),
-    ...rest
-  } = _ref3;
-  const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
-  const itemBlockStyles = selectItemBlockStyles(themeTokens);
-  const dividerStyles = selectDividerStyles(themeTokens);
-  /**
-   * Function responsible returning styling, in case the item is the last shouldn't
-   * add extra margin on the bottom, if "showDivider" is true it should add a divider
-   * and custom margin and padding, otherwise just adds a margin to the bottom
-   */
-
-  const getContainerStyle = () => {
-    if (isLastItem) {
-      return undefined;
-    }
-
-    if (showDivider) {
-      return dividerStyles;
-    }
-
-    return itemBlockStyles;
-  };
-
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: [staticStyles.itemContainer, getContainerStyle()],
-    accessibilityRole: accessibilityRole,
-    ...selectProps(rest),
-    children: typeof children === 'function' ? children({
-      tokens,
-      icon,
-      iconColor,
-      iconSize,
-      isLastItem
-    }) : /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(ListItemMark, {
-        tokens: tokens,
-        icon: icon,
-        iconColor: iconColor,
-        iconSize: iconSize
-      }), /*#__PURE__*/_jsx(ListItemContent, {
-        tokens: tokens,
-        children: children
-      })]
-    })
-  });
-});
-ListItemBase.displayName = 'ListItem';
-const staticStyles = StyleSheet.create({
-  itemContainer: {
-    flexDirection: 'row'
-  }
-});
-ListItemBase.propTypes = { ...selectedSystemPropTypes,
-  tokens: getTokensPropType('List'),
-  variant: variantProp.propType,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]).isRequired,
-
-  /**
-   * Renders side item icon
-   */
-  icon: PropTypes.elementType,
-
-  /**
-   * Will set display icon color
-   */
-  iconColor: PropTypes.string,
-
-  /**
-   * Allow the user define the icon size if not defined the theme's file
-   */
-  iconSize: PropTypes.number,
-
-  /**
-   * @ignore
-   * Defined by parent if it's last item on the list
-   */
-  isLastItem: PropTypes.bool,
-
-  /**
-   * @ignore
-   * In case it is not the last item allow display divider
-   */
-  showDivider: PropTypes.bool
-};
-export default ListItemBase;

package/lib-module/List/ListItemContent.js

@@ -1,66 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { wrapStringsInText } from '../utils';
-import { useTheme, applyTextStyles } from '../ThemeProvider';
-import { jsx as _jsx } from "react/jsx-runtime";
-export const tokenTypes = {
-  itemFontWeight: PropTypes.string.isRequired,
-  itemFontSize: PropTypes.number.isRequired,
-  itemLineHeight: PropTypes.number.isRequired,
-  itemFontName: PropTypes.string.isRequired
-};
-
-const selectItemTextStyles = (_ref, themeOptions) => {
-  let {
-    itemFontWeight,
-    itemFontSize,
-    itemLineHeight,
-    itemFontName
-  } = _ref;
-  return applyTextStyles({
-    fontWeight: itemFontWeight,
-    fontSize: itemFontSize,
-    lineHeight: itemLineHeight,
-    fontName: itemFontName,
-    themeOptions
-  });
-};
-/**
- * Subcomponent used within ListItem and similar components for rendering content that fills
- * and wraps available space in a { flexDirection: row } container alongside a ListIconMark,
- * and that applies text styles to strings via supplied tokens.
- *
- * It's the responsibility of themes to make sure that these text tokens align the first line of
- * text nicely against the bullet or icon rendered by ListIconMark.
- */
-
-
-const ListItemContent = _ref2 => {
-  let {
-    tokens,
-    children
-  } = _ref2;
-  const {
-    themeOptions
-  } = useTheme();
-  const textStyles = selectItemTextStyles(tokens, themeOptions);
-  return /*#__PURE__*/_jsx(View, {
-    style: staticStyles.wrap,
-    children: wrapStringsInText(children, {
-      style: textStyles
-    })
-  });
-};
-
-const staticStyles = StyleSheet.create({
-  wrap: {
-    flex: 1
-  }
-});
-ListItemContent.propTypes = {
-  tokens: PropTypes.shape(tokenTypes).isRequired,
-  children: PropTypes.node.isRequired
-};
-export default ListItemContent;