@xhsreds/reds-rn-next 0.1.2 → 0.1.4

package/src/components/Button/test/__snapshots__/index.test.tsx.snap

@@ -46,7 +46,6 @@ exports[`Button Component > applies the correct styles for shape circle 1`] = `
         "backgroundColor": "rgba(255, 255, 255, 1)",
         "borderColor": "rgba(0, 0, 0, 0.2)",
       },
-      {},
     ]
   }
 >
@@ -115,7 +114,6 @@ exports[`Button Component > applies the correct styles for shape circle left ico
         "backgroundColor": "rgba(255, 255, 255, 1)",
         "borderColor": "rgba(0, 0, 0, 0.2)",
       },
-      {},
     ]
   }
 >
@@ -260,7 +258,6 @@ exports[`Button Component > applies the correct styles for shape circle right ic
         "backgroundColor": "rgba(255, 255, 255, 1)",
         "borderColor": "rgba(0, 0, 0, 0.2)",
       },
-      {},
     ]
   }
 >
@@ -407,7 +404,6 @@ exports[`Button Component > applies the correct styles for shape ghost 1`] = `
         "backgroundColor": "rgba(255, 255, 255, 0.08)",
         "borderColor": "rgba(0, 0, 0, 0.62)",
       },
-      {},
     ]
   }
 >
@@ -478,7 +474,6 @@ exports[`Button Component > applies the correct styles for shape outline 1`] = `
         "backgroundColor": "transparent",
         "borderColor": "rgba(0, 0, 0, 0.62)",
       },
-      {},
     ]
   }
 >
@@ -549,7 +544,6 @@ exports[`Button Component > applies the correct styles for shape text 1`] = `
         "backgroundColor": "transparent",
         "borderColor": "transparent",
       },
-      {},
     ]
   }
 >
@@ -620,7 +614,6 @@ exports[`Button Component > applies the correct styles for size 1`] = `
         "backgroundColor": "rgba(255, 255, 255, 1)",
         "borderColor": "rgba(0, 0, 0, 0.2)",
       },
-      {},
     ]
   }
 >
@@ -691,7 +684,6 @@ exports[`Button Component > applies the correct styles for variant fill 1`] = `
         "backgroundColor": "rgba(255, 36, 66, 1)",
         "borderColor": "rgba(255, 36, 66, 1)",
       },
-      {},
     ]
   }
 >
@@ -761,7 +753,6 @@ exports[`Button Component > applies the correct styles when block is true 1`] =
         "backgroundColor": "rgba(255, 255, 255, 1)",
         "borderColor": "rgba(0, 0, 0, 0.2)",
       },
-      {},
       {
         "width": "100%",
       },
@@ -834,7 +825,6 @@ exports[`Button Component > applies the correct styles when disabled is true 1`]
         "backgroundColor": "rgba(255, 255, 255, 1)",
         "borderColor": "rgba(0, 0, 0, 0.2)",
       },
-      {},
       {
         "opacity": 0.3,
       },

package/src/components/Divider/test/__snapshots__/index.test.tsx.snap

@@ -1,6 +1,101 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`Divider Component > applies custom styles based on size prop 1`] = `
+<View
+  style={
+    [
+      {
+        "position": "relative",
+      },
+      {
+        "color": "rgba(0, 0, 0, 0.45)",
+        "fontSize": 12,
+        "fontWeight": "400",
+      },
+    ]
+  }
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "center",
+        "backgroundColor": "#fff",
+        "flexDirection": "row",
+        "left": undefined,
+        "lineHeight": 18,
+        "paddingHorizontal": 16,
+        "paddingVertical": 0,
+        "position": "absolute",
+        "right": undefined,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "borderColor": "rgba(0, 0, 0, 0.2)",
+          "borderStyle": "solid",
+          "borderTopWidth": 0.5,
+          "marginRight": 8,
+          "width": 12,
+        }
+      }
+    />
+    <Text
+      style={
+        {
+          "color": "rgba(0, 0, 0, 0.45)",
+          "fontSize": 12,
+          "fontWeight": "400",
+        }
+      }
+    >
+      Divider
+    </Text>
+    <View
+      style={
+        {
+          "borderColor": "rgba(0, 0, 0, 0.2)",
+          "borderStyle": "solid",
+          "borderTopWidth": 0.5,
+          "marginLeft": 8,
+          "width": 12,
+        }
+      }
+    />
+  </View>
+</View>
+`;
+
+exports[`Divider Component > applies the correct styles based on custom border number 1`] = `
+<View
+  style={
+    [
+      {
+        "position": "relative",
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Divider Component > applies the correct styles based on custom margin 1`] = `
+<View
+  style={
+    [
+      {
+        "position": "relative",
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Divider Component > applies the correct styles based on custom size 1`] = `
 <View
   style={
     [
@@ -33,7 +128,37 @@ exports[`Divider Component > applies the correct styles for direction 1`] = `
       },
     ]
   }
-/>
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "center",
+        "backgroundColor": "#fff",
+        "flexDirection": "row",
+        "left": undefined,
+        "lineHeight": 18,
+        "paddingHorizontal": 16,
+        "paddingVertical": 0,
+        "position": "absolute",
+        "right": undefined,
+        "top": -9,
+      }
+    }
+  >
+    <Text
+      style={
+        {
+          "color": "rgba(0, 0, 0, 0.45)",
+          "fontSize": 12,
+          "fontWeight": "400",
+        }
+      }
+    >
+      Divider
+    </Text>
+  </View>
+</View>
 `;
 
 exports[`Divider Component > applies the correct styles for direction 2`] = `
@@ -74,7 +199,59 @@ exports[`Divider Component > applies the correct styles for direction 3`] = `
       },
     ]
   }
-/>
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "center",
+        "backgroundColor": "#fff",
+        "flexDirection": "row",
+        "left": undefined,
+        "lineHeight": 18,
+        "paddingHorizontal": 16,
+        "paddingVertical": 0,
+        "position": "absolute",
+        "right": undefined,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "borderColor": "rgba(0, 0, 0, 0.2)",
+          "borderStyle": "solid",
+          "borderTopWidth": 0.5,
+          "marginRight": 8,
+          "width": 12,
+        }
+      }
+    />
+    <Text
+      style={
+        {
+          "color": "rgba(0, 0, 0, 0.45)",
+          "fontSize": 12,
+          "fontWeight": "400",
+        }
+      }
+    >
+      Divider
+    </Text>
+    <View
+      style={
+        {
+          "borderColor": "rgba(0, 0, 0, 0.2)",
+          "borderStyle": "solid",
+          "borderTopWidth": 0.5,
+          "marginLeft": 8,
+          "width": 12,
+        }
+      }
+    />
+  </View>
+</View>
 `;
 
 exports[`Divider Component > applies the correct styles for direction 4`] = `
@@ -91,7 +268,59 @@ exports[`Divider Component > applies the correct styles for direction 4`] = `
       },
     ]
   }
-/>
+>
+  <View
+    style={
+      {
+        "alignItems": "center",
+        "alignSelf": "center",
+        "backgroundColor": "#fff",
+        "flexDirection": "row",
+        "left": undefined,
+        "lineHeight": 18,
+        "paddingHorizontal": 16,
+        "paddingVertical": 0,
+        "position": "absolute",
+        "right": undefined,
+        "top": 0,
+      }
+    }
+  >
+    <View
+      style={
+        {
+          "borderColor": "rgba(51, 51, 51, .3)",
+          "borderStyle": "solid",
+          "borderTopWidth": 0.5,
+          "marginRight": 8,
+          "width": 12,
+        }
+      }
+    />
+    <Text
+      style={
+        {
+          "color": "rgba(51, 51, 51, .3)",
+          "fontSize": 12,
+          "fontWeight": "400",
+        }
+      }
+    >
+      Divider
+    </Text>
+    <View
+      style={
+        {
+          "borderColor": "rgba(51, 51, 51, .3)",
+          "borderStyle": "solid",
+          "borderTopWidth": 0.5,
+          "marginLeft": 8,
+          "width": 12,
+        }
+      }
+    />
+  </View>
+</View>
 `;
 
 exports[`Divider Component > applies the correct styles for orientation 1`] = `
@@ -101,7 +330,11 @@ exports[`Divider Component > applies the correct styles for orientation 1`] = `
       {
         "position": "relative",
       },
-      undefined,
+      {
+        "color": "rgba(0, 0, 0, 0.45)",
+        "fontSize": 12,
+        "fontWeight": "400",
+      },
     ]
   }
 >
@@ -122,6 +355,17 @@ exports[`Divider Component > applies the correct styles for orientation 1`] = `
       }
     }
   >
+    <View
+      style={
+        {
+          "borderColor": "rgba(0, 0, 0, 0.2)",
+          "borderStyle": "solid",
+          "borderTopWidth": 0.5,
+          "marginRight": 8,
+          "width": 12,
+        }
+      }
+    />
     <Text
       style={
         {
@@ -133,6 +377,17 @@ exports[`Divider Component > applies the correct styles for orientation 1`] = `
     >
       Divider
     </Text>
+    <View
+      style={
+        {
+          "borderColor": "rgba(0, 0, 0, 0.2)",
+          "borderStyle": "solid",
+          "borderTopWidth": 0.5,
+          "marginLeft": 8,
+          "width": 12,
+        }
+      }
+    />
   </View>
 </View>
 `;
@@ -144,7 +399,11 @@ exports[`Divider Component > applies the correct styles for orientation 2`] = `
       {
         "position": "relative",
       },
-      undefined,
+      {
+        "color": "rgba(0, 0, 0, 0.45)",
+        "fontSize": 12,
+        "fontWeight": "400",
+      },
     ]
   }
 >
@@ -165,6 +424,17 @@ exports[`Divider Component > applies the correct styles for orientation 2`] = `
       }
     }
   >
+    <View
+      style={
+        {
+          "borderColor": "rgba(0, 0, 0, 0.2)",
+          "borderStyle": "solid",
+          "borderTopWidth": 0.5,
+          "marginRight": 8,
+          "width": 12,
+        }
+      }
+    />
     <Text
       style={
         {
@@ -176,6 +446,17 @@ exports[`Divider Component > applies the correct styles for orientation 2`] = `
     >
       Divider
     </Text>
+    <View
+      style={
+        {
+          "borderColor": "rgba(0, 0, 0, 0.2)",
+          "borderStyle": "solid",
+          "borderTopWidth": 0.5,
+          "marginLeft": 8,
+          "width": 12,
+        }
+      }
+    />
   </View>
 </View>
 `;
@@ -187,7 +468,11 @@ exports[`Divider Component > applies the correct styles for orientation 3`] = `
       {
         "position": "relative",
       },
-      undefined,
+      {
+        "color": "rgba(0, 0, 0, 0.45)",
+        "fontSize": 12,
+        "fontWeight": "400",
+      },
     ]
   }
 >
@@ -208,6 +493,17 @@ exports[`Divider Component > applies the correct styles for orientation 3`] = `
       }
     }
   >
+    <View
+      style={
+        {
+          "borderColor": "rgba(0, 0, 0, 0.2)",
+          "borderStyle": "solid",
+          "borderTopWidth": 0.5,
+          "marginRight": 8,
+          "width": 12,
+        }
+      }
+    />
     <Text
       style={
         {
@@ -219,6 +515,124 @@ exports[`Divider Component > applies the correct styles for orientation 3`] = `
     >
       Divider
     </Text>
+    <View
+      style={
+        {
+          "borderColor": "rgba(0, 0, 0, 0.2)",
+          "borderStyle": "solid",
+          "borderTopWidth": 0.5,
+          "marginLeft": 8,
+          "width": 12,
+        }
+      }
+    />
   </View>
 </View>
 `;
+
+exports[`Divider Component > renders correctly with custom color 1`] = `
+<View
+  style={
+    [
+      {
+        "position": "relative",
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Divider Component > renders correctly with default props 1`] = `
+<View
+  style={
+    [
+      {
+        "position": "relative",
+      },
+      undefined,
+    ]
+  }
+/>
+`;
+
+exports[`Divider Component > renders correctly with horizontal direction 1`] = `
+<View
+  style={
+    [
+      {
+        "position": "relative",
+      },
+      {
+        "borderBottomColor": "rgba(0, 0, 0, 0.2)",
+        "borderBottomWidth": 0.5,
+        "borderLeftColor": undefined,
+        "borderLeftWidth": 0,
+        "borderStyle": "solid",
+        "marginHorizontal": 0,
+        "marginVertical": 20,
+        "position": "relative",
+        "width": undefined,
+      },
+    ]
+  }
+/>
+`;
+
+exports[`Divider Component > renders correctly with primary direction 1`] = `
+<View
+  style={
+    [
+      {
+        "position": "relative",
+      },
+      {
+        "color": "rgba(0, 0, 0, 0.45)",
+        "fontSize": 12,
+        "fontWeight": "400",
+      },
+    ]
+  }
+/>
+`;
+
+exports[`Divider Component > renders correctly with secondary direction 1`] = `
+<View
+  style={
+    [
+      {
+        "position": "relative",
+      },
+      {
+        "color": "rgba(51, 51, 51, .3)",
+        "fontSize": 12,
+        "fontWeight": "400",
+      },
+    ]
+  }
+/>
+`;
+
+exports[`Divider Component > renders correctly with vertical direction 1`] = `
+<View
+  style={
+    [
+      {
+        "position": "relative",
+      },
+      {
+        "borderBottomColor": undefined,
+        "borderBottomWidth": 0,
+        "borderLeftColor": "rgba(0, 0, 0, 0.2)",
+        "borderLeftWidth": 0.5,
+        "borderStyle": "solid",
+        "height": 18,
+        "marginHorizontal": 12,
+        "marginVertical": 0,
+        "position": "relative",
+        "width": "auto",
+      },
+    ]
+  }
+/>
+`;

package/src/components/Divider/test/index.test.tsx

@@ -1,58 +1,66 @@
 import React from "react";
 import { render } from "@testing-library/react-native";
 import { describe, it, expect } from "vitest";
-import Divider from "../index";
-import { lightColor } from "@xhs/reds-token-next";
+import Divider from "../Divider";
 
 describe("Divider Component", () => {
   it("renders correctly with default props", () => {
-    const { getByText } = render(<Divider>Default Divider</Divider>);
-    expect(getByText("Default Divider")).toBeTruthy();
+    const { toJSON } = render(<Divider />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly with horizontal direction", () => {
+    const { toJSON } = render(<Divider direction="horizontal" />);
+    expect(toJSON()).toMatchSnapshot();
   });
 
-  it("applies the correct styles for direction", () => {
-    const directions = ["horizontal", "vertical", "primary", "secondary"];
-    directions.forEach((direction) => {
-      const { toJSON } = render(<Divider direction={direction as any}>Divider</Divider>);
-      expect(toJSON()).toMatchSnapshot();
-    });
+  it("renders correctly with vertical direction", () => {
+    const { toJSON } = render(<Divider direction="vertical" />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+
+  it("renders correctly with primary direction", () => {
+    const { toJSON } = render(<Divider direction="primary" />);
+    expect(toJSON()).toMatchSnapshot();
   });
 
-  it("applies the correct styles for orientation", () => {
-    const orientations = ["left", "center", "right"];
-    orientations.forEach((orientation) => {
-      const { toJSON } = render(<Divider orientation={orientation as any}>Divider</Divider>);
-      expect(toJSON()).toMatchSnapshot();
-    });
+  it("renders correctly with secondary direction", () => {
+    const { toJSON } = render(<Divider direction="secondary" />);
+    expect(toJSON()).toMatchSnapshot();
   });
 
-  it("applies custom styles based on size prop", () => {
-    const size = 5;
-    const { toJSON } = render(<Divider size={size}>Divider</Divider>);
+  it("renders correctly with custom color", () => {
+    const { toJSON } = render(<Divider color="red" />);
     expect(toJSON()).toMatchSnapshot();
   });
 
-  it("does not show text slot when direction is vertical", () => {
-    const { queryByText } = render(<Divider direction="vertical">Vertical Divider</Divider>);
-    const text = queryByText("Vertical Divider");
-    expect(text).toBeNull();
+  it("renders correctly with left orientation", () => {
+    const { getByText } = render(<Divider orientation="left">Left Oriented Text</Divider>);
+    expect(getByText("Left Oriented Text")).toBeTruthy();
+  });
+
+  it("renders correctly with center orientation", () => {
+    const { getByText } = render(<Divider orientation="center">Center Oriented Text</Divider>);
+    expect(getByText("Center Oriented Text")).toBeTruthy();
+  });
+
+  it("renders correctly with right orientation", () => {
+    const { getByText } = render(<Divider orientation="right">Right Oriented Text</Divider>);
+    expect(getByText("Right Oriented Text")).toBeTruthy();
   });
 
-  it("renders text slot when direction is horizontal", () => {
-    const { getByText } = render(<Divider direction="horizontal">Horizontal Divider</Divider>);
-    const text = getByText("Horizontal Divider");
-    expect(text).toBeTruthy();
+  it("applies the correct styles based on custom margin", () => {
+    const { toJSON } = render(<Divider margin={[10, 20]} />);
+    expect(toJSON()).toMatchSnapshot();
   });
 
-  it("renders correctly with both text and primary direction", () => {
-    const { getByText } = render(<Divider direction="primary">Primary Divider</Divider>);
-    const text = getByText("Primary Divider");
-    expect(text).toBeTruthy();
+  it("applies the correct styles based on custom size", () => {
+    const { toJSON } = render(<Divider size={50} />);
+    expect(toJSON()).toMatchSnapshot();
   });
 
-  it("renders correctly with both text and secondary direction", () => {
-    const { getByText } = render(<Divider direction="secondary">Secondary Divider</Divider>);
-    const text = getByText("Secondary Divider");
-    expect(text).toBeTruthy();
+  it("applies the correct styles based on custom border number", () => {
+    const { toJSON } = render(<Divider stroke={2} />);
+    expect(toJSON()).toMatchSnapshot();
   });
 });

package/src/components/FAB/test/__snapshots__/index.test.tsx.snap

@@ -70,7 +70,6 @@ exports[`FAB Component > should apply position styles correctly 1`] = `
           "backgroundColor": "rgba(255, 36, 66, 1)",
           "borderColor": "rgba(255, 36, 66, 1)",
         },
-        {},
       ]
     }
   >
@@ -168,7 +167,6 @@ exports[`FAB Component > should update boxWidth on layout change 1`] = `
           "backgroundColor": "rgba(255, 36, 66, 1)",
           "borderColor": "rgba(255, 36, 66, 1)",
         },
-        {},
       ]
     }
   >