@telus-uds/components-web 1.7.0 → 1.8.0

package/lib/utils/useOverlaidPosition.js

@@ -0,0 +1,246 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("react");
+
+var _Dimensions = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Dimensions"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// TODO: add react-native as a peer dep and support native apps too.
+// That requires some fiddling with Allium repo storybook config, babel, etc,
+// unless ADS gets merged back into UDS monorepo.
+const adjustHorizontalToFit = (initialOffset, windowWidth, sourceWidth) => {
+  const offset = Math.max(0, initialOffset);
+  const otherEdgeOverflow = Math.max(0, offset + sourceWidth - windowWidth);
+  const tooWideBy = Math.max(0, otherEdgeOverflow - offset);
+  const adjusted = {
+    offset: Math.max(0, offset - otherEdgeOverflow)
+  };
+  if (tooWideBy) adjusted.width = Math.max(0, sourceWidth - tooWideBy);
+  return adjusted;
+};
+
+const getPosition = _ref => {
+  let {
+    edge,
+    fromEdge,
+    sourceSize
+  } = _ref;
+
+  switch (edge) {
+    case 'near':
+      return fromEdge;
+
+    case 'mid':
+      return fromEdge + sourceSize / 2;
+
+    case 'far':
+      return fromEdge + sourceSize;
+
+    default:
+      return 0;
+  }
+};
+
+const getEdgeType = (align, alignSide) => {
+  const alignTo = align[alignSide];
+  const edge = ['center', 'middle'].includes(alignTo) && 'mid' || (alignSide === alignTo ? 'near' : 'far');
+  return edge;
+};
+/**
+ * Based on UDS's private getTooltipPosition but generalised.
+ *
+ * Used for absolute positioning of the tooltip. Since the tooltip is always centered relatively
+ * to the source (button) and we have a limited set of positions, an easy and consistent way
+ * of positioning it is to check all of the possible positions and pick one that will be rendered
+ * within the window bounds. This way we can also rely on the tooltip being actually rendered
+ * before it is shown, which makes it account for the width being limiting in styles, custom font
+ * rendering, etc.
+ */
+
+
+function getOverlaidPosition(_ref2) {
+  let {
+    sourceLayout,
+    targetDimensions,
+    windowDimensions,
+    offsets = {},
+    align
+  } = _ref2;
+  // Web-only: this will be difficult to mimic on native because there's no global scroll position.
+  // TODO: wire something in e.g. a scroll ref accessible from a provider included in Allium provider
+  // that can be passed to the appropriate ScrollView?
+  const {
+    scrollX = 0,
+    scrollY = 0
+  } = typeof window === 'object' ? window : {}; // Will have top, bottom, left and/or right offsets depending on `align`
+
+  const positioning = {};
+  if (align.top) positioning.top = getPosition({
+    edge: getEdgeType(align, 'top'),
+    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0),
+    sourceSize: sourceLayout.height
+  });
+  if (align.middle) positioning.top = getPosition({
+    edge: getEdgeType(align, 'middle'),
+    fromEdge: sourceLayout.y + scrollY + (offsets.vertical ?? 0) - targetDimensions.height / 2,
+    sourceSize: sourceLayout.height
+  });
+  if (align.bottom) positioning.bottom = getPosition({
+    edge: getEdgeType(align, 'bottom'),
+    fromEdge: windowDimensions.height - (sourceLayout.y + scrollY + sourceLayout.height - (offsets.vertical ?? 0)),
+    sourceSize: sourceLayout.height
+  });
+  if (align.left) positioning.left = getPosition({
+    edge: getEdgeType(align, 'left'),
+    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0),
+    sourceSize: sourceLayout.width
+  });
+  if (align.center) positioning.left = getPosition({
+    edge: getEdgeType(align, 'center'),
+    fromEdge: sourceLayout.x + scrollX + (offsets.horizontal ?? 0) - targetDimensions.width / 2,
+    sourceSize: sourceLayout.width
+  });
+  if (align.right) positioning.right = getPosition({
+    edge: getEdgeType(align, 'right'),
+    fromEdge: windowDimensions.width - (sourceLayout.x + scrollX + sourceLayout.width - (offsets.horizontal ?? 0)),
+    sourceSize: sourceLayout.width
+  });
+
+  if (!(align.left && align.right)) {
+    // Check if the position and/or width need adjusting to fit on the screen
+    const side = align.right ? 'right' : 'left';
+    const adjusted = adjustHorizontalToFit(positioning[side], windowDimensions.width, sourceLayout.width);
+    if (typeof adjusted.width === 'number') positioning.width = adjusted.width;
+
+    if (typeof adjusted.offset === 'number') {
+      positioning[side] = adjusted.offset;
+    }
+  }
+
+  return positioning;
+}
+/**
+ * Positions an element in a modal or portal so that it appears tooltip-like below the
+ * target element.
+ *
+ * @TODO - add support for positioning other than 'below' like UDS's tooltip (this is not
+ * a small task because UDS's tooltip logic only really works for short text - it might be
+ * better to use a third-party library).
+ */
+
+
+const useOverlaidPosition = _ref3 => {
+  let {
+    isShown = false,
+    offsets,
+    // By default, align the overlaid target's `top` to the bottom of the source, and center horizontally.
+    align = {
+      center: 'center',
+      top: 'bottom'
+    }
+  } = _ref3;
+  // Element in main document flow that the targetRef element is positioned around
+  const sourceRef = (0, _react.useRef)(null);
+  const [sourceLayout, setSourceLayout] = (0, _react.useState)(null); // Element in a modal or portal overlay positioned to appear adjacent to sourceRef
+
+  const targetRef = (0, _react.useRef)(null);
+  const [targetDimensions, setTargetDimensions] = (0, _react.useState)(null);
+  const [windowDimensions, setWindowDimensions] = (0, _react.useState)(null);
+  const onTargetLayout = (0, _react.useCallback)(_ref4 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          height
+        }
+      }
+    } = _ref4;
+    // NOTE: UDS's Tooltip logic injects some additional width to allow for antialiasing etc of text,
+    // avoiding adding unnecessary line breaks to text that is slightly wider than it thinks it is.
+    // That is probably something specific to text tooltips that doesn't belong in a generic hook.
+    setTargetDimensions(previousDimensions => {
+      // Re-render on first non-zero width / height: avoid infinite loops on changes, or mispositioning
+      // if user scrolls while a slidedown animation is changing the height and recalculating position.
+      if (!previousDimensions && width && height) {
+        return {
+          width,
+          height
+        };
+      }
+
+      return previousDimensions;
+    });
+  }, []);
+  const readyToShow = Boolean(isShown && sourceRef.current);
+  (0, _react.useEffect)(() => {
+    const handleDimensionsChange = _ref5 => {
+      var _sourceRef$current;
+
+      let {
+        window
+      } = _ref5;
+      (_sourceRef$current = sourceRef.current) === null || _sourceRef$current === void 0 ? void 0 : _sourceRef$current.measureInWindow((x, y, width, height) => {
+        // Could add a debouncer here if there's too many rerenders during gradual resizes
+        setWindowDimensions(window);
+        setSourceLayout({
+          x,
+          y,
+          width,
+          height
+        });
+      });
+    };
+
+    let subscription;
+
+    const unsubscribe = () => {
+      var _subscription;
+
+      if (typeof ((_subscription = subscription) === null || _subscription === void 0 ? void 0 : _subscription.remove) === 'function') {
+        // React Native >=0.65.0
+        subscription.remove();
+      } else if (typeof _Dimensions.default.removeEventListener === 'function') {
+        // React Native <0.65.0
+        _Dimensions.default.removeEventListener('change', handleDimensionsChange);
+      }
+
+      setSourceLayout(null);
+      setTargetDimensions(null);
+    };
+
+    if (readyToShow) {
+      subscription = _Dimensions.default.addEventListener('change', handleDimensionsChange);
+      handleDimensionsChange({
+        window: _Dimensions.default.get('window')
+      });
+    } else {
+      unsubscribe();
+    }
+
+    return unsubscribe;
+  }, [readyToShow]);
+  const isReady = Boolean(isShown && sourceLayout && windowDimensions && targetDimensions);
+  const overlaidPosition = isReady ? getOverlaidPosition({
+    sourceLayout,
+    targetDimensions,
+    windowDimensions,
+    offsets,
+    align
+  }) : {};
+  return {
+    overlaidPosition,
+    sourceRef,
+    targetRef,
+    onTargetLayout,
+    isReady
+  };
+};
+
+var _default = useOverlaidPosition;
+exports.default = _default;

package/lib-module/BlockQuote/BlockQuote.js

@@ -0,0 +1,156 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Link, selectSystemProps, StackView, Typography, useThemeTokens, withLinkRouter } from '@telus-uds/components-base';
+import styled from 'styled-components';
+import { htmlAttrs, transformGradient } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
+const BlockQuoteContainer = /*#__PURE__*/styled.blockquote.withConfig({
+  displayName: "BlockQuote__BlockQuoteContainer",
+  componentId: "components-web__sc-vals3u-0"
+})(["margin:0;position:relative;padding-left:", ";padding-right:", ";padding-bottom:", ";padding-top:", ";&::before{content:'';left:0;top:0;position:absolute;height:100%;width:", ";background:", ";}"], _ref => {
+  let {
+    paddingLeft
+  } = _ref;
+  return `${paddingLeft}px`;
+}, _ref2 => {
+  let {
+    paddingRight
+  } = _ref2;
+  return `${paddingRight}px`;
+}, _ref3 => {
+  let {
+    paddingBottom
+  } = _ref3;
+  return `${paddingBottom}px`;
+}, _ref4 => {
+  let {
+    paddingTop
+  } = _ref4;
+  return `${paddingTop}px`;
+}, _ref5 => {
+  let {
+    width
+  } = _ref5;
+  return `${width}px`;
+}, _ref6 => {
+  let {
+    backgroundGradient
+  } = _ref6;
+  return backgroundGradient && transformGradient(backgroundGradient);
+});
+const QuoteContainer = /*#__PURE__*/styled.div.withConfig({
+  displayName: "BlockQuote__QuoteContainer",
+  componentId: "components-web__sc-vals3u-1"
+})(["margin-bottom:", ";"], _ref7 => {
+  let {
+    marginBottom
+  } = _ref7;
+  return `${marginBottom}px`;
+});
+
+const BlockQuote = _ref8 => {
+  let {
+    children,
+    link,
+    additionalInfo,
+    linkHref,
+    textStyle = 'large',
+    LinkRouter,
+    linkRouterProps,
+    tokens,
+    variant,
+    ...rest
+  } = _ref8;
+  const {
+    color,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    marginBottom,
+    width,
+    backgroundGradient
+  } = useThemeTokens('BlockQuote', tokens, variant);
+  const mappedTextSize = textStyle === 'heading' ? 'h3' : textStyle;
+
+  const renderLink = () => {
+    if (linkHref) {
+      return /*#__PURE__*/_jsx(Link, {
+        href: linkHref,
+        tokens: {
+          blockFontWeight: '500',
+          color
+        },
+        variant: {
+          alternative: true
+        },
+        LinkRouter: LinkRouter,
+        linkRouterProps: linkRouterProps,
+        children: link
+      });
+    }
+
+    return /*#__PURE__*/_jsx(Typography, {
+      tokens: {
+        color,
+        fontWeight: '500'
+      },
+      children: link
+    });
+  };
+
+  const renderQuote = () => {
+    const quote = /*#__PURE__*/_jsx(Typography, {
+      tokens: {
+        color,
+        fontWeight: '400'
+      },
+      variant: {
+        size: mappedTextSize
+      },
+      children: children
+    });
+
+    if (additionalInfo || link) {
+      return /*#__PURE__*/_jsx(QuoteContainer, {
+        marginBottom: marginBottom,
+        children: quote
+      });
+    }
+
+    return quote;
+  };
+
+  return /*#__PURE__*/_jsxs(BlockQuoteContainer, { ...selectProps(rest),
+    paddingTop: paddingTop,
+    paddingBottom: paddingBottom,
+    paddingLeft: paddingLeft,
+    paddingRight: paddingRight,
+    width: width,
+    backgroundGradient: backgroundGradient,
+    children: [renderQuote(), (additionalInfo || link) && /*#__PURE__*/_jsxs(StackView, {
+      space: 0,
+      children: [link && renderLink(), additionalInfo && /*#__PURE__*/_jsx(Typography, {
+        tokens: {
+          color
+        },
+        variant: {
+          size: 'small'
+        },
+        children: additionalInfo
+      })]
+    })]
+  });
+};
+
+BlockQuote.propTypes = { ...selectedSystemPropTypes,
+  ...withLinkRouter.propTypes,
+  children: PropTypes.node.isRequired,
+  link: PropTypes.string,
+  linkHref: PropTypes.string,
+  additionalInfo: PropTypes.string,
+  textStyle: PropTypes.oneOf(['large', 'heading'])
+};
+export default BlockQuote;

package/lib-module/BlockQuote/index.js

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

package/lib-module/IconButton/IconButton.js

@@ -0,0 +1,52 @@
+import React, { forwardRef } from 'react';
+import PropTypes from 'prop-types';
+import { IconButton as IconButtonBase, useThemeTokens } from '@telus-uds/components-base';
+import { jsx as _jsx } from "react/jsx-runtime";
+const IconButton = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    icon,
+    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),
+  // eslint-disable-next-line react/require-default-props
+  action: PropTypes.oneOf(multiBrandIconNames),
+  icon: PropTypes.func
+};
+IconButton.defaultProps = {
+  icon: null
+};
+export default IconButton;

package/lib-module/IconButton/index.js

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

package/lib-module/Listbox/GroupControl.js

@@ -0,0 +1,80 @@
+import React from 'react';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import { Icon, Spacer, useThemeTokens } from '@telus-uds/components-base';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+const StyledControlWrapper = /*#__PURE__*/styled.div.withConfig({
+  displayName: "GroupControl__StyledControlWrapper",
+  componentId: "components-web__sc-1r7ts3q-0"
+})(_ref => {
+  let {
+    focus,
+    tokens
+  } = _ref;
+  return {
+    fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
+    fontSize: tokens.groupFontSize,
+    color: tokens.groupColor,
+    textDecoration: tokens.itemTextDecoration,
+    backgroundColor: tokens.groupBackgroundColor,
+    outline: tokens.itemOutline,
+    width: '100%',
+    display: 'flex',
+    justifyContent: 'space-between',
+    ...(focus ? {
+      border: `${tokens.groupBorderWidth} solid ${tokens.groupBorderColor}`,
+      borderRadius: tokens.groupBorderRadius,
+      paddingLeft: `calc(${tokens.groupPaddingLeft}px - ${tokens.groupBorderWidth}px)`,
+      paddingRight: `calc(${tokens.groupPaddingRight}px - ${tokens.groupBorderWidth}px)`,
+      paddingTop: `calc(${tokens.groupPaddingTop}px - ${tokens.groupBorderWidth}px)`,
+      paddingBottom: `calc(${tokens.groupPaddingBottom}px - ${tokens.groupBorderWidth}px)`
+    } : {
+      paddingLeft: tokens.groupPaddingLeft,
+      paddingRight: tokens.groupPaddingRight,
+      paddingTop: tokens.groupPaddingTop,
+      paddingBottom: tokens.groupPaddingBottom
+    })
+  };
+});
+
+const GroupControl = _ref2 => {
+  let {
+    expanded,
+    pressed,
+    hover,
+    focus,
+    current,
+    label
+  } = _ref2;
+  const tokens = useThemeTokens('ListBox', {}, {}, {
+    expanded,
+    pressed,
+    hover,
+    current,
+    focus
+  });
+  return /*#__PURE__*/_jsxs(StyledControlWrapper, {
+    focus,
+    tokens,
+    children: [label, /*#__PURE__*/_jsx(Spacer, {
+      space: 1,
+      direction: "row"
+    }), /*#__PURE__*/_jsx(Icon, {
+      icon: tokens.groupIcon,
+      variant: {
+        size: 'micro'
+      }
+    })]
+  });
+};
+
+GroupControl.propTypes = {
+  expanded: PropTypes.bool,
+  pressed: PropTypes.bool,
+  hover: PropTypes.bool,
+  focus: PropTypes.bool,
+  current: PropTypes.bool,
+  label: PropTypes.string
+};
+export default GroupControl;

package/lib-module/Listbox/Listbox.js

@@ -0,0 +1,142 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { ExpandCollapse, withLinkRouter } from '@telus-uds/components-base';
+import ListboxGroup from './ListboxGroup';
+import ListboxItem from './ListboxItem';
+import DropdownOverlay from './ListboxOverlay';
+import resolveItemSelection from '../NavigationBar/resolveItemSelection';
+import { createElement as _createElement } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledList = /*#__PURE__*/styled.ul.withConfig({
+  displayName: "Listbox__StyledList",
+  componentId: "components-web__sc-1564thh-0"
+})({
+  margin: 0,
+  padding: 0,
+  listStyle: 'none'
+});
+
+const getInitialOpen = (items, selectedId) => items.filter(item => item.items && item.items.some(nestedItem => (nestedItem.id ?? nestedItem.label) === selectedId)).map(item => item.id ?? item.label);
+
+const Listbox = _ref => {
+  let {
+    items = [],
+    firstItemRef = null,
+    // focus will be moved to this one once within the menu
+    parentRef = null,
+    // to return focus to after leaving the last menu item
+    selectedId,
+    LinkRouter,
+    itemRouterProps,
+    onClose
+  } = _ref;
+  const initialOpen = getInitialOpen(items, selectedId); // We need to keep track of each item's ref in order to be able to
+  // focus on a specific item via keyboard navigation
+
+  const itemRefs = useRef([]);
+  if (firstItemRef !== null && firstItemRef !== void 0 && firstItemRef.current) itemRefs.current[0] = firstItemRef.current;
+  const [focusedIndex, setFocusedIndex] = useState(0);
+  const handleKeydown = useCallback(event => {
+    const nextItemRef = itemRefs.current[focusedIndex + 1];
+    const prevItemRef = itemRefs.current[focusedIndex - 1];
+
+    if (event.key === 'ArrowUp' || event.shiftKey && event.key === 'Tab') {
+      var _parentRef$current;
+
+      // Move the focus to the previous item or to the parent one if on the first
+      if (prevItemRef) {
+        event.preventDefault();
+        prevItemRef.focus();
+      } else if (parentRef) (_parentRef$current = parentRef.current) === null || _parentRef$current === void 0 ? void 0 : _parentRef$current.focus();
+
+      setFocusedIndex(focusedIndex - 1);
+    } else if ((event.key === 'ArrowDown' || event.key === 'Tab') && nextItemRef) {
+      event.preventDefault();
+      setFocusedIndex(focusedIndex + 1);
+      nextItemRef.focus();
+    } else if (event.key === 'Escape') {
+      var _parentRef$current2, _parentRef$current3;
+
+      // Close the dropdown
+      parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current2 = parentRef.current) === null || _parentRef$current2 === void 0 ? void 0 : _parentRef$current2.click(); // Return focus to the dropdown control after leaving the last item
+
+      parentRef === null || parentRef === void 0 ? void 0 : (_parentRef$current3 = parentRef.current) === null || _parentRef$current3 === void 0 ? void 0 : _parentRef$current3.focus();
+      if (onClose) onClose(event);
+    }
+  }, [focusedIndex, onClose, parentRef]); // Add listeners for mouse clicks outside and for key presses
+
+  useEffect(() => {
+    window.addEventListener('click', onClose);
+    window.addEventListener('keydown', handleKeydown);
+    window.addEventListener('touchstart', onClose);
+    return () => {
+      window.removeEventListener('click', onClose);
+      window.removeEventListener('keydown', handleKeydown);
+      window.removeEventListener('touchstart', onClose);
+    };
+  }, [onClose, handleKeydown]);
+  return /*#__PURE__*/_jsx(ExpandCollapse, {
+    initialOpen: initialOpen,
+    maxOpen: 1,
+    children: expandProps => /*#__PURE__*/_jsx(StyledList, {
+      role: "listbox",
+      children: items.map((item, index) => {
+        const {
+          id,
+          label,
+          items: nestedItems
+        } = item;
+        const {
+          itemId,
+          selected
+        } = resolveItemSelection({
+          id,
+          label,
+          items: nestedItems
+        }, selectedId); // Give `firstItemRef` to the first focusable item
+
+        const itemRef = index === 0 && !itemId !== selectedId || index === 1 && items[0].id === selectedId ? firstItemRef : ref => {
+          itemRefs.current[index] = ref;
+          return ref;
+        };
+        return nestedItems ? /*#__PURE__*/_createElement(ListboxGroup, { ...item,
+          selectedId: selectedId,
+          key: itemId,
+          expandProps: expandProps,
+          LinkRouter: LinkRouter,
+          itemRouterProps: itemRouterProps,
+          prevItemRef: itemRefs.current[index - 1] ?? null,
+          nextItemRef: itemRefs.current[index + 1] ?? null,
+          ref: itemRef
+        }) : /*#__PURE__*/_createElement(ListboxItem, { ...item,
+          selected: selected,
+          key: itemId,
+          LinkRouter: LinkRouter,
+          itemRouterProps: itemRouterProps,
+          prevItemRef: itemRefs.current[index - 1] ?? null,
+          nextItemRef: itemRefs.current[index + 1] ?? null,
+          ref: itemRef
+        });
+      })
+    })
+  });
+};
+
+Listbox.propTypes = { ...withLinkRouter.propTypes,
+
+  /**
+   * Focus will be moved to the item with this ref once within the menu.
+   */
+  firstItemRef: PropTypes.object,
+
+  /**
+   * Focus will be returned to the dropdown control with this ref after leaving
+   * the last menu item.
+   */
+  parentRef: PropTypes.object,
+  items: PropTypes.array,
+  selectedId: PropTypes.string
+};
+Listbox.Overlay = DropdownOverlay;
+export default Listbox;