@telus-uds/components-base 2.5.0 → 3.0.0

package/lib/cjs/Carousel/CarouselContext.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CarouselProvider = void 0;
+exports.useCarousel = useCarousel;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CarouselContext = /*#__PURE__*/_react.default.createContext();
+const CarouselProvider = _ref => {
+  let {
+    activeIndex,
+    children,
+    goTo,
+    getCopyWithPlaceholders,
+    itemLabel,
+    refocus = false,
+    themeTokens,
+    totalItems,
+    width
+  } = _ref;
+  const value = _react.default.useMemo(() => ({
+    activeIndex,
+    goTo,
+    getCopyWithPlaceholders,
+    itemLabel,
+    refocus,
+    themeTokens,
+    totalItems,
+    width
+  }), [activeIndex, goTo, getCopyWithPlaceholders, itemLabel, refocus, totalItems, themeTokens, width]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(CarouselContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+exports.CarouselProvider = CarouselProvider;
+function useCarousel() {
+  const context = _react.default.useContext(CarouselContext);
+  if (context === undefined) {
+    throw new Error(`'useCarousel' must be used within a 'CarouselProvider'`);
+  }
+  return context;
+}
+CarouselProvider.propTypes = {
+  children: _propTypes.default.arrayOf(_propTypes.default.element).isRequired,
+  activeIndex: _propTypes.default.number.isRequired,
+  goTo: _propTypes.default.func.isRequired,
+  getCopyWithPlaceholders: _propTypes.default.func.isRequired,
+  itemLabel: _propTypes.default.string.isRequired,
+  refocus: _propTypes.default.bool,
+  themeTokens: (0, _utils.getTokensPropType)('Carousel'),
+  totalItems: _propTypes.default.number.isRequired,
+  width: _propTypes.default.number.isRequired
+};

package/lib/cjs/Carousel/CarouselFirstFocus/CarouselFirstFocus.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _propTypes = require("prop-types");
+var _CarouselContext = require("../CarouselContext");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * Focus target so that when a new slide is shown, the user can tab into
+ * its content using the keyboard.
+ *
+ * @TODO rework this after integrating with SkipLink when available.
+ */const CarouselFirstFocus = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    title
+  } = _ref;
+  const {
+    getCopyWithPlaceholders
+  } = (0, _CarouselContext.useCarousel)();
+
+  // TODO: integrate skip link description if behaving as skip link.
+  // Consider moving this content to aria-live area while only the skip link is focused.
+  const accessibilityLabel = `${title}, ${getCopyWithPlaceholders('stepTrackerLabel')}`;
+  const accessibilityRole = _Platform.default.select({
+    web: 'link',
+    // The focused item will ultimately be a skip link.
+    default: 'button' // 'link' role usually denotes opening browser on Native.
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default
+  // TODO: integrate skip link functionality, jump focus to after Carousel
+  , {
+    onPress: undefined,
+    ref: ref,
+    accessibilityLabel: accessibilityLabel,
+    accessibilityRole: accessibilityRole,
+    style: _StyleSheet.default.absoluteFill,
+    focusable: true
+  });
+});
+CarouselFirstFocus.displayName = 'CarouselFirstFocus';
+CarouselFirstFocus.propTypes = {
+  /**
+   * Simple description of this carousel for screenreaders, to be read before
+   * "{itemLabel} {index} of {count}.
+   *
+   * For example, "Summer offers" in "Summer offers, offer 1 of 3"
+   */
+  title: _propTypes.PropTypes.string
+};
+var _default = exports.default = CarouselFirstFocus;

package/lib/cjs/Carousel/CarouselItem/CarouselItem.js

@@ -0,0 +1,185 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _utils = require("../../utils");
+var _CarouselContext = require("../CarouselContext");
+var _Constants = require("../Constants");
+var _Box = _interopRequireDefault(require("../../Box"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.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 / _Constants.ITEMS_PER_VIEWPORT_MD - peekingGap * 1 / _Constants.ITEMS_PER_VIEWPORT_MD;
+        } else {
+          adjustedWidth = width / _Constants.ITEMS_PER_VIEWPORT_MD - _Constants.GAP_BETWEEN_ITEMS * 2 / _Constants.ITEMS_PER_VIEWPORT_MD;
+          marginLeft = _Constants.GAP_BETWEEN_ITEMS;
+        }
+        break;
+      case 'lg':
+      case 'xl':
+        if (enablePeeking) {
+          adjustedWidth = adjustedWidth / _Constants.ITEMS_PER_VIEWPORT_LG_XL - peekingGap * 2 / _Constants.ITEMS_PER_VIEWPORT_LG_XL;
+        } else {
+          adjustedWidth = width / _Constants.ITEMS_PER_VIEWPORT_LG_XL - _Constants.GAP_BETWEEN_ITEMS * 3 / _Constants.ITEMS_PER_VIEWPORT_LG_XL;
+          marginLeft = _Constants.GAP_BETWEEN_ITEMS;
+        }
+        break;
+      default:
+        break;
+    }
+  }
+  const style = {
+    width: adjustedWidth,
+    marginLeft,
+    marginRight
+  };
+  if (hidden && _Platform.default.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.default.forwardRef((_ref2, ref) => {
+  let {
+    children,
+    elementIndex,
+    tag = 'li',
+    hidden,
+    enablePeeking,
+    peekingProps,
+    enableDisplayMultipleItemsPerSlide,
+    viewport,
+    backgroundColor,
+    enableHero,
+    tabsPanelHeight,
+    ...rest
+  } = _ref2;
+  const {
+    width,
+    activeIndex
+  } = (0, _CarouselContext.useCarousel)();
+  const selectedProps = selectProps({
+    ...rest,
+    ...(0, _utils.getA11yPropsFromHtmlTag)(tag, rest.accessibilityRole)
+  });
+  const focusabilityProps = activeIndex === elementIndex ? {} : _utils.a11yProps.nonFocusableProps;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: selectContainerStyle({
+      width,
+      elementIndex,
+      hidden,
+      enablePeeking,
+      enableDisplayMultipleItemsPerSlide,
+      viewport,
+      ...peekingProps
+    }),
+    ...selectedProps,
+    ...focusabilityProps,
+    ref: ref,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Box.default, {
+      variant: {
+        background: backgroundColor
+      },
+      space: 0,
+      flex: 1,
+      children: [children, enableHero && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+        style: {
+          height: tabsPanelHeight
+        }
+      })]
+    })
+  });
+});
+CarouselItem.propTypes = {
+  ...selectedSystemPropTypes,
+  variant: _utils.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.default.number,
+  /**
+   * Provide custom accessibilityLabelledBy for Carousel slide
+   */
+  accessibilityLabelledBy: _propTypes.default.string,
+  /**
+   * Content of the slide
+   */
+  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.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.default.oneOf(_utils.layoutTags),
+  /**
+   * Function to set carousel content background color when slide is being display
+   */
+  setContentBackgroundColor: _propTypes.default.func,
+  /**
+   * Boolean to enable peeking effect on the first and last slide
+   */
+  enablePeeking: _propTypes.default.bool,
+  /**
+   * Object to configure the peeking effect
+   */
+  peekingProps: _propTypes.default.shape({
+    peekingMarginLeft: _propTypes.default.number,
+    peekingMarginRight: _propTypes.default.number,
+    peekingFirstSpace: _propTypes.default.number,
+    peekingLastSpace: _propTypes.default.number,
+    peekingMiddleSpace: _propTypes.default.number,
+    peekingGap: _propTypes.default.number
+  }),
+  /**
+   * Background color of the slide. It supports Box background variant colors.
+   */
+  backgroundColor: _propTypes.default.string
+};
+CarouselItem.displayName = 'Carousel.Item';
+var _default = exports.default = CarouselItem;

package/lib/cjs/Carousel/CarouselItem/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _CarouselItem = _interopRequireDefault(require("./CarouselItem"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _CarouselItem.default;

package/lib/cjs/Carousel/CarouselStepTracker/CarouselStepTracker.js

@@ -0,0 +1,101 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _CarouselContext = require("../CarouselContext");
+var _StepTracker = _interopRequireDefault(require("../../StepTracker"));
+var _StackView = _interopRequireDefault(require("../../StackView"));
+var _Spacer = _interopRequireDefault(require("../../Spacer"));
+var _Progress = _interopRequireDefault(require("../../Progress"));
+var _utils = require("../../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CarouselStepTracker = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    variant,
+    enableDisplayMultipleItemsPerSlide
+  } = _ref;
+  const {
+    activeIndex,
+    totalItems,
+    getCopyWithPlaceholders,
+    themeTokens: {
+      stepTrackerCurrentBackgroundColor,
+      ...themeTokens
+    }
+  } = (0, _CarouselContext.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__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Spacer.default, {
+        space: 4
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+        direction: "row",
+        tokens: stackViewTokens,
+        ref: ref,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: staticStyles.progress,
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Progress.default, {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Progress.default.Bar, {
+              offset: {
+                items: totalItems,
+                current: activeIndex + 1
+              },
+              variant: {
+                style: 'subtle'
+              },
+              accessibilityLabel: getCopyWithPlaceholders('stepTrackerLabel')
+            })
+          })
+        })
+      })]
+    });
+  }
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+    direction: "row",
+    tokens: stackViewTokens,
+    ref: ref,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StepTracker.default, {
+      current: activeIndex,
+      steps: steps,
+      copy: {
+        stepLabel: getCopyWithPlaceholders('stepLabel'),
+        stepTrackerLabel: getCopyWithPlaceholders('stepTrackerLabel')
+      },
+      tokens: stepTrackerTokens,
+      variant: variant
+    })
+  });
+});
+CarouselStepTracker.displayName = 'CarouselStepTracker';
+CarouselStepTracker.propTypes = {
+  variant: _utils.variantProp.propType,
+  enableDisplayMultipleItemsPerSlide: _propTypes.default.bool
+};
+const staticStyles = _StyleSheet.default.create({
+  progress: {
+    width: 288
+  }
+});
+var _default = exports.default = CarouselStepTracker;

package/lib/cjs/Carousel/CarouselStepTracker/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _CarouselStepTracker = _interopRequireDefault(require("./CarouselStepTracker"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = _CarouselStepTracker.default;

package/lib/cjs/Carousel/CarouselTabs/CarouselTabs.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _utils = require("../../utils");
+var _Carousel = _interopRequireDefault(require("../Carousel"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+/**
+ * @deprecated Please use Carousel and pass the `tabs` prop.
+ */const CarouselTabs = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    items,
+    refocus = true,
+    ...carouselProps
+  } = _ref;
+  const tabs = (0, _utils.useResponsiveProp)({
+    md: items
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Carousel.default, {
+    refocus: refocus,
+    ...carouselProps,
+    ref: ref,
+    tabs: tabs,
+    children: items.map(_ref2 => {
+      let {
+        title,
+        content
+      } = _ref2;
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.default.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.default.arrayOf(_propTypes.default.shape({
+    title: _propTypes.default.string.isRequired,
+    content: _propTypes.default.node.isRequired
+  })),
+  ..._Carousel.default.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;
+var _default = exports.default = CarouselTabs;

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

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _StackView = _interopRequireDefault(require("../../StackView"));
+var _CarouselContext = require("../CarouselContext");
+var _CarouselTabsPanelItem = _interopRequireDefault(require("./CarouselTabsPanelItem"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const selectTabPanelStyle = () => ({
+  backgroundColor: 'transparent'
+});
+const CarouselTabsPanel = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    items
+  } = _ref;
+  const {
+    activeIndex,
+    goTo
+  } = (0, _CarouselContext.useCarousel)();
+  const nextFocusRef = _react.default.useRef();
+  const firstTabRef = _react.default.useRef();
+  const [isInverse, setIsInverse] = _react.default.useState(false);
+  const lastTabSelected = activeIndex === items.length - 1;
+
+  // Get current select tab style
+  _react.default.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__*/(0, _jsxRuntime.jsxs)(_View.default, {
+    style: selectTabPanelStyle(),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+      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__*/(0, _jsxRuntime.jsx)(_CarouselTabsPanelItem.default, {
+          ref: isNext && nextFocusRef || index === 0 && firstTabRef || null,
+          title: title,
+          selected: selected,
+          onPress: handlePress,
+          variant: {
+            inverse: isInverse
+          },
+          ...panelItemProps
+        }, title);
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      focusable: true,
+      accessible: true,
+      ref: lastTabSelected ? nextFocusRef : null
+    })]
+  });
+});
+CarouselTabsPanel.displayName = 'CarouselTabsPanel';
+CarouselTabsPanel.propTypes = {
+  items: _propTypes.default.arrayOf(_propTypes.default.shape(_CarouselTabsPanelItem.default.propTypes || {})),
+  // Color defined by `Carousel.item` variant otherwise fallback to transparent
+  contentBackgroundColor: _propTypes.default.string
+};
+var _default = exports.default = CarouselTabsPanel;