@learningpool/ui 1.8.6 → 1.8.8

package/utils/dataAttributes.d.ts

@@ -0,0 +1,57 @@
+export declare const defaultAttributes: {
+    VerticalNavigationContainer: string;
+    VerticalNavigationBrand: string;
+    VerticalNavigationToggle: string;
+    VerticalNavigationPrimary: string;
+    VerticalNavigationPrimaryList: string;
+    VerticalNavigationPrimaryListItem: string;
+    VerticalNavigationSecondary: string;
+    VerticalNavigationSecondaryList: string;
+    VerticalNavigationSecondaryListItem: string;
+    VerticalNavigationFlyout: string;
+    VerticalNavigationFlyoutList: string;
+    VerticalNavigationFlyoutListItem: string;
+    VerticalNavigationAppSwitcherToggle: string;
+    VerticalNavigationAvatarToggle: string;
+    VerticalNavigationAvatarPanel: string;
+    VerticalNavigationAvatarProfile: string;
+    VerticalNavigationAvatarList: string;
+    VerticalNavigationAvatarListItem: string;
+    VerticalNavigationAvatarFootnote: string;
+    MobileNavContainer: string;
+    MobileNavDrawerToggle: string;
+    MobileNavDrawerPanel: string;
+    MobileNavDrawerBrand: string;
+    MobileNavDrawerPrimaryList: string;
+    MobileNavDrawerPrimaryItem: string;
+    MobileNavDrawerPrimaryChildList: string;
+    MobileNavDrawerPrimaryChildItem: string;
+    MobileNavDrawerSecondaryList: string;
+    MobileNavDrawerSecondaryItem: string;
+    MobileNavSearchToggle: string;
+    MobileNavSearchPanel: string;
+    MobileNavSearchForm: string;
+    MobileNavAvatarToggle: string;
+    MobileNavAvatarPanel: string;
+    MobileNavAvatarProfile: string;
+    MobileNavAvatarList: string;
+    MobileNavAvatarItem: string;
+    AppSwitcherContainer: string;
+    AppSwitcherHeader: string;
+    AppSwitcherList: string;
+    AppSwitcherItem: string;
+    AppSwitcherOrgCount: string;
+    AppSwitcherOrgPanel: string;
+    AppSwitcherOrgBackButton: string;
+    AppSwitcherOrgHeader: string;
+    AppSwitcherOrgSearch: string;
+    AppSwitcherOrgList: string;
+    AppSwitcherOrgItem: string;
+    HeaderContainer: string;
+    HeaderBreadcrumb: string;
+    HeaderTitle: string;
+    HeaderSubtitle: string;
+    HeaderActions: string;
+    HeaderActionsMain: string;
+    HeaderActionsSecondary: string;
+};

package/utils/dataAttributes.js

@@ -0,0 +1,61 @@
+export var defaultAttributes = {
+    // VerticalNavigation data IDs
+    VerticalNavigationContainer: 'vertnav-container',
+    VerticalNavigationBrand: 'vertnav-brand',
+    VerticalNavigationToggle: 'vertnav-toggle',
+    VerticalNavigationPrimary: 'vertnav-primary',
+    VerticalNavigationPrimaryList: 'vertnav-primary-list',
+    VerticalNavigationPrimaryListItem: 'vertnav-primary-list-item',
+    VerticalNavigationSecondary: 'vertnav-secondary',
+    VerticalNavigationSecondaryList: 'vertnav-secondary-list',
+    VerticalNavigationSecondaryListItem: 'vertnav-secondary-list-item',
+    VerticalNavigationFlyout: 'vertnav-flyout',
+    VerticalNavigationFlyoutList: 'vertnav-flyout-list',
+    VerticalNavigationFlyoutListItem: 'vertnav-flyout-list-item',
+    VerticalNavigationAppSwitcherToggle: 'vertnav-appSwitcher-toggle',
+    VerticalNavigationAvatarToggle: 'vertnav-avatar-toggle',
+    VerticalNavigationAvatarPanel: 'vertnav-avatar-panel',
+    VerticalNavigationAvatarProfile: 'vertnav-avatar-profile',
+    VerticalNavigationAvatarList: 'vertnav-avatar-list',
+    VerticalNavigationAvatarListItem: 'vertnav-avatar-list-item',
+    VerticalNavigationAvatarFootnote: 'vertnav-avatar-footnote',
+    // MobileNavigation data IDs
+    MobileNavContainer: 'mobilenav-container',
+    MobileNavDrawerToggle: 'mobilenav-drawer-toggle',
+    MobileNavDrawerPanel: 'mobilenav-drawer-panel',
+    MobileNavDrawerBrand: 'mobilenav-drawer-brand',
+    MobileNavDrawerPrimaryList: 'mobilenav-drawer-primary-list',
+    MobileNavDrawerPrimaryItem: 'mobilenav-drawer-primary-item',
+    MobileNavDrawerPrimaryChildList: 'mobilenav-drawer-primary-child-list',
+    MobileNavDrawerPrimaryChildItem: 'mobilenav-drawer-primary-child-item',
+    MobileNavDrawerSecondaryList: 'mobilenav-drawer-secondary-list',
+    MobileNavDrawerSecondaryItem: 'mobilenav-drawer-secondary-item',
+    MobileNavSearchToggle: 'mobilenav-search-toggle',
+    MobileNavSearchPanel: 'mobilenav-search-panel',
+    MobileNavSearchForm: 'mobilenav-search-form',
+    MobileNavAvatarToggle: 'mobilenav-avatar-toggle',
+    MobileNavAvatarPanel: 'mobilenav-avatar-panel',
+    MobileNavAvatarProfile: 'mobilenav-avatar-profile',
+    MobileNavAvatarList: 'mobilenav-avatar-list',
+    MobileNavAvatarItem: 'mobilenav-avatar-item',
+    // AppSwitcher data IDs
+    AppSwitcherContainer: 'appswitcher-container',
+    AppSwitcherHeader: 'appswitcher-header',
+    AppSwitcherList: 'appswitcher-list',
+    AppSwitcherItem: 'appswitcher-item',
+    AppSwitcherOrgCount: 'appswitcher-org-count',
+    AppSwitcherOrgPanel: 'appswitcher-org-panel',
+    AppSwitcherOrgBackButton: 'appswitcher-org-back-button',
+    AppSwitcherOrgHeader: 'appswitcher-org-header',
+    AppSwitcherOrgSearch: 'appswitcher-org-search',
+    AppSwitcherOrgList: 'appswitcher-org-list',
+    AppSwitcherOrgItem: 'appswitcher-org-item',
+    // Header data IDs
+    HeaderContainer: 'header-container',
+    HeaderBreadcrumb: 'header-breadcrumb',
+    HeaderTitle: 'header-title',
+    HeaderSubtitle: 'header-subtitle',
+    HeaderActions: 'header-actions',
+    HeaderActionsMain: 'header-actions-main',
+    HeaderActionsSecondary: 'header-actions-secondary'
+};

package/utils/helpers.d.ts

@@ -17,17 +17,20 @@ export declare const stringToColor: (string: string) => string;
  */
 export declare const stringAvatar: (name: string) => any;
 /**
- * Accepts a number and returns a react-spring style object from useSpring
- * @param trigger boolean - Trigger to reverse the animation from main component
- * @param animationCount number - Count tracking items from main component
- * @param incrementAnimationCount Function - Function to increment animationCount from main component
+ * Accepts an order, optional in/out toggle and returns
+ * a react-spring style object from useSpring that fades an item
+ * in based on it's order
+ * @param delayOrder number - Order for delaying items
+ * @param reverse boolean - Toggles the direction of the animation
  * @returns Object
  */
-export declare const useStaggerAnimation: (trigger: boolean, animationCount: number, incrementAnimationCount: Function) => Object;
+export declare const useFadeIn: (delayOrder: number, reverse?: boolean) => Object;
 /**
- * Accepts a number and returns a react-spring style object from useSpring
- * @param animationCount number - Count tracking items from main component
- * @param incrementAnimationCount Function - Function to increment animationCount from main component
+ * Accepts an order, optional in/out toggle and returns
+ * a react-spring style object from useSpring that fades and moves
+ * an item in based on it's order
+ * @param delayOrder number - Order for delaying items
+ * @param reverse boolean - Toggles the direction of the animation
  * @returns Object
  */
-export declare const useFadeIn: (animationCount: number, incrementAnimationCount: Function) => Object;
+export declare const useFadeAndMoveIn: (delayOrder: number, reverse?: boolean) => Object;

package/utils/helpers.js

@@ -9,6 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import { useEffect, useRef } from 'react';
 import { useSpring, config } from '@react-spring/web';
 /**
  * Accepts a string and returns 2 characters (max) as initials e.g. AN from Avatar Name
@@ -62,36 +63,55 @@ export var stringAvatar = function (name) {
 };
 var STAGGER_ITEMS_DELAY = 70;
 /**
- * Accepts a number and returns a react-spring style object from useSpring
- * @param trigger boolean - Trigger to reverse the animation from main component
- * @param animationCount number - Count tracking items from main component
- * @param incrementAnimationCount Function - Function to increment animationCount from main component
+ * Accepts an order, optional in/out toggle and returns
+ * a react-spring style object from useSpring based on the
+ * animation configuration provided
+ * @param animationConfig object - Config for useSpring animation (react-spring object)
+ * @param delayOrder number - Order for delaying items
+ * @param reverse boolean - Toggles the direction of the animation
  * @returns Object
  */
-export var useStaggerAnimation = function (trigger, animationCount, incrementAnimationCount) {
+var useStaggerIn = function (animationConfig, delayOrder, reverse) {
     var defaultAnimationConfig = {
-        from: { opacity: 0, y: 10 },
-        to: { opacity: 1, y: 0 },
-        reverse: !trigger,
+        reverse: reverse,
         config: __assign(__assign({}, config.default), { mass: 1 })
     };
-    var staggerAnimation = useSpring(__assign(__assign({}, defaultAnimationConfig), { delay: trigger ? STAGGER_ITEMS_DELAY * (animationCount + 1) : 0 }));
-    incrementAnimationCount();
-    return staggerAnimation;
+    var animationCountRef = useRef(0);
+    var staggerInAnimation = useSpring(__assign(__assign(__assign({}, defaultAnimationConfig), animationConfig), { delay: STAGGER_ITEMS_DELAY * delayOrder }));
+    useEffect(function () {
+        animationCountRef.current += 1;
+    });
+    return staggerInAnimation;
 };
 /**
- * Accepts a number and returns a react-spring style object from useSpring
- * @param animationCount number - Count tracking items from main component
- * @param incrementAnimationCount Function - Function to increment animationCount from main component
+ * Accepts an order, optional in/out toggle and returns
+ * a react-spring style object from useSpring that fades an item
+ * in based on it's order
+ * @param delayOrder number - Order for delaying items
+ * @param reverse boolean - Toggles the direction of the animation
  * @returns Object
  */
-export var useFadeIn = function (animationCount, incrementAnimationCount) {
-    var defaultAnimationConfig = {
+export var useFadeIn = function (delayOrder, reverse) {
+    if (reverse === void 0) { reverse = false; }
+    var animationConfig = {
         from: { opacity: 0 },
-        to: { opacity: 1 },
-        config: __assign(__assign({}, config.default), { mass: 1 })
+        to: { opacity: 1 }
+    };
+    return useStaggerIn(animationConfig, delayOrder, reverse);
+};
+/**
+ * Accepts an order, optional in/out toggle and returns
+ * a react-spring style object from useSpring that fades and moves
+ * an item in based on it's order
+ * @param delayOrder number - Order for delaying items
+ * @param reverse boolean - Toggles the direction of the animation
+ * @returns Object
+ */
+export var useFadeAndMoveIn = function (delayOrder, reverse) {
+    if (reverse === void 0) { reverse = false; }
+    var animationConfig = {
+        from: { opacity: 0, y: 10 },
+        to: { opacity: 1, y: 0 }
     };
-    var staggerFadeInUpAnimation = useSpring(__assign(__assign({}, defaultAnimationConfig), { delay: STAGGER_ITEMS_DELAY * (animationCount + 1) }));
-    incrementAnimationCount();
-    return staggerFadeInUpAnimation;
+    return useStaggerIn(animationConfig, delayOrder, reverse);
 };