@telus-uds/components-base 1.7.1 → 1.8.2

package/lib-module/Pagination/PageButton.js

@@ -1,65 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import ButtonBase from '../Button/ButtonBase';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, copyPropTypes, getTokensPropType, hrefAttrsProp, linkProps, selectTokens, variantProp, withLinkRouter } from '../utils';
-import useCopy from '../utils/useCopy';
-import dictionary from './dictionary';
-import { jsx as _jsx } from "react/jsx-runtime";
-const PageButton = /*#__PURE__*/forwardRef(({
-  label,
-  onPress,
-  href,
-  isActive,
-  copy,
-  variant,
-  tokens,
-  ...props
-}, ref) => {
-  const getTokens = useThemeTokensCallback('PaginationPageButton', tokens, variant);
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-
-  const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
-
-  const activeProps = isActive ? {
-    selected: true,
-    ...a11yProps.nonFocusableProps,
-    // a brute fix for the focus state being stuck on an active item since it becomes non-focusable
-    // (see https://github.com/telus/universal-design-system/pull/577#issuecomment-931344107)
-    key: 'active-item'
-  } : {};
-  const accessibilityRole = href !== undefined ? 'link' : 'button';
-  const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : '';
-  const accessibilityLabel = `${getCopy('goToLabel')} ${label}${activeLabel}`;
-  const {
-    hrefAttrs,
-    rest
-  } = hrefAttrsProp.bundle(props);
-  const buttonProps = {
-    accessibilityRole,
-    accessibilityLabel,
-    onPress,
-    href,
-    hrefAttrs,
-    ...rest
-  };
-  return /*#__PURE__*/_jsx(ButtonBase, {
-    ref: ref,
-    ...buttonProps,
-    tokens: getButtonTokens,
-    ...activeProps,
-    children: label
-  });
-});
-PageButton.displayName = 'PageButton';
-PageButton.propTypes = { ...linkProps.types,
-  label: PropTypes.string,
-  isActive: PropTypes.bool,
-  copy: copyPropTypes,
-  variant: variantProp.propType,
-  tokens: getTokensPropType('PaginationPageButton')
-};
-export default withLinkRouter(PageButton);

package/lib-module/Pagination/Pagination.js

@@ -1,140 +0,0 @@
-import React, { forwardRef } from 'react';
-import View from "react-native-web/dist/exports/View";
-import Text from "react-native-web/dist/exports/Text";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { a11yProps, componentPropType, copyPropTypes, getTokensPropType, selectSystemProps, variantProp, viewProps, withLinkRouter } from '../utils';
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
-import Box from '../Box';
-import usePagination from './usePagination';
-import PageButton from './PageButton';
-import SideButton from './SideButton';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-const selectTextStyles = ({
-  color,
-  fontName,
-  fontSize,
-  fontWeight,
-  lineHeight
-}) => applyTextStyles({
-  color,
-  fontName,
-  fontSize,
-  fontWeight,
-  lineHeight
-});
-
-const Pagination = /*#__PURE__*/forwardRef(({
-  children,
-  copy = 'en',
-  variant,
-  tokens,
-  sideButtonVariant,
-  sideButtonTokens,
-  LinkRouter,
-  linkRouterProps,
-  ...rest
-}, ref) => {
-  const viewport = useViewport();
-  const {
-    truncateAbove,
-    gap,
-    ...themeTokens
-  } = useThemeTokens('Pagination', tokens, variant, {
-    viewport
-  });
-  const items = React.Children.toArray(children);
-  const {
-    isItemActive,
-    getItemProps,
-    showPrevious,
-    showNext,
-    nextItemProps,
-    previousItemProps,
-    shouldRenderButton,
-    shouldRenderEllipsis
-  } = usePagination({
-    items,
-    truncateAbove
-  });
-  const ellipsisTextStyles = selectTextStyles(themeTokens);
-
-  if (items.length === 0) {
-    return null;
-  } // TODO: replace with a spacing component when https://github.com/telus/universal-design-system/pull/531 is implemented
-  // concatenate all items to easily wrap them in identical spacing components
-
-
-  const buttons = [showPrevious && /*#__PURE__*/_jsx(SideButton, { ...previousItemProps,
-    direction: "previous",
-    copy: copy,
-    variant: sideButtonVariant,
-    tokens: sideButtonTokens,
-    LinkRouter: LinkRouter,
-    linkRouterProps: linkRouterProps
-  }), ...items.map((_child, itemIndex) => {
-    const buttonLabel = `${itemIndex + 1}`;
-    const itemProps = getItemProps(itemIndex);
-    const ItemLinkRouter = itemProps.LinkRouter ?? LinkRouter;
-    const itemLinkRouterProps = { ...linkRouterProps,
-      ...itemProps.linkRouterProps
-    };
-
-    if (shouldRenderButton(itemIndex)) {
-      return /*#__PURE__*/_jsx(PageButton, { ...itemProps,
-        LinkRouter: ItemLinkRouter,
-        linkRouterProps: itemLinkRouterProps,
-        label: buttonLabel,
-        copy: copy,
-        isActive: isItemActive(itemIndex)
-      });
-    }
-
-    if (shouldRenderEllipsis(itemIndex)) {
-      return /*#__PURE__*/_jsx(Text, {
-        style: ellipsisTextStyles,
-        children: "..."
-      });
-    }
-
-    return null;
-  }), showNext && /*#__PURE__*/_jsx(SideButton, { ...nextItemProps,
-    direction: "next",
-    copy: copy,
-    variant: sideButtonVariant,
-    tokens: sideButtonTokens,
-    LinkRouter: LinkRouter,
-    linkRouterProps: linkRouterProps
-  })];
-  return /*#__PURE__*/_jsx(View, {
-    style: staticStyles.container,
-    ref: ref,
-    ...selectProps(rest),
-    children: buttons // keep the keys in-line with the page numbers regardless of which buttons are actually rendered
-    .map((element, index) => [element, `page-${index + 1}`]).filter(([element]) => element !== null).map(([element, key]) => /*#__PURE__*/_jsx(Box, {
-      right: gap,
-      children: element
-    }, key))
-  });
-});
-PageButton.displayName = 'PageButton';
-Pagination.PageButton = PageButton;
-Pagination.propTypes = { ...selectedSystemPropTypes,
-  ...withLinkRouter.propTypes,
-  children: componentPropType('PageButton'),
-  copy: copyPropTypes,
-  variant: variantProp.propType,
-  tokens: getTokensPropType('Pagination'),
-  sideButtonVariant: variantProp.propType,
-  sideButtonTokens: getTokensPropType('PaginationSideButton')
-};
-const staticStyles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center'
-  }
-});
-export default Pagination;

package/lib-module/Pagination/SideButton.js

@@ -1,103 +0,0 @@
-import React, { forwardRef } from 'react';
-import Text from "react-native-web/dist/exports/Text";
-import PropTypes from 'prop-types';
-import ButtonBase from '../Button/ButtonBase';
-import { IconText } from '../Icon';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { useViewport } from '../ViewportProvider';
-import { copyPropTypes, hrefAttrsProp, linkProps, selectTokens, withLinkRouter } from '../utils';
-import dictionary from './dictionary';
-import useCopy from '../utils/useCopy';
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const selectIconTokens = ({
-  color,
-  iconSize,
-  iconDisplace
-}, direction) => {
-  return {
-    color,
-    size: iconSize,
-    translateX: iconDisplace * (direction === 'previous' ? -1 : 1)
-  };
-};
-
-const directionToSide = {
-  previous: 'left',
-  next: 'right'
-};
-const SideButton = /*#__PURE__*/forwardRef(({
-  direction = 'previous',
-  onPress,
-  href,
-  copy,
-  variant,
-  tokens,
-  ...props
-}, ref) => {
-  const viewport = useViewport();
-  const buttonVariant = {
-    direction,
-    viewport,
-    ...variant
-  };
-  const getTokens = useThemeTokensCallback('PaginationSideButton', tokens, buttonVariant);
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const {
-    icon
-  } = getTokens(tokens, buttonVariant);
-
-  const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
-
-  const getIconTokens = buttonState => selectIconTokens(getTokens(buttonState), direction);
-
-  const label = direction === 'previous' ? getCopy('previousText') : getCopy('nextText');
-  const showLabel = viewport !== 'sm' && viewport !== 'xs';
-  const accessibilityLabel = direction === 'previous' ? getCopy('previousLabel') : getCopy('nextLabel');
-  const accessibilityRole = href !== undefined ? 'link' : 'button';
-  const {
-    hrefAttrs,
-    rest
-  } = hrefAttrsProp.bundle(props);
-  const buttonProps = {
-    accessibilityRole,
-    accessibilityLabel,
-    onPress,
-    href,
-    hrefAttrs,
-    ...rest
-  };
-  return /*#__PURE__*/_jsx(ButtonBase, {
-    ref: ref,
-    ...buttonProps,
-    tokens: getButtonTokens,
-    children: ({
-      textStyles,
-      ...buttonState
-    }) => {
-      const iconProps = {
-        tokens: getIconTokens(buttonState)
-      };
-      return /*#__PURE__*/_jsx(IconText, {
-        icon: icon,
-        space: 1,
-        iconPosition: directionToSide[direction],
-        iconProps: iconProps,
-        children: showLabel && /*#__PURE__*/_jsx(Text, {
-          style: textStyles,
-          children: label
-        })
-      });
-    }
-  });
-});
-SideButton.displayName = 'SideButton';
-SideButton.propTypes = {
-  direction: PropTypes.oneOf(['previous', 'next']),
-  copy: copyPropTypes,
-  ...linkProps.types
-};
-export default withLinkRouter(SideButton);

package/lib-module/Pagination/dictionary.js

@@ -1,18 +0,0 @@
-export default {
-  en: {
-    goToLabel: 'Go to page number',
-    currentLabel: '(current)',
-    previousLabel: 'Go to previous page',
-    previousText: 'Previous',
-    nextLabel: 'Go to next page',
-    nextText: 'Next'
-  },
-  fr: {
-    goToLabel: 'Aller au page n°',
-    currentLabel: '(page actuelle)',
-    previousLabel: 'Aller au page précédent',
-    previousText: 'Précédent',
-    nextLabel: 'Aller au prochain page',
-    nextText: 'Suivant'
-  }
-};

package/lib-module/Pagination/index.js

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

package/lib-module/Pagination/usePagination.js

@@ -1,72 +0,0 @@
-/**
- * Handles configurable truncating of pagination items.
- *
- * @param {object} props
- * @param {React.Element[]} items
- * @param {number} truncateAbove
- */
-function usePagination({
-  items,
-  truncateAbove
-}) {
-  const activeItemIndex = Math.max(items.findIndex(item => item.props.isActive), 0 // default to the first item if none is marked as active
-  );
-
-  const getItemProps = index => {
-    var _items$index;
-
-    const {
-      onPress,
-      href,
-      hrefAttrs,
-      variant,
-      tokens
-    } = ((_items$index = items[index]) === null || _items$index === void 0 ? void 0 : _items$index.props) ?? {};
-    return {
-      onPress,
-      href,
-      hrefAttrs,
-      variant,
-      tokens
-    };
-  };
-
-  const windowSize = truncateAbove > 4 ? 3 : 1;
-  const truncateEnabled = items.length > truncateAbove;
-  const truncateWindowStart = windowSize;
-  const truncateWindowEnd = items.length - 1 - windowSize; // basically how many items next to the currently active one do we want to render
-
-  const activeWindowStart = activeItemIndex - (windowSize - 1) / 2;
-  const activeWindowEnd = activeItemIndex + (windowSize - 1) / 2;
-  const isFirstActive = activeItemIndex === 0;
-  const isLastActive = activeItemIndex === items.length - 1; // start truncating when the active item is within the truncate window
-
-  const isLeftTruncated = truncateEnabled && activeItemIndex >= truncateWindowStart;
-  const isRightTruncated = truncateEnabled && activeItemIndex <= truncateWindowEnd;
-
-  function shouldRenderEllipsis(itemIndex) {
-    const isNextToFirst = itemIndex === 1;
-    const isNextToLast = itemIndex === items.length - 2;
-    return isLeftTruncated && isNextToFirst || isRightTruncated && isNextToLast;
-  }
-
-  function shouldRenderButton(itemIndex) {
-    const isFirst = itemIndex === 0;
-    const isLast = itemIndex === items.length - 1;
-    const isInActiveWindow = itemIndex >= activeWindowStart && itemIndex <= activeWindowEnd;
-    return isFirst || isLast || isInActiveWindow || !isLeftTruncated && itemIndex <= truncateWindowStart || !isRightTruncated && itemIndex >= truncateWindowEnd;
-  }
-
-  return {
-    showPrevious: !isFirstActive,
-    showNext: !isLastActive,
-    shouldRenderButton,
-    shouldRenderEllipsis,
-    isItemActive: itemIndex => itemIndex === activeItemIndex,
-    getItemProps,
-    nextItemProps: getItemProps(activeItemIndex + 1),
-    previousItemProps: getItemProps(activeItemIndex - 1)
-  };
-}
-
-export default usePagination;

package/lib-module/Progress/Progress.js

@@ -1,85 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View";
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-const selectProgressStyles = ({
-  backgroundColor,
-  borderWidth,
-  borderColor,
-  borderRadius,
-  height
-}) => ({
-  backgroundColor,
-  borderWidth,
-  borderColor,
-  borderRadius,
-  height
-});
-/**
- * The `Progress` is a container for displaying one or several `ProgressBar`s.
- *
- * ## Props
- *
- * - Use `children` prop to pass one or multiple `ProgressBar`s. Note that in case of stacked progress bars
- *   each next will be displayed on top of the previous one.
- *
- * ## Tokens
- *
- * - Use the following tokens to customize the appearance:
- *   - `backgroundColor` for the background color of the progress container,
- *   - `borderColor` to control the color of the border,
- *   - `borderRadius` for the rounded corners,
- *   - `borderWidth` to change the border width.
- *   - `height` to control the height of the progress bars displayed within the progress bar container.
- *
- * ## Variants
- *
- * - Use the `size` variant to control the height of your progress bars:  passing `'mini'` will make your
- *   progress bar container narrower.
- *
- * ## Usability and A11y guidelines
- *
- * `Progress` component accepts the standard accessibility properties, however it's more important to make sure
- * its children (instances of `ProgressBar`) receive the accessibility properties specific to the `progressbar`
- * role.
- *
- */
-
-
-const Progress = /*#__PURE__*/forwardRef(({
-  children,
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
-  const themeTokens = useThemeTokens('Progress', tokens, variant);
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: selectProgressStyles(themeTokens),
-    ...selectProps(rest),
-    children: children
-  });
-});
-Progress.displayName = 'Progress';
-Progress.propTypes = { ...selectedSystemPropTypes,
-
-  /**
-   * Use the `children` prop to supply one or several `ProgressBar`s.
-   */
-  children: PropTypes.node.isRequired,
-
-  /**
-   * Progress tokens.
-   */
-  tokens: getTokensPropType('Progress'),
-
-  /**
-   * Progress variant.
-   */
-  variant: variantProp.propType
-};
-export default Progress;

package/lib-module/Progress/ProgressBar.js

@@ -1,134 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import Platform from "react-native-web/dist/exports/Platform";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import View from "react-native-web/dist/exports/View";
-import ProgressBarBackground from './ProgressBarBackground';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-const selectBarStyles = ({
-  backgroundColor,
-  borderRadius,
-  outlineWidth,
-  outlineColor
-}, percentage) => ({
-  backgroundColor,
-  borderRadius,
-  outlineWidth,
-  outlineColor,
-  width: `${percentage}%`
-});
-/**
- * The `ProgressBar` is a visual representation of linear progression.
- * It provides simple but important information at a quick glance.
- *
- * ## Props
- *
- * - Use `percentage` prop to indicate completion
- *
- * ## Tokens
- *
- * - Use the following tokens to customize the appearance:
- *   - `backgroundColor` for the background color of the progress bar,
- *   - `borderRadius` for the rounded corners,
- *   - `outlineColor` to control the color of the border (outline),
- *   - `outlineWidth` to change the outline width.
- *
- * ## Variants
- *
- * - Use the following variants to render specific types of progress bars:
- *   - `negative`: set to `true` if you wish to use the negative theming for progress bar filling,
- *   - `inactive`: set to `true` if you wish to style the progress bar as inactive.
- *
- * ## Usability and A11y guidelines
- *
- * `ProgressBar` component accepts all the standard accessibility properties including the ones that
- * are specific to the `progressbar` role. By default the following props are used:
- *
- * - `accessibilityRole` (`role`): `progressbar`,
- * - `accessibilityValue.min` (`aria-valuemin`): `0`,
- * - `accessibilityValue.max` (`aria-valuemax`): `100`,
- * - `accessibilityValue.now` (`aria-valuenow`): `percentage`,
- * - `accessibilityValue.text` (`aria-valuetext`): `%{percentage}%`,
- *
- */
-
-
-const ProgressBar = /*#__PURE__*/forwardRef(({
-  children = null,
-  percentage = 0,
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
-  const themeTokens = useThemeTokens('ProgressBar', tokens, variant);
-
-  if (percentage < 0) {
-    throw new Error('ProgressBar: `percentage` must be a positive number');
-  } else if (percentage > 100) {
-    throw new Error('ProgressBar: `percentage` cannot exceed 100');
-  }
-
-  const selectedProps = selectProps({
-    accessibilityRole: 'progressbar',
-    accessibilityValue: {
-      min: 0,
-      max: 100,
-      now: percentage,
-      text: `${percentage}%`
-    },
-    ...rest
-  });
-  return percentage > 0 ? /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: [staticStyles.bar, selectBarStyles(themeTokens, percentage)],
-    ...selectedProps,
-    children: children ?? /*#__PURE__*/_jsx(ProgressBarBackground, {
-      variant: variant
-    })
-  }) : null;
-});
-ProgressBar.displayName = 'ProgressBar';
-ProgressBar.propTypes = { ...selectedSystemPropTypes,
-
-  /**
-   * Optional children that can be used to customize the progress bar filling.
-   */
-  children: PropTypes.node,
-
-  /**
-   * Accessibility label for the progress bar.
-   */
-  accessibilityLabel: PropTypes.string.isRequired,
-
-  /**
-   * Percentage of completion.
-   */
-  percentage: PropTypes.number,
-
-  /**
-   * Progress bar tokens.
-   */
-  tokens: getTokensPropType('ProgressBar'),
-
-  /**
-   * Progress bar variant.
-   */
-  variant: variantProp.propType
-};
-export default ProgressBar;
-const staticStyles = StyleSheet.create({
-  bar: {
-    height: '100%',
-    overflow: 'hidden',
-    position: 'absolute',
-    ...Platform.select({
-      web: {
-        outlineStyle: 'solid'
-      }
-    })
-  }
-});

package/lib-module/Progress/ProgressBarBackground.js

@@ -1,41 +0,0 @@
-import React, { forwardRef } from 'react';
-import ImageBackground from "react-native-web/dist/exports/ImageBackground";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import { variantProp } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const inactiveBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='DisabledProgress7' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23B2B9BF'%3E%3C/rect%3E%3Ccircle cx='4' cy='4' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='0' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='0' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3Ccircle cx='8' cy='8' r='2' fill='%23676E73' stroke='%23676E73' stroke-width='0'%3E%3C/circle%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23DisabledProgress7");'%3E%3C/path%3E%3C/svg%3E`;
-const negativeBackground = `%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='24'%3E%3Cdefs%3E%3Cpattern id='NegativeProgress6' patternUnits='userSpaceOnUse' width='8' height='8'%3E%3Crect width='8' height='8' fill='%23C12335'%3E%3C/rect%3E%3Cpath d='M 0,8 l 8,-8 M -2,2 l 4,-4 M 6,10 l 4,-4' stroke-width='2' shape-rendering='auto' stroke='%23e7adb4' stroke-linecap='square'%3E%3C/path%3E%3C/pattern%3E%3C/defs%3E%3Cpath d='M 0 0 L 0 140 L 2000 2000 L 2000 0 Z' style='fill: url("%23NegativeProgress6");'%3E%3C/path%3E%3C/svg%3E`;
-const ProgressBarBackground = /*#__PURE__*/forwardRef(({
-  variant
-}, ref) => {
-  let source = null;
-
-  if (variant !== null && variant !== void 0 && variant.inactive) {
-    source = inactiveBackground;
-  } else if (variant !== null && variant !== void 0 && variant.negative) {
-    source = negativeBackground;
-  } else {
-    return null;
-  }
-
-  return /*#__PURE__*/_jsx(ImageBackground, {
-    ref: ref,
-    source: {
-      uri: `data:image/svg+xml,${source}`
-    },
-    style: staticStyles.imageBackground
-  });
-});
-ProgressBarBackground.displayName = 'ProgressBarBackground';
-ProgressBarBackground.propTypes = {
-  /**
-   * Progress bar variant.
-   */
-  variant: variantProp.propType
-};
-export default ProgressBarBackground;
-const staticStyles = StyleSheet.create({
-  imageBackground: {
-    height: '100%'
-  }
-});

package/lib-module/Progress/index.js

@@ -1,4 +0,0 @@
-import Progress from './Progress';
-import ProgressBar from './ProgressBar';
-Progress.Bar = ProgressBar;
-export default Progress;