@telus-uds/components-base 0.0.2-prerelease.7 → 1.0.1

package/lib/Notification/Notification.js

@@ -0,0 +1,216 @@
+"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 = /*#__PURE__*/(0, _react.forwardRef)(({
+  children,
+  system,
+  dismissible,
+  copy = 'en',
+  tokens,
+  variant
+}, ref) => {
+  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, {
+    ref: ref,
+    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.displayName = 'Notification';
+Notification.propTypes = {
+  /**
+   * Content of the `Notification`.
+   */
+  children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func]),
+
+  /**
+   * Use `system` prop to set the visual style of the notification and denote an announcement from the system or application
+   */
+  system: _propTypes.default.bool,
+
+  /**
+   * Use the `dismissible` prop to allow users to dismiss the Notification at any time.
+   */
+  dismissible: _propTypes.default.bool,
+
+  /**
+   * Select english or french copy for the accessible label of the dismiss button.
+   */
+  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
+  }
+});

package/lib/Notification/dictionary.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _default = {
+  en: {
+    dismiss: 'Close'
+  },
+  fr: {
+    dismiss: 'Fermer'
+  }
+};
+exports.default = _default;

package/lib/Notification/index.js

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

package/lib/Pagination/PageButton.js

@@ -1,12 +1,33 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import ButtonBase from '../Button/ButtonBase';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, copyPropTypes, getTokensPropType, hrefAttrsProp, linkProps, selectTokens, variantProp } from '../utils';
-import useCopy from '../utils/useCopy';
-import dictionary from './dictionary';
-
-function PageButton({
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ButtonBase = _interopRequireDefault(require("../Button/ButtonBase"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+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 PageButton = /*#__PURE__*/(0, _react.forwardRef)(({
   label,
   onPress,
   href,
@@ -15,18 +36,18 @@ function PageButton({
   variant,
   tokens,
   ...props
-}) {
-  const getTokens = useThemeTokensCallback('PaginationPageButton', tokens, variant);
-  const getCopy = useCopy({
-    dictionary,
+}, ref) => {
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('PaginationPageButton', tokens, variant);
+  const getCopy = (0, _useCopy.default)({
+    dictionary: _dictionary.default,
     copy
   });
 
-  const getButtonTokens = buttonState => selectTokens('Button', getTokens(buttonState));
+  const getButtonTokens = buttonState => (0, _utils.selectTokens)('Button', getTokens(buttonState));
 
   const activeProps = isActive ? {
     selected: true,
-    ...a11yProps.nonFocusableProps,
+    ..._utils.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'
@@ -34,10 +55,12 @@ function PageButton({
   const accessibilityRole = href !== undefined ? 'link' : 'button';
   const activeLabel = isActive ? ` ${getCopy('currentLabel')}` : '';
   const accessibilityLabel = `${getCopy('goToLabel')} ${label}${activeLabel}`;
+
   const {
     hrefAttrs,
     rest
-  } = hrefAttrsProp.bundle(props);
+  } = _utils.hrefAttrsProp.bundle(props);
+
   const buttonProps = {
     accessibilityRole,
     accessibilityLabel,
@@ -46,17 +69,27 @@ function PageButton({
     hrefAttrs,
     ...rest
   };
-  return /*#__PURE__*/React.createElement(ButtonBase, Object.assign({}, buttonProps, {
-    tokens: getButtonTokens
-  }, activeProps), label);
-}
-
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+    ref: ref,
+    ...buttonProps,
+    tokens: getButtonTokens,
+    ...activeProps,
+    children: label
+  });
+});
+PageButton.displayName = 'PageButton';
 PageButton.propTypes = {
-  label: PropTypes.string,
-  isActive: PropTypes.bool,
-  copy: copyPropTypes,
-  variant: variantProp.propType,
-  tokens: getTokensPropType('PaginationPageButton'),
-  ...linkProps.types
+  // Spreading any props into a secondary component accessed like Pagination.PageButton
+  // crashes a Docusaurus props table, but only in production, not in development
+  onPress: _propTypes.default.func,
+  href: _propTypes.default.string,
+  // If the above is fixed, the above can be replaced with this which includes full a11y etc:
+  // ...linkProps.types,
+  label: _propTypes.default.string,
+  isActive: _propTypes.default.bool,
+  copy: _utils.copyPropTypes,
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('PaginationPageButton')
 };
-export default PageButton;
+var _default = PageButton;
+exports.default = _default;

package/lib/Pagination/Pagination.js

@@ -1,12 +1,39 @@
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import { componentPropType, copyPropTypes, getTokensPropType, variantProp } 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';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
+var _utils = require("../utils");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _usePagination = _interopRequireDefault(require("./usePagination"));
+
+var _PageButton = _interopRequireDefault(require("./PageButton"));
+
+var _SideButton = _interopRequireDefault(require("./SideButton"));
+
+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 selectTextStyles = ({
   color,
@@ -14,7 +41,7 @@ const selectTextStyles = ({
   fontSize,
   fontWeight,
   lineHeight
-}) => applyTextStyles({
+}) => (0, _ThemeProvider.applyTextStyles)({
   color,
   fontName,
   fontSize,
@@ -22,23 +49,25 @@ const selectTextStyles = ({
   lineHeight
 });
 
-function Pagination({
+const Pagination = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   copy = 'en',
   variant,
   tokens,
   sideButtonVariant,
   sideButtonTokens
-}) {
-  const viewport = useViewport();
+}, ref) => {
+  const viewport = (0, _ViewportProvider.useViewport)();
   const {
     truncateAbove,
     gap,
     ...themeTokens
-  } = useThemeTokens('Pagination', tokens, variant, {
+  } = (0, _ThemeProvider.useThemeTokens)('Pagination', tokens, variant, {
     viewport
   });
-  const items = React.Children.toArray(children);
+
+  const items = _react.default.Children.toArray(children);
+
   const {
     isItemActive,
     getItemProps,
@@ -48,7 +77,7 @@ function Pagination({
     previousItemProps,
     shouldRenderButton,
     shouldRenderEllipsis
-  } = usePagination({
+  } = (0, _usePagination.default)({
     items,
     truncateAbove
   });
@@ -60,59 +89,65 @@ function Pagination({
   // concatenate all items to easily wrap them in identical spacing components
 
 
-  const buttons = [showPrevious && /*#__PURE__*/React.createElement(SideButton, Object.assign({}, previousItemProps, {
+  const buttons = [showPrevious && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.default, { ...previousItemProps,
     direction: "previous",
     copy: copy,
     variant: sideButtonVariant,
     tokens: sideButtonTokens
-  })), ...items.map((child, itemIndex) => {
+  }), ...items.map((child, itemIndex) => {
     const buttonLabel = `${itemIndex + 1}`;
     const itemProps = getItemProps(itemIndex);
 
     if (shouldRenderButton(itemIndex)) {
-      return /*#__PURE__*/React.createElement(PageButton, Object.assign({}, itemProps, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PageButton.default, { ...itemProps,
         label: buttonLabel,
         copy: copy,
         isActive: isItemActive(itemIndex)
-      }));
+      });
     }
 
     if (shouldRenderEllipsis(itemIndex)) {
-      return /*#__PURE__*/React.createElement(Text, {
-        style: ellipsisTextStyles
-      }, "...");
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        style: ellipsisTextStyles,
+        children: "..."
+      });
     }
 
     return null;
-  }), showNext && /*#__PURE__*/React.createElement(SideButton, Object.assign({}, nextItemProps, {
+  }), showNext && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SideButton.default, { ...nextItemProps,
     direction: "next",
     copy: copy,
     variant: sideButtonVariant,
     tokens: sideButtonTokens
-  }))];
-  return /*#__PURE__*/React.createElement(View, {
-    style: staticStyles.container
-  }, 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__*/React.createElement(Box, {
-    right: gap,
-    key: key
-  }, element)));
-}
-
-Pagination.PageButton = PageButton;
+  })];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: staticStyles.container,
+    ref: ref,
+    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__*/(0, _jsxRuntime.jsx)(_Box.default, {
+      right: gap,
+      children: element
+    }, key))
+  });
+});
+_PageButton.default.displayName = 'PageButton';
+Pagination.PageButton = _PageButton.default;
 Pagination.propTypes = {
-  children: componentPropType('PageButton'),
-  copy: copyPropTypes,
-  variant: variantProp.propType,
-  tokens: getTokensPropType('Pagination'),
-  sideButtonVariant: variantProp.propType,
-  sideButtonTokens: getTokensPropType('PaginationSideButton')
+  children: (0, _utils.componentPropType)('PageButton'),
+  copy: _utils.copyPropTypes,
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('Pagination'),
+  sideButtonVariant: _utils.variantProp.propType,
+  sideButtonTokens: (0, _utils.getTokensPropType)('PaginationSideButton')
 };
-const staticStyles = StyleSheet.create({
+
+const staticStyles = _StyleSheet.default.create({
   container: {
     flexDirection: 'row',
     flexWrap: 'wrap',
     alignItems: 'center'
   }
 });
-export default Pagination;
+
+var _default = Pagination;
+exports.default = _default;