@telus-uds/components-web 2.44.0 → 3.0.0

package/lib-module/NavigationBar/NavigationSubMenu.js

@@ -1,162 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Icon, useResponsiveProp, useThemeTokens, Listbox, getTokensPropType } from '@telus-uds/components-base';
-import NavigationItem from './NavigationItem';
-import useOverlaidPosition from '../utils/useOverlaidPosition';
-import resolveItemSelection from './resolveItemSelection';
-
-/**
- * A NavigationItem that opens or closes a Listbox of other NavigationItems.
- *
- * This is rendered automatically by `NavigationBar` and isn't intended be used directly.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const NavigationSubMenu = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    id,
-    isOpen = false,
-    tokens = {},
-    label,
-    onClick,
-    selectedId,
-    items = [],
-    openOverlayRef,
-    LinkRouter,
-    linkRouterProps,
-    itemsContainerRef
-  } = _ref;
-  const focusTrapRef = React.useRef();
-  const maxWidth = 289; // Slightly over 288 of nav item to account for subpixel rounding
-  const defaultOffsets = {
-    offsets: {
-      vertical: 4
-    }
-  };
-  const {
-    align,
-    offsets,
-    minWidth
-  } = 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
-  } = useOverlaidPosition({
-    isShown: isOpen,
-    offsets,
-    align
-  });
-  const {
-    selected
-  } = resolveItemSelection({
-    id,
-    label,
-    items
-  }, selectedId);
-  const handleClick = event => {
-    if (typeof onClick === 'function') onClick(event);
-  };
-  const {
-    icoMenu
-  } = useThemeTokens('NavigationBar', {}, {}, {
-    expanded: isOpen
-  });
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(NavigationItem, {
-      ref: sourceRef,
-      accessibilityRole: "button",
-      id: id,
-      selected: selected,
-      onClick: handleClick,
-      icon: icoMenu,
-      tokens: tokens,
-      children: _ref2 => {
-        var _textStyles$;
-        let {
-          textStyles
-        } = _ref2;
-        return [children, /*#__PURE__*/_jsx(Icon, {
-          icon: icoMenu,
-          variant: {
-            size: 'micro'
-          },
-          tokens: {
-            color: (_textStyles$ = textStyles[0]) === null || _textStyles$ === void 0 ? void 0 : _textStyles$.color
-          }
-        }, `${id}_icon`)];
-      }
-    }), isOpen && /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(Listbox.Overlay, {
-        overlaidPosition: overlaidPosition,
-        maxWidth: maxWidth,
-        minWidth: minWidth,
-        isReady: isReady,
-        onLayout: onTargetLayout,
-        ref: openOverlayRef,
-        children: /*#__PURE__*/_jsx(Listbox, {
-          items: items,
-          firstItemRef: targetRef,
-          parentRef: sourceRef,
-          selectedId: selectedId,
-          LinkRouter: LinkRouter,
-          linkRouterProps: linkRouterProps,
-          ref: itemsContainerRef || ref
-        })
-      }), /*#__PURE__*/_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: getTokensPropType('NavigationBar'),
-  children: PropTypes.node,
-  id: PropTypes.string,
-  isOpen: PropTypes.bool,
-  label: PropTypes.string,
-  onClick: PropTypes.func,
-  selectedId: PropTypes.string,
-  items: PropTypes.array,
-  openOverlayRef: PropTypes.object,
-  LinkRouter: PropTypes.elementType,
-  linkRouterProps: PropTypes.object,
-  itemsContainerRef: PropTypes.object
-};
-export default NavigationSubMenu;

package/lib-module/NavigationBar/collapseItems.js

@@ -1,41 +0,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 !== null && items !== void 0 && 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 => {
-    var _item$items;
-    if (isSelected(item)) {
-      rootLabel = item.label;
-      return true; // break
-    }
-
-    const nestedMatch = (_item$items = item.items) === null || _item$items === void 0 ? void 0 : _item$items.find(isSelected);
-    if (nestedMatch) {
-      rootLabel = nestedMatch.label;
-      return true; // break
-    }
-
-    return false; // continue
-  });
-
-  return [{
-    id: 'navigation-bar-root',
-    label: rootLabel,
-    items
-  }];
-};
-export default collapseItems;

package/lib-module/NavigationBar/index.js

@@ -1,4 +0,0 @@
-import NavigationBar from './NavigationBar';
-import NavigationItem from './NavigationItem';
-NavigationBar.Item = NavigationItem;
-export default NavigationBar;

package/lib-module/NavigationBar/resolveItemSelection.js

@@ -1,16 +0,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 === null || items === void 0 ? void 0 : items.some(item => resolveItemSelection(item, selectedId).selected)));
-  return {
-    itemId,
-    selected
-  };
-};
-export default resolveItemSelection;

package/lib-module/OptimizeImage/OptimizeImage.js

@@ -1,92 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { selectSystemProps } from '@telus-uds/components-base';
-import ResponsiveImage from '../ResponsiveImage';
-import { hasWebpSupport, getImageUrls } from './utils';
-import { htmlAttrs } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const OptimizeImage = /*#__PURE__*/React.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.useState(getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, true));
-  React.useEffect(() => {
-    // Checking for webP support for CSR
-    hasWebpSupport().then(supportsWebp => {
-      const imageUrls = 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__*/_jsx(ResponsiveImage, {
-    ...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.string.isRequired,
-  /**
-   * Alternative text to display if image cannot be loaded or a screen reader is used.
-   */
-  alt: PropTypes.string.isRequired,
-  /**
-   * Customize quality as a percentage between 1 and 100.
-   */
-  quality: PropTypes.number,
-  /**
-   * Customize width for xs screen size in px, this may affect the quality of the image.
-   */
-  xs: PropTypes.number,
-  /**
-   * Customize width for sm screen size in px, this may affect the quality of the image.
-   */
-  sm: PropTypes.number,
-  /**
-   * Customize width for md screen size in px, this may affect the quality of the image.
-   */
-  md: PropTypes.number,
-  /**
-   * Customize width for lg screen size in px, this may affect the quality of the image.
-   */
-  lg: PropTypes.number,
-  /**
-   * Customize width for xl screen size in px, this may affect the quality of the image.
-   */
-  xl: PropTypes.number,
-  /**
-   * Switches size dimension to height, default is false
-   */
-  sizeByHeight: PropTypes.bool,
-  /**
-   * Turns off retina display functionality
-   */
-  disableRetina: PropTypes.bool,
-  /**
-   * Loading strategy.
-   * @default 'eager'
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
-   */
-  loading: PropTypes.oneOf(['eager', 'lazy'])
-};
-export default OptimizeImage;

package/lib-module/OptimizeImage/index.js

@@ -1,2 +0,0 @@
-import OptimizeImage from './OptimizeImage';
-export default OptimizeImage;

package/lib-module/OptimizeImage/utils/getFallbackUrl.js

@@ -1,7 +0,0 @@
-import isSvgUrl from './isSvgUrl';
-export default function getFallbackUrl(url, dimension, size, quality) {
-  if (!isSvgUrl(url)) {
-    return `${url}?${dimension}=${size}&q=${quality}`;
-  }
-  return url;
-}

package/lib-module/OptimizeImage/utils/getImageUrls.js

@@ -1,12 +0,0 @@
-import getOptimizedUrl from './getOptimizedUrl';
-import getFallbackUrl from './getFallbackUrl';
-export default function getImageUrls(contentfulAssetUrl, dimension, xs, sm, md, lg, xl, quality, disableRetina, supportsWebp) {
-  return {
-    xsSrc: getOptimizedUrl(contentfulAssetUrl, dimension, xs, quality, disableRetina, supportsWebp),
-    smSrc: getOptimizedUrl(contentfulAssetUrl, dimension, sm, quality, disableRetina, supportsWebp),
-    mdSrc: getOptimizedUrl(contentfulAssetUrl, dimension, md, quality, disableRetina, supportsWebp),
-    lgSrc: getOptimizedUrl(contentfulAssetUrl, dimension, lg, quality, disableRetina, supportsWebp),
-    xlSrc: getOptimizedUrl(contentfulAssetUrl, dimension, xl, quality, disableRetina, supportsWebp),
-    fallbackSrc: getFallbackUrl(contentfulAssetUrl, dimension, xl, quality)
-  };
-}

package/lib-module/OptimizeImage/utils/getOptimizedUrl.js

@@ -1,17 +0,0 @@
-import isSvgUrl from './isSvgUrl';
-export default function getOptimizedUrl(url, dimension, size, quality, disableRetina, supportsWebp) {
-  if (!isSvgUrl(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-module/OptimizeImage/utils/hasWebpSupport.js

@@ -1,28 +0,0 @@
-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>}
- */
-export default 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-module/OptimizeImage/utils/index.js

@@ -1,5 +0,0 @@
-import getOptimizedUrl from './getOptimizedUrl';
-import getFallbackUrl from './getFallbackUrl';
-import hasWebpSupport from './hasWebpSupport';
-import getImageUrls from './getImageUrls';
-export { getOptimizedUrl, getFallbackUrl, hasWebpSupport, getImageUrls };

package/lib-module/OptimizeImage/utils/isSvgUrl.js

@@ -1,3 +0,0 @@
-export default function isSvgUrl(url) {
-  return !!url.match(/\.svg$/i);
-}

package/lib-module/OrderedList/Item.js

@@ -1,145 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { applyTextStyles, getTokensPropType, selectSystemProps, StackView, Typography, useTheme, useThemeTokens, wrapStringsInText } from '@telus-uds/components-base';
-import ItemBase from './ItemBase';
-import { htmlAttrs } from '../utils';
-import { OL_COUNTER_NAME } from './constants';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const selectItemTextStyles = (_ref, themeOptions) => {
-  let {
-    itemFontWeight,
-    itemFontSize,
-    itemLineHeight,
-    itemFontName,
-    itemColor,
-    itemTextColor
-  } = _ref;
-  return applyTextStyles({
-    fontWeight: itemFontWeight,
-    fontSize: itemFontSize,
-    fontName: itemFontName,
-    color: itemColor || itemTextColor,
-    themeOptions,
-    lineHeight: itemLineHeight
-  });
-};
-const StyledItemBase = /*#__PURE__*/styled(ItemBase).withConfig({
-  displayName: "Item__StyledItemBase",
-  componentId: "components-web__sc-7jzwcq-0"
-})(_ref2 => {
-  let {
-    interItemMargin,
-    itemBulletContainerWidth,
-    itemBulletTextAlign,
-    itemFontWeight,
-    itemFontSize,
-    itemFontName,
-    itemLineHeight,
-    themeOptions,
-    listGutter,
-    itemColor,
-    itemTextColor
-  } = _ref2;
-  return {
-    counterIncrement: OL_COUNTER_NAME,
-    '::before': {
-      content: `counter(${OL_COUNTER_NAME})'.'`,
-      display: 'inline-block',
-      color: itemColor || itemTextColor,
-      width: itemBulletContainerWidth,
-      paddingRight: listGutter,
-      textAlign: itemBulletTextAlign,
-      flexShrink: 0,
-      whiteSpace: 'nowrap',
-      overflow: 'hidden',
-      ...applyTextStyles({
-        fontWeight: itemFontWeight,
-        fontSize: itemFontSize,
-        fontName: itemFontName,
-        themeOptions
-      }),
-      lineHeight: `${itemLineHeight * itemFontSize}px`
-    },
-    ':not(:last-child)': {
-      marginBottom: interItemMargin
-    }
-  };
-});
-const ItemContent = /*#__PURE__*/styled.div.withConfig({
-  displayName: "Item__ItemContent",
-  componentId: "components-web__sc-7jzwcq-1"
-})({
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 5
-});
-const Item = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
-  let {
-    children,
-    counterName,
-    title,
-    tokens = {},
-    variant,
-    ...rest
-  } = _ref3;
-  // We are reusing some tokens from the list component here in order to provide a unified
-  // experience
-  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)
-  });
-  return /*#__PURE__*/_jsx(StyledItemBase, {
-    ref: ref,
-    themeOptions: themeOptions,
-    ...themeTokens,
-    ...selectProps(rest),
-    children: title ? /*#__PURE__*/_jsxs(StackView, {
-      tokens: {
-        flexShrink: 1
-      },
-      space: 0,
-      children: [/*#__PURE__*/_jsx(Typography, {
-        variant: {
-          size: 'h4'
-        },
-        tokens: headingTokens,
-        children: title
-      }), /*#__PURE__*/_jsx(ItemContent, {
-        ...themeTokens,
-        children: itemContent
-      })]
-    }) : /*#__PURE__*/_jsx(ItemContent, {
-      children: itemContent
-    })
-  });
-});
-Item.displayName = 'OrderedListItem';
-Item.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * Item content
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Defines the title of the `OrderedList.Item`
-   */
-  title: PropTypes.string,
-  /**
-   * Item tokens
-   */
-  tokens: getTokensPropType('OrderedList')
-};
-export default Item;

package/lib-module/OrderedList/ItemBase.js

@@ -1,27 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { jsx as _jsx } from "react/jsx-runtime";
-const StyledItem = /*#__PURE__*/styled.li.withConfig({
-  displayName: "ItemBase__StyledItem",
-  componentId: "components-web__sc-o0oiv5-0"
-})({
-  display: 'flex'
-});
-const Item = _ref => {
-  let {
-    children,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/_jsx(StyledItem, {
-    ...rest,
-    children: children
-  });
-};
-Item.propTypes = {
-  /**
-   * Item content
-   */
-  children: PropTypes.node.isRequired
-};
-export default Item;

package/lib-module/OrderedList/OrderedList.js

@@ -1,86 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { getTokensPropType, selectSystemProps, variantProp } from '@telus-uds/components-base';
-import { htmlAttrs } from '../utils';
-import OrderedListBase from './OrderedListBase';
-import Item from './Item';
-import { OL_COUNTER_NAME } from './constants';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledOrderedListBase = /*#__PURE__*/styled(OrderedListBase).withConfig({
-  displayName: "OrderedList__StyledOrderedListBase",
-  componentId: "components-web__sc-t5az8z-0"
-})(_ref => {
-  let {
-    start
-  } = _ref;
-  return {
-    // Using CSS counters here to have better control over the number styling
-    listStyle: 'none',
-    counterReset: `${OL_COUNTER_NAME} ${start - 1}`
-  };
-});
-
-/**
- * Themed semantic ordered list.
- */
-const OrderedList = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    children,
-    start = 1,
-    variant = {},
-    tokens = {},
-    ...rest
-  } = _ref2;
-  // Check if children is an array
-  const isChildrenArray = Array.isArray(children);
-
-  // Pass any variants and tokens "OrderedList" receives down to the individual list items.
-  const childrenWithParentVariantsAndTokens = React.useMemo(() => {
-    const addVariantAndTokensToProps = child => {
-      var _child$props, _child$props2;
-      const existingChildVariants = ((_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.variant) ?? {};
-      const existingChildTokens = ((_child$props2 = child.props) === null || _child$props2 === void 0 ? void 0 : _child$props2.tokens) ?? {};
-      return /*#__PURE__*/React.cloneElement(child, {
-        variant: {
-          ...existingChildVariants,
-          ...variant
-        },
-        tokens: {
-          ...existingChildTokens,
-          ...tokens
-        }
-      });
-    };
-    if (variant || tokens) {
-      if (isChildrenArray) {
-        return children.map(addVariantAndTokensToProps);
-      }
-      return [addVariantAndTokensToProps(children)];
-    }
-    return children;
-  }, [children, variant, isChildrenArray, tokens]);
-  return /*#__PURE__*/_jsx(StyledOrderedListBase, {
-    ...selectProps(rest),
-    ref: ref,
-    start: start,
-    children: childrenWithParentVariantsAndTokens
-  });
-});
-OrderedList.displayName = 'OrderedList';
-OrderedList.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * A list of ordered items wrapped in `OrderedList.Item`.
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * The position to start the list with.
-   */
-  start: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  variant: variantProp.propType,
-  tokens: getTokensPropType('OrderedList')
-};
-OrderedList.Item = Item;
-export default OrderedList;