@telus-uds/components-base 1.97.0 → 1.97.1

package/lib-module/ActionCard/ActionCard.js

@@ -1,343 +0,0 @@
-import React from 'react';
-import Animated from "react-native-web/dist/exports/Animated";
-import View from "react-native-web/dist/exports/View";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import Text from "react-native-web/dist/exports/Text";
-import PropTypes from 'prop-types';
-import { applyTextStyles, useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getTokensPropType, selectSystemProps, variantProp, viewProps, wrapStringsInText, clickProps, hrefAttrsProp, linkProps } from '../utils';
-import Icon from '../Icon';
-import Card from '../Card';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, linkProps, viewProps]);
-const selectCardStyles = styles => ['borderColor', 'borderRadius', 'borderWidth'].reduce((acc, key) => {
-  if (styles[key]) acc[key] = styles[key];
-  return acc;
-}, {});
-const selectInteractiveCardStyles = _ref => {
-  let {
-    backgroundColor,
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop
-  } = _ref;
-  return {
-    ...(backgroundColor && {
-      backgroundColor
-    }),
-    paddingBottom,
-    paddingLeft,
-    paddingRight,
-    paddingTop
-  };
-};
-const selectIconStyles = _ref2 => {
-  let {
-    iconMarginBottom,
-    iconMarginLeft,
-    iconMarginRight,
-    iconMarginTop
-  } = _ref2;
-  return {
-    marginBottom: iconMarginBottom,
-    marginLeft: iconMarginLeft,
-    marginRight: iconMarginRight,
-    marginTop: iconMarginTop
-  };
-};
-const selectIconProps = _ref3 => {
-  let {
-    icon,
-    iconBackgroundColor,
-    iconColor
-  } = _ref3;
-  return {
-    icon,
-    variant: {
-      background: true,
-      padding: 'small'
-    },
-    tokens: {
-      backgroundColor: iconBackgroundColor,
-      color: iconColor
-    }
-  };
-};
-const selectTitleStyles = _ref4 => {
-  let {
-    titleMarginBottom,
-    titleMarginLeft,
-    titleMarginRight,
-    titleMarginTop
-  } = _ref4;
-  return {
-    marginBottom: titleMarginBottom,
-    marginLeft: titleMarginLeft,
-    marginRight: titleMarginRight,
-    marginTop: titleMarginTop
-  };
-};
-const selectTitleTextStyles = _ref5 => {
-  let {
-    titleFontColor,
-    titleFontName,
-    titleFontSize,
-    titleFontWeight,
-    titleLineHeight
-  } = _ref5;
-  return applyTextStyles({
-    fontColor: titleFontColor,
-    fontName: titleFontName,
-    fontSize: titleFontSize,
-    fontWeight: titleFontWeight,
-    lineHeight: titleLineHeight
-  });
-};
-const selectContentStyles = _ref6 => {
-  let {
-    contentMarginBottom,
-    contentMarginLeft,
-    contentMarginRight,
-    contentMarginTop
-  } = _ref6;
-  return {
-    marginBottom: contentMarginBottom,
-    marginLeft: contentMarginLeft,
-    marginRight: contentMarginRight,
-    marginTop: contentMarginTop
-  };
-};
-const selectContentTextStyles = _ref7 => {
-  let {
-    contentFontColor,
-    contentFontName,
-    contentFontSize,
-    contentFontWeight,
-    contentLineHeight
-  } = _ref7;
-  return applyTextStyles({
-    fontColor: contentFontColor,
-    fontName: contentFontName,
-    fontSize: contentFontSize,
-    fontWeight: contentFontWeight,
-    lineHeight: contentLineHeight
-  });
-};
-const selectStatusIconProps = _ref8 => {
-  let {
-    statusIcon,
-    statusIconColor
-  } = _ref8;
-  return {
-    icon: statusIcon,
-    tokens: {
-      color: statusIconColor
-    },
-    variant: {
-      size: 'micro'
-    }
-  };
-};
-const selectActionIconStyles = _ref9 => {
-  let {
-    actionIconMarginBottom,
-    actionIconMarginLeft,
-    actionIconMarginRight,
-    actionIconMarginTop
-  } = _ref9;
-  return {
-    marginBottom: actionIconMarginBottom,
-    marginLeft: actionIconMarginLeft,
-    marginRight: actionIconMarginRight,
-    marginTop: actionIconMarginTop
-  };
-};
-const selectActionIconProps = _ref10 => {
-  let {
-    actionIcon,
-    actionIconColor
-  } = _ref10;
-  return {
-    icon: actionIcon,
-    tokens: {
-      color: actionIconColor
-    }
-  };
-};
-const ACTION_ICON_ANIMATION_DURATION = 100;
-
-/**
- * ActionCard component represents a card with an action that can be triggered by the user.
- *
- * @component
- * @example
- * return (
- *   <ActionCard
- *     icon={<Icon icon={Icons.EyeMasked} />}
- *     title="Like"
- *     href="/like"
- *     accessibilityRole="link"
- *     tokens={themeTokens}
- *     variant={{validation: 'warning'}}
- *     onPress={() => handleLike()}
- *   >
- *    Click here to like the post
- *   </ActionCard>
- * )
- */
-const ActionCard = /*#__PURE__*/React.forwardRef((_ref11, ref) => {
-  let {
-    icon,
-    title,
-    children,
-    href,
-    direction = true,
-    accessibilityRole,
-    tokens,
-    variant,
-    ...rest
-  } = _ref11;
-  const themeTokens = useThemeTokens('ActionCard', tokens, variant);
-  const actionIconAnimation = React.useRef(new Animated.Value(0)).current;
-  const {
-    onPress,
-    ...props
-  } = clickProps.toPressProps(rest);
-  const {
-    hrefAttrs,
-    rawRest
-  } = hrefAttrsProp.bundle(props);
-  const selectedProps = selectProps({
-    accessibilityRole,
-    href,
-    onPress: linkProps.handleHref({
-      href,
-      onPress
-    }),
-    hrefAttrs,
-    ...rawRest
-  });
-  return /*#__PURE__*/_jsx(Card, {
-    ref: ref,
-    interactiveCard: {
-      body: pressableState => {
-        const animate = pressableState.pressed || pressableState.hover || pressableState.focus;
-        Animated.timing(actionIconAnimation, {
-          toValue: animate ? themeTokens.actionIconTranslate : 0,
-          duration: ACTION_ICON_ANIMATION_DURATION,
-          useNativeDriver: false
-        }).start();
-        return /*#__PURE__*/_jsxs(View, {
-          style: staticStyles.container,
-          children: [icon && /*#__PURE__*/_jsx(View, {
-            style: selectIconStyles(themeTokens),
-            children: /*#__PURE__*/_jsx(Icon, {
-              ...selectIconProps({
-                icon,
-                ...themeTokens
-              })
-            })
-          }), /*#__PURE__*/_jsxs(View, {
-            style: staticStyles.content,
-            children: [/*#__PURE__*/_jsxs(View, {
-              style: staticStyles.header,
-              children: [/*#__PURE__*/_jsx(View, {
-                style: [selectTitleStyles(themeTokens), staticStyles.title],
-                children: /*#__PURE__*/_jsxs(Text, {
-                  children: [wrapStringsInText(title, {
-                    style: selectTitleTextStyles(themeTokens)
-                  }), themeTokens.statusIcon && /*#__PURE__*/_jsx(View, {
-                    style: staticStyles.statusIcon,
-                    children: /*#__PURE__*/_jsx(Icon, {
-                      ...selectStatusIconProps(themeTokens)
-                    })
-                  })]
-                })
-              }), /*#__PURE__*/_jsx(View, {
-                style: staticStyles.icons,
-                children: direction && /*#__PURE__*/_jsx(Animated.View, {
-                  style: [selectActionIconStyles(themeTokens), {
-                    transform: [{
-                      translateX: actionIconAnimation
-                    }]
-                  }],
-                  children: /*#__PURE__*/_jsx(Icon, {
-                    ...selectActionIconProps(themeTokens)
-                  })
-                })
-              })]
-            }), /*#__PURE__*/_jsx(View, {
-              style: [staticStyles.body, selectContentStyles(themeTokens)],
-              children: typeof children === 'string' ? wrapStringsInText(children, {
-                style: selectContentTextStyles(themeTokens)
-              }) : children
-            })]
-          })]
-        });
-      },
-      tokens: selectInteractiveCardStyles(themeTokens)
-    },
-    tokens: selectCardStyles(themeTokens),
-    ...selectedProps
-  });
-});
-ActionCard.displayName = 'ActionCard';
-ActionCard.propTypes = {
-  ...selectedSystemPropTypes,
-  tokens: getTokensPropType('ActionCard'),
-  variant: variantProp.propType,
-  /**
-   * Icon for the ActionCard
-   */
-  icon: PropTypes.elementType,
-  /**
-   * Title for the ActionCard
-   */
-  title: PropTypes.string,
-  /**
-   * Children for the ActionCard
-   */
-  children: PropTypes.oneOfType([PropTypes.string, PropTypes.elementType]),
-  /**
-   * href for the ActionCard
-   */
-  href: PropTypes.string,
-  /**
-   * Enable or disable the direction of the ActionCard
-   */
-  direction: PropTypes.bool,
-  /**
-   * AccesibilityRole for the ActionCard
-   */
-  accessibilityRole: PropTypes.string
-};
-const staticStyles = StyleSheet.create({
-  body: {
-    flexDirection: 'column'
-  },
-  container: {
-    flex: 1,
-    flexDirection: 'row'
-  },
-  content: {
-    flex: 1,
-    flexDirection: 'column'
-  },
-  icons: {
-    flexDirection: 'row',
-    alignItems: 'center'
-  },
-  header: {
-    flexDirection: 'row',
-    justifyContent: 'space-between'
-  },
-  title: {
-    flexShrink: 1
-  },
-  statusIcon: {
-    marginLeft: 4
-  }
-});
-export default ActionCard;

package/lib-module/ActionCard/index.js

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

package/lib-module/ActivityIndicator/Spinner.js

@@ -1,80 +0,0 @@
-import React from 'react';
-import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared';
-import { useA11yInfo } from '../A11yInfoProvider';
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Fragment as _Fragment } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
-const SVG_RADIUS = 20;
-const SVG_CIRCUMFERENCE = SVG_RADIUS * 2 * Math.PI;
-const MIN_SVG_LENGTH = MIN_STROKE_ANGLE / 360 * SVG_CIRCUMFERENCE;
-const MAX_SVG_LENGTH = (1 - MIN_EMPTY_ANGLE / 360) * SVG_CIRCUMFERENCE;
-const animationProps = {
-  begin: '0s',
-  dur: `${DURATION}ms`,
-  fill: 'freeze',
-  repeatCount: 'indefinite'
-};
-const bezierProps = {
-  calcMode: 'spline',
-  keyTimes: '0; 0.5; 1',
-  keySplines: `${BEZIER.join(', ')} ; ${BEZIER.join(', ')}`
-};
-// We're using svg rather than css here to define the animation to avoid needing to introduce css injection mechanism
-// It's possible to replicate this functionality with RNW animations, but it snags on chrome at least, see https://github.com/telus/universal-design-system/pull/477 for details.
-const Spinner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    size,
-    color,
-    thickness,
-    label,
-    isStatic = false
-  } = _ref;
-  const {
-    reduceMotionEnabled
-  } = useA11yInfo();
-  const reduceMotion = reduceMotionEnabled || isStatic;
-  return /*#__PURE__*/_jsx("svg", {
-    ref: ref,
-    width: `${size}px`,
-    height: `${size}px`,
-    viewBox: "0 0 48 48",
-    "aria-valuetext": label,
-    role: "progressbar",
-    "aria-busy": true,
-    children: /*#__PURE__*/_jsxs("g", {
-      children: [reduceMotion ? null : /*#__PURE__*/_jsx("animateTransform", {
-        attributeName: "transform",
-        type: "rotate",
-        values: `-180 24 24;${360 + MIN_STROKE_ANGLE - 180} 24 24`,
-        ...animationProps
-      }), /*#__PURE__*/_jsx("circle", {
-        fill: "none",
-        stroke: color,
-        strokeWidth: thickness * 48 / size,
-        strokeLinecap: "round",
-        cx: "24",
-        cy: "24",
-        r: "20",
-        strokeDasharray: reduceMotion ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
-        strokeDashoffset: 0,
-        vectorEffect: "non-scaling-stroke",
-        children: reduceMotion ? null : /*#__PURE__*/_jsxs(_Fragment, {
-          children: [/*#__PURE__*/_jsx("animate", {
-            attributeName: "stroke-dashoffset",
-            values: `0;-10;${MIN_SVG_LENGTH - SVG_CIRCUMFERENCE}`,
-            ...animationProps,
-            ...bezierProps
-          }), /*#__PURE__*/_jsx("animate", {
-            attributeName: "stroke-dasharray",
-            values: `${MIN_SVG_LENGTH}, 200;${MAX_SVG_LENGTH}, 200;${MIN_SVG_LENGTH}, 200`,
-            ...animationProps,
-            ...bezierProps
-          })]
-        })
-      })]
-    })
-  });
-});
-Spinner.displayName = 'Spinner';
-Spinner.propTypes = propTypes;
-export default Spinner;

package/lib-module/ActivityIndicator/Spinner.native.js

@@ -1,144 +0,0 @@
-import React from 'react';
-import Animated from "react-native-web/dist/exports/Animated";
-import Easing from "react-native-web/dist/exports/Easing";
-import StyleSheet from "react-native-web/dist/exports/StyleSheet";
-import View from "react-native-web/dist/exports/View";
-import { DURATION, MIN_EMPTY_ANGLE, MIN_STROKE_ANGLE, BEZIER, propTypes } from './shared';
-import { useA11yInfo } from '../A11yInfoProvider';
-import { jsx as _jsx } from "react/jsx-runtime";
-const ea = MIN_EMPTY_ANGLE / 2;
-const sa = MIN_STROKE_ANGLE / 2;
-const Spinner = /*#__PURE__*/React.forwardRef((_ref, ref) => {
-  let {
-    size,
-    color,
-    thickness,
-    label,
-    isStatic = false
-  } = _ref;
-  const {
-    current: timer
-  } = React.useRef(new Animated.Value(0));
-  const {
-    reduceMotionEnabled
-  } = useA11yInfo();
-  const reduceMotion = reduceMotionEnabled || isStatic;
-  React.useLayoutEffect(() => {
-    const loop = Animated.timing(timer, {
-      duration: DURATION,
-      easing: Easing.linear,
-      // Animated.loop does not work if useNativeDriver is true on web
-      useNativeDriver: true,
-      toValue: 1,
-      isInteraction: false
-    });
-    if (!reduceMotion) Animated.loop(loop).start();else loop.stop();
-  }, [timer, reduceMotion]);
-  const frames = 60 * DURATION / 1000;
-  const easing = Easing.bezier(...BEZIER);
-  const containerStyle = {
-    width: size,
-    height: size / (reduceMotion ? 1.5 : 2),
-    overflow: 'hidden'
-  };
-  const animationFrequency = reduceMotion ? [0] : [0, 1];
-
-  // Credit to https://github.com/n4kz/react-native-indicators and https://github.com/callstack/react-native-paper for this
-  return /*#__PURE__*/_jsx(View, {
-    ref: ref,
-    style: [styles.container],
-    accessible: true,
-    accessibilityLabel: label,
-    accessibilityRole: "progressbar",
-    accessibilityState: {
-      busy: true
-    },
-    children: /*#__PURE__*/_jsx(Animated.View, {
-      style: [{
-        width: size,
-        height: size
-      }],
-      collapsable: false,
-      children: animationFrequency.map(index => {
-        const inputRange = Array.from(new Array(frames), (_, frameIndex) => frameIndex / (frames - 1));
-        const outputRange = Array.from(new Array(frames), (_, frameIndex) => {
-          let progress = 2 * frameIndex / (frames - 1);
-          const rotation = index ? +(360 - sa) : -(180 - sa);
-          if (progress > 1.0) {
-            progress = 2.0 - progress;
-          }
-          const direction = index ? -1 : +1;
-          return `${direction * (180 - (sa + ea)) * easing(progress) + rotation}deg`;
-        });
-        const layerStyle = {
-          width: size,
-          height: size
-        };
-        const viewportStyle = {
-          width: size,
-          height: size
-        };
-        if (!reduceMotion) {
-          layerStyle.transform = [{
-            rotate: timer.interpolate({
-              inputRange: [0, 1],
-              outputRange: [`${0 + ea + sa}deg`, `${2 * 360 + ea + sa}deg`]
-            })
-          }];
-          viewportStyle.transform = [{
-            translateY: index ? -size / 2 : 0
-          }, {
-            rotate: timer.interpolate({
-              inputRange,
-              outputRange
-            })
-          }];
-        }
-        const offsetStyle = index ? {
-          top: size / 2
-        } : null;
-        const lineStyle = {
-          width: size,
-          height: size,
-          borderColor: color,
-          borderWidth: thickness,
-          borderRadius: size / 2
-        };
-        return /*#__PURE__*/_jsx(Animated.View, {
-          style: [styles.layer],
-          children: /*#__PURE__*/_jsx(Animated.View, {
-            style: layerStyle,
-            children: /*#__PURE__*/_jsx(Animated.View, {
-              style: [containerStyle, offsetStyle],
-              collapsable: false,
-              children: /*#__PURE__*/_jsx(Animated.View, {
-                style: viewportStyle,
-                children: /*#__PURE__*/_jsx(Animated.View, {
-                  style: containerStyle,
-                  collapsable: false,
-                  children: /*#__PURE__*/_jsx(Animated.View, {
-                    style: lineStyle
-                  })
-                })
-              })
-            })
-          })
-        }, index);
-      })
-    })
-  });
-});
-Spinner.displayName = 'Spinner';
-Spinner.propTypes = propTypes;
-const styles = StyleSheet.create({
-  container: {
-    flexGrow: 0,
-    flexShrink: 0
-  },
-  layer: {
-    ...StyleSheet.absoluteFillObject,
-    justifyContent: 'center',
-    alignItems: 'center'
-  }
-});
-export default Spinner;

package/lib-module/ActivityIndicator/index.js

@@ -1,44 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useThemeTokens } from '../ThemeProvider';
-import { getTokensPropType, variantProp } from '../utils/props';
-import Spinner from './Spinner';
-
-/**
- * `ActivityIndicator` renders a visual loading state.
- * It does not handle positioning or layout of that visual loader.
- */
-import { jsx as _jsx } from "react/jsx-runtime";
-const ActivityIndicator = _ref => {
-  let {
-    variant,
-    tokens,
-    label,
-    isStatic = false
-  } = _ref;
-  const {
-    size,
-    color,
-    thickness
-  } = useThemeTokens('ActivityIndicator', tokens, variant);
-  return /*#__PURE__*/_jsx(Spinner, {
-    size: size,
-    color: color,
-    thickness: thickness,
-    label: label,
-    isStatic: isStatic
-  });
-};
-ActivityIndicator.propTypes = {
-  variant: variantProp.propType,
-  tokens: getTokensPropType('ActivityIndicator'),
-  /**
-   * A visually hidden accessible label describing the action taking place
-   */
-  label: PropTypes.string.isRequired,
-  /**
-   * If true, it should render a static spinner
-   */
-  isStatic: PropTypes.bool
-};
-export default ActivityIndicator;

package/lib-module/ActivityIndicator/shared.js

@@ -1,14 +0,0 @@
-import PropTypes from 'prop-types';
-
-// these could be specified by the theme
-export const DURATION = 1800;
-export const MIN_EMPTY_ANGLE = 60;
-export const MIN_STROKE_ANGLE = 30;
-export const BEZIER = [0.42, 0.0, 0.58, 1.0];
-export const propTypes = {
-  color: PropTypes.string.isRequired,
-  label: PropTypes.string.isRequired,
-  size: PropTypes.number.isRequired,
-  thickness: PropTypes.number.isRequired,
-  isStatic: PropTypes.bool
-};