@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/cjs/Button/ButtonGroup.js

@@ -0,0 +1,279 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
+var _StackView = require("../StackView");
+var _Fieldset = _interopRequireDefault(require("../Fieldset"));
+var _ViewportProvider = require("../ViewportProvider");
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _pressability = require("../utils/pressability");
+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.viewProps]);
+const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.pressProps, _utils.viewProps]);
+const ButtonGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    variant,
+    buttonVariant,
+    tokens,
+    items = [],
+    values,
+    initialValues,
+    maxValues = 1,
+    onChange,
+    readOnly = false,
+    inactive = false,
+    legend,
+    tooltip,
+    hint,
+    hintPosition = 'inline',
+    validation,
+    feedback,
+    name: inputGroupName,
+    copy,
+    iconPosition,
+    accessibilityRole = maxValues === 1 ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
+    : _Platform.default.select({
+      web: 'group',
+      default: 'none'
+    }),
+    ...rest
+  } = _ref;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ButtonGroup', tokens, variant, {
+    viewport
+  });
+  const stackTokens = (0, _utils.selectTokens)('StackView', themeTokens);
+  const {
+    direction,
+    space,
+    fieldSpace,
+    borderRadius,
+    backgroundColor,
+    padding,
+    gap
+  } = themeTokens;
+  const getButtonTokens = (0, _ThemeProvider.useThemeTokensCallback)('ButtonGroupItem', tokens, variant);
+  const {
+    currentValues,
+    toggleOneValue
+  } = (0, _utils.useMultipleInputValues)({
+    initialValues,
+    values,
+    maxValues,
+    onChange,
+    readOnly
+  });
+  const systemProps = selectProps({
+    accessibilityRole,
+    ...rest
+  });
+  const itemA11yRole = systemProps.accessibilityRole === 'radiogroup' ? 'radio' : 'checkbox';
+  const uniqueFields = ['id', 'label'];
+  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+    throw new Error(`ButtonGroup items must have unique ${uniqueFields.join(', ')}`);
+  }
+
+  // Some web screenreaders e.g. MacOS Voiceover don't handle radiogroups properly unless radio is direct child of radiogroup
+  const innerRole = _Platform.default.OS === 'web' && accessibilityRole === 'radiogroup' ? accessibilityRole : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+    ...systemProps,
+    ref: ref,
+    name: inputGroupName,
+    legend: legend,
+    tooltip: tooltip,
+    hint: hint,
+    hintPosition: hintPosition,
+    space: fieldSpace,
+    feedback: feedback,
+    readOnly: readOnly,
+    inactive: inactive,
+    validation: validation,
+    accessibilityRole: accessibilityRole,
+    style: {
+      borderRadius,
+      backgroundColor,
+      padding,
+      ...(_Platform.default.OS === 'web' ? {
+        gap,
+        width: 'fit-content'
+      } : {
+        alignSelf: 'flex-start'
+      })
+    },
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+      accessibilityRole: innerRole,
+      space: space,
+      direction: direction,
+      tokens: stackTokens,
+      gap: gap,
+      ref: ref,
+      children: items.map((_ref2, index) => {
+        let {
+          label,
+          id = label,
+          accessibilityLabel,
+          ref: itemRef,
+          ...itemRest
+        } = _ref2;
+        const isSelected = currentValues.includes(id);
+
+        // Pass an object of relevant component state as first argument for any passed-in press handlers
+        const pressHandlers = (0, _pressability.getPressHandlersWithArgs)(rest, [{
+          id,
+          label,
+          currentValues
+        }]);
+        const handlePress = event => {
+          if (pressHandlers.onPress) pressHandlers.onPress(event);
+          toggleOneValue(id, event);
+        };
+        const iconProp = itemRest.icon || undefined;
+        const itemA11y = {
+          accessibilityState: {
+            checked: isSelected
+          },
+          accessibilityRole: itemA11yRole,
+          accessibilityLabel,
+          ..._utils.a11yProps.getPositionInSet(items.length, index)
+        };
+
+        // Ensure button is direct child of group as MacOS voiceover only applies "X of Y" to
+        // "radio" if it's a direct child of "radiogroup", even if aria-posinset etc exists
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+          ref: itemRef,
+          variant: buttonVariant,
+          ...pressHandlers,
+          onPress: handlePress,
+          tokens: getButtonTokens,
+          selected: isSelected,
+          inactive: inactive,
+          icon: iconProp,
+          ...selectItemProps({
+            ...itemRest,
+            ...itemA11y
+          }),
+          iconPosition: iconPosition,
+          children: label
+        }, id);
+      })
+    })
+  });
+});
+ButtonGroup.displayName = 'ButtonGroup';
+ButtonGroup.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('ButtonGroup'),
+  /**
+   * To allow Button specific variant
+   */
+  buttonVariant: _utils.variantProp.propType,
+  /**
+   * Default variant prop
+   */
+  variant: _utils.variantProp.propType,
+  /**
+   * The maximum number of items a user may select at once. Defaults to 1 and behaves
+   * like radio buttons. To have no limit and allow any number of selections, pass `null`.
+   */
+  maxValues: _propTypes.default.number,
+  /**
+   * The options a user may select
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.shape({
+    ...selectedItemPropTypes,
+    /**
+     * The text displayed to the user in the button, describing this option,
+     * passed to the button as its child.
+     */
+    label: _propTypes.default.string.isRequired,
+    /**
+     * An optional accessibility label may be passed to ButtonGroup Buttons
+     * which is applied as normal for a React Native accessibilityLabel prop.
+     */
+    accessibilityLabel: _propTypes.default.string,
+    /**
+     * An optional unique string may be provided to identify this option,
+     * which will be used in code and passed to any onChange function.
+     * If not provided, the label is used.
+     */
+    id: _propTypes.default.string,
+    /**
+     * An optional ref for one individual button in the ButtonGroup
+     */
+    ref: _airbnbPropTypes.default.ref()
+  })),
+  /**
+   * If provided, this function is called when the current selection is changed
+   * and is passed an array of the `id`s of all currently selected `items`.
+   */
+  onChange: _propTypes.default.func,
+  /**
+   * If the selected item(s) in the button group are to be controlled externally by
+   * a parent component, pass an array of strings as well as an `onChange` handler.
+   * Passing an array for "values" makes the ButtonGroup a "controlled" component that
+   * expects its state to be handled via `onChange` and so doesn't handle it itself.
+   */
+  values: _propTypes.default.arrayOf(_propTypes.default.string),
+  /**
+   * If `values` is not passed, making the ButtonGroup an "uncontrolled" component
+   * managing its own selected state, a default set of selections may be provided.
+   * Changing the `initialValues` does not change the user's selections.
+   */
+  initialValues: _propTypes.default.arrayOf(_propTypes.default.string),
+  /**
+   * Defines if the icon will be displayed on the right or left side of the label.
+   */
+  iconPosition: _propTypes.default.oneOf(['left', 'right']),
+  /**
+   * Main text used to describe this group, used in Fieldset's Legend element.
+   */
+  legend: _propTypes.default.string,
+  /**
+   * Optional additional text giving more detail to help a user make a choice.
+   */
+  hint: _propTypes.default.string,
+  /**
+   * Position of the hint relative to label. Use `below` to display a larger hint below the label.
+   */
+  hintPosition: _propTypes.default.oneOf(['inline', 'below']),
+  /**
+   * Optional tooltip text content to include alongside the legend and hint.
+   */
+  tooltip: _propTypes.default.string,
+  /**
+   * Current validation status of the group, passed to the feedback element if there is one.
+   */
+  validation: _propTypes.default.oneOf(['error', 'success']),
+  /**
+   * If provided, a Feedback element is rendered containing this text.
+   */
+  feedback: _propTypes.default.string,
+  /**
+   * If true, the buttons cannot be selected by the user and simply show their current state.
+   */
+  readOnly: _propTypes.default.bool,
+  /**
+   * If true, the buttons cannot be interacted with, elements are set as `disabled` and if the
+   * theme supports `inactive` appearances rules, these are applied.
+   */
+  inactive: _propTypes.default.bool,
+  /**
+   * On Web, this is passed to the `name` attribute of the fieldset.
+   */
+  name: _propTypes.default.string,
+  /**
+   * Sets the language of microcopy in subcomponents (e.g. Tooltip's default accessibility label).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr'])
+};
+var _default = exports.default = ButtonGroup;

package/lib/cjs/Button/ButtonLink.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
+var _propTypes2 = _interopRequireWildcard(require("./propTypes"));
+var _props = require("../utils/props");
+var _ThemeProvider = require("../ThemeProvider");
+var _ViewportProvider = require("../ViewportProvider");
+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 }; }
+/**
+ * `ButtonLink` is a component with the semantics and behaviour of a link, but with the visual appearance of a button.
+ * ButtonLink is a block-level component and should not be used inline.
+ */const ButtonLink = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    accessibilityRole = 'link',
+    tokens,
+    variant,
+    dataSet,
+    ...props
+  } = _ref;
+  const {
+    hrefAttrs,
+    rest
+  } = _props.hrefAttrsProp.bundle(props);
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const buttonVariant = {
+    viewport,
+    ...variant
+  };
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Button', tokens, buttonVariant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+    ref: ref,
+    accessibilityRole: accessibilityRole,
+    tokens: getTokens,
+    hrefAttrs: hrefAttrs,
+    dataSet: dataSet,
+    ...rest
+  });
+});
+ButtonLink.displayName = 'ButtonLink';
+ButtonLink.propTypes = {
+  ..._props.a11yProps.types,
+  ..._propTypes2.default,
+  ..._props.linkProps.types,
+  children: _propTypes2.textAndA11yText,
+  dataSet: _propTypes.default.object,
+  accessibilityRole: _propTypes.default.string
+};
+var _default = exports.default = ButtonLink;

package/lib/cjs/Button/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function () {
+    return _Button.default;
+  }
+});
+Object.defineProperty(exports, "ButtonDropdown", {
+  enumerable: true,
+  get: function () {
+    return _ButtonDropdown.default;
+  }
+});
+Object.defineProperty(exports, "ButtonGroup", {
+  enumerable: true,
+  get: function () {
+    return _ButtonGroup.default;
+  }
+});
+Object.defineProperty(exports, "ButtonLink", {
+  enumerable: true,
+  get: function () {
+    return _ButtonLink.default;
+  }
+});
+var _Button = _interopRequireDefault(require("./Button"));
+var _ButtonLink = _interopRequireDefault(require("./ButtonLink"));
+var _ButtonGroup = _interopRequireDefault(require("./ButtonGroup"));
+var _ButtonDropdown = _interopRequireDefault(require("./ButtonDropdown"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/cjs/Button/propTypes.js

@@ -0,0 +1,53 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.textAndA11yText = exports.default = void 0;
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
+var _props = require("../utils/props");
+var _A11yText = _interopRequireDefault(require("../A11yText"));
+var _Icon = require("../Icon");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const textAndA11yText = exports.textAndA11yText = _airbnbPropTypes.default.childrenOf(_propTypes.default.oneOfType([_airbnbPropTypes.default.elementType(_A11yText.default), _propTypes.default.string]));
+const buttonPropTypes = {
+  tokens: (0, _props.getTokensPropType)('Button'),
+  /**
+   * If true, prevents the button from being pressed, changes the cursor (on web) and accessibility
+   * attributes to communicate this to the user, and applies `inactive: true` appearances from the theme
+   */
+  inactive: _propTypes.default.bool,
+  /**
+   * Alias for `inactive`
+   */
+  disabled: _propTypes.default.bool,
+  /**
+   * Button's children must be either:
+   *  - One or more text strings and / or A11yText components
+   *  - A render function with contents that responds to current button state by being passed an object of:
+   * ```
+   * { hovered<bool>, focused<bool>, pressed<bool>, inactive<bool>, selected<bool>, textStyles<RNStyle> }
+   * ```
+   */
+  children: _propTypes.default.oneOfType([_propTypes.default.func, textAndA11yText]).isRequired,
+  /**
+   * Function called when the button is pressed. Required unless the button has a href.
+   */
+  onPress: _propTypes.default.func,
+  /**
+   * Optional variant that may be passed down to the link's icon if there is one
+   */
+  iconProps: _propTypes.default.exact(_Icon.iconComponentPropTypes),
+  /**
+   * When `icon` is provided, use `iconPosition` to place the Icon to the left or right side of the button.
+   */
+  iconPosition: _propTypes.default.oneOf(['left', 'right']),
+  /**
+   * 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.default.func,
+  variant: _props.variantProp.propType
+};
+var _default = exports.default = buttonPropTypes;