refactor(NotificationsEmptyState): added TS types to the component

packages/ibm-products/src/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.js → packages/ibm-products/src/components/EmptyStates/NotificationsEmptyState/NotificationsEmptyState.tsx

@@ -1,12 +1,12 @@
 /**
- * Copyright IBM Corp. 2020, 2021
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 // Import portions of React that are needed.
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
@@ -19,15 +19,79 @@ import { pkg } from '../../../settings';
 import { EmptyStateContent } from '../EmptyStateContent';
 import NotificationsIllustration from '../assets/NotificationsIllustration';
 import { defaults } from '../EmptyState';
+import { ButtonProps } from '@carbon/react';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 const blockClass = `${pkg.prefix}--empty-state`;
 const componentName = 'NotificationsEmptyState';
 
+interface NotificationsEmptyStateProps {
+  /**
+   * Empty state action button
+   */
+
+  action?: {
+    kind?: 'primary' | 'secondary' | 'tertiary';
+    renderIcon?: CarbonIconType;
+    onClick?: ButtonProps['onClick'];
+    text?: string;
+  };
+
+  /**
+   * Provide an optional class to be applied to the containing node.
+   */
+  className?: string;
+
+  /**
+   * The alt text for empty state svg images. If not provided , title will be used.
+   */
+  illustrationDescription?: string;
+
+  /**
+   * Designates the position of the illustration relative to the content
+   */
+  illustrationPosition?: 'top' | 'right' | 'bottom' | 'left';
+
+  /**
+   * Empty state illustration theme variations.
+   * To ensure you use the correct themed illustrations, you can conditionally specify light or dark
+   * based on your app's current theme value. Example:
+   * `illustrationTheme={appTheme === ('carbon--g100' || 'carbon--g90') ? 'dark' : 'light'}`
+   */
+  illustrationTheme?: 'light' | 'dark';
+
+  /**
+   * Empty state link object
+   */
+  link?: {
+    text?: string | ReactNode;
+    href?: string;
+  };
+
+  /**
+   * Empty state size
+   */
+  size?: 'lg' | 'sm';
+
+  /**
+   * Empty state subtitle
+   */
+  subtitle: ReactNode;
+
+  /**
+   * Empty state title
+   */
+  title: ReactNode;
+}
+
 /**
  * The `EmptyState` component follows the Carbon guidelines for empty states with some added specifications around illustration usage. For additional usage guidelines and documentation please refer to the links above.
  */
-export let NotificationsEmptyState = React.forwardRef(
+export let NotificationsEmptyState = React.forwardRef<
+  HTMLDivElement,
+  NotificationsEmptyStateProps
+>(
   (
     {
       // The component props, in alphabetical order (for consistency).
@@ -72,7 +136,7 @@ export let NotificationsEmptyState = React.forwardRef(
           link={link}
           size={size}
           subtitle={subtitle}
-          title={title}
+          title={title || ''}
         />
       </div>
     );