@telus-uds/components-base 1.96.0 → 1.97.1

package/lib-module/Notification/Notification.js

@@ -1,429 +0,0 @@
-import React from 'react';
-import View from "react-native-web/dist/exports/View";
-import Platform from "react-native-web/dist/exports/Platform";
-import PropTypes from 'prop-types';
-import { applyTextStyles, useTheme, useThemeTokens, useResponsiveThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, selectTokens, variantProp, viewProps, wrapStringsInText, useResponsiveProp, createMediaQueryStyles, StyleSheet } from '../utils';
-import IconButton from '../IconButton';
-import useCopy from '../utils/useCopy';
-import dictionary from './dictionary';
-import { useViewport } from '../ViewportProvider';
-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, themeOptions, isDismissible) => {
-  const textTokens = selectTokens('Typography', tokens);
-  const styles = {
-    ...textTokens,
-    themeOptions,
-    overflow: 'hidden'
-  };
-  if (!isDismissible) {
-    styles.flexShrink = 1;
-  }
-  return applyTextStyles(styles);
-};
-const selectIconProps = _ref => {
-  let {
-    iconSize,
-    iconColor
-  } = _ref;
-  return {
-    size: iconSize,
-    color: iconColor
-  };
-};
-const selectIconContainerStyles = _ref2 => {
-  let {
-    iconGap
-  } = _ref2;
-  return {
-    paddingRight: iconGap,
-    placeContent: 'start'
-  };
-};
-const selectDismissIconProps = _ref3 => {
-  let {
-    dismissIconSize,
-    dismissIconColor
-  } = _ref3;
-  return {
-    size: dismissIconSize,
-    color: dismissIconColor
-  };
-};
-const selectDismissButtonContainerStyles = _ref4 => {
-  let {
-    dismissButtonGap
-  } = _ref4;
-  return {
-    paddingLeft: dismissButtonGap,
-    placeContent: 'start'
-  };
-};
-const selectContentContainerStyle = (themeTokens, maxWidth, viewport, system) => ({
-  maxWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
-  minWidth: viewport === 'xl' && system === true ? maxWidth : 'auto',
-  paddingRight: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.containerPaddingRight,
-  paddingLeft: themeTokens === null || themeTokens === void 0 ? void 0 : themeTokens.containerPaddingLeft
-});
-const getMediaQueryStyles = (themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, system) => {
-  var _themeOptions$content, _themeOptions$content2, _themeOptions$content3, _themeOptions$content4, _themeOptions$content5;
-  const transformedSelectContainerStyles = Object.entries(themeTokens).reduce((acc, _ref5) => {
-    let [vp, viewportTokens] = _ref5;
-    acc[vp] = selectContainerStyles({
-      ...viewportTokens
-    });
-    return acc;
-  }, {});
-  const selectContainerMediaQueryStyles = createMediaQueryStyles(transformedSelectContainerStyles);
-  const {
-    ids: containerIds,
-    styles: containerStyles
-  } = StyleSheet.create({
-    container: {
-      flexDirection: system === true && viewport === 'xl' ? 'row' : 'inherit',
-      ...selectContainerMediaQueryStyles
-    }
-  });
-  const {
-    ids: contentContainerIds,
-    styles: contentContainerStyles
-  } = StyleSheet.create({
-    contentContainer: {
-      flexDirection: 'row',
-      flexShrink: 1,
-      justifyContent: 'space-between',
-      ...createMediaQueryStyles({
-        xs: {
-          maxWidth: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content = themeOptions.contentMaxWidth) === null || _themeOptions$content === void 0 ? void 0 : _themeOptions$content.xs) || '100%'
-        },
-        md: {
-          maxWidth: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content2 = themeOptions.contentMaxWidth) === null || _themeOptions$content2 === void 0 ? void 0 : _themeOptions$content2.md) || '100%'
-        },
-        lg: {
-          maxWidth: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content3 = themeOptions.contentMaxWidth) === null || _themeOptions$content3 === void 0 ? void 0 : _themeOptions$content3.lg) || '100%'
-        },
-        sm: {
-          maxWidth: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content4 = themeOptions.contentMaxWidth) === null || _themeOptions$content4 === void 0 ? void 0 : _themeOptions$content4.sm) || '100%'
-        },
-        xl: {
-          maxWidth: (themeOptions === null || themeOptions === void 0 ? void 0 : (_themeOptions$content5 = themeOptions.contentMaxWidth) === null || _themeOptions$content5 === void 0 ? void 0 : _themeOptions$content5.xl) || '100%'
-        }
-      })
-    }
-  });
-  const {
-    ids: staticContentContainerIds,
-    styles: staticContentContainerStyles
-  } = StyleSheet.create({
-    staticContentContainer: {
-      flexDirection: 'row',
-      flexShrink: 1
-    }
-  });
-  const {
-    ids: iconContainerIds,
-    styles: iconContainerStyles
-  } = StyleSheet.create({
-    iconContainer: selectIconContainerStyles(themeTokens[viewport])
-  });
-  const {
-    ids: dismissButtonContainerIds,
-    styles: dismissButtonContainerStyles
-  } = StyleSheet.create({
-    dismissButtonContainer: selectDismissButtonContainerStyles(themeTokens[viewport])
-  });
-  const {
-    ids: textIds,
-    styles: textStyles
-  } = StyleSheet.create({
-    text: selectTextStyles(themeTokens[viewport], themeOptions, dismissible)
-  });
-  const {
-    styles: selectIconPropsStyles
-  } = StyleSheet.create({
-    selectIconProps: selectIconProps(themeTokens[viewport])
-  });
-  const {
-    styles: selectDismissIconPropsStyles
-  } = StyleSheet.create({
-    selectDismissIconProps: selectDismissIconProps(themeTokens[viewport])
-  });
-
-  // eslint-disable-next-line no-param-reassign
-  mediaIdsRef.current = {
-    containerIds,
-    contentContainerIds,
-    staticContentContainerIds,
-    iconContainerIds,
-    dismissButtonContainerIds,
-    textIds
-  };
-  return {
-    containerStyles,
-    contentContainerStyles,
-    staticContentContainerStyles,
-    iconContainerStyles,
-    dismissButtonContainerStyles,
-    textStyles,
-    selectIconPropsStyles,
-    selectDismissIconPropsStyles
-  };
-};
-const getDefaultStyles = (themeTokens, themeOptions, maxWidth, dismissible, viewport, system) => ({
-  containerStyles: {
-    container: {
-      flexDirection: system === true && viewport === 'xl' || Platform.OS === 'android' ? 'row' : 'inherit',
-      ...selectContainerStyles(themeTokens)
-    }
-  },
-  contentContainerStyles: {
-    contentContainer: {
-      flex: 1,
-      flexDirection: 'row',
-      flexShrink: 1,
-      justifyContent: 'space-between',
-      ...selectContentContainerStyle(themeTokens, maxWidth, viewport, system)
-    }
-  },
-  staticContentContainerStyles: {
-    staticContentContainer: {
-      flexDirection: 'row',
-      flexShrink: 1
-    }
-  },
-  iconContainerStyles: {
-    iconContainer: {
-      ...selectIconContainerStyles(themeTokens)
-    }
-  },
-  dismissButtonContainerStyles: {
-    dismissButtonContainer: {
-      ...selectDismissButtonContainerStyles(themeTokens)
-    }
-  },
-  textStyles: {
-    text: {
-      ...selectTextStyles(themeTokens, themeOptions, dismissible)
-    }
-  },
-  selectIconPropsStyles: {
-    selectIconProps: {
-      ...selectIconProps(themeTokens)
-    }
-  },
-  selectDismissIconPropsStyles: {
-    selectDismissIconProps: {
-      ...selectDismissIconProps(themeTokens)
-    }
-  }
-});
-
-/**
- * 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__*/React.forwardRef((_ref6, ref) => {
-  let {
-    children,
-    system,
-    dismissible,
-    copy = 'en',
-    tokens,
-    variant,
-    onDismiss,
-    ...rest
-  } = _ref6;
-  const [isDismissed, setIsDismissed] = React.useState(false);
-  const viewport = useViewport();
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const {
-    themeOptions
-  } = useTheme();
-  const {
-    enableMediaQueryStyleSheet
-  } = themeOptions;
-  const useTokens = enableMediaQueryStyleSheet ? useResponsiveThemeTokens : useThemeTokens;
-  const themeTokens = useTokens('Notification', tokens, variant, {
-    system,
-    viewport
-  });
-  const maxWidth = useResponsiveProp(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
-  const notificationComponentRef = React.useRef({
-    containerStyles: {},
-    contentContainerStyles: {},
-    staticContentContainerStyles: {},
-    iconContainerStyles: {},
-    dismissButtonContainerStyles: {},
-    textStyles: {},
-    selectIconPropsStyles: {},
-    selectDismissIconPropsStyles: {}
-  });
-  const mediaIdsRef = React.useRef({
-    containerIds: {},
-    contentContainerIds: {},
-    staticContentContainerIds: {},
-    iconContainerIds: {},
-    dismissButtonContainerIds: {},
-    textIds: {},
-    selectIconPropsIds: {},
-    selectDismissIconPropsIds: {}
-  });
-  if (enableMediaQueryStyleSheet) {
-    notificationComponentRef.current = getMediaQueryStyles(themeTokens, themeOptions, mediaIdsRef, dismissible, viewport, system);
-  } else {
-    notificationComponentRef.current = getDefaultStyles(themeTokens, themeOptions, maxWidth, dismissible, viewport, system);
-  }
-  if (isDismissed) {
-    return null;
-  }
-  const content = wrapStringsInText(typeof children === 'function' ? children({
-    textStyles: notificationComponentRef.current.textStyles.text,
-    variant
-  }) : children, {
-    style: notificationComponentRef.current.textStyles.text
-  });
-  const {
-    icon: IconComponent,
-    dismissIcon: DismissIconComponent,
-    dismissIconColor
-  } = enableMediaQueryStyleSheet === false ? themeTokens : themeTokens[viewport];
-  const onDismissPress = () => {
-    setIsDismissed(true);
-    onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
-  };
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: notificationComponentRef.current.containerStyles.container,
-    dataSet: mediaIdsRef && {
-      media: mediaIdsRef.current.containerIds.container
-    },
-    ...selectProps(rest),
-    children: /*#__PURE__*/_jsxs(View, {
-      style: notificationComponentRef.current.contentContainerStyles.contentContainer,
-      dataSet: mediaIdsRef && {
-        media: mediaIdsRef.current.contentContainerIds.contentContainer
-      },
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: notificationComponentRef.current.staticContentContainerStyles.staticContentContainer,
-        dataSet: mediaIdsRef && {
-          media: mediaIdsRef.current.staticContentContainerIds.staticContentContainer
-        },
-        children: [IconComponent && /*#__PURE__*/_jsx(View, {
-          style: notificationComponentRef.current.iconContainerStyles.iconContainer,
-          dataSet: mediaIdsRef && {
-            media: mediaIdsRef.current.iconContainerIds.iconContainer
-          },
-          children: /*#__PURE__*/_jsx(IconComponent, {
-            ...notificationComponentRef.current.selectIconPropsStyles.selectIconProps
-          })
-        }), content && typeof content === 'function' ? content({
-          textStyles: notificationComponentRef.current.textStyles.text,
-          variant
-        }) : content]
-      }), dismissible && DismissIconComponent && /*#__PURE__*/_jsx(View, {
-        style: notificationComponentRef.current.dismissButtonContainerStyles.dismissButtonContainer,
-        dataSet: mediaIdsRef && {
-          media: mediaIdsRef.current.dismissButtonContainerIds.dismissButtonContainer
-        },
-        children: /*#__PURE__*/_jsx(IconButton, {
-          action: "close",
-          onPress: onDismissPress,
-          icon: DismissIconComponent,
-          accessibilityRole: "button",
-          accessibilityLabel: getCopy('dismiss'),
-          variant: {
-            inverse: dismissIconColor === '#ffffff',
-            size: 'small'
-          },
-          children: () => /*#__PURE__*/_jsx(DismissIconComponent, {
-            ...notificationComponentRef.current.selectDismissIconPropsStyles.selectDismissIconProps
-          })
-        })
-      })]
-    })
-  });
-});
-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
-  })]),
-  /**
-   * Callback function called when the dismiss button is clicked
-   */
-  onDismiss: PropTypes.func,
-  tokens: getTokensPropType('Notification'),
-  variant: variantProp.propType
-};
-export default Notification;

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/OrderedList/Item.js

@@ -1,160 +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 { getTokensPropType, htmlAttrs, selectSystemProps, variantProp, viewProps, wrapStringsInText } from '../utils';
-import { applyTextStyles, useTheme, useThemeTokens } from '../ThemeProvider';
-import Typography from '../Typography';
-import ItemBase from './ItemBase';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs, viewProps]);
-const selectItemTextStyles = (_ref, themeOptions) => {
-  let {
-    itemFontHeight,
-    itemFontSize,
-    itemLineHeight,
-    itemFontName,
-    itemColor,
-    itemTextColor
-  } = _ref;
-  return applyTextStyles({
-    fontWeight: itemFontHeight,
-    fontSize: itemFontSize,
-    fontName: itemFontName,
-    color: itemColor || itemTextColor,
-    themeOptions,
-    lineHeight: itemLineHeight
-  });
-};
-const selectItemCounterStyles = _ref2 => {
-  let {
-    itemBulletContainerWidth,
-    itemBulletTextAlign,
-    itemFontWeight,
-    itemFontSize,
-    itemFontName,
-    itemLineHeight,
-    themeOptions,
-    itemColor,
-    itemTextColor
-  } = _ref2;
-  return {
-    color: itemColor || itemTextColor,
-    width: itemBulletContainerWidth,
-    textAlign: itemBulletTextAlign,
-    ...applyTextStyles({
-      fontWeight: itemFontWeight,
-      fontSize: itemFontSize,
-      fontName: itemFontName,
-      themeOptions
-    }),
-    lineHeight: itemLineHeight * itemFontSize
-  };
-};
-const selectItemContentStyles = (_ref3, isLastChild) => {
-  let {
-    interItemMargin,
-    listGutter,
-    ...themeTokens
-  } = _ref3;
-  return {
-    ...themeTokens,
-    marginLeft: listGutter,
-    marginBottom: !isLastChild ? interItemMargin : 0
-  };
-};
-const Item = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
-  let {
-    children,
-    index,
-    isLastChild,
-    title,
-    tokens = {},
-    variant,
-    ...rest
-  } = _ref4;
-  const themeTokens = useThemeTokens('OrderedList', tokens, variant);
-  const headingTokens = title && {
-    lineHeight: themeTokens.itemLineHeight,
-    fontSize: themeTokens.itemFontSize,
-    color: themeTokens.itemColor || themeTokens.itemTextColor,
-    fontName: themeTokens.headerFontName,
-    fontWeight: themeTokens.headerFontWeight
-  };
-  const {
-    themeOptions
-  } = useTheme();
-  const itemContent = wrapStringsInText(children, {
-    style: selectItemTextStyles(themeTokens, themeOptions)
-  });
-  const itemCounter = wrapStringsInText(`${index}.`, {
-    style: selectItemTextStyles(themeTokens, themeOptions)
-  });
-  return /*#__PURE__*/_jsxs(ItemBase, {
-    ref: ref,
-    style: {
-      ...staticStyles.container,
-      ...themeTokens
-    },
-    ...selectProps(rest),
-    children: [/*#__PURE__*/_jsx(View, {
-      style: [staticStyles.itemCounter, selectItemCounterStyles(themeTokens)],
-      children: itemCounter
-    }), /*#__PURE__*/_jsxs(View, {
-      style: [staticStyles.itemContent, selectItemContentStyles(themeTokens, isLastChild)],
-      children: [title && /*#__PURE__*/_jsx(View, {
-        children: /*#__PURE__*/_jsx(Typography, {
-          variant: {
-            size: 'h4'
-          },
-          tokens: headingTokens,
-          children: title
-        })
-      }), /*#__PURE__*/_jsx(View, {
-        children: itemContent
-      })]
-    })]
-  });
-});
-Item.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Item content
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Item index
-   */
-  index: PropTypes.number,
-  /**
-   * If true, the item is the last one on the list
-   */
-  isLastChild: PropTypes.bool,
-  /**
-   * Defines the title of the `OrderedList.Item`
-   */
-  title: PropTypes.string,
-  /**
-   * Item tokens
-   */
-  tokens: getTokensPropType('OrderedList'),
-  /**
-   * Item variant
-   */
-  variant: variantProp.propType
-};
-Item.displayName = 'OrderedListItem';
-export default Item;
-const staticStyles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'row'
-  },
-  itemCounter: {
-    alignItems: 'flex-end'
-  },
-  itemContent: {
-    flexShrink: 1
-  }
-});

package/lib-module/OrderedList/ItemBase.js

@@ -1,43 +0,0 @@
-/* eslint-disable react-native-a11y/has-valid-accessibility-role */
-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 { jsx as _jsx } from "react/jsx-runtime";
-const getAccessibilityRole = () => Platform.select({
-  ios: 'listitem',
-  android: 'none',
-  web: 'listitem'
-});
-const Item = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    style,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/_jsx(View, {
-    accessibilityRole: getAccessibilityRole(),
-    ref: ref,
-    style: [staticStyles.container, style],
-    ...rest,
-    children: children
-  });
-});
-Item.propTypes = {
-  /**
-   * Item content
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Item custom styles
-   */
-  style: PropTypes.object
-};
-Item.displayName = 'OrderedListItem';
-export default Item;
-const staticStyles = StyleSheet.create({
-  container: {
-    display: 'flex'
-  }
-});