@telus-uds/components-base 0.0.2-prerelease.1 → 0.0.2-prerelease.10

package/lib/Link/LinkBase.js

@@ -1,41 +1,70 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+"use strict";
 
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import { Text, Platform, StyleSheet, Pressable, PixelRatio, View, TouchableWithoutFeedback } from 'react-native';
-import { a11yProps, hrefAttrsProp, variantProp, linkProps, getTokensPropType } from '../utils/propTypes';
-import { useThemeTokens, applyTextStyles } from '../ThemeProvider';
-
-const selectContentStyles = ({
-  color
-}) => ({
-  color
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _propTypes2 = require("../utils/propTypes");
+
+var _pressability = require("../utils/pressability");
+
+var _InlinePressable = _interopRequireDefault(require("./InlinePressable"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _Icon = require("../Icon");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const selectOuterBorderStyles = ({
   outerBorderColor,
   outerBorderWidth,
   outerBorderGap,
-  outerBorderRadius,
+  borderRadius,
   outerBorderOutline
 }) => // 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' ? {
-  margin: -1 * (outerBorderGap + outerBorderWidth) || 0,
-  padding: outerBorderGap,
+_Platform.default.OS === 'web' ? {
   // Allow theme to define outline, or, turn off outline and use border if rounded corners required
   outline: outerBorderOutline,
-  borderWidth: outerBorderWidth,
-  borderColor: outerBorderColor,
-  borderRadius: outerBorderRadius
+  ...(0, _ThemeProvider.applyOuterBorder)({
+    outerBorderColor,
+    outerBorderWidth,
+    outerBorderGap,
+    borderRadius
+  }),
+  // Stops focus ring stretching horizontally if parent has display: block
+  // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
+  display: 'inline-flex'
 } : {};
 
 const selectTextStyles = ({
+  color,
   textLine,
   textLineStyle
 }) => ({
+  color,
   textDecorationLine: textLine,
-  textDecorationStyle: textLineStyle
+  textDecorationStyle: textLineStyle,
+  ..._Platform.default.select({
+    web: {
+      // TODO: https://github.com/telus/universal-design-system/issues/487
+      transition: 'color 200ms'
+    }
+  })
 });
 
 const selectBlockStyles = ({
@@ -43,25 +72,23 @@ const selectBlockStyles = ({
   blockFontSize,
   blockLineHeight,
   blockFontName
-}) => applyTextStyles({
+}) => (0, _ThemeProvider.applyTextStyles)({
   fontWeight: blockFontWeight,
   fontSize: blockFontSize,
   lineHeight: blockLineHeight,
   fontName: blockFontName
 });
 
-const selectIconStyles = ({
+const selectIconTokens = ({
+  color,
   iconSize,
-  iconGapBefore,
-  iconGapAfter,
-  iconScale,
-  iconTranslateX
+  iconTranslateX,
+  iconTranslateY
 }) => ({
-  scale: iconScale,
+  color,
   translateX: iconTranslateX,
-  size: iconSize,
-  gapBefore: iconGapBefore,
-  gapAfter: iconGapAfter
+  translateY: iconTranslateY,
+  size: iconSize
 });
 /**
  * Renders a pressable text link, with optional icon. This is rendered as a block element
@@ -92,157 +119,98 @@ const LinkBase = ({
   onPress,
   icon,
   iconPosition = icon ? 'left' : undefined,
-  iconVariant,
+  iconProps,
   variant,
-  tokens,
+  tokens = {},
   children,
   accessibilityRole = 'link',
   ...props
 }) => {
-  const handlePress = linkProps.handleHref({
-    href,
-    onPress
-  });
-  const [isFocused, setIsFocused] = useState(false);
-
-  const handleFocus = () => setIsFocused(true);
-
-  const handleBlur = () => setIsFocused(false);
-
-  const [isHovered, setIsHovered] = useState(false);
-
-  const handleHoverIn = () => setIsHovered(true);
-
-  const handleHoverOut = () => setIsHovered(false);
-
-  const [isPressed, setIsPressed] = useState(false);
-
-  const handlePressIn = () => setIsPressed(true);
-
-  const handlePressOut = () => setIsPressed(false);
-
   const {
     hrefAttrs,
     rest
-  } = hrefAttrsProp.bundle(props);
-  const linkPropSet = linkProps.select({
+  } = _propTypes2.hrefAttrsProp.bundle(props);
+
+  const linkPropSet = _propTypes2.linkProps.select({
     accessibilityRole,
     href,
-    onPress: handlePress,
-    onPressIn: handlePressIn,
-    onPressOut: handlePressOut,
-    onFocus: handleFocus,
-    onBlur: handleBlur,
-    onMouseEnter: handleHoverIn,
-    onMouseLeave: handleHoverOut,
-    ...hrefAttrsProp.spread(hrefAttrs),
+    onPress: _propTypes2.linkProps.handleHref({
+      href,
+      onPress
+    }),
+    hrefAttrs,
     ...rest
   });
-  const themeTokens = useThemeTokens('Link', tokens, variant, {
-    focus: isFocused,
-    hover: isHovered,
-    pressed: isPressed,
+
+  const resolveLinkTokens = pressState => (0, _pressability.resolvePressableTokens)(tokens, pressState, {
     iconPosition
+  }); // On web, this makes focus rings wrap only the link, not the entire block
+
+
+  const blockLeftStyle = _Platform.default.OS === 'web' && staticStyles.blockLeft;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_InlinePressable.default, { ...linkPropSet,
+    style: linkState => {
+      const themeTokens = resolveLinkTokens(linkState);
+      const outerBorderStyles = selectOuterBorderStyles(themeTokens);
+      const hasIcon = Boolean(icon || themeTokens.icon);
+      return [outerBorderStyles, blockLeftStyle, 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);
+      const IconComponent = icon || themeTokens.icon;
+      const {
+        iconSpace
+      } = themeTokens;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {
+        icon: IconComponent,
+        iconPosition: iconPosition,
+        space: iconSpace,
+        iconProps: { ...iconProps,
+          tokens: iconTokens
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          style: [textStyles, blockTextStyles, staticStyles.baseline],
+          children: children
+        })
+      });
+    }
   });
-  const IconComponent = icon || themeTokens.icon;
-  const hasIcon = !!IconComponent;
-  const textStyles = selectTextStyles(themeTokens);
-  const outerBorderStyles = selectOuterBorderStyles(themeTokens);
-  const contentStyles = selectContentStyles(themeTokens);
-  const blockStyles = selectBlockStyles(themeTokens);
-  const iconStyles = selectIconStyles(themeTokens); // TODO: re-apply support for inline links
-
-  const isNested = false; // On web, this makes focus rings wrap only the link, not the entire block
-
-  const blockLeftStyle = Platform.OS === 'web' && staticStyles.blockLeft; // Apply typographic text styles if not inheriting, and block positioning if a block
-
-  const blockTextStyles = !isNested && blockStyles;
-
-  if (!hasIcon) {
-    // onPressIn / onPressOut only work if on TouchableWithoutFeedback, onFocus only works if on Text
-    const {
-      onPress: _onPress,
-      onPressIn,
-      onPressOut,
-      ...textProps
-    } = linkPropSet;
-    return (
-      /*#__PURE__*/
-      // TouchableWithoutFeedback modifies its child so this stack is all (touchable) Text: no Views
-      React.createElement(TouchableWithoutFeedback, {
-        onPressIn: onPressIn,
-        onPressOut: onPressOut,
-        onPress: _onPress
-      }, /*#__PURE__*/React.createElement(Text, _extends({}, textProps, {
-        style: [outerBorderStyles, blockLeftStyle, contentStyles, blockTextStyles, textStyles]
-      }), children))
-    );
-  } // Scale icon with text, but with a cap so text isn't squashed at large scales
-
-
-  const iconScale = Math.min(PixelRatio.getFontScale(), 2);
-  const iconTokens = {
-    size: iconStyles.size ? iconStyles.size * iconScale : undefined,
-    color: contentStyles.color ?? undefined,
-    scale: iconStyles.scale ?? undefined,
-    translateX: iconStyles.translateX ?? undefined
-  };
-  const iconContent = /*#__PURE__*/React.createElement(IconComponent, {
-    tokens: iconTokens,
-    variant: iconVariant
-  });
-  const iconBlock = isNested ? // TODO: when reimplementing inline support, insert an appropriate space character
-  // based on the value of gapBefore and gapAfter on native (no inline margins/padding)
-  iconContent : /*#__PURE__*/React.createElement(View, {
-    style: [iconPosition === 'left' && {
-      marginRight: iconStyles.gapAfter * iconScale
-    }, iconPosition === 'right' && {
-      marginLeft: iconStyles.gapBefore * iconScale
-    }]
-  }, iconContent); // TODO: this doesn't work well when nested inline but does allow block-links to have icons align
-  // properly on Android which purely inline links can't do. Add an isNested case that is similar to
-  // https://github.com/telus/universal-design-system/pull/233
-
-  return /*#__PURE__*/React.createElement(Pressable, _extends({}, linkPropSet, {
-    style: [outerBorderStyles, blockLeftStyle, staticStyles.rowContainer]
-  }), iconPosition === 'left' && iconBlock, /*#__PURE__*/React.createElement(Text, {
-    style: [contentStyles, blockTextStyles, textStyles, Platform.select({
-      web: {
-        // TODO: https://github.com/telus/universal-design-system/issues/487
-        transition: 'color 200ms'
-      }
-    })]
-  }, children), iconPosition === 'right' && iconBlock);
 };
 
-LinkBase.propTypes = { ...a11yProps.types,
-  ...linkProps.types,
-  tokens: getTokensPropType('Link'),
-  variant: variantProp.propType,
+LinkBase.propTypes = { ..._propTypes2.a11yProps.types,
+  ..._propTypes2.linkProps.types,
+  tokens: (0, _propTypes2.getTokensPropType)('Link'),
+  variant: _propTypes2.variantProp.propType,
 
   /**
    * Optional variant that may be passed down to the link's icon if there is one
    */
-  iconVariant: variantProp.propType,
+  iconProps: _propTypes.default.exact(_Icon.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.func,
+  icon: _propTypes.default.func,
 
   /**
    * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of Link.
    */
-  iconPosition: PropTypes.oneOf(['left', 'right']),
+  iconPosition: _propTypes.default.oneOf(['left', 'right']),
 
   /**
    * On Web if href is passed, React Native Web maps this object's props to
-   * `rel`, `target` and (>= RNW 0.15.0) `download` attrs.
+   * `rel`, `target` and `download` attrs.
    */
-  hrefAttrs: PropTypes.shape(hrefAttrsProp.types)
+  hrefAttrs: _propTypes.default.shape(_propTypes2.hrefAttrsProp.types)
 };
-const staticStyles = StyleSheet.create({
+
+const staticStyles = _StyleSheet.default.create({
   blockLeft: {
     alignSelf: 'flex-start'
   },
@@ -250,6 +218,11 @@ const staticStyles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'center',
     justifyContent: 'flex-start'
+  },
+  baseline: {
+    alignSelf: 'baseline'
   }
 });
-export default LinkBase;
+
+var _default = LinkBase;
+exports.default = _default;

package/lib/Link/TextButton.js

@@ -1,28 +1,56 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+"use strict";
 
-import React from 'react';
-import PropTypes from 'prop-types';
-import LinkBase from './LinkBase';
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _LinkBase = _interopRequireDefault(require("./LinkBase"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _TextButton$propTypes;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * `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.
+ */
 const TextButton = ({
   onPress,
   children,
-  variant = {},
+  variant,
+  tokens,
+  // TODO: this may need to use `link` role on Web in the case of being passed both `href` and
+  // `onPress` in an omniplatform app that uses React Navigation's useLinkProps for internal nav.
   accessibilityRole = 'button',
   ...linkProps
-}) => /*#__PURE__*/React.createElement(LinkBase, _extends({
-  onPress: onPress,
-  accessibilityRole: accessibilityRole,
-  variant: {
-    component: 'TextButton',
-    ...variant
-  }
-}, linkProps), children);
-
-TextButton.propTypes = { ...LinkBase.propTypes,
-  onPress: PropTypes.func.isRequired
+}) => {
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Link', tokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, {
+    onPress: onPress,
+    accessibilityRole: accessibilityRole,
+    tokens: getTokens,
+    ...linkProps,
+    children: children
+  });
+};
+
+TextButton.propTypes = { ..._LinkBase.default.propTypes,
+  onPress: _propTypes.default.func.isRequired
 }; // Remove incompatible Link prop (if this build includes propTypes)
+// TODO: test if this works with web navigation in omniplatform React Navigation
+// https://github.com/telus/universal-design-system/issues/665
 // eslint-disable-next-line react/forbid-foreign-prop-types
 
-if (TextButton.propTypes?.href) delete TextButton.propTypes.href;
-export default TextButton;
+if ((_TextButton$propTypes = TextButton.propTypes) !== null && _TextButton$propTypes !== void 0 && _TextButton$propTypes.href) delete TextButton.propTypes.href;
+var _default = TextButton;
+exports.default = _default;

package/lib/Link/index.js

@@ -1,4 +1,39 @@
-import ChevronLink from './ChevronLink';
-import Link from './Link';
-import TextButton from './TextButton';
-export { ChevronLink, Link, TextButton };
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ChevronLink", {
+  enumerable: true,
+  get: function () {
+    return _ChevronLink.default;
+  }
+});
+Object.defineProperty(exports, "Link", {
+  enumerable: true,
+  get: function () {
+    return _Link.default;
+  }
+});
+Object.defineProperty(exports, "LinkBase", {
+  enumerable: true,
+  get: function () {
+    return _LinkBase.default;
+  }
+});
+Object.defineProperty(exports, "TextButton", {
+  enumerable: true,
+  get: function () {
+    return _TextButton.default;
+  }
+});
+
+var _ChevronLink = _interopRequireDefault(require("./ChevronLink"));
+
+var _Link = _interopRequireDefault(require("./Link"));
+
+var _LinkBase = _interopRequireDefault(require("./LinkBase"));
+
+var _TextButton = _interopRequireDefault(require("./TextButton"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/List/List.js

@@ -0,0 +1,80 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _utils = require("../utils");
+
+var _propTypes2 = require("../utils/propTypes");
+
+var _ListItem = _interopRequireDefault(require("./ListItem"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+/**
+ * A Unordered List component has a child a ListItem that
+ * allows icon, dividers and customized typography
+ */
+const List = ({
+  children,
+  showDivider,
+  tokens,
+  variant,
+  ...rest
+}) => {
+  const accessibilityRole = _Platform.default.select({
+    web: 'list',
+    default: 'none'
+  });
+
+  const a11y = _propTypes2.a11yProps.select(rest);
+
+  const items = _react.Children.map(children, (child, index) => {
+    if (child.type.name === _ListItem.default.name) {
+      return /*#__PURE__*/(0, _react.cloneElement)(child, {
+        showDivider,
+        isLastItem: index + 1 === _react.Children.count(children),
+        tokens,
+        variant
+      });
+    }
+
+    return child;
+  });
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    accessibilityRole: accessibilityRole,
+    ...a11y,
+    children: items
+  });
+};
+
+List.Item = _ListItem.default;
+List.propTypes = { ..._propTypes2.a11yProps.types,
+  tokens: (0, _utils.getTokensPropType)('List'),
+  variant: _utils.variantProp.propType,
+  children: (0, _utils.componentPropType)('ListItem'),
+
+  /**
+   * In case it is not the last item allow display divider
+   */
+  showDivider: _propTypes.default.bool
+};
+var _default = List;
+exports.default = _default;