@telus-uds/components-base 0.0.2-prerelease.4 → 0.0.2-prerelease.8

package/lib/Checkbox/CheckboxGroup.js

@@ -0,0 +1,231 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _StackView = require("../StackView");
+
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+
+var _Fieldset = _interopRequireDefault(require("../Fieldset"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * A group of Checkboxs that behave as a fieldset. Use when users select any number of choices from options.
+ *
+ * ## Component API
+ *
+ * Use the `items` prop to pass an array of objects describing each Checkbox in the group:
+ *
+ *  - `label`: main text passed to CheckboxGroup's `label` prop
+ *  - `id`: identifier used to store which CheckboxGroup is selected (uses `label` if undefinded)
+ *  - `onChange`: optional function called on selection, in addition to updating the group's selection state
+ *
+ * ### Controlled version
+ *
+ * If the selection state is controlled from outside, it needs to receive `checkedId` and `onChange` props.
+ *
+ * ### Uncontrolled version
+ *
+ * If the CheckboxGroup manages its own state, you can use `initialCheckedId` prop to provide the initial value.
+ * Whenever the radio card gets toggled, it calls the `onChange` callback with the new value (string).
+ *
+ * ### Use in forms
+ *
+ * For web forms, the `name` prop may be used to define the name of the group's `fieldset` and input elements.
+ *
+ * ### Validation
+ *
+ * Validation state may be set by passing 'error' or 'success' to the `validation` prop.
+ *
+ * ## A11y guidelines
+ *
+ * CheckboxGroup accepts all the common accessibility props, and controls the accessibility state
+ * of children like Checkbox and Feedback based on current state.
+ *
+ * @example
+ * ```jsx
+ * <CheckboxGroup
+ *   initialCheckedId="check1"
+ *   items={[
+ *     { label: 'Checkbox 1', id: 'check1' },
+ *     { label: 'Checkbox 2', id: 'check2' },
+ *     { label: 'Checkbox 3', id: 'check3' }
+ *   ]}
+ *   legend="Checkboxes"
+ *   hint="Choose from these options"
+ * />
+ * ```
+ */
+const CheckboxGroup = ({
+  tokens,
+  radioTokens,
+  variant,
+  items = [],
+  legend,
+  tooltip,
+  hint,
+  validation,
+  feedback,
+  initialCheckedIds,
+  checkedIds,
+  onChange,
+  readOnly,
+  name: inputGroupName,
+  inactive
+}) => {
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    space,
+    fieldSpace
+  } = (0, _ThemeProvider.useThemeTokens)('CheckboxGroup', tokens, variant, {
+    viewport
+  });
+  const {
+    currentValues,
+    toggleOneValue
+  } = (0, _utils.useMultipleInputValues)({
+    values: checkedIds,
+    initialValues: initialCheckedIds,
+    onChange,
+    readOnly: readOnly || inactive
+  });
+  const checkboxes = items.map(({
+    label,
+    id,
+    onChange: itemOnChange
+  }, index) => {
+    const checkboxId = id || "Checkbox[".concat(index, "]");
+
+    const handleChange = (...args) => {
+      if (typeof itemOnChange === 'function') itemOnChange(...args);
+      toggleOneValue(checkboxId);
+    };
+
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+      id: checkboxId,
+      checked: currentValues.includes(checkboxId),
+      onChange: handleChange,
+      inactive: inactive,
+      label: label,
+      name: inputGroupName,
+      tokens: radioTokens,
+      variant: variant
+    }, checkboxId);
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+    name: inputGroupName,
+    legend: legend,
+    tooltip: tooltip,
+    hint: hint,
+    space: fieldSpace,
+    feedback: feedback,
+    inactive: inactive,
+    status: validation,
+    children: (0, _StackView.getStackedContent)(checkboxes, {
+      space,
+      direction: 'column'
+    })
+  });
+};
+
+CheckboxGroup.propTypes = {
+  /**
+   * Optional theme token overrides for the outer CheckboxGroup component
+   */
+  tokens: (0, _utils.getTokensPropType)('CheckboxGroup'),
+
+  /**
+   * Optional theme token overrides for each inner Checkbox component
+   */
+  radioTokens: (0, _utils.getTokensPropType)('Checkbox'),
+
+  /**
+   * Theme variants, shared between both CheckboxGroup and Checkbox
+   */
+  variant: _utils.variantProp.propType,
+
+  /**
+   * Array of objects containing specifics for each Checkbox to be rendered in the group.
+   */
+  items: _propTypes.default.arrayOf(_propTypes.default.exact({
+    label: _propTypes.default.string,
+    id: _propTypes.default.string,
+    onChange: _propTypes.default.func
+  })),
+
+  /**
+   * Main text used to describe this group, used in Fieldset's Legend element.
+   */
+  legend: _propTypes.default.string,
+
+  /**
+   * Optional additional text giving more detail to help a user make a choice.
+   */
+  hint: _propTypes.default.string,
+
+  /**
+   * Optional tooltip text content to include alongside the legend and hint.
+   */
+  tooltip: _propTypes.default.string,
+
+  /**
+   * Current validation status of the group, passed to the feedback element if there is one.
+   */
+  validation: _propTypes.default.oneOf(['error', 'success']),
+
+  /**
+   * If provided, a Feedback element is rendered containing this text.
+   */
+  feedback: _propTypes.default.string,
+
+  /**
+   * If provided, the checkboxed with this ids are selected on first render.
+   */
+  initialCheckedIds: _propTypes.default.arrayOf(_propTypes.default.string),
+
+  /**
+   * If not undefined, the checkboxes with these ids is selected, and the
+   * element's selection state will be controlled by its parent using the `onChange` function.
+   */
+  checkedIds: _propTypes.default.arrayOf(_propTypes.default.string),
+
+  /**
+   * Function to call on change in selection state. Is required if the selection state is controlled
+   * by a parent using checkedId and the input is not readOnly.
+   */
+  onChange: _propTypes.default.func,
+
+  /**
+   * If true, the radio cards cannot be selected by the user and simply show their current state.
+   */
+  readOnly: _propTypes.default.bool,
+
+  /**
+   * If true, the checkbox cannot be interacted with, elements are set as `disabled` and if the
+   * theme supports `inactive` appearances rules, these are applied.
+   */
+  inactive: _propTypes.default.bool,
+
+  /**
+   * On Web, this is passed to the `name` attribute of the fieldset and each radio input.
+   */
+  name: _propTypes.default.string
+};
+var _default = CheckboxGroup;
+exports.default = _default;

package/lib/Checkbox/CheckboxInput.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+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; }
+
+/**
+ * On Web we need to include an actual input but hide it.
+ */
+const CheckboxInput = /*#__PURE__*/(0, _react.forwardRef)(({
+  checked,
+  defaultChecked,
+  disabled,
+  id,
+  isControlled,
+  name,
+  onChange,
+  value
+}, ref) => {
+  const handleClick = event => {
+    // Cancel the click dispatched via the label tag, since it's already wrapped
+    // in <Pressable>
+    event.preventDefault();
+    event.stopPropagation();
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+    checked: isControlled ? checked : undefined,
+    defaultChecked: isControlled ? undefined : defaultChecked,
+    disabled: disabled,
+    hidden: true,
+    id: id,
+    name: name,
+    onChange: onChange,
+    onClick: handleClick,
+    ref: ref,
+    type: "checkbox",
+    value: value
+  });
+});
+CheckboxInput.displayName = 'CheckboxInput';
+CheckboxInput.propTypes = {
+  checked: _propTypes.default.bool,
+  defaultChecked: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  id: _propTypes.default.string.isRequired,
+  isControlled: _propTypes.default.bool.isRequired,
+  name: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  value: _propTypes.default.string
+};
+CheckboxInput.defaultProps = {
+  checked: undefined,
+  defaultChecked: undefined,
+  disabled: false,
+  name: undefined,
+  onChange: () => {},
+  value: undefined
+};
+var _default = CheckboxInput;
+exports.default = _default;

package/lib/Checkbox/CheckboxInput.native.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+/**
+ * There's no checkbox input on native platforms, so this is a noop.
+ */
+const CheckboxInput = () => null;
+
+var _default = CheckboxInput;
+exports.default = _default;

package/lib/Checkbox/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "CheckboxGroup", {
+  enumerable: true,
+  get: function () {
+    return _CheckboxGroup.default;
+  }
+});
+exports.default = void 0;
+
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+
+var _CheckboxGroup = _interopRequireDefault(require("./CheckboxGroup"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Checkbox.default;
+exports.default = _default;

package/lib/Divider/Divider.js

@@ -1,8 +1,35 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { View, StyleSheet, Platform } from 'react-native';
-import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, variantProp } from '../utils/propTypes';
+"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 _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _Spacer = _interopRequireDefault(require("../Spacer"));
+
+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').SpacingIndex} SpacingIndex
+ * @typedef {import('../utils/propTypes.js').SpacingObject} SpacingObject
+ */
+
 /**
  * A basic divider component, horizontal by default. Color and thickness can be controlled by theme.
  * Divider is based on the flexbox model and uses `alignSelf: flex` to span its flex parent.
@@ -15,21 +42,41 @@ import { getTokensPropType, variantProp } from '../utils/propTypes';
  *
  * In a flexbox row, vertical dividers will automatically size to their parent height.
  *
+ * ## Space
+ *
+ * Use this to create **space either side of the divider**. For simple cases, pass a number referring to
+ * a position on the theme's spacing scale; for example, this will put a Spacer of the smallest supported
+ * size either side of the divider:
+ *
+ * ```jsx
+ * <Divider space={1} />
+ * ```
+ *
+ * `space` prop uses `useSpacingScale` and may accept a {@link SpacingObject} or a {@link SpacingIndex} number.
+ *
+ * To **reduce the length of a divider** as well as creating space between it and its neighbours, wrap it in
+ * a `Box` component. For example, this will have the second-smallest theme-supported spacing value between
+ * the dividing line and its neighbours, and will shorten the line at either end by the same amount:
+ *
+ * ```jsx
+ * <Box space={2}><Divider /></Box>
+ * ```
+ *
  * ## Accessibility
  *
  * For accessibility purposes a divider component will be described with ARIA attributes, i.e. `role="separator"` and `aria-orientation="vertical/horizontal"`.
  */
-
 const Divider = ({
   variant,
   vertical = false,
+  space,
   tokens,
   testID
 }) => {
   const {
     color,
     width
-  } = useThemeTokens('Divider', tokens, variant);
+  } = (0, _ThemeProvider.useThemeTokens)('Divider', tokens, variant);
   const borderStyles = vertical ? {
     borderRightColor: color,
     borderRightWidth: width
@@ -37,38 +84,55 @@ const Divider = ({
     borderBottomColor: color,
     borderBottomWidth: width
   };
-  const a11y = Platform.OS === 'web' ? // There are aria attributes for dividers on web
+  const a11y = _Platform.default.OS === 'web' ? // There are aria attributes for dividers on web
   {
     'aria-orientation': vertical ? 'vertical' : 'horizontal',
     accessibilityRole: 'separator'
   } : // There are no such equivalent attributes for native
   {};
-  return /*#__PURE__*/React.createElement(View, Object.assign({
+  const divider = /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: [styles.divider, borderStyles],
-    testID: testID
-  }, a11y));
+    testID: testID,
+    ...a11y
+  });
+  if (!space) return divider;
+  const spacerProps = {
+    space,
+    direction: vertical ? 'row' : 'column'
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, { ...spacerProps,
+      testID: testID ? "".concat(testID, "-Spacer-before") : undefined
+    }), divider, /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, { ...spacerProps,
+      testID: testID ? "".concat(testID, "-Spacer-after") : undefined
+    })]
+  });
 };
 
 Divider.propTypes = {
-  tokens: getTokensPropType('Divider'),
-  variant: variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('Divider'),
+  space: _utils.spacingProps.types.spacingValue,
+  variant: _utils.variantProp.propType,
 
   /**
    * By default, the divider is a horizontal line the full width of its parent.
    * With `vertical` prop and when inside a container with { flexDirection: row }, draws a full height vertical line.
    */
-  vertical: PropTypes.bool,
+  vertical: _propTypes.default.bool,
 
   /**
    * @ignore
    * In tests, the only way to select dividers is with testID prop and getByTestId, since they have no content,
    * no accessibility role on native, and there is no equivalent of nextSibling in React Native Testing Library.
    */
-  testID: PropTypes.string
+  testID: _propTypes.default.string
 };
-const styles = StyleSheet.create({
+
+const styles = _StyleSheet.default.create({
   divider: {
     alignSelf: 'stretch'
   }
 });
-export default Divider;
+
+var _default = Divider;
+exports.default = _default;

package/lib/Divider/index.js

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

package/lib/ExpandCollapse/Accordion.js

@@ -1,12 +1,25 @@
-import React from 'react';
-import ExpandCollapse from './ExpandCollapse';
+"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(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 /**
  * 'Accordion' is a shorthand for an ExpandCollapse where only one item may be open at a time
  */
-
-const Accordion = props => /*#__PURE__*/React.createElement(ExpandCollapse, Object.assign({}, props, {
+const Accordion = props => /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, { ...props,
   maxOpen: 1
-}));
+});
 
-Accordion.propTypes = ExpandCollapse.propTypes;
-export default Accordion;
+Accordion.propTypes = _ExpandCollapse.default.propTypes;
+var _default = Accordion;
+exports.default = _default;

package/lib/ExpandCollapse/Control.js

@@ -1,8 +1,25 @@
-import React from 'react';
-import { Pressable, View } from 'react-native';
-import PropTypes from 'prop-types';
-import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider';
-import { getTokensPropType, variantProp, a11yProps } from '../utils';
+"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 _propTypes = _interopRequireDefault(require("prop-types"));
+
+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 selectContainerStyles({
   backgroundColor,
@@ -27,7 +44,7 @@ function selectContainerStyles({
     paddingTop,
     paddingBottom,
     justifyContent,
-    ...verticalAlignRow(verticalAlign, iconPosition === 'right')
+    ...(0, _ThemeProvider.verticalAlignRow)(verticalAlign, iconPosition === 'right')
   };
 } // TODO: use stack / spacer when available
 
@@ -58,10 +75,12 @@ const ExpandCollapseControl = ({
   variant,
   rest
 }) => {
-  const getTokens = useThemeTokensCallback('ExpandCollapseControl', tokens, variant);
-  const a11y = a11yProps.select({ ...rest,
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('ExpandCollapseControl', tokens, variant);
+
+  const a11y = _utils.a11yProps.select({ ...rest,
     accessibilityRole
   });
+
   a11y.accessibilityState = { ...(a11y.accessibilityState || {}),
     expanded: isExpanded
   };
@@ -81,40 +100,44 @@ const ExpandCollapseControl = ({
 
   const getPressableStyle = pressableState => selectContainerStyles(getControlTokens(pressableState));
 
-  return /*#__PURE__*/React.createElement(Pressable, Object.assign({}, a11y, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, { ...a11y,
     onPress: onPress,
-    style: getPressableStyle
-  }), pressableState => {
-    const {
-      icon: IconComponent,
-      ...themeTokens
-    } = getControlTokens(pressableState);
-    return /*#__PURE__*/React.createElement(React.Fragment, null, IconComponent && /*#__PURE__*/React.createElement(View, {
-      style: selectIconContainerStyles(themeTokens)
-    }, /*#__PURE__*/React.createElement(IconComponent, {
-      tokens: selectIconTokens(themeTokens)
-    })), typeof children === 'function' ? children(getControlState(pressableState)) : children);
+    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),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconTokens(themeTokens)
+          })
+        }), typeof children === 'function' ? children(getControlState(pressableState)) : children]
+      });
+    }
   });
 };
 
-ExpandCollapseControl.propTypes = { ...a11yProps.propTypes,
-  tokens: getTokensPropType('ExpandCollapseControl'),
-  variant: variantProp.propType,
+ExpandCollapseControl.propTypes = { ..._utils.a11yProps.propTypes,
+  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.oneOfType([PropTypes.node, PropTypes.func]),
+  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.bool,
+  isExpanded: _propTypes.default.bool,
 
   /**
    * Function called when the ExpandCollapse is pressed.
    */
-  onPress: PropTypes.func.isRequired
+  onPress: _propTypes.default.func.isRequired
 };
-export default ExpandCollapseControl;
+var _default = ExpandCollapseControl;
+exports.default = _default;