@telus-uds/components-base 1.8.0 → 1.8.3

package/lib-module/StepTracker/Step.js

@@ -1,229 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Text from "react-native-web/dist/exports/Text";
-import View from "react-native-web/dist/exports/View";
-import StackView from '../StackView';
-import Icon from '../Icon';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
-import { applyTextStyles } from '../ThemeProvider';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-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) => 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,
-  ...rest
-}) => {
-  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__*/_jsxs(StackView, {
-    space: 0,
-    tokens: {
-      alignItems: 'stretch',
-      flexGrow: 1
-    },
-    accessibilityLabel: label,
-    accessibilityLevel: 2,
-    accessibilityCurrent: status === stepIndex,
-    ...selectProps(rest),
-    children: [/*#__PURE__*/_jsxs(StackView, {
-      direction: "row",
-      space: 0,
-      tokens: {
-        alignItems: 'center',
-        flexGrow: 0
-      },
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [staticStyles.connector, !isFirst && selectConnectorStyles(themeTokens, isActive)]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: [staticStyles.knob, selectKnobStyles(themeTokens, isCompleted, isCurrent)],
-        testID: getStepTestID(isCompleted, isCurrent),
-        children: [isCompleted && completedIcon && /*#__PURE__*/_jsx(Icon, {
-          icon: completedIcon,
-          tokens: selectCompletedIconTokens(themeTokens)
-        }), isCurrent && /*#__PURE__*/_jsx(View, {
-          style: selectCurrentInnerStyles(themeTokens)
-        })]
-      }), /*#__PURE__*/_jsx(View, {
-        style: [staticStyles.connector, !isLast && selectConnectorStyles(themeTokens, isCompleted)]
-      })]
-    }), showStepLabel && /*#__PURE__*/_jsxs(View, {
-      style: [staticStyles.stepLabelContainer, selectLabelContainerStyles(tokens)],
-      children: [showStepName && /*#__PURE__*/_jsx(Text, {
-        style: [staticStyles.centeredText, selectLabelStyles(tokens, isCurrent)],
-        children: name
-      }), /*#__PURE__*/_jsx(StackView, {
-        direction: "row",
-        children: /*#__PURE__*/_jsx(Text, {
-          style: [staticStyles.centeredText, tokens.labelDirection === 'column' && staticStyles.wrappingLabel, selectLabelStyles(tokens, isCurrent)],
-          children: label
-        })
-      })]
-    })]
-  });
-};
-
-Step.propTypes = { ...selectedSystemPropTypes,
-  label: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  status: PropTypes.number.isRequired,
-  stepCount: PropTypes.number.isRequired,
-  stepIndex: PropTypes.number.isRequired,
-  tokens: getTokensPropType('StepTracker'),
-  variant: variantProp.propType
-};
-export default Step;
-const staticStyles = StyleSheet.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-module/StepTracker/StepTracker.js

@@ -1,175 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Text from "react-native-web/dist/exports/Text";
-import View from "react-native-web/dist/exports/View";
-import StackView from '../StackView';
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
-import { useViewport } from '../ViewportProvider';
-import useCopy from '../utils/useCopy';
-import Step from './Step';
-import defaultDictionary from './dictionary';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-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
-}) => 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 = /*#__PURE__*/forwardRef(({
-  current = 0,
-  copy = 'en',
-  dictionary = defaultDictionary,
-  steps = [],
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
-  const viewport = useViewport();
-  const {
-    showStepTrackerLabel,
-    ...themeTokens
-  } = useThemeTokens('StepTracker', tokens, variant, {
-    viewport
-  });
-  const getCopy = useCopy({
-    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 selectedProps = selectProps({
-    accessibilityLabel: stepTrackerLabel,
-    accessibilityLevel: 1,
-    accessibilityRole: 'progressbar',
-    accessibilityValue: {
-      min: 0,
-      max: steps.length - 1,
-      now: current,
-      text: steps[current]
-    },
-    ...rest
-  });
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: selectContainerStyles(themeTokens),
-    ...selectedProps,
-    children: /*#__PURE__*/_jsxs(StackView, {
-      space: 0,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: staticStyles.stepsContainer,
-        children: steps.map((label, index) => {
-          return /*#__PURE__*/_jsx(Step, {
-            status: current,
-            label: label,
-            name: getCopy('stepLabel').replace('%{stepNumber}', index + 1),
-            stepIndex: index,
-            stepCount: steps.length,
-            tokens: themeTokens
-          }, label);
-        })
-      }), showStepTrackerLabel && /*#__PURE__*/_jsx(View, {
-        style: [staticStyles.stepTrackerLabelContainer, selectStepTrackerLabelContainerStyles(themeTokens)],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: selectStepTrackerLabelStyles(themeTokens),
-          children: stepTrackerLabel
-        })
-      })]
-    })
-  });
-});
-StepTracker.displayName = 'StepTracker';
-StepTracker.propTypes = { ...selectedSystemPropTypes,
-  current: PropTypes.number,
-  copy: PropTypes.oneOf(['en', 'fr']),
-  dictionary: PropTypes.shape({
-    en: PropTypes.shape({
-      stepLabel: PropTypes.string,
-      stepTrackerLabel: PropTypes.string
-    }),
-    fr: PropTypes.shape({
-      stepLabel: PropTypes.string,
-      stepTrackerLabel: PropTypes.string
-    })
-  }),
-  steps: PropTypes.arrayOf(PropTypes.string),
-  tokens: getTokensPropType('StepTracker'),
-  variant: variantProp.propType
-};
-export default StepTracker;
-const staticStyles = StyleSheet.create({
-  stepsContainer: {
-    alignItems: 'flex-start',
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-    flexGrow: 1
-  },
-  stepTrackerLabelContainer: {
-    textAlign: 'center',
-    flexDirection: 'row',
-    justifyContent: 'center'
-  }
-});

package/lib-module/StepTracker/dictionary.js

@@ -1,10 +0,0 @@
-export default {
-  en: {
-    stepLabel: 'Step %{stepNumber}',
-    stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
-  },
-  fr: {
-    stepLabel: 'Étape %{stepNumber}',
-    stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
-  }
-};

package/lib-module/StepTracker/index.js

@@ -1,2 +0,0 @@
-import StepTracker from './StepTracker';
-export default StepTracker;

package/lib-module/Tabs/Tabs.js

@@ -1,113 +0,0 @@
-import React, { forwardRef, useCallback } from 'react';
-import PropTypes from 'prop-types';
-import ABBPropTypes from 'airbnb-prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import StackView from '../StackView';
-import { a11yProps, getTokensPropType, selectSystemProps, useHash, useInputValue, variantProp, viewProps, withLinkRouter } from '../utils';
-import HorizontalScroll, { horizontalScrollUtils, HorizontalScrollButton } from '../HorizontalScroll';
-import TabsItem from './TabsItem';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const {
-  selectHorizontalScrollTokens,
-  useItemPositions
-} = horizontalScrollUtils;
-/**
- * Tabs renders a horizontally-scrolling menu of selectable buttons which may link
- * to a page or control what content is displayed on this page.
- */
-
-const Tabs = /*#__PURE__*/forwardRef(({
-  tokens,
-  itemTokens,
-  scrollButtonTokens,
-  variant,
-  value,
-  initialValue,
-  onChange,
-  items = [],
-  LinkRouter,
-  linkRouterProps,
-  ...rest
-}, ref) => {
-  const {
-    space,
-    ...themeTokens
-  } = useThemeTokens('Tabs', tokens, variant);
-  const {
-    currentValue,
-    setValue
-  } = useInputValue({
-    value,
-    initialValue,
-    onChange
-  });
-  const [itemPositions, isPositioningReady] = useItemPositions();
-  useHash(useCallback((hash, event) => {
-    const hashItem = hash && items.find(({
-      href
-    }) => hash === href);
-    const hashId = hashItem && (hashItem.id || hashItem.label);
-    if (hashId) setTimeout(setValue(hashId, event), 500);
-  }, [items, setValue]), isPositioningReady);
-  return /*#__PURE__*/_jsx(HorizontalScroll, {
-    ref: ref,
-    ScrollButton: HorizontalScrollButton,
-    itemPositions: itemPositions,
-    tokens: selectHorizontalScrollTokens(themeTokens),
-    scrollButtonTokens: scrollButtonTokens,
-    accessibilityRole: "tablist",
-    ...selectProps(rest),
-    children: /*#__PURE__*/_jsx(StackView, {
-      space: space,
-      direction: "row",
-      children: items.map(({
-        href,
-        label,
-        id,
-        ref: itemRef,
-        LinkRouter: ItemLinkRouter = LinkRouter,
-        linkRouterProps: itemLinkRouterProps
-      }, index) => {
-        const itemId = id ?? label;
-        const isSelected = Boolean(currentValue && currentValue === itemId);
-
-        const handlePress = event => setValue(itemId, event);
-
-        return /*#__PURE__*/_jsx(TabsItem, {
-          ref: itemRef,
-          href: href,
-          variant: variant,
-          tokens: itemTokens,
-          onPress: handlePress,
-          selected: isSelected,
-          itemPositions: itemPositions,
-          index: index,
-          LinkRouter: ItemLinkRouter,
-          linkRouterProps: { ...linkRouterProps,
-            ...itemLinkRouterProps
-          },
-          children: label
-        }, itemId);
-      })
-    })
-  });
-});
-Tabs.displayName = 'Tabs';
-Tabs.propTypes = { ...selectedSystemPropTypes,
-  ...withLinkRouter.PropTypes,
-  items: PropTypes.arrayOf(PropTypes.shape({ ...withLinkRouter.PropTypes,
-    href: PropTypes.string,
-    label: PropTypes.string,
-    id: PropTypes.string,
-    ref: ABBPropTypes.ref()
-  })),
-  value: PropTypes.string,
-  initialValue: PropTypes.string,
-  onChange: PropTypes.func,
-  tokens: getTokensPropType('Tabs'),
-  itemTokens: getTokensPropType('TabsItem'),
-  scrollButtonTokens: getTokensPropType('HorizontalScrollButton'),
-  variant: variantProp.propType
-};
-export default Tabs;