From 8fb0ed2a4a90804579e76200443913c3683b2f8f Mon Sep 17 00:00:00 2001
From: Nandan Devadula <47176249+devadula-nandan@users.noreply.github.com>
Date: Thu, 18 Apr 2024 19:30:10 +0530
Subject: [PATCH] refactor(UnauthorizedEmptyState): added TS types to the
 component (#4930)

* refactor(UnauthorizedEmptyState): changed file to typescript

* refactor(UnauthorizedEmptyState): added TS types to the component

---------

Co-authored-by: Matt Gallo <mdgallo@us.ibm.com>
---
 ...ptyState.js => UnauthorizedEmptyState.tsx} | 70 +++++++++++++++++--
 1 file changed, 66 insertions(+), 4 deletions(-)
 rename packages/ibm-products/src/components/EmptyStates/UnauthorizedEmptyState/{UnauthorizedEmptyState.js => UnauthorizedEmptyState.tsx} (72%)

diff --git a/packages/ibm-products/src/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js b/packages/ibm-products/src/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.tsx
similarity index 72%
rename from packages/ibm-products/src/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js
rename to packages/ibm-products/src/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.tsx
index dbf0b3493d..da527f1bb7 100644
--- a/packages/ibm-products/src/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.js
+++ b/packages/ibm-products/src/components/EmptyStates/UnauthorizedEmptyState/UnauthorizedEmptyState.tsx
@@ -6,12 +6,13 @@
  */
 
 // Import portions of React that are needed.
-import React from 'react';
+import React, { ReactNode } from 'react';
 
 // Other standard imports.
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Button, Link } from '@carbon/react';
+import { Button, Link, ButtonProps } from '@carbon/react';
+import { CarbonIconType } from '@carbon/icons-react/lib/CarbonIcon';
 
 import { getDevtoolsProps } from '../../../global/js/utils/devtools';
 import { pkg } from '../../../settings';
@@ -24,10 +25,71 @@ import { defaults } from '../EmptyState';
 const blockClass = `${pkg.prefix}--empty-state`;
 const componentName = 'UnauthorizedEmptyState';
 
+interface UnauthorizedEmptyStateProps {
+  /**
+   * 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 UnauthorizedEmptyState = React.forwardRef(
+export let UnauthorizedEmptyState = React.forwardRef<
+  HTMLDivElement,
+  UnauthorizedEmptyStateProps
+>(
   (
     {
       // The component props, in alphabetical order (for consistency).
@@ -72,7 +134,7 @@ export let UnauthorizedEmptyState = React.forwardRef(
           link={link}
           size={size}
           subtitle={subtitle}
-          title={title}
+          title={title || ''}
         />
       </div>
     );