@telus-uds/components-base 1.1.0 → 1.3.1

package/lib-module/ActivityIndicator/Spinner.js

@@ -0,0 +1,76 @@
+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

@@ -0,0 +1,143 @@
+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

@@ -0,0 +1,40 @@
+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

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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,243 @@
+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

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

package/lib-module/Button/Button.js

@@ -0,0 +1,25 @@
+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;