feat: separate legacy list to new list (#133)

* Separate legacy list to new list

* Export ListLegacy

* Revert color

Author: jonybur

src/components/List/List.css

@@ -1,20 +1,4 @@
 .bbn-list {
-  @apply rounded border border-secondary-strokeLight;
-
-  &-horizontal {
-    @apply flex py-3;
-  }
-
-  &-vertical {
-    @apply px-4;
-  }
-
-  &-adaptive {
-    @apply px-4 md:flex md:py-3;
-  }
-}
-
-.bbn-list-new-design {
   @apply flex items-start gap-2;
 
   &-horizontal {
@@ -31,46 +15,23 @@
 }
 
 .bbn-list-item {
-  @apply flex;
-
-  &-horizontal {
-    @apply flex-row items-center justify-between border-b border-secondary-strokeLight py-4 last-of-type:border-0;
-  }
-
-  &-vertical {
-    @apply flex-1 flex-col items-start justify-start gap-1.5 border-r border-secondary-strokeLight px-6 last-of-type:border-0;
-  }
-
-  &-adaptive {
-    @apply flex-row items-center justify-between border-b border-secondary-strokeLight py-4 last-of-type:border-0 md:flex-1 md:flex-col md:items-start md:justify-start md:gap-1.5 md:border-b-0 md:border-r md:px-6 md:py-0;
-  }
-}
-
-.bbn-list-item-new-design {
   @apply flex border-0 rounded bg-secondary-highlight px-6 py-4 w-full;
 
   &-horizontal {
-    @apply flex-row items-center justify-between border-b border-secondary-strokeLight py-4 last-of-type:border-0;
+    @apply flex-row items-center justify-between py-4 border-0;
   }
 
   &-vertical {
-    @apply flex-1 flex-col items-start justify-start gap-1.5 border-r border-secondary-strokeLight px-6 last-of-type:border-0;
+    @apply flex-1 flex-col items-start justify-start gap-1.5 px-6 border-0;
   }
 
   &-adaptive {
-    @apply flex-1 items-center justify-between py-4 md:flex-col md:items-start md:justify-center md:px-6 md:py-0 md:flex-1 md:h-auto;
+    @apply flex-1 border-0 items-center justify-between py-4 md:flex-col md:items-start md:justify-center md:px-6 md:py-0 md:flex-1 md:h-auto;
   }
 }
 
-.bbn-list-title {
-  @apply text-accent-secondary;
-
-  &-adaptive {
-    @apply text-base md:text-sm;
-  }
-}
 
-.bbn-list-title-new-design {
+.bbn-list-title {
   @apply text-accent-primary;
 
   &-adaptive {
@@ -79,22 +40,6 @@
 }
 
 .bbn-list-value {
-  @apply text-accent-secondary;
-
-  &-horizontal {
-    @apply flex items-center gap-1;
-  }
-
-  &-vertical {
-    @apply flex w-full items-center justify-between;
-  }
-
-  &-adaptive {
-    @apply flex items-center gap-1 md:w-full md:justify-between;
-  }
-}
-
-.bbn-list-value-new-design {
   @apply text-accent-primary;
 
   &-horizontal {

src/components/List/List.stories.tsx

@@ -12,9 +12,6 @@ const meta: Meta<typeof List> = {
       control: { type: "select" },
       options: ["horizontal", "vertical", "adaptive"],
     },
-    newDesign: {
-      control: { type: "boolean" },
-    },
   },
 };
 
@@ -43,7 +40,6 @@ export const HorizontalRegular: Story = {
   name: "Regular Design - Horizontal",
   args: {
     orientation: "horizontal",
-    newDesign: false,
     children: sampleItems,
   },
 };
@@ -52,7 +48,6 @@ export const VerticalRegular: Story = {
   name: "Regular Design - Vertical",
   args: {
     orientation: "vertical",
-    newDesign: false,
     children: sampleItems,
   },
 };
@@ -61,35 +56,6 @@ export const AdaptiveRegular: Story = {
   name: "Regular Design - Adaptive",
   args: {
     orientation: "adaptive",
-    newDesign: false,
-    children: sampleItems,
-  },
-};
-
-// New Design Stories
-export const HorizontalNewDesign: Story = {
-  name: "New Design - Horizontal",
-  args: {
-    orientation: "horizontal",
-    newDesign: true,
-    children: sampleItems,
-  },
-};
-
-export const VerticalNewDesign: Story = {
-  name: "New Design - Vertical",
-  args: {
-    orientation: "vertical",
-    newDesign: true,
-    children: sampleItems,
-  },
-};
-
-export const AdaptiveNewDesign: Story = {
-  name: "New Design - Adaptive",
-  args: {
-    orientation: "adaptive",
-    newDesign: true,
     children: sampleItems,
   },
 };
@@ -99,7 +65,6 @@ export const LongContentHorizontal: Story = {
   name: "Long Content - Horizontal",
   args: {
     orientation: "horizontal",
-    newDesign: false,
     children: longContentItems,
   },
 };
@@ -108,7 +73,6 @@ export const LongContentVertical: Story = {
   name: "Long Content - Vertical",
   args: {
     orientation: "vertical",
-    newDesign: false,
     children: longContentItems,
   },
 };
@@ -117,29 +81,6 @@ export const SingleItem: Story = {
   name: "Single Item",
   args: {
     orientation: "horizontal",
-    newDesign: false,
     children: [<ListItem title="Single Entry" value="Only one item in list" suffix={<MdOutlineInfo size={20} />} />],
   },
 };
-
-// Interactive/Playground Story
-export const Playground: Story = {
-  name: "Playground",
-  args: {
-    orientation: "horizontal",
-    newDesign: false,
-    children: sampleItems,
-  },
-};
-
-// Legacy - keeping the original Default story
-export const Default: Story = {
-  args: {
-    orientation: "horizontal",
-    children: [
-      <ListItem title="Signet Bitcoin Balance" value="100.123456 sBTC" />,
-      <ListItem title="Signet Bitcoin Balance" value="100.123456 sBTC" />,
-      <ListItem title="Signet Bitcoin Balance" value="100.123456 sBTC" suffix={<MdOutlineInfo size={24} />} />,
-    ],
-  },
-};

src/components/List/List.tsx

@@ -6,7 +6,6 @@ import { type ListItemProps, ListItem } from "./components/ListItem";
 
 export interface ListProps {
   className?: string;
-  newDesign?: boolean;
   orientation: "adaptive" | "horizontal" | "vertical";
   children: ReactElement<ListItemProps, typeof ListItem> | ReactElement<ListItemProps, typeof ListItem>[];
 }
@@ -17,26 +16,13 @@ const ROW_ORIENTATION = {
   vertical: "horizontal",
 } as const;
 
-export function List({
-  newDesign = false,
-  className,
-  orientation = "vertical",
-  children,
-}: PropsWithChildren<ListProps>) {
-  const getListClasses = () => {
-    if (newDesign) {
-      return twMerge("bbn-list-new-design", `bbn-list-new-design-${orientation}`, className);
-    }
-    return twMerge("bbn-list", `bbn-list-${orientation}`, className);
-  };
-
+export function List({ className, orientation = "vertical", children }: PropsWithChildren<ListProps>) {
   return (
-    <div className={getListClasses()}>
+    <div className={twMerge("bbn-list", `bbn-list-${orientation}`, className)}>
       {Children.map(children, (item) =>
         isValidElement(item)
           ? cloneElement(item, {
               orientation: ROW_ORIENTATION[orientation],
-              newDesign,
             })
           : item,
       )}

src/components/List/components/ListItem.tsx

@@ -3,36 +3,25 @@ import { twJoin } from "tailwind-merge";
 import { Text } from "@/components/Text";
 
 export interface ListItemProps {
-  newDesign?: boolean;
   className?: string;
   orientation?: "adaptive" | "horizontal" | "vertical";
   title: string | JSX.Element;
   value: string | JSX.Element;
   suffix?: JSX.Element;
 }
 
-export function ListItem({ newDesign, className, orientation = "horizontal", title, value, suffix }: ListItemProps) {
+export function ListItem({ className, orientation = "horizontal", title, value, suffix }: ListItemProps) {
   return (
-    <div
-      className={twJoin(
-        newDesign ? "bbn-list-item-new-design" : "bbn-list-item",
-        `bbn-list-item-${orientation}`,
-        className,
-      )}
-    >
+    <div className={twJoin("bbn-list-item", `bbn-list-item-${orientation}`, className)}>
       <Text
         as="div"
-        className={twJoin(newDesign ? "bbn-list-title-new-design" : "bbn-list-title", `bbn-list-title-${orientation}`)}
+        className={twJoin("bbn-list-title", `bbn-list-title-${orientation}`)}
         variant={orientation === "horizontal" ? "body1" : "body2"}
       >
         {title}
       </Text>
 
-      <Text
-        as="div"
-        className={twJoin(newDesign ? "bbn-list-value-new-design" : "bbn-list-value", `bbn-list-value-${orientation}`)}
-        variant="body1"
-      >
+      <Text as="div" className={twJoin("bbn-list-value", `bbn-list-value-${orientation}`)} variant="body1">
         {value}
         {suffix}
       </Text>

src/components/ListLegacy/ListLegacy.css

@@ -0,0 +1,55 @@
+.bbn-list-legacy {
+  @apply rounded border border-secondary-strokeLight;
+
+  &-horizontal {
+    @apply flex py-3;
+  }
+
+  &-vertical {
+    @apply px-4;
+  }
+
+  &-adaptive {
+    @apply px-4 md:flex md:py-3;
+  }
+}
+
+.bbn-list-item-legacy {
+  @apply flex;
+
+  &-horizontal {
+    @apply flex-row items-center justify-between border-b border-secondary-strokeLight py-4 last-of-type:border-0;
+  }
+
+  &-vertical {
+    @apply flex-1 flex-col items-start justify-start gap-1.5 border-r border-secondary-strokeLight px-6 last-of-type:border-0;
+  }
+
+  &-adaptive {
+    @apply flex-row items-center justify-between border-b border-secondary-strokeLight py-4 last-of-type:border-0 md:flex-1 md:flex-col md:items-start md:justify-start md:gap-1.5 md:border-b-0 md:border-r md:px-6 md:py-0;
+  }
+}
+
+.bbn-list-title-legacy {
+  @apply text-accent-secondary;
+
+  &-adaptive {
+    @apply text-base md:text-sm;
+  }
+}
+
+.bbn-list-value-legacy {
+  @apply text-accent-primary;
+
+  &-horizontal {
+    @apply flex items-center gap-1;
+  }
+
+  &-vertical {
+    @apply flex w-full items-center justify-between;
+  }
+
+  &-adaptive {
+    @apply flex items-center gap-1 md:w-full md:justify-between;
+  }
+}