@telus-uds/components-base 1.7.1 → 1.8.2

package/lib-module/SideNav/Item.js

@@ -1,139 +0,0 @@
-import React, { forwardRef } from 'react';
-import Pressable from "react-native-web/dist/exports/Pressable";
-import PropTypes from 'prop-types';
-import { a11yProps, getTokensPropType, hrefAttrsProp, linkProps, selectSystemProps, variantProp, viewProps } from '../utils';
-import { useThemeTokensCallback, verticalAlignRow } from '../ThemeProvider';
-import ItemContent from './ItemContent';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
-
-function selectItemStyles({
-  backgroundColor,
-  borderColor,
-  borderWidth,
-  borderStyle,
-  paddingLeft,
-  paddingRight,
-  paddingTop,
-  paddingBottom,
-  justifyContent,
-  verticalAlign
-}) {
-  return {
-    backgroundColor,
-    borderTopColor: borderColor,
-    borderTopWidth: borderWidth,
-    borderTopStyle: borderStyle,
-    paddingLeft,
-    paddingRight,
-    paddingTop,
-    paddingBottom,
-    justifyContent,
-    ...verticalAlignRow(verticalAlign)
-  };
-}
-/**
- `SideNav.Item` is a navigational element that is used within `SideNav` or `SideNav.ItemsGroup`.
-
- This component can only be accessed as a name-spaced component: `SideNav.Item`.
- */
-
-
-const Item = /*#__PURE__*/forwardRef(({
-  children,
-  itemId,
-  groupId,
-  onPress,
-  isActive = false,
-  isExpanded = false,
-  tokens,
-  variant,
-  href,
-  accessibilityRole = 'link',
-  testID,
-  ...props
-}, ref) => {
-  const handlePress = () => onPress(itemId, groupId);
-
-  const {
-    hrefAttrs,
-    rest
-  } = hrefAttrsProp.bundle(props);
-  const selectedProps = selectProps({
-    accessibilityRole,
-    href,
-    onPress: handlePress,
-    hrefAttrs,
-    ...rest
-  });
-  const getTokens = useThemeTokensCallback('SideNavItem', tokens, variant);
-
-  const getAppearanceState = ({
-    hovered
-  }) => ({
-    hover: hovered,
-    active: isActive,
-    expanded: isExpanded
-  });
-
-  const getPressableStyle = pressableState => selectItemStyles(getTokens(getAppearanceState(pressableState)));
-
-  return /*#__PURE__*/_jsx(Pressable, {
-    ref: ref,
-    style: getPressableStyle,
-    accessibilityState: {
-      selected: isActive
-    },
-    ...selectedProps,
-    children: pressableState => {
-      const themeTokens = getTokens(getAppearanceState(pressableState));
-      return /*#__PURE__*/_jsx(ItemContent, {
-        tokens: themeTokens,
-        children: children
-      });
-    }
-  });
-});
-Item.displayName = 'Item';
-Item.propTypes = { ...selectedSystemPropTypes,
-
-  /**
-   * Text content of the `Item`.
-   */
-  children: PropTypes.node.isRequired,
-
-  /**
-   * @ignore
-   * Set internally in `SideNav` render function - used to keep track of active item.
-   */
-  itemId: PropTypes.string,
-
-  /**
-   * @ignore
-   * Set internally in `SideNav` render function - used to keep track of expanded items groups.
-   */
-  groupId: PropTypes.string,
-  onPress: PropTypes.func,
-  href: PropTypes.string,
-
-  /**
-   * On Web if href is passed, React Native Web maps this object's props to
-   * `rel`, `target` and `download` attrs.
-   */
-  hrefAttrs: PropTypes.shape(hrefAttrsProp.types),
-
-  /**
-   * @ignore
-   * Set internally in `SideNav` render function.
-   */
-  isActive: PropTypes.bool,
-
-  /**
-   * @ignore
-   * Set internally in `SideNav.ItemsGroup` render function. Used to mark expanded `ItemsGroup` parent.
-   */
-  isExpanded: PropTypes.bool,
-  tokens: getTokensPropType('SideNavItem'),
-  variant: variantProp.propType
-};
-export default Item;

package/lib-module/SideNav/ItemContent.js

@@ -1,45 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Typography from '../Typography';
-import { selectTokens, getTokensPropType } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-export function selectAccentStyles(tokens) {
-  return {
-    left: tokens.accentOffset,
-    top: tokens.accentPadding,
-    bottom: tokens.accentPadding,
-    backgroundColor: tokens.accentBackgroundColor,
-    width: tokens.accentWidth,
-    position: 'absolute'
-  };
-}
-/**
- * Content inside an item or control in a SideNav, themed by the SideNavItem theme
- */
-
-const ItemContent = ({
-  children,
-  tokens
-}) => /*#__PURE__*/_jsxs(_Fragment, {
-  children: [/*#__PURE__*/_jsx(Typography, {
-    tokens: selectTokens('Typography', tokens),
-    children: children
-  }), /*#__PURE__*/_jsx(View, {
-    style: [staticStyles.absolute, selectAccentStyles(tokens)]
-  })]
-});
-
-ItemContent.propTypes = {
-  tokens: getTokensPropType('SideNavItem'),
-  children: PropTypes.node
-};
-const staticStyles = StyleSheet.create({
-  absolute: {
-    position: 'absolute'
-  }
-});
-export default ItemContent;

package/lib-module/SideNav/ItemsGroup.js

@@ -1,115 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import ItemContent from './ItemContent';
-import ExpandCollapse from '../ExpandCollapse';
-import { getTokensPropType, variantProp, componentPropType, selectTokens } from '../utils';
-import { useThemeTokensCallback } from '../ThemeProvider';
-/**
- Expandable content areas for use within `SideNav`.
-
- This component can only be accessed as a name-spaced component: `SideNav.ItemsGroup`.
-
- `SideNav.ItemsGroup` contains a label and a list of items. Items can link to in-page elements or route to other pages.
-
- ## Usage Criteria
- - Use `SideNav.ItemsGroup` with large pages that have multiple sections
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-const ItemsGroup = /*#__PURE__*/forwardRef(({
-  children,
-  label,
-  openGroups,
-  groupId,
-  isActive = false,
-  variant,
-  tokens,
-  itemTokens,
-  onToggle
-}, ref) => {
-  // A SideNav control uses the same style and theme as SideNavItem, with a 'parent' variant,
-  // plus control-specific tokens from the SideNavItemsGroup theme (e.g. open/close icon, etc).
-  const getAppearance = appearance => ({ ...variant,
-    ...appearance,
-    active: isActive
-  });
-
-  const getItemAppearance = appearance => ({ ...getAppearance(appearance),
-    type: 'parent'
-  });
-
-  const getGroupTokens = useThemeTokensCallback('SideNavItemsGroup', tokens, variant);
-
-  const getPanelTokens = appearance => selectTokens('ExpandCollapsePanel', getGroupTokens(getAppearance(appearance)));
-
-  const getItemTokens = useThemeTokensCallback('SideNavItem', itemTokens, variant);
-
-  const getControlTokens = appearance => selectTokens('ExpandCollapseControl', { ...getItemTokens(getItemAppearance(appearance)),
-    // main style from SideNavItem
-    ...getGroupTokens(getAppearance(appearance)) // control-specific tokens like icon etc
-
-  });
-
-  const controlContent = controlState => {
-    const currentItemTokens = getItemTokens(getItemAppearance(controlState));
-    return /*#__PURE__*/_jsx(ItemContent, {
-      tokens: currentItemTokens,
-      children: label
-    });
-  };
-
-  return /*#__PURE__*/_jsx(ExpandCollapse.Panel, {
-    ref: ref,
-    openIds: openGroups,
-    panelId: groupId,
-    onToggle: onToggle,
-    tokens: getPanelTokens,
-    controlTokens: getControlTokens,
-    control: controlContent,
-    accessibilityState: {
-      active: isActive
-    } // ExpandCollapse.Panel handles expanded state
-    ,
-    children: children
-  });
-});
-ItemsGroup.displayName = 'ItemsGroup';
-ItemsGroup.propTypes = {
-  /**
-   * Specifies the links contained within. It may only contain `SideNav.Item`.
-   */
-  children: componentPropType('Item'),
-
-  /**
-   * Text content of the group's parent `SideNav.Item`.
-   */
-  label: PropTypes.string.isRequired,
-
-  /**
-   * @ignore
-   * Set internally in `SideNav` render function - used to keep track of expanded items groups.
-   */
-  groupId: PropTypes.string,
-
-  /**
-   * @ignore
-   * Set internally in `SideNav` render function. Called when the group is expanded/collapsed.
-   */
-  onToggle: PropTypes.func,
-
-  /**
-   * @ignore
-   * Set internally in `SideNav` render function. Contains `groupId`s of currently open groups.
-   */
-  openGroups: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
-
-  /**
-   * @ignore
-   * Set internally in `SideNav` render function. Used to mark group containing the currently active `SideNav.Item`.
-   */
-  isActive: PropTypes.bool,
-  variant: variantProp.propType,
-  tokens: getTokensPropType('SideNavItemsGroup'),
-  itemTokens: getTokensPropType('SideNavItem')
-};
-export default ItemsGroup;

package/lib-module/SideNav/SideNav.js

@@ -1,133 +0,0 @@
-import React, { forwardRef, useState } from 'react';
-import PropTypes from 'prop-types';
-import ExpandCollapse from '../ExpandCollapse';
-import Item from './Item';
-import ItemsGroup from './ItemsGroup';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, componentPropType, getTokensPropType, selectSystemProps, variantProp, viewProps } from '../utils';
-import { createElement as _createElement } from "react";
-import { jsx as _jsx } from "react/jsx-runtime";
-
-function selectBorderStyles(tokens) {
-  return {
-    borderBottomWidth: tokens.borderWidth,
-    borderBottomStyle: tokens.borderStyle,
-    borderBottomColor: tokens.borderColor
-  };
-}
-
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, 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__*/forwardRef(({
-  children,
-  variant = {},
-  tokens,
-  accordion = true,
-  itemTokens,
-  groupTokens,
-  ...rest
-}, ref) => {
-  const themeTokens = useThemeTokens('SideNav', tokens, variant);
-  const [active, setActive] = 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__*/_jsx(ExpandCollapse, {
-    ref: ref,
-    maxOpen: accordion ? 1 : null,
-    style: selectBorderStyles(themeTokens),
-    ...selectProps(rest),
-    children: ({
-      openIds,
-      onToggle
-    }) => {
-      const renderItem = (item, index, groupId) => {
-        const {
-          itemId = `item-${index}`,
-          onPress
-        } = item.props;
-
-        const handlePress = (...args) => {
-          onItemPress(...args);
-          if (onPress) onPress(...args);
-        };
-
-        return /*#__PURE__*/_createElement(Item, { ...item.props,
-          key: itemId,
-          itemId: itemId,
-          groupId: groupId,
-          variant: groupId ? { ...variant,
-            type: 'child'
-          } : variant,
-          tokens: itemTokens,
-          isActive: isItemActive(itemId, groupId),
-          onPress: handlePress
-        });
-      };
-
-      return React.Children.map(children, (child, index) => {
-        // iterate over children and identify them internally to later reference expanded groups and active items
-        if (child.type === Item) return renderItem(child, index);
-
-        if (child.type === ItemsGroup) {
-          const {
-            groupId = `group-${index}`
-          } = child.props;
-          const isGroupActive = active.itemId !== undefined && active.groupId === groupId;
-
-          const handleToggle = event => onToggle(groupId, event);
-
-          return /*#__PURE__*/_createElement(ItemsGroup, { ...child.props,
-            key: groupId,
-            groupId: groupId,
-            variant: variant,
-            tokens: groupTokens,
-            itemTokens: itemTokens,
-            openGroups: openIds,
-            isActive: isGroupActive,
-            onToggle: handleToggle
-          }, React.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: componentPropType(['Item', 'ItemsGroup']),
-
-  /**
-   * Identifies if only one `SideNav.ItemsGroup` should be open at a time.
-   */
-  accordion: PropTypes.bool,
-  variant: variantProp.propType,
-  tokens: getTokensPropType('SideNav'),
-  itemTokens: getTokensPropType('SideNavItem'),
-  groupTokens: getTokensPropType('SideNavItemsGroup')
-};
-SideNav.Item = Item;
-SideNav.ItemsGroup = ItemsGroup;
-export default SideNav;

package/lib-module/SideNav/index.js

@@ -1 +0,0 @@
-export { default } from './SideNav';

package/lib-module/Skeleton/Skeleton.js

@@ -1,117 +0,0 @@
-import React, { forwardRef } from 'react';
-import Animated from "react-native-web/dist/exports/Animated";
-import Platform from "react-native-web/dist/exports/Platform";
-import propTypes from 'prop-types';
-import StackView from '../StackView';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, useSpacingScale, variantProp, viewProps } from '../utils';
-import useSkeletonNativeAnimation from './useSkeletonNativeAnimation';
-import skeletonWebAnimation from './skeletonWebAnimation';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-const selectSkeletonStyles = ({
-  color,
-  radius,
-  fadeAnimation
-}) => ({
-  backgroundColor: color,
-  borderRadius: radius,
-  ...fadeAnimation
-});
-
-const selectLineStyles = ({
-  skeletonHeight,
-  lineWidth
-}) => ({
-  width: lineWidth,
-  height: skeletonHeight
-});
-
-const selectShapeStyles = ({
-  skeletonHeight
-}) => ({
-  height: skeletonHeight,
-  width: skeletonHeight
-});
-
-const selectSquareStyles = ({
-  radius
-}) => ({
-  borderRadius: radius
-});
-
-const Skeleton = /*#__PURE__*/forwardRef(({
-  tokens,
-  variant,
-  size,
-  characters,
-  lines,
-  shape = 'line',
-  ...rest
-}, ref) => {
-  const themeTokens = useThemeTokens('Skeleton', tokens, variant);
-  const skeletonHeight = useSpacingScale(size || themeTokens.size);
-  const nativeAnimation = useSkeletonNativeAnimation();
-
-  const getAnimationBaseOnPlatform = () => {
-    if (Platform.OS !== 'web') {
-      return nativeAnimation;
-    }
-
-    return skeletonWebAnimation;
-  };
-
-  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()
-    });
-  };
-
-  const renderSkeleton = (index = 0) => /*#__PURE__*/_jsx(Animated.View, {
-    testID: "skeleton",
-    style: [selectSkeletonStyles({ ...themeTokens,
-      fadeAnimation: getAnimationBaseOnPlatform()
-    }), getStyledBasedOnShape()]
-  }, `skeleton-${index + 1}`);
-
-  return /*#__PURE__*/_jsx(StackView, {
-    space: themeTokens.spaceBetweenLines,
-    ref: ref,
-    ...selectProps(rest),
-    children: lines > 1 ? [...Array(lines)].map((_, index) => renderSkeleton(index)) : renderSkeleton()
-  });
-});
-Skeleton.displayName = 'Skeleton';
-Skeleton.propTypes = { ...selectedSystemPropTypes,
-  tokens: getTokensPropType('Skeleton'),
-  variant: variantProp.propType,
-  size: propTypes.number,
-  characters: propTypes.number,
-  lines: propTypes.number,
-  shape: propTypes.oneOf(['line', 'circle', 'box'])
-};
-export default Skeleton;

package/lib-module/Skeleton/index.js

@@ -1,2 +0,0 @@
-import Skeleton from './Skeleton';
-export default Skeleton;

package/lib-module/Skeleton/skeleton.constant.js

@@ -1,3 +0,0 @@
-export const DEFAULT_OPACITY = 1;
-export const OPACITY_STOP = 0.4;
-export const ANIMATION_DURATION = 1500;

package/lib-module/Skeleton/skeletonWebAnimation.js

@@ -1,18 +0,0 @@
-import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
-export default {
-  animationDuration: `${ANIMATION_DURATION}ms`,
-  animationTimingFunction: 'ease-in-out',
-  animationDelay: '0.5s',
-  animationIterationCount: 'infinite',
-  animationKeyframes: {
-    '0%': {
-      opacity: DEFAULT_OPACITY
-    },
-    '50%': {
-      opacity: OPACITY_STOP
-    },
-    '100%': {
-      opacity: DEFAULT_OPACITY
-    }
-  }
-};

package/lib-module/Skeleton/useSkeletonNativeAnimation.js

@@ -1,24 +0,0 @@
-import { useEffect, useRef } from 'react';
-import Animated from "react-native-web/dist/exports/Animated";
-import { ANIMATION_DURATION, DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
-
-const useSkeletonNativeAnimation = () => {
-  const fadeAnimation = useRef(new Animated.Value(DEFAULT_OPACITY)).current;
-  useEffect(() => {
-    const fade = Animated.sequence([Animated.timing(fadeAnimation, {
-      toValue: OPACITY_STOP,
-      duration: ANIMATION_DURATION,
-      useNativeDriver: true
-    }), Animated.timing(fadeAnimation, {
-      toValue: DEFAULT_OPACITY,
-      duration: ANIMATION_DURATION,
-      useNativeDriver: true
-    })]);
-    Animated.loop(fade).start();
-  }, [fadeAnimation]);
-  return {
-    opacity: fadeAnimation
-  };
-};
-
-export default useSkeletonNativeAnimation;

package/lib-module/Spacer/Spacer.js

@@ -1,97 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import View from "react-native-web/dist/exports/View";
-import { a11yProps, selectSystemProps, spacingProps, useSpacingScale, viewProps } from '../utils';
-/**
- * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
- * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
- */
-
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-
-const selectSizeStyle = (size, direction) => ({
-  // Only apply space in one direction at a time, else large spacers will increase the
-  // 'across' size of the parent and mess up siblings with styles like `alignItems: stretch`.
-  [direction === 'row' ? 'width' : 'height']: size
-});
-/**
- * An empty element used to create a gap between components that is sized according to the theme spacing scale,
- * passing its `space` prop ({@link SpacingValue}) to `useSpacingScale`.
- *
- * ## Simple spacing
- *
- * For most simple uses, pass a number to Spacer's `space` prop referring to an index in the theme's
- * spacing scale. For example, for a spacer of the theme's smallest non-zero spacing size:
- *
- * ```jsx
- * <Spacer space={1} />
- * ```
- *
- * ## Responsive spacing
- *
- * Different spacing scale sizes may be chosen for different viewports by passing `space` a {@link SpacingObject}
- * using keys for the viewports at and above which certain spacing indexes should apply.
- *
- * This can be useful when a Spacer is inside a layout with a shape that changes between viewports.
- *
- * For example, a spacer might need no width below 'md' viewport because the items it separates will be on separate lines,
- * but may need a visible size above that viewport, and a wider size at the highest viewport:
- *
- * ```jsx
- * <Spacer space={{ xs: 0, md: 2, xl: 3 }} />
- * ```
- *
- * Note that themes may also define viewport-specific behaviour for indexes on the spacing scale. These viewport
- * props should only be used where necessary to achieve a certain responsive layoutm and shouldn't be used to replace
- * or deviate from responsive spacing behaviour in a theme that is intended to apply universally.
- *
- * ## More options
- *
- * See `useSpacingScale` hook for more options that may be used with the `space` prop.
- *
- * ## Accessibility
- *
- * Spacer has no content and is ignored by tools such as screen readers. Use `Divider` for
- * separations between elements that may be treated as semantically meaningful on web.
- */
-
-
-const Spacer = /*#__PURE__*/forwardRef(({
-  space = 1,
-  direction = 'column',
-  ...rest
-}, ref) => {
-  const size = useSpacingScale(space);
-  const sizeStyle = selectSizeStyle(size, direction);
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: [staticStyles.stretch, sizeStyle],
-    ...selectProps(rest)
-  });
-});
-Spacer.displayName = 'Spacer';
-Spacer.propTypes = { ...selectedSystemPropTypes,
-
-  /**
-   * The size of the spacer according to the theme's spacing scale.
-   * Either a number corresponding to a position on the theme's spacing scale (1 is smallest, 2 is second smallest, etc),
-   * or, a SpacingObject with viewport keys and options (see `useSpacingScale` for details).
-   */
-  space: spacingProps.types.spacingValue,
-
-  /**
-   * The spacer applies space in only one direction, which is controlled by the `direction` prop:
-   *
-   * - `'column'` (default) applies space vertically; has a fixed height and not width.
-   * - `'row'` applies space horizontally; has a fixed width and not height.
-   */
-  direction: PropTypes.oneOf(['column', 'row'])
-};
-const staticStyles = StyleSheet.create({
-  stretch: {
-    alignSelf: 'stretch'
-  }
-});
-export default Spacer;