feat: phase 3 design changes (#132)

* Phase 3 design changes

* Make design backwards compatible

* Refactor

* Fix full width listitem

Author: jonybur

src/components/Card/Card.css

@@ -1,3 +1,3 @@
 .bbn-card {
   @apply bg-surface border-secondary-strokeLight rounded border p-6;
-}
+}

src/components/List/List.css

@@ -14,6 +14,22 @@
   }
 }
 
+.bbn-list-new-design {
+  @apply flex items-start gap-2;
+
+  &-horizontal {
+    @apply flex-row;
+  }
+
+  &-vertical {
+    @apply flex-col;
+  }
+
+  &-adaptive {
+    @apply flex-col md:flex-row;
+  }
+}
+
 .bbn-list-item {
   @apply flex;
 
@@ -30,6 +46,22 @@
   }
 }
 
+.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;
+  }
+
+  &-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-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;
+  }
+}
+
 .bbn-list-title {
   @apply text-accent-secondary;
 
@@ -38,9 +70,17 @@
   }
 }
 
-.bbn-list-value {
+.bbn-list-title-new-design {
   @apply text-accent-primary;
 
+  &-adaptive {
+    @apply text-base md:text-sm;
+  }
+}
+
+.bbn-list-value {
+  @apply text-accent-secondary;
+
   &-horizontal {
     @apply flex items-center gap-1;
   }
@@ -53,3 +93,19 @@
     @apply flex items-center gap-1 md:w-full md:justify-between;
   }
 }
+
+.bbn-list-value-new-design {
+  @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;
+  }
+}

src/components/List/List.stories.tsx

@@ -1,18 +1,138 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { MdOutlineInfo } from "react-icons/md";
+import { MdOutlineInfo, MdAccountBalanceWallet, MdTrendingUp } from "react-icons/md";
 
 import { List } from "./List";
 import { ListItem } from "./components/ListItem";
 
 const meta: Meta<typeof List> = {
   component: List,
   tags: ["autodocs"],
+  argTypes: {
+    orientation: {
+      control: { type: "select" },
+      options: ["horizontal", "vertical", "adaptive"],
+    },
+    newDesign: {
+      control: { type: "boolean" },
+    },
+  },
 };
 
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
+const sampleItems = [
+  <ListItem title="Bitcoin Balance" value="100.123456 BTC" suffix={<MdAccountBalanceWallet size={20} />} />,
+  <ListItem title="USD Value" value="$4,567,890.12" suffix={<MdTrendingUp size={20} />} />,
+  <ListItem title="Status" value="Active" suffix={<MdOutlineInfo size={20} />} />,
+];
+
+const longContentItems = [
+  <ListItem title="Very Long Bitcoin Wallet Address" value="bc1qxy2kgdygjrsqtzq2n0yrf2493p83kkfjhx0wlh" />,
+  <ListItem title="Transaction Hash with Very Long Text" value="a1b2c3d4e5f6789012345678901234567890abcdef" />,
+  <ListItem
+    title="Network Fee Estimation Details"
+    value="2.5 sats/vB (Medium Priority)"
+    suffix={<MdOutlineInfo size={20} />}
+  />,
+];
+
+// Regular Design Stories
+export const HorizontalRegular: Story = {
+  name: "Regular Design - Horizontal",
+  args: {
+    orientation: "horizontal",
+    newDesign: false,
+    children: sampleItems,
+  },
+};
+
+export const VerticalRegular: Story = {
+  name: "Regular Design - Vertical",
+  args: {
+    orientation: "vertical",
+    newDesign: false,
+    children: sampleItems,
+  },
+};
+
+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,
+  },
+};
+
+// Content Variation Stories
+export const LongContentHorizontal: Story = {
+  name: "Long Content - Horizontal",
+  args: {
+    orientation: "horizontal",
+    newDesign: false,
+    children: longContentItems,
+  },
+};
+
+export const LongContentVertical: Story = {
+  name: "Long Content - Vertical",
+  args: {
+    orientation: "vertical",
+    newDesign: false,
+    children: longContentItems,
+  },
+};
+
+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",

src/components/List/List.tsx

@@ -1,11 +1,12 @@
 import { type PropsWithChildren, Children, cloneElement, isValidElement, ReactElement } from "react";
-import { twMerge } from "tailwind-merge";
 import "./List.css";
+import { twMerge } from "tailwind-merge";
 
 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>[];
 }
@@ -16,11 +17,28 @@ const ROW_ORIENTATION = {
   vertical: "horizontal",
 } as const;
 
-export function List({ className, orientation = "vertical", children }: PropsWithChildren<ListProps>) {
+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);
+  };
+
   return (
-    <div className={twMerge("bbn-list", `bbn-list-${orientation}`, className)}>
+    <div className={getListClasses()}>
       {Children.map(children, (item) =>
-        isValidElement(item) ? cloneElement(item, { orientation: ROW_ORIENTATION[orientation] }) : item,
+        isValidElement(item)
+          ? cloneElement(item, {
+              orientation: ROW_ORIENTATION[orientation],
+              newDesign,
+            })
+          : item,
       )}
     </div>
   );

src/components/List/components/ListItem.tsx

@@ -3,25 +3,36 @@ 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({ className, orientation = "horizontal", title, value, suffix }: ListItemProps) {
+export function ListItem({ newDesign, className, orientation = "horizontal", title, value, suffix }: ListItemProps) {
   return (
-    <div className={twJoin("bbn-list-item", `bbn-list-item-${orientation}`, className)}>
+    <div
+      className={twJoin(
+        newDesign ? "bbn-list-item-new-design" : "bbn-list-item",
+        `bbn-list-item-${orientation}`,
+        className,
+      )}
+    >
       <Text
         as="div"
-        className={twJoin("bbn-list-title", `bbn-list-title-${orientation}`)}
+        className={twJoin(newDesign ? "bbn-list-title-new-design" : "bbn-list-title", `bbn-list-title-${orientation}`)}
         variant={orientation === "horizontal" ? "body1" : "body2"}
       >
         {title}
       </Text>
 
-      <Text as="div" className={twJoin("bbn-list-value", `bbn-list-value-${orientation}`)} variant="body1">
+      <Text
+        as="div"
+        className={twJoin(newDesign ? "bbn-list-value-new-design" : "bbn-list-value", `bbn-list-value-${orientation}`)}
+        variant="body1"
+      >
         {value}
         {suffix}
       </Text>