@telus-uds/components-base 2.0.0 → 2.0.2

package/lib-module/List/ListItemMark.js

@@ -1,143 +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 { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsx as _jsx } from "react/jsx-runtime";
-export const tokenTypes = {
-  itemIconSize: PropTypes.number.isRequired,
-  itemIconColor: PropTypes.string.isRequired,
-  listGutter: PropTypes.number.isRequired,
-  iconMarginTop: PropTypes.number.isRequired
-};
-
-const selectItemIconTokens = _ref => {
-  let {
-    itemIconSize,
-    itemIconColor
-  } = _ref;
-  return {
-    size: itemIconSize,
-    color: itemIconColor
-  };
-};
-
-const selectSideItemContainerStyles = _ref2 => {
-  let {
-    listGutter,
-    iconMarginTop
-  } = _ref2;
-  return {
-    marginTop: iconMarginTop,
-    marginRight: listGutter
-  };
-}; // Align bullets with the top line of text the same way icons are aligned
-
-
-const selectBulletPositioningStyles = _ref3 => {
-  let {
-    itemIconSize
-  } = _ref3;
-  return {
-    width: itemIconSize,
-    height: itemIconSize
-  };
-};
-
-const selectBulletStyles = _ref4 => {
-  let {
-    itemBulletWidth,
-    itemBulletHeight,
-    itemBulletColor
-  } = _ref4;
-  return {
-    width: itemBulletWidth,
-    height: itemBulletHeight,
-    borderRadius: itemBulletHeight / 2,
-    backgroundColor: itemBulletColor
-  };
-};
-
-const selectBulletContainerStyles = _ref5 => {
-  let {
-    itemBulletContainerWidth,
-    itemBulletContainerAlign
-  } = _ref5;
-  return {
-    width: itemBulletContainerWidth,
-    alignItems: itemBulletContainerAlign
-  };
-};
-/**
- * Subcomponent used within ListItem and similar components for rendering bullets or icons
- * that sit alongside a ListIconContent in a { flexDirection: row } container.
- *
- * It's the responsibility of themes to make sure that the supplied tokens align the
- * icon or bullet nicely against the first line of text in a ListIconContent.
- */
-
-
-const ListItemMark = _ref6 => {
-  let {
-    icon,
-    iconColor,
-    iconSize,
-    tokens = {}
-  } = _ref6;
-
-  const IconComponent = icon || /*#__PURE__*/_jsx(_Fragment, {});
-
-  const themeTokens = typeof tokens === 'function' ? tokens() : tokens;
-  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
-
-  if (icon) {
-    const iconTokens = selectItemIconTokens(themeTokens);
-    return /*#__PURE__*/_jsx(View, {
-      style: sideItemContainerStyles,
-      children: /*#__PURE__*/_jsx(IconComponent, {
-        size: iconSize || iconTokens.size,
-        color: iconColor || iconTokens.color
-      })
-    });
-  }
-
-  const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
-  const itemBulletStyles = selectBulletStyles(themeTokens);
-  const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
-  return /*#__PURE__*/_jsx(View, {
-    style: [sideItemContainerStyles, itemBulletContainerStyles],
-    children: /*#__PURE__*/_jsx(View, {
-      style: [staticStyles.bulletPositioning, itemBulletPositioningStyles],
-      children: /*#__PURE__*/_jsx(View, {
-        style: itemBulletStyles,
-        testID: "unordered-item-bullet"
-      })
-    })
-  });
-};
-
-ListItemMark.propTypes = {
-  tokens: PropTypes.shape(tokenTypes).isRequired,
-
-  /**
-   * Renders side item icon
-   */
-  icon: PropTypes.elementType,
-
-  /**
-   * Will set display icon color
-   */
-  iconColor: PropTypes.string,
-
-  /**
-   * Allow the user define the icon size
-   */
-  iconSize: PropTypes.number
-};
-const staticStyles = StyleSheet.create({
-  bulletPositioning: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-export default ListItemMark;

package/lib-module/List/PressableListItemBase.js

@@ -1,114 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import ABBPropTypes from 'airbnb-prop-types';
-import Pressable from "react-native-web/dist/exports/Pressable";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Platform from "react-native-web/dist/exports/Platform";
-import { resolvePressableTokens, clickProps, linkProps, hrefAttrsProp, selectTokens, withLinkRouter } from '../utils';
-import ListItemBase from './ListItemBase';
-import ListItemContent from './ListItemContent';
-import ListItemMark from './ListItemMark';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-
-const selectPressableStyles = _ref => {
-  let {
-    backgroundColor,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom,
-    interItemMargin
-  } = _ref;
-  return {
-    backgroundColor,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom,
-    marginBottom: interItemMargin,
-    ...Platform.select({
-      web: {
-        outline: 'none'
-      }
-    })
-  };
-};
-
-const PressableListItemBase = /*#__PURE__*/forwardRef((_ref2, ref) => {
-  let {
-    href,
-    tokens,
-    icon,
-    children,
-    listItemRef,
-    ...rest
-  } = _ref2;
-  const {
-    onPress,
-    ...props
-  } = clickProps.toPressProps(rest);
-  const {
-    hrefAttrs,
-    rest: listItemProps
-  } = hrefAttrsProp.bundle(props);
-  const handlePress = linkProps.handleHref({
-    href,
-    onPress
-  });
-  const listItemTokens = selectTokens('List', typeof tokens === 'function' ? tokens() : tokens);
-  return /*#__PURE__*/_jsx(ListItemBase, {
-    ref: listItemRef,
-    tokens: listItemTokens,
-    ...listItemProps,
-    children: _ref3 => {
-      let {
-        isLastItem
-      } = _ref3;
-
-      const getTokens = pressableState => resolvePressableTokens(tokens, pressableState, {
-        last: isLastItem
-      });
-
-      const getPressableStyle = pressableState => [staticStyles.itemContainer, selectPressableStyles(getTokens(pressableState))];
-
-      return /*#__PURE__*/_jsx(Pressable, {
-        onPress: handlePress,
-        href: href,
-        hrefAttrs: hrefAttrs,
-        style: getPressableStyle,
-        ref: ref,
-        children: pressableState => {
-          const themeTokens = getTokens(pressableState);
-          return /*#__PURE__*/_jsxs(_Fragment, {
-            children: [/*#__PURE__*/_jsx(ListItemMark, {
-              icon: icon,
-              tokens: themeTokens
-            }), /*#__PURE__*/_jsx(ListItemContent, {
-              tokens: themeTokens,
-              children: typeof children === 'function' ? children(pressableState) : children
-            })]
-          });
-        }
-      });
-    }
-  });
-});
-PressableListItemBase.displayName = 'PressableListItemBase';
-const staticStyles = StyleSheet.create({
-  itemContainer: {
-    flexDirection: 'row',
-    flex: 1
-  }
-});
-PressableListItemBase.propTypes = { ...withLinkRouter.propTypes,
-  href: PropTypes.string,
-  onPress: PropTypes.func,
-  // eslint-disable-next-line react/forbid-prop-types
-  tokens: PropTypes.any,
-  icon: PropTypes.elementType,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  listItemRef: ABBPropTypes.ref()
-};
-export default withLinkRouter(PressableListItemBase);

package/lib-module/List/index.js

@@ -1,5 +0,0 @@
-import List from './List';
-import ListItem from './ListItem';
-List.Item = ListItem;
-export { List as ListBase, ListItem };
-export default List;

package/lib-module/Modal/Modal.js

@@ -1,225 +0,0 @@
-import React, { forwardRef } from 'react';
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import TouchableWithoutFeedback from "react-native-web/dist/exports/TouchableWithoutFeedback";
-import View from "react-native-web/dist/exports/View";
-import NativeModal from "react-native-web/dist/exports/Modal";
-import Platform from "react-native-web/dist/exports/Platform";
-import PropTypes from 'prop-types';
-import { applyShadowToken, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, copyPropTypes, getTokensPropType, selectSystemProps, useCopy, variantProp, viewProps, selectTokens } from '../utils';
-import { useViewport } from '../ViewportProvider';
-import IconButton from '../IconButton';
-import dictionary from './dictionary';
-import useScrollBlocking from '../utils/useScrollBlocking';
-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 {
-    containerPaddingLeft,
-    containerPaddingRight,
-    containerPaddingTop,
-    containerPaddingBottom,
-    maxWidth,
-    height
-  } = _ref;
-  return {
-    height,
-    maxWidth,
-    paddingLeft: containerPaddingLeft,
-    paddingRight: containerPaddingRight,
-    paddingTop: containerPaddingTop,
-    paddingBottom: containerPaddingBottom
-  };
-};
-
-const selectModalStyles = _ref2 => {
-  let {
-    backgroundColor,
-    borderRadius,
-    height,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom,
-    shadow
-  } = _ref2;
-  return {
-    backgroundColor,
-    borderRadius,
-    height,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom,
-    ...applyShadowToken(shadow)
-  };
-};
-
-const selectBackdropStyles = _ref3 => {
-  let {
-    backdropColor,
-    backdropOpacity
-  } = _ref3;
-  return {
-    backgroundColor: backdropColor,
-    opacity: backdropOpacity
-  };
-};
-
-const selectCloseButtonContainerStyles = _ref4 => {
-  let {
-    paddingRight,
-    paddingTop
-  } = _ref4;
-  return {
-    paddingRight,
-    paddingTop
-  };
-};
-/**
- * A modal window is a secondary window that opens on top of the main one.
- * Users have to interact with it before they can carry out their task and return to the main window.
- * Use to reveal additional information to a user after they have performed an explicit interaction.
- * They are a strongly discouraged pattern; it's preferred to have all relevant information within a page,
- * and irrelevant information either linked externally or omitted.
- *
- * - Must only appear after a customer interaction, not on page load or any other circumstance
- * - Open a modal based on explicit customer action e.g. clicking on a button/link/form field
- * - Only one modal should be "current" at any time
- * - Read [WebAIM's documentation](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) to create accessible modals
- * - Don’t use modals to reinforce or repeat information already available in the parent page or view
- * - Don’t use modals consecutively
- */
-
-
-const Modal = /*#__PURE__*/forwardRef((_ref5, ref) => {
-  let {
-    children,
-    isOpen,
-    onClose,
-    maxWidth,
-    tokens,
-    variant,
-    copy,
-    closeButton,
-    ...rest
-  } = _ref5;
-  const viewport = useViewport();
-  const themeTokens = useThemeTokens('Modal', tokens, variant, {
-    viewport,
-    maxWidth
-  });
-  const modalRef = useScrollBlocking(isOpen);
-  const {
-    closeIcon: CloseIconComponent
-  } = themeTokens;
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const closeLabel = getCopy('closeButton');
-
-  const handleClose = () => {
-    if (typeof onClose === 'function') onClose();
-  };
-
-  const handleKeyUp = event => {
-    if (event.key === 'Escape') onClose();
-  }; // Show the custom react node passed to `closedButton` or the default close button if `closeButton` is `undefined`.
-  // Hide the close button if `closeButton` is `null`.
-
-
-  const showCloseButton = closeButton !== null;
-
-  if (!isOpen) {
-    return null;
-  }
-
-  return /*#__PURE__*/_jsx(NativeModal, {
-    transparent: true,
-    ...selectProps(rest),
-    children: /*#__PURE__*/_jsxs(View, {
-      style: [staticStyles.positioningContainer],
-      ref: modalRef,
-      children: [/*#__PURE__*/_jsx(View, {
-        style: [staticStyles.sizingContainer, selectContainerStyles(themeTokens)],
-        pointerEvents: "box-none" // don't capture backdrop press events
-        ,
-        children: /*#__PURE__*/_jsxs(View, {
-          ref: ref,
-          style: [staticStyles.modal, selectModalStyles(themeTokens)],
-          onKeyUp: handleKeyUp,
-          children: [showCloseButton && /*#__PURE__*/_jsx(View, {
-            style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
-            children: closeButton || /*#__PURE__*/_jsx(IconButton, {
-              onPress: handleClose,
-              icon: CloseIconComponent,
-              accessibilityRole: "button",
-              accessibilityLabel: closeLabel,
-              tokens: selectTokens('IconButton', themeTokens, 'close')
-            })
-          }), children]
-        })
-      }), /*#__PURE__*/_jsx(TouchableWithoutFeedback, {
-        onPress: handleClose,
-        children: /*#__PURE__*/_jsx(View, {
-          style: [staticStyles.backdrop, selectBackdropStyles(themeTokens)]
-        })
-      })]
-    })
-  });
-});
-Modal.displayName = 'Modal';
-Modal.propTypes = { ...selectedSystemPropTypes,
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
-  copy: copyPropTypes,
-  isOpen: PropTypes.bool,
-  onClose: PropTypes.func,
-  maxWidth: PropTypes.bool,
-  tokens: getTokensPropType('Modal'),
-  variant: variantProp.propType,
-
-  /**
-   * Pass a react node to override the default close button or pass `null` to hide the close button.
-   */
-  closeButton: PropTypes.node
-};
-export default Modal;
-const staticStyles = StyleSheet.create({
-  backdrop: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    zIndex: -1,
-    ...Platform.select({
-      web: {
-        cursor: 'pointer'
-      }
-    })
-  },
-  positioningContainer: {
-    flexBasis: '100%',
-    alignItems: 'center',
-    justifyContent: 'center'
-  },
-  sizingContainer: {
-    maxHeight: '100%',
-    // so that the container can expand up to the full viewport height
-    width: '100%' // ensure that the modal actually expands to the set maxWidth
-
-  },
-  modal: {
-    maxHeight: '100%' // so that the modal can expand vertically up to the  sizing container's height (exclusive of its vertical padding)
-
-  },
-  closeButtonContainer: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    zIndex: 1
-  }
-});

package/lib-module/Modal/dictionary.js

@@ -1,9 +0,0 @@
-export default {
-  en: {
-    // English text from TDS Community `Modal`
-    closeButton: 'Close'
-  },
-  fr: {
-    closeButton: 'Fermer'
-  }
-};

package/lib-module/Modal/index.js

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

package/lib-module/MultiSelectFilter/ModalOverlay.js

@@ -1,112 +0,0 @@
-import React, { forwardRef } 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 { Portal } from '@gorhom/portal';
-import { copyPropTypes, getTokensPropType, selectTokens, useCopy, variantProp } from '../utils';
-import { useViewport } from '../ViewportProvider';
-import { useThemeTokens } from '../ThemeProvider';
-import dictionary from './dictionary';
-import Card from '../Card';
-import IconButton from '../IconButton';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-const staticStyles = StyleSheet.create({
-  positioner: {
-    flex: 1,
-    // Grow to maxWidth when possible, shrink when not possible
-    position: 'absolute',
-    height: 330,
-    paddingTop: 5,
-    zIndex: 10000 // Position on top of all the other overlays, including backdrops and modals
-
-  },
-  closeButtonContainer: {
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    zIndex: 1
-  }
-});
-
-const selectCloseButtonContainerStyles = _ref => {
-  let {
-    paddingRight,
-    paddingTop
-  } = _ref;
-  return {
-    paddingRight,
-    paddingTop
-  };
-};
-
-const selectPaddingContainerStyles = _ref2 => {
-  let {
-    paddingTop,
-    paddingLeft,
-    paddingRight
-  } = _ref2;
-  return {
-    paddingBottom: 35,
-    paddingTop,
-    paddingLeft,
-    paddingRight
-  };
-};
-
-const ModalOverlay = /*#__PURE__*/forwardRef((_ref3, ref) => {
-  let {
-    children,
-    tokens,
-    variant,
-    copy,
-    onClose
-  } = _ref3;
-  const viewport = useViewport();
-  const themeTokens = useThemeTokens('Modal', tokens, variant, {
-    viewport,
-    maxWidth: false
-  });
-  const {
-    closeIcon: CloseIconComponent,
-    maxWidth
-  } = themeTokens;
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const closeLabel = getCopy('closeButton');
-  return /*#__PURE__*/_jsx(_Fragment, {
-    children: /*#__PURE__*/_jsx(Portal, {
-      ref: ref,
-      children: /*#__PURE__*/_jsx(View, {
-        style: [{
-          minWidth: maxWidth
-        }, staticStyles.positioner],
-        children: /*#__PURE__*/_jsxs(Card, {
-          tokens: selectPaddingContainerStyles(themeTokens),
-          children: [/*#__PURE__*/_jsx(View, {
-            style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
-            children: /*#__PURE__*/_jsx(IconButton, {
-              onPress: onClose,
-              icon: CloseIconComponent,
-              accessibilityRole: "button",
-              accessibilityLabel: closeLabel,
-              tokens: selectTokens('IconButton', themeTokens, 'close')
-            })
-          }), children]
-        })
-      })
-    })
-  });
-});
-ModalOverlay.displayName = 'ModalOverlay';
-ModalOverlay.propTypes = {
-  children: PropTypes.node.isRequired,
-  variant: variantProp.propType,
-  tokens: getTokensPropType('Modal'),
-  copy: copyPropTypes,
-  onClose: PropTypes.func
-};
-export default ModalOverlay;