@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/esm/Carousel/CarouselItem/CarouselItem.js

@@ -0,0 +1,178 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import View from "react-native-web/dist/exports/View";
+import Platform from "react-native-web/dist/exports/Platform";
+import { layoutTags, getA11yPropsFromHtmlTag, selectSystemProps, a11yProps, viewProps, variantProp } from '../../utils';
+import { useCarousel } from '../CarouselContext';
+import { ITEMS_PER_VIEWPORT_MD, ITEMS_PER_VIEWPORT_LG_XL, GAP_BETWEEN_ITEMS } from '../Constants';
+import Box from '../../Box';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
+const selectContainerStyle = _ref => {
+  let {
+    width,
+    elementIndex,
+    enablePeeking,
+    peekingMarginLeft,
+    peekingFirstSpace,
+    peekingGap,
+    hidden,
+    enableDisplayMultipleItemsPerSlide,
+    viewport
+  } = _ref;
+  let adjustedWidth = width;
+  let marginLeft = 0;
+  const marginRight = 0;
+  if (enablePeeking) {
+    const isFirst = elementIndex === 0;
+    adjustedWidth = width - (peekingMarginLeft + peekingGap + peekingFirstSpace);
+    if (isFirst) {
+      marginLeft = peekingMarginLeft;
+    } else {
+      marginLeft = peekingGap;
+    }
+  }
+
+  // Adjust width and margins for multiple items per slide.
+  if (enableDisplayMultipleItemsPerSlide) {
+    switch (viewport) {
+      case 'xs':
+      case 'sm':
+        break;
+      case 'md':
+        if (enablePeeking) {
+          adjustedWidth = adjustedWidth / ITEMS_PER_VIEWPORT_MD - peekingGap * 1 / ITEMS_PER_VIEWPORT_MD;
+        } else {
+          adjustedWidth = width / ITEMS_PER_VIEWPORT_MD - GAP_BETWEEN_ITEMS * 2 / ITEMS_PER_VIEWPORT_MD;
+          marginLeft = GAP_BETWEEN_ITEMS;
+        }
+        break;
+      case 'lg':
+      case 'xl':
+        if (enablePeeking) {
+          adjustedWidth = adjustedWidth / ITEMS_PER_VIEWPORT_LG_XL - peekingGap * 2 / ITEMS_PER_VIEWPORT_LG_XL;
+        } else {
+          adjustedWidth = width / ITEMS_PER_VIEWPORT_LG_XL - GAP_BETWEEN_ITEMS * 3 / ITEMS_PER_VIEWPORT_LG_XL;
+          marginLeft = GAP_BETWEEN_ITEMS;
+        }
+        break;
+      default:
+        break;
+    }
+  }
+  const style = {
+    width: adjustedWidth,
+    marginLeft,
+    marginRight
+  };
+  if (hidden && Platform.OS === 'web') {
+    style.visibility = 'hidden';
+  }
+  return style;
+};
+
+/**
+ * `Carousel.Item` is used to wrap the content of an individual slide and is suppsoed to be the
+ * only top-level component passed to the `Carousel`
+ */
+const CarouselItem = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    children,
+    elementIndex,
+    tag = 'li',
+    hidden,
+    enablePeeking,
+    peekingProps,
+    enableDisplayMultipleItemsPerSlide,
+    viewport,
+    backgroundColor,
+    enableHero,
+    tabsPanelHeight,
+    ...rest
+  } = _ref2;
+  const {
+    width,
+    activeIndex
+  } = useCarousel();
+  const selectedProps = selectProps({
+    ...rest,
+    ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
+  });
+  const focusabilityProps = activeIndex === elementIndex ? {} : a11yProps.nonFocusableProps;
+  return /*#__PURE__*/_jsx(View, {
+    style: selectContainerStyle({
+      width,
+      elementIndex,
+      hidden,
+      enablePeeking,
+      enableDisplayMultipleItemsPerSlide,
+      viewport,
+      ...peekingProps
+    }),
+    ...selectedProps,
+    ...focusabilityProps,
+    ref: ref,
+    children: /*#__PURE__*/_jsxs(Box, {
+      variant: {
+        background: backgroundColor
+      },
+      space: 0,
+      flex: 1,
+      children: [children, enableHero && /*#__PURE__*/_jsx(View, {
+        style: {
+          height: tabsPanelHeight
+        }
+      })]
+    })
+  });
+});
+CarouselItem.propTypes = {
+  ...selectedSystemPropTypes,
+  variant: variantProp.propType,
+  /**
+   * Index of the current slide
+   * Don't pass this prop when using `Carousel.Item` as it is already being passed by `Carousel` top-level component
+   */
+  elementIndex: PropTypes.number,
+  /**
+   * Provide custom accessibilityLabelledBy for Carousel slide
+   */
+  accessibilityLabelledBy: PropTypes.string,
+  /**
+   * Content of the slide
+   */
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+  /**
+   * Sets the HTML tag of the outer container. By default `'li'` so that assistive technology sees
+   * the Carousel as a list of items.
+   *
+   * Carousel's innermost container defaults to `'ul'` which can be overridden. If the tag of either
+   * `Carousel` or `Carousel.Item` is overriden, the other should be too, to avoid producing invalid HTML.
+   */
+  tag: PropTypes.oneOf(layoutTags),
+  /**
+   * Function to set carousel content background color when slide is being display
+   */
+  setContentBackgroundColor: PropTypes.func,
+  /**
+   * Boolean to enable peeking effect on the first and last slide
+   */
+  enablePeeking: PropTypes.bool,
+  /**
+   * Object to configure the peeking effect
+   */
+  peekingProps: PropTypes.shape({
+    peekingMarginLeft: PropTypes.number,
+    peekingMarginRight: PropTypes.number,
+    peekingFirstSpace: PropTypes.number,
+    peekingLastSpace: PropTypes.number,
+    peekingMiddleSpace: PropTypes.number,
+    peekingGap: PropTypes.number
+  }),
+  /**
+   * Background color of the slide. It supports Box background variant colors.
+   */
+  backgroundColor: PropTypes.string
+};
+CarouselItem.displayName = 'Carousel.Item';
+export default CarouselItem;

package/lib/esm/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -0,0 +1,94 @@
+import React from 'react';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import { useCarousel } from '../CarouselContext';
+import StepTracker from '../../StepTracker';
+import StackView from '../../StackView';
+import Spacer from '../../Spacer';
+import Progress from '../../Progress';
+import { variantProp } from '../../utils';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const CarouselStepTracker = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    variant,
+    enableDisplayMultipleItemsPerSlide
+  } = _ref;
+  const {
+    activeIndex,
+    totalItems,
+    getCopyWithPlaceholders,
+    themeTokens: {
+      stepTrackerCurrentBackgroundColor,
+      ...themeTokens
+    }
+  } = useCarousel();
+  const stackViewTokens = {
+    justifyContent: 'center'
+  };
+  const stepTrackerTokens = {
+    showStepLabel: false,
+    showStepTrackerLabel: true,
+    // TODO: StepTracker 'isComplete'/'isCurrent' is incorrect, see line StepTracker/Step.jsx line 63, refactor incorrect values and remove this
+    knobCompletedBackgroundColor: stepTrackerCurrentBackgroundColor ?? 'none',
+    connectorCompletedColor: 'none',
+    connectorColor: 'none',
+    containerPaddingTop: themeTokens.spaceBetweenSlideAndPanelNavigation
+  };
+  const steps = Array.from(Array(totalItems)).map((_, index) => String(index));
+  if (enableDisplayMultipleItemsPerSlide) {
+    if (totalItems === 1) {
+      return null;
+    }
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [/*#__PURE__*/_jsx(Spacer, {
+        space: 4
+      }), /*#__PURE__*/_jsx(StackView, {
+        direction: "row",
+        tokens: stackViewTokens,
+        ref: ref,
+        children: /*#__PURE__*/_jsx(View, {
+          style: staticStyles.progress,
+          children: /*#__PURE__*/_jsx(Progress, {
+            children: /*#__PURE__*/_jsx(Progress.Bar, {
+              offset: {
+                items: totalItems,
+                current: activeIndex + 1
+              },
+              variant: {
+                style: 'subtle'
+              },
+              accessibilityLabel: getCopyWithPlaceholders('stepTrackerLabel')
+            })
+          })
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/_jsx(StackView, {
+    direction: "row",
+    tokens: stackViewTokens,
+    ref: ref,
+    children: /*#__PURE__*/_jsx(StepTracker, {
+      current: activeIndex,
+      steps: steps,
+      copy: {
+        stepLabel: getCopyWithPlaceholders('stepLabel'),
+        stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
+      },
+      tokens: stepTrackerTokens,
+      variant: variant
+    })
+  });
+});
+CarouselStepTracker.displayName = 'CarouselStepTracker';
+CarouselStepTracker.propTypes = {
+  variant: variantProp.propType,
+  enableDisplayMultipleItemsPerSlide: PropTypes.bool
+};
+const staticStyles = StyleSheet.create({
+  progress: {
+    width: 288
+  }
+});
+export default CarouselStepTracker;

package/lib/esm/Carousel/CarouselTabs/CarouselTabs.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useResponsiveProp } from '../../utils';
+import Carousel from '../Carousel';
+
+/**
+ * @deprecated Please use Carousel and pass the `tabs` prop.
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+const CarouselTabs = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    items,
+    refocus = true,
+    ...carouselProps
+  } = _ref;
+  const tabs = useResponsiveProp({
+    md: items
+  });
+  return /*#__PURE__*/_jsx(Carousel, {
+    refocus: refocus,
+    ...carouselProps,
+    ref: ref,
+    tabs: tabs,
+    children: items.map(_ref2 => {
+      let {
+        title,
+        content
+      } = _ref2;
+      return /*#__PURE__*/_jsx(React.Fragment, {
+        children: content
+      }, title);
+    })
+  });
+});
+CarouselTabs.displayName = 'CarouselTabs';
+CarouselTabs.propTypes = {
+  /**
+   * An array of objects where title is the string shown in the slide's tab and content is the JSX for the slide itself
+   */
+  items: PropTypes.arrayOf(PropTypes.shape({
+    title: PropTypes.string.isRequired,
+    content: PropTypes.node.isRequired
+  })),
+  ...Carousel.propTypes
+};
+// CarouselTabs doesn't require `children` prop, it uses `items` instead.
+// eslint-disable-next-line react/forbid-foreign-prop-types
+if (CarouselTabs.propTypes?.children) delete CarouselTabs.propTypes?.children;
+export default CarouselTabs;

package/lib/esm/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -0,0 +1,88 @@
+import React from 'react';
+import View from "react-native-web/dist/exports/View";
+import PropTypes from 'prop-types';
+import StackView from '../../StackView';
+import { useCarousel } from '../CarouselContext';
+import CarouselTabsPanelItem from './CarouselTabsPanelItem';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const selectTabPanelStyle = () => ({
+  backgroundColor: 'transparent'
+});
+const CarouselTabsPanel = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    items
+  } = _ref;
+  const {
+    activeIndex,
+    goTo
+  } = useCarousel();
+  const nextFocusRef = React.useRef();
+  const firstTabRef = React.useRef();
+  const [isInverse, setIsInverse] = React.useState(false);
+  const lastTabSelected = activeIndex === items.length - 1;
+
+  // Get current select tab style
+  React.useEffect(() => {
+    const [selectedVariantIsInverse] = items.filter((_, index) => index === activeIndex);
+    setIsInverse(selectedVariantIsInverse?.inverse);
+  }, [items, activeIndex]);
+
+  // TODO: figure out a better cross-brand way to specify subcomponent variants.
+  // For now, this picks an Allium variant, and does nothing in brands that lack it.
+  // See similar comment in Carousel and https://github.com/telus/universal-design-system/issues/1549
+  const dividerVariant = {
+    decorative: true,
+    inverse: isInverse
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: selectTabPanelStyle(),
+    children: [/*#__PURE__*/_jsx(StackView, {
+      direction: "row",
+      space: 3,
+      divider: {
+        variant: dividerVariant,
+        accessibilityRole: 'presentation',
+        accessibilityOrientation: null
+      },
+      ref: ref,
+      accessibilityRole: "tablist",
+      children: items.map((_ref2, index) => {
+        let {
+          title,
+          onPress,
+          inverse,
+          ...panelItemProps
+        } = _ref2;
+        const selected = index === activeIndex;
+        const isNext = index === activeIndex + 1;
+
+        // Selected item should be always unfocusable and unpressable
+        const handlePress = selected ? undefined : event => {
+          if (typeof onPress === 'function') onPress(event, index);
+          goTo(index);
+        };
+        return /*#__PURE__*/_jsx(CarouselTabsPanelItem, {
+          ref: isNext && nextFocusRef || index === 0 && firstTabRef || null,
+          title: title,
+          selected: selected,
+          onPress: handlePress,
+          variant: {
+            inverse: isInverse
+          },
+          ...panelItemProps
+        }, title);
+      })
+    }), /*#__PURE__*/_jsx(View, {
+      focusable: true,
+      accessible: true,
+      ref: lastTabSelected ? nextFocusRef : null
+    })]
+  });
+});
+CarouselTabsPanel.displayName = 'CarouselTabsPanel';
+CarouselTabsPanel.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape(CarouselTabsPanelItem.propTypes || {})),
+  // Color defined by `Carousel.item` variant otherwise fallback to transparent
+  contentBackgroundColor: PropTypes.string
+};
+export default CarouselTabsPanel;

package/lib/esm/Carousel/CarouselTabs/CarouselTabsPanelItem.js

@@ -0,0 +1,118 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import Text from "react-native-web/dist/exports/Text";
+import Platform from "react-native-web/dist/exports/Platform";
+import { applyTextStyles, useThemeTokensCallback } from '../../ThemeProvider';
+import { selectSystemProps, a11yProps, pressProps, viewProps, textProps, getTokensPropType, variantProp, resolvePressableState } from '../../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+const [selectPressProps, pressPropTypes] = selectSystemProps([a11yProps, pressProps, viewProps]);
+const [selectTextProps, textPropTypes] = selectSystemProps([textProps]);
+const selectContainerStyles = _ref => {
+  let {
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom = 0,
+    borderBottomColor,
+    borderBottomWidth = 0,
+    borderBottomStyle,
+    flex,
+    alignItems,
+    justifyContent
+  } = _ref;
+  return {
+    paddingLeft,
+    paddingRight,
+    paddingTop,
+    paddingBottom: paddingBottom - borderBottomWidth,
+    borderBottomColor,
+    borderBottomWidth,
+    borderBottomStyle,
+    flex,
+    alignItems,
+    justifyContent,
+    ...Platform.select({
+      // Removes the default browser :focus outline
+      web: {
+        outline: 'none'
+      }
+    })
+  };
+};
+const selectTextStyles = _ref2 => {
+  let {
+    fontSize,
+    fontScaleCap,
+    lineHeight,
+    letterSpacing,
+    fontWeight,
+    fontName,
+    color
+  } = _ref2;
+  return applyTextStyles({
+    fontSize,
+    fontScaleCap,
+    lineHeight,
+    letterSpacing,
+    fontWeight,
+    fontName,
+    color
+  });
+};
+const CarouselTabsPanelItem = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+    title,
+    selected,
+    inactive,
+    variant,
+    tokens,
+    accessibilityRole = 'tab',
+    ...rest
+  } = _ref3;
+  // Workaround for React Native Web https://github.com/necolas/react-native-web/issues/2357
+  // Don't allow disabled to be set while focus is true else focus state gets locked `true`
+  // (must refocus _after_ calling `goTo`, else focus target content is not up to date)
+  const [isFocused, setIsFocused] = React.useState(false);
+  const disabled = (inactive || selected) && !isFocused;
+  const getTokens = useThemeTokensCallback('CarouselTabsPanelItem', tokens, variant);
+  const resolveTokens = pressState => getTokens(resolvePressableState(pressState, {
+    selected
+  }));
+  const getContainerStyle = pressState => selectContainerStyles(resolveTokens(pressState));
+  const getTextStyle = pressState => selectTextStyles(resolveTokens(pressState));
+  const {
+    onPress,
+    ...selectedPressProps
+  } = selectPressProps(rest);
+  const handleKeyDown = event => {
+    // Allow using the spacebar for navigation
+    if (event?.key === ' ') onPress(event);
+  };
+  return /*#__PURE__*/_jsx(Pressable, {
+    onPress: onPress,
+    style: getContainerStyle,
+    accessibilityRole: accessibilityRole,
+    ref: ref,
+    onKeyDown: handleKeyDown,
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false),
+    disabled: disabled,
+    ...selectedPressProps,
+    children: pressState => /*#__PURE__*/_jsx(Text, {
+      style: getTextStyle(pressState),
+      ...selectTextProps(rest),
+      children: title
+    })
+  });
+});
+CarouselTabsPanelItem.displayName = 'CarouselTabsPanelItem';
+CarouselTabsPanelItem.propTypes = {
+  ...pressPropTypes,
+  ...textPropTypes,
+  title: PropTypes.string.isRequired,
+  selected: PropTypes.bool,
+  tokens: getTokensPropType('CarouselTabsPanelItem'),
+  variant: variantProp.propType
+};
+export default CarouselTabsPanelItem;

package/lib/esm/Carousel/CarouselThumbnail.js

@@ -0,0 +1,113 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Pressable from "react-native-web/dist/exports/Pressable";
+import Image from "react-native-web/dist/exports/Image";
+import { useCarousel } from './CarouselContext';
+import { useThemeTokensCallback } from '../ThemeProvider';
+import { useViewport } from '../ViewportProvider';
+import { jsx as _jsx } from "react/jsx-runtime";
+const selectPressableTokens = _ref => {
+  let {
+    borderColor,
+    borderRadius,
+    borderWidth,
+    margin,
+    padding
+  } = _ref;
+  return {
+    borderColor,
+    borderRadius,
+    borderWidth,
+    margin,
+    padding
+  };
+};
+
+/**
+ * `Carousel.Thumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
+ * only top-level component passed to the `Carousel`
+ */
+const CarouselThumbnail = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    accessibilityLabel,
+    alt,
+    index,
+    src
+  } = _ref2;
+  const {
+    activeIndex,
+    itemLabel,
+    totalItems,
+    getCopyWithPlaceholders,
+    goTo
+  } = useCarousel();
+  const getThumbnailTokens = useThemeTokensCallback('CarouselThumbnail');
+  const viewport = useViewport();
+  const thumbnailTitle = alt ?? getCopyWithPlaceholders('stepTrackerLabel').replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, index).replace(/%\{stepCount\}/g, totalItems);
+  const handlePress = () => goTo(index);
+  const handleKeyDown = event => {
+    // Allow using the spacebar for navigation
+    if (event?.key === ' ') goTo(index);
+  };
+  const {
+    borderWidth,
+    padding,
+    selectedBorderColor,
+    selectedBorderWidth,
+    size,
+    margin
+  } = getThumbnailTokens({
+    viewport
+  });
+  const styles = {
+    image: {
+      height: size,
+      width: size
+    },
+    selected: {
+      borderColor: selectedBorderColor,
+      borderWidth: selectedBorderWidth,
+      padding: padding - selectedBorderWidth,
+      marginBottom: margin + selectedBorderWidth
+    },
+    nonSelected: {
+      padding: padding - borderWidth,
+      marginBottom: margin + selectedBorderWidth
+    }
+  };
+  return /*#__PURE__*/_jsx(Pressable, {
+    onKeyDown: handleKeyDown,
+    onPress: handlePress,
+    style: _ref3 => {
+      let {
+        hovered,
+        pressed,
+        focused
+      } = _ref3;
+      const pressableStyles = selectPressableTokens(getThumbnailTokens({
+        hover: hovered,
+        pressed,
+        focus: focused
+      }));
+      return [pressableStyles, index === activeIndex ? [styles.selected, {
+        outline: 'none'
+      }] : styles.nonSelected];
+    },
+    ref: ref,
+    children: /*#__PURE__*/_jsx(Image, {
+      accessibilityIgnoresInvertColors: true,
+      accessibilityLabel: accessibilityLabel ?? alt,
+      source: src,
+      style: styles.image,
+      title: thumbnailTitle
+    })
+  }, src);
+});
+CarouselThumbnail.displayName = 'CarouselThumbnail';
+CarouselThumbnail.propTypes = {
+  accessibilityLabel: PropTypes.string,
+  alt: PropTypes.string,
+  index: PropTypes.number,
+  src: PropTypes.string
+};
+export default CarouselThumbnail;

package/lib/esm/Carousel/Constants.js

@@ -0,0 +1,7 @@
+export const ITEMS_PER_VIEWPORT_MD = 2;
+export const ITEMS_PER_VIEWPORT_LG_XL = 3;
+export const GAP_BETWEEN_ITEMS = 16;
+export const HERO_POSITION_OFFSET = 20;
+export const DEFAULT_POSITION_OFFSET = 0;
+export const LARGE_VIEWPORT_MARGIN = 40;
+export const DEFAULT_VIEWPORT_MARGIN = 10;