@telus-uds/components-base 1.63.0 → 1.65.0

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @telus-uds/components-base
 
-This log was last generated on Wed, 04 Oct 2023 18:37:04 GMT and should not be manually modified.
+This log was last generated on Thu, 26 Oct 2023 19:24:58 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 1.65.0
+
+Thu, 26 Oct 2023 19:24:58 GMT
+
+### Minor changes
+
+- Add `equalWidth` variant in `Tabs` (shahzaibkhalidmalik@outlook.com)
+- new CheckboxCard component (mauricio.batresmontejo@telus.com)
+- Bump @telus-uds/system-theme-tokens to v2.42.0
+
+## 1.64.0
+
+Thu, 19 Oct 2023 00:28:36 GMT
+
+### Minor changes
+
+- added new styles for public mobile premium theme button, typography, radio button, checkbox, progress, progress bar (luis.florescarpinteyro@telus.com)
+
 ## 1.63.0
 
-Wed, 04 Oct 2023 18:37:04 GMT
+Wed, 04 Oct 2023 18:39:58 GMT
 
 ### Minor changes
 

package/lib/Checkbox/CheckboxButton.js

@@ -0,0 +1,200 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.selectCheckboxTokens = exports.default = void 0;
+
+var _react = _interopRequireWildcard(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 _CheckboxInput = _interopRequireDefault(require("./CheckboxInput"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+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; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
+const selectInputStyles = (_ref, isChecked) => {
+  let {
+    iconBackgroundColor,
+    inputBorderColor,
+    inputBorderRadius,
+    inputBorderWidth,
+    inputBackgroundColor,
+    inputHeight,
+    inputOutlineColor,
+    inputOutlineWidth,
+    inputOutlineOffset,
+    inputShadow,
+    inputWidth
+  } = _ref;
+  return {
+    borderColor: inputBorderColor,
+    borderWidth: inputBorderWidth,
+    borderRadius: inputBorderRadius,
+    backgroundColor: isChecked ? iconBackgroundColor : inputBackgroundColor,
+    height: inputHeight,
+    width: inputWidth,
+    ...(0, _ThemeProvider.applyShadowToken)(inputShadow),
+    ..._Platform.default.select({
+      web: {
+        outlineStyle: 'solid',
+        outlineColor: inputOutlineColor,
+        outlineWidth: inputOutlineWidth,
+        outlineOffset: inputOutlineOffset
+      }
+    })
+  };
+};
+
+const selectIconTokens = _ref2 => {
+  let {
+    icon,
+    iconColor,
+    iconSize
+  } = _ref2;
+  return {
+    icon,
+    color: iconColor,
+    size: iconSize
+  };
+};
+
+const tokenKeys = ['checkedBackgroundColor', 'checkedSize', 'inputBackgroundColor', 'inputBorderColor', 'inputBorderWidth', 'inputOutlineColor', 'inputOutlineWidth', 'inputSize', 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap', 'inputSize'];
+
+const selectCheckboxTokens = (themeTokens, prefix) => (0, _utils.selectTokens)(tokenKeys, themeTokens, prefix);
+/**
+ * The visual toggle of a checkbox input. Is not interactive on its own, should be used inside
+ * an interactive parent that passes down props when interacted with. Used in CheckboxCard
+ */
+
+
+exports.selectCheckboxTokens = selectCheckboxTokens;
+const CheckboxButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    isChecked,
+    tokens,
+    inactive,
+    defaultChecked,
+    inputId,
+    iconId,
+    isControlled,
+    handleChange,
+    name: inputName,
+    value,
+    ...rest
+  } = _ref3;
+  const {
+    icon: IconComponent,
+    ...stateTokens
+  } = (0, _ThemeProvider.useThemeTokens)('Checkbox', {}, {
+    checked: isChecked
+  });
+  const iconTokens = selectIconTokens(stateTokens);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [staticStyles.defaultInputStyles, selectInputStyles(stateTokens, isChecked)],
+      testID: inputId,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxInput.default, {
+        ref: ref,
+        checked: isChecked,
+        defaultChecked: defaultChecked,
+        disabled: inactive,
+        id: inputId,
+        isControlled: isControlled,
+        onChange: handleChange,
+        name: inputName,
+        value: value
+      }), isChecked && IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        testID: iconId,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...iconTokens
+        })
+      })]
+    })
+  });
+});
+CheckboxButton.displayName = 'CheckboxButton';
+CheckboxButton.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Use `checked` for controlled Checkbox. For uncontrolled Checkbox, use the `defaultChecked` prop.
+   */
+  isChecked: _propTypes.default.bool,
+
+  /**
+   * Checkbox tokens.
+   */
+  tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
+    allowFunction: true
+  }),
+
+  /**
+   * Whether the corresponding input is disabled or active.
+   */
+  inactive: _propTypes.default.bool,
+
+  /**
+   * Use `defaultChecked` to provide the initial value for an uncontrolled Checkbox.
+   */
+  defaultChecked: _propTypes.default.bool,
+
+  /**
+   * Checkbox input ID.
+   */
+  inputId: _propTypes.default.string,
+
+  /**
+   * Checkbox icon ID.
+   */
+  iconId: _propTypes.default.string,
+
+  /**
+   * Can control the checkbox on the card.
+   */
+  isControlled: _propTypes.default.bool,
+
+  /**
+   * Callback called when a controlled checkbox gets interacted with.
+   */
+  handleChange: _propTypes.default.func,
+
+  /**
+   * Associate this checkbox with a group (set as the name attribute).
+   */
+  name: _propTypes.default.string,
+
+  /**
+   * The value of the checkbox: true or false
+   */
+  value: _propTypes.default.bool
+};
+var _default = CheckboxButton;
+exports.default = _default;
+
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  },
+  defaultInputStyles: {
+    alignItems: 'center',
+    justifyContent: 'center'
+  }
+});

package/lib/CheckboxCard/CheckboxCard.js

@@ -0,0 +1,225 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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 _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _Card = require("../Card");
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _CheckboxButton = _interopRequireWildcard(require("../Checkbox/CheckboxButton"));
+
+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; }
+
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
+const CheckboxCard = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    tokens,
+    variant,
+    title,
+    children,
+    inactive,
+    defaultChecked,
+    checked,
+    name: inputName,
+    value,
+    id,
+    iconId,
+    onChange,
+    ...rest
+  } = _ref;
+  const {
+    currentValue: isChecked,
+    setValue: setIsChecked,
+    isControlled
+  } = (0, _utils.useInputValue)({
+    value: checked,
+    initialValue: defaultChecked,
+    onChange
+  });
+
+  const handleChange = event => {
+    if (!inactive) {
+      setIsChecked(!isChecked, event);
+    }
+  };
+
+  const uniqueId = (0, _utils.useUniqueId)('CheckboxCard');
+  const inputId = id ?? uniqueId;
+  const uniqueIconId = (0, _utils.useUniqueId)('CheckboxIcon');
+  const iconCheckboxId = iconId ?? uniqueIconId;
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('CheckboxCard', tokens, variant);
+
+  const getCardTokens = cardState => (0, _Card.selectPressableCardTokens)(getTokens(cardState));
+
+  const {
+    themeOptions
+  } = (0, _ThemeProvider.useTheme)();
+  const selectedProps = selectProps({
+    accessibilityRole: 'checkbox',
+    accessibilityState: {
+      checked: isChecked,
+      disabled: inactive
+    },
+    ...rest
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.PressableCardBase, {
+    ref: ref,
+    inactive: inactive,
+    checked: isChecked,
+    tokens: getCardTokens,
+    onPress: handleChange,
+    ...selectedProps,
+    children: cardState => {
+      const {
+        checkboxSpace,
+        contentSpace,
+        ...themeTokens
+      } = getTokens(cardState);
+      const checkboxTokens = (0, _CheckboxButton.selectCheckboxTokens)(themeTokens, 'checkbox');
+      const titleTokens = (0, _utils.selectTokens)('Typography', themeTokens);
+      const textStyle = (0, _ThemeProvider.applyTextStyles)({ ...titleTokens,
+        themeOptions
+      });
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+        direction: "row",
+        space: checkboxSpace,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [staticStyles.alignWithText, {
+            height: textStyle.lineHeight
+          }],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxButton.default, {
+            tokens: checkboxTokens,
+            isControlled: isControlled,
+            isChecked: isChecked,
+            inactive: inactive,
+            defaultChecked: defaultChecked,
+            inputId: inputId,
+            iconId: iconCheckboxId,
+            handleChange: handleChange,
+            name: inputName,
+            value: value
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+          direction: "column",
+          space: contentSpace,
+          tokens: {
+            flexShrink: 1
+          },
+          children: [title ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+            style: textStyle,
+            children: title
+          }) : null, typeof children === 'function' ? children(cardState, textStyle) : children]
+        })]
+      });
+    }
+  });
+});
+CheckboxCard.displayName = 'CheckboxCard';
+CheckboxCard.propTypes = { ...selectedSystemPropTypes,
+
+  /**
+   * Content to be displayed at the top of the card alongside the checkbox
+   */
+  title: _propTypes.default.string,
+
+  /**
+   * Additional content to be displayed below the checkbox.
+   */
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+
+  /**
+   * Use `checked` for controlled checkbox. For uncontrolled checkbox, use the `defaultChecked` prop.
+   */
+  checked: _propTypes.default.bool,
+
+  /**
+   * Use `defaultChecked` to provide the initial value for an uncontrolled checkbox.
+   */
+  defaultChecked: _propTypes.default.bool,
+
+  /**
+   * An optional checkboxdescription.
+   */
+  description: _propTypes.default.string,
+
+  /**
+   * Checkbox card ID.
+   */
+  id: _propTypes.default.string,
+
+  /**
+   * Checkbox icon ID.
+   */
+  iconId: _propTypes.default.string,
+
+  /**
+   * Whether the corresponding input is disabled or active.
+   */
+  inactive: _propTypes.default.bool,
+
+  /**
+   * The label.
+   */
+  label: _propTypes.default.string,
+
+  /**
+   * Associate this checkbox card 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 checkbox card gets interacted with.
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * checkbox card tokens.
+   */
+  tokens: (0, _utils.getTokensPropType)('CheckboxCard'),
+
+  /**
+   * checkbox variant.
+   */
+  variant: _utils.variantProp.propType
+};
+var _default = CheckboxCard;
+exports.default = _default;
+
+const staticStyles = _StyleSheet.default.create({
+  alignWithText: {
+    justifyContent: 'center'
+  }
+});

package/lib/CheckboxCard/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _CheckboxCard = _interopRequireDefault(require("./CheckboxCard"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _CheckboxCard.default;
+exports.default = _default;

package/lib/StackView/StackView.js

@@ -103,10 +103,13 @@ const StackView = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     viewport
   });
   const flexStyles = (0, _common.selectFlexStyles)(themeTokens);
+  const size = {
+    width: themeTokens.width
+  };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     ref: ref,
     ...selectedProps,
-    style: [flexStyles, _common.staticStyles[direction]],
+    style: [flexStyles, _common.staticStyles[direction], size],
     children: content
   });
 });

package/lib/Tabs/Tabs.js

@@ -7,6 +7,8 @@ exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
@@ -48,6 +50,17 @@ const getDefaultTabItemAccessibilityRole = parentRole => {
       return undefined;
   }
 };
+
+const getStackViewTokens = variant => {
+  const equalWidth = variant === null || variant === void 0 ? void 0 : variant.equalWidth;
+  return _Platform.default.select({
+    web: {
+      justifyContent: equalWidth ? 'space-evenly' : 'flex-start',
+      width: equalWidth ? '100%' : 'auto'
+    },
+    default: {}
+  });
+};
 /**
  * Tabs renders a horizontally-scrolling menu of selectable buttons which may link
  * to a page or control what content is displayed on this page.
@@ -98,6 +111,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   const restProps = selectProps(rest);
   const parentAccessibilityRole = restProps.accessibilityRole ?? 'tablist';
   const defaultTabItemAccessibiltyRole = getDefaultTabItemAccessibilityRole(parentAccessibilityRole);
+  const stackViewTokens = getStackViewTokens(variant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_HorizontalScroll.default, {
     ref: ref,
     ScrollButton: _HorizontalScroll.HorizontalScrollButton,
@@ -109,6 +123,7 @@ const Tabs = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
       space: space,
       direction: "row",
+      tokens: stackViewTokens,
       children: items.map((_ref3, index) => {
         let {
           href,

package/lib/index.js

@@ -12,6 +12,7 @@ var _exportNames = {
   PressableCardBase: true,
   Listbox: true,
   Checkbox: true,
+  CheckboxCard: true,
   Divider: true,
   ExpandCollapse: true,
   Accordion: true,
@@ -123,6 +124,12 @@ Object.defineProperty(exports, "Checkbox", {
     return _Checkbox.default;
   }
 });
+Object.defineProperty(exports, "CheckboxCard", {
+  enumerable: true,
+  get: function () {
+    return _CheckboxCard.default;
+  }
+});
 Object.defineProperty(exports, "Divider", {
   enumerable: true,
   get: function () {
@@ -508,6 +515,8 @@ Object.keys(_Checkbox).forEach(function (key) {
   });
 });
 
+var _CheckboxCard = _interopRequireDefault(require("./CheckboxCard"));
+
 var _Divider = _interopRequireDefault(require("./Divider"));
 
 var _ExpandCollapse = _interopRequireWildcard(require("./ExpandCollapse"));