@telus-uds/components-web 3.4.0 → 4.0.0

package/lib/cjs/NavigationBar/NavigationItem.js

@@ -0,0 +1,94 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
+const defaultMaxWidth = 192;
+const ItemContainer = /*#__PURE__*/_styledComponents.default.div.withConfig({
+  displayName: "NavigationItem__ItemContainer",
+  componentId: "components-web__sc-ql9x7c-0"
+})(_ref => {
+  let {
+    targetWidth
+  } = _ref;
+  return {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    maxWidth: `${Math.max(defaultMaxWidth, targetWidth ?? 0)}px`,
+    flexGrow: targetWidth ? 1 : 0,
+    flexShrink: 1
+  };
+});
+
+/**
+ * NavigationItem within a NavigationBar component.
+ *
+ * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
+ */
+const NavigationItem = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+  let {
+    accessibilityRole = 'link',
+    // @todo switch to 'button' for dropdowns
+    children,
+    id,
+    onClick: handleClick = () => {},
+    selected = false,
+    accessibilityState = {
+      current: selected ? 'page' : false
+    },
+    href,
+    tokens,
+    variant = {},
+    LinkRouter,
+    linkRouterProps,
+    ...rest
+  } = _ref2;
+  const selectedProps = selectProps(rest);
+  const targetWidth = (0, _componentsBase.useResponsiveProp)({
+    xs: 288,
+    lg: null
+  });
+  const viewport = (0, _componentsBase.useViewport)();
+  const getTokens = (0, _componentsBase.useThemeTokensCallback)('NavigationBar', tokens, variant);
+  const getStateTokens = state => getTokens({
+    ...state,
+    viewport
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ItemContainer, {
+    targetWidth: targetWidth,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Button, {
+      accessibilityRole: accessibilityRole,
+      accessibilityState: accessibilityState,
+      onPress: handleClick,
+      ref: ref,
+      tokens: getStateTokens,
+      variant: {
+        selected
+      },
+      href: href,
+      LinkRouter: LinkRouter,
+      linkRouterProps: linkRouterProps,
+      ...selectedProps,
+      children: children
+    })
+  });
+});
+NavigationItem.displayName = 'NavigationItem';
+NavigationItem.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _componentsBase.getTokensPropType)('NavigationBar'),
+  onClick: _propTypes.default.func,
+  selected: _propTypes.default.bool,
+  children: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func]).isRequired
+};
+var _default = exports.default = NavigationItem;

package/lib/cjs/NavigationBar/NavigationSubMenu.js

@@ -0,0 +1,164 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _NavigationItem = _interopRequireDefault(require("./NavigationItem"));
+var _useOverlaidPosition = _interopRequireDefault(require("../utils/useOverlaidPosition"));
+var _resolveItemSelection = _interopRequireDefault(require("./resolveItemSelection"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * A NavigationItem that opens or closes a Listbox of other NavigationItems.
+ *
+ * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
+ */const NavigationSubMenu = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    id,
+    isOpen = false,
+    tokens = {},
+    label,
+    onClick,
+    selectedId,
+    items = [],
+    openOverlayRef,
+    LinkRouter,
+    linkRouterProps,
+    itemsContainerRef
+  } = _ref;
+  const focusTrapRef = _react.default.useRef();
+  const maxWidth = 289; // Slightly over 288 of nav item to account for subpixel rounding
+  const defaultOffsets = {
+    offsets: {
+      vertical: 4
+    }
+  };
+  const {
+    align,
+    offsets,
+    minWidth
+  } = (0, _componentsBase.useResponsiveProp)({
+    xs: {
+      ...defaultOffsets,
+      align: {
+        top: 'bottom',
+        left: 'left'
+      },
+      minWidth: maxWidth
+    },
+    sm: {
+      ...defaultOffsets,
+      align: {
+        top: 'bottom',
+        right: 'right'
+      },
+      minWidth: maxWidth
+    },
+    lg: {
+      ...defaultOffsets,
+      align: {
+        top: 'bottom',
+        center: 'center'
+      },
+      minWidth: 192
+    }
+  });
+  const {
+    overlaidPosition,
+    sourceRef,
+    targetRef,
+    onTargetLayout,
+    isReady
+  } = (0, _useOverlaidPosition.default)({
+    isShown: isOpen,
+    offsets,
+    align
+  });
+  const {
+    selected
+  } = (0, _resolveItemSelection.default)({
+    id,
+    label,
+    items
+  }, selectedId);
+  const handleClick = event => {
+    if (typeof onClick === 'function') onClick(event);
+  };
+  const {
+    icoMenu
+  } = (0, _componentsBase.useThemeTokens)('NavigationBar', {}, {}, {
+    expanded: isOpen
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_NavigationItem.default, {
+      ref: sourceRef,
+      accessibilityRole: "button",
+      id: id,
+      selected: selected,
+      onClick: handleClick,
+      icon: icoMenu,
+      tokens: tokens,
+      children: _ref2 => {
+        let {
+          textStyles
+        } = _ref2;
+        return [children, /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Icon, {
+          icon: icoMenu,
+          variant: {
+            size: 'micro'
+          },
+          tokens: {
+            color: textStyles[0]?.color
+          }
+        }, `${id}_icon`)];
+      }
+    }), isOpen && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Listbox.Overlay, {
+        overlaidPosition: overlaidPosition,
+        maxWidth: maxWidth,
+        minWidth: minWidth,
+        isReady: isReady,
+        onLayout: onTargetLayout,
+        ref: openOverlayRef,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_componentsBase.Listbox, {
+          items: items,
+          firstItemRef: targetRef,
+          parentRef: sourceRef,
+          selectedId: selectedId,
+          LinkRouter: LinkRouter,
+          linkRouterProps: linkRouterProps,
+          ref: itemsContainerRef || ref
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        // This catches and shifts focus to other interactive elements.
+        // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+        tabIndex: 0,
+        ref: focusTrapRef,
+        onFocus: () => targetRef.current.focus()
+      })]
+    })]
+  });
+});
+NavigationSubMenu.displayName = 'NavigationSubMenu';
+
+// @TODO - proper prop types and comments
+NavigationSubMenu.propTypes = {
+  tokens: (0, _componentsBase.getTokensPropType)('NavigationBar'),
+  children: _propTypes.default.node,
+  id: _propTypes.default.string,
+  isOpen: _propTypes.default.bool,
+  label: _propTypes.default.string,
+  onClick: _propTypes.default.func,
+  selectedId: _propTypes.default.string,
+  items: _propTypes.default.array,
+  openOverlayRef: _propTypes.default.object,
+  LinkRouter: _propTypes.default.elementType,
+  linkRouterProps: _propTypes.default.object,
+  itemsContainerRef: _propTypes.default.object
+};
+var _default = exports.default = NavigationSubMenu;

package/lib/cjs/NavigationBar/collapseItems.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/**
+ * Make a list of items into a one-item list where all items are nested under the first item
+ */
+const collapseItems = (items, selectedId) => {
+  if (!items?.length) return items;
+
+  // Give the root item the label of the current active link
+  // (or the first item if for some reason there's no match on the selectedId)
+  let rootLabel = items[0].label;
+  const isSelected = _ref => {
+    let {
+      label,
+      id
+    } = _ref;
+    return selectedId === id ?? label;
+  };
+
+  // Linter doesn't like for loops, simulate loop that breaks
+  items.some(item => {
+    if (isSelected(item)) {
+      rootLabel = item.label;
+      return true; // break
+    }
+    const nestedMatch = item.items?.find(isSelected);
+    if (nestedMatch) {
+      rootLabel = nestedMatch.label;
+      return true; // break
+    }
+    return false; // continue
+  });
+  return [{
+    id: 'navigation-bar-root',
+    label: rootLabel,
+    items
+  }];
+};
+var _default = exports.default = collapseItems;

package/lib/cjs/NavigationBar/index.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _NavigationBar = _interopRequireDefault(require("./NavigationBar"));
+var _NavigationItem = _interopRequireDefault(require("./NavigationItem"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+_NavigationBar.default.Item = _NavigationItem.default;
+var _default = exports.default = _NavigationBar.default;

package/lib/cjs/NavigationBar/resolveItemSelection.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const resolveItemSelection = (_ref, selectedId) => {
+  let {
+    id,
+    label,
+    items
+  } = _ref;
+  const itemId = id ?? label;
+
+  // Treat item as selected if it or any nested child matches the selected id
+  const selected = Boolean(selectedId === itemId || items?.some(item => resolveItemSelection(item, selectedId).selected));
+  return {
+    itemId,
+    selected
+  };
+};
+var _default = exports.default = resolveItemSelection;

package/lib/cjs/OptimizeImage/OptimizeImage.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _componentsBase = require("@telus-uds/components-base");
+var _ResponsiveImage = _interopRequireDefault(require("../ResponsiveImage"));
+var _utils = require("./utils");
+var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils2.htmlAttrs]);
+const OptimizeImage = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    contentfulAssetUrl,
+    alt,
+    quality = 80,
+    xs = 320,
+    sm = 576,
+    md = 768,
+    lg = 992,
+    xl = 1200,
+    sizeByHeight = false,
+    disableRetina = false,
+    ...rest
+  } = _ref;
+  // `useHeight` is a deprecated TDS prop, replaced by `sizeByHeight`
+  const dimension = sizeByHeight || rest.useHeight ? 'h' : 'w';
+  // by default assuming webP support for SSR
+  const [imgUrls, setImgUrls] = _react.default.useState((0, _utils.getImageUrls)(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, true));
+  _react.default.useEffect(() => {
+    // Checking for webP support for CSR
+    (0, _utils.hasWebpSupport)().then(supportsWebp => {
+      const imageUrls = (0, _utils.getImageUrls)(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, supportsWebp);
+      setImgUrls(imageUrls);
+    });
+  }, [contentfulAssetUrl, dimension, disableRetina, lg, md, quality, sm, xl, xs]);
+  if (!imgUrls) return null;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ResponsiveImage.default, {
+    ...imgUrls,
+    alt: alt,
+    ...selectProps(rest),
+    ref: ref
+  });
+});
+OptimizeImage.displayName = 'OptimizeImage';
+OptimizeImage.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * The source to load the image. Only contentful image urls are supported. See https://www.contentful.com/developers/docs/references/images-api/ for details.
+   */
+  contentfulAssetUrl: _propTypes.default.string.isRequired,
+  /**
+   * Alternative text to display if image cannot be loaded or a screen reader is used.
+   */
+  alt: _propTypes.default.string.isRequired,
+  /**
+   * Customize quality as a percentage between 1 and 100.
+   */
+  quality: _propTypes.default.number,
+  /**
+   * Customize width for xs screen size in px, this may affect the quality of the image.
+   */
+  xs: _propTypes.default.number,
+  /**
+   * Customize width for sm screen size in px, this may affect the quality of the image.
+   */
+  sm: _propTypes.default.number,
+  /**
+   * Customize width for md screen size in px, this may affect the quality of the image.
+   */
+  md: _propTypes.default.number,
+  /**
+   * Customize width for lg screen size in px, this may affect the quality of the image.
+   */
+  lg: _propTypes.default.number,
+  /**
+   * Customize width for xl screen size in px, this may affect the quality of the image.
+   */
+  xl: _propTypes.default.number,
+  /**
+   * Switches size dimension to height, default is false
+   */
+  sizeByHeight: _propTypes.default.bool,
+  /**
+   * Turns off retina display functionality
+   */
+  disableRetina: _propTypes.default.bool,
+  /**
+   * Loading strategy.
+   * @default 'eager'
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
+   */
+  loading: _propTypes.default.oneOf(['eager', 'lazy'])
+};
+var _default = exports.default = OptimizeImage;

package/lib/cjs/OptimizeImage/index.js

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

package/lib/cjs/OptimizeImage/utils/getFallbackUrl.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getFallbackUrl;
+var _isSvgUrl = _interopRequireDefault(require("./isSvgUrl"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function getFallbackUrl(url, dimension, size, quality) {
+  if (!(0, _isSvgUrl.default)(url)) {
+    return `${url}?${dimension}=${size}&q=${quality}`;
+  }
+  return url;
+}

package/lib/cjs/OptimizeImage/utils/getImageUrls.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getImageUrls;
+var _getOptimizedUrl = _interopRequireDefault(require("./getOptimizedUrl"));
+var _getFallbackUrl = _interopRequireDefault(require("./getFallbackUrl"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, supportsWebp) {
+  return {
+    xsSrc: (0, _getOptimizedUrl.default)(contentfulAssetUrl, dimension, xs, quality, disableRetina, supportsWebp),
+    smSrc: (0, _getOptimizedUrl.default)(contentfulAssetUrl, dimension, sm, quality, disableRetina, supportsWebp),
+    mdSrc: (0, _getOptimizedUrl.default)(contentfulAssetUrl, dimension, md, quality, disableRetina, supportsWebp),
+    lgSrc: (0, _getOptimizedUrl.default)(contentfulAssetUrl, dimension, lg, quality, disableRetina, supportsWebp),
+    xlSrc: (0, _getOptimizedUrl.default)(contentfulAssetUrl, dimension, xl, quality, disableRetina, supportsWebp),
+    fallbackSrc: (0, _getFallbackUrl.default)(contentfulAssetUrl, dimension, xl, quality)
+  };
+}

package/lib/cjs/OptimizeImage/utils/getOptimizedUrl.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = getOptimizedUrl;
+var _isSvgUrl = _interopRequireDefault(require("./isSvgUrl"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function getOptimizedUrl(url, dimension, size, quality, disableRetina, supportsWebp) {
+  if (!(0, _isSvgUrl.default)(url)) {
+    let format = '';
+    if (supportsWebp) {
+      format = 'fm=webp';
+    } else if (url.match(/\.jpe?g$/i)) {
+      format = 'fm=jpg&fl=progressive';
+    }
+    let optimizedUrl = `${url}?${dimension}=${size}&q=${quality}&${format}`;
+    if (!disableRetina) {
+      optimizedUrl += `, ${url}?${dimension}=${size * 2}&q=${quality}&${format} 2x`;
+    }
+    return optimizedUrl;
+  }
+  return url;
+}

package/lib/cjs/OptimizeImage/utils/hasWebpSupport.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = hasWebpSupport;
+let promise;
+
+/**
+ * Taken directly from Google developers guide on how to detect browser support for WebP.
+ *
+ * @see https://developers.google.com/speed/webp/faq#in_your_own_javascript
+ * @return {Promise<boolean>}
+ */
+function hasWebpSupport() {
+  // cache the result, so that this function runs only once
+  if (!promise) {
+    promise = new Promise(resolve => {
+      // basic support. other test forms exist for lossless, alpha, and animation types.
+      // check google guide if data strings are needed
+      const lossy = 'UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
+      const img = document.createElement('img');
+      img.onload = function onLoad() {
+        const result = img.width > 0 && img.height > 0;
+        resolve(result);
+      };
+      img.onerror = function onError() {
+        resolve(false);
+      };
+      img.src = `data:image/webp;base64,${lossy}`;
+    });
+  }
+  return promise;
+}

package/lib/cjs/OptimizeImage/utils/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getFallbackUrl", {
+  enumerable: true,
+  get: function () {
+    return _getFallbackUrl.default;
+  }
+});
+Object.defineProperty(exports, "getImageUrls", {
+  enumerable: true,
+  get: function () {
+    return _getImageUrls.default;
+  }
+});
+Object.defineProperty(exports, "getOptimizedUrl", {
+  enumerable: true,
+  get: function () {
+    return _getOptimizedUrl.default;
+  }
+});
+Object.defineProperty(exports, "hasWebpSupport", {
+  enumerable: true,
+  get: function () {
+    return _hasWebpSupport.default;
+  }
+});
+var _getOptimizedUrl = _interopRequireDefault(require("./getOptimizedUrl"));
+var _getFallbackUrl = _interopRequireDefault(require("./getFallbackUrl"));
+var _hasWebpSupport = _interopRequireDefault(require("./hasWebpSupport"));
+var _getImageUrls = _interopRequireDefault(require("./getImageUrls"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/cjs/OptimizeImage/utils/isSvgUrl.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = isSvgUrl;
+function isSvgUrl(url) {
+  return !!url.match(/\.svg$/i);
+}