feat(CullingInfo): add culling info component

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

@@ -0,0 +1,37 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: Component groups
+subsection: Status and state indicators
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Culling information
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['CullingInformation']
+sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packages/module/patternfly-docs/content/extensions/component-groups/examples/CullingInfo/CullingInfo.md
+---
+
+import CullingInformation from '@patternfly/react-component-groups/dist/dynamic/CullingInfo';
+
+A **culling information** component displays a warning for when an object will become culled or stale. It can display this as a tooltip or text. 
+
+## Examples
+
+### Basic culling information
+
+A basic culling information example
+
+```js file="./CullingInfoExample.tsx"
+
+```
+
+### Culling information with customized props
+
+For further customization, you can choose to render the tooltip as a message beside the icon instead. And you can utilize all properties of the [Tooltip component](/components/tooltip), with the exception of `content`.
+
+```js file="./CullingInfoCustomExample.tsx"
+
+```

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

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

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

@@ -0,0 +1,134 @@
+import React from 'react';
+import { ExclamationCircleIcon, ExclamationTriangleIcon } from '@patternfly/react-icons';
+import { Button, Tooltip, TooltipProps } from '@patternfly/react-core';
+import clsx from 'clsx';
+import { createUseStyles } from 'react-jss';
+
+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-t--global--icon--color--status--warning--default)',
+  },
+  inventoryCullingDanger: {
+    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--body--bold)',
+  },
+});
+
+/** extends TooltipProps */
+export interface CullingInformation extends Omit<TooltipProps, 'content'> {
+  /** Option to add custom css classes */
+  className?: string;
+  /** Warning date for when object becomes stale */
+  staleWarning: CullingDate;
+  /** Date when object becomes culled */
+  culled: CullingDate;
+  /** Date when object becomes stale */
+  stale: CullingDate;
+  /** Current date */
+  currDate: CullingDate;
+  /** Optional prop to add custom children */
+  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> = ({
+  culled = new Date(0),
+  className,
+  staleWarning = new Date(0),
+  stale = new Date(0),
+  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({
+        msg: '',
+      })
+      : children || null;
+  }
+
+  const { isWarn, isError, msg }: CullingInfo = calculateTooltip(culled, staleWarning, currDate);
+  if (render) {
+    return (
+      <span
+        className={clsx({ [classes.inventoryCullingWarning]: isWarn, [classes.inventoryCullingDanger]: isError }, className)}
+      >
+        {isWarn &&
+          <Button variant="plain" aria-label="Action" role="tooltip" icon={<ExclamationTriangleIcon className={clsx( classes.iconMargin, classes.inventoryCullingWarning )}/>} />   
+        }
+        {isError &&
+          <Button variant="plain" aria-label="Action" role="tooltip" icon={<ExclamationCircleIcon  className={clsx( classes.iconMargin, classes.inventoryCullingDanger )}/>} />   
+        }
+        <span className={clsx( classes.messageFont )}>
+          {render({ msg })}
+        </span>
+
+      </span>
+    );
+  }
+
+  return (
+    <React.Fragment>
+      <Tooltip {...props} content={msg} position="bottom">
+        <span
+          className={clsx({ [classes.inventoryCullingWarning]: isWarn, [classes.inventoryCullingDanger]: isError }, className)}
+        >
+          {isError && <ExclamationCircleIcon />}
+          {isWarn && <ExclamationTriangleIcon />}
+          {children}
+        </span>
+      </Tooltip>
+    </React.Fragment>
+  );
+};
+
+export default CullingInformation;
+

packages/module/src/CullingInfo/index.ts

@@ -0,0 +1,2 @@
+export { default } from './CullingInfo';
+export * from './CullingInfo';

packages/module/src/index.ts

@@ -66,6 +66,9 @@ export * from './ErrorStack';
 export { default as ErrorBoundary } from './ErrorBoundary';
 export * from './ErrorBoundary';
 
+export { default as CullingInfo } from './CullingInfo';
+export * from './CullingInfo';
+
 export { default as ColumnManagementModal } from './ColumnManagementModal';
 export * from './ColumnManagementModal';