@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/StepTracker/StepTracker.js

@@ -1,208 +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 { applyTextStyles, useTheme, 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 = _ref => {
-  let {
-    containerPaddingBottom,
-    containerPaddingLeft,
-    containerPaddingRight,
-    containerPaddingTop
-  } = _ref;
-  return {
-    paddingBottom: containerPaddingBottom,
-    paddingLeft: containerPaddingLeft,
-    paddingRight: containerPaddingRight,
-    paddingTop: containerPaddingTop
-  };
-};
-const selectStepTrackerLabelContainerStyles = _ref2 => {
-  let {
-    labelMarginTop
-  } = _ref2;
-  return {
-    marginTop: labelMarginTop
-  };
-};
-const selectStepTrackerLabelStyles = (_ref3, themeOptions) => {
-  let {
-    labelColor,
-    labelFontSize,
-    labelFontWeight,
-    labelFontName,
-    labelLineHeight
-  } = _ref3;
-  return applyTextStyles({
-    color: labelColor,
-    fontSize: labelFontSize,
-    lineHeight: labelLineHeight,
-    fontWeight: labelFontWeight,
-    fontName: labelFontName,
-    themeOptions
-  });
-};
-
-/**
- * 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__*/React.forwardRef((_ref4, ref) => {
-  let {
-    current = 0,
-    copy = 'en',
-    dictionary = defaultDictionary,
-    steps = [],
-    tokens,
-    variant,
-    ...rest
-  } = _ref4;
-  const viewport = useViewport();
-  const {
-    showStepTrackerLabel,
-    ...themeTokens
-  } = useThemeTokens('StepTracker', tokens, variant, {
-    viewport
-  });
-  const {
-    textStepTrackerLabel
-  } = themeTokens;
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const stepTrackerLabel = showStepTrackerLabel ? (typeof copy === 'string' ? getCopy(textStepTrackerLabel ?? 1).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]) : '';
-  const getStepLabel = index => {
-    if (themeTokens.showStepLabel) {
-      var _getCopy;
-      return (_getCopy = getCopy(index + 1)) === null || _getCopy === void 0 ? void 0 : _getCopy.stepLabel.replace('%{stepNumber}', index + 1);
-    }
-    return '';
-  };
-  const {
-    themeOptions
-  } = useTheme();
-  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: getStepLabel(index),
-            stepIndex: index,
-            stepCount: steps.length,
-            tokens: themeTokens
-          }, label);
-        })
-      }), showStepTrackerLabel && /*#__PURE__*/_jsx(View, {
-        style: [staticStyles.stepTrackerLabelContainer, selectStepTrackerLabelContainerStyles(themeTokens)],
-        children: /*#__PURE__*/_jsx(Text, {
-          style: selectStepTrackerLabelStyles(themeTokens, themeOptions),
-          children: stepTrackerLabel
-        })
-      })]
-    })
-  });
-});
-StepTracker.displayName = 'StepTracker';
-
-// If a language dictionary entry is provided, it must contain every key
-const dictionaryContentShape = PropTypes.shape({
-  stepLabel: PropTypes.string.isRequired,
-  stepTrackerLabel: PropTypes.string.isRequired
-});
-StepTracker.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * The current step, 0-based number
-   */
-  current: PropTypes.number,
-  /**
-   * The language to use for the labels
-   */
-  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), dictionaryContentShape]),
-  /**
-   * Custom dictionary containing the labels to use for the steps
-   */
-  dictionary: PropTypes.shape({
-    en: dictionaryContentShape,
-    fr: dictionaryContentShape
-  }),
-  /**
-   * An array of strings defining the step titles
-   */
-  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,30 +0,0 @@
-export default {
-  en: {
-    1: {
-      stepLabel: 'Step %{stepNumber}',
-      stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
-    },
-    2: {
-      stepLabel: 'Step %{stepNumber}',
-      stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
-    },
-    3: {
-      stepLabel: 'Step %{stepNumber}',
-      stepTrackerLabel: 'Step %{stepNumber} of %{stepCount}: %{stepLabel}'
-    }
-  },
-  fr: {
-    1: {
-      stepLabel: 'Étape %{stepNumber}',
-      stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
-    },
-    2: {
-      stepLabel: 'Étape %{stepNumber}',
-      stepTrackerLabel: 'Étape %{stepNumber} sur %{stepCount}: %{stepLabel}'
-    },
-    3: {
-      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/TabBar/TabBar.js

@@ -1,125 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import TabBarItem from './TabBarItem';
-import { useThemeTokens } from '../ThemeProvider';
-import { variantProp, getTokensPropType, selectSystemProps, a11yProps, viewProps } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const selectTabBarContainerStyles = _ref => {
-  let {
-    paddingTop,
-    paddingBottom,
-    borderTopWidth,
-    borderTopColor,
-    backgroundColor
-  } = _ref;
-  return {
-    paddingTop,
-    paddingBottom,
-    borderTopWidth,
-    borderTopColor,
-    backgroundColor
-  };
-};
-const selectTabBarItemContainerStyles = _ref2 => {
-  let {
-    paddingLeft,
-    paddingRight,
-    gap
-  } = _ref2;
-  return {
-    paddingLeft,
-    paddingRight,
-    gap
-  };
-};
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-/**
- * TabBar component renders a navigation bar with multiple TabBarItems.
- * It allows users to switch between different views or sections.
- *
- * @component
- * @example
- * const items = [
- *   { id: '1', label: 'Home', icon: <HomeIcon />, iconActive: <HomeActiveIcon /> },
- *   { id: '2', label: 'Profile', icon: <ProfileIcon />, iconActive: <ProfileActiveIcon /> },
- * ]
- * return (
- *   <TabBar
- *     items={items}
- *     initiallySelectedItem="1"
- *     onChange={(itemId) => console.log(itemId)}
- *   />
- * )
- */
-
-const TabBar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  let {
-    items = [],
-    initiallySelectedItem = '0',
-    onChange,
-    variant,
-    tokens,
-    ...rest
-  } = _ref3;
-  const [isSelected, setIsSelected] = React.useState(initiallySelectedItem);
-  const themeTokens = useThemeTokens('TabBar', tokens, variant);
-  const handlePress = itemId => {
-    setIsSelected(itemId);
-    onChange === null || onChange === void 0 ? void 0 : onChange(itemId);
-  };
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: [styles.tabBar, selectTabBarContainerStyles(themeTokens)],
-    ...selectProps(rest),
-    children: /*#__PURE__*/_jsx(View, {
-      style: [styles.tabBarItem, selectTabBarItemContainerStyles(themeTokens)],
-      children: items.map((item, index) => /*#__PURE__*/_jsx(TabBarItem, {
-        label: item.label,
-        href: item.href,
-        isSelected: isSelected === item.id,
-        icon: item.icon,
-        iconActive: item.iconActive,
-        onPress: () => handlePress(item.id),
-        id: `tab-item-${index}`,
-        accessibilityRole: "tablist"
-      }, item.id))
-    })
-  });
-});
-TabBar.displayName = 'TabBar';
-TabBar.propTypes = {
-  ...selectedSystemPropTypes,
-  /** Array of TabBarItems to be displayed in TabBar */
-  items: PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.string.isRequired,
-    icon: PropTypes.node,
-    iconActive: PropTypes.node,
-    label: PropTypes.string.isRequired,
-    href: PropTypes.string
-  })).isRequired,
-  /** Id of the initially selected item. */
-  initiallySelectedItem: PropTypes.number,
-  /** Callback function to handle item selection change. */
-  onChange: PropTypes.func,
-  /** Variant of TabBar for styling purposes. */
-  variant: variantProp.propType,
-  /** Tokens for theming and styling. */
-  tokens: getTokensPropType('TabBar')
-};
-const styles = StyleSheet.create({
-  tabBar: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
-  tabBarItem: {
-    flex: 1,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    width: '100%'
-  }
-});
-export default TabBar;

package/lib-module/TabBar/TabBarItem.js

@@ -1,177 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Pressable from "react-native-web/dist/exports/Pressable";
-import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { getTokensPropType, resolvePressableTokens, variantProp } from '../utils';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import Typography from '../Typography';
-import Spacer from '../Spacer';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const selectTypographyStyles = (_ref, isSelected) => {
-  let {
-    fontWeight,
-    color,
-    lineHeight,
-    fontName,
-    activeColor
-  } = _ref;
-  return {
-    fontWeight,
-    color: isSelected ? activeColor : color,
-    lineHeight,
-    fontName
-  };
-};
-const selectIconContainerStyles = _ref2 => {
-  let {
-    paddingTop,
-    paddingBottom
-  } = _ref2;
-  return {
-    paddingTop,
-    paddingBottom,
-    alignItems: 'center'
-  };
-};
-const selectIconStyles = (_ref3, isSelected) => {
-  let {
-    iconSize,
-    iconColor,
-    activeColor
-  } = _ref3;
-  return {
-    size: iconSize,
-    color: isSelected ? activeColor : iconColor
-  };
-};
-const selectContainerStyles = _ref4 => {
-  let {
-    borderRadius,
-    backgroundColor
-  } = _ref4;
-  return {
-    borderRadius,
-    backgroundColor,
-    alignSelf: 'center',
-    alignItems: 'center'
-  };
-};
-const TabBarItem = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
-  let {
-    href,
-    variant,
-    tokens,
-    label,
-    isSelected,
-    id,
-    onPress,
-    icon: IconComponent,
-    iconActive: IconActiveComponent,
-    accessibilityRole = 'tab'
-  } = _ref5;
-  const getTokens = useThemeTokensCallback('TabBarItem', tokens, variant);
-  const getPressableStyle = _ref6 => {
-    let {
-      pressed,
-      focused,
-      hovered
-    } = _ref6;
-    const resolvedTokens = resolvePressableTokens(getTokens, {
-      pressed,
-      focused,
-      hovered
-    }, {
-      isSelected
-    });
-    return {
-      ...resolvedTokens,
-      outline: 'none' // removes the default browser :focus outline
-    };
-  };
-
-  return /*#__PURE__*/_jsx(Pressable, {
-    ref: ref,
-    href: href,
-    nativeID: id,
-    onPress: onPress,
-    style: _ref7 => {
-      let {
-        pressed,
-        focused,
-        hovered
-      } = _ref7;
-      return [styles.flexContainer, getPressableStyle({
-        pressed,
-        focused,
-        hovered
-      })];
-    },
-    accessibilityRole: accessibilityRole,
-    testID: id,
-    children: pressableState => {
-      const resolvedTokens = getPressableStyle(pressableState);
-      return /*#__PURE__*/_jsxs(View, {
-        style: selectContainerStyles(resolvedTokens),
-        children: [/*#__PURE__*/_jsx(View, {
-          style: [selectIconContainerStyles(resolvedTokens), styles.iconContainer],
-          children: isSelected ? IconActiveComponent && /*#__PURE__*/_jsx(IconActiveComponent, {
-            ...selectIconStyles(resolvedTokens, isSelected)
-          }) : IconComponent && /*#__PURE__*/_jsx(IconComponent, {
-            ...selectIconStyles(resolvedTokens)
-          })
-        }), /*#__PURE__*/_jsx(Spacer, {
-          space: 1
-        }), /*#__PURE__*/_jsx(Typography, {
-          variant: {
-            size: 'micro'
-          },
-          tokens: selectTypographyStyles(resolvedTokens, isSelected),
-          align: "center",
-          children: label
-        }), /*#__PURE__*/_jsx(Spacer, {
-          space: 1
-        })]
-      });
-    }
-  });
-});
-TabBarItem.displayName = 'TabBarItem';
-TabBarItem.propTypes = {
-  /** The icon to be displayed when the item is not selected. */
-  icon: PropTypes.elementType,
-  /** The icon to be displayed when the item is selected. */
-  iconActive: PropTypes.elementType,
-  /** Tokens for theming and styling the TabBarItem. */
-  tokens: getTokensPropType('TabBarItem'),
-  /** Variant of the TabBarItem for styling purposes. */
-  variant: variantProp.propType,
-  /** Callback function to handle press events. */
-  onPress: PropTypes.func,
-  /** URL to navigate to when the item is pressed. */
-  href: PropTypes.string,
-  /** Indicates whether the item is selected. */
-  isSelected: PropTypes.bool,
-  /** Unique identifier for the item. */
-  id: PropTypes.string,
-  /** Label text for the item. */
-  label: PropTypes.string.isRequired,
-  /** Accessibility role for the item. */
-  accessibilityRole: PropTypes.string
-};
-const styles = StyleSheet.create({
-  flexContainer: {
-    flex: 1,
-    alignItems: 'center'
-  },
-  iconContainer: {
-    flex: 1,
-    justifyContent: 'center',
-    alignItems: 'center',
-    minWidth: 44,
-    minHeight: 40,
-    aspectRatio: 1.1
-  }
-});
-export default TabBarItem;

package/lib-module/TabBar/index.js

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