fix: use semantic tokens, fix styling, delete cullingInfoUtils

Author: InsaneZein

packages/module/patternfly-docs/content/extensions/component-groups/examples/CullingInfo/CullingInfoCustomExample.tsx

@@ -1,18 +1,36 @@
 import React from 'react';
 import CullingInformation from '@patternfly/react-component-groups/dist/dynamic/CullingInfo';
+import { Stack, StackItem } from '@patternfly/react-core';
 
 
 export const CustomizedRenderExample: React.FunctionComponent = () => {
   const staleDate = new Date('Sun Jan 26 2020');
   const warningDate = new Date('Mon Feb 03 2025');
   const cullingDate = new Date('Fri Feb 07 2025');
   return <>
-    <CullingInformation
-      stale={staleDate}
-      currDate={new Date()}
-      culled={cullingDate}
-      staleWarning={warningDate}
-      render={({ msg }) => (<React.Fragment>{msg} Hello there. Last seen: {` `}</React.Fragment>)}>
-    </CullingInformation>
+    <Stack>
+      <StackItem>
+        <CullingInformation
+          stale={staleDate}
+          currDate={new Date()}
+          culled={cullingDate}
+          staleWarning={warningDate}
+          render={({ msg }) => (<React.Fragment>{msg}</React.Fragment>)}>
+        </CullingInformation>
+      </StackItem>
+
+      <StackItem>
+        <CullingInformation
+          stale={staleDate}
+          currDate={new Date()}
+          culled={new Date('Fri Feb 07 2024')}
+          staleWarning={new Date('Mon Feb 03 2024')}
+          render={() => (<React.Fragment>This is an error message. Item is past due</React.Fragment>)}>
+        </CullingInformation>
+      </StackItem>
+    </Stack>
+   
+
+    
   </>
 };

packages/module/patternfly-docs/content/extensions/component-groups/examples/CullingInfo/CullingInfoExample.tsx

@@ -1,16 +1,33 @@
 import React from 'react';
 import CullingInformation from '@patternfly/react-component-groups/dist/dynamic/CullingInfo';
+import { Stack, StackItem } from '@patternfly/react-core';
 
 export const BasicExample: React.FunctionComponent = () => {
   const staleDate = new Date('Sun Jan 26 2020');
   const warningDate = new Date('Mon Feb 03 2025');
   const cullingDate = new Date('Fri Feb 07 2025');
   return <>
-    <CullingInformation
-      stale={staleDate}
-      currDate={new Date()}
-      culled={cullingDate}
-      staleWarning={warningDate}>
-    </CullingInformation>
+    <Stack>
+      <StackItem>
+        <CullingInformation
+          stale={staleDate}
+          currDate={new Date()}
+          culled={cullingDate}
+          staleWarning={warningDate}>
+        </CullingInformation>
+      </StackItem>
+
+      <StackItem>
+        <CullingInformation
+          stale={staleDate}
+          currDate={new Date()}
+          culled={new Date('Fri Feb 07 2024')}
+          staleWarning={new Date('Mon Feb 03 2024')}
+        >
+        </CullingInformation>
+      </StackItem>
+    </Stack>
+    
+    
   </>
 };

packages/module/src/CullingInfo/CullingInfo.tsx

@@ -3,27 +3,39 @@ import { ExclamationCircleIcon, ExclamationTriangleIcon } from '@patternfly/reac
 import { Tooltip, TooltipProps } from '@patternfly/react-core';
 import clsx from 'clsx';
 import { createUseStyles } from 'react-jss';
-import { CullingDate, CullingInfo, calculateTooltip } from './CullingInfoUtils';
 
-export type Render = (config: { msg: string }) => React.ReactElement<any, any> | null;
+type Render = (config: { msg: string }) => React.ReactElement<any, any> | null;
+type CullingDate = string | number | Date;
+
+interface CullingInfo {
+  isWarn?: boolean;
+  isError?: boolean;
+  msg: string;
+}
+
+const seconds = 1000;
+const minutes: number = seconds * 60;
+const hours: number = minutes * 60;
+const days: number = hours * 24;
+
+type CalculateTooltip = (culled: CullingDate, warning: CullingDate, currDate: CullingDate) => CullingInfo;
 
 const useStyles = createUseStyles({
   inventoryCullingWarning: {
-    color: 'var(--pf-v6-global--warning-color--200)',
-    fontWeight: 'var(--pf-v6-global--FontWeight--bold)',
-    svg: {
-      marginRight: 'var(--pf-v5-global--spacer--sm)'
-    }
+    color: 'var(--pf-t--global--icon--color--status--warning--default)',
   },
   inventoryCullingDanger: {
-    color: 'var(--pf-v6-global--warning-color--200)',
-    fontWeight: 'var(--pf-v6-global--FontWeight--bold)',
-    svg: {
-      marginRight: 'var(--pf-v6-global--spacer--sm)'
-    }
-  }
+    color: 'var(--pf-t--global--icon--color--status--danger--default)',
+  },
+  iconMargin: {
+    marginRight: 'var(--pf-t--global--spacer--sm)'
+  },
+  messageFont: {
+    fontWeight: 'var(--pf-t--global--font--weight--200)',
+  },
 });
 
+/** extends TooltipProps */
 export interface CullingInformation extends Omit<TooltipProps, 'content'> {
   /** Option to add custom css classes */
   className?: string;
@@ -39,6 +51,8 @@ export interface CullingInformation extends Omit<TooltipProps, 'content'> {
   children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
   /** Option to add custom message ReactElement */
   render?: Render;
+  /** Optional custom warning message */
+  message?: string;
 }
 
 const CullingInformation: React.FunctionComponent<CullingInformation> = ({
@@ -49,10 +63,30 @@ const CullingInformation: React.FunctionComponent<CullingInformation> = ({
   currDate = new Date(0),
   children,
   render,
+  message,
   ...props
 }) => {
   const classes = useStyles();
 
+  const calculateTooltip: CalculateTooltip = (culled, warning, currDate) => {
+    const culledDate: Date = new Date(culled);
+    const warningDate: Date = new Date(warning);
+    const diffTime: number = new Date(currDate).valueOf() - warningDate.valueOf();
+    const removeIn: number = Math.ceil((culledDate.valueOf() - new Date(currDate).valueOf()) / days);
+    const msg = message ? message : `System scheduled for inventory removal in ${removeIn} days`;
+    if (diffTime >= 0) {
+      return {
+        isError: true,
+        msg,
+      };
+    }
+  
+    return {
+      isWarn: true,
+      msg,
+    };
+  };
+
   if (new Date(currDate).valueOf() - new Date(stale).valueOf() < 0) {
     return render
       ? render({
@@ -67,9 +101,12 @@ const CullingInformation: React.FunctionComponent<CullingInformation> = ({
       <span
         className={clsx({ [classes.inventoryCullingWarning]: isWarn, [classes.inventoryCullingDanger]: isError }, className)}
       >
-        {isWarn && <ExclamationTriangleIcon className={classes.inventoryCullingWarning}/>}
-        {isError && <ExclamationCircleIcon />}
-        {render({ msg })}
+        {isWarn && <ExclamationTriangleIcon className={clsx( classes.iconMargin )}/>}
+        {isError && <ExclamationCircleIcon  className={clsx( classes.iconMargin )}/>}
+        <span className={clsx( classes.messageFont )}>
+          {render({ msg })}
+        </span>
+        
       </span>
     );
   }