@telus-uds/components-base 2.4.0 → 3.0.0

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

@@ -0,0 +1,125 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _ThemeProvider = require("../../ThemeProvider");
+var _utils = require("../../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const [selectPressProps, pressPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.pressProps, _utils.viewProps]);
+const [selectTextProps, textPropTypes] = (0, _utils.selectSystemProps)([_utils.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.default.select({
+      // Removes the default browser :focus outline
+      web: {
+        outline: 'none'
+      }
+    })
+  };
+};
+const selectTextStyles = _ref2 => {
+  let {
+    fontSize,
+    fontScaleCap,
+    lineHeight,
+    letterSpacing,
+    fontWeight,
+    fontName,
+    color
+  } = _ref2;
+  return (0, _ThemeProvider.applyTextStyles)({
+    fontSize,
+    fontScaleCap,
+    lineHeight,
+    letterSpacing,
+    fontWeight,
+    fontName,
+    color
+  });
+};
+const CarouselTabsPanelItem = /*#__PURE__*/_react.default.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.default.useState(false);
+  const disabled = (inactive || selected) && !isFocused;
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('CarouselTabsPanelItem', tokens, variant);
+  const resolveTokens = pressState => getTokens((0, _utils.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__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    onPress: onPress,
+    style: getContainerStyle,
+    accessibilityRole: accessibilityRole,
+    ref: ref,
+    onKeyDown: handleKeyDown,
+    onFocus: () => setIsFocused(true),
+    onBlur: () => setIsFocused(false),
+    disabled: disabled,
+    ...selectedPressProps,
+    children: pressState => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      style: getTextStyle(pressState),
+      ...selectTextProps(rest),
+      children: title
+    })
+  });
+});
+CarouselTabsPanelItem.displayName = 'CarouselTabsPanelItem';
+CarouselTabsPanelItem.propTypes = {
+  ...pressPropTypes,
+  ...textPropTypes,
+  title: _propTypes.default.string.isRequired,
+  selected: _propTypes.default.bool,
+  tokens: (0, _utils.getTokensPropType)('CarouselTabsPanelItem'),
+  variant: _utils.variantProp.propType
+};
+var _default = exports.default = CarouselTabsPanelItem;

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

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

package/lib/cjs/Carousel/CarouselThumbnail.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
+var _CarouselContext = require("./CarouselContext");
+var _ThemeProvider = require("../ThemeProvider");
+var _ViewportProvider = require("../ViewportProvider");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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.default.forwardRef((_ref2, ref) => {
+  let {
+    accessibilityLabel,
+    alt,
+    index,
+    src
+  } = _ref2;
+  const {
+    activeIndex,
+    itemLabel,
+    totalItems,
+    getCopyWithPlaceholders,
+    goTo
+  } = (0, _CarouselContext.useCarousel)();
+  const getThumbnailTokens = (0, _ThemeProvider.useThemeTokensCallback)('CarouselThumbnail');
+  const viewport = (0, _ViewportProvider.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__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    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__*/(0, _jsxRuntime.jsx)(_Image.default, {
+      accessibilityIgnoresInvertColors: true,
+      accessibilityLabel: accessibilityLabel ?? alt,
+      source: src,
+      style: styles.image,
+      title: thumbnailTitle
+    })
+  }, src);
+});
+CarouselThumbnail.displayName = 'CarouselThumbnail';
+CarouselThumbnail.propTypes = {
+  accessibilityLabel: _propTypes.default.string,
+  alt: _propTypes.default.string,
+  index: _propTypes.default.number,
+  src: _propTypes.default.string
+};
+var _default = exports.default = CarouselThumbnail;

package/lib/cjs/Carousel/CarouselThumbnailNavigation.js

@@ -0,0 +1,78 @@
+"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 _CarouselContext = require("./CarouselContext");
+var _CarouselThumbnail = _interopRequireDefault(require("./CarouselThumbnail"));
+var _StackView = require("../StackView");
+var _ThemeProvider = require("../ThemeProvider");
+var _ViewportProvider = require("../ViewportProvider");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const CarouselThumbnailNavigation = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    thumbnails = []
+  } = _ref;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const {
+    alignItems
+  } = (0, _ThemeProvider.useThemeTokens)('CarouselThumbnail', {}, {
+    viewport
+  });
+  const {
+    totalItems
+  } = (0, _CarouselContext.useCarousel)();
+  if (thumbnails.length !== totalItems) {
+    throw new Error('Thumbnail set provided does not match the number of slides in the carousel');
+  }
+  const {
+    containerPaddingTop: thumbnailContainerPaddingTop
+  } = (0, _ThemeProvider.useThemeTokens)('CarouselThumbnail');
+  const stackWrapTokens = {
+    justifyContent: 'flex-start'
+  };
+  const containerStyles = {
+    justifyContent: 'center',
+    alignItems,
+    paddingTop: thumbnailContainerPaddingTop
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    style: containerStyles,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+      direction: "row",
+      tokens: stackWrapTokens,
+      space: 2,
+      ref: ref,
+      children: thumbnails.map((_ref2, index) => {
+        let {
+          accessibilityLabel,
+          alt,
+          src
+        } = _ref2;
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselThumbnail.default, {
+          accessibilityLabel: accessibilityLabel,
+          alt: alt,
+          index: index,
+          src: src
+        }, src);
+      })
+    })
+  });
+});
+CarouselThumbnailNavigation.displayName = 'CarouselThumbnailNavigation';
+CarouselThumbnailNavigation.propTypes = {
+  /**
+   * An array of objects containing information on the thumbnail images.
+   */
+  thumbnails: _propTypes.default.arrayOf(_propTypes.default.shape({
+    accessibilityLabel: _propTypes.default.string,
+    alt: _propTypes.default.string,
+    src: _propTypes.default.string
+  })).isRequired
+};
+var _default = exports.default = CarouselThumbnailNavigation;

package/lib/cjs/Carousel/Constants.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LARGE_VIEWPORT_MARGIN = exports.ITEMS_PER_VIEWPORT_MD = exports.ITEMS_PER_VIEWPORT_LG_XL = exports.HERO_POSITION_OFFSET = exports.GAP_BETWEEN_ITEMS = exports.DEFAULT_VIEWPORT_MARGIN = exports.DEFAULT_POSITION_OFFSET = void 0;
+const ITEMS_PER_VIEWPORT_MD = exports.ITEMS_PER_VIEWPORT_MD = 2;
+const ITEMS_PER_VIEWPORT_LG_XL = exports.ITEMS_PER_VIEWPORT_LG_XL = 3;
+const GAP_BETWEEN_ITEMS = exports.GAP_BETWEEN_ITEMS = 16;
+const HERO_POSITION_OFFSET = exports.HERO_POSITION_OFFSET = 20;
+const DEFAULT_POSITION_OFFSET = exports.DEFAULT_POSITION_OFFSET = 0;
+const LARGE_VIEWPORT_MARGIN = exports.LARGE_VIEWPORT_MARGIN = 40;
+const DEFAULT_VIEWPORT_MARGIN = exports.DEFAULT_VIEWPORT_MARGIN = 10;

package/lib/cjs/Carousel/dictionary.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// 'stepLabel' and 'stepTrackerLabel' are passed down to StepTracker
+var _default = exports.default = {
+  en: {
+    carouselLabel: '%{stepCount} items',
+    iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',
+    stepLabel: '%{itemLabel} %{stepNumber}',
+    stepTrackerLabel: '%{itemLabel} %{stepNumber} of %{stepCount}',
+    skipLink: 'Skip %{title}',
+    playButtonLabel: 'Play',
+    pauseButtonLabel: 'Pause'
+  },
+  fr: {
+    // French translations
+    carouselLabel: '%{stepCount} éléments',
+    iconButtonLabel: 'Montrer %{itemLabel} %{targetStep} de %{stepCount}',
+    stepLabel: '%{itemLabel} %{stepNumber}',
+    stepTrackerLabel: '%{itemLabel} %{stepNumber} de %{stepCount}',
+    skipLink: 'Passer %{title}',
+    playButtonLabel: 'Lancer',
+    pauseButtonLabel: 'Pauser'
+  }
+};

package/lib/cjs/Carousel/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Carousel: true,
+  CarouselTabs: true
+};
+Object.defineProperty(exports, "Carousel", {
+  enumerable: true,
+  get: function () {
+    return _Carousel.default;
+  }
+});
+Object.defineProperty(exports, "CarouselTabs", {
+  enumerable: true,
+  get: function () {
+    return _CarouselTabs.default;
+  }
+});
+var _CarouselContext = require("./CarouselContext");
+Object.keys(_CarouselContext).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _CarouselContext[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _CarouselContext[key];
+    }
+  });
+});
+var _Carousel = _interopRequireDefault(require("./Carousel"));
+var _CarouselTabs = _interopRequireDefault(require("./CarouselTabs"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }