fix(helm): helm charts view bad icon aspect ratio EE-4451 (#7875)

app/react/components/BadgeIcon/Badge.stories.tsx

@@ -0,0 +1,35 @@
+import { Meta } from '@storybook/react';
+
+import { BadgeIcon, BadgeSize, Props } from './BadgeIcon';
+
+export default {
+  component: BadgeIcon,
+  title: 'Components/BadgeIcon',
+  argTypes: {
+    size: {
+      control: {
+        type: 'select',
+        options: ['md', 'lg', 'xl', '2xl', '3xl'],
+      },
+    },
+    icon: {
+      control: {
+        type: 'select',
+        options: ['edit', 'info', 'smile', 'users'],
+      },
+    },
+  },
+} as Meta<Props>;
+
+// : JSX.IntrinsicAttributes & PropsWithChildren<Props>
+function Template({
+  size = '3xl',
+  icon = 'edit',
+}: {
+  size?: BadgeSize;
+  icon: string;
+}) {
+  return <BadgeIcon icon={icon} size={size} featherIcon />;
+}
+
+export const Example = Template.bind({});

app/react/components/BadgeIcon/BadgeIcon.tsx

@@ -0,0 +1,45 @@
+import clsx from 'clsx';
+
+import { Icon, IconProps } from '@@/Icon';
+
+export type BadgeSize = 'md' | 'lg' | 'xl' | '2xl' | '3xl';
+
+export interface Props extends IconProps {
+  size?: BadgeSize;
+}
+
+export function BadgeIcon({ icon, featherIcon, size = '3xl' }: Props) {
+  const sizeClasses = iconSizeToClasses(size);
+  return (
+    <div
+      className={clsx(
+        sizeClasses,
+        `badge-icon
+      bg-blue-3 text-blue-8
+      th-dark:bg-gray-9 th-dark:text-blue-3
+      rounded-full
+      inline-flex items-center justify-center
+   `
+      )}
+    >
+      <Icon icon={icon} feather={featherIcon} className="feather !flex" />
+    </div>
+  );
+}
+
+function iconSizeToClasses(size: BadgeSize) {
+  switch (size) {
+    case 'md':
+      return 'h-6 w-6 text-md';
+    case 'lg':
+      return 'h-8 w-8 text-lg';
+    case 'xl':
+      return 'h-10 w-10 text-xl';
+    case '2xl':
+      return 'h-12 w-12 text-2xl';
+    case '3xl':
+      return 'h-14 w-14 text-3xl';
+    default:
+      return 'h-14 w-14 text-3xl';
+  }
+}

app/react/components/BadgeIcon/index.ts

@@ -0,0 +1 @@
+export { BadgeIcon } from './BadgeIcon';