@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/FlexGrid/helpers/index.js

@@ -1,15 +0,0 @@
-const applyInheritance = sizes => {
-  let prevSize;
-  return sizes.map((size, index) => {
-    if (size !== undefined) {
-      prevSize = size;
-      return size;
-    }
-    if (index) {
-      const value = prevSize;
-      return value;
-    }
-    return undefined;
-  });
-};
-export default applyInheritance;

package/lib-module/FlexGrid/index.js

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

package/lib-module/FlexGrid/providers/GutterContext.js

@@ -1,3 +0,0 @@
-import React from 'react';
-const GutterContext = /*#__PURE__*/React.createContext(false);
-export default GutterContext;

package/lib-module/Footnote/Footnote.js

@@ -1,317 +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 Dimensions from "react-native-web/dist/exports/Dimensions";
-import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWithoutFeedback";
-import Modal from "react-native-web/dist/exports/Modal";
-import View from "react-native-web/dist/exports/View";
-import SafeAreaView from "react-native-web/dist/exports/SafeAreaView";
-import ScrollView from "react-native-web/dist/exports/ScrollView";
-import defaultDictionary from './dictionary';
-import { getTokensPropType, htmlAttrs, selectSystemProps, useCopy, viewProps } from '../utils';
-import { useViewport } from '../ViewportProvider';
-import { useTheme, useThemeTokens } from '../ThemeProvider';
-import Typography from '../Typography';
-import Icon from '../Icon';
-import OrderedList from '../OrderedList';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
-const selectFootnoteStyle = _ref => {
-  let {
-    screenHeight,
-    footnoteBackground,
-    isVisible,
-    footnoteBorderTopSizeMd,
-    footnoteBorderColorMd
-  } = _ref;
-  return {
-    left: 0,
-    backgroundColor: footnoteBackground,
-    display: isVisible ? 'flex' : 'none',
-    height: screenHeight,
-    borderTopColor: footnoteBorderColorMd,
-    borderTopWidth: footnoteBorderTopSizeMd
-  };
-};
-const selectFootnoteHeaderContentStyle = _ref2 => {
-  let {
-    footnoteHeaderPaddingTop,
-    footnoteHeaderPaddingBottom,
-    footnoteHeaderPaddingRight,
-    footnoteHeaderPaddingLeft,
-    headerMargin
-  } = _ref2;
-  return {
-    paddingTop: footnoteHeaderPaddingTop,
-    paddingBottom: footnoteHeaderPaddingBottom,
-    paddingRight: footnoteHeaderPaddingRight,
-    paddingLeft: footnoteHeaderPaddingLeft,
-    marginRight: headerMargin
-  };
-};
-const selectFootnoteCloseButtonStyle = _ref3 => {
-  let {
-    closeButtonBorderSize,
-    closeButtonBorderColor,
-    closeButtonHeight,
-    closeButtonBackgroundColor,
-    closeButtonMarginTop,
-    closeButtonMarginRight,
-    closeButtonMarginBottom,
-    closeButtonMarginLeft,
-    closeButtonWidth
-  } = _ref3;
-  return {
-    backgroundColor: closeButtonBackgroundColor,
-    borderWidth: closeButtonBorderSize,
-    borderColor: closeButtonBorderColor,
-    height: closeButtonHeight,
-    marginTop: closeButtonMarginTop,
-    marginRight: closeButtonMarginRight,
-    marginBottom: closeButtonMarginBottom,
-    marginLeft: closeButtonMarginLeft,
-    width: closeButtonWidth
-  };
-};
-const selectFootnoteBodyStyle = _ref4 => {
-  let {
-    maxWidth,
-    footnoteBodyBackground,
-    footnoteBodyPaddingTop,
-    footnoteBodyPaddingRight,
-    footnoteBodyPaddingBottom,
-    footnoteBodyPaddingLeft,
-    screenWidth
-  } = _ref4;
-  return {
-    maxWidth,
-    backgroundColor: footnoteBodyBackground,
-    paddingTop: footnoteBodyPaddingTop,
-    paddingRight: footnoteBodyPaddingRight * 2,
-    paddingBottom: footnoteBodyPaddingBottom,
-    paddingLeft: footnoteBodyPaddingLeft,
-    width: screenWidth
-  };
-};
-const selectCustomContentFontStyle = _ref5 => {
-  let {
-    listItemColor,
-    listItemFontSize,
-    listItemLineHeight,
-    listItemPaddingLeft,
-    listItemFontName,
-    listItemFontWeight
-  } = _ref5;
-  return {
-    fontSize: listItemFontSize,
-    lineHeight: listItemLineHeight * listItemFontSize,
-    paddingLeft: listItemPaddingLeft,
-    color: listItemColor,
-    fontName: listItemFontName,
-    fontWeight: listItemFontWeight
-  };
-};
-
-/**
- * Use `Footnote` to display a single legal content.
- *
- * ## Usage Criteria
- *
- * - Use `Footnote` to display a single legal statement
- * - Display on top of all UI, including other sticky elements such as Cart Summary
- * - Dismiss by clicking on the close button, clicking anywhere outside of the `Footnote`
- * - Use copy to set language, ‘en’ for English or ‘fr’ for French
- *
- * ## Accessibility requirements
- *
- * - Only one instance of `Footnote` should display at a time
- * - Place `Footnote` as the last element in the body or main
- * - When `Footnote` is open, the inert prop must be set on all children of body excluding the Footnote
- * - When `Footnote` is closed, focus must return to the initiating element
- */
-const Footnote = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
-  let {
-    copy = 'en',
-    number = undefined,
-    content = undefined,
-    onClose,
-    isOpen = false,
-    tokens,
-    variant = {},
-    dictionary = defaultDictionary,
-    ...rest
-  } = _ref6;
-  const viewport = useViewport();
-  const themeTokens = useThemeTokens('Footnote', tokens, variant, {
-    viewport
-  });
-  const themeOptions = useTheme();
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const [isVisible, setIsVisible] = React.useState(false);
-  const screenHeight = Dimensions.get('screen').height;
-  const screenWidth = Dimensions.get('screen').width;
-  const getFootnoteBodyContent = React.useCallback(() => {
-    if (!number || !content) {
-      return null;
-    }
-    if ( /*#__PURE__*/React.isValidElement(content)) {
-      return /*#__PURE__*/_jsx(View, {
-        style: selectCustomContentFontStyle(themeTokens),
-        children: content
-      });
-    }
-    return /*#__PURE__*/_jsx(OrderedList, {
-      start: number,
-      children: /*#__PURE__*/_jsx(OrderedList.Item, {
-        children: /*#__PURE__*/_jsx(Text, {
-          style: selectCustomContentFontStyle(themeTokens),
-          children: content
-        })
-      }, number)
-    });
-  }, [content, number, themeTokens]);
-  React.useEffect(() => {
-    if (isOpen) {
-      setIsVisible(true);
-    }
-  }, [isOpen]);
-  const closeFootnote = React.useCallback((event, options) => {
-    onClose(event, options);
-    setIsVisible(false);
-  }, [onClose]);
-  const handleClose = event => closeFootnote(event, {
-    returnFocus: true
-  });
-  return /*#__PURE__*/_jsx(View, {
-    ...selectProps(rest),
-    ref: ref,
-    children: /*#__PURE__*/_jsx(Modal, {
-      visible: isVisible,
-      animationType: "slide",
-      children: /*#__PURE__*/_jsx(SafeAreaView, {
-        style: staticStyles.container,
-        children: /*#__PURE__*/_jsx(ScrollView, {
-          style: selectFootnoteStyle({
-            screenHeight,
-            isVisible,
-            ...themeTokens
-          }),
-          children: /*#__PURE__*/_jsxs(View, {
-            style: staticStyles.content,
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: [selectFootnoteHeaderContentStyle(themeTokens), staticStyles.headerContent],
-              children: [/*#__PURE__*/_jsx(Typography, {
-                tokens: {
-                  fontSize: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.headerFontSize,
-                  lineHeight: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.headerLineHeight
-                },
-                variant: {
-                  size: 'h4'
-                },
-                children: getCopy('heading')
-              }), /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
-                onPress: handleClose,
-                accessibilityLabel: getCopy('close'),
-                children: /*#__PURE__*/_jsx(View, {
-                  style: [selectFootnoteCloseButtonStyle(themeTokens), staticStyles.closeButton],
-                  children: /*#__PURE__*/_jsx(Icon, {
-                    icon: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.closeIcon,
-                    tokens: {
-                      size: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.closeButtonIconSize
-                    }
-                  })
-                })
-              })]
-            }), /*#__PURE__*/_jsx(View, {
-              style: selectFootnoteBodyStyle({
-                maxWidth: themeOptions.contentMaxWidth,
-                screenWidth,
-                ...themeTokens
-              }),
-              children: getFootnoteBodyContent()
-            })]
-          })
-        })
-      })
-    })
-  });
-});
-Footnote.displayName = 'Footnote';
-const copyShape = PropTypes.shape({
-  close: PropTypes.string.isRequired,
-  heading: PropTypes.string.isRequired
-});
-
-// If a language dictionary entry is provided, it must contain every key
-const dictionaryContentShape = PropTypes.shape({
-  a11yLabel: PropTypes.string.isRequired,
-  close: PropTypes.string.isRequired,
-  heading: PropTypes.string.isRequired
-});
-Footnote.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('Footnote'),
-  /**
-   * The content.
-   */
-  content: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  /**
-   * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
-   * To provide your own, pass a JSON object with the keys `heading` and `close`.
-   */
-  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), copyShape]),
-  /**
-   * A boolean flag used hide or show the `Footnote`. Set to `true` to open the `Footnote`.
-   */
-  isOpen: PropTypes.bool,
-  /**
-   * The number, must match the number of the `FootnoteLink` that initiated the `Footnote`.
-   */
-  number: PropTypes.number,
-  /**
-   * A callback function to handle the closing of the footnote.
-   *
-   * @param {SyntheticEvent} event The React `SyntheticEvent`
-   * @param {Object} options Custom options
-   * @param {boolean} options.returnFocus Should the `Footnote` return focus on close
-   */
-  onClose: PropTypes.func.isRequired,
-  /**
-   * Override the default dictionary, by passing the complete dictionary object for `en` and `fr`
-   */
-  dictionary: PropTypes.shape({
-    en: dictionaryContentShape,
-    fr: dictionaryContentShape
-  })
-};
-export default Footnote;
-const staticStyles = StyleSheet.create({
-  container: {
-    flex: 1
-  },
-  content: {
-    marginLeft: 'auto',
-    marginRight: 'auto',
-    left: 0,
-    right: 0,
-    maxWidth: 1200,
-    paddingBottom: 100
-  },
-  headerContent: {
-    alignItems: 'center',
-    display: 'flex',
-    flexDirection: 'row',
-    justifyContent: 'space-between'
-  },
-  closeButton: {
-    alignItems: 'center',
-    borderRadius: 50,
-    display: 'flex',
-    justifyContent: 'center'
-  }
-});

package/lib-module/Footnote/FootnoteLink.js

@@ -1,107 +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 Platform from "react-native-web/dist/exports/Platform";
-import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWithoutFeedback";
-import dictionary from './dictionary';
-import { htmlAttrs, selectSystemProps, useCopy, viewProps, wrapStringsInText, variantProp } from '../utils';
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
-
-// The top property varies between devices due to how devices render the viewport.
-const selectTextStyle = _ref => {
-  let {
-    fontSize,
-    lineHeight
-  } = _ref;
-  return {
-    fontSize,
-    lineHeight: lineHeight !== 1 ? lineHeight : fontSize * 2,
-    ...Platform.select({
-      ios: {
-        top: -fontSize / 2
-      },
-      android: {
-        top: fontSize / 4
-      },
-      web: {
-        top: -fontSize / 2.8
-      }
-    })
-  };
-};
-const FootnoteLink = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    copy = 'en',
-    content = [],
-    onClick,
-    tokens,
-    variant = {},
-    ...rest
-  } = _ref2;
-  const themeTokens = useThemeTokens('FootnoteLink', tokens, variant);
-  const textStyles = applyTextStyles(themeTokens);
-  const numbers = Array.isArray(content) ? content : [content];
-  const refs = numbers.map(() => /*#__PURE__*/React.createRef());
-  const handleOnClick = index => {
-    onClick(numbers[index], refs[index]);
-  };
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: staticStyles.container,
-    children: numbers.map((num, index) => /*#__PURE__*/_jsx(View, {
-      accessibilityLabel: getCopy('a11yLabel'),
-      ref: refs[index],
-      ...selectProps(rest),
-      children: /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
-        onPress: handleOnClick,
-        accessibilityRole: "button",
-        children: wrapStringsInText(`${num}${index !== numbers.length - 1 ? ',' : ''}`, {
-          style: {
-            ...textStyles,
-            ...staticStyles.text,
-            ...selectTextStyle(themeTokens)
-          }
-        })
-      })
-    }, num))
-  });
-});
-FootnoteLink.displayName = 'FootnoteLink';
-const copyShape = PropTypes.shape({
-  a11yLabel: PropTypes.string.isRequired
-});
-FootnoteLink.propTypes = {
-  ...selectedSystemPropTypes,
-  variant: variantProp.propType,
-  /**
-   * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
-   * To provide your own, pass a JSON object with the key `a11yLabel`.
-   */
-  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), copyShape]),
-  /**
-   * The footnote number, or multiple numbers if passed as an array.
-   * If using an array, a comma-separated group of numbers will be rendered as superscript.
-   */
-  content: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number), PropTypes.string, PropTypes.arrayOf(PropTypes.string)]).isRequired,
-  /**
-   * A callback function to handle the click of a FootnoteLink.
-   */
-  onClick: PropTypes.func.isRequired
-};
-export default FootnoteLink;
-const staticStyles = StyleSheet.create({
-  text: {
-    position: 'relative',
-    textDecorationLine: 'underline'
-  },
-  container: {
-    flexDirection: 'row'
-  }
-});

package/lib-module/Footnote/dictionary.js

@@ -1,12 +0,0 @@
-export default {
-  en: {
-    a11yLabel: 'Read legal footnote',
-    close: 'close',
-    heading: 'Terms and conditions'
-  },
-  fr: {
-    a11yLabel: 'Lire la note de bas de page légale',
-    close: 'fermer',
-    heading: 'Modalités et conditions'
-  }
-};

package/lib-module/Footnote/index.js

@@ -1,4 +0,0 @@
-import Footnote from './Footnote';
-import FootnoteLink from './FootnoteLink';
-Footnote.Link = FootnoteLink;
-export default Footnote;

package/lib-module/HorizontalScroll/HorizontalScroll.js

@@ -1,165 +0,0 @@
-import React 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 { validateThemeTokens, resolveThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensSetPropType, selectSystemProps, selectTokens, viewProps } from '../utils';
-import ScrollViewEnd from './ScrollViewEnd';
-import { getItemPositionScrollTarget, itemPositionsPropType } from './itemPositions';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-const tokenKeys = ['nextIcon', 'previousIcon', 'gutter', 'borderBottomWidth', 'borderBottomColor', 'buttonClearance'];
-export const selectHorizontalScrollTokens = (themeTokens, prefix) => selectTokens(tokenKeys, themeTokens, prefix);
-
-/**
- * Base component that scrolls horizontally and displays left and right buttons if
- * there is content to the left and the right which can be scrolled to.
- *
- * @TODO revisit `ScrollButton` after IconButton is stable.
- */
-const HorizontalScroll = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    ScrollButton,
-    tokens,
-    itemPositions,
-    children,
-    ...rest
-  } = _ref;
-  const {
-    nextIcon,
-    previousIcon,
-    gutter,
-    borderBottomWidth,
-    borderBottomColor,
-    buttonClearance = 0
-  } = validateThemeTokens(resolveThemeTokens(tokens),
-  // Allow missing icons
-  getTokensSetPropType(tokenKeys, {
-    partial: true
-  }), 'HorizontalScroll');
-  const [containerWidth, setContainerWidth] = React.useState(0);
-  const [contentWidth, setContentWidth] = React.useState(0);
-  const handleContentWidth = width => setContentWidth(width);
-  const handleContainerLayout = _ref2 => {
-    let {
-      nativeEvent: {
-        layout: {
-          width
-        }
-      }
-    } = _ref2;
-    return setContainerWidth(width);
-  };
-
-  // Update the scroll position only when scrolling actions ends to minimally rerender
-  // and update which buttons are conditionally rendered.
-  const [scrollOffset, setScrollOffset] = React.useState(0);
-  const handleScrollEnd = _ref3 => {
-    let {
-      nativeEvent: {
-        contentOffset: {
-          x
-        }
-      }
-    } = _ref3;
-    setScrollOffset(x);
-  };
-  const scrollMax = Math.max(0, contentWidth - containerWidth);
-  const showNextButton = scrollOffset < scrollMax;
-  const showPreviousButton = scrollOffset > 0;
-  const scrollRef = React.useRef(null);
-  const scrollTo = targetX => {
-    var _scrollRef$current;
-    if (typeof ((_scrollRef$current = scrollRef.current) === null || _scrollRef$current === void 0 ? void 0 : _scrollRef$current.scrollTo) === 'function') {
-      const x = getItemPositionScrollTarget(targetX, scrollMax, itemPositions.positions, buttonClearance);
-      scrollRef.current.scrollTo({
-        x,
-        animated: true
-      });
-      if (Platform.OS === 'android') {
-        // React Native calls onScrollMomentumEnd after scrollTo for iOS, but not Android.
-        // See https://github.com/facebook/react-native/issues/26661
-        // There's also no callback for when scrollTo finishes.
-        setTimeout(() => setScrollOffset(x), 300);
-      }
-    }
-  };
-  // Make scrollTo and relevant co-ordinates available to any component with an interest in itemPositions.
-  // ItemPositions is a mutable ref object intended to have its properties mutated without any rerenders.
-  /* eslint-disable-next-line no-param-reassign */
-  itemPositions.scrollTo = scrollTo;
-  /* eslint-disable-next-line no-param-reassign */
-  itemPositions.containerWidth = containerWidth;
-  /* eslint-disable-next-line no-param-reassign */
-  itemPositions.contentWidth = contentWidth;
-  /* eslint-disable-next-line no-param-reassign */
-  itemPositions.scrollOffset = scrollOffset;
-  const hasWidths = itemPositions.contentWidth > 0;
-  React.useEffect(() => {
-    if (hasWidths) itemPositions.setIsReady(true);
-    // itemPositions is a ref object so this should occur only when elements' widths are set in state
-  }, [hasWidths, itemPositions]);
-
-  // When scrolling, allow clearance around scroll buttons, so e.g. this...
-  // (<-) Item 5   Item 6   Item 7   Item 8   It(->)
-  // ...doesn't scroll like this with Item 9 never being properly visible:
-  // (<-)em 9   Item 10  Item 11  Item 12  Item (->)
-  const scrollDistance = containerWidth - buttonClearance * 2;
-  const scrollNext = () => scrollTo(scrollOffset + scrollDistance);
-  const scrollPrevious = () => scrollTo(scrollOffset - scrollDistance);
-
-  // On Web, being scrollable in one direction prevents overflow: visible in the other direction.
-  // Apply a fixed margin gutter that tab highlight effects can overhang without getting trimmed.
-  return /*#__PURE__*/_jsxs(View, {
-    ref: ref,
-    style: staticStyles.container,
-    children: [/*#__PURE__*/_jsx(ScrollViewEnd, {
-      onScrollEnd: handleScrollEnd,
-      ref: scrollRef,
-      horizontal: true,
-      onContentSizeChange: handleContentWidth,
-      onLayout: handleContainerLayout,
-      showsHorizontalScrollIndicator: false,
-      contentContainerStyle: [staticStyles.scrollContainer, {
-        borderBottomWidth,
-        borderBottomColor
-      }],
-      ...selectProps(rest),
-      children: children
-    }), showPreviousButton && /*#__PURE__*/_jsx(ScrollButton, {
-      icon: previousIcon,
-      onPress: scrollPrevious,
-      offset: gutter,
-      direction: "previous"
-    }), showNextButton && /*#__PURE__*/_jsx(ScrollButton, {
-      icon: nextIcon,
-      onPress: scrollNext,
-      offset: gutter,
-      direction: "next"
-    })]
-  });
-});
-HorizontalScroll.displayName = 'HorizontalScroll';
-const staticStyles = StyleSheet.create({
-  scrollContainer: {
-    // Gives inner container width from content, allowing it to exceed its container's width
-    alignSelf: 'flex-start',
-    flexGrow: 1
-  },
-  container: {
-    // Vertically center the ScrollButtons buttons
-    justifyContent: 'center'
-  }
-});
-HorizontalScroll.propTypes = {
-  ...selectedSystemPropTypes,
-  itemPositions: itemPositionsPropType,
-  ScrollButton: PropTypes.elementType,
-  tokens: getTokensSetPropType(tokenKeys, {
-    allowFunction: true
-  }),
-  children: PropTypes.node
-};
-export default HorizontalScroll;