@telus-uds/components-base 1.7.1 → 1.8.2

package/lib-module/List/ListItem.js

@@ -1,223 +0,0 @@
-import React, { forwardRef } from 'react';
-import View from "react-native-web/dist/exports/View";
-import Platform from "react-native-web/dist/exports/Platform";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import PropTypes from 'prop-types';
-import { useThemeTokens, applyTextStyles } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps, wrapStringsInText } from '../utils';
-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 [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-const selectBulletStyles = ({
-  itemBulletWidth,
-  itemBulletHeight,
-  itemBulletColor
-}) => ({
-  width: itemBulletWidth,
-  height: itemBulletHeight,
-  borderRadius: itemBulletHeight / 2,
-  backgroundColor: itemBulletColor
-});
-
-const selectBulletContainerStyles = ({
-  itemBulletContainerWidth,
-  itemBulletContainerAlign
-}) => ({
-  width: itemBulletContainerWidth,
-  alignItems: itemBulletContainerAlign
-});
-
-const selectItemIconTokens = ({
-  itemIconSize,
-  itemIconColor
-}) => ({
-  size: itemIconSize,
-  color: itemIconColor
-});
-
-const selectSideItemContainerStyles = ({
-  listGutter,
-  iconMarginTop
-}) => ({
-  marginTop: iconMarginTop,
-  marginRight: listGutter
-}); // Align bullets with the top line of text the same way icons are aligned
-
-
-const selectBulletPositioningStyles = ({
-  itemIconSize
-}) => ({
-  width: itemIconSize,
-  height: itemIconSize
-});
-
-const selectItemStyles = ({
-  itemFontWeight,
-  itemFontSize,
-  itemLineHeight,
-  itemFontName
-}) => applyTextStyles({
-  fontWeight: itemFontWeight,
-  fontSize: itemFontSize,
-  lineHeight: itemLineHeight,
-  fontName: itemFontName
-});
-
-const selectItemBlockStyles = ({
-  interItemMargin
-}) => ({
-  marginBottom: interItemMargin
-});
-
-const selectDividerStyles = ({
-  dividerColor,
-  dividerSize,
-  interItemMarginWithDivider
-}) => ({
-  borderBottomWidth: dividerSize,
-  borderColor: dividerColor,
-  marginBottom: interItemMarginWithDivider,
-  paddingBottom: interItemMarginWithDivider
-});
-/**
- * ListItem is responsible for rendering icon or a bullet as side item
- */
-
-
-const ListItem = /*#__PURE__*/forwardRef(({
-  tokens,
-  variant,
-  icon,
-  iconColor,
-  iconSize,
-  showDivider,
-  children,
-  isLastItem,
-  ...rest
-}, ref) => {
-  const themeTokens = useThemeTokens('List', tokens, variant);
-  const itemStyles = selectItemStyles(themeTokens);
-  const itemBlockStyles = selectItemBlockStyles(themeTokens);
-  const dividerStyles = selectDividerStyles(themeTokens);
-  const itemBulletContainerStyles = selectBulletContainerStyles(themeTokens);
-  const itemBulletStyles = selectBulletStyles(themeTokens);
-  const itemBulletPositioningStyles = selectBulletPositioningStyles(themeTokens);
-  const iconTokens = selectItemIconTokens(themeTokens);
-  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
-  const accessibilityRole = Platform.select({
-    web: 'listitem',
-    default: 'item'
-  });
-
-  const renderItem = () => /*#__PURE__*/_jsx(View, {
-    style: staticStyles.wrap,
-    children: wrapStringsInText(children, {
-      style: itemStyles
-    })
-  });
-  /**
-   * Function responsible returning styling, in case the item is the last shouldn't
-   * add extra margin on the bottom, if "showDivider" is true it should add a divider
-   * and custom margin and padding, otherwise just adds a margin to the bottom
-   */
-
-
-  const getContainerStyle = () => {
-    if (isLastItem) {
-      return undefined;
-    }
-
-    if (showDivider) {
-      return dividerStyles;
-    }
-
-    return itemBlockStyles;
-  };
-  /**
-   * Renders item bullet or Icon in case it's defined
-   * in case children are string the icon is centered otherwise
-   * it will align itself at start of the container
-   */
-
-
-  const renderMarker = () => {
-    const IconComponent = icon || /*#__PURE__*/_jsx(_Fragment, {});
-
-    if (icon) {
-      return /*#__PURE__*/_jsx(View, {
-        style: sideItemContainerStyles,
-        children: /*#__PURE__*/_jsx(IconComponent, {
-          size: iconSize || iconTokens.size,
-          color: iconColor || iconTokens.color
-        })
-      });
-    }
-
-    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"
-        })
-      })
-    });
-  };
-
-  return /*#__PURE__*/_jsxs(View, {
-    ref: ref,
-    style: [staticStyles.itemContainer, getContainerStyle()],
-    accessibilityRole: accessibilityRole,
-    ...selectProps(rest),
-    children: [renderMarker(), renderItem()]
-  });
-});
-ListItem.displayName = 'ListItem';
-const staticStyles = StyleSheet.create({
-  itemContainer: {
-    flexDirection: 'row'
-  },
-  wrap: {
-    flex: 1
-  },
-  bulletPositioning: {
-    alignItems: 'center',
-    justifyContent: 'center'
-  }
-});
-ListItem.propTypes = { ...selectedSystemPropTypes,
-  tokens: getTokensPropType('List'),
-  variant: variantProp.propType,
-  children: PropTypes.node.isRequired,
-
-  /**
-   * Renders side item icon
-   */
-  icon: PropTypes.func,
-
-  /**
-   * Will set display icon color
-   */
-  iconColor: PropTypes.string,
-
-  /**
-   * Allow the user define the icon size if not defined the theme's file
-   */
-  iconSize: PropTypes.number,
-
-  /**
-   * @ignore
-   * Defined by parent if it's last item on the list
-   */
-  isLastItem: PropTypes.bool,
-
-  /**
-   * @ignore
-   * In case it is not the last item allow display divider
-   */
-  showDivider: PropTypes.bool
-};
-export default ListItem;

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,208 +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 { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-const selectContainerStyles = ({
-  containerPaddingLeft,
-  containerPaddingRight,
-  containerPaddingTop,
-  containerPaddingBottom,
-  maxWidth,
-  height
-}) => ({
-  height,
-  maxWidth,
-  paddingLeft: containerPaddingLeft,
-  paddingRight: containerPaddingRight,
-  paddingTop: containerPaddingTop,
-  paddingBottom: containerPaddingBottom
-});
-
-const selectModalStyles = ({
-  backgroundColor,
-  borderRadius,
-  height,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  paddingBottom,
-  shadow
-}) => ({
-  backgroundColor,
-  borderRadius,
-  height,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  paddingBottom,
-  ...applyShadowToken(shadow)
-});
-
-const selectBackdropStyles = ({
-  backdropColor,
-  backdropOpacity
-}) => ({
-  backgroundColor: backdropColor,
-  opacity: backdropOpacity
-});
-
-const selectCloseButtonContainerStyles = ({
-  paddingRight,
-  paddingTop
-}) => ({
-  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(({
-  children,
-  isOpen,
-  onClose,
-  maxWidth,
-  tokens,
-  variant,
-  copy,
-  closeButton,
-  ...rest
-}, ref) => {
-  const viewport = useViewport();
-  const themeTokens = useThemeTokens('Modal', tokens, variant, {
-    viewport,
-    maxWidth
-  });
-  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],
-      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
-  }
-});

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/Notification/Notification.js

@@ -1,196 +0,0 @@
-import React, { forwardRef, useState } from 'react';
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import View from "react-native-web/dist/exports/View";
-import PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText } from '../utils';
-import ButtonBase from '../Button/ButtonBase';
-import useCopy from '../utils/useCopy';
-import dictionary 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 = tokens => ({ ...tokens
-});
-
-const selectTextStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
-
-const selectIconProps = ({
-  iconSize,
-  iconColor
-}) => ({
-  size: iconSize,
-  color: iconColor
-});
-
-const selectIconContainerStyles = ({
-  iconGap
-}) => ({
-  paddingRight: iconGap
-});
-
-const selectDismissIconProps = ({
-  dismissIconSize,
-  dismissIconColor
-}) => ({
-  size: dismissIconSize,
-  color: dismissIconColor
-});
-
-const selectDismissButtonContainerStyles = ({
-  dismissButtonGap
-}) => ({
-  paddingLeft: dismissButtonGap
-});
-/**
- * A banner that highlights important messages:
- * - Status message to show there is an error or outage of services
- * - Confirmation message in response to user action
- * - Account information letting the user know they have almost used all their data
- *
- * ## Usage criteria
- * - Use simple text content only, such as bold test or links. Don’t use other complex components or paragraphs
- * - Show notifications before the content that the message is related to, otherwise show at the top of the main content
- * - Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
- * - When showing multiple notifications, show them in order of importance from top to bottom
- * - Use variants to visually show the type of message contained within the Notification.
- * - The icon and colour will indicate meaning and importance
- *
- * ### Variants
- * - Use `variant.style` to set the visual style of the notification
- * - Use `dismissible` prop to enable dismissible functionality
- * - Use `system` prop to set the visual style of the notification and denote an announcement from the system or application
- *
- * ### When to use the system prop?
- * - Use `system` to show system-based messages coming from the application
- * - Don’t use `system` when the message is in response to user action
- *
- * ## Variants
- *
- * #### Success
- * Use the success variant to provide feedback of a successful operation. The message will include an icon to indicate meaning and importance.
- *
- * #### Warning
- * Use the warning variant to provide feedback of a warning; users would still be able to proceed forward.
- * The message will include an icon to indicate meaning and importance.
- *
- * #### Error
- * Use the error variant to provide feedback of a failed operation. The message will include an icon to indicate meaning and importance.
- *
- * #### Dismissible
- * Dismissible notifications should only be used for default or success notifications where there is no action needed from the user.
- * If the information is passive then it should be dismissible as indicated by an interactive close button on the far right.
- * If the notification requires an action then make the option(s) clear with a `ChevronLink` or `Link`.
- *
- * Use the `dismissible` prop to allow users to dismiss the Notification at any time. Once dismissed, the Notification is removed from the DOM.
- *
- * Please note:
- *
- * - Default and Success variants are dismissible
- * - Error and Warning variants are not dismissible
- *
- * #### System message
- * Use full-width `Notifications` to show system-based messages coming from the application, not in response to user action.
- * Show system notifications at the top of the page, below the navigation, and expands the full-width of the viewport
- */
-
-
-const Notification = /*#__PURE__*/forwardRef(({
-  children,
-  system,
-  dismissible,
-  copy = 'en',
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
-  const [isDismissed, setIsDismissed] = useState(false);
-  const themeTokens = useThemeTokens('Notification', tokens, variant, {
-    system
-  });
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-
-  if (isDismissed) {
-    return null;
-  }
-
-  const textStyles = selectTextStyles(themeTokens);
-  const content = wrapStringsInText(typeof children === 'function' ? children({
-    textStyles
-  }) : children, {
-    style: textStyles
-  });
-  const {
-    icon: IconComponent,
-    dismissIcon: DismissIconComponent
-  } = themeTokens;
-
-  const onDismissPress = () => setIsDismissed(true); // TODO: replace the dismiss button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
-
-
-  return /*#__PURE__*/_jsxs(View, {
-    ref: ref,
-    style: [staticStyles.container, selectContainerStyles(themeTokens)],
-    ...selectProps(rest),
-    children: [IconComponent && /*#__PURE__*/_jsx(View, {
-      style: selectIconContainerStyles(themeTokens),
-      children: /*#__PURE__*/_jsx(IconComponent, { ...selectIconProps(themeTokens)
-      })
-    }), /*#__PURE__*/_jsx(View, {
-      style: staticStyles.contentContainer,
-      children: content && typeof content === 'function' ? content({
-        textStyles,
-        variant
-      }) : content
-    }), dismissible && DismissIconComponent && /*#__PURE__*/_jsx(View, {
-      style: selectDismissButtonContainerStyles(themeTokens),
-      children: /*#__PURE__*/_jsx(ButtonBase, {
-        onPress: onDismissPress,
-        accessibilityRole: "button",
-        accessibilityLabel: getCopy('dismiss'),
-        children: () => /*#__PURE__*/_jsx(DismissIconComponent, { ...selectDismissIconProps(themeTokens)
-        })
-      })
-    })]
-  });
-});
-Notification.displayName = 'Notification';
-Notification.propTypes = { ...selectedSystemPropTypes,
-
-  /**
-   * Content of the `Notification`.
-   */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]),
-
-  /**
-   * Use `system` prop to set the visual style of the notification and denote an announcement from the system or application
-   */
-  system: PropTypes.bool,
-
-  /**
-   * Use the `dismissible` prop to allow users to dismiss the Notification at any time.
-   */
-  dismissible: PropTypes.bool,
-
-  /**
-   * Select english or french copy for the accessible label of the dismiss button.
-   */
-  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), PropTypes.shape({
-    dismiss: PropTypes.string
-  })]),
-  tokens: getTokensPropType('Notification'),
-  variant: variantProp.propType
-};
-export default Notification;
-const staticStyles = StyleSheet.create({
-  container: {
-    flexDirection: 'row'
-  },
-  contentContainer: {
-    flex: 1
-  }
-});

package/lib-module/Notification/dictionary.js

@@ -1,8 +0,0 @@
-export default {
-  en: {
-    dismiss: 'Close'
-  },
-  fr: {
-    dismiss: 'Fermer'
-  }
-};

package/lib-module/Notification/index.js

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