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

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;