@telus-uds/components-base 2.5.0 → 3.1.0

package/lib/cjs/DownloadApp/DownloadApp.js

@@ -0,0 +1,167 @@
+"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 _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _utils = require("../utils");
+var _ThemeProvider = require("../ThemeProvider");
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+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.linkProps, _utils.viewProps]);
+const selectOuterStyles = _ref => {
+  let {
+    borderColor,
+    borderWidth,
+    borderGap,
+    borderRadius,
+    padding
+  } = _ref;
+  return {
+    outline: 'none',
+    borderColor,
+    borderWidth,
+    borderGap,
+    borderRadius,
+    padding
+  };
+};
+const DownloadApp = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    copy = 'en',
+    dictionary = _dictionary.default,
+    type = 'ios',
+    href,
+    onPress,
+    tokens = {},
+    variant = {},
+    ...props
+  } = _ref2;
+  const getCopy = (0, _utils.useCopy)({
+    dictionary,
+    copy
+  });
+  const {
+    hrefAttrs,
+    rest
+  } = _utils.hrefAttrsProp.bundle(props);
+  const selectedProps = selectProps({
+    accessibilityRole: href ? 'link' : 'button',
+    href,
+    onPress: _utils.linkProps.handleHref({
+      href,
+      onPress
+    }),
+    hrefAttrs,
+    ...rest
+  });
+  const getDownloadAppTokens = (0, _ThemeProvider.useThemeTokensCallback)('DownloadApp', tokens, variant);
+  const resolveDownloadAppTokens = pressableState => {
+    const themeTokens = (0, _utils.resolvePressableTokens)(getDownloadAppTokens, pressableState, {});
+    return selectOuterStyles(themeTokens);
+  };
+  const {
+    androidENIcon,
+    androidFRIcon,
+    iosENIcon,
+    iosFRIcon
+  } = getDownloadAppTokens();
+  const imageResources = {
+    en: {
+      android: androidENIcon,
+      ios: iosENIcon
+    },
+    fr: {
+      android: androidFRIcon,
+      ios: iosFRIcon
+    }
+  };
+  const IconComponent = imageResources[copy][type];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
+    style: pressState => [resolveDownloadAppTokens(pressState), staticStyles.row],
+    ...selectedProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+      style: staticImageSizes[type][copy],
+      alt: type === 'ios' ? getCopy('altTextIos') : getCopy('altTextAndroid')
+    })
+  });
+});
+DownloadApp.displayName = 'DownloadApp';
+const dictionaryContentShape = _propTypes.default.shape({
+  altTextAndroid: _propTypes.default.string.isRequired,
+  altTextIos: _propTypes.default.string.isRequired
+});
+DownloadApp.propTypes = {
+  ...selectedSystemPropTypes,
+  copy: _utils.copyPropTypes,
+  /**
+   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
+   */
+  dictionary: _propTypes.default.shape({
+    en: dictionaryContentShape,
+    fr: dictionaryContentShape
+  }),
+  /**
+   * Select the type of image to show.
+   */
+  type: _propTypes.default.oneOf(['android', 'ios']),
+  /**
+   * It's a simple link that opens the Download Button instead of the onPress function.
+   */
+  href: _propTypes.default.string,
+  /**
+   * Function called when the button is pressed. Required unless the button has a href.
+   */
+  onPress: _propTypes.default.func,
+  /**
+   * DownloadApp tokens.
+   */
+  tokens: (0, _utils.getTokensPropType)('DownloadApp'),
+  /**
+   * DownloadApp variant.
+   */
+  variant: _utils.variantProp.propType
+};
+const staticStyles = _StyleSheet.default.create({
+  row: {
+    ..._Platform.default.select({
+      web: {
+        display: 'inline-flex',
+        width: 'fit-content'
+      },
+      default: {
+        alignSelf: 'flex-start'
+      }
+    })
+  }
+});
+const staticImageSizes = {
+  android: {
+    en: {
+      width: 162,
+      height: 48
+    },
+    fr: {
+      width: 162,
+      height: 48
+    }
+  },
+  ios: {
+    en: {
+      width: 144,
+      height: 48
+    },
+    fr: {
+      width: 152,
+      height: 48
+    }
+  }
+};
+var _default = exports.default = DownloadApp;

package/lib/cjs/DownloadApp/dictionary.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  en: {
+    altTextAndroid: 'Get it on Google Play',
+    altTextIos: 'Download on the App Store'
+  },
+  fr: {
+    altTextAndroid: 'Disponible sur Google Play',
+    altTextIos: 'Télécharger dans l’App Store'
+  }
+};

package/lib/cjs/DownloadApp/index.js

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

package/lib/cjs/ExpandCollapse/Accordion.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ExpandCollapse = _interopRequireDefault(require("./ExpandCollapse"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * 'Accordion' is a shorthand for an ExpandCollapse where only one item may be open at a time
+ */const Accordion = /*#__PURE__*/_react.default.forwardRef((props, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
+  ref: ref,
+  ...props,
+  maxOpen: 1
+}));
+Accordion.displayName = 'Accordion';
+Accordion.propTypes = _ExpandCollapse.default.propTypes;
+var _default = exports.default = Accordion;

package/lib/cjs/ExpandCollapse/Control.js

@@ -0,0 +1,170 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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]);
+function selectContainerStyles(_ref) {
+  let {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderStyle = 'solid',
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    justifyContent,
+    verticalAlign,
+    iconPosition,
+    borderTopRightRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderBottomLeftRadius
+  } = _ref;
+  return {
+    boxSizing: 'border-box',
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    borderStyle,
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom,
+    justifyContent,
+    borderTopRightRadius,
+    borderBottomRightRadius,
+    borderTopLeftRadius,
+    borderBottomLeftRadius,
+    ...(0, _ThemeProvider.verticalAlignRow)(verticalAlign, iconPosition === 'right')
+  };
+}
+
+// TODO: use stack / spacer when available
+function selectIconContainerStyles(_ref2) {
+  let {
+    iconGap,
+    iconPaddingTop,
+    iconPosition
+  } = _ref2;
+  const paddingSide = iconPosition === 'right' ? 'paddingLeft' : 'paddingRight';
+  return {
+    [paddingSide]: iconGap,
+    paddingTop: iconPaddingTop
+  };
+}
+function selectTextContainerStyles(_ref3) {
+  let {
+    textLine
+  } = _ref3;
+  return {
+    textDecorationLine: textLine,
+    flex: 1
+  };
+}
+function selectIconTokens(tokens) {
+  return {
+    color: tokens.iconColor,
+    size: tokens.iconSize
+  };
+}
+const ExpandCollapseControl = /*#__PURE__*/_react.default.forwardRef((_ref4, ref) => {
+  let {
+    onPress,
+    isExpanded,
+    children,
+    tokens,
+    accessibilityRole = 'button',
+    variant,
+    ...rest
+  } = _ref4;
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ExpandCollapseControl', tokens, variant);
+  const selectedProps = selectProps({
+    accessibilityRole,
+    ...rest,
+    accessibilityState: {
+      ...(rest.accessibilityState || {}),
+      expanded: isExpanded
+    }
+  });
+  const getControlState = _ref5 => {
+    let {
+      pressed,
+      hovered,
+      focused
+    } = _ref5;
+    return {
+      pressed,
+      hover: hovered,
+      focus: focused,
+      expanded: isExpanded
+    };
+  };
+  const getControlTokens = pressableState => getTokens(getControlState(pressableState));
+  const getPressableStyle = pressableState => ({
+    ...selectContainerStyles(getControlTokens(pressableState)),
+    ...(_Platform.default.OS === 'web' ? {
+      outline: 'none'
+    } : {})
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
+    ...selectedProps,
+    onPress: onPress,
+    style: getPressableStyle,
+    children: pressableState => {
+      const {
+        icon: IconComponent,
+        ...themeTokens
+      } = getControlTokens(pressableState);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [selectIconContainerStyles(themeTokens), staticStyles.bubblePointerEvents],
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+            ...selectIconTokens(themeTokens)
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [selectTextContainerStyles(themeTokens), staticStyles.bubblePointerEvents],
+          children: typeof children === 'function' ? children(getControlState(pressableState)) : children
+        })]
+      });
+    }
+  });
+});
+ExpandCollapseControl.displayName = 'ExpandCollapseControl';
+const staticStyles = _StyleSheet.default.create({
+  bubblePointerEvents: {
+    pointerEvents: 'none'
+  }
+});
+ExpandCollapseControl.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('ExpandCollapseControl'),
+  variant: _utils.variantProp.propType,
+  /**
+   * ExpandCollapseControl's children are the content within the button that opens or closes this panel. May
+   * accept a render function that recieves the control state: { pressed, hover, focus, expanded }
+   */
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  /**
+   * Whether the linked ExpandCollapsePanel is opened or closed. Allows themes to set `expanded` styles.
+   */
+  isExpanded: _propTypes.default.bool,
+  /**
+   * Function called when the ExpandCollapse is pressed.
+   */
+  onPress: _propTypes.default.func.isRequired
+};
+var _default = exports.default = ExpandCollapseControl;

package/lib/cjs/ExpandCollapse/ExpandCollapse.js

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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]);
+function selectBorderStyles(tokens) {
+  return {
+    borderBottomWidth: tokens.borderWidth,
+    borderBottomStyle: tokens.borderStyle,
+    borderBottomColor: tokens.borderColor
+  };
+}
+
+/**
+ * Flexible base component for lists where some or all items are collapsible headers.
+ *
+ * Pass a render function as `children` which takes and passes `openIds` and `onToggle` props to
+ * <ExpandCollapse.Panel> children, and assign the panels explicit `panelId` props. The panels may be
+ * nested (they do not need to be direct children), and non-interactive items may be included too.
+ */
+const ExpandCollapse = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    tokens,
+    variant,
+    maxOpen,
+    open,
+    initialOpen,
+    onChange,
+    ...rest
+  } = _ref;
+  const {
+    currentValues: openIds,
+    toggleOneValue: onToggle,
+    resetValues,
+    setValues,
+    unsetValues
+  } = (0, _utils.useMultipleInputValues)({
+    maxValues: maxOpen,
+    values: open,
+    initialValues: initialOpen,
+    onChange
+  });
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('ExpandCollapse', tokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: staticStyles.container,
+    ref: ref,
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: selectBorderStyles(themeTokens),
+      children: typeof children === 'function' ? children({
+        openIds,
+        onToggle,
+        resetValues,
+        setValues,
+        unsetValues
+      }) : children
+    })
+  });
+});
+ExpandCollapse.displayName = 'ExpandCollapse';
+ExpandCollapse.propTypes = {
+  ...selectedSystemPropTypes,
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('ExpandCollapse'),
+  /**
+   * ExpandCollapse usually takes a render function to which it passes an object with properties
+   * { openIds, onToggle, resetValues, setValues, unsetValues }. openIds (array of ids) and
+   * onToggle (function) will usually be passed to `<ExpandCollapse.Panel>`
+   */
+  children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]).isRequired,
+  /**
+   * If set, enforces a specific maximum number of open items, closing already-open items when new
+   * items are opened. By default, any number of items may be open at once.
+   */
+  maxOpen: _propTypes.default.number,
+  /**
+   * If passed, the item or items that are expanded will be controlled by a parent component
+   */
+  open: _propTypes.default.arrayOf(_propTypes.default.string),
+  /**
+   * Function called when which panels are currently open changes. Necessary if `open` is passed.
+   */
+  onChange: _propTypes.default.func,
+  /**
+   * Allows items with specified ids to be open by default on first load. Should not be used with `open`.
+   */
+  initialOpen: _propTypes.default.arrayOf(_propTypes.default.string)
+};
+var _default = exports.default = ExpandCollapse;
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    display: 'flex'
+  }
+});