@telus-uds/components-base 0.0.2-prerelease.5 → 0.0.2-prerelease.9

package/lib/List/ListItem.js

@@ -0,0 +1,237 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const selectBulletStyles = ({
+  itemBulletWidth,
+  itemBulletHeight,
+  itemBulletColor
+}) => ({
+  width: itemBulletWidth,
+  height: itemBulletHeight,
+  borderRadius: itemBulletHeight / 2,
+  backgroundColor: itemBulletColor
+});
+
+const selectBulletContainerStyles = ({
+  itemBulletContainerWidth,
+  itemBulletContainerAlign
+}) => ({
+  width: itemBulletContainerWidth,
+  alignItems: itemBulletContainerAlign,
+  justifyContent: itemBulletContainerAlign
+});
+
+const selectItemIconTokens = ({
+  itemIconSize,
+  itemIconColor
+}) => ({
+  size: itemIconSize,
+  color: itemIconColor
+});
+
+const selectSideItemContainerStyles = ({
+  listGutter
+}) => ({
+  marginRight: listGutter
+});
+
+const selectItemStyles = ({
+  itemFontWeight,
+  itemFontSize,
+  itemLineHeight,
+  itemFontName
+}) => (0, _ThemeProvider.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 = ({
+  tokens,
+  variant,
+  icon,
+  iconColor,
+  iconSize,
+  showDivider,
+  children,
+  isLastItem
+}) => {
+  const themeTokens = (0, _ThemeProvider.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 iconTokens = selectItemIconTokens(themeTokens);
+  const sideItemContainerStyles = selectSideItemContainerStyles(themeTokens);
+
+  const accessibilityRole = _Platform.default.select({
+    web: 'listitem',
+    default: 'item'
+  });
+
+  const areChildrenStrings = () => {
+    if (Array.isArray(children)) {
+      return children.every(child => typeof child === 'string');
+    }
+
+    return typeof children === 'string';
+  };
+
+  const renderItem = () => {
+    if (areChildrenStrings()) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        style: itemStyles,
+        children: children
+      });
+    }
+
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      children: children
+    });
+  };
+  /**
+   * 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__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
+
+    if (icon) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [sideItemContainerStyles, areChildrenStrings() ? staticStyles.centeredIcons : undefined],
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {
+          tokens: { ...iconTokens,
+            size: iconSize || iconTokens.size,
+            color: iconColor || iconTokens.color
+          }
+        })
+      });
+    }
+
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: [sideItemContainerStyles, itemBulletContainerStyles],
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: itemBulletStyles,
+        testID: "unordered-item-bullet"
+      })
+    });
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: [staticStyles.itemContainer, getContainerStyle()],
+    accessibilityRole: accessibilityRole,
+    children: [renderMarker(), renderItem()]
+  });
+};
+
+const staticStyles = _StyleSheet.default.create({
+  itemContainer: {
+    flexDirection: 'row'
+  },
+  centeredIcons: {
+    justifyContent: 'center'
+  }
+});
+
+ListItem.propTypes = {
+  tokens: (0, _utils.getTokensPropType)('List'),
+  variant: _utils.variantProp.propType,
+  children: _propTypes.default.node.isRequired,
+
+  /**
+   * Renders side item icon
+   */
+  icon: _propTypes.default.func,
+
+  /**
+   * Will set display icon color
+   */
+  iconColor: _propTypes.default.string,
+
+  /**
+   * Allow the user define the icon size if not defined the theme's file
+   */
+  iconSize: _propTypes.default.number,
+
+  /**
+   * @ignore
+   * Defined by parent if it's last item on the list
+   */
+  isLastItem: _propTypes.default.bool,
+
+  /**
+   * @ignore
+   * In case it is not the last item allow display divider
+   */
+  showDivider: _propTypes.default.bool
+};
+var _default = ListItem;
+exports.default = _default;

package/lib/List/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _List = _interopRequireDefault(require("./List"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _List.default;
+exports.default = _default;

package/lib/Modal/Modal.js

@@ -0,0 +1,226 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _TouchableWithoutFeedback = _interopRequireDefault(require("react-native-web/dist/cjs/exports/TouchableWithoutFeedback"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _Modal = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Modal"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
+
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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,
+  ...(0, _ThemeProvider.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 = ({
+  children,
+  isOpen,
+  onClose,
+  maxWidth,
+  tokens,
+  variant,
+  copy
+}) => {
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Modal', tokens, variant, {
+    viewport,
+    maxWidth
+  });
+  const {
+    closeIcon: CloseIconComponent
+  } = themeTokens;
+  const getCopy = (0, _utils.useCopy)({
+    dictionary: _dictionary.default,
+    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__*/(0, _jsxRuntime.jsx)(_Modal.default, {
+    transparent: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+      style: [staticStyles.positioningContainer],
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: [staticStyles.sizingContainer, selectContainerStyles(themeTokens)],
+        pointerEvents: "box-none" // don't capture backdrop press events
+        ,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
+          style: [staticStyles.modal, selectModalStyles(themeTokens)],
+          onKeyUp: handleKeyUp,
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+            style: [staticStyles.closeButtonContainer, selectCloseButtonContainerStyles(themeTokens)],
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+              onPress: handleClose,
+              accessibilityRole: "button",
+              accessibilityLabel: closeLabel,
+              children: // TODO: add close button interactive states after IconButton is done
+              () => /*#__PURE__*/(0, _jsxRuntime.jsx)(CloseIconComponent, { ...selectCloseIconProps(themeTokens)
+              })
+            })
+          }), children]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_TouchableWithoutFeedback.default, {
+        onPress: handleClose,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: [staticStyles.backdrop, selectBackdropStyles(themeTokens)]
+        })
+      })]
+    })
+  });
+};
+
+Modal.propTypes = {
+  children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.arrayOf(_propTypes.default.node)]),
+  copy: _utils.copyPropTypes,
+  isOpen: _propTypes.default.bool,
+  onClose: _propTypes.default.func,
+  maxWidth: _propTypes.default.bool,
+  tokens: (0, _utils.getTokensPropType)('Modal'),
+  variant: _utils.variantProp.propType
+};
+var _default = Modal;
+exports.default = _default;
+
+const staticStyles = _StyleSheet.default.create({
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: -1,
+    ..._Platform.default.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/Modal/dictionary.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    // English text from TDS Community `Modal`
+    closeButton: 'Close'
+  },
+  fr: {
+    closeButton: 'Fermer'
+  }
+};
+exports.default = _default;

package/lib/Modal/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Modal = _interopRequireDefault(require("./Modal"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = _Modal.default;
+exports.default = _default;

package/lib/Notification/Notification.js

@@ -0,0 +1,200 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
+
+var _useCopy = _interopRequireDefault(require("../utils/useCopy"));
+
+var _dictionary = _interopRequireDefault(require("./dictionary"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const selectContainerStyles = tokens => ({ ...tokens
+});
+
+const selectTextStyles = tokens => (0, _ThemeProvider.applyTextStyles)((0, _utils.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 = ({
+  children,
+  system,
+  dismissible,
+  copy = 'en',
+  tokens,
+  variant
+}) => {
+  const [isDismissed, setIsDismissed] = (0, _react.useState)(false);
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Notification', tokens, variant, {
+    system
+  });
+  const getCopy = (0, _useCopy.default)({
+    dictionary: _dictionary.default,
+    copy
+  });
+
+  if (isDismissed) {
+    return null;
+  }
+
+  const textStyles = selectTextStyles(themeTokens);
+  const content = typeof children === 'string' ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+    style: textStyles,
+    children: children
+  }) : children;
+  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__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: [staticStyles.container, selectContainerStyles(themeTokens)],
+    children: [IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: selectIconContainerStyles(themeTokens),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconProps(themeTokens)
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: staticStyles.contentContainer,
+      children: content && typeof content === 'function' ? content({
+        textStyles,
+        variant
+      }) : content
+    }), dismissible && DismissIconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: selectDismissButtonContainerStyles(themeTokens),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+        onPress: onDismissPress,
+        accessibilityRole: "button",
+        accessibilityLabel: getCopy('dismiss'),
+        children: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(DismissIconComponent, { ...selectDismissIconProps(themeTokens)
+        })
+      })
+    })]
+  });
+};
+
+Notification.propTypes = {
+  children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func]),
+  system: _propTypes.default.bool,
+  dismissible: _propTypes.default.bool,
+  copy: _propTypes.default.oneOfType([_propTypes.default.oneOf(['en', 'fr']), _propTypes.default.shape({
+    dismiss: _propTypes.default.string
+  })]),
+  tokens: (0, _utils.getTokensPropType)('Notification'),
+  variant: _utils.variantProp.propType
+};
+var _default = Notification;
+exports.default = _default;
+
+const staticStyles = _StyleSheet.default.create({
+  container: {
+    flexDirection: 'row'
+  },
+  contentContainer: {
+    flex: 1
+  }
+});