@telus-uds/components-base 2.0.0 → 2.0.1

package/lib/MultiSelectFilter/dictionary.js

@@ -1,10 +1,4 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _default = {
+export default {
   en: {
     filterByLabel: 'Filter by %{filterCategory}:',
     applyButtonLabel: 'Apply',
@@ -15,5 +9,4 @@ var _default = {
     applyButtonLabel: 'Appliquer',
     clearButtonLabel: 'Effacer'
   }
-};
-exports.default = _default;
+};

package/lib/MultiSelectFilter/index.js

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

package/lib/Notification/Notification.js

@@ -1,45 +1,30 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
+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, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const selectContainerStyles = tokens => ({
+  ...tokens
 });
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
-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 [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
-
-const selectContainerStyles = tokens => ({ ...tokens
-});
-
-const selectTextStyles = (tokens, themeOptions) => (0, _ThemeProvider.applyTextStyles)({ ...(0, _utils.selectTokens)('Typography', tokens),
-  themeOptions
-});
-
+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,
@@ -50,16 +35,15 @@ const selectIconProps = _ref => {
     color: iconColor
   };
 };
-
 const selectIconContainerStyles = _ref2 => {
   let {
     iconGap
   } = _ref2;
   return {
-    paddingRight: iconGap
+    paddingRight: iconGap,
+    placeContent: 'start'
   };
 };
-
 const selectDismissIconProps = _ref3 => {
   let {
     dismissIconSize,
@@ -70,19 +54,174 @@ const selectDismissIconProps = _ref3 => {
     color: dismissIconColor
   };
 };
-
 const selectDismissButtonContainerStyles = _ref4 => {
   let {
     dismissButtonGap
   } = _ref4;
   return {
-    paddingLeft: dismissButtonGap
+    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 || (_themeOptions$content = themeOptions.contentMaxWidth) === null || _themeOptions$content === void 0 ? void 0 : _themeOptions$content.xs) || '100%'
+        },
+        md: {
+          maxWidth: (themeOptions === null || themeOptions === void 0 || (_themeOptions$content2 = themeOptions.contentMaxWidth) === null || _themeOptions$content2 === void 0 ? void 0 : _themeOptions$content2.md) || '100%'
+        },
+        lg: {
+          maxWidth: (themeOptions === null || themeOptions === void 0 || (_themeOptions$content3 = themeOptions.contentMaxWidth) === null || _themeOptions$content3 === void 0 ? void 0 : _themeOptions$content3.lg) || '100%'
+        },
+        sm: {
+          maxWidth: (themeOptions === null || themeOptions === void 0 || (_themeOptions$content4 = themeOptions.contentMaxWidth) === null || _themeOptions$content4 === void 0 ? void 0 : _themeOptions$content4.sm) || '100%'
+        },
+        xl: {
+          maxWidth: (themeOptions === null || themeOptions === 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])
+  });
 
-const selectContentContainerStyle = maxWidth => ({
-  width: maxWidth || '100%'
+  // 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
@@ -134,9 +273,7 @@ const selectContentContainerStyle = maxWidth => ({
  * 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)((_ref5, ref) => {
+const Notification = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     children,
     system,
@@ -144,63 +281,116 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     copy = 'en',
     tokens,
     variant,
+    onDismiss,
     ...rest
-  } = _ref5;
-  const [isDismissed, setIsDismissed] = (0, _react.useState)(false);
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Notification', tokens, variant, {
-    system
-  });
-  const getCopy = (0, _useCopy.default)({
-    dictionary: _dictionary.default,
+  } = _ref6;
+  const [isDismissed, setIsDismissed] = React.useState(false);
+  const viewport = useViewport();
+  const getCopy = useCopy({
+    dictionary,
     copy
   });
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
-  const contentMaxWidth = (0, _utils.useResponsiveProp)(themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.contentMaxWidth);
-
+  } = 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 textStyles = selectTextStyles(themeTokens, themeOptions);
-  const content = (0, _utils.wrapStringsInText)(typeof children === 'function' ? children({
-    textStyles,
+  const content = wrapStringsInText(typeof children === 'function' ? children({
+    textStyles: notificationComponentRef.current.textStyles.text,
     variant
   }) : children, {
-    style: textStyles
+    style: notificationComponentRef.current.textStyles.text
   });
   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.jsx)(_View.default, {
+    dismissIcon: DismissIconComponent,
+    dismissIconColor
+  } = enableMediaQueryStyleSheet === false ? themeTokens : themeTokens[viewport];
+  const onDismissPress = () => {
+    setIsDismissed(true);
+    onDismiss === null || onDismiss === void 0 || onDismiss();
+  };
+  return /*#__PURE__*/_jsx(View, {
     ref: ref,
-    style: [staticStyles.container, selectContainerStyles(themeTokens)],
+    style: notificationComponentRef.current.containerStyles.container,
+    dataSet: mediaIdsRef && {
+      media: mediaIdsRef.current.containerIds.container
+    },
     ...selectProps(rest),
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-      style: [staticStyles.content, selectContentContainerStyle(contentMaxWidth)],
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
-        style: staticStyles.contentContainer,
-        children: [IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-          style: selectIconContainerStyles(themeTokens),
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, { ...selectIconProps(themeTokens)
+    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,
+          textStyles: notificationComponentRef.current.textStyles.text,
           variant
         }) : content]
-      }), dismissible && DismissIconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-        style: selectDismissButtonContainerStyles(themeTokens),
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonBase.default, {
+      }), 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'),
-          children: () => /*#__PURE__*/(0, _jsxRuntime.jsx)(DismissIconComponent, { ...selectDismissIconProps(themeTokens)
+          variant: {
+            inverse: dismissIconColor === '#ffffff',
+            size: 'small'
+          },
+          children: () => /*#__PURE__*/_jsx(DismissIconComponent, {
+            ...notificationComponentRef.current.selectDismissIconPropsStyles.selectDismissIconProps
           })
         })
       })]
@@ -208,47 +398,31 @@ const Notification = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   });
 });
 Notification.displayName = 'Notification';
-Notification.propTypes = { ...selectedSystemPropTypes,
-
+Notification.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * Content of the `Notification`.
    */
-  children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.func]),
-
+  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.default.bool,
-
+  system: PropTypes.bool,
   /**
    * Use the `dismissible` prop to allow users to dismiss the Notification at any time.
    */
-  dismissible: _propTypes.default.bool,
-
+  dismissible: PropTypes.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
+  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), PropTypes.shape({
+    dismiss: PropTypes.string
   })]),
-  tokens: (0, _utils.getTokensPropType)('Notification'),
-  variant: _utils.variantProp.propType
+  /**
+   * Callback function called when the dismiss button is clicked
+   */
+  onDismiss: PropTypes.func,
+  tokens: getTokensPropType('Notification'),
+  variant: variantProp.propType
 };
-var _default = Notification;
-exports.default = _default;
-
-const staticStyles = _StyleSheet.default.create({
-  container: {
-    flexDirection: 'row',
-    justifyContent: 'center'
-  },
-  contentContainer: {
-    flexDirection: 'row',
-    flexShrink: 1
-  },
-  content: {
-    flexDirection: 'row',
-    flexShrink: 1,
-    justifyContent: 'space-between'
-  }
-});
+export default Notification;

package/lib/Notification/dictionary.js

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

package/lib/Notification/index.js

@@ -1,13 +1,2 @@
-"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;
+import Notification from './Notification';
+export default Notification;