@telus-uds/components-base 1.8.1 → 1.8.2

package/lib-module/ActivityIndicator/Spinner.js

@@ -1,76 +0,0 @@
-import React, { forwardRef } 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__*/forwardRef(({
-  size,
-  color,
-  thickness,
-  label
-}, ref) => {
-  const {
-    reduceMotionEnabled
-  } = useA11yInfo();
-  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: [reduceMotionEnabled ? 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: reduceMotionEnabled ? MAX_SVG_LENGTH : [MIN_SVG_LENGTH, SVG_CIRCUMFERENCE],
-        strokeDashoffset: 0,
-        children: reduceMotionEnabled ? 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,143 +0,0 @@
-import React, { forwardRef } 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__*/forwardRef(({
-  size,
-  color,
-  thickness,
-  label
-}, ref) => {
-  const {
-    current: timer
-  } = React.useRef(new Animated.Value(0));
-  const {
-    reduceMotionEnabled
-  } = useA11yInfo();
-  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 (!reduceMotionEnabled) Animated.loop(loop).start();else loop.stop();
-  }, [timer, reduceMotionEnabled]);
-  const frames = 60 * DURATION / 1000;
-  const easing = Easing.bezier(...BEZIER);
-  const containerStyle = {
-    width: size,
-    height: size / (reduceMotionEnabled ? 1.5 : 2),
-    overflow: 'hidden'
-  };
-  const animationFrequency = reduceMotionEnabled ? [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 (!reduceMotionEnabled) {
-          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,40 +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 = ({
-  variant,
-  tokens,
-  label
-}) => {
-  const {
-    size,
-    color,
-    thickness
-  } = useThemeTokens('ActivityIndicator', tokens, variant);
-  return /*#__PURE__*/_jsx(Spinner, {
-    size: size,
-    color: color,
-    thickness: thickness,
-    label: label
-  });
-};
-
-ActivityIndicator.propTypes = {
-  variant: variantProp.propType,
-  tokens: getTokensPropType('ActivityIndicator'),
-
-  /**
-   * A visually hidden accessible label describing the action taking place
-   */
-  label: PropTypes.string.isRequired
-};
-export default ActivityIndicator;

package/lib-module/ActivityIndicator/shared.js

@@ -1,12 +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
-};

package/lib-module/BaseProvider/index.js

@@ -1,26 +0,0 @@
-var _ThemeProvider$propTy;
-
-import React from 'react';
-import PropTypes from 'prop-types';
-import A11yInfoProvider from '../A11yInfoProvider';
-import ViewportProvider from '../ViewportProvider';
-import ThemeProvider from '../ThemeProvider';
-import { jsx as _jsx } from "react/jsx-runtime";
-
-const BaseProvider = ({
-  defaultTheme,
-  children
-}) => /*#__PURE__*/_jsx(A11yInfoProvider, {
-  children: /*#__PURE__*/_jsx(ViewportProvider, {
-    children: /*#__PURE__*/_jsx(ThemeProvider, {
-      defaultTheme: defaultTheme,
-      children: children
-    })
-  })
-});
-
-BaseProvider.propTypes = {
-  defaultTheme: (_ThemeProvider$propTy = ThemeProvider.propTypes) === null || _ThemeProvider$propTy === void 0 ? void 0 : _ThemeProvider$propTy.defaultTheme,
-  children: PropTypes.node.isRequired
-};
-export default BaseProvider;

package/lib-module/Box/Box.js

@@ -1,243 +0,0 @@
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import View from "react-native-web/dist/exports/View";
-import ScrollView from "react-native-web/dist/exports/ScrollView";
-import { useThemeTokens } from '../ThemeProvider';
-import { a11yProps, getA11yPropsFromHtmlTag, getTokensPropType, layoutTags, selectSystemProps, spacingProps, useSpacingScale, variantProp, viewProps } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([a11yProps, viewProps]);
-/**
- * @typedef {import('../utils/props/spacingProps.js').SpacingValue} SpacingValue
- * @typedef {import('../utils/props/spacingProps.js').SpacingIndex} SpacingIndex
- * @typedef {import('../utils/props/spacingProps.js').SpacingObject} SpacingObject
- * @typedef {import('../utils/props/spacingProps.js').SpacingOptions} SpacingOptions
- */
-
-const selectBoxStyles = tokens => {
-  const styles = {
-    backgroundColor: tokens.backgroundColor
-  };
-  const paddings = ['paddingLeft', 'paddingRight', 'paddingTop', 'paddingBottom']; // Only set on styles if token provided because we spread this object after the spacing scale values
-
-  paddings.forEach(side => {
-    if (tokens[side]) {
-      styles[side] = tokens[side];
-    }
-  });
-  return styles;
-};
-/**
- * A layout utility component. Use Box to create space (padding) around content.
- *
- * ## Spacing
- *
- * For most simple uses, pass a number to Box's `space` prop referring to an index in the theme's
- * spacing scale. For example, for a box with the theme's smallest non-zero amount of padding on all sides:
- *
- * ```jsx
- * <Box space={1}>
- * ```
- *
- * #### Targetting specific sides
- *
- * Box allows spacing value props to be assigned to any side or all sides using the following props:
- *
- * - `space` sets the default for all sides, which is overridden by other props below
- * - `horizontal` sets defaults for `left` and `right` (overriding `space` there if it is set)
- * - `vertical` sets defaults for `top` and `bottom` (overriding `space` there if it is set)
- * - `left` sets the left side padding, inside the box's bounds
- * - `right` sets the right side padding, inside the box's bounds
- * - `top` sets the top side padding, inside the box's bounds
- * - `bottom` sets the bottom side padding, inside the box's bounds
- *
- * Box only controls spacing within its bounds. If space is needed around a box outside of its bounds,
- * use `Spacer`, `StackView` or wrap the `Box` inside another `Box`.
- *
- * #### Viewport-specific spacing
- *
- * Responsive behaviours may be set by passing any of the above props an object keyed by viewports.
- *
- * For example, if a theme's spacing scale is [0, 4, 8...], this below will have padding of 4px on top,
- * bottom, and right, and its left padding will be 0px on xs, sm and md viewports and 8px on lg and xl viewports:
- *
- * ```jsx
- * <Box space={1} left={{ xs: 0, lg: 2 }} />`
- * ```
- *
- * #### Subtracting from spacing
- *
- * A parent may sometimes need to reduce the spacing size on one or more sides of a `Box` by some variable.
- * For example, the parent may have a border on one side and want to reduce the spacing of a child box
- * by the width of that border on that side. This can be achieved using the `subtract` option of the
- * spacing object, for example:
- *
- * ```jsx
- * <Box space={2} left={{ space: 2, options: { subtract: themeTokens.borderWidthLeft } }} />`
- * ```
- *
- * See `useSpacingScale` hook for other spacing value options and documentation.
- *
- * ## Theming
- *
- * Box is intended for layout, so minimal theming is supported. Use components like `Card` for
- * more sophisticated theming.
- *
- * ## Scroll
- *
- * If passed, the box will be scrollable. If an object is passed, it will be passed to React Native's
- * `ScrollView` component as props.
- *
- * When building native iOS and Android apps, it is important to remember to ensure any screen containing
- * text content is inside a scrollable box, as screens are not scrollable by default and even very
- * short text will require scrolling on small devices at the highest accessibility text scaling settings.
- */
-
-
-const Box = /*#__PURE__*/forwardRef(({
-  space,
-  horizontal = space,
-  vertical = space,
-  top = vertical,
-  bottom = vertical,
-  left = horizontal,
-  right = horizontal,
-  flex,
-  children,
-  variant,
-  tokens,
-  scroll,
-  tag,
-  accessibilityRole,
-  testID,
-  dataSet,
-  ...rest
-}, ref) => {
-  const props = { ...getA11yPropsFromHtmlTag(tag, accessibilityRole),
-    ...selectProps(rest)
-  };
-  const themeTokens = useThemeTokens('Box', tokens, variant);
-  const styles = {
-    flex,
-    paddingLeft: useSpacingScale(left),
-    paddingRight: useSpacingScale(right),
-    paddingTop: useSpacingScale(top),
-    paddingBottom: useSpacingScale(bottom),
-    ...selectBoxStyles(themeTokens)
-  };
-
-  if (scroll) {
-    const scrollProps = typeof scroll === 'object' ? scroll : {};
-    scrollProps.contentContainerStyle = [styles, scrollProps.contentContainerStyle];
-    return /*#__PURE__*/_jsx(ScrollView, { ...scrollProps,
-      ...props,
-      testID: testID,
-      dataSet: dataSet,
-      ref: ref,
-      children: children
-    });
-  }
-
-  return /*#__PURE__*/_jsx(View, { ...props,
-    style: styles,
-    testID: testID,
-    dataSet: dataSet,
-    ref: ref,
-    children: children
-  });
-});
-Box.displayName = 'Box';
-Box.propTypes = { ...selectedSystemPropTypes,
-  variant: variantProp.propType,
-  tokens: getTokensPropType('Box'),
-
-  /**
-   * Sets default padding on all sides of the box using the theme's spacing scale.
-   *
-   * @see {@link SpacingValue}
-   */
-  space: spacingProps.types.spacingValue,
-
-  /**
-   * Sets top and bottom padding using the theme's spacing scale.
-   *
-   * @see {@link SpacingValue}
-   */
-  vertical: spacingProps.types.spacingValue,
-
-  /**
-   * Sets left and right padding using the theme's spacing scale.
-   *
-   * @see {@link SpacingValue}
-   */
-  horizontal: spacingProps.types.spacingValue,
-
-  /**
-   * Sets bottom padding using the theme's spacing scale.
-   *
-   * @see {@link SpacingValue}
-   */
-  bottom: spacingProps.types.spacingValue,
-
-  /**
-   * Sets left padding using the theme's spacing scale.
-   *
-   * @see {@link SpacingValue}
-   */
-  left: spacingProps.types.spacingValue,
-
-  /**
-   * Sets right padding using the theme's spacing scale.
-   *
-   * @see {@link SpacingValue}
-   */
-  right: spacingProps.types.spacingValue,
-
-  /**
-   * Sets top padding using the theme's spacing scale.
-   *
-   * @see {@link SpacingValue}
-   */
-  top: spacingProps.types.spacingValue,
-
-  /**
-   * Sets the `flex` style, which controls `flexGrow`, `flexShrink` and `flexBasis` styles.
-   *
-   * Set as 1 for the box to stretch and grow to fit in the available space, or another number to share
-   * space disproportionately with siblings. See https://reactnative.dev/docs/flexbox#flex for details.
-   *
-   * With the default `0`, the box takes its minimum width from its content.
-   */
-  flex: PropTypes.number,
-
-  /**
-   * Renders a scrollable ScrollView instead of an unscrollable View.
-   *
-   * May take an object of ScrollView props which are passed to the rendered ScrollView.
-   */
-  scroll: PropTypes.oneOfType([PropTypes.bool, ScrollView.propTypes ? PropTypes.shape(ScrollView.propTypes) : PropTypes.object]),
-
-  /**
-   * Optional semantic HTML tag, to apply to the container on web. Does not change styling.
-   *
-   * In native apps, if a header tag is provided ("h1", "h2" etc) and accessibilityRole prop
-   * is not defined, the accessibilityRole will default to "heading".
-   */
-  tag: PropTypes.oneOf(layoutTags),
-
-  /**
-   * Use in tests if the box itself needs to be targetted and no other way of selecting the
-   * box is available (e.g. it cannot be targetted using an appropriate `accessibilityRole`).
-   */
-  testID: PropTypes.string,
-
-  /**
-   * @ignore
-   */
-  dataSet: PropTypes.object,
-
-  /**
-   * Box accepts any content as children.
-   */
-  children: PropTypes.node.isRequired
-};
-export default Box;

package/lib-module/Box/index.js

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

package/lib-module/Button/Button.js

@@ -1,25 +0,0 @@
-import React, { forwardRef } from 'react';
-import ButtonBase from './ButtonBase';
-import buttonPropTypes, { textAndA11yText } from './propTypes';
-import { useThemeTokensCallback } from '../ThemeProvider';
-import { a11yProps } from '../utils/props';
-import { jsx as _jsx } from "react/jsx-runtime";
-const Button = /*#__PURE__*/forwardRef(({
-  accessibilityRole = 'button',
-  tokens,
-  variant,
-  ...props
-}, ref) => {
-  const getTokens = useThemeTokensCallback('Button', tokens, variant);
-  return /*#__PURE__*/_jsx(ButtonBase, { ...props,
-    tokens: getTokens,
-    accessibilityRole: accessibilityRole,
-    ref: ref
-  });
-});
-Button.displayName = 'Button';
-Button.propTypes = { ...a11yProps.types,
-  ...buttonPropTypes,
-  children: textAndA11yText
-};
-export default Button;