@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/cjs/Radio/Radio.js

@@ -0,0 +1,291 @@
+"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 _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _LabelContent = _interopRequireDefault(require("../InputLabel/LabelContent"));
+var _RadioButton = _interopRequireWildcard(require("./RadioButton"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _StackView = _interopRequireDefault(require("../StackView"));
+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 [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
+const selectContainerStyles = _ref => {
+  let {
+    containerBackgroundColor,
+    containerBorderRadius,
+    containerOpacity,
+    containerPaddingBottom,
+    containerPaddingLeft,
+    containerPaddingRight,
+    containerPaddingTop,
+    containerShadow
+  } = _ref;
+  return {
+    backgroundColor: containerBackgroundColor,
+    borderRadius: containerBorderRadius,
+    opacity: containerOpacity,
+    paddingBottom: containerPaddingBottom,
+    paddingLeft: containerPaddingLeft,
+    paddingRight: containerPaddingRight,
+    paddingTop: containerPaddingTop,
+    ...(0, _ThemeProvider.applyShadowToken)(containerShadow)
+  };
+};
+const selectDescriptionStyles = _ref2 => {
+  let {
+    containerPaddingLeft = 0,
+    descriptionFontSize,
+    descriptionLineHeight,
+    descriptionMarginLeft,
+    descriptionFontName,
+    descriptionFontWeight,
+    inputSize,
+    fontColor,
+    labelMarginLeft = 0
+  } = _ref2;
+  return {
+    marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputSize + labelMarginLeft,
+    color: fontColor,
+    ...(0, _ThemeProvider.applyTextStyles)({
+      fontSize: descriptionFontSize,
+      lineHeight: descriptionLineHeight,
+      fontName: descriptionFontName,
+      fontWeight: descriptionFontWeight
+    })
+  };
+};
+const selectLabelStyles = _ref3 => {
+  let {
+    labelColor,
+    labelFontName,
+    labelFontSize,
+    labelFontWeight,
+    labelMarginLeft,
+    labelLineHeight
+  } = _ref3;
+  return (0, _ThemeProvider.applyTextStyles)({
+    color: labelColor,
+    fontName: labelFontName,
+    fontWeight: labelFontWeight,
+    fontSize: labelFontSize,
+    lineHeight: labelLineHeight,
+    marginLeft: labelMarginLeft
+  });
+};
+
+/**
+ * Basic Radio component.
+ *
+ * ## Component API
+ *
+ * Use `label` prop to provide a label for the radio button. For a disabled `Radio` set the `inactive` prop to `true`.
+ *
+ * ### Controlled version
+ *
+ * If the radio button is controlled from outside, it needs to receive `checked` and `onChange` props.
+ *
+ * ### Uncontrolled version
+ *
+ * In case of uncontrolled radio button you can use `defaultChecked` prop to provide the initial value.
+ * Whenever the radio button gets toggled, it calls the `onChange` callback with the new value (boolean).
+ *
+ * ### Using within forms
+ *
+ * You can pass `name` and `value` props if you need a particular radio button to be a part of a radio group
+ * on a form.
+ *
+ * ### Validation
+ *
+ * You can mark a radio button as failing validation by setting the `error` prop to `true`.
+ *
+ * ## A11y guidelines
+ *
+ * Radio component accepts all the common accessibility props, but also sets some defaults, including
+ * accessibility role `'radio'` and accessibility state that depends on the other props (`checked`, `inactive`)
+ * or the internal state in case of uncontrolled radio button.
+ *
+ */
+const Radio = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+  let {
+    checked,
+    defaultChecked,
+    description,
+    error = false,
+    id,
+    inactive,
+    label,
+    name: inputName,
+    onChange,
+    tokens,
+    value,
+    variant,
+    ...rest
+  } = _ref4;
+  const {
+    currentValue: isChecked,
+    setValue: setIsChecked,
+    isControlled
+  } = (0, _utils.useInputValue)({
+    value: checked,
+    initialValue: defaultChecked,
+    onChange
+  }, 'useRadioValue');
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Radio', tokens, {
+    checked: isChecked,
+    inactive,
+    error,
+    ...variant
+  });
+  const handleChange = event => {
+    if (!inactive && !isChecked) {
+      setIsChecked(true, event);
+    }
+  };
+  const handleKeyDown = event => {
+    // The expected keyboard shortcut for activating a radio is the Space key
+    if (event?.key === ' ') handleChange(event);
+  };
+  const uniqueId = (0, _utils.useUniqueId)('radio');
+  const inputId = id ?? uniqueId;
+  const selectedProps = selectProps({
+    accessibilityRole: 'radio',
+    accessibilityState: {
+      checked: isChecked,
+      disabled: inactive
+    },
+    ...rest
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
+    disabled: inactive,
+    onKeyDown: handleKeyDown,
+    onPress: handleChange,
+    ...selectedProps,
+    style: staticStyles.removeOutline,
+    children: _ref5 => {
+      let {
+        focused: focus,
+        hovered: hover,
+        pressed
+      } = _ref5;
+      const stateTokens = getTokens({
+        focus,
+        hover,
+        pressed
+      });
+      const labelStyles = selectLabelStyles(stateTokens);
+      const alignWithLabel = label ? [staticStyles.alignWithLabel, {
+        height: labelStyles.lineHeight
+      }] : null;
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+        space: 0,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+          style: [staticStyles.container, selectContainerStyles(stateTokens)],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: alignWithLabel,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioButton.default, {
+              tokens: (0, _RadioButton.selectRadioButtonTokens)(stateTokens),
+              isControlled: isControlled,
+              isChecked: isChecked,
+              inactive: inactive,
+              defaultChecked: defaultChecked,
+              inputId: inputId,
+              handleChange: handleChange,
+              name: inputName,
+              value: value
+            })
+          }), Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+            style: labelStyles,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.default, {
+              forId: inputId,
+              children: label
+            })
+          })]
+        }), Boolean(description) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          style: selectDescriptionStyles({
+            ...getTokens(),
+            fontColor: labelStyles.color
+          }),
+          children: description
+        })]
+      });
+    }
+  });
+});
+Radio.displayName = 'Radio';
+Radio.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Use `checked` for controlled Radio. For uncontrolled Radio, use the `defaultChecked` prop.
+   */
+  checked: _propTypes.default.bool,
+  /**
+   * Use `defaultChecked` to provide the initial value for an uncontrolled Radio.
+   */
+  defaultChecked: _propTypes.default.bool,
+  /**
+   * An optional radio button description.
+   */
+  description: _propTypes.default.string,
+  /**
+   * Radio button ID.
+   */
+  id: _propTypes.default.string,
+  /**
+   * Whether the corresponding input is disabled or active.
+   */
+  inactive: _propTypes.default.bool,
+  /**
+   * The label.
+   */
+  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  /**
+   * Associate this radio button with a group (set as the name attribute).
+   */
+  name: _propTypes.default.string,
+  /**
+   * Whether the underlying input triggered a validation error or not.
+   */
+  error: _propTypes.default.bool,
+  /**
+   * The value. Must be unique within the group.
+   */
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number, _propTypes.default.bool]),
+  /**
+   * Callback called when a controlled radio button gets interacted with.
+   */
+  onChange: _propTypes.default.func,
+  /**
+   * Radio tokens.
+   */
+  tokens: (0, _utils.getTokensPropType)('Radio'),
+  /**
+   * Radio variant.
+   */
+  variant: _utils.variantProp.propType
+};
+var _default = exports.default = Radio;
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  alignWithLabel: {
+    alignSelf: 'flex-start',
+    justifyContent: 'center'
+  },
+  removeOutline: {
+    outlineStyle: 'none'
+  }
+});

package/lib/cjs/Radio/RadioButton.js

@@ -0,0 +1,191 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectRadioButtonTokens = 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 _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _RadioInput = _interopRequireDefault(require("./RadioInput"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+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]);
+
+// TODO: roll out a standard approach to token sets
+// https://github.com/telus/universal-design-system/issues/782
+const tokenKeys = ['checkedBackgroundColor', 'checkedSize', 'inputBackgroundColor', 'inputBorderColor', 'inputBorderWidth', 'inputOutlineColor', 'inputOutlineWidth', 'inputSize', 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap', 'inputSize'];
+const selectRadioButtonTokens = (themeTokens, prefix) => (0, _utils.selectTokens)(tokenKeys, themeTokens, prefix);
+exports.selectRadioButtonTokens = selectRadioButtonTokens;
+const getBorderRadius = inputSize => inputSize / 2;
+const selectCheckedStyles = _ref => {
+  let {
+    checkedBackgroundColor,
+    checkedSize
+  } = _ref;
+  return {
+    backgroundColor: checkedBackgroundColor,
+    borderRadius: checkedSize / 2,
+    height: checkedSize,
+    width: checkedSize
+  };
+};
+const selectIconTokens = _ref2 => {
+  let {
+    icon,
+    iconColor,
+    checkedSize
+  } = _ref2;
+  return {
+    icon,
+    color: iconColor,
+    size: checkedSize
+  };
+};
+const selectInputIconStyles = (_ref3, isChecked) => {
+  let {
+    iconBackgroundColor,
+    inputBackgroundColor,
+    inputBorderColor,
+    inputBorderWidth,
+    inputSize,
+    containerShadow
+  } = _ref3;
+  return {
+    borderColor: inputBorderColor,
+    borderRadius: getBorderRadius(inputSize),
+    borderWidth: inputBorderWidth,
+    backgroundColor: isChecked ? iconBackgroundColor : inputBackgroundColor,
+    height: inputSize,
+    width: inputSize,
+    ...(0, _ThemeProvider.applyShadowToken)(containerShadow)
+  };
+};
+const selectInputStyles = _ref4 => {
+  let {
+    inputBackgroundColor,
+    inputBorderColor,
+    inputBorderWidth,
+    inputOutlineColor,
+    inputOutlineWidth,
+    inputSize
+  } = _ref4;
+  return {
+    borderColor: inputBorderColor,
+    borderRadius: getBorderRadius(inputSize),
+    borderWidth: inputBorderWidth,
+    backgroundColor: inputBackgroundColor,
+    height: inputSize,
+    width: inputSize,
+    ..._Platform.default.select({
+      web: {
+        outlineStyle: 'solid',
+        outlineColor: inputOutlineColor,
+        outlineWidth: inputOutlineWidth
+      }
+    })
+  };
+};
+const selectOuterBorderStyles = _ref5 => {
+  let {
+    outerBorderColor,
+    outerBorderWidth,
+    outerBorderGap,
+    inputSize
+  } = _ref5;
+  return {
+    ...(0, _ThemeProvider.applyOuterBorder)({
+      outerBorderColor,
+      outerBorderWidth,
+      outerBorderGap,
+      borderRadius: getBorderRadius(inputSize)
+    })
+  };
+};
+
+/**
+ * The visual toggle of a radio input. Is not interactive on its own, should be used inside
+ * an interactive parent that passes down props when interacted with.
+ */
+const RadioButton = /*#__PURE__*/_react.default.forwardRef((_ref6, ref) => {
+  let {
+    isChecked,
+    tokens,
+    inactive,
+    defaultChecked,
+    inputId,
+    isControlled,
+    handleChange,
+    name: inputName,
+    value,
+    testID = 'Radio-Checked',
+    ...rest
+  } = _ref6;
+  const radioTokens = (0, _ThemeProvider.useThemeTokens)('Radio', tokens, {
+    checked: isChecked
+  });
+  const {
+    icon: IconComponent,
+    ...iconTokens
+  } = selectIconTokens(radioTokens);
+  const themeTokens = (0, _ThemeProvider.validateThemeTokens)((0, _ThemeProvider.resolveThemeTokens)(IconComponent ? radioTokens : tokens, {
+    checked: isChecked
+  }), (0, _utils.getTokensSetPropType)(tokenKeys), 'RadioButton');
+  const getCheckedInput = checked => {
+    if (!checked) return null;
+    if (!IconComponent) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: selectCheckedStyles(themeTokens),
+        testID: testID
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+      ...iconTokens
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: selectOuterBorderStyles(themeTokens),
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [staticStyles.defaultInputStyles, IconComponent ? selectInputIconStyles(themeTokens, isChecked) : selectInputStyles(themeTokens)],
+      testID: "Radio-Input",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_RadioInput.default, {
+        ref: ref,
+        checked: isChecked,
+        defaultChecked: defaultChecked,
+        disabled: inactive,
+        id: inputId,
+        isControlled: isControlled,
+        onChange: handleChange,
+        name: inputName,
+        value: value
+      }), getCheckedInput(isChecked)]
+    })
+  });
+});
+RadioButton.displayName = 'RadioButton';
+RadioButton.propTypes = {
+  ...selectedSystemPropTypes,
+  isChecked: _propTypes.default.bool,
+  tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
+    allowFunction: true
+  }),
+  inactive: _propTypes.default.bool,
+  defaultChecked: _propTypes.default.bool,
+  inputId: _propTypes.default.string,
+  isControlled: _propTypes.default.bool,
+  handleChange: _propTypes.default.func,
+  name: _propTypes.default.string,
+  value: _propTypes.default.bool
+};
+const staticStyles = _StyleSheet.default.create({
+  defaultInputStyles: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});
+var _default = exports.default = RadioButton;