From 2b69c08fa2e2d0f0b7b78db7eb97242f3998f277 Mon Sep 17 00:00:00 2001
From: Aman Lajpal <42869088+amanlajpal@users.noreply.github.com>
Date: Tue, 17 Oct 2023 01:55:36 +0530
Subject: [PATCH] feat(SkeletonIcon): Add types for `SkeletonIcon` (#14801)

* refactor: added TypeScript types to SkeletonIcon

* docs: adding myself to contributors list

* refactor: added propTypes definition

* refactor: using shorthand for className property

* fix(SkeletonIcon): move className outside object

---------

Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
Co-authored-by: TJ Egan <tw15egan@gmail.com>
---
 .all-contributorsrc                            | 10 ++++++++++
 README.md                                      |  1 +
 .../{SkeletonIcon.js => SkeletonIcon.tsx}      | 18 ++++++++++++++----
 3 files changed, 25 insertions(+), 4 deletions(-)
 rename packages/react/src/components/SkeletonIcon/{SkeletonIcon.js => SkeletonIcon.tsx} (68%)

diff --git a/.all-contributorsrc b/.all-contributorsrc
index 6e3ad91a49d7..a39fcda0c3df 100644
--- a/.all-contributorsrc
+++ b/.all-contributorsrc
@@ -1268,6 +1268,16 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "amanlajpal",
+      "name": "Aman Lajpal",
+      "avatar_url": "https://avatars.githubusercontent.com/u/42869088?v=4",
+      "profile": "https://github.com/amanlajpal",
+      "contributions": [
+        "code",
+        "doc"
+      ]
     }
   ],
   "commitConvention": "none"
diff --git a/README.md b/README.md
index 2118c5c3ba11..7699c6db6d57 100644
--- a/README.md
+++ b/README.md
@@ -254,6 +254,7 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
     <td align="center"><a href="https://github.com/cordesmj"><img src="https://avatars.githubusercontent.com/u/7409239?v=4?s=100" width="100px;" alt=""/><br /><sub><b>cordesmj</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=cordesmj" title="Code">💻</a></td>
     <td align="center"><a href="https://med-aziz-chebbi.web.app/"><img src="https://avatars.githubusercontent.com/u/60013060?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Aziz Chebbi</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=azizChebbi" title="Code">💻</a></td>
     <td align="center"><a href="https://github.com/misiekhardcore"><img src="https://avatars.githubusercontent.com/u/58469680?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Michał Konopski</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=misiekhardcore" title="Code">💻</a></td>
+    <td align="center"><a href="https://github.com/amanlajpal"><img src="https://avatars.githubusercontent.com/u/42869088?v=4?s=100" width="100px;" alt=""/><br /><sub><b>Aman Lajpal</b></sub></a><br /><a href="https://github.com/carbon-design-system/carbon/commits?author=amanlajpal" title="Code">💻</a> <a href="https://github.com/carbon-design-system/carbon/commits?author=amanlajpal" title="Documentation">📖</a></td>
   </tr>
 </table>
 
diff --git a/packages/react/src/components/SkeletonIcon/SkeletonIcon.js b/packages/react/src/components/SkeletonIcon/SkeletonIcon.tsx
similarity index 68%
rename from packages/react/src/components/SkeletonIcon/SkeletonIcon.js
rename to packages/react/src/components/SkeletonIcon/SkeletonIcon.tsx
index 9cc519f1e12e..521cafb73ff1 100644
--- a/packages/react/src/components/SkeletonIcon/SkeletonIcon.js
+++ b/packages/react/src/components/SkeletonIcon/SkeletonIcon.tsx
@@ -4,18 +4,28 @@
  * 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 PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 
-const SkeletonIcon = ({ className, ...other }) => {
+interface SkeletonIconProps {
+  /**
+   * Specify an optional className to add.
+   */
+  className?: string;
+
+  /**
+   * The CSS styles.
+   */
+  style?: React.CSSProperties;
+}
+
+const SkeletonIcon: React.FC<SkeletonIconProps> = ({ className, ...other }) => {
   const prefix = usePrefix();
 
-  const skeletonIconClasses = classNames({
+  const skeletonIconClasses = classNames(className, {
     [`${prefix}--icon--skeleton`]: true,
-    [className]: className,
   });
 
   return <div className={skeletonIconClasses} {...other} />;