migrated IconBadge story

src/stories/common/IconBadge/IconBadge.stories.jsx → src/stories/common/IconBadge/IconBadge.stories.tsx

-import { Paper } from "@mui/material";
-import { AcUnit, Warning } from "@mui/icons-material";
+import { Paper, Link } from "@mui/material";
+import { AcUnit } from "@mui/icons-material";
 import { IconBadge } from "../../../components/common/IconBadge";
 import { useUniqueKeys } from "../../../hooks/useUniqueKeys";
 
@@ -10,23 +10,23 @@ export default {
 const iconBadges = [
   {
     icon: <AcUnit />,
-    title: "It's really cold outside!",
-    subtitle: "Dangerously so!"
+    title: "It's really cold outside!"
   },
   {
     icon: <AcUnit />,
-    secondaryIcon: <Warning />,
     title: "It's really cold outside!",
     subtitle: "Dangerously so!"
   },
   {
     icon: <AcUnit />,
-    title: "It's really cold outside!"
+    title: "It's really cold outside!",
+    subtitle: "With bigger gap between icon and title",
+    gap: 10
   },
   {
     icon: <AcUnit />,
-    secondaryIcon: <Warning />,
-    title: "It's really cold outside!"
+    title: "It's really cold outside!",
+    subtitle: <Link>Subtitle as a custom component</Link>
   }
 ];
 
@@ -34,8 +34,8 @@ export const Default = () => {
   const iconBadgesKeys = useUniqueKeys(iconBadges);
   return (
     <>
-      {iconBadges.map((badge, i) => {
-        return (
+      {iconBadgesKeys &&
+        iconBadges.map((badge, i) => (
           <Paper
             key={iconBadgesKeys[i]}
             sx={{
@@ -45,8 +45,7 @@ export const Default = () => {
           >
             <IconBadge {...badge} />
           </Paper>
-        );
-      })}
+        ))}
     </>
   );
 };