From 077f336cabdd3c1dcffaf9340011f0c0e5513983 Mon Sep 17 00:00:00 2001
From: Nandan Devadula <47176249+devadula-nandan@users.noreply.github.com>
Date: Thu, 11 Apr 2024 01:52:41 +0530
Subject: [PATCH] refactor(ErrorEmptyState): added typescript types to the
 component (#4747)

* chore(ErrorEmptyState): converted file to typescript

* refactor(ErrorEmptyState): added typescript types to the component

* chore(ErrorEmptyState): used `CarbonIconType` for renderIcon in actions

* chore(ErrorEmptyState): update copyright year
---
 ...ErrorEmptyState.js => ErrorEmptyState.tsx} | 71 +++++++++++++++++--
 1 file changed, 67 insertions(+), 4 deletions(-)
 rename packages/ibm-products/src/components/EmptyStates/ErrorEmptyState/{ErrorEmptyState.js => ErrorEmptyState.tsx} (72%)

diff --git a/packages/ibm-products/src/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js b/packages/ibm-products/src/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.tsx
similarity index 72%
rename from packages/ibm-products/src/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js
rename to packages/ibm-products/src/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.tsx
index daa72d65c1..b4e7ce125b 100644
--- a/packages/ibm-products/src/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.js
+++ b/packages/ibm-products/src/components/EmptyStates/ErrorEmptyState/ErrorEmptyState.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,78 @@ import { pkg } from '../../../settings';
 import { EmptyStateContent } from '../EmptyStateContent';
 import ErrorIllustration from '../assets/ErrorIllustration';
 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 = 'ErrorEmptyState';
 
+interface ErrorEmptyStateProps {
+  /**
+   * 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?: string | ReactNode;
+
+  /**
+   * Empty state title
+   */
+  title: string | 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 ErrorEmptyState = React.forwardRef(
+export let ErrorEmptyState = React.forwardRef<
+  HTMLDivElement,
+  ErrorEmptyStateProps
+>(
   (
     {
       // The component props, in alphabetical order (for consistency).
@@ -72,7 +135,7 @@ export let ErrorEmptyState = React.forwardRef(
           link={link}
           size={size}
           subtitle={subtitle}
-          title={title}
+          title={title || ''}
         />
       </div>
     );