From 2573ea91d3323a466a2e0f71fc9e8fc7ce41c86e Mon Sep 17 00:00:00 2001
From: Gareth Jones <gareth@clickhouse.com>
Date: Thu, 4 Jan 2024 08:49:33 -0500
Subject: [PATCH] Adding stretch to the align items options (#290)

* Adding stretch to the align items options

* Adding docs for container

* Removing unused prop.

* Updating example min and maxWidth

* Adding Layout section of navigation

* Fixing lint error.
---
 .storybook/preview.tsx                        |   1 +
 .../Container/Container.stories.tsx           | 103 ++++++++++++++++++
 src/components/Container/Container.tsx        |   2 +-
 3 files changed, 105 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Container/Container.stories.tsx

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index dc9d619c..70611c34 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -64,6 +64,7 @@ const preview: Preview = {
           "Introduction",
           "Buttons",
           "Cards",
+          "Layout",
           "Forms",
           "Display",
           "Sidebar",
diff --git a/src/components/Container/Container.stories.tsx b/src/components/Container/Container.stories.tsx
new file mode 100644
index 00000000..4713818c
--- /dev/null
+++ b/src/components/Container/Container.stories.tsx
@@ -0,0 +1,103 @@
+import { Container } from "./Container";
+import { Text } from "..";
+import styled from "styled-components";
+
+const GridCenter = styled.div`
+  display: grid;
+  place-items: center;
+  width: 100%;
+  height: 100%;
+`;
+
+const ContainerExample = ({ ...props }) => {
+  return (
+    <GridCenter>
+      <Container
+        {...props}
+        style={{ border: "1px solid grey" }}
+      >
+        <Text>Parent container</Text>
+        <Container
+          {...props}
+          style={{ border: "1px solid grey" }}
+        >
+          <Text>Child</Text>
+        </Container>
+        <Container
+          {...props}
+          style={{ border: "1px solid grey" }}
+        >
+          <Text>Child</Text>
+        </Container>
+        <Container
+          {...props}
+          style={{ border: "1px solid grey" }}
+        >
+          <Text>Child</Text>
+        </Container>
+      </Container>
+    </GridCenter>
+  );
+};
+
+export default {
+  component: ContainerExample,
+  title: "Layout/Container",
+  tags: ["container", "autodocs"],
+  argTypes: {
+    alignItems: { control: "select", options: ["start", "center", "end", "stretch"] },
+    fillWidth: { control: "boolean" },
+    gap: {
+      control: "select",
+      options: ["none", "xxs", "xs", "sm", "md", "lg", "xl", "xxl"],
+    },
+    grow: {
+      control: "select",
+      options: ["0", "1", "2", "3", "4", "5", "6"],
+    },
+    shrink: {
+      control: "select",
+      options: ["0", "1", "2", "3", "4", "5", "6"],
+    },
+    isResponsive: { control: "boolean" },
+    justifyContent: {
+      control: "select",
+      options: [
+        "center",
+        "space-between",
+        "space-around",
+        "space-evenly",
+        "start",
+        "end",
+        "left",
+        "right",
+      ],
+    },
+    orientation: { control: "radio", options: ["horizontal", "vertical"] },
+    padding: {
+      control: "select",
+      options: ["none", "xxs", "xs", "sm", "md", "lg", "xl", "xxl"],
+    },
+    wrap: {
+      control: "select",
+      options: ["nowrap", "wrap", "wrap-reverse"],
+    },
+  },
+};
+
+export const Playground = {
+  args: {
+    alignItems: "center",
+    fillWidth: false,
+    gap: "none",
+    grow: "0",
+    isResponsive: true,
+    justifyContent: "start",
+    maxWidth: "auto",
+    minWidth: "auto",
+    orientation: "horizontal",
+    padding: "none",
+    shrink: "0",
+    wrap: "nowrap",
+  },
+};
diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx
index ffa6baa1..be2e67d1 100644
--- a/src/components/Container/Container.tsx
+++ b/src/components/Container/Container.tsx
@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { HTMLAttributes } from "react";
 import { Orientation } from "@/components";
 
-type AlignItemsOptions = "start" | "center" | "end";
+type AlignItemsOptions = "start" | "center" | "end" | "stretch";
 type GapOptions = "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 type GrowShrinkOptions = "0" | "1" | "2" | "3" | "4" | "5" | "6";
 type JustifyContentOptions =