@telus-uds/components-base 2.0.0 → 2.0.1

package/lib/Box/Box.js

@@ -1,31 +1,17 @@
-"use strict";
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import ScrollView from "react-native-web/dist/exports/ScrollView";
+import Platform from "react-native-web/dist/exports/Platform";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import ImageBackground from "react-native-web/dist/exports/ImageBackground";
+import Image from "react-native-web/dist/exports/Image";
+import { useThemeTokens } from '../ThemeProvider';
+import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, responsiveProps, selectSystemProps, spacingProps, useResponsiveProp, useSpacingScale, variantProp, viewProps } from '../utils';
+import backgroundImageStylesMap from './backgroundImageStylesMap';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(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 _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]);
 /**
  * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
  * @typedef {import('../utils/props/spacingProps.js').SpacingIndex} SpacingIndex
@@ -33,32 +19,91 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
  * @typedef {import('../utils/props/spacingProps.js').SpacingOptions} SpacingOptions
  */
 
-const selectBoxStyles = tokens => {
-  let styles = {
-    backgroundColor: tokens.backgroundColor
+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 (tokens.gradient) {
+  if (gradient) {
     const {
-      gradient: {
-        angle,
-        stops: [stopOne, stopTwo]
-      }
-    } = tokens;
-    styles = { ...styles,
-      backgroundImage: "linear-gradient(".concat(angle, "deg, ").concat(stopOne.color, ", 75% , ").concat(stopTwo.color, ")")
-    };
+      angle,
+      stops: [stopOne, stopTwo]
+    } = gradient;
+    if (Platform.OS === 'web') {
+      styles.backgroundImage = `linear-gradient(${angle}deg, ${stopOne.color}, 75%, ${stopTwo.color})`;
+    } else if (customGradient && Platform.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
-
+  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 (tokens[side]) {
-      styles[side] = tokens[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[`${backgroundImagePosition}-${backgroundImageAlign}`]
+    };
+    return /*#__PURE__*/_jsxs(View, {
+      style: staticStyles.containedContainer,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: containedViewStyle,
+        children: /*#__PURE__*/_jsx(Image, {
+          source: {
+            uri: src
+          },
+          alt: alt,
+          style: staticStyles.containedImage,
+          accessibilityIgnoresInvertColors: true
+        })
+      }), content]
+    });
+  }
+  return /*#__PURE__*/_jsx(ImageBackground, {
+    source: {
+      uri: src
+    },
+    alt: alt,
+    style: staticStyles.backgroundImageContainer,
+    resizeMode: backgroundImageResizeMode,
+    children: content
+  });
+};
+
 /**
  * A layout utility component. Use Box to create space (padding) around content.
  *
@@ -124,9 +169,7 @@ const selectBoxStyles = tokens => {
  * 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__*/(0, _react.forwardRef)((_ref, ref) => {
+const Box = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     space,
     horizontal = space,
@@ -144,97 +187,127 @@ const Box = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     accessibilityRole,
     testID,
     dataSet,
+    customGradient,
+    backgroundImage,
     ...rest
-  } = _ref;
+  } = _ref3;
   const props = {
     accessibilityRole,
-    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
     ...selectProps(rest)
   };
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Box', tokens, variant);
+  const themeTokens = 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)
+    paddingLeft: useSpacingScale(left),
+    paddingRight: useSpacingScale(right),
+    paddingTop: useSpacingScale(top),
+    paddingBottom: 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 = useResponsiveProp(resizeMode, 'cover');
+  const backgroundImagePosition = useResponsiveProp(position, 'none');
+  const backgroundImageAlign = useResponsiveProp(align, 'stretch');
+  const [backgroundImageWidth, setBackgroundImageWidth] = React.useState(0);
+  const [backgroundImageHeight, setBackgroundImageHeight] = React.useState(0);
+  if (backgroundImage) content = setBackgroundImage({
+    src,
+    alt,
+    backgroundImageResizeMode,
+    backgroundImagePosition,
+    backgroundImageAlign,
+    backgroundImageWidth,
+    backgroundImageHeight,
+    content
+  });
+  React.useEffect(() => {
+    if (backgroundImage && backgroundImageWidth === 0 && backgroundImageHeight === 0) {
+      Image.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,
+    return /*#__PURE__*/_jsx(ScrollView, {
+      ...scrollProps,
       ...props,
       testID: testID,
       dataSet: dataSet,
       ref: ref,
-      children: children
+      children: content
     });
   }
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...props,
+  return /*#__PURE__*/_jsx(View, {
+    ...props,
     style: styles,
     testID: testID,
     dataSet: dataSet,
     ref: ref,
-    children: children
+    children: content
   });
 });
 Box.displayName = 'Box';
-Box.propTypes = { ...selectedSystemPropTypes,
-  variant: _utils.variantProp.propType,
-  tokens: (0, _utils.getTokensPropType)('Box'),
-
+Box.propTypes = {
+  ...selectedSystemPropTypes,
+  variant: variantProp.propType,
+  tokens: 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,
-
+  space: spacingProps.types.spacingValue,
   /**
    * Sets top and bottom padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
-  vertical: _utils.spacingProps.types.spacingValue,
-
+  vertical: spacingProps.types.spacingValue,
   /**
    * Sets left and right padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
-  horizontal: _utils.spacingProps.types.spacingValue,
-
+  horizontal: spacingProps.types.spacingValue,
   /**
    * Sets bottom padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
-  bottom: _utils.spacingProps.types.spacingValue,
-
+  bottom: spacingProps.types.spacingValue,
   /**
    * Sets left padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
-  left: _utils.spacingProps.types.spacingValue,
-
+  left: spacingProps.types.spacingValue,
   /**
    * Sets right padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
-  right: _utils.spacingProps.types.spacingValue,
-
+  right: spacingProps.types.spacingValue,
   /**
    * Sets top padding using the theme's spacing scale.
    *
    * @see {@link SpacingValue}
    */
-  top: _utils.spacingProps.types.spacingValue,
-
+  top: spacingProps.types.spacingValue,
   /**
    * Sets the `flex` style, which controls `flexGrow`, `flexShrink` and `flexBasis` styles.
    *
@@ -243,38 +316,63 @@ Box.propTypes = { ...selectedSystemPropTypes,
    *
    * With the default `0`, the box takes its minimum width from its content.
    */
-  flex: _propTypes.default.number,
-
+  flex: PropTypes.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]),
-
+  scroll: PropTypes.oneOfType([PropTypes.bool, ScrollView.propTypes ? PropTypes.shape(ScrollView.propTypes) : PropTypes.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),
-
+  tag: PropTypes.oneOf(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,
-
+  testID: PropTypes.string,
   /**
    * @ignore
    */
-  dataSet: _propTypes.default.object,
-
+  dataSet: PropTypes.object,
   /**
    * Box accepts any content as children.
    */
-  children: _propTypes.default.node.isRequired
+  children: PropTypes.node.isRequired,
+  /**
+  Use this prop if need to add a custom gradient for mobile
+  */
+  customGradient: PropTypes.func,
+  /**
+   * Use this prop to add a background image to the box.
+   */
+  backgroundImage: PropTypes.shape({
+    src: PropTypes.string.isRequired,
+    alt: PropTypes.string,
+    resizeMode: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['cover', 'contain', 'stretch', 'repeat', 'center'])),
+    position: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['none', 'bottom', 'left', 'right', 'top'])),
+    align: responsiveProps.getTypeOptionallyByViewport(PropTypes.oneOf(['start', 'end', 'center', 'stretch']))
+  })
 };
-var _default = Box;
-exports.default = _default;
+export default Box;
+const staticStyles = StyleSheet.create({
+  backgroundImageContainer: {
+    flex: 1
+  },
+  containedContainer: {
+    flex: 1,
+    overflow: 'hidden'
+  },
+  containedView: {
+    zIndex: -1,
+    position: 'absolute'
+  },
+  containedImage: {
+    width: '100%',
+    height: '100%'
+  }
+});

package/lib/Box/backgroundImageStylesMap.js

@@ -0,0 +1,94 @@
+export 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/Box/index.js

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

package/lib/Button/Button.js

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