@telus-uds/components-base 2.0.0 → 2.0.2

package/lib/Skeleton/Skeleton.js

@@ -1,42 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
-
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
-var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _StackView = _interopRequireDefault(require("../StackView"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _utils = require("../utils");
-
-var _useSkeletonNativeAnimation = _interopRequireDefault(require("./useSkeletonNativeAnimation"));
-
-var _skeletonWebAnimation = _interopRequireDefault(require("./skeletonWebAnimation"));
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
-
+import React 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,
@@ -48,18 +22,18 @@ const selectSkeletonStyles = _ref => {
     maxWidth: '100%'
   };
 };
-
 const selectLineStyles = _ref2 => {
   let {
     skeletonHeight,
-    lineWidth
+    lineWidth,
+    radius
   } = _ref2;
   return {
     width: lineWidth,
-    height: skeletonHeight
+    height: skeletonHeight,
+    borderRadius: radius
   };
 };
-
 const selectShapeStyles = _ref3 => {
   let {
     skeletonHeight
@@ -69,7 +43,6 @@ const selectShapeStyles = _ref3 => {
     width: skeletonHeight
   };
 };
-
 const selectSquareStyles = _ref4 => {
   let {
     radius
@@ -78,8 +51,7 @@ const selectSquareStyles = _ref4 => {
     borderRadius: radius
   };
 };
-
-const Skeleton = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
+const Skeleton = /*#__PURE__*/React.forwardRef((_ref5, ref) => {
   let {
     tokens,
     variant,
@@ -91,44 +63,48 @@ const Skeleton = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
     shape = 'line',
     ...rest
   } = _ref5;
-  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Skeleton', tokens, variant);
-  const pixels = (0, _utils.useResponsiveProp)(sizePixels);
-  const spacingScaleValue = typeof pixels === 'number' ? // Size by an exact number of pixels
+  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)
+  } :
+  // Size by an index on the spacing scale (getting default index from theme if none provided)
   sizeIndex || themeTokens.size;
-  const skeletonHeight = (0, _utils.useSpacingScale)(spacingScaleValue);
-  const nativeAnimation = (0, _useSkeletonNativeAnimation.default)();
-
+  const skeletonHeight = useSpacingScale(spacingScaleValue);
+
+  // Animation color and animation duration
+  const {
+    secondColor,
+    animationDuration
+  } = themeTokens;
+  const nativeAnimation = useSkeletonNativeAnimation({
+    animationDuration
+  });
   const getAnimationBasedOnPlatform = () => {
-    const animation = _Platform.default.OS === 'web' ? _skeletonWebAnimation.default : nativeAnimation; // We must pass the animation styles through `StyleSheet.create`
+    const animation = Platform.OS === 'web' ? skeletonWebAnimation(secondColor, animationDuration) : nativeAnimation;
+    // We must pass the animation styles through `StyleSheet.create`
     // @see https://github.com/necolas/react-native-web/issues/2387
-
-    const styles = _StyleSheet.default.create({
+    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
@@ -136,24 +112,22 @@ const Skeleton = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
         radius: themeTokens.squareRadius
       })];
     }
-
     return selectLineStyles({
       skeletonHeight,
-      lineWidth: getLineWidth()
+      lineWidth: getLineWidth(),
+      radius: themeTokens.lineRadius
     });
   };
-
   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.default.OS === 'web' ? _View.default : _Animated.default.View;
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+    const Component = Platform.OS === 'web' ? View : Animated.View;
+    return /*#__PURE__*/_jsx(Component, {
       testID: "skeleton",
       style: [selectSkeletonStyles(themeTokens), getAnimationBasedOnPlatform(), getStyledBasedOnShape()]
-    }, "skeleton-".concat(index + 1));
+    }, `skeleton-${index + 1}`);
   };
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+  return /*#__PURE__*/_jsx(StackView, {
     space: themeTokens.spaceBetweenLines,
     ref: ref,
     ...selectProps(rest),
@@ -161,36 +135,32 @@ const Skeleton = /*#__PURE__*/(0, _react.forwardRef)((_ref5, ref) => {
   });
 });
 Skeleton.displayName = 'Skeleton';
-Skeleton.propTypes = { ...selectedSystemPropTypes,
-  tokens: (0, _utils.getTokensPropType)('Skeleton'),
-  variant: _utils.variantProp.propType,
-
+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: _utils.spacingProps.types.spacingValue,
-
+  sizeIndex: spacingProps.types.spacingValue,
   /**
    * @deprecated alias for `sizeIndex`
    */
-  size: _utils.spacingProps.types.spacingValue,
-
+  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: _utils.responsiveProps.getTypeOptionallyByViewport(_propTypes.default.number),
-
+  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.default.number,
-
+  characters: propTypes.number,
   /**
    * Determines how many Skeleton items are rendered (default 1).
    *
@@ -198,12 +168,10 @@ Skeleton.propTypes = { ...selectedSystemPropTypes,
    *
    * The amount of spacing between multiple lines is controlled by theme tokens.
    */
-  lines: _propTypes.default.number,
-
+  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.default.oneOf(['line', 'circle', 'box'])
+  shape: propTypes.oneOf(['line', 'circle', 'box'])
 };
-var _default = Skeleton;
-exports.default = _default;
+export default Skeleton;

package/lib/Skeleton/index.js

@@ -1,13 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _Skeleton = _interopRequireDefault(require("./Skeleton"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = _Skeleton.default;
-exports.default = _default;
+import Skeleton from './Skeleton';
+export default Skeleton;

package/lib/Skeleton/skeleton.constant.js

@@ -1,12 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.OPACITY_STOP = exports.DEFAULT_OPACITY = exports.ANIMATION_DURATION = void 0;
-const DEFAULT_OPACITY = 1;
-exports.DEFAULT_OPACITY = DEFAULT_OPACITY;
-const OPACITY_STOP = 0.4;
-exports.OPACITY_STOP = OPACITY_STOP;
-const ANIMATION_DURATION = 1500;
-exports.ANIMATION_DURATION = ANIMATION_DURATION;
+export const DEFAULT_OPACITY = 1;
+export const OPACITY_STOP = 0.4;

package/lib/Skeleton/skeletonWebAnimation.js

@@ -1,27 +1,14 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _skeleton = require("./skeleton.constant");
-
-var _default = {
-  animationDuration: "".concat(_skeleton.ANIMATION_DURATION, "ms"),
-  animationTimingFunction: 'ease-in-out',
-  animationDelay: '0.5s',
-  animationIterationCount: 'infinite',
-  animationKeyframes: {
-    '0%': {
-      opacity: _skeleton.DEFAULT_OPACITY
-    },
-    '50%': {
-      opacity: _skeleton.OPACITY_STOP
-    },
-    '100%': {
-      opacity: _skeleton.DEFAULT_OPACITY
+const skeletonWebAnimation = (secondColor, animationTime) => {
+  return {
+    animationDuration: `${animationTime}ms`,
+    animationTimingFunction: 'ease-in-out',
+    animationDelay: '0.5s',
+    animationIterationCount: 'infinite',
+    animationKeyframes: {
+      '50%': {
+        backgroundColor: secondColor
+      }
     }
-  }
+  };
 };
-exports.default = _default;
+export default skeletonWebAnimation;

package/lib/Skeleton/useSkeletonNativeAnimation.js

@@ -1,39 +1,28 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = require("react");
-
-var _Animated = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Animated"));
-
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
-var _skeleton = require("./skeleton.constant");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const useSkeletonNativeAnimation = () => {
-  const fadeAnimation = (0, _react.useRef)(new _Animated.default.Value(_skeleton.DEFAULT_OPACITY)).current;
-  (0, _react.useEffect)(() => {
-    const fade = _Animated.default.sequence([_Animated.default.timing(fadeAnimation, {
-      toValue: _skeleton.OPACITY_STOP,
-      duration: _skeleton.ANIMATION_DURATION,
-      useNativeDriver: _Platform.default.OS !== 'web'
-    }), _Animated.default.timing(fadeAnimation, {
-      toValue: _skeleton.DEFAULT_OPACITY,
-      duration: _skeleton.ANIMATION_DURATION,
-      useNativeDriver: _Platform.default.OS !== 'web'
+import { useEffect, useRef } from 'react';
+import Animated from "react-native-web/dist/exports/Animated";
+import Platform from "react-native-web/dist/exports/Platform";
+import { DEFAULT_OPACITY, OPACITY_STOP } from './skeleton.constant';
+const useSkeletonNativeAnimation = _ref => {
+  let {
+    animationDuration
+  } = _ref;
+  const fadeAnimation = useRef(new Animated.Value(DEFAULT_OPACITY)).current;
+
+  /* eslint-disable react-hooks/exhaustive-deps */
+  useEffect(() => {
+    const fade = Animated.sequence([Animated.timing(fadeAnimation, {
+      toValue: OPACITY_STOP,
+      duration: animationDuration,
+      useNativeDriver: Platform.OS !== 'web'
+    }), Animated.timing(fadeAnimation, {
+      toValue: DEFAULT_OPACITY,
+      duration: animationDuration,
+      useNativeDriver: Platform.OS !== 'web'
     })]);
-
-    _Animated.default.loop(fade).start();
+    Animated.loop(fade).start();
   }, [fadeAnimation]);
   return {
     opacity: fadeAnimation
   };
 };
-
-var _default = useSkeletonNativeAnimation;
-exports.default = _default;
+export default useSkeletonNativeAnimation;

package/lib/SkipLink/SkipLink.js

@@ -1,36 +1,15 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-
-var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
-
-var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
-
-var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-var _utils = require("../utils");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.linkProps]); // ensure explicit selection of tokens
-
+import React 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,
@@ -53,15 +32,24 @@ const selectStyles = _ref => {
     borderRadius
   };
 };
-
 const selectTextStyles = _ref2 => {
   let {
-    color
+    color,
+    textLine,
+    fontName,
+    fontSize,
+    fontWeight,
+    lineHeight
   } = _ref2;
   return {
-    color
+    color,
+    textDecorationLine: textLine,
+    fontFamily: `${fontName}${fontWeight}normal`,
+    lineHeight: fontSize * lineHeight,
+    fontSize
   };
 };
+
 /**
  * A generic Skip link component, unstyled by default.
  * A Skip link component help keyboard-only users, screen reader users to skip
@@ -117,9 +105,7 @@ const selectTextStyles = _ref2 => {
  *
  * Skip link supports all the common a11y and link props.
  */
-
-
-const SkipLink = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+const SkipLink = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     tokens,
     variant,
@@ -127,41 +113,33 @@ const SkipLink = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
     children,
     ...rawRest
   } = _ref3;
-
   const {
     onPress,
     ...rest
-  } = _utils.clickProps.toPressProps(rawRest);
-
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('SkipLink', tokens, variant);
-  const defaultTokens = getTokens();
-
-  const resolveLinkTokens = pressState => (0, _utils.resolvePressableTokens)(defaultTokens, pressState);
-
+  } = clickProps.toPressProps(rawRest);
+  const getTokens = useThemeTokensCallback('SkipLink', tokens, variant);
   const handlePress = event => {
-    if (typeof onPress === 'function') onPress(event); // TODO - support native apps with something based on refs and/or setAccessibilityFocus
+    if (typeof onPress === 'function') onPress(event);
+    // TODO - support native apps with something based on refs and/or setAccessibilityFocus
   };
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+  return /*#__PURE__*/_jsx(Pressable, {
     ref: ref,
     accessibilityRole: "link",
     onPress: handlePress,
     href: href,
-    style: _ref4 => {
-      let {
-        focused: focus
-      } = _ref4;
-      const themeTokens = getTokens({
-        focus
-      });
+    style: pressableState => {
+      const themeTokens = resolvePressableTokens(getTokens, pressableState);
       const skipLinkStyle = selectStyles(themeTokens);
-      return [staticStyles.absolute, skipLinkStyle, !focus && staticStyles.hidden];
+      const {
+        focused
+      } = pressableState;
+      return [staticStyles.absolute, skipLinkStyle, !focused && staticStyles.hidden];
     },
     ...selectProps(rest),
-    children: pressState => {
-      const themeTokens = resolveLinkTokens(pressState);
+    children: pressableState => {
+      const themeTokens = resolvePressableTokens(getTokens, pressableState);
       const textStyles = selectTextStyles(themeTokens);
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+      return /*#__PURE__*/_jsx(Text, {
         style: [textStyles, staticStyles.baseline],
         children: children
       });
@@ -169,22 +147,20 @@ const SkipLink = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
   });
 });
 SkipLink.displayName = 'SkipLink';
-SkipLink.propTypes = { ...selectedSystemPropTypes,
-
+SkipLink.propTypes = {
+  ...selectedSystemPropTypes,
   /**
    * The text content shown or read out when the SkipLink is focused, usually a string.
    */
-  children: _propTypes.default.node,
-
+  children: PropTypes.node,
   /**
    * The target to skip to. Usually an anchor link to a section id (e.g. href="#main-section").
    */
-  href: _propTypes.default.string,
-  tokens: (0, _utils.getTokensPropType)('SkipLink'),
-  variant: _utils.variantProp.propType
+  href: PropTypes.string,
+  tokens: getTokensPropType('SkipLink'),
+  variant: variantProp.propType
 };
-
-const staticStyles = _StyleSheet.default.create({
+const staticStyles = StyleSheet.create({
   baseline: {
     alignSelf: 'baseline'
   },
@@ -196,7 +172,7 @@ const staticStyles = _StyleSheet.default.create({
   },
   hidden: {
     overflow: 'hidden',
-    ..._Platform.default.select({
+    ...Platform.select({
       web: {
         clip: 'rect(0 0 0 0)',
         clipPath: 'inset(50%)'
@@ -210,7 +186,4 @@ const staticStyles = _StyleSheet.default.create({
     })
   }
 });
-
-var _default = (0, _utils.withLinkRouter)(SkipLink);
-
-exports.default = _default;
+export default withLinkRouter(SkipLink);

package/lib/SkipLink/index.js

@@ -1,13 +1,2 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _SkipLink = _interopRequireDefault(require("./SkipLink"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = _SkipLink.default;
-exports.default = _default;
+import SkipLink from './SkipLink';
+export default SkipLink;