@telus-uds/components-base 2.0.0 → 2.0.2

package/lib-module/SideNav/ItemsGroup.js

@@ -1,117 +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((_ref, ref) => {
-  let {
-    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,136 +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((_ref, ref) => {
-  let {
-    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: _ref2 => {
-      let {
-        openIds,
-        onToggle
-      } = _ref2;
-
-      const renderItem = (item, index, groupId) => {
-        const {
-          itemId = "item-".concat(index),
-          onPress
-        } = item.props;
-
-        const handlePress = function () {
-          onItemPress(...arguments);
-          if (onPress) onPress(...arguments);
-        };
-
-        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-".concat(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,182 +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 StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import View from "react-native-web/dist/exports/View";
-import propTypes from 'prop-types';
-import StackView from '../StackView';
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, responsiveProps, useResponsiveProp, useSpacingScale, spacingProps, 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 = _ref => {
-  let {
-    color,
-    radius
-  } = _ref;
-  return {
-    backgroundColor: color,
-    borderRadius: radius,
-    maxWidth: '100%'
-  };
-};
-
-const selectLineStyles = _ref2 => {
-  let {
-    skeletonHeight,
-    lineWidth
-  } = _ref2;
-  return {
-    width: lineWidth,
-    height: skeletonHeight
-  };
-};
-
-const selectShapeStyles = _ref3 => {
-  let {
-    skeletonHeight
-  } = _ref3;
-  return {
-    height: skeletonHeight,
-    width: skeletonHeight
-  };
-};
-
-const selectSquareStyles = _ref4 => {
-  let {
-    radius
-  } = _ref4;
-  return {
-    borderRadius: radius
-  };
-};
-
-const Skeleton = /*#__PURE__*/forwardRef((_ref5, ref) => {
-  let {
-    tokens,
-    variant,
-    size,
-    sizeIndex = size,
-    sizePixels,
-    characters,
-    lines,
-    shape = 'line',
-    ...rest
-  } = _ref5;
-  const themeTokens = useThemeTokens('Skeleton', tokens, variant);
-  const pixels = 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 = useSpacingScale(spacingScaleValue);
-  const nativeAnimation = useSkeletonNativeAnimation();
-
-  const getAnimationBasedOnPlatform = () => {
-    const animation = Platform.OS === 'web' ? skeletonWebAnimation : nativeAnimation; // We must pass the animation styles through `StyleSheet.create`
-    // @see https://github.com/necolas/react-native-web/issues/2387
-
-    const styles = StyleSheet.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()
-    });
-  };
-
-  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.OS === 'web' ? View : Animated.View;
-    return /*#__PURE__*/_jsx(Component, {
-      testID: "skeleton",
-      style: [selectSkeletonStyles(themeTokens), getAnimationBasedOnPlatform(), getStyledBasedOnShape()]
-    }, "skeleton-".concat(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,
-
-  /**
-   * 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: spacingProps.types.spacingValue,
-
-  /**
-   * @deprecated alias for `sizeIndex`
-   */
-  size: 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: responsiveProps.getTypeOptionallyByViewport(propTypes.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.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.number,
-
-  /**
-   * Determines if the skeleton should resemble lines of text (default), a circle, or a square box with themed rounded corners.
-   */
-  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: "".concat(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,25 +0,0 @@
-import { useEffect, useRef } from 'react';
-import Animated from "react-native-web/dist/exports/Animated";
-import Platform from "react-native-web/dist/exports/Platform";
-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: Platform.OS !== 'web'
-    }), Animated.timing(fadeAnimation, {
-      toValue: DEFAULT_OPACITY,
-      duration: ANIMATION_DURATION,
-      useNativeDriver: Platform.OS !== 'web'
-    })]);
-    Animated.loop(fade).start();
-  }, [fadeAnimation]);
-  return {
-    opacity: fadeAnimation
-  };
-};
-
-export default useSkeletonNativeAnimation;

package/lib-module/SkipLink/SkipLink.js

@@ -1,188 +0,0 @@
-import React, { forwardRef } from 'react';
-import Platform from "react-native-web/dist/exports/Platform";
-import Pressable from "react-native-web/dist/exports/Pressable";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Text from "react-native-web/dist/exports/Text";
-import PropTypes from 'prop-types';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps, clickProps, getTokensPropType, linkProps, resolvePressableTokens, selectSystemProps, variantProp, withLinkRouter } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, 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
-  } = _ref2;
-  return {
-    color
-  };
-};
-/**
- * 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__*/forwardRef((_ref3, ref) => {
-  let {
-    tokens,
-    variant,
-    href,
-    children,
-    ...rawRest
-  } = _ref3;
-  const {
-    onPress,
-    ...rest
-  } = clickProps.toPressProps(rawRest);
-  const getTokens = useThemeTokensCallback('SkipLink', tokens, variant);
-  const defaultTokens = getTokens();
-
-  const resolveLinkTokens = pressState => resolvePressableTokens(defaultTokens, pressState);
-
-  const handlePress = event => {
-    if (typeof onPress === 'function') onPress(event); // TODO - support native apps with something based on refs and/or setAccessibilityFocus
-  };
-
-  return /*#__PURE__*/_jsx(Pressable, {
-    ref: ref,
-    accessibilityRole: "link",
-    onPress: handlePress,
-    href: href,
-    style: _ref4 => {
-      let {
-        focused: focus
-      } = _ref4;
-      const themeTokens = getTokens({
-        focus
-      });
-      const skipLinkStyle = selectStyles(themeTokens);
-      return [staticStyles.absolute, skipLinkStyle, !focus && staticStyles.hidden];
-    },
-    ...selectProps(rest),
-    children: pressState => {
-      const themeTokens = resolveLinkTokens(pressState);
-      const textStyles = selectTextStyles(themeTokens);
-      return /*#__PURE__*/_jsx(Text, {
-        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.node,
-
-  /**
-   * The target to skip to. Usually an anchor link to a section id (e.g. href="#main-section").
-   */
-  href: PropTypes.string,
-  tokens: getTokensPropType('SkipLink'),
-  variant: variantProp.propType
-};
-const staticStyles = StyleSheet.create({
-  baseline: {
-    alignSelf: 'baseline'
-  },
-  absolute: {
-    margin: 0,
-    position: 'absolute',
-    top: 0,
-    left: 0
-  },
-  hidden: {
-    overflow: 'hidden',
-    ...Platform.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
-      }
-    })
-  }
-});
-export default withLinkRouter(SkipLink);

package/lib-module/SkipLink/index.js

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