@telus-uds/components-base 0.0.2-prerelease.7 → 1.0.1

package/lib/ActivityIndicator/index.js

@@ -1,13 +1,28 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, variantProp } from '../utils/propTypes';
-import Spinner from './Spinner';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _propTypes2 = require("../utils/propTypes");
+
+var _Spinner = _interopRequireDefault(require("./Spinner"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * `ActivityIndicator` renders a visual loading state.
  * It does not handle positioning or layout of that visual loader.
  */
-
 const ActivityIndicator = ({
   variant,
   tokens,
@@ -17,8 +32,8 @@ const ActivityIndicator = ({
     size,
     color,
     thickness
-  } = useThemeTokens('ActivityIndicator', tokens, variant);
-  return /*#__PURE__*/React.createElement(Spinner, {
+  } = (0, _ThemeProvider.useThemeTokens)('ActivityIndicator', tokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spinner.default, {
     size: size,
     color: color,
     thickness: thickness,
@@ -27,12 +42,13 @@ const ActivityIndicator = ({
 };
 
 ActivityIndicator.propTypes = {
-  variant: variantProp.propType,
-  tokens: getTokensPropType('ActivityIndicator'),
+  variant: _propTypes2.variantProp.propType,
+  tokens: (0, _propTypes2.getTokensPropType)('ActivityIndicator'),
 
   /**
    * A visually hidden accessible label describing the action taking place
    */
-  label: PropTypes.string.isRequired
+  label: _propTypes.default.string.isRequired
 };
-export default ActivityIndicator;
+var _default = ActivityIndicator;
+exports.default = _default;

package/lib/ActivityIndicator/shared.js

@@ -1,12 +1,27 @@
-import PropTypes from 'prop-types'; // these could be specified by the theme
-
-export const DURATION = 1800;
-export const MIN_EMPTY_ANGLE = 60;
-export const MIN_STROKE_ANGLE = 30;
-export const BEZIER = [0.42, 0.0, 0.58, 1.0];
-export const propTypes = {
-  color: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  size: PropTypes.number.isRequired,
-  thickness: PropTypes.number.isRequired
-};
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.BEZIER = exports.MIN_STROKE_ANGLE = exports.MIN_EMPTY_ANGLE = exports.DURATION = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// these could be specified by the theme
+const DURATION = 1800;
+exports.DURATION = DURATION;
+const MIN_EMPTY_ANGLE = 60;
+exports.MIN_EMPTY_ANGLE = MIN_EMPTY_ANGLE;
+const MIN_STROKE_ANGLE = 30;
+exports.MIN_STROKE_ANGLE = MIN_STROKE_ANGLE;
+const BEZIER = [0.42, 0.0, 0.58, 1.0];
+exports.BEZIER = BEZIER;
+const propTypes = {
+  color: _propTypes.default.string.isRequired,
+  label: _propTypes.default.string.isRequired,
+  size: _propTypes.default.number.isRequired,
+  thickness: _propTypes.default.number.isRequired
+};
+exports.propTypes = propTypes;

package/lib/BaseProvider/index.js

@@ -1,18 +1,41 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import A11yInfoProvider from '../A11yInfoProvider';
-import ViewportProvider from '../ViewportProvider';
-import ThemeProvider from '../ThemeProvider';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _A11yInfoProvider = _interopRequireDefault(require("../A11yInfoProvider"));
+
+var _ViewportProvider = _interopRequireDefault(require("../ViewportProvider"));
+
+var _ThemeProvider = _interopRequireDefault(require("../ThemeProvider"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _ThemeProvider$propTy;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const BaseProvider = ({
   defaultTheme,
   children
-}) => /*#__PURE__*/React.createElement(A11yInfoProvider, null, /*#__PURE__*/React.createElement(ViewportProvider, null, /*#__PURE__*/React.createElement(ThemeProvider, {
-  defaultTheme: defaultTheme
-}, children)));
+}) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_A11yInfoProvider.default, {
+  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ViewportProvider.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ThemeProvider.default, {
+      defaultTheme: defaultTheme,
+      children: children
+    })
+  })
+});
 
 BaseProvider.propTypes = {
-  defaultTheme: ThemeProvider.propTypes?.defaultTheme,
-  children: PropTypes.node.isRequired
+  defaultTheme: (_ThemeProvider$propTy = _ThemeProvider.default.propTypes) === null || _ThemeProvider$propTy === void 0 ? void 0 : _ThemeProvider$propTy.defaultTheme,
+  children: _propTypes.default.node.isRequired
 };
-export default BaseProvider;
+var _default = BaseProvider;
+exports.default = _default;

package/lib/Box/Box.js

@@ -1,15 +1,36 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View, ScrollView } from 'react-native';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, spacingProps, variantProp, getTokensPropType, useSpacingScale } from '../utils';
+"use strict";
+
+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; }
+
 /**
  * @typedef {import('../utils/propTypes.js').SpacingValue} SpacingValue
  * @typedef {import('../utils/propTypes.js').SpacingIndex} SpacingIndex
  * @typedef {import('../utils/propTypes.js').SpacingObject} SpacingObject
  * @typedef {import('../utils/propTypes.js').SpacingOptions} SpacingOptions
  */
-
 const selectBoxStyles = tokens => {
   const styles = {
     backgroundColor: tokens.backgroundColor
@@ -90,7 +111,7 @@ const selectBoxStyles = tokens => {
  */
 
 
-const Box = ({
+const Box = /*#__PURE__*/(0, _react.forwardRef)(({
   space,
   horizontal = space,
   vertical = space,
@@ -98,49 +119,146 @@ const Box = ({
   bottom = vertical,
   left = horizontal,
   right = horizontal,
+  flex,
   children,
   variant,
   tokens,
   scroll,
+  tag,
+  accessibilityRole,
   testID,
+  dataSet,
   ...rest
-}) => {
-  const a11y = a11yProps.select(rest);
-  const themeTokens = useThemeTokens('Box', tokens, variant);
+}, ref) => {
+  const props = { ...(0, _utils.getA11yPropsFromHtmlTag)(tag, accessibilityRole),
+    ..._utils.a11yProps.select(rest),
+    ..._utils.viewProps.select(rest)
+  };
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Box', tokens, variant);
   const styles = {
-    paddingLeft: useSpacingScale(left),
-    paddingRight: useSpacingScale(right),
-    paddingTop: useSpacingScale(top),
-    paddingBottom: useSpacingScale(bottom),
+    flex,
+    paddingLeft: (0, _utils.useSpacingScale)(left),
+    paddingRight: (0, _utils.useSpacingScale)(right),
+    paddingTop: (0, _utils.useSpacingScale)(top),
+    paddingBottom: (0, _utils.useSpacingScale)(bottom),
     ...selectBoxStyles(themeTokens)
   };
 
   if (scroll) {
     const scrollProps = typeof scroll === 'object' ? scroll : {};
     scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle];
-    return /*#__PURE__*/React.createElement(ScrollView, Object.assign({}, scrollProps, a11y, {
-      testID: testID
-    }), children);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, { ...scrollProps,
+      ...props,
+      testID: testID,
+      dataSet: dataSet,
+      ref: ref,
+      children: children
+    });
   }
 
-  return /*#__PURE__*/React.createElement(View, Object.assign({}, a11y, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...props,
     style: styles,
-    testID: testID
-  }), children);
-};
+    testID: testID,
+    dataSet: dataSet,
+    ref: ref,
+    children: children
+  });
+});
+Box.displayName = 'Box';
+Box.propTypes = { ..._utils.a11yProps.propTypes,
+  ..._utils.viewProps.types,
+  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.propTypes = {
-  space: spacingProps.types.spacingValue,
-  vertical: spacingProps.types.spacingValue,
-  horizontal: spacingProps.types.spacingValue,
-  bottom: spacingProps.types.spacingValue,
-  left: spacingProps.types.spacingValue,
-  right: spacingProps.types.spacingValue,
-  top: spacingProps.types.spacingValue,
-  scroll: PropTypes.oneOfType([PropTypes.bool, ScrollView.propTypes ? PropTypes.shape(ScrollView.propTypes) : PropTypes.object]),
-  variant: variantProp.propType,
-  tokens: getTokensPropType('Box'),
-  testID: PropTypes.string,
-  children: PropTypes.node.isRequired
+  /**
+   * Box accepts any content as children.
+   */
+  children: _propTypes.default.node.isRequired
 };
-export default Box;
+var _default = Box;
+exports.default = _default;

package/lib/Box/index.js

@@ -1,2 +1,13 @@
-import Box from './Box';
-export default Box;
+"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;

package/lib/Button/Button.js

@@ -1,23 +1,45 @@
-import React from 'react';
-import ButtonBase from './ButtonBase';
-import buttonPropTypes from './propTypes';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps } from '../utils/propTypes';
+"use strict";
 
-const Button = ({
+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 _propTypes2 = require("../utils/propTypes");
+
+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)(({
   accessibilityRole = 'button',
   tokens,
   variant,
   ...props
-}) => {
-  const getTokens = useThemeTokensCallback('Button', tokens, variant);
-  return /*#__PURE__*/React.createElement(ButtonBase, Object.assign({}, props, {
+}, ref) => {
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Button', tokens, variant);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, { ...props,
     tokens: getTokens,
-    accessibilityRole: accessibilityRole
-  }));
-};
-
-Button.propTypes = { ...a11yProps.types,
-  ...buttonPropTypes
+    accessibilityRole: accessibilityRole,
+    ref: ref
+  });
+});
+Button.displayName = 'Button';
+Button.propTypes = { ..._propTypes2.a11yProps.types,
+  ..._propTypes.default,
+  children: _propTypes.textAndA11yText
 };
-export default Button;
+var _default = Button;
+exports.default = _default;