@telus-uds/components-base 1.8.1 → 1.8.2

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;

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;