Merge pull request #77 from aversini/fix(Flexgrid)-align-items-and-ju…

…stify-content-should-support-normal- fix(Flexgrid): align-items and justify-content should support "normal"
versini-org · Nov 25, 2023 · 32033a8 · 32033a8
2 parents e617030 + 7ffc27e
commit 32033a8
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 11 deletions.
diff --git a/packages/documentation/src/stories/Flexgrid.stories.tsx b/packages/documentation/src/stories/Flexgrid.stories.tsx
@@ -1,5 +1,11 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Flexgrid, FlexgridItem } from "@versini/ui-components";
+import {
+	Button,
+	Flexgrid,
+	FlexgridItem,
+	Main,
+	TextInput,
+} from "@versini/ui-components";
 
 const meta: Meta<typeof Flexgrid> = {
 	component: Flexgrid,
@@ -10,8 +16,8 @@ const meta: Meta<typeof Flexgrid> = {
 		className: "",
 		rowGap: 1,
 		columnGap: 1,
-		alignHorizontal: "flex-start",
-		alignVertical: "flex-start",
+		alignHorizontal: "normal",
+		alignVertical: "normal",
 		direction: "row",
 	},
 	argTypes: {
@@ -31,6 +37,7 @@ const meta: Meta<typeof Flexgrid> = {
 		alignHorizontal: {
 			control: "radio",
 			options: [
+				"normal",
 				"flex-start",
 				"center",
 				"flex-end",
@@ -41,7 +48,14 @@ const meta: Meta<typeof Flexgrid> = {
 		},
 		alignVertical: {
 			control: "radio",
-			options: ["flex-start", "center", "flex-end", "stretch", "baseline"],
+			options: [
+				"normal",
+				"flex-start",
+				"center",
+				"flex-end",
+				"stretch",
+				"baseline",
+			],
 		},
 	},
 };
@@ -144,8 +158,6 @@ export const Basic: Story = {
 
 export const Interactive: Story = {
 	args: {
-		alignHorizontal: "flex-start",
-		alignVertical: "flex-start",
 		height: "auto",
 	},
 	render: (args) => (
@@ -191,3 +203,32 @@ export const Interactive: Story = {
 		</>
 	),
 };
+
+export const WithLoginForm: Story = {
+	render: (args) => (
+		<Main>
+			<form
+			//className="mx-auto flex w-96 flex-col flex-wrap"
+			>
+				<Flexgrid
+					{...args}
+					// direction="column" className="mx-auto w-96"
+				>
+					<FlexgridItem>
+						<TextInput
+							type="password"
+							name="password"
+							label="Enter your password here"
+						/>
+					</FlexgridItem>
+
+					<FlexgridItem>
+						<Button noBorder type="submit" className="mb-4 mt-6">
+							Log in
+						</Button>
+					</FlexgridItem>
+				</Flexgrid>
+			</form>
+		</Main>
+	),
+};
diff --git a/packages/ui-components/src/components/Flexgrid/Flexgrid.tsx b/packages/ui-components/src/components/Flexgrid/Flexgrid.tsx
@@ -13,8 +13,8 @@ export const Flexgrid = ({
 	width = "auto",
 
 	direction = "row",
-	alignHorizontal = "flex-start",
-	alignVertical = "flex-start",
+	alignHorizontal = "normal",
+	alignVertical = "normal",
 
 	...otherProps
 }: FlexgridProps) => {

diff --git a/packages/ui-components/src/components/Flexgrid/FlexgridTypes.d.ts b/packages/ui-components/src/components/Flexgrid/FlexgridTypes.d.ts
@@ -9,6 +9,7 @@ export type FlexgridProps = {
 	 * the alignment along the main axis (horizontal).
 	 */
 	alignHorizontal?:
+		| "normal"
 		| "flex-start"
 		| "center"
 		| "flex-end"
@@ -20,7 +21,13 @@ export type FlexgridProps = {
 	 * Equivalent to "align-items" in flexbox, this prop defines
 	 * the alignment along the cross axis (vertical).
 	 */
-	alignVertical?: "flex-start" | "center" | "flex-end" | "stretch" | "baseline";
+	alignVertical?:
+		| "normal"
+		| "flex-start"
+		| "center"
+		| "flex-end"
+		| "stretch"
+		| "baseline";
 
 	/**
 	 * The class name of the Flexgrid.

diff --git a/packages/ui-components/src/components/Flexgrid/__tests__/Flexgrid.test.tsx b/packages/ui-components/src/components/Flexgrid/__tests__/Flexgrid.test.tsx
@@ -18,8 +18,8 @@ describe("Flexgrid default rules", () => {
 		const gridRoot = await screen.findByTestId("grid-1");
 		expectToHaveStyles(gridRoot, {
 			"flex-direction": "row",
-			"justify-content": "flex-start",
-			"align-items": "flex-start",
+			"justify-content": "normal",
+			"align-items": "normal",
 		});
 		expectToHaveClasses(gridRoot, ["box-border", "flex", "flex-wrap"]);
 	});