From 39e86cfa806bee1ea2e702403c5510719e2a0a88 Mon Sep 17 00:00:00 2001
From: Haider Alshamma <haidera@nulogy.com>
Date: Mon, 2 Oct 2023 13:55:49 -0400
Subject: [PATCH] feat: create Stack component

---
 src/Stack/Stack.story.tsx | 47 +++++++++++++++++++++++++++++++++++++++
 src/Stack/Stack.tsx       | 44 ++++++++++++++++++++++++++++++++++++
 src/Stack/index.ts        |  1 +
 src/index.ts              |  1 +
 4 files changed, 93 insertions(+)
 create mode 100644 src/Stack/Stack.story.tsx
 create mode 100644 src/Stack/Stack.tsx
 create mode 100644 src/Stack/index.ts

diff --git a/src/Stack/Stack.story.tsx b/src/Stack/Stack.story.tsx
new file mode 100644
index 000000000..4c5daab41
--- /dev/null
+++ b/src/Stack/Stack.story.tsx
@@ -0,0 +1,47 @@
+import React from "react";
+import { select } from "@storybook/addon-knobs";
+import { Box } from "../Box";
+import { Stack } from ".";
+import { Divider } from "../Divider";
+
+export default {
+  title: "Components/Stack",
+  component: Stack,
+};
+
+const widths = {
+  small: "191px",
+  medium: "351px",
+  large: "432px",
+};
+
+const Rectangle = ({ width }: { width: keyof typeof widths }) => (
+  <Box height="100px" width={widths[width]} bg="#85EB8B" />
+);
+
+export const Default = () => (
+  <Stack>
+    <Rectangle width="medium" />
+    <Rectangle width="large" />
+    <Rectangle width="small" />
+  </Stack>
+);
+
+export const WithAlignment = () => {
+  return (
+    <Stack alignment="right">
+      <Rectangle width="medium" />
+      <Rectangle width="large" />
+      <Rectangle width="small" />
+    </Stack>
+  );
+};
+export const WithNDSDivider = () => {
+  return (
+    <Stack alignment="right">
+      <Rectangle width="medium" />
+      <Rectangle width="large" />
+      <Rectangle width="small" />
+    </Stack>
+  );
+};
diff --git a/src/Stack/Stack.tsx b/src/Stack/Stack.tsx
new file mode 100644
index 000000000..53a5ac947
--- /dev/null
+++ b/src/Stack/Stack.tsx
@@ -0,0 +1,44 @@
+import React, { CSSProperties, ReactNode } from "react";
+import { Box, Divider } from "../index";
+import { Flex } from "../Flex";
+
+type StackRef = HTMLDivElement;
+
+type Alignment = "left" | "center" | "right";
+
+const flexAlignment: Record<Alignment, CSSProperties["alignItems"]> = {
+  left: "flex-start",
+  center: "center",
+  right: "flex-end",
+};
+
+type StackProps = {
+  children?: React.ReactNode;
+  alignment?: Alignment;
+  space?: CSSProperties["gap"];
+  showDivider?: boolean;
+  renderDivider?: () => ReactNode;
+};
+
+export const Stack = React.forwardRef<StackRef, StackProps>(
+  ({ children, showDivider, renderDivider = () => <Divider width="100%" />, space, alignment }, ref) => (
+    <Flex gap={space} flexDirection="column" alignItems={flexAlignment[alignment]} ref={ref}>
+      {showDivider
+        ? React.Children.map(children, (child, index) => {
+            if (index > 0) {
+              return (
+                <>
+                  {renderDivider(index)}
+                  {child}
+                </>
+              );
+            }
+
+            return child;
+          })
+        : children}
+    </Flex>
+  )
+);
+
+export default Stack;
diff --git a/src/Stack/index.ts b/src/Stack/index.ts
new file mode 100644
index 000000000..35b438560
--- /dev/null
+++ b/src/Stack/index.ts
@@ -0,0 +1 @@
+export { default as Stack } from "./Stack";
diff --git a/src/index.ts b/src/index.ts
index 6c52581aa..8d1f44e2d 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -84,3 +84,4 @@ export { Heading1, Heading2, Heading3, Heading4, Text } from "./Type";
 export type { TextProps } from "./Type";
 export { useWindowDimensions } from "./utils";
 export { InlineValidation } from "./Validation";
+export { Stack } from "./Stack";