@telus-uds/components-base 0.0.2-prerelease.5 → 0.0.2-prerelease.9

package/lib/StackView/getStackedContent.js

@@ -1,7 +1,26 @@
-import React, { Children, Fragment } from 'react';
-import Box from '../Box';
-import Divider from '../Divider';
-import Spacer from '../Spacer';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Divider = _interopRequireDefault(require("../Divider"));
+
+var _Spacer = _interopRequireDefault(require("../Spacer"));
+
+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('react').ReactChildren} ReactChildren
  * @typedef {import('react').ReactElement} ReactElement
@@ -21,46 +40,54 @@ import Spacer from '../Spacer';
  *  - `direction`: if 'row' or 'row-reverse', applies space horizontally, if 'column' or 'column-reverse', applies space vertically
  *  - `box`: if truthy, wraps each valid child in a Box component; if an object, passes it to Box as props
  *  - `divider`: if truthy, inserts Divider components; if an object, passes it to Divider as props
+ *  - `preserveFragments`: if true, adds no space between top-level elements that were passed inside a nested fragment
  * @param {SpacingValue} [options.space]
  * @param {boolean | object} [options.divider]
  * @param {"row" | "column" | "row-reverse" | "column-reverse"} [options.direction]
+ * @param {boolean} [options.preserveFragments]
  * @returns {ReactElement[]}
  */
-
 const getStackedContent = (children, {
   divider,
   space,
   direction = 'column',
-  box
+  box,
+  preserveFragments = false
 }) => {
   const boxProps = box && typeof box === 'object' ? box : {
     space
   };
   const dividerProps = divider && typeof divider === 'object' ? divider : {}; // Avoid surprises if children contains comments, nulls, or is a variable wrapped as a fragment
 
-  const validChildren = Children.toArray(unpackFragment(children)).filter(Boolean);
+  const topLevelChildren = preserveFragments ? children : unpackFragment(children);
+
+  const validChildren = _react.Children.toArray(topLevelChildren).filter(Boolean);
+
   const content = validChildren.reduce((newChildren, child, index) => {
-    const boxID = `Stack-Box-${index}`;
+    const boxID = "Stack-Box-".concat(index);
     const item = box ?
     /*#__PURE__*/
     // If wrapped in Box, that Box needs a key.
     // If possible, use an existing content key; use an index-based key only if necessary.
-    React.createElement(Box, Object.assign({}, boxProps, {
+    (0, _react.createElement)(_Box.default, { ...boxProps,
       key: child.key || boxID,
       testID: boxID
-    }), child) : child;
+    }, child) : child;
     if (!index || !space && !divider) return [...newChildren, item];
-    const testID = `Stack-${divider ? 'Divider' : 'Spacer'}-${index}`;
+    const testID = "Stack-".concat(divider ? 'Divider' : 'Spacer', "-").concat(index);
     const commonProps = {
       testID,
       key: testID,
       space
     };
-    const separator = divider ? /*#__PURE__*/React.createElement(Divider, Object.assign({
-      vertical: direction.startsWith('row')
-    }, dividerProps, commonProps)) : /*#__PURE__*/React.createElement(Spacer, Object.assign({
-      direction: direction.startsWith('row') ? 'row' : 'column'
-    }, commonProps));
+    const separator = divider ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Divider.default, {
+      vertical: direction.startsWith('row'),
+      ...dividerProps,
+      ...commonProps
+    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+      direction: direction.startsWith('row') ? 'row' : 'column',
+      ...commonProps
+    });
     return [...newChildren, separator, item];
   }, []);
   return content;
@@ -100,12 +127,15 @@ const getStackedContent = (children, {
 
 
 const unpackFragment = child => {
+  var _child$props;
+
   // If this level is a set of top-level siblings rather than one child, check each in turn
-  if (Children.count(child) > 1) return Children.map(child, unpackFragment); // When a fragment is found, unpack its children to the top level and check them
+  if (_react.Children.count(child) > 1) return _react.Children.map(child, unpackFragment); // When a fragment is found, unpack its children to the top level and check them
 
-  if (child?.type === Fragment) return unpackFragment(child.props?.children); // Stop unpacking as soon as any non-fragment child is found
+  if ((child === null || child === void 0 ? void 0 : child.type) === _react.Fragment) return unpackFragment((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.children); // Stop unpacking as soon as any non-fragment child is found
 
   return child;
 };
 
-export default getStackedContent;
+var _default = getStackedContent;
+exports.default = _default;

package/lib/StackView/index.js

@@ -1,5 +1,29 @@
-import StackView from './StackView';
-import StackWrap from './StackWrap';
-export default StackView;
-export { StackWrap };
-export { default as getStackedContent } from './getStackedContent';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "StackWrap", {
+  enumerable: true,
+  get: function () {
+    return _StackWrap.default;
+  }
+});
+Object.defineProperty(exports, "getStackedContent", {
+  enumerable: true,
+  get: function () {
+    return _getStackedContent.default;
+  }
+});
+exports.default = void 0;
+
+var _StackView = _interopRequireDefault(require("./StackView"));
+
+var _StackWrap = _interopRequireDefault(require("./StackWrap"));
+
+var _getStackedContent = _interopRequireDefault(require("./getStackedContent"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _StackView.default;
+exports.default = _default;

package/lib/StepTracker/Step.js

@@ -0,0 +1,245 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _Icon = _interopRequireDefault(require("../Icon"));
+
+var _utils = require("../utils");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const selectCompletedIconTokens = ({
+  completedIconColor,
+  completedIconSize
+}) => ({
+  size: completedIconSize,
+  color: completedIconColor
+});
+
+const selectConnectorStyles = ({
+  connectorColor,
+  connectorHeight,
+  connectorMinWidth,
+  connectorCompletedHeight,
+  connectorCompletedColor
+}, isCompleted) => ({
+  backgroundColor: connectorColor,
+  height: connectorHeight,
+  minWidth: connectorMinWidth,
+  ...(isCompleted && {
+    height: connectorCompletedHeight,
+    backgroundColor: connectorCompletedColor
+  })
+});
+
+const selectCurrentInnerStyles = ({
+  knobCurrentInnerColor,
+  knobCurrentInnerSize
+}) => ({
+  backgroundColor: knobCurrentInnerColor,
+  borderRadius: knobCurrentInnerSize / 2,
+  height: knobCurrentInnerSize,
+  width: knobCurrentInnerSize
+});
+
+const selectKnobStyles = ({
+  knobBackgroundColor,
+  knobBorderColor,
+  knobBorderWidth,
+  knobCompletedBackgroundColor,
+  knobCompletedBorderColor,
+  knobCompletedPaddingLeft,
+  knobCompletedPaddingTop,
+  knobCurrentBackgroundColor,
+  knobCurrentBorderColor,
+  knobCurrentBorderWidth,
+  knobCurrentPaddingLeft,
+  knobCurrentPaddingTop,
+  knobSize
+}, isCompleted, isCurrent) => ({
+  backgroundColor: knobBackgroundColor,
+  borderColor: knobBorderColor,
+  borderRadius: knobSize / 2,
+  borderWidth: knobBorderWidth,
+  height: knobSize,
+  width: knobSize,
+  ...(isCompleted && {
+    backgroundColor: knobCompletedBackgroundColor,
+    borderColor: knobCompletedBorderColor,
+    paddingLeft: knobCompletedPaddingLeft,
+    paddingTop: knobCompletedPaddingTop
+  }),
+  ...(isCurrent && {
+    backgroundColor: knobCurrentBackgroundColor,
+    borderColor: knobCurrentBorderColor,
+    borderWidth: knobCurrentBorderWidth,
+    paddingLeft: knobCurrentPaddingLeft,
+    paddingTop: knobCurrentPaddingTop
+  })
+});
+
+const selectLabelContainerStyles = ({
+  labelDirection,
+  labelGap,
+  labelMarginTop,
+  labelPaddingLeft,
+  labelPaddingRight
+}) => ({
+  marginTop: labelMarginTop,
+  paddingLeft: labelPaddingLeft,
+  paddingRight: labelPaddingRight,
+  flexDirection: labelDirection,
+  gap: labelGap
+});
+
+const selectLabelStyles = ({
+  labelColor,
+  labelCurrentColor,
+  labelCurrentFontWeight,
+  labelFontSize,
+  labelFontWeight,
+  labelFontName,
+  labelLineHeight
+}, isCurrent) => (0, _ThemeProvider.applyTextStyles)({
+  color: isCurrent ? labelCurrentColor : labelColor,
+  fontSize: labelFontSize,
+  lineHeight: labelLineHeight,
+  fontWeight: isCurrent ? labelCurrentFontWeight : labelFontWeight,
+  fontName: labelFontName
+});
+
+const getStepTestID = (isCompleted, isCurrent) => {
+  let testID = 'StepTracker-Step';
+
+  if (isCompleted) {
+    testID += '-Completed';
+  } else if (isCurrent) {
+    testID += '-Current';
+  }
+
+  return testID;
+};
+/**
+ * A single step of a StepTracker.
+ */
+
+
+const Step = ({
+  label,
+  name,
+  status = 0,
+  stepCount = 0,
+  stepIndex = 0,
+  tokens
+}) => {
+  const {
+    completedIcon,
+    showStepLabel,
+    showStepName,
+    ...themeTokens
+  } = tokens;
+  const isFirst = stepIndex === 0;
+  const isLast = stepIndex === stepCount - 1;
+  const isCompleted = status > stepIndex;
+  const isCurrent = status === stepIndex;
+  const isActive = isCompleted || isCurrent;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    space: 0,
+    tokens: {
+      alignItems: 'stretch',
+      flexGrow: 1
+    },
+    accessibilityLabel: label,
+    accessibilityLevel: 2,
+    accessibilityCurrent: status === stepIndex ? 'true' : 'false',
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+      direction: "row",
+      space: 0,
+      tokens: {
+        alignItems: 'center',
+        flexGrow: 0
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [staticStyles.connector, !isFirst && selectConnectorStyles(themeTokens, isActive)]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+        style: [staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)],
+        testID: getStepTestID(isCompleted, isCurrent),
+        children: [isCompleted && completedIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+          icon: completedIcon,
+          tokens: selectCompletedIconTokens(themeTokens)
+        }), isCurrent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectCurrentInnerStyles(themeTokens)
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [staticStyles.connector, !isLast && selectConnectorStyles(themeTokens, isCompleted)]
+      })]
+    }), showStepLabel && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [staticStyles.stepLabelContainer, selectLabelContainerStyles(tokens)],
+      children: [showStepName && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        style: [staticStyles.centeredText, selectLabelStyles(tokens, isCurrent)],
+        children: name
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+        direction: "row",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          style: [staticStyles.centeredText, tokens.labelDirection === 'column' && staticStyles.wrappingLabel, selectLabelStyles(tokens, isCurrent)],
+          children: label
+        })
+      })]
+    })]
+  });
+};
+
+Step.propTypes = {
+  label: _propTypes.default.string.isRequired,
+  name: _propTypes.default.string.isRequired,
+  status: _propTypes.default.number.isRequired,
+  stepCount: _propTypes.default.number.isRequired,
+  stepIndex: _propTypes.default.number.isRequired,
+  tokens: (0, _utils.getTokensPropType)('StepTracker'),
+  variant: _utils.variantProp.propType
+};
+var _default = Step;
+exports.default = _default;
+
+const staticStyles = _StyleSheet.default.create({
+  centeredText: {
+    textAlign: 'center'
+  },
+  connector: {
+    flex: 1,
+    height: 1
+  },
+  completedKnob: {
+    backgroundColor: 'transparent',
+    textAlign: 'center'
+  },
+  knob: {
+    borderWidth: 1
+  },
+  stepLabelContainer: {
+    justifyContent: 'center'
+  },
+  wrappingLabel: {
+    width: 0,
+    flex: 1
+  }
+});

package/lib/StepTracker/StepTracker.js

@@ -0,0 +1,197 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _StackView = _interopRequireDefault(require("../StackView"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _propTypes2 = require("../utils/propTypes");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
+
+var _Step = _interopRequireDefault(require("./Step"));
+
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const selectContainerStyles = ({
+  containerPaddingBottom,
+  containerPaddingLeft,
+  containerPaddingRight,
+  containerPaddingTop
+}) => ({
+  paddingBottom: containerPaddingBottom,
+  paddingLeft: containerPaddingLeft,
+  paddingRight: containerPaddingRight,
+  paddingTop: containerPaddingTop
+});
+
+const selectStepTrackerLabelContainerStyles = ({
+  labelMarginTop
+}) => ({
+  marginTop: labelMarginTop
+});
+
+const selectStepTrackerLabelStyles = ({
+  labelColor,
+  labelFontSize,
+  labelFontWeight,
+  labelFontName,
+  labelLineHeight
+}) => (0, _ThemeProvider.applyTextStyles)({
+  color: labelColor,
+  fontSize: labelFontSize,
+  lineHeight: labelLineHeight,
+  fontWeight: labelFontWeight,
+  fontName: labelFontName
+});
+/**
+ * StepTracker component shows the current position in a sequence of steps.
+ *
+ * ## Component API
+ *
+ * - `current` prop allows to control the current step, 0-based number;
+ * - use `copy` and `dictionary` props to internationalize the labels;
+ * - `steps` is and array of strings defining step titles;
+ * - tokens and variant props define the appearance of the `StepTracker`:
+ *
+ * ## Usability and A11y guidelines
+ *
+ * Keep in mind that in its current implementation this is not an interactive
+ * component and can’t be used to navigate between steps. The application
+ * must provide its own navigation mechanism and state control. That is the
+ * main reason the component assumes the `progressbar` role in terms of
+ * accessibility. This also makes it extremely important to make sure you
+ * set a11y on controls used to modify the state of the step tracker.
+ *
+ * You can pass standard a11y props to the `StepTracker` component, including
+ * the ones that are specific to the `progressbar` role. By default the
+ * following props are used:
+ *
+ * - `accessibilityRole` (`role`): `progressbar`,
+ * - `accessibilityLabel` (`aria-label`): `Step I of N: <Current Step Label>`,
+ * - `accessibilityLevel` (`aria-level`): 1,
+ * - `accessibilityValue.min` (`aria-valuemin`): `0`,
+ * - `accessibilityValue.max` (`aria-valuemax`): `steps.length - 1`,
+ * - `accessibilityValue.now` (`aria-valuenow`): `current`,
+ * - `accessibilityValue.text` (`aria-valuetext`): `<Current Step Label>`,
+ *
+ */
+
+
+const StepTracker = ({
+  current = 0,
+  copy = 'en',
+  dictionary = _dictionary.default,
+  steps = [],
+  tokens,
+  variant,
+  ...rest
+}) => {
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    showStepTrackerLabel,
+    ...themeTokens
+  } = (0, _ThemeProvider.useThemeTokens)('StepTracker', tokens, variant, {
+    viewport
+  });
+  const getCopy = (0, _useCopy.default)({
+    dictionary,
+    copy
+  });
+  const stepTrackerLabel = getCopy('stepTrackerLabel').replace('%{stepNumber}', current < steps.length ? current + 1 : steps.length).replace('%{stepCount}', steps.length).replace('%{stepLabel}', current < steps.length ? steps[current] : steps[steps.length - 1]);
+  if (!steps.length) return null;
+  const accessibilityProps = {
+    accessibilityLabel: stepTrackerLabel,
+    accessibilityLevel: 1,
+    accessibilityRole: 'progressbar',
+    accessibilityValue: {
+      min: 0,
+      max: steps.length - 1,
+      now: current,
+      text: steps[current]
+    },
+    ..._propTypes2.a11yProps.select(rest)
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: selectContainerStyles(themeTokens),
+    ...accessibilityProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+      space: 0,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: staticStyles.stepsContainer,
+        children: steps.map((label, index) => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Step.default, {
+            status: current,
+            label: label,
+            name: getCopy('stepLabel').replace('%{stepNumber}', index + 1),
+            stepIndex: index,
+            stepCount: steps.length,
+            tokens: themeTokens
+          }, label);
+        })
+      }), showStepTrackerLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [staticStyles.stepTrackerLabelContainer, selectStepTrackerLabelContainerStyles(themeTokens)],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          style: selectStepTrackerLabelStyles(themeTokens),
+          children: stepTrackerLabel
+        })
+      })]
+    })
+  });
+};
+
+StepTracker.propTypes = {
+  current: _propTypes.default.number,
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+  dictionary: _propTypes.default.shape({
+    en: _propTypes.default.shape({
+      stepLabel: _propTypes.default.string,
+      stepTrackerLabel: _propTypes.default.string
+    }),
+    fr: _propTypes.default.shape({
+      stepLabel: _propTypes.default.string,
+      stepTrackerLabel: _propTypes.default.string
+    })
+  }),
+  steps: _propTypes.default.arrayOf(_propTypes.default.string),
+  tokens: (0, _utils.getTokensPropType)('StepTracker'),
+  variant: _utils.variantProp.propType
+};
+var _default = StepTracker;
+exports.default = _default;
+
+const staticStyles = _StyleSheet.default.create({
+  stepsContainer: {
+    alignItems: 'flex-start',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    flexGrow: 1
+  },
+  stepTrackerLabelContainer: {
+    textAlign: 'center',
+    flexDirection: 'row',
+    justifyContent: 'center'
+  }
+});

package/lib/StepTracker/dictionary.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    stepLabel: 'Step %{stepNumber}',
+    stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
+  },
+  fr: {
+    stepLabel: 'Étape %{stepNumber}',
+    stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
+  }
+};
+exports.default = _default;

package/lib/StepTracker/index.js

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