@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/cjs/Button/ButtonBase.js

@@ -0,0 +1,353 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _ThemeProvider = require("../ThemeProvider");
+var _propTypes2 = _interopRequireDefault(require("./propTypes"));
+var _utils = require("../utils");
+var _Icon = require("../Icon");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.linkProps, _utils.viewProps]);
+const getOuterBorderOffset = _ref => {
+  let {
+    outerBorderGap = 0,
+    outerBorderWidth = 0
+  } = _ref;
+  return outerBorderGap + outerBorderWidth;
+};
+const selectOuterContainerStyles = _ref2 => {
+  let {
+    opacity,
+    outerBorderColor,
+    outerBorderWidth,
+    outerBorderGap,
+    borderRadius,
+    outerBackgroundColor
+  } = _ref2;
+  return {
+    ..._Platform.default.select({
+      native: {
+        alignSelf: 'flex-start'
+      }
+    }),
+    backgroundColor: outerBackgroundColor,
+    opacity,
+    ...(0, _ThemeProvider.applyOuterBorder)({
+      outerBorderGap,
+      outerBorderWidth,
+      outerBorderColor,
+      borderRadius
+    })
+  };
+};
+const selectOuterSizeStyles = _ref3 => {
+  let {
+    outerBorderGap,
+    outerBorderWidth,
+    width,
+    height
+  } = _ref3;
+  // The inner container's bounding box is the bounding box of the button overall
+  // so this many device pixels will sit outside of the overall bounding box
+  const outerBorderOffset = getOuterBorderOffset({
+    outerBorderGap,
+    outerBorderWidth
+  });
+  const sizeStyles = {};
+  // Apply width/height tokens: number === pixels, string === explicit units e.g. %
+  if (typeof width === 'number' && width > 0 || typeof height === 'number' && height > 0) {
+    sizeStyles.width = width ? width + outerBorderOffset * 2 : width;
+    sizeStyles.height = height ? height + outerBorderOffset * 2 : height;
+    return sizeStyles;
+  }
+  if (!width) {
+    return {
+      ...sizeStyles,
+      // Wrap content, stopping a flex parent's default align-items: stretch stretching focus ring beyond content
+      ..._Platform.default.select({
+        // width: fit-content isn't supported on Firefox; can't cascade props like CSS `width: fit-content; width: --moz-fit-content;`
+        web: {
+          display: 'inline-flex'
+        }
+      })
+    };
+  }
+
+  // Ensure the negative margin doesn't make element off-centre
+  if (_Platform.default.OS === 'web') {
+    sizeStyles.width = `calc(${width} + ${outerBorderOffset * 2}px)`;
+    sizeStyles.height = `calc(${height} + ${outerBorderOffset * 2}px)`;
+    return sizeStyles;
+  }
+  // Can't use calc() on native but (unlike on web) flexGrow fills the container width here
+  if (width === '100%') {
+    sizeStyles.flexGrow = 1;
+    return sizeStyles;
+  }
+
+  // Slight offset not such a concern if % width < 100%, as the button isn't centered anyway.
+  // If centering support is added (e.g. alignSelf: center), set marginHorizontal 0 when centered.
+  sizeStyles.width = width;
+  sizeStyles.height = height;
+  return sizeStyles;
+};
+const selectInnerContainerStyles = _ref4 => {
+  let {
+    backgroundColor,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    shadow,
+    borderWidth,
+    borderLeftWidth,
+    borderRightWidth,
+    borderTopWidth,
+    borderBottomWidth,
+    minWidth
+  } = _ref4;
+  // Subtract border width from padding so overall button width/height doesn't
+  // jump around if the border width changes (avoiding NaN and negative padding)
+  const offsetBorder = _ref5 => {
+    let {
+      value,
+      borderSize = borderWidth
+    } = _ref5;
+    return typeof value === 'number' && typeof borderSize === 'number' ? Math.max(0, value - borderSize) : value;
+  };
+  return {
+    paddingLeft: offsetBorder({
+      value: paddingLeft,
+      borderSize: borderLeftWidth
+    }),
+    paddingRight: offsetBorder({
+      value: paddingRight,
+      borderSize: borderRightWidth
+    }),
+    paddingTop: offsetBorder({
+      value: paddingTop,
+      borderSize: borderTopWidth
+    }),
+    paddingBottom: offsetBorder({
+      value: paddingBottom,
+      borderSize: borderBottomWidth
+    }),
+    backgroundColor,
+    minWidth,
+    ...(0, _ThemeProvider.applyShadowToken)(shadow)
+  };
+};
+const selectBorderStyles = _ref6 => {
+  let {
+    borderColor,
+    borderWidth,
+    borderRadius,
+    borderLeftWidth,
+    borderRightWidth,
+    borderTopWidth,
+    borderBottomWidth
+  } = _ref6;
+  return {
+    borderColor,
+    borderWidth,
+    borderRadius,
+    borderLeftWidth,
+    borderRightWidth,
+    borderTopWidth,
+    borderBottomWidth
+  };
+};
+const selectTextStyles = (_ref7, themeOptions) => {
+  let {
+    fontSize,
+    color,
+    lineHeight,
+    fontName,
+    fontWeight,
+    textAlign,
+    textLine,
+    textLineStyle
+  } = _ref7;
+  return (0, _ThemeProvider.applyTextStyles)({
+    fontSize,
+    color,
+    lineHeight,
+    fontName,
+    fontWeight,
+    themeOptions,
+    textAlign,
+    textDecorationLine: textLine,
+    textDecorationStyle: textLineStyle
+  });
+};
+const selectWebOnlyStyles = (inactive, themeTokens, _ref8) => {
+  let {
+    accessibilityRole
+  } = _ref8;
+  return _Platform.default.select({
+    web: {
+      // if it would overflow the container, wraps instead
+      maxWidth: `calc(100% + ${getOuterBorderOffset(themeTokens) * 2}px)`,
+      width: 'fit-content',
+      outline: 'none',
+      // removes the default browser :focus outline
+      ...(0, _utils.getCursorStyle)(inactive, accessibilityRole)
+    },
+    default: {}
+  });
+};
+const selectButtonStyles = _ref9 => {
+  let {
+    textAlign
+  } = _ref9;
+  return {
+    flexDirection: 'row',
+    justifyContent: textAlign
+  };
+};
+const selectItemIconTokens = _ref10 => {
+  let {
+    color,
+    iconColor,
+    iconSize
+  } = _ref10;
+  return {
+    size: iconSize,
+    color: iconColor || color
+  };
+};
+const ButtonBase = /*#__PURE__*/_react.default.forwardRef((_ref11, ref) => {
+  let {
+    id,
+    href,
+    hrefAttrs,
+    children,
+    tokens = {},
+    disabled = false,
+    // alias for inactive
+    inactive = disabled,
+    selected = false,
+    icon,
+    iconPosition = icon ? 'left' : undefined,
+    iconProps,
+    ...rawRest
+  } = _ref11;
+  const {
+    onPress,
+    ...rest
+  } = _utils.clickProps.toPressProps(rawRest);
+  const extraButtonState = {
+    inactive,
+    selected,
+    iconPosition
+  };
+  const resolveButtonTokens = pressableState => (0, _utils.resolvePressableTokens)(tokens, pressableState, extraButtonState);
+  const systemProps = selectProps(rest);
+  const getPressableStyle = pressableState => {
+    const themeTokens = resolveButtonTokens(pressableState);
+    return [staticStyles.row, selectWebOnlyStyles(inactive, themeTokens, systemProps), selectOuterContainerStyles(themeTokens), selectOuterSizeStyles(themeTokens)];
+  };
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
+    href: href,
+    onPress: _utils.linkProps.handleHref({
+      href,
+      onPress
+    }),
+    style: getPressableStyle,
+    disabled: inactive,
+    hrefAttrs: hrefAttrs,
+    ...systemProps,
+    children: pressableState => {
+      const themeTokens = resolveButtonTokens(pressableState);
+      const containerStyles = selectInnerContainerStyles(themeTokens);
+      const borderStyles = selectBorderStyles(themeTokens);
+      const textStyles = [selectTextStyles(themeTokens, themeOptions), staticStyles.text, _Platform.default.select({
+        web: {
+          pointerEvents: 'none' // bubbles press event to parent `Pressable`
+        }
+      })];
+      const iconTokens = selectItemIconTokens(themeTokens);
+      const {
+        iconSpace
+      } = themeTokens;
+
+      // If the container has a width set, fill it instead of sizing from content.
+      // If in future we support text alignments other than center, add here.
+      const stretchStyles = themeTokens.width ? staticStyles.stretch : staticStyles.align;
+      const IconComponent = icon || themeTokens.icon;
+      const rowStyles = selectButtonStyles(themeTokens);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        id: id,
+        style: [containerStyles, borderStyles, stretchStyles, staticStyles.row, _Platform.default.select({
+          web: {
+            maxWidth: '100%',
+            // ensure overflowing content wraps
+            // TODO: https://github.com/telus/universal-design-system/issues/487
+            transition: 'background-color 200ms, border-color 200ms',
+            pointerEvents: 'none',
+            // bubbles press event to parent `Pressable`
+            ...rowStyles
+          }
+        })],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.IconText, {
+          icon: IconComponent,
+          iconPosition: iconPosition,
+          space: icon ? iconSpace : 0,
+          iconProps: {
+            ...iconProps,
+            tokens: iconTokens
+          },
+          children: (0, _utils.wrapStringsInText)(typeof children === 'function' ? children({
+            ...(0, _utils.resolvePressableState)(pressableState, extraButtonState),
+            textStyles
+          }) : children, {
+            style: textStyles
+          })
+        })
+      });
+    }
+  });
+});
+ButtonBase.displayName = 'ButtonBase';
+ButtonBase.propTypes = {
+  id: _propTypes.default.string,
+  ...selectedSystemPropTypes,
+  ..._propTypes2.default
+};
+const staticStyles = _StyleSheet.default.create({
+  row: {
+    // Apply all button alignment horizontally; no vertical stacking within a button
+    flexDirection: 'row',
+    justifyContent: 'center'
+  },
+  text: {
+    ..._Platform.default.select({
+      // TODO: https://github.com/telus/universal-design-system/issues/487
+      web: {
+        transition: 'color 200ms'
+      }
+    })
+  },
+  align: {
+    alignItems: 'center'
+  },
+  stretch: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+var _default = exports.default = (0, _utils.withLinkRouter)(ButtonBase);

package/lib/cjs/Button/ButtonDropdown.js

@@ -0,0 +1,182 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _propTypes2 = _interopRequireWildcard(require("./propTypes"));
+var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _Icon = _interopRequireDefault(require("../Icon"));
+var _StackView = require("../StackView");
+var _pressability = require("../utils/pressability");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const selectIconTokens = _ref => {
+  let {
+    icon,
+    iconPosition,
+    iconSpace,
+    iconSize,
+    iconColor,
+    iconBackground,
+    iconBorderRadius,
+    iconAlignSelf,
+    iconPadding,
+    iconTranslateX,
+    iconTranslateY
+  } = _ref;
+  return {
+    icon,
+    iconPosition,
+    iconSpace,
+    iconWrapperStyle: {
+      backgroundColor: iconBackground,
+      borderRadius: iconBorderRadius,
+      alignSelf: iconAlignSelf,
+      padding: iconPadding,
+      ..._Platform.default.select({
+        // TODO: https://github.com/telus/universal-design-system/issues/487
+        web: {
+          transition: 'color 200ms, background 200ms'
+        }
+      })
+    },
+    iconTokens: {
+      size: iconSize,
+      color: iconColor,
+      translateX: iconTranslateX,
+      translateY: iconTranslateY
+    }
+  };
+};
+const ButtonDropdown = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    value,
+    initialValue,
+    onChange,
+    label,
+    tokens,
+    variant,
+    inactive = false,
+    readOnly = false,
+    children = null,
+    accessibilityRole = 'radio',
+    ...props
+  } = _ref2;
+  const {
+    currentValue: isOpen,
+    setValue: setIsOpen
+  } = (0, _utils.useInputValue)({
+    value,
+    initialValue,
+    onChange,
+    readOnly
+  }, 'useButtonDropdownValues');
+  const extraState = {
+    open: isOpen,
+    inactive,
+    ...variant
+  };
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonDropdown', tokens, extraState);
+  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getTokens(buttonState));
+
+  // Pass an object of relevant component state as first argument for any passed-in press handlers
+  const pressHandlers = (0, _pressability.getPressHandlersWithArgs)(props, [{
+    label,
+    open: isOpen
+  }]);
+  const handlePress = event => {
+    if (!inactive) {
+      if (pressHandlers.onPress) pressHandlers?.onPress(event);
+      setIsOpen(!isOpen, event);
+    }
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+    ref: ref,
+    ...pressHandlers,
+    onPress: handlePress,
+    tokens: getButtonTokens,
+    inactive: inactive,
+    icon: () => null,
+    accessibilityRole: accessibilityRole,
+    ...props,
+    children: _ref3 => {
+      let {
+        textStyles,
+        ...buttonState
+      } = _ref3;
+      // TODO: once Icon/IconButton designs are stable, see if this sort of styling around
+      // an icon should go in Icon itself, or possibly via an IconText token set. Related issues:
+      // - Icon: https://github.com/telus/universal-design-system/issues/327
+      // - IconButton: https://github.com/telus/universal-design-system/issues/281
+      // - Token sets: https://github.com/telus/universal-design-system/issues/782
+
+      const itemTokens = getTokens(buttonState);
+      const {
+        iconTokens,
+        iconPosition,
+        iconSpace,
+        iconWrapperStyle,
+        icon: IconComponent
+      } = selectIconTokens(itemTokens);
+      const iconContent = IconComponent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: iconWrapperStyle,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          icon: IconComponent,
+          tokens: iconTokens
+        })
+      }) : null;
+      const childrenContent = () => typeof children === 'function' ? children({
+        ...(0, _utils.resolvePressableState)(buttonState, extraState),
+        textStyles
+      }) : children;
+      const content = children ? childrenContent() : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        style: textStyles,
+        children: label
+      });
+      return (0, _StackView.getStackedContent)(iconPosition === 'left' ? [iconContent, content] : [content, iconContent], {
+        space: iconSpace,
+        direction: 'row'
+      });
+    }
+  });
+});
+ButtonDropdown.displayName = 'ButtonDropdown';
+ButtonDropdown.propTypes = {
+  ..._utils.a11yProps.types,
+  ..._utils.focusHandlerProps.types,
+  ..._propTypes2.default,
+  children: _propTypes2.textAndA11yText,
+  tokens: (0, _utils.getTokensPropType)('ButtonDropdown'),
+  /**
+   * Callback called when a controlled ButtonDropdown gets interacted with.
+   */
+  onChange: _propTypes.default.func,
+  /**
+   * `value` prop is being used to set the 'open' state of ButtonDropdown. Use it for
+   *  controlled ButtonDropdown. For uncontrolled ButtonDropdown, use `initialValue`.
+   */
+  value: _propTypes.default.bool,
+  /**
+   * Use `initialValue` to provide the initial value for an uncontrolled version.
+   */
+  initialValue: _propTypes.default.bool,
+  /**
+   * The label of ButtonDropdown.
+   */
+  label: _propTypes.default.string,
+  /**
+   * By default, `ButtonDropdown` is treated by accessibility tools as a radio button.
+   */
+  accessibilityRole: _propTypes.default.string
+};
+var _default = exports.default = ButtonDropdown;