@telus-uds/components-base 1.3.0 → 1.5.0

package/lib-module/Pagination/SideButton.js

@@ -0,0 +1,103 @@
+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

@@ -0,0 +1,18 @@
+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

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

package/lib-module/Pagination/usePagination.js

@@ -0,0 +1,72 @@
+/**
+ * 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

@@ -0,0 +1,85 @@
+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

@@ -0,0 +1,134 @@
+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

@@ -0,0 +1,41 @@
+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

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