@telus-uds/components-base 0.0.2-prerelease.6 → 1.0.0

package/lib/SideNav/ItemsGroup.js

@@ -1,9 +1,30 @@
-import React 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';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ItemContent = _interopRequireDefault(require("./ItemContent"));
+
+var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
+
+var _utils = require("../utils");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+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; }
+
 /**
  Expandable content areas for use within `SideNav`.
 
@@ -14,8 +35,7 @@ import { useThemeTokensCallback } from '../ThemeProvider';
  ## Usage Criteria
  - Use `SideNav.ItemsGroup` with large pages that have multiple sections
  */
-
-const ItemsGroup = ({
+const ItemsGroup = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   label,
   openGroups,
@@ -25,7 +45,7 @@ const ItemsGroup = ({
   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,
@@ -37,13 +57,13 @@ const ItemsGroup = ({
     type: 'parent'
   });
 
-  const getGroupTokens = useThemeTokensCallback('SideNavItemsGroup', tokens, variant);
+  const getGroupTokens = (0, _ThemeProvider.useThemeTokensCallback)('SideNavItemsGroup', tokens, variant);
 
-  const getPanelTokens = appearance => selectTokens('ExpandCollapsePanel', getGroupTokens(getAppearance(appearance)));
+  const getPanelTokens = appearance => (0, _utils.selectTokens)('ExpandCollapsePanel', getGroupTokens(getAppearance(appearance)));
 
-  const getItemTokens = useThemeTokensCallback('SideNavItem', itemTokens, variant);
+  const getItemTokens = (0, _ThemeProvider.useThemeTokensCallback)('SideNavItem', itemTokens, variant);
 
-  const getControlTokens = appearance => selectTokens('ExpandCollapseControl', { ...getItemTokens(getItemAppearance(appearance)),
+  const getControlTokens = appearance => (0, _utils.selectTokens)('ExpandCollapseControl', { ...getItemTokens(getItemAppearance(appearance)),
     // main style from SideNavItem
     ...getGroupTokens(getAppearance(appearance)) // control-specific tokens like icon etc
 
@@ -51,12 +71,14 @@ const ItemsGroup = ({
 
   const controlContent = controlState => {
     const currentItemTokens = getItemTokens(getItemAppearance(controlState));
-    return /*#__PURE__*/React.createElement(ItemContent, {
-      tokens: currentItemTokens
-    }, label);
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ItemContent.default, {
+      tokens: currentItemTokens,
+      children: label
+    });
   };
 
-  return /*#__PURE__*/React.createElement(ExpandCollapse.Panel, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default.Panel, {
+    ref: ref,
     openIds: openGroups,
     panelId: groupId,
     onToggle: onToggle,
@@ -66,46 +88,48 @@ const ItemsGroup = ({
     accessibilityState: {
       active: isActive
     } // ExpandCollapse.Panel handles expanded state
-
-  }, children);
-};
-
+    ,
+    children: children
+  });
+});
+ItemsGroup.displayName = 'ItemsGroup';
 ItemsGroup.propTypes = {
   /**
    * Specifies the links contained within. It may only contain `SideNav.Item`.
    */
-  children: componentPropType('Item'),
+  children: (0, _utils.componentPropType)('Item'),
 
   /**
    * Text content of the group's parent `SideNav.Item`.
    */
-  label: PropTypes.string.isRequired,
+  label: _propTypes.default.string.isRequired,
 
   /**
    * @ignore
    * Set internally in `SideNav` render function - used to keep track of expanded items groups.
    */
-  groupId: PropTypes.string,
+  groupId: _propTypes.default.string,
 
   /**
    * @ignore
    * Set internally in `SideNav` render function. Called when the group is expanded/collapsed.
    */
-  onToggle: PropTypes.func,
+  onToggle: _propTypes.default.func,
 
   /**
    * @ignore
    * Set internally in `SideNav` render function. Contains `groupId`s of currently open groups.
    */
-  openGroups: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),
+  openGroups: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.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')
+  isActive: _propTypes.default.bool,
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('SideNavItemsGroup'),
+  itemTokens: (0, _utils.getTokensPropType)('SideNavItem')
 };
-export default ItemsGroup;
+var _default = ItemsGroup;
+exports.default = _default;

package/lib/SideNav/SideNav.js

@@ -1,10 +1,31 @@
-import React, { 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 { componentPropType, getTokensPropType, variantProp } from '../utils';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _ExpandCollapse = _interopRequireDefault(require("../ExpandCollapse"));
+
+var _Item = _interopRequireDefault(require("./Item"));
+
+var _ItemsGroup = _interopRequireDefault(require("./ItemsGroup"));
+
+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; }
 
 function selectBorderStyles(tokens) {
   return {
@@ -20,16 +41,16 @@ function selectBorderStyles(tokens) {
  */
 
 
-const SideNav = ({
+const SideNav = /*#__PURE__*/(0, _react.forwardRef)(({
   children,
   variant = {},
   tokens,
   accordion = true,
   itemTokens,
   groupTokens
-}) => {
-  const themeTokens = useThemeTokens('SideNav', tokens, variant);
-  const [active, setActive] = useState({
+}, ref) => {
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('SideNav', tokens, variant);
+  const [active, setActive] = (0, _react.useState)({
     groupId: undefined,
     itemId: undefined
   });
@@ -45,78 +66,84 @@ const SideNav = ({
     return active.groupId === groupId && active.itemId === itemId;
   };
 
-  return /*#__PURE__*/React.createElement(ExpandCollapse, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_ExpandCollapse.default, {
+    ref: ref,
     maxOpen: accordion ? 1 : null,
-    style: selectBorderStyles(themeTokens)
-  }, ({
-    openIds,
-    onToggle
-  }) => {
-    const renderItem = (item, index, groupId) => {
-      const {
-        itemId = `item-${index}`,
-        onPress
-      } = item.props;
-
-      const handlePress = (...args) => {
-        onItemPress(...args);
-        if (onPress) onPress(...args);
-      };
-
-      return /*#__PURE__*/React.createElement(Item, Object.assign({}, 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) {
+    style: selectBorderStyles(themeTokens),
+    children: ({
+      openIds,
+      onToggle
+    }) => {
+      const renderItem = (item, index, groupId) => {
         const {
-          groupId = `group-${index}`
-        } = child.props;
-        const isGroupActive = active.itemId !== undefined && active.groupId === groupId;
-        return /*#__PURE__*/React.createElement(ItemsGroup, Object.assign({}, child.props, {
-          key: groupId,
+          itemId = `item-${index}`,
+          onPress
+        } = item.props;
+
+        const handlePress = (...args) => {
+          onItemPress(...args);
+          if (onPress) onPress(...args);
+        };
+
+        return /*#__PURE__*/(0, _react.createElement)(_Item.default, { ...item.props,
+          key: itemId,
+          itemId: itemId,
           groupId: groupId,
-          variant: variant,
-          tokens: groupTokens,
-          itemTokens: itemTokens,
-          openGroups: openIds,
-          isActive: isGroupActive,
-          onToggle: () => onToggle(groupId)
-        }), React.Children.map(child.props.children, (item, itemIndex) => renderItem(item, itemIndex, groupId)));
-      }
-
-      return null;
-    });
-  });
-};
+          variant: groupId ? { ...variant,
+            type: 'child'
+          } : variant,
+          tokens: itemTokens,
+          isActive: isItemActive(itemId, groupId),
+          onPress: handlePress
+        });
+      };
+
+      return _react.default.Children.map(children, (child, index) => {
+        // iterate over children and identify them internally to later reference expanded groups and active items
+        if (child.type === _Item.default) return renderItem(child, index);
+
+        if (child.type === _ItemsGroup.default) {
+          const {
+            groupId = `group-${index}`
+          } = child.props;
+          const isGroupActive = active.itemId !== undefined && active.groupId === groupId;
 
+          const handleToggle = event => onToggle(groupId, event);
+
+          return /*#__PURE__*/(0, _react.createElement)(_ItemsGroup.default, { ...child.props,
+            key: groupId,
+            groupId: groupId,
+            variant: variant,
+            tokens: groupTokens,
+            itemTokens: itemTokens,
+            openGroups: openIds,
+            isActive: isGroupActive,
+            onToggle: handleToggle
+          }, _react.default.Children.map(child.props.children, (item, itemIndex) => renderItem(item, itemIndex, groupId)));
+        }
+
+        return null;
+      });
+    }
+  });
+});
+SideNav.displayName = 'SideNav';
 SideNav.propTypes = {
   /**
    * Specifies the structure and links of the `SideNav`. It may only consist of `SideNav.Item` and `SideNav.ItemsGroup`.
    */
-  children: componentPropType(['Item', 'ItemsGroup']),
+  children: (0, _utils.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')
+  accordion: _propTypes.default.bool,
+  variant: _utils.variantProp.propType,
+  tokens: (0, _utils.getTokensPropType)('SideNav'),
+  itemTokens: (0, _utils.getTokensPropType)('SideNavItem'),
+  groupTokens: (0, _utils.getTokensPropType)('SideNavItemsGroup')
 };
-SideNav.Item = Item;
-SideNav.ItemsGroup = ItemsGroup;
-export default SideNav;
+SideNav.Item = _Item.default;
+SideNav.ItemsGroup = _ItemsGroup.default;
+var _default = SideNav;
+exports.default = _default;

package/lib/SideNav/index.js

@@ -1 +1,15 @@
-export { default } from './SideNav';
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _SideNav.default;
+  }
+});
+
+var _SideNav = _interopRequireDefault(require("./SideNav"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/lib/Skeleton/Skeleton.js

@@ -0,0 +1,137 @@
+"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 _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 selectSkeletonStyles = ({
+  color,
+  radius,
+  fadeAnimation
+}) => ({
+  backgroundColor: color,
+  borderRadius: radius,
+  ...fadeAnimation
+});
+
+const selectLineStyles = ({
+  skeletonHeight,
+  lineWidth
+}) => ({
+  width: lineWidth,
+  height: skeletonHeight
+});
+
+const selectShapeStyles = ({
+  skeletonHeight
+}) => ({
+  height: skeletonHeight,
+  width: skeletonHeight
+});
+
+const selectSquareStyles = ({
+  radius
+}) => ({
+  borderRadius: radius
+});
+
+const Skeleton = /*#__PURE__*/(0, _react.forwardRef)(({
+  tokens,
+  variant,
+  size,
+  characters,
+  lines,
+  shape = 'line'
+}, ref) => {
+  const themeTokens = (0, _ThemeProvider.useThemeTokens)('Skeleton', tokens, variant);
+  const skeletonHeight = (0, _utils.useSpacingScale)(size || themeTokens.size);
+  const nativeAnimation = (0, _useSkeletonNativeAnimation.default)();
+
+  const getAnimationBaseOnPlatform = () => {
+    if (_Platform.default.OS !== 'web') {
+      return nativeAnimation;
+    }
+
+    return _skeletonWebAnimation.default;
+  };
+
+  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 = (index = 0) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Animated.default.View, {
+    testID: "skeleton",
+    style: [selectSkeletonStyles({ ...themeTokens,
+      fadeAnimation: getAnimationBaseOnPlatform()
+    }), getStyledBasedOnShape()]
+  }, `skeleton-${index + 1}`);
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.default, {
+    space: themeTokens.spaceBetweenLines,
+    ref: ref,
+    children: lines > 1 ? [...Array(lines)].map((_, index) => renderSkeleton(index)) : renderSkeleton()
+  });
+});
+Skeleton.displayName = 'Skeleton';
+Skeleton.propTypes = {
+  tokens: (0, _utils.getTokensPropType)('Skeleton'),
+  variant: _utils.variantProp.propType,
+  size: _propTypes.default.number,
+  characters: _propTypes.default.number,
+  lines: _propTypes.default.number,
+  shape: _propTypes.default.oneOf(['line', 'circle', 'box'])
+};
+var _default = Skeleton;
+exports.default = _default;

package/lib/Skeleton/index.js

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

package/lib/Skeleton/skeleton.constant.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ANIMATION_DURATION = exports.OPACITY_STOP = exports.DEFAULT_OPACITY = 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;

package/lib/Skeleton/skeletonWebAnimation.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _skeleton = require("./skeleton.constant");
+
+var _default = {
+  animationDuration: `${_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
+    }
+  }
+};
+exports.default = _default;

package/lib/Skeleton/useSkeletonNativeAnimation.js

@@ -0,0 +1,37 @@
+"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 _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: true
+    }), _Animated.default.timing(fadeAnimation, {
+      toValue: _skeleton.DEFAULT_OPACITY,
+      duration: _skeleton.ANIMATION_DURATION,
+      useNativeDriver: true
+    })]);
+
+    _Animated.default.loop(fade).start();
+  }, [fadeAnimation]);
+  return {
+    opacity: fadeAnimation
+  };
+};
+
+var _default = useSkeletonNativeAnimation;
+exports.default = _default;