@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/cjs/Box/Box.js

@@ -0,0 +1,385 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _ScrollView = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ScrollView"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _ImageBackground = _interopRequireDefault(require("react-native-web/dist/cjs/exports/ImageBackground"));
+var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _backgroundImageStylesMap = _interopRequireDefault(require("./backgroundImageStylesMap"));
+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]);
+
+/**
+ * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
+ * @typedef {import('../utils/props/spacingProps.js').SpacingIndex} SpacingIndex
+ * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
+ * @typedef {import('../utils/props/spacingProps.js').SpacingOptions} SpacingOptions
+ */
+
+const selectBoxStyles = (_ref, customGradient) => {
+  let {
+    backgroundColor,
+    gradient,
+    borderWidth,
+    borderColor,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius,
+    ...rest
+  } = _ref;
+  const styles = {
+    backgroundColor,
+    borderWidth,
+    borderColor,
+    borderTopLeftRadius,
+    borderTopRightRadius,
+    borderBottomLeftRadius,
+    borderBottomRightRadius
+  };
+  if (gradient) {
+    const {
+      angle,
+      stops: [stopOne, stopTwo]
+    } = gradient;
+    if (_Platform.default.OS === 'web') {
+      styles.backgroundImage = `linear-gradient(${angle}deg, ${stopOne.color}, 75%, ${stopTwo.color})`;
+    } else if (customGradient && _Platform.default.OS !== 'web') {
+      styles.colors = [stopOne.color, stopTwo.color];
+    }
+  }
+  const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom'];
+  // Only set on styles if token provided because we spread this object after the spacing scale values
+  paddings.forEach(side => {
+    if (rest[side]) {
+      styles[side] = rest[side];
+    }
+  });
+  return styles;
+};
+const setBackgroundImage = _ref2 => {
+  let {
+    src,
+    alt,
+    backgroundImageResizeMode,
+    backgroundImagePosition,
+    backgroundImageAlign,
+    backgroundImageWidth,
+    backgroundImageHeight,
+    content
+  } = _ref2;
+  if (backgroundImageResizeMode === 'contain') {
+    const containedViewStyle = {
+      ...staticStyles.containedView,
+      width: backgroundImageWidth,
+      height: backgroundImageHeight,
+      ..._backgroundImageStylesMap.default[`${backgroundImagePosition}-${backgroundImageAlign}`]
+    };
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: staticStyles.containedContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: containedViewStyle,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+          source: {
+            uri: src
+          },
+          alt: alt,
+          style: staticStyles.containedImage,
+          accessibilityIgnoresInvertColors: true
+        })
+      }), content]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ImageBackground.default, {
+    source: {
+      uri: src
+    },
+    alt: alt,
+    style: staticStyles.backgroundImageContainer,
+    resizeMode: backgroundImageResizeMode,
+    children: content
+  });
+};
+
+/**
+ * A layout utility component. Use Box to create space (padding) around content.
+ *
+ * ## Spacing
+ *
+ * For most simple uses, pass a number to Box's `space` prop referring to an index in the theme's
+ * spacing scale. For example, for a box with the theme's smallest non-zero amount of padding on all sides:
+ *
+ * ```jsx
+ * <Box space={1}>
+ * ```
+ *
+ * #### Targetting specific sides
+ *
+ * Box allows spacing value props to be assigned to any side or all sides using the following props:
+ *
+ * - `space` sets the default for all sides, which is overridden by other props below
+ * - `horizontal` sets defaults for `left` and `right` (overriding `space` there if it is set)
+ * - `vertical` sets defaults for `top` and `bottom` (overriding `space` there if it is set)
+ * - `left` sets the left side padding, inside the box's bounds
+ * - `right` sets the right side padding, inside the box's bounds
+ * - `top` sets the top side padding, inside the box's bounds
+ * - `bottom` sets the bottom side padding, inside the box's bounds
+ *
+ * Box only controls spacing within its bounds. If space is needed around a box outside of its bounds,
+ * use `Spacer`, `StackView` or wrap the `Box` inside another `Box`.
+ *
+ * #### Viewport-specific spacing
+ *
+ * Responsive behaviours may be set by passing any of the above props an object keyed by viewports.
+ *
+ * For example, if a theme's spacing scale is [0, 4, 8...], this below will have padding of 4px on top,
+ * bottom, and right, and its left padding will be 0px on xs, sm and md viewports and 8px on lg and xl viewports:
+ *
+ * ```jsx
+ * <Box space={1} left={{ xs: 0, lg: 2 }} />`
+ * ```
+ *
+ * #### Subtracting from spacing
+ *
+ * A parent may sometimes need to reduce the spacing size on one or more sides of a `Box` by some variable.
+ * For example, the parent may have a border on one side and want to reduce the spacing of a child box
+ * by the width of that border on that side. This can be achieved using the `subtract` option of the
+ * spacing object, for example:
+ *
+ * ```jsx
+ * <Box space={2} left={{ space: 2, options: { subtract: themeTokens.borderWidthLeft } }} />`
+ * ```
+ *
+ * See `useSpacingScale` hook for other spacing value options and documentation.
+ *
+ * ## Theming
+ *
+ * Box is intended for layout, so minimal theming is supported. Use components like `Card` for
+ * more sophisticated theming.
+ *
+ * ## Scroll
+ *
+ * If passed, the box will be scrollable. If an object is passed, it will be passed to React Native's
+ * `ScrollView` component as props.
+ *
+ * When building native iOS and Android apps, it is important to remember to ensure any screen containing
+ * text content is inside a scrollable box, as screens are not scrollable by default and even very
+ * short text will require scrolling on small devices at the highest accessibility text scaling settings.
+ */
+const Box = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+  let {
+    space,
+    horizontal = space,
+    vertical = space,
+    top = vertical,
+    bottom = vertical,
+    left = horizontal,
+    right = horizontal,
+    flex,
+    children,
+    variant,
+    tokens,
+    scroll,
+    tag,
+    accessibilityRole,
+    testID,
+    dataSet,
+    customGradient,
+    backgroundImage,
+    ...rest
+  } = _ref3;
+  const props = {
+    accessibilityRole,
+    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...selectProps(rest)
+  };
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Box', tokens, variant);
+  const styles = {
+    flex,
+    paddingLeft: (0, _utils.useSpacingScale)(left),
+    paddingRight: (0, _utils.useSpacingScale)(right),
+    paddingTop: (0, _utils.useSpacingScale)(top),
+    paddingBottom: (0, _utils.useSpacingScale)(bottom),
+    ...selectBoxStyles(themeTokens, customGradient)
+  };
+  let content = children;
+  if (typeof customGradient === 'function') content = customGradient(styles.colors, styles)(children);
+  const {
+    src = '',
+    alt = '',
+    resizeMode = '',
+    position = '',
+    align = ''
+  } = backgroundImage || {};
+  const backgroundImageResizeMode = (0, _utils.useResponsiveProp)(resizeMode, 'cover');
+  const backgroundImagePosition = (0, _utils.useResponsiveProp)(position, 'none');
+  const backgroundImageAlign = (0, _utils.useResponsiveProp)(align, 'stretch');
+  const [backgroundImageWidth, setBackgroundImageWidth] = _react.default.useState(0);
+  const [backgroundImageHeight, setBackgroundImageHeight] = _react.default.useState(0);
+  if (backgroundImage) content = setBackgroundImage({
+    src,
+    alt,
+    backgroundImageResizeMode,
+    backgroundImagePosition,
+    backgroundImageAlign,
+    backgroundImageWidth,
+    backgroundImageHeight,
+    content
+  });
+  _react.default.useEffect(() => {
+    if (backgroundImage && backgroundImageWidth === 0 && backgroundImageHeight === 0) {
+      _Image.default.getSize(src, (width, height) => {
+        // Only update the state if the size has changed
+        if (width !== backgroundImageWidth || height !== backgroundImageHeight) {
+          setBackgroundImageWidth(width);
+          setBackgroundImageHeight(height);
+        }
+      });
+    }
+  }, [backgroundImage, backgroundImageWidth, backgroundImageHeight, src]);
+  if (scroll) {
+    const scrollProps = typeof scroll === 'object' ? scroll : {};
+    scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle];
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, {
+      ...scrollProps,
+      ...props,
+      testID: testID,
+      dataSet: dataSet,
+      ref: ref,
+      children: content
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ...props,
+    style: styles,
+    testID: testID,
+    dataSet: dataSet,
+    ref: ref,
+    children: content
+  });
+});
+Box.displayName = 'Box';
+Box.propTypes = {
+  ...selectedSystemPropTypes,
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('Box'),
+  /**
+   * Sets default padding on all sides of the box using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
+  space: _utils.spacingProps.types.spacingValue,
+  /**
+   * Sets top and bottom padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
+  vertical: _utils.spacingProps.types.spacingValue,
+  /**
+   * Sets left and right padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
+  horizontal: _utils.spacingProps.types.spacingValue,
+  /**
+   * Sets bottom padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
+  bottom: _utils.spacingProps.types.spacingValue,
+  /**
+   * Sets left padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
+  left: _utils.spacingProps.types.spacingValue,
+  /**
+   * Sets right padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
+  right: _utils.spacingProps.types.spacingValue,
+  /**
+   * Sets top padding using the theme's spacing scale.
+   *
+   * @see {@link SpacingValue}
+   */
+  top: _utils.spacingProps.types.spacingValue,
+  /**
+   * Sets the `flex` style, which controls `flexGrow`, `flexShrink` and `flexBasis` styles.
+   *
+   * Set as 1 for the box to stretch and grow to fit in the available space, or another number to share
+   * space disproportionately with siblings. See https://reactnative.dev/docs/flexbox#flex for details.
+   *
+   * With the default `0`, the box takes its minimum width from its content.
+   */
+  flex: _propTypes.default.number,
+  /**
+   * Renders a scrollable ScrollView instead of an unscrollable View.
+   *
+   * May take an object of ScrollView props which are passed to the rendered ScrollView.
+   */
+  scroll: _propTypes.default.oneOfType([_propTypes.default.bool, _ScrollView.default.propTypes ? _propTypes.default.shape(_ScrollView.default.propTypes) : _propTypes.default.object]),
+  /**
+   * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
+   *
+   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
+   * is not defined, the accessibilityRole will default to "heading".
+   */
+  tag: _propTypes.default.oneOf(_utils.layoutTags),
+  /**
+   * Use in tests if the box itself needs to be targetted and no other way of selecting the
+   * box is available (e.g. it cannot be targetted using an appropriate `accessibilityRole`).
+   */
+  testID: _propTypes.default.string,
+  /**
+   * @ignore
+   */
+  dataSet: _propTypes.default.object,
+  /**
+   * Box accepts any content as children.
+   */
+  children: _propTypes.default.node.isRequired,
+  /**
+  Use this prop if need to add a custom gradient for mobile
+  */
+  customGradient: _propTypes.default.func,
+  /**
+   * Use this prop to add a background image to the box.
+   */
+  backgroundImage: _propTypes.default.shape({
+    src: _propTypes.default.string.isRequired,
+    alt: _propTypes.default.string,
+    resizeMode: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
+    position: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['none', 'bottom', 'left', 'right', 'top'])),
+    align: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.oneOf(['start', 'end', 'center', 'stretch']))
+  })
+};
+var _default = exports.default = Box;
+const staticStyles = _StyleSheet.default.create({
+  backgroundImageContainer: {
+    flex: 1
+  },
+  containedContainer: {
+    flex: 1,
+    overflow: 'hidden'
+  },
+  containedView: {
+    zIndex: -1,
+    position: 'absolute'
+  },
+  containedImage: {
+    width: '100%',
+    height: '100%'
+  }
+});

package/lib/cjs/Box/backgroundImageStylesMap.js

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = exports.default = {
+  'top-start': {
+    top: 0
+  },
+  'top-center': {
+    left: 0,
+    right: 0,
+    marginHorizontal: 'auto'
+  },
+  'top-end': {
+    top: 0,
+    right: 0
+  },
+  'right-start': {
+    top: 0,
+    right: 0
+  },
+  'left-start': {
+    top: 0
+  },
+  'left-center': {
+    top: 0,
+    bottom: 0,
+    marginVertical: 'auto'
+  },
+  'none-start': {
+    top: 0,
+    bottom: 0,
+    marginVertical: 'auto'
+  },
+  'none-center': {
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+    margin: 'auto'
+  },
+  'right-center': {
+    top: 0,
+    bottom: 0,
+    right: 0,
+    marginVertical: 'auto'
+  },
+  'none-end': {
+    top: 0,
+    bottom: 0,
+    right: 0,
+    marginVertical: 'auto'
+  },
+  'bottom-start': {
+    bottom: 0,
+    left: 0
+  },
+  'left-end': {
+    bottom: 0,
+    left: 0
+  },
+  'bottom-center': {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    marginHorizontal: 'auto'
+  },
+  'bottom-end': {
+    right: 0,
+    bottom: 0
+  },
+  'right-end': {
+    right: 0,
+    bottom: 0
+  },
+  'top-stretch': {
+    left: 0,
+    right: 0,
+    width: '100%'
+  },
+  'left-stretch': {
+    top: 0,
+    bottom: 0,
+    height: '100%'
+  },
+  'right-stretch': {
+    top: 0,
+    bottom: 0,
+    right: 0,
+    height: '100%'
+  },
+  'bottom-stretch': {
+    left: 0,
+    right: 0,
+    bottom: 0,
+    width: '100%'
+  }
+};

package/lib/cjs/Box/index.js

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

package/lib/cjs/Button/Button.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ButtonBase = _interopRequireDefault(require("./ButtonBase"));
+var _propTypes = _interopRequireWildcard(require("./propTypes"));
+var _ThemeProvider = require("../ThemeProvider");
+var _props = require("../utils/props");
+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 }; }
+const Button = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    accessibilityRole = 'button',
+    tokens,
+    variant,
+    ...props
+  } = _ref;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const buttonVariant = {
+    viewport,
+    ...variant
+  };
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Button', tokens, buttonVariant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+    ...props,
+    tokens: getTokens,
+    accessibilityRole: accessibilityRole,
+    ref: ref
+  });
+});
+Button.displayName = 'Button';
+Button.propTypes = {
+  ..._props.a11yProps.types,
+  ..._propTypes.default,
+  children: _propTypes.textAndA11yText
+};
+var _default = exports.default = Button;