@telus-uds/components-web 2.44.0 → 3.0.0

package/lib-module/Footnote/FootnoteLink.js

@@ -1,118 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import styled from 'styled-components';
-import { applyTextStyles, selectSystemProps, useCopy, useThemeTokens, variantProp } from '@telus-uds/components-base';
-import dictionary from './dictionary';
-import { htmlAttrs } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const StyledSup = /*#__PURE__*/styled.sup.withConfig({
-  displayName: "FootnoteLink__StyledSup",
-  componentId: "components-web__sc-17nd7xo-0"
-})(_ref => {
-  let {
-    fontSize,
-    lineHeight,
-    paddingLeft,
-    paddingRight,
-    ...fontNameAndWeight
-  } = _ref;
-  return {
-    border: 0,
-    color: 'inherit',
-    cursor: 'pointer',
-    // we want to fallback on 'smaller' but have a valid size when a custom font size is provided.
-    fontSize: fontSize ? `${fontSize}px` : 'smaller',
-    lineHeight: lineHeight ?? `${fontSize * 2}px`,
-    margin: 0,
-    paddingVertical: 0,
-    paddingLeft,
-    paddingRight,
-    textDecoration: 'underline',
-    // apply font family
-    ...applyTextStyles(fontNameAndWeight)
-  };
-});
-
-/**
- * Use `FootnoteLink` to open `Footnote` component and display related legal content.
- *
- * ## Usage Criteria
- *
- * - Use FootnoteLink to open a Footnote component and display related legal content.
- * - Avoid using FootnoteLink if there is only one annotation on a page. Consider including
- *   the annotation as part of the content whenever possible.
- */
-const FootnoteLink = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
-  let {
-    copy = 'en',
-    number = [],
-    onClick,
-    fontSize,
-    tokens,
-    variant = {},
-    ...rest
-  } = _ref2;
-  const themeTokens = useThemeTokens('FootnoteLink', tokens, variant);
-  const numbers = Array.isArray(number) ? number : [number];
-  const refs = numbers.map(() => /*#__PURE__*/React.createRef());
-  const handleClick = index => {
-    onClick(numbers[index], refs[index]);
-  };
-  const getCopy = useCopy({
-    dictionary,
-    copy
-  });
-  const handleOnClick = (event, index) => {
-    event.preventDefault();
-    event.stopPropagation();
-    handleClick(index);
-  };
-  const handleOnKeyDown = (event, index) => {
-    if (event.key === 'Enter' || event.key === 13) {
-      handleClick(index);
-    }
-  };
-  return /*#__PURE__*/_jsx("span", {
-    ref: ref,
-    children: numbers.map((num, index) => /*#__PURE__*/_jsx(StyledSup, {
-      onKeyDown: event => handleOnKeyDown(event, index),
-      role: "button",
-      "aria-label": getCopy('a11yLabel'),
-      ref: refs[index],
-      onClick: event => handleOnClick(event, index),
-      tabIndex: 0,
-      ...selectProps(rest),
-      ...themeTokens,
-      fontSize: fontSize ?? themeTokens.fontSize,
-      children: `${num}${index !== numbers.length - 1 ? ',' : ''}`
-    }, num))
-  });
-});
-FootnoteLink.displayName = 'FootnoteLink';
-const copyShape = PropTypes.shape({
-  a11yLabel: PropTypes.string.isRequired
-});
-FootnoteLink.propTypes = {
-  ...selectedSystemPropTypes,
-  variant: variantProp.propType,
-  /**
-   * Use the `copy` prop to either select provided English or French copy by passing 'en' or 'fr' respectively.
-   * To provide your own, pass a JSON object with the key `a11yLabel`.
-   */
-  copy: PropTypes.oneOfType([PropTypes.oneOf(['en', 'fr']), copyShape]),
-  /**
-   * The footnote number, or multiple numbers if passed as an array.
-   * If using an array, a comma-separated group of numbers will be rendered as superscript.
-   */
-  number: PropTypes.oneOfType([PropTypes.number, PropTypes.arrayOf(PropTypes.number), PropTypes.string, PropTypes.arrayOf(PropTypes.string)]).isRequired,
-  /**
-   * A callback function to handle the click of a FootnoteLink.
-   */
-  onClick: PropTypes.func.isRequired,
-  /**
-   * Override default `fontSize` to set specific font size value
-   */
-  fontSize: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-};
-export default FootnoteLink;

package/lib-module/Footnote/dictionary.js

@@ -1,12 +0,0 @@
-export default {
-  en: {
-    a11yLabel: 'Read legal footnote',
-    close: 'close',
-    heading: 'Terms and conditions'
-  },
-  fr: {
-    a11yLabel: 'Lire la note de bas de page légale',
-    close: 'fermer',
-    heading: 'Modalités et conditions'
-  }
-};

package/lib-module/Footnote/index.js

@@ -1,4 +0,0 @@
-import Footnote from './Footnote';
-import FootnoteLink from './FootnoteLink';
-Footnote.Link = FootnoteLink;
-export default Footnote;

package/lib-module/IconButton/IconButton.js

@@ -1,55 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { IconButton as IconButtonBase, useThemeTokens, getTokensPropType } from '@telus-uds/components-base';
-import { jsx as _jsx } from "react/jsx-runtime";
-const IconButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    icon = null,
-    action,
-    tokens = {},
-    variant = {},
-    ...iconButtonProps
-  } = _ref;
-  const variantWithAction = action && !variant.action ? {
-    ...variant,
-    action
-  } : variant;
-  const {
-    icon: themeIcon
-  } = useThemeTokens('IconButton', tokens, variantWithAction);
-  return (
-    /*#__PURE__*/
-    // If we want the arrow icons to have directional animation instead of scale, we can pass
-    // either appropriate iconTransateX/Y here, or define and pass variants like { direction: 'left' }
-    // which have theme rules that set `iconTranslateX` tokens in the theme rules and unset `iconScale`.
-    _jsx(IconButtonBase, {
-      ref: ref,
-      ...iconButtonProps,
-      tokens: tokens,
-      variant: variant,
-      icon: icon ?? themeIcon
-    })
-  );
-});
-const multiBrandIconNames = ['add', 'subtract', 'close', 'play', 'moveUp', 'moveDown', 'moveLeft', 'moveRight', 'expand'];
-IconButton.displayName = 'IconButton';
-const propsWithoutIcon = _ref2 => {
-  let {
-    icon,
-    ...props
-  } = _ref2;
-  return props;
-};
-IconButton.propTypes = {
-  ...propsWithoutIcon(IconButtonBase.propTypes),
-  tokens: getTokensPropType('IconButton'),
-  /**
-   * To set the icon to a multi-brand compatabile icon
-   */
-  action: PropTypes.oneOf(multiBrandIconNames),
-  /**
-   * To set a custom icon
-   */
-  icon: PropTypes.func
-};
-export default IconButton;

package/lib-module/IconButton/index.js

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

package/lib-module/Image/Image.js

@@ -1,83 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { htmlAttrs, selectSystemProps, getTokensPropType } from '@telus-uds/components-base/server';
-import { warn } from '../utils/logger';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const Image = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    src,
-    width,
-    height,
-    alt,
-    rounded,
-    loading = 'eager',
-    tokens,
-    theme,
-    variant,
-    ...rest
-  } = _ref;
-  let {
-    borderRadius
-  } = theme;
-  const isCircle = rounded === 'circle';
-  const isCorners = rounded === 'corners';
-  const isSquare = width === height;
-  if (isCircle && !isSquare) {
-    warn('Image', 'rounded="circle" is not supported for non-square images. Please provide a square image, otherwise the resulting shape will not be a circle.');
-  }
-  if (isCircle) {
-    borderRadius = '50%';
-  } else if (isCorners) {
-    borderRadius = '4px';
-  }
-  const style = {
-    borderRadius,
-    height: height ?? 'auto',
-    maxWidth: '100%'
-  };
-  return /*#__PURE__*/_jsx("img", {
-    ...selectProps(rest),
-    style: style,
-    src: src,
-    width: width,
-    height: height,
-    alt: alt,
-    loading: loading,
-    ref: ref
-  });
-});
-Image.displayName = 'Image';
-Image.propTypes = {
-  ...selectedSystemPropTypes,
-  /**
-   * The src attribute for the HTML img element.
-   */
-
-  src: PropTypes.string.isRequired,
-  /**
-   * The alt attribute for the HTML img element. Setting this attribute to an empty string (alt="") indicates that this image is not a key part of the content, and that non-visual browsers may omit it from rendering.
-   */
-  alt: PropTypes.string.isRequired,
-  /**
-   * The image's width.
-   */
-  width: PropTypes.number.isRequired,
-  /**
-   * The image's height.
-   */
-  height: PropTypes.number,
-  /**
-   * Loading strategy.
-   * @default 'eager'
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
-   */
-  loading: PropTypes.oneOf(['eager', 'lazy']),
-  /**
-   * Make image render as a circle or with rounded corners.
-   */
-  rounded: PropTypes.oneOf(['circle', 'corners']),
-  tokens: getTokensPropType('Image')
-};
-Image.displayName = 'Image';
-export default Image;

package/lib-module/Image/index.js

@@ -1,9 +0,0 @@
-'use client';
-
-import Image from './Image';
-import withClientTheme from '../utils/theming/with-client-theme';
-
-// Exporting the unwrapped component separately for react-docgen to extract info for docsite
-export { Image as DefaultImage };
-const ClientThemedImage = withClientTheme(Image);
-export default ClientThemedImage;

package/lib-module/Image/server.js

@@ -1,4 +0,0 @@
-import withServerTheme from '../utils/theming/with-server-theme';
-import Image from './Image';
-const ServerThemedImage = withServerTheme(Image, 'Image');
-export default ServerThemedImage;

package/lib-module/List/List.js

@@ -1,2 +0,0 @@
-import { ListBase as List } from '@telus-uds/components-base';
-export default List;

package/lib-module/List/ListItem.js

@@ -1,28 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { ListItem as ListItemBase, Typography } from '@telus-uds/components-base';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const ListItem = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    children,
-    title,
-    ...rest
-  } = _ref;
-  return /*#__PURE__*/_jsxs(ListItemBase, {
-    ref: ref,
-    ...rest,
-    children: [Boolean(title) && /*#__PURE__*/_jsx(Typography, {
-      variant: {
-        size: 'h4'
-      },
-      children: title
-    }), children]
-  });
-});
-ListItem.displayName = 'ListItem';
-ListItem.propTypes = {
-  children: PropTypes.node.isRequired,
-  title: PropTypes.string
-};
-export default ListItem;

package/lib-module/List/index.js

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

package/lib-module/NavigationBar/NavigationBar.js

@@ -1,224 +0,0 @@
-var _withLinkRouter$propT, _withLinkRouter$propT2, _withLinkRouter$propT3, _withLinkRouter$propT4;
-import React from 'react';
-import PropTypes from 'prop-types';
-import { selectSystemProps, StackView, Typography, useResponsiveProp, withLinkRouter } from '@telus-uds/components-base';
-import styled from 'styled-components';
-import { htmlAttrs } from '../utils';
-import NavigationItem from './NavigationItem';
-import NavigationSubMenu from './NavigationSubMenu';
-import collapseItems from './collapseItems';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const Heading = /*#__PURE__*/styled.div.withConfig({
-  displayName: "NavigationBar__Heading",
-  componentId: "components-web__sc-1vis1gt-0"
-})({
-  alignItems: 'center',
-  display: 'flex',
-  flex: 1,
-  justifyContent: 'flex-start',
-  '> *': {
-    display: 'contents',
-    letterSpacing: 0
-  }
-});
-
-/**
- * NavigationBar can be used to allow customers to consistently navigate across
- * key pages within a specific product line
- */
-const NavigationBar = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    accessibilityRole = 'navigation',
-    heading,
-    headingLevel = 'h1',
-    items,
-    onChange = () => {},
-    selectedId,
-    LinkRouter,
-    linkRouterProps,
-    ...rest
-  } = _ref;
-  const direction = useResponsiveProp({
-    xs: 'column',
-    sm: 'row'
-  });
-  const itemsForViewport = useResponsiveProp({
-    xs: collapseItems(items, selectedId),
-    lg: items
-  });
-  const openOverlayRef = React.useRef(null);
-  const [openSubMenuId, setOpenSubMenuId] = React.useState(null);
-  const handleSubMenuClose = event => {
-    var _openOverlayRef$curre, _openOverlayRef$curre2;
-    if (event.type === 'keydown') {
-      if (event.key === 'Escape' || event.key === 27) {
-        setOpenSubMenuId(null);
-      }
-    } else if (event.type === 'click' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre = openOverlayRef.current) !== null && _openOverlayRef$curre !== void 0 && _openOverlayRef$curre.contains(event.target))) {
-      setOpenSubMenuId(null);
-    } else if (event.type === 'touchstart' && openOverlayRef !== null && openOverlayRef !== void 0 && openOverlayRef.current && event.touches[0].target && !(openOverlayRef !== null && openOverlayRef !== void 0 && (_openOverlayRef$curre2 = openOverlayRef.current) !== null && _openOverlayRef$curre2 !== void 0 && _openOverlayRef$curre2.contains(event.touches[0].target))) {
-      setOpenSubMenuId(null);
-    }
-  };
-  const navRefDefault = React.useRef(null);
-  const navRef = ref ?? navRefDefault;
-  const itemsRef = React.useRef(null);
-
-  // Close the submenu when the user clicks outside the navigation bar
-  const handleMouseDown = React.useCallback(event => {
-    if (navRef.current && itemsRef.current) {
-      // Get the bounding rectangles of the navigation bar and the items container
-      const navRect = navRef.current.getBoundingClientRect();
-      const itemsRect = itemsRef.current.getBoundingClientRect();
-
-      // Check if the click was outside the navigation bar and the items container
-      const isOutsideNav = event.clientX < navRect.left || event.clientX > navRect.right || event.clientY < navRect.top || event.clientY > navRect.bottom;
-      const isOutsideItems = event.clientX < itemsRect.left || event.clientX > itemsRect.right || event.clientY < itemsRect.top || event.clientY > itemsRect.bottom;
-      if (isOutsideNav && isOutsideItems) {
-        setOpenSubMenuId(null);
-      }
-    }
-  }, [navRef, itemsRef, setOpenSubMenuId]);
-
-  // TODO: create a custom hook for that and use here and in the Footnote
-  React.useEffect(() => {
-    // Add listeners for mouse clicks outside and for key presses
-    document.addEventListener('mousedown', handleMouseDown);
-    if (openSubMenuId !== null) {
-      window.addEventListener('click', handleSubMenuClose);
-      window.addEventListener('keydown', handleSubMenuClose);
-      window.addEventListener('touchstart', handleSubMenuClose);
-    }
-    return () => {
-      // Remove listeners when the component is unmounted
-      document.removeEventListener('mousedown', handleMouseDown);
-      if (openSubMenuId !== null) {
-        window.removeEventListener('click', handleSubMenuClose);
-        window.removeEventListener('keydown', handleSubMenuClose);
-        window.removeEventListener('touchstart', handleSubMenuClose);
-      }
-    };
-  }, [openSubMenuId, handleMouseDown]);
-  return /*#__PURE__*/_jsxs(StackView, {
-    accessibilityRole: accessibilityRole,
-    direction: direction,
-    ref: navRef,
-    space: 2,
-    tokens: {
-      alignItems: direction === 'column' ? 'flex-start' : 'center',
-      justifyContent: 'flex-end'
-    },
-    ...selectProps(rest),
-    children: [heading && /*#__PURE__*/_jsx(Heading, {
-      children: /*#__PURE__*/_jsx(Typography, {
-        variant: {
-          size: 'h5'
-        },
-        heading: headingLevel,
-        children: heading
-      })
-    }), itemsForViewport === null || itemsForViewport === void 0 ? void 0 : itemsForViewport.map((_ref2, index) => {
-      let {
-        href,
-        label,
-        id,
-        onClick,
-        ref: itemRef,
-        LinkRouter: ItemLinkRouter = LinkRouter,
-        linkRouterProps: itemLinkRouterProps,
-        items: nestedItems,
-        ...itemRest
-      } = _ref2;
-      const itemId = id ?? label;
-      const handleClick = event => {
-        if (nestedItems) {
-          setOpenSubMenuId(openSubMenuId !== itemId ? itemId : null);
-        }
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
-        onChange === null || onChange === void 0 ? void 0 : onChange(itemId, event);
-      };
-      const ItemComponent = nestedItems ? NavigationSubMenu : NavigationItem;
-      const isOpen = itemId === openSubMenuId;
-      return /*#__PURE__*/_jsx(ItemComponent, {
-        ref: itemRef,
-        href: href,
-        onClick: handleClick
-        // TODO: refactor to pass selected ID via context
-        ,
-        selectedId: selectedId,
-        index: index,
-        LinkRouter: ItemLinkRouter,
-        linkRouterProps: {
-          ...linkRouterProps,
-          ...itemLinkRouterProps
-        },
-        items: nestedItems,
-        selected: itemId === selectedId,
-        itemsContainerRef: itemsRef,
-        ...itemRest,
-        ...(nestedItems && {
-          isOpen
-        }),
-        ...(nestedItems && isOpen && {
-          openOverlayRef
-        }),
-        children: label
-      }, itemId);
-    })]
-  });
-});
-NavigationBar.displayName = 'NavigationBar';
-NavigationBar.propTypes = {
-  ...selectedSystemPropTypes,
-  ...withLinkRouter.propTypes,
-  /**
-   * NavigationBar pages
-   *
-   * Each `item` object must contain:
-   *  - `heading` - user-facing text in the tab link
-   *  - `href` - the URL of the page linked to. Do not use hash links, for content within a page, use `Tabs`.
-   *  - `id` - a stable, unique identifier of the page within the set. Not written into the HTML.
-   */
-  items: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    href: PropTypes.string,
-    id: PropTypes.string.isRequired,
-    onClick: PropTypes.func,
-    selected: PropTypes.bool,
-    LinkRouter: (_withLinkRouter$propT = withLinkRouter.propTypes) === null || _withLinkRouter$propT === void 0 ? void 0 : _withLinkRouter$propT.LinkRouter,
-    linkRouterProps: (_withLinkRouter$propT2 = withLinkRouter.propTypes) === null || _withLinkRouter$propT2 === void 0 ? void 0 : _withLinkRouter$propT2.linkRouterProps,
-    // One layer of nested links is allowed
-    items: PropTypes.arrayOf(PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      href: PropTypes.string,
-      id: PropTypes.string.isRequired,
-      onClick: PropTypes.func,
-      selected: PropTypes.bool,
-      LinkRouter: (_withLinkRouter$propT3 = withLinkRouter.propTypes) === null || _withLinkRouter$propT3 === void 0 ? void 0 : _withLinkRouter$propT3.LinkRouter,
-      linkRouterProps: (_withLinkRouter$propT4 = withLinkRouter.propTypes) === null || _withLinkRouter$propT4 === void 0 ? void 0 : _withLinkRouter$propT4.linkRouterProps
-    }))
-  })).isRequired,
-  /**
-   * Common navigation bar heading.
-   */
-  heading: PropTypes.string,
-  /**
-   * Sets the `headingLevel` of the `heading`
-   */
-  headingLevel: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'h6']),
-  /**
-   * Matches the `id` property of the item in `items` corresponding to the current page
-   */
-  selectedId: PropTypes.string.isRequired,
-  /**
-   * Optional function to be called on pressing a link
-   */
-  onChange: PropTypes.func,
-  /**
-   * Accesibility role for stackview
-   */
-  accessibilityRole: PropTypes.string
-};
-export default NavigationBar;

package/lib-module/NavigationBar/NavigationItem.js

@@ -1,87 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Button, selectSystemProps, useResponsiveProp, useViewport, useThemeTokensCallback, getTokensPropType } from '@telus-uds/components-base';
-import styled from 'styled-components';
-import { htmlAttrs } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-const defaultMaxWidth = 192;
-const ItemContainer = /*#__PURE__*/styled.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.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 = useResponsiveProp({
-    xs: 288,
-    lg: null
-  });
-  const viewport = useViewport();
-  const getTokens = useThemeTokensCallback('NavigationBar', tokens, variant);
-  const getStateTokens = state => getTokens({
-    ...state,
-    viewport
-  });
-  return /*#__PURE__*/_jsx(ItemContainer, {
-    targetWidth: targetWidth,
-    children: /*#__PURE__*/_jsx(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: getTokensPropType('NavigationBar'),
-  onClick: PropTypes.func,
-  selected: PropTypes.bool,
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]).isRequired
-};
-export default NavigationItem;