refactor(ui/box-selector): replace all selectors [EE-3856] (#7902)

app/react/components/BoxSelector/BoxSelectorItem.stories.tsx

@@ -1,8 +1,10 @@
 import { Meta } from '@storybook/react';
-import { User } from 'lucide-react';
+import { ReactNode } from 'react';
+import { Briefcase } from 'lucide-react';
 
 import { init as initFeatureService } from '@/react/portainer/feature-flags/feature-flags.service';
 import { Edition, FeatureId } from '@/react/portainer/feature-flags/enums';
+import Docker from '@/assets/ico/vendor/docker.svg?c';
 
 import { IconProps } from '@@/Icon';
 
@@ -14,7 +16,7 @@ const meta: Meta = {
   args: {
     selected: false,
     description: 'description',
-    icon: User,
+    icon: Briefcase,
     label: 'label',
   },
 };
@@ -30,7 +32,7 @@ interface ExampleProps {
 }
 
 function Template({
-  selected,
+  selected = false,
   description = 'description',
   icon,
   label = 'label',
@@ -48,10 +50,10 @@ function Template({
   return (
     <div className="boxselector_wrapper">
       <BoxSelectorItem
-        onChange={() => {}}
+        onSelect={() => {}}
         option={option}
         radioName="radio"
-        selectedValue={selected ? option.value : 0}
+        isSelected={() => selected}
       />
     </div>
   );
@@ -78,3 +80,36 @@ export function SelectedLimitedFeatureItem() {
 
   return <Template feature={FeatureId.ACTIVITY_AUDIT} selected />;
 }
+
+function IconTemplate({
+  icon,
+  iconType,
+}: {
+  icon: ReactNode;
+  iconType: 'raw' | 'logo' | 'badge';
+}) {
+  return (
+    <BoxSelectorItem
+      onSelect={() => {}}
+      option={{
+        description: 'description',
+        icon,
+        iconType,
+        label: 'label',
+        id: 'id',
+        value: 'value',
+      }}
+      isSelected={() => false}
+      radioName="radio"
+      slim
+    />
+  );
+}
+
+export function LogoItem() {
+  return <IconTemplate icon={Docker} iconType="logo" />;
+}
+
+export function BadgeItem() {
+  return <IconTemplate icon={Briefcase} iconType="badge" />;
+}