@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/Carousel/CarouselItem/CarouselItem.js

@@ -1,161 +0,0 @@
-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 { jsx as _jsx } 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,
-    ...rest
-  } = _ref2;
-  const {
-    width,
-    activeIndex,
-    height
-  } = useCarousel();
-  const selectedProps = selectProps({
-    ...rest,
-    ...getA11yPropsFromHtmlTag(tag, rest.accessibilityRole)
-  });
-  const focusabilityProps = activeIndex === elementIndex ? {} : a11yProps.nonFocusableProps;
-  return /*#__PURE__*/_jsx(View, {
-    style: selectContainerStyle({
-      width,
-      elementIndex,
-      hidden,
-      height,
-      enablePeeking,
-      enableDisplayMultipleItemsPerSlide,
-      viewport,
-      ...peekingProps
-    }),
-    ...selectedProps,
-    ...focusabilityProps,
-    ref: ref,
-    children: children
-  });
-});
-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
-  })
-};
-CarouselItem.displayName = 'Carousel.Item';
-export default CarouselItem;

package/lib/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -1,91 +0,0 @@
-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) {
-    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/Carousel/CarouselTabs/CarouselTabs.js

@@ -1,50 +0,0 @@
-var _CarouselTabs$propTyp, _CarouselTabs$propTyp2;
-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$propTyp = CarouselTabs.propTypes) !== null && _CarouselTabs$propTyp !== void 0 && _CarouselTabs$propTyp.children) (_CarouselTabs$propTyp2 = CarouselTabs.propTypes) === null || _CarouselTabs$propTyp2 === void 0 || delete _CarouselTabs$propTyp2.children;
-export default CarouselTabs;

package/lib/Carousel/CarouselTabs/CarouselTabsPanel.js

@@ -1,88 +0,0 @@
-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 === null || selectedVariantIsInverse === void 0 ? void 0 : 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/Carousel/CarouselTabs/CarouselTabsPanelItem.js

@@ -1,118 +0,0 @@
-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 === null || event === void 0 ? void 0 : 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/Carousel/CarouselThumbnail.js

@@ -1,113 +0,0 @@
-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 === null || event === void 0 ? void 0 : 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/Carousel/Constants.js

@@ -1,3 +0,0 @@
-export const ITEMS_PER_VIEWPORT_MD = 2;
-export const ITEMS_PER_VIEWPORT_LG_XL = 3;
-export const GAP_BETWEEN_ITEMS = 16;