@telus-uds/components-base 0.0.2-prerelease.1 → 0.0.2-prerelease.10

package/lib/Box/Box.js

@@ -1,111 +1,238 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View, ScrollView } from 'react-native';
-import { useViewport } from '../ViewportProvider';
-import { useTheme, useThemeTokens } from '../ThemeProvider';
-import { levelsPropType, responsivePropTypeFactory, variantProp, getTokensPropType } from '../utils/propTypes';
-const propToStyleMap = {
-  top: 'paddingTop',
-  below: 'marginBottom',
-  bottom: 'paddingBottom',
-  left: 'paddingLeft',
-  right: 'paddingRight',
-  vertical: 'paddingVertical',
-  horizontal: 'paddingHorizontal'
-};
+"use strict";
 
-const transformPropToStyle = key => propToStyleMap[key];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
 
-const getStyleByType = (currentViewPort, styleProp, levels) => {
-  if (typeof styleProp === 'undefined') return null;
-  if (typeof styleProp === 'number') return levels[currentViewPort][styleProp];
-  const spacingValue = styleProp[currentViewPort];
-  return levels[currentViewPort][spacingValue];
-};
+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 _ThemeProvider = require("../ThemeProvider");
 
-const getBaseStyle = (currentViewPort, styleProps, levels) => {
-  const styleObject = {};
-  Object.entries(styleProps).forEach(([key, styleProp]) => {
-    const styleKey = transformPropToStyle(key);
-    styleObject[styleKey] = getStyleByType(currentViewPort, styleProp, levels);
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * @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
+  };
+  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];
+    }
   });
-  return styleObject;
+  return styles;
 };
 /**
- * A layout utility component
+ * 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:
  *
- * > TODO decide on the API we want to offer here
+ * ```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 = ({
+  space,
+  horizontal = space,
+  vertical = space,
+  top = vertical,
+  bottom = vertical,
+  left = horizontal,
+  right = horizontal,
+  flex,
   children,
-  top,
-  below,
-  bottom,
-  left,
-  right,
-  vertical,
-  horizontal,
   variant,
   tokens,
-  scroll = false,
-  scrollProps = null
+  scroll,
+  testID,
+  ...rest
 }) => {
-  const theme = useTheme(); // TODO: integrate level resolution with other tokens as part of
-  // https://github.com/telus/universal-design-system/issues/267
-
-  const {
-    levels
-  } = theme.components.Box; // TODO: update Box logic to use viewport as an appearance context and make levels themable
-  // https://github.com/telus/universal-design-system/issues/87
-
-  const viewport = useViewport();
-  const {
-    backgroundColor
-  } = useThemeTokens('Box', tokens, variant);
-  const bkgStyle = {
-    backgroundColor
+  const props = { ..._utils.a11yProps.select(rest),
+    ..._utils.viewProps.select(rest)
   };
-  const styleProps = {
-    below,
-    bottom,
-    left,
-    right,
-    top,
-    vertical,
-    horizontal
+  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)
   };
-  const baseStyle = getBaseStyle(viewport, styleProps, levels);
-  const styles = [baseStyle, bkgStyle];
 
   if (scroll) {
-    return /*#__PURE__*/React.createElement(ScrollView, _extends({
-      contentContainerStyle: styles
-    }, scrollProps), children);
+    const scrollProps = typeof scroll === 'object' ? scroll : {};
+    scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle];
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollView.default, { ...scrollProps,
+      ...props,
+      testID: testID,
+      children: children
+    });
   }
 
-  return /*#__PURE__*/React.createElement(View, {
-    style: styles
-  }, children);
-}; // TODO apply props as separate
-
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, { ...props,
+    style: styles,
+    testID: testID,
+    children: children
+  });
+};
 
-const responsiveLevelsPropType = responsivePropTypeFactory(levelsPropType);
 Box.propTypes = {
-  below: responsiveLevelsPropType,
-  bottom: responsiveLevelsPropType,
-  left: responsiveLevelsPropType,
-  right: responsiveLevelsPropType,
-  top: responsiveLevelsPropType,
-  vertical: responsiveLevelsPropType,
-  horizontal: responsiveLevelsPropType,
-  scroll: PropTypes.bool,
-  scrollProps: PropTypes.object,
-  variant: variantProp.propType,
-  tokens: getTokensPropType('Box'),
-  children: PropTypes.node.isRequired
+  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]),
+
+  /**
+   * 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,
+
+  /**
+   * 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,18 +1,44 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+"use strict";
 
-import React from 'react';
-import ButtonBase from './ButtonBase';
-import buttonPropTypes from './propTypes';
-import { a11yProps } from '../utils/propTypes';
+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 _propTypes2 = require("../utils/propTypes");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+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; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 const Button = ({
   accessibilityRole = 'button',
+  tokens,
+  variant,
   ...props
-}) => /*#__PURE__*/React.createElement(ButtonBase, _extends({}, props, {
-  accessibilityRole: accessibilityRole
-}));
+}) => {
+  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
+Button.propTypes = { ..._propTypes2.a11yProps.types,
+  ..._propTypes.default,
+  children: _propTypes.textAndA11yText
 };
-export default Button;
+var _default = Button;
+exports.default = _default;