@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/esm/Timeline/Timeline.js

@@ -0,0 +1,168 @@
+import PropTypes from 'prop-types';
+import React from 'react';
+import Platform from "react-native-web/dist/exports/Platform";
+import View from "react-native-web/dist/exports/View";
+import { useThemeTokens } from '../ThemeProvider';
+import { getTokensPropType, variantProp, a11yProps, viewProps, selectSystemProps, getA11yPropsFromHtmlTag, layoutTags } from '../utils';
+import { useViewport } from '../ViewportProvider';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const selectDotStyles = _ref => {
+  let {
+    dotWidth,
+    timelineColor,
+    dotBorderWidth,
+    dotColor
+  } = _ref;
+  return {
+    width: dotWidth,
+    height: dotWidth,
+    borderRadius: dotWidth / 2,
+    backgroundColor: dotColor,
+    borderWidth: dotBorderWidth,
+    borderColor: timelineColor
+  };
+};
+const selectConnectorStyles = _ref2 => {
+  let {
+    timelineConnectorColor,
+    connectorHeight,
+    connectorWidth
+  } = _ref2;
+  return {
+    width: connectorWidth,
+    height: connectorHeight,
+    backgroundColor: timelineConnectorColor
+  };
+};
+const selectTimelineContainerStyle = _ref3 => {
+  let {
+    timelineContainerDirection
+  } = _ref3;
+  return {
+    flexDirection: timelineContainerDirection
+  };
+};
+const selectLineItemStyles = _ref4 => {
+  let {
+    lineItemAlign,
+    lineItemDirection,
+    lineItemMarginBottom,
+    lineItemMarginRight
+  } = _ref4;
+  return {
+    alignItems: lineItemAlign,
+    flexDirection: lineItemDirection,
+    marginBottom: lineItemMarginBottom,
+    marginRight: lineItemMarginRight,
+    overflow: 'hidden'
+  };
+};
+const selectLineItemContainer = _ref5 => {
+  let {
+    lineItemContainerDirection,
+    lineContainerFlexSize
+  } = _ref5;
+  return {
+    flexDirection: lineItemContainerDirection,
+    flex: lineContainerFlexSize
+  };
+};
+const selectItemContentStyles = (_ref6, isLastChild) => {
+  let {
+    itemContentFlexSize,
+    itemContentMarginBottom,
+    itemContentMarginRight
+  } = _ref6;
+  return {
+    flex: itemContentFlexSize,
+    marginBottom: !isLastChild && itemContentMarginBottom,
+    marginRight: !isLastChild && itemContentMarginRight
+  };
+};
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+
+/**
+ * Timeline is a component that displays either a horizontal or vertical list of the
+ * children components passed by props
+ *
+ * ## Component API
+ *
+ * - `horizontal` In order to display the Component list horizontally
+ *
+ *
+ * ## A11y guidelines
+ * Timeline link supports all the common a11y props.
+ */
+const Timeline = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+  let {
+    tokens,
+    variant = {},
+    children,
+    accessibilityLabel,
+    tag = 'ul',
+    childrenTag = 'li',
+    ...rest
+  } = _ref7;
+  const viewport = useViewport();
+  const themeTokens = useThemeTokens('Timeline', tokens, variant, {
+    viewport
+  });
+  const containerProps = {
+    ...selectProps(rest),
+    ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole || 'list'),
+    accessibilityLabel
+  };
+  return /*#__PURE__*/_jsx(View, {
+    ...containerProps,
+    ref: ref,
+    style: selectTimelineContainerStyle(themeTokens),
+    children: children.map((child, index) => {
+      const accessibilityRole = Platform.OS !== 'android' ? 'listitem' : undefined;
+      const childrenProps = {
+        ...getA11yPropsFromHtmlTag(childrenTag, child?.props?.accessibilityRole || accessibilityRole)
+      };
+      return /*#__PURE__*/_jsxs(View, {
+        style: selectLineItemContainer(themeTokens)
+        // eslint-disable-next-line react/no-array-index-key
+        ,
+        ...childrenProps,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: selectLineItemStyles(themeTokens),
+          children: [/*#__PURE__*/_jsx(View, {
+            style: selectDotStyles(themeTokens)
+          }), /*#__PURE__*/_jsx(View, {
+            style: selectConnectorStyles(themeTokens)
+          })]
+        }), /*#__PURE__*/_jsx(View, {
+          style: selectItemContentStyles(themeTokens, index + 1 === children.length),
+          children: child
+        })]
+      }, `timeline-${index}-${child.displayName}`);
+    })
+  });
+});
+Timeline.displayName = 'Timeline';
+Timeline.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: getTokensPropType('Timeline'),
+  variant: variantProp.propType,
+  /**
+   * A list of components that will be rendered either horizontally or vertically
+   */
+  children: PropTypes.arrayOf(PropTypes.node).isRequired,
+  /**
+   * A required accessibility label that needs to be passed to be used on List
+   * which is applied as normal for a React Native accessibilityLabel prop.
+   */
+  accessibilityLabel: PropTypes.string.isRequired,
+  /**
+   * Sets the HTML tag of the outer container and the children. By default `'li'` for the children
+   * and `'ul'` for the container
+   *
+   * If either `tag` or `childrenTag` is overridden, the other should be too, to avoid producing invalid HTML.
+   *
+   */
+  tag: PropTypes.oneOf(layoutTags),
+  childrenTag: PropTypes.oneOf(layoutTags)
+};
+export default Timeline;

package/lib/esm/Tooltip/Tooltip.native.js

@@ -0,0 +1,363 @@
+import React from 'react';
+import Dimensions from "react-native-web/dist/exports/Dimensions";
+import Platform from "react-native-web/dist/exports/Platform";
+import Pressable from "react-native-web/dist/exports/Pressable";
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import Text from "react-native-web/dist/exports/Text";
+import View from "react-native-web/dist/exports/View";
+import propTypes from './shared';
+import { applyShadowToken, applyTextStyles, useThemeTokens } from '../ThemeProvider';
+import { a11yProps, selectSystemProps, selectTokens, viewProps } from '../utils';
+import Backdrop from './Backdrop';
+import getTooltipPosition from './getTooltipPosition';
+import TooltipButton from '../TooltipButton';
+import useCopy from '../utils/useCopy';
+import dictionary from './dictionary';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const selectTooltipStyles = _ref => {
+  let {
+    backgroundColor,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    borderRadius
+  } = _ref;
+  return {
+    backgroundColor,
+    paddingTop,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    borderRadius
+  };
+};
+const selectTooltipShadowStyles = _ref2 => {
+  let {
+    shadow,
+    borderRadius
+  } = _ref2;
+  return {
+    borderRadius,
+    ...applyShadowToken(shadow)
+  };
+};
+const selectToolTipSizeStyles = _ref3 => {
+  let {
+    maxWidth,
+    minWidth
+  } = _ref3;
+  return {
+    maxWidth,
+    minWidth
+  };
+};
+const selectTooltipPositionStyles = _ref4 => {
+  let {
+    top,
+    left,
+    width
+  } = _ref4;
+  return {
+    top,
+    left,
+    width
+  };
+};
+const selectArrowStyles = (_ref5, _ref6) => {
+  let {
+    backgroundColor,
+    arrowWidth,
+    arrowBorderRadius,
+    shadow
+  } = _ref5;
+  let {
+    position,
+    width: tooltipWidth,
+    height: tooltipHeight
+  } = _ref6;
+  // the arrow width is actually a diagonal of the rectangle that we'll use as a tip
+  const rectangleSide = Math.sqrt(arrowWidth * arrowWidth / 2);
+
+  // position the arrow at the side and center of the tooltip - this happens before rotation
+  // so we use the rectangle size as basis
+  const verticalOffset = -1 * rectangleSide / 2;
+  const horizontalOffset = rectangleSide / 2;
+
+  // percentage-based absolute positioning doesn't act well on native, so we have to
+  // calculate the pixel values
+  const directionalStyles = {
+    above: {
+      bottom: verticalOffset,
+      left: tooltipWidth / 2 - horizontalOffset,
+      transform: [{
+        rotateZ: '45deg'
+      }]
+    },
+    below: {
+      top: verticalOffset,
+      left: tooltipWidth / 2 - horizontalOffset,
+      transform: [{
+        rotateZ: '-135deg'
+      }]
+    },
+    left: {
+      right: verticalOffset,
+      top: tooltipHeight <= 45 ? tooltipHeight / 2 - horizontalOffset : tooltipHeight - (tooltipHeight - 10),
+      transform: [{
+        rotateZ: '-45deg'
+      }]
+    },
+    right: {
+      left: verticalOffset,
+      top: tooltipHeight <= 45 ? tooltipHeight / 2 - horizontalOffset : tooltipHeight - (tooltipHeight - 10),
+      transform: [{
+        rotateZ: '135deg'
+      }]
+    }
+  };
+  return {
+    backgroundColor,
+    width: rectangleSide,
+    height: rectangleSide,
+    borderBottomRightRadius: arrowBorderRadius,
+    // this corner will be the arrow tip after rotation
+    ...applyShadowToken(shadow),
+    ...directionalStyles[position]
+  };
+};
+const selectTextStyles = tokens => applyTextStyles(selectTokens('Typography', tokens));
+const defaultControl = (pressableState, variant, tokens) => /*#__PURE__*/_jsx(TooltipButton, {
+  pressableState: pressableState,
+  variant: variant,
+  tokens: tokens
+});
+
+/**
+ * Tooltip provides a descriptive and detailed explanation or instructions. It can be used next to an input label
+ * to help a user fill it in, or as a standalone component.
+ *
+ * By default the TooltipButton component will be used as a control for triggering the tooltip, but you may attach
+ * a tooltip to any other component. A render function can be used to adjust the control's styling on state changes (hover, focus, etc.).
+ *
+ * ### Positioning
+ * By default a Tooltip will be automatically positioned in a way that ensures it fits within the viewport.
+ * You may suggest a position with a prop - it will be used, unless the tooltip would end up outside the viewport.
+ *
+ * ### Usage criteria
+ * - You may use one when the information is useful only to a small percentage of users (ie. tech savvy people wouldn't need this info).
+ * - Tooltips may also be useful when vertical space is an issue.
+ */
+const Tooltip = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
+  let {
+    children,
+    content,
+    position = 'auto',
+    copy = 'en',
+    onPress = () => {},
+    tokens,
+    variant,
+    inline = false,
+    nativeID,
+    activateOnHover = false,
+    tooltipButtonTokens,
+    ...rest
+  } = _ref7;
+  const [isOpen, setIsOpen] = React.useState(false);
+  const controlRef = React.useRef();
+  const [controlLayout, setControlLayout] = React.useState(null);
+  const [tooltipDimensions, setTooltipDimensions] = React.useState(null);
+  const [windowDimensions, setWindowDimensions] = React.useState(Dimensions.get('window'));
+  const [tooltipPosition, setTooltipPosition] = React.useState(null);
+  const getCopy = useCopy({
+    dictionary,
+    copy
+  });
+  const themeTokens = useThemeTokens('Tooltip', tokens, variant);
+  const {
+    arrowWidth,
+    arrowOffset
+  } = themeTokens;
+  React.useEffect(() => {
+    const subscription = Dimensions.addEventListener('change', _ref8 => {
+      let {
+        window
+      } = _ref8;
+      setWindowDimensions(window);
+    });
+    return () => subscription?.remove();
+  });
+  const toggleIsOpen = () => {
+    onPress();
+    setIsOpen(!isOpen);
+  };
+  const close = () => setIsOpen(false);
+  const getPressableState = _ref9 => {
+    let {
+      pressed,
+      hovered,
+      focused
+    } = _ref9;
+    return {
+      pressed,
+      hover: hovered,
+      focus: focused
+    };
+  };
+  const onTooltipLayout = _ref10 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          height
+        }
+      }
+    } = _ref10;
+    if (tooltipDimensions === null || tooltipDimensions.width !== width || tooltipDimensions.height !== height) {
+      setTooltipDimensions({
+        width: Platform.select({
+          web: width + 0.3,
+          // avoids often unnecessary line breaks due to subpixel rendering of fonts
+          native: width
+        }),
+        height
+      });
+    }
+  };
+  React.useEffect(() => {
+    if (isOpen) {
+      controlRef.current.measureInWindow((x, y, width, height) => {
+        setControlLayout({
+          x,
+          y,
+          width,
+          height
+        });
+      });
+    } else {
+      setControlLayout(null);
+      setTooltipDimensions(null);
+      setTooltipPosition(null);
+    }
+  }, [isOpen]);
+  React.useEffect(() => {
+    setIsOpen(false);
+  }, [windowDimensions]);
+  React.useEffect(() => {
+    if (tooltipPosition !== null && !tooltipPosition?.isNormalized || !isOpen || controlLayout === null || tooltipDimensions == null) {
+      return;
+    }
+    const updatedPosition = getTooltipPosition(position, {
+      controlLayout,
+      tooltipDimensions,
+      windowDimensions,
+      arrowWidth,
+      arrowOffset
+    });
+
+    // avoid ending up in an infinite normalization loop
+    if (tooltipPosition?.isNormalized && updatedPosition.isNormalized) {
+      return;
+    }
+    setTooltipPosition(updatedPosition);
+  }, [isOpen, position, tooltipDimensions, controlLayout, windowDimensions, arrowWidth, arrowOffset, tooltipPosition]);
+  React.useEffect(() => {
+    if (Platform.OS !== 'web') {
+      return undefined;
+    }
+    const handleHover = event => {
+      if (activateOnHover) {
+        const isInsideControl = controlRef.current && controlRef.current.contains(event.target);
+        if (isInsideControl) {
+          if (!isOpen) {
+            setIsOpen(!isOpen);
+          }
+        } else {
+          close();
+        }
+      }
+    };
+    document.addEventListener('mouseover', handleHover, {
+      capture: true
+    });
+    return () => {
+      document.removeEventListener('mouseover', handleHover, {
+        capture: true
+      });
+    };
+  }, [controlLayout, activateOnHover, isOpen, onPress]);
+  const control = children !== undefined ? children : defaultControl;
+  const pressableStyles = control === defaultControl ? Platform.select({
+    web: {
+      outline: 'none'
+    }
+  }) : undefined;
+  const pressableHitSlop = control === defaultControl ? {
+    top: 10,
+    bottom: 10,
+    left: 10,
+    right: 10
+  } : undefined;
+  return /*#__PURE__*/_jsxs(View, {
+    style: [staticStyles.container, Platform.select({
+      web: {
+        display: inline ? 'inline-block' : 'flex'
+      }
+    })],
+    ...selectProps(rest),
+    children: [/*#__PURE__*/_jsx(Pressable, {
+      onPress: toggleIsOpen,
+      ref: controlRef,
+      onBlur: close,
+      style: pressableStyles,
+      hitSlop: pressableHitSlop,
+      accessibilityLabel: getCopy('a11yText'),
+      accessibilityRole: "button",
+      nativeID: nativeID,
+      children: typeof control === 'function' ? pressableState => control(getPressableState(pressableState), variant, tooltipButtonTokens) : control
+    }), isOpen && /*#__PURE__*/_jsx(Backdrop, {
+      onPress: close,
+      children: /*#__PURE__*/_jsxs(View, {
+        ref: ref,
+        style: [staticStyles.tooltip, selectTooltipShadowStyles(themeTokens),
+        // applied separately so that it doesn't cover the arrow
+        selectToolTipSizeStyles(themeTokens), tooltipPosition && selectTooltipPositionStyles(tooltipPosition), (tooltipPosition === null || tooltipPosition?.isNormalized) && staticStyles.tooltipHidden // visually hide the tooltip until we have a final measurement
+        ],
+        onLayout: onTooltipLayout,
+        accessibilityRole: "alert",
+        children: [/*#__PURE__*/_jsx(View, {
+          style: [staticStyles.arrow, tooltipPosition && selectArrowStyles(themeTokens, tooltipPosition)]
+        }), /*#__PURE__*/_jsx(View, {
+          style: selectTooltipStyles(themeTokens),
+          children: /*#__PURE__*/_jsx(Text, {
+            style: selectTextStyles(themeTokens),
+            children: content
+          })
+        })]
+      })
+    })]
+  });
+});
+Tooltip.displayName = 'NativeTooltip';
+Tooltip.propTypes = {
+  ...selectedSystemPropTypes,
+  ...propTypes
+};
+export default Tooltip;
+const staticStyles = StyleSheet.create({
+  container: {
+    alignItems: 'flex-start'
+  },
+  tooltip: {
+    position: 'absolute',
+    top: 0,
+    left: 0
+  },
+  tooltipHidden: {
+    opacity: 0
+  },
+  arrow: {
+    position: 'absolute'
+  }
+});