@telus-uds/components-base 1.2.0 → 1.4.0

package/lib-module/Modal/Modal.js

@@ -0,0 +1,208 @@
+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 } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import ButtonBase from '../Button/ButtonBase';
+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
+});
+
+const selectCloseIconProps = ({
+  closeIconSize,
+  closeIconColor
+}) => ({
+  size: closeIconSize,
+  color: closeIconColor
+});
+/**
+ * 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,
+  ...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();
+  };
+
+  if (!isOpen) {
+    return null;
+  } // TODO: replace the close button with IconButton when implemented (https://github.com/telus/universal-design-system/issues/281)
+
+
+  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: [/*#__PURE__*/_jsx(View, {
+            style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
+            children: /*#__PURE__*/_jsx(ButtonBase, {
+              onPress: handleClose,
+              accessibilityRole: "button",
+              accessibilityLabel: closeLabel,
+              children: // TODO: add close button interactive states after IconButton is done
+              () => /*#__PURE__*/_jsx(CloseIconComponent, { ...selectCloseIconProps(themeTokens)
+              })
+            })
+          }), 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
+};
+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

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

package/lib-module/Modal/index.js

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

package/lib-module/Notification/Notification.js

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

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

package/lib-module/Notification/index.js

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

package/lib-module/Pagination/PageButton.js

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

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