@telus-uds/components-base 2.4.0 → 3.0.0

package/lib/cjs/SideNav/SideNav.js

@@ -0,0 +1,139 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
+var _Item = _interopRequireDefault(require("./Item"));
+var _ItemsGroup = _interopRequireDefault(require("./ItemsGroup"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function selectBorderStyles(tokens) {
+  return {
+    borderBottomWidth: tokens.borderWidth,
+    borderBottomStyle: tokens.borderStyle,
+    borderBottomColor: tokens.borderColor
+  };
+}
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
+/**
+ ## Usage Criteria
+ - Use in conjunction with a large amount of educational / informational content
+ - Allow the user to navigate between options frequently and efficiently
+ */
+const SideNav = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+  let {
+    children,
+    variant = {},
+    tokens,
+    accordion = true,
+    itemTokens,
+    groupTokens,
+    ...rest
+  } = _ref;
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('SideNav', tokens, variant);
+  const [active, setActive] = _react.default.useState({
+    groupId: undefined,
+    itemId: undefined
+  });
+  const onItemPress = (itemId, groupId) => {
+    setActive({
+      itemId,
+      groupId
+    });
+  };
+  const isItemActive = (itemId, groupId) => {
+    return active.groupId === groupId && active.itemId === itemId;
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
+    ref: ref,
+    maxOpen: accordion ? 1 : null,
+    style: selectBorderStyles(themeTokens),
+    ...selectProps(rest),
+    children: _ref2 => {
+      let {
+        openIds,
+        onToggle
+      } = _ref2;
+      const renderItem = (item, index, groupId) => {
+        const {
+          itemId = `item-${index}`,
+          onPress
+        } = item.props;
+        const handlePress = function () {
+          onItemPress(...arguments);
+          if (onPress) onPress(...arguments);
+        };
+        return /*#__PURE__*/(0, _react.createElement)(_Item.default, {
+          ...item.props,
+          key: itemId,
+          itemId: itemId,
+          groupId: groupId,
+          variant: groupId ? {
+            ...variant,
+            type: 'child'
+          } : variant,
+          tokens: itemTokens,
+          isActive: isItemActive(itemId, groupId),
+          onPress: handlePress
+        });
+      };
+      return _react.default.Children.map(children, (child, index) => {
+        // iterate over children and identify them internally to later reference expanded groups and active items
+        if (child.type === _Item.default) return renderItem(child, index);
+        if (child.type === _ItemsGroup.default) {
+          const {
+            groupId = `group-${index}`
+          } = child.props;
+          const isGroupActive = active.itemId !== undefined && active.groupId === groupId;
+          const handleToggle = event => onToggle(groupId, event);
+          return /*#__PURE__*/(0, _react.createElement)(_ItemsGroup.default, {
+            ...child.props,
+            key: groupId,
+            groupId: groupId,
+            variant: variant,
+            tokens: groupTokens,
+            itemTokens: itemTokens,
+            openGroups: openIds,
+            isActive: isGroupActive,
+            onToggle: handleToggle
+          }, _react.default.Children.map(child.props.children, (item, itemIndex) => renderItem(item, itemIndex, groupId)));
+        }
+        return null;
+      });
+    }
+  });
+});
+SideNav.displayName = 'SideNav';
+SideNav.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * Specifies the structure and links of the `SideNav`. It may only consist of `SideNav.Item` and `SideNav.ItemsGroup`.
+   */
+  children: (0, _utils.componentPropType)(['Item', 'ItemsGroup']),
+  /**
+   * Identifies if only one `SideNav.ItemsGroup` should be open at a time.
+   */
+  accordion: _propTypes.default.bool,
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('SideNav'),
+  /**
+   * Custom tokens for `SideNav.Item`
+   */
+  itemTokens: (0, _utils.getTokensPropType)('SideNavItem'),
+  /**
+   * Custom tokens for `SideNavItemsGroup`
+   */
+  groupTokens: (0, _utils.getTokensPropType)('SideNavItemsGroup')
+};
+SideNav.Item = _Item.default;
+SideNav.ItemsGroup = _ItemsGroup.default;
+var _default = exports.default = SideNav;

package/lib/cjs/SideNav/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _SideNav.default;
+  }
+});
+var _SideNav = _interopRequireDefault(require("./SideNav"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/cjs/Skeleton/Skeleton.js

@@ -0,0 +1,184 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+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 _StackView = _interopRequireDefault(require("../StackView"));
+var _ThemeProvider = require("../ThemeProvider");
+var _utils = require("../utils");
+var _useSkeletonNativeAnimation = _interopRequireDefault(require("./useSkeletonNativeAnimation"));
+var _skeletonWebAnimation = _interopRequireDefault(require("./skeletonWebAnimation"));
+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 selectSkeletonStyles = _ref => {
+  let {
+    color,
+    radius
+  } = _ref;
+  return {
+    backgroundColor: color,
+    borderRadius: radius,
+    maxWidth: '100%'
+  };
+};
+const selectLineStyles = _ref2 => {
+  let {
+    skeletonHeight,
+    lineWidth,
+    radius
+  } = _ref2;
+  return {
+    width: lineWidth,
+    height: skeletonHeight,
+    borderRadius: radius
+  };
+};
+const selectShapeStyles = _ref3 => {
+  let {
+    skeletonHeight
+  } = _ref3;
+  return {
+    height: skeletonHeight,
+    width: skeletonHeight
+  };
+};
+const selectSquareStyles = _ref4 => {
+  let {
+    radius
+  } = _ref4;
+  return {
+    borderRadius: radius
+  };
+};
+const Skeleton = /*#__PURE__*/_react.default.forwardRef((_ref5, ref) => {
+  let {
+    tokens,
+    variant,
+    size,
+    sizeIndex = size,
+    sizePixels,
+    characters,
+    lines,
+    shape = 'line',
+    ...rest
+  } = _ref5;
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Skeleton', tokens, variant);
+  const pixels = (0, _utils.useResponsiveProp)(sizePixels);
+  const spacingScaleValue = typeof pixels === 'number' ?
+  // Size by an exact number of pixels
+  {
+    options: {
+      size: pixels
+    }
+  } :
+  // Size by an index on the spacing scale (getting default index from theme if none provided)
+  sizeIndex || themeTokens.size;
+  const skeletonHeight = (0, _utils.useSpacingScale)(spacingScaleValue);
+
+  // Animation color and animation duration
+  const {
+    secondColor,
+    animationDuration
+  } = themeTokens;
+  const nativeAnimation = (0, _useSkeletonNativeAnimation.default)({
+    animationDuration
+  });
+  const getAnimationBasedOnPlatform = () => {
+    const animation = _Platform.default.OS === 'web' ? (0, _skeletonWebAnimation.default)(secondColor, animationDuration) : nativeAnimation;
+    // We must pass the animation styles through `StyleSheet.create`
+    // @see https://github.com/necolas/react-native-web/issues/2387
+    const styles = _StyleSheet.default.create({
+      animation
+    });
+    return styles.animation;
+  };
+  const getLineWidth = () => {
+    if (characters) {
+      return characters * themeTokens.baseWidth;
+    }
+    return themeTokens.characters * themeTokens.baseWidth;
+  };
+  const getStyledBasedOnShape = () => {
+    if (shape === 'circle') {
+      return selectShapeStyles({
+        skeletonHeight
+      });
+    }
+    if (shape === 'box') {
+      return [selectShapeStyles({
+        skeletonHeight
+      }), selectSquareStyles({
+        radius: themeTokens.squareRadius
+      })];
+    }
+    return selectLineStyles({
+      skeletonHeight,
+      lineWidth: getLineWidth(),
+      radius: themeTokens.lineRadius
+    });
+  };
+  const renderSkeleton = function () {
+    let index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0;
+    // @see https://github.com/necolas/react-native-web/issues/2387
+    const Component = _Platform.default.OS === 'web' ? _View.default : _Animated.default.View;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+      testID: "skeleton",
+      style: [selectSkeletonStyles(themeTokens), getAnimationBasedOnPlatform(), getStyledBasedOnShape()]
+    }, `skeleton-${index + 1}`);
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+    space: themeTokens.spaceBetweenLines,
+    ref: ref,
+    ...selectProps(rest),
+    children: lines > 1 ? [...Array(lines)].map((_, index) => renderSkeleton(index)) : renderSkeleton()
+  });
+});
+Skeleton.displayName = 'Skeleton';
+Skeleton.propTypes = {
+  ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('Skeleton'),
+  variant: _utils.variantProp.propType,
+  /**
+   * Sets the size of Skeleton lines or shape according to the theme's spacing scale. For example, size={1} gives the smallest non-zero theme-defined spacing size.
+   *
+   * May also accept an object with responsive viewport keys or spacing scale options - see `useSpacingScale` for details.
+   */
+  sizeIndex: _utils.spacingProps.types.spacingValue,
+  /**
+   * @deprecated alias for `sizeIndex`
+   */
+  size: _utils.spacingProps.types.spacingValue,
+  /**
+   * Sets the size of Skeleton lines or shape to an exact number of pixels. Use when it's necessary to exactly match sizes of images or other boxes.
+   *
+   * Accepts a number or an object with responsive viewport keys, e.g. { xs: 32, lg: 64 } would be 32px at xs, sm and md and 64 at lg and xl viewports.
+   */
+  sizePixels: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.number),
+  /**
+   * Determines the width of simulated lines of text if the Skeleton's shape is 'line' (the default shape).
+   *
+   * Only has any affect if shape is line (the default). If unset, takes a default value from the theme.
+   */
+  characters: _propTypes.default.number,
+  /**
+   * Determines how many Skeleton items are rendered (default 1).
+   *
+   * Recommended usage is to simulate paragraphs of text when Skeleton's shape is 'line' (the default shape).
+   *
+   * The amount of spacing between multiple lines is controlled by theme tokens.
+   */
+  lines: _propTypes.default.number,
+  /**
+   * Determines if the skeleton should resemble lines of text (default), a circle, or a square box with themed rounded corners.
+   */
+  shape: _propTypes.default.oneOf(['line', 'circle', 'box'])
+};
+var _default = exports.default = Skeleton;

package/lib/cjs/Skeleton/index.js

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

package/lib/cjs/Skeleton/skeleton.constant.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OPACITY_STOP = exports.DEFAULT_OPACITY = void 0;
+const DEFAULT_OPACITY = exports.DEFAULT_OPACITY = 1;
+const OPACITY_STOP = exports.OPACITY_STOP = 0.4;

package/lib/cjs/Skeleton/skeletonWebAnimation.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const skeletonWebAnimation = (secondColor, animationTime) => {
+  return {
+    animationDuration: `${animationTime}ms`,
+    animationTimingFunction: 'ease-in-out',
+    animationDelay: '0.5s',
+    animationIterationCount: 'infinite',
+    animationKeyframes: {
+      '50%': {
+        backgroundColor: secondColor
+      }
+    }
+  };
+};
+var _default = exports.default = skeletonWebAnimation;

package/lib/cjs/Skeleton/useSkeletonNativeAnimation.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _skeleton = require("./skeleton.constant");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const useSkeletonNativeAnimation = _ref => {
+  let {
+    animationDuration
+  } = _ref;
+  const fadeAnimation = (0, _react.useRef)(new _Animated.default.Value(_skeleton.DEFAULT_OPACITY)).current;
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  (0, _react.useEffect)(() => {
+    const fade = _Animated.default.sequence([_Animated.default.timing(fadeAnimation, {
+      toValue: _skeleton.OPACITY_STOP,
+      duration: animationDuration,
+      useNativeDriver: _Platform.default.OS !== 'web'
+    }), _Animated.default.timing(fadeAnimation, {
+      toValue: _skeleton.DEFAULT_OPACITY,
+      duration: animationDuration,
+      useNativeDriver: _Platform.default.OS !== 'web'
+    })]);
+    _Animated.default.loop(fade).start();
+  }, [fadeAnimation]);
+  return {
+    opacity: fadeAnimation
+  };
+};
+var _default = exports.default = useSkeletonNativeAnimation;

package/lib/cjs/SkipLink/SkipLink.js

@@ -0,0 +1,196 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+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 [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.linkProps]);
+
+// ensure explicit selection of tokens
+const selectStyles = _ref => {
+  let {
+    backgroundColor,
+    outlineColor,
+    outlineOffset,
+    outlineStyle,
+    outlineWidth,
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius
+  } = _ref;
+  return {
+    backgroundColor,
+    outlineColor,
+    outlineOffset,
+    outlineStyle,
+    outlineWidth,
+    paddingHorizontal,
+    paddingVertical,
+    borderRadius
+  };
+};
+const selectTextStyles = _ref2 => {
+  let {
+    color,
+    textLine,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight
+  } = _ref2;
+  return {
+    color,
+    textDecorationLine: textLine,
+    fontFamily: `${fontName}${fontWeight}normal`,
+    lineHeight: fontSize * lineHeight,
+    fontSize
+  };
+};
+
+/**
+ * A generic Skip link component, unstyled by default.
+ * A Skip link component help keyboard-only users, screen reader users to skip
+ * sections and navigate to the content they want.
+ *
+ * ## Component API
+ *
+ * For common uses, pass a `href` that is a # link to a DOM id that can be skipped to (web only).
+ *
+ * The element with this ID should be focusable, e.g. `<Box nativeID="skip-target" focusable>`.
+ *
+ * Other custom behaviour may be set by passing an `onPress` function, and routers may be integrated
+ * in the same way as other navigation-related components by passing a `LinkRouter`; but a # anchor
+ * href on web and/or a `targetRef` for cross-platform applications is the recommended approach.
+ *
+ * ## Visible styling
+ *
+ * When focused, the skip link shows as a visible element similar to a simplified ButtonLink using
+ * UDS theming. The `tokens` prop may be used to override these styles.
+ *
+ * To control the background of a skip link, the following tokens can be used:
+ *
+ * - `backgroundColor`
+ * *
+ * In order to control the color of the skip link text, the following tokens can be used:
+ *
+ * - `color`
+ *
+ * ### Padding
+ *
+ * The following padding tokens can be used:
+ *
+ * - `paddingHorizontal`
+ * - `paddingVertical`
+ *
+ * ### Outline
+ *
+ * The following tokens to control the outline:
+ *
+ * - `outlineColor`
+ * - `outlineOffset`
+ * - `outlineStyle`
+ * - `outlineWidth`
+ *
+ * ## Usability and A11y guidelines
+ *
+ * - The skip link component is visually hidden until a keyboard press activates it.
+ * - Usually, you should place the skip link immediately after the opening <body> tag.
+ * - This lets users bypass top-level navigation links and jump to the main content on a page.
+ * - Also consider using SkipLink before a complex feature containing many focusable elements.
+ *
+ * ## Accessibility
+ *
+ * Skip link supports all the common a11y and link props.
+ */
+const SkipLink = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+  let {
+    tokens,
+    variant,
+    href,
+    children,
+    ...rawRest
+  } = _ref3;
+  const {
+    onPress,
+    ...rest
+  } = _utils.clickProps.toPressProps(rawRest);
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('SkipLink', tokens, variant);
+  const handlePress = event => {
+    if (typeof onPress === 'function') onPress(event);
+    // TODO - support native apps with something based on refs and/or setAccessibilityFocus
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
+    accessibilityRole: "link",
+    onPress: handlePress,
+    href: href,
+    style: pressableState => {
+      const themeTokens = (0, _utils.resolvePressableTokens)(getTokens, pressableState);
+      const skipLinkStyle = selectStyles(themeTokens);
+      const {
+        focused
+      } = pressableState;
+      return [staticStyles.absolute, skipLinkStyle, !focused && staticStyles.hidden];
+    },
+    ...selectProps(rest),
+    children: pressableState => {
+      const themeTokens = (0, _utils.resolvePressableTokens)(getTokens, pressableState);
+      const textStyles = selectTextStyles(themeTokens);
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+        style: [textStyles, staticStyles.baseline],
+        children: children
+      });
+    }
+  });
+});
+SkipLink.displayName = 'SkipLink';
+SkipLink.propTypes = {
+  ...selectedSystemPropTypes,
+  /**
+   * The text content shown or read out when the SkipLink is focused, usually a string.
+   */
+  children: _propTypes.default.node,
+  /**
+   * The target to skip to. Usually an anchor link to a section id (e.g. href="#main-section").
+   */
+  href: _propTypes.default.string,
+  tokens: (0, _utils.getTokensPropType)('SkipLink'),
+  variant: _utils.variantProp.propType
+};
+const staticStyles = _StyleSheet.default.create({
+  baseline: {
+    alignSelf: 'baseline'
+  },
+  absolute: {
+    margin: 0,
+    position: 'absolute',
+    top: 0,
+    left: 0
+  },
+  hidden: {
+    overflow: 'hidden',
+    ..._Platform.default.select({
+      web: {
+        clip: 'rect(0 0 0 0)',
+        clipPath: 'inset(50%)'
+      },
+      default: {
+        // width / height of 0 would make it non-focusable
+        height: 1,
+        width: 1,
+        opacity: 0
+      }
+    })
+  }
+});
+var _default = exports.default = (0, _utils.withLinkRouter)(SkipLink);

package/lib/cjs/SkipLink/index.js

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