Create elements sections

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @0xDazzer @jonybur @jeremy-babylonlabs @jrwbabylonlab @gbarkhatov

src/components/FinalityProviderItem/FinalityProviderItem.tsx → src/elements/FinalityProviderItem/FinalityProviderItem.tsx

@@ -1,6 +1,6 @@
-import { Avatar } from "../Avatar";
-import { Text } from "../Text";
-import { FinalityProviderLogo } from "../FinalityProviderLogo";
+import { Avatar } from "../../components/Avatar";
+import { Text } from "../../components/Text";
+import { FinalityProviderLogo } from "../FinalityProviderLogo/FinalityProviderLogo";
 
 interface ProviderDescription {
   moniker?: string;
@@ -17,7 +17,7 @@ interface FinalityProviderItemProps {
   bsnName: string;
   bsnLogoUrl?: string;
   provider: Provider;
-  onRemove: (bsnId?: string) => void;
+  onRemove: (id?: string) => void;
 }
 
 export function FinalityProviderItem({ bsnId, bsnName, bsnLogoUrl, provider, onRemove }: FinalityProviderItemProps) {

src/components/FinalityProviderLogo/FinalityProviderLogo.tsx → src/elements/FinalityProviderLogo/FinalityProviderLogo.tsx

@@ -1,4 +1,4 @@
-import { Text } from "../Text";
+import { Text } from "../../components/Text";
 import { useState } from "react";
 import { twMerge } from "tailwind-merge";
 

src/components/ProvidersList/ProvidersList.tsx → src/elements/ProvidersList/ProvidersList.tsx

@@ -21,7 +21,7 @@ export interface ProviderItem {
 
 interface ProvidersListProps {
   items: ProviderItem[];
-  onRemove: (bsnId?: string) => void;
+  onRemove: (id?: string) => void;
 }
 
 export function ProvidersList({ items, onRemove }: ProvidersListProps) {

src/index.tsx

@@ -17,7 +17,6 @@ export * from "./components/Toggle";
 export * from "./components/List";
 export * from "./components/Badge";
 export * from "./components/SubSection";
-export * from "./components/FinalityProviderLogo";
 export * from "./components/CounterButton";
 export * from "./components/Menu";
 
@@ -30,10 +29,13 @@ export * from "./widgets/form/SelectField";
 export * from "./widgets/form/HiddenField";
 export * from "./widgets/form/hooks";
 
-export * from "./widgets/new-design/AmountSubsection";
-export * from "./widgets/new-design/FinalityProviderSubsection";
-export * from "./widgets/new-design/FeesSection";
-export * from "./widgets/new-design/PreviewModal";
+export * from "./widgets/sections/AmountSubsection";
+export * from "./widgets/sections/FinalityProviderSubsection";
+export * from "./widgets/sections/FeesSection";
+export * from "./widgets/sections/PreviewModal";
+
+export * from "./elements/FinalityProviderLogo";
+export * from "./elements/FinalityProviderItem";
 
 export * from "./components/ListLegacy";
 

src/widgets/new-design/FinalityProviderSubsection/FinalityProviderSubsection.stories.tsx → src/widgets/sections/FinalityProviderSubsection/FinalityProviderSubsection.stories.tsx

@@ -1,7 +1,7 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
 import { FinalityProviderSubsection } from "./FinalityProviderSubsection";
-import type { ProviderItem } from "../../../components/ProvidersList/ProvidersList";
+import type { ProviderItem } from "../../../elements/ProvidersList/ProvidersList";
 
 const sampleItems: ProviderItem[] = [
   {
@@ -84,72 +84,102 @@ export const Default: Story = {
   args: {
     max: 3,
     items: sampleItems,
+    actionText: "Add BSN and Finality Provider",
     onAdd: () => alert("Add clicked"),
     onRemove: () => alert("Remove clicked"),
   },
-  render: (props: { max: number; items: ProviderItem[]; onAdd: () => void; onRemove: (bsnId?: string) => void }) => (
-    <FinalityProviderSubsection {...props} />
-  ),
+  render: (props: {
+    max: number;
+    items: ProviderItem[];
+    actionText: string;
+    onAdd: () => void;
+    onRemove: (bsnId?: string) => void;
+  }) => <FinalityProviderSubsection {...props} />,
 };
 
 export const Empty: Story = {
   args: {
     max: 3,
     items: [],
+    actionText: "Add BSN and Finality Provider",
     onAdd: () => alert("Add clicked"),
     onRemove: () => alert("Remove clicked"),
   },
-  render: (props: { max: number; items: ProviderItem[]; onAdd: () => void; onRemove: (bsnId?: string) => void }) => (
-    <FinalityProviderSubsection {...props} />
-  ),
+  render: (props: {
+    max: number;
+    items: ProviderItem[];
+    actionText: string;
+    onAdd: () => void;
+    onRemove: (bsnId?: string) => void;
+  }) => <FinalityProviderSubsection {...props} />,
 };
 
 export const MultipleItems: Story = {
   args: {
     max: 5,
     items: multipleItems,
+    actionText: "Add BSN and Finality Provider",
     onAdd: () => alert("Add clicked"),
     onRemove: (bsnId?: string) => alert(`Remove clicked for ${bsnId}`),
   },
-  render: (props: { max: number; items: ProviderItem[]; onAdd: () => void; onRemove: (bsnId?: string) => void }) => (
-    <FinalityProviderSubsection {...props} />
-  ),
+  render: (props: {
+    max: number;
+    items: ProviderItem[];
+    actionText: string;
+    onAdd: () => void;
+    onRemove: (bsnId?: string) => void;
+  }) => <FinalityProviderSubsection {...props} />,
 };
 
 export const AtMaximumCapacity: Story = {
   args: {
     max: 3,
     items: maxCapacityItems,
+    actionText: "Add BSN and Finality Provider",
     onAdd: () => alert("Add clicked"),
     onRemove: (bsnId?: string) => alert(`Remove clicked for ${bsnId}`),
   },
-  render: (props: { max: number; items: ProviderItem[]; onAdd: () => void; onRemove: (bsnId?: string) => void }) => (
-    <FinalityProviderSubsection {...props} />
-  ),
+  render: (props: {
+    max: number;
+    items: ProviderItem[];
+    actionText: string;
+    onAdd: () => void;
+    onRemove: (bsnId?: string) => void;
+  }) => <FinalityProviderSubsection {...props} />,
 };
 
 export const SingleProviderMode: Story = {
   args: {
     max: 1,
     items: [],
+    actionText: "Add Finality Provider",
     onAdd: () => alert("Add clicked"),
     onRemove: () => alert("Remove clicked"),
   },
-  render: (props: { max: number; items: ProviderItem[]; onAdd: () => void; onRemove: (bsnId?: string) => void }) => (
-    <FinalityProviderSubsection {...props} />
-  ),
+  render: (props: {
+    max: number;
+    items: ProviderItem[];
+    actionText: string;
+    onAdd: () => void;
+    onRemove: (bsnId?: string) => void;
+  }) => <FinalityProviderSubsection {...props} />,
 };
 
 export const SingleProviderModeWithItem: Story = {
   args: {
     max: 1,
     items: [sampleItems[0]],
+    actionText: "Add Finality Provider",
     onAdd: () => alert("Add clicked"),
     onRemove: (bsnId?: string) => alert(`Remove clicked for ${bsnId}`),
   },
-  render: (props: { max: number; items: ProviderItem[]; onAdd: () => void; onRemove: (bsnId?: string) => void }) => (
-    <FinalityProviderSubsection {...props} />
-  ),
+  render: (props: {
+    max: number;
+    items: ProviderItem[];
+    actionText: string;
+    onAdd: () => void;
+    onRemove: (bsnId?: string) => void;
+  }) => <FinalityProviderSubsection {...props} />,
 };
 
 export const ProvidersWithoutLogos: Story = {
@@ -174,12 +204,17 @@ export const ProvidersWithoutLogos: Story = {
         },
       },
     ],
+    actionText: "Add BSN and Finality Provider",
     onAdd: () => alert("Add clicked"),
     onRemove: (bsnId?: string) => alert(`Remove clicked for ${bsnId}`),
   },
-  render: (props: { max: number; items: ProviderItem[]; onAdd: () => void; onRemove: (bsnId?: string) => void }) => (
-    <FinalityProviderSubsection {...props} />
-  ),
+  render: (props: {
+    max: number;
+    items: ProviderItem[];
+    actionText: string;
+    onAdd: () => void;
+    onRemove: (bsnId?: string) => void;
+  }) => <FinalityProviderSubsection {...props} />,
 };
 
 export const ProvidersWithoutDescriptions: Story = {
@@ -206,10 +241,15 @@ export const ProvidersWithoutDescriptions: Story = {
         },
       },
     ],
+    actionText: "Add BSN and Finality Provider",
     onAdd: () => alert("Add clicked"),
     onRemove: (bsnId?: string) => alert(`Remove clicked for ${bsnId}`),
   },
-  render: (props: { max: number; items: ProviderItem[]; onAdd: () => void; onRemove: (bsnId?: string) => void }) => (
-    <FinalityProviderSubsection {...props} />
-  ),
+  render: (props: {
+    max: number;
+    items: ProviderItem[];
+    actionText: string;
+    onAdd: () => void;
+    onRemove: (bsnId?: string) => void;
+  }) => <FinalityProviderSubsection {...props} />,
 };

src/widgets/new-design/FinalityProviderSubsection/FinalityProviderSubsection.tsx → src/widgets/sections/FinalityProviderSubsection/FinalityProviderSubsection.tsx

@@ -3,21 +3,19 @@ import { SubSection } from "../../../components/SubSection";
 import { useMemo } from "react";
 
 import { CounterButton } from "../../../components/CounterButton/CounterButton";
-import { ProvidersList, ProviderItem } from "../../../components/ProvidersList/ProvidersList";
+import { ProvidersList, ProviderItem } from "../../../elements/ProvidersList/ProvidersList";
 
 interface Props {
   max: number;
   items: ProviderItem[];
+  actionText: string;
   onAdd: () => void;
-  onRemove: (bsnId?: string) => void;
+  onRemove: (id?: string) => void;
 }
 
-export function FinalityProviderSubsection({ max, items = [], onAdd, onRemove }: Props) {
+export function FinalityProviderSubsection({ max, items = [], actionText, onAdd, onRemove }: Props) {
   const count = useMemo(() => items.length, [items]);
 
-  const allowsMultipleBsns = max > 1;
-  const actionText = allowsMultipleBsns ? "Add BSN and Finality Provider" : "Add Finality Provider";
-
   return (
     <SubSection>
       <div className="flex w-full flex-col gap-4">