Merge pull request #336 from aversini/responsive-flexgrid

feat(Flexgrid): adding responsive capabilities

packages/documentation/.ladle/config.mjs

@@ -1,7 +1,6 @@
 /** @type {import('@ladle/react').UserConfig} */
 
 export default {
-	port: 8080,
 	defaultStory: "getting-started--overview",
 	storyOrder: [
 		"getting-started--overview",

packages/documentation/src/Components/Flexgrid.stories.tsx

@@ -1,10 +1,13 @@
 import type { Story } from "@ladle/react";
 import {
-	Button,
+	Card,
 	Flexgrid,
 	FlexgridItem,
-	Main,
-	TextInput,
+	Table,
+	TableBody,
+	TableCell,
+	TableHead,
+	TableRow,
 } from "@versini/ui-components";
 
 export default {
@@ -120,12 +123,12 @@ export const Basic: Story<any> = (args) => (
 				</div>
 			</Container>
 		</FlexgridItem>
-		<FlexgridItem span={2} />
-		<FlexgridItem span={3}>
+		<FlexgridItem span={1} />
+		<FlexgridItem span={4}>
 			<Container aria-label="item 8">
 				item 8
 				<div>
-					<small>(starts col 10, spans 3 cols)</small>
+					<small>(starts col 9, spans 4 cols)</small>
 				</div>
 			</Container>
 		</FlexgridItem>
@@ -185,24 +188,46 @@ Interactive.args = {
 	height: "auto",
 };
 
-export const WithLoginForm: Story<any> = (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"
-					/>
-				</FlexgridItem>
+export const Responsive: Story<any> = (args) => {
+	const data = [
+		{ id: 0, prefix: "fallback", minwidth: "0px" },
+		{ id: 1, prefix: "sm", minwidth: "640px" },
+		{ id: 2, prefix: "md", minwidth: "768px" },
+		{ id: 3, prefix: "lg", minwidth: "1024px" },
+		{ id: 4, prefix: "xl", minwidth: "1280px" },
+		{ id: 5, prefix: "s2xlm", minwidth: "1536px" },
+	];
+	const intro = `FlexgridItem span prop can be configured with multiple breakpoints. Instead of using a single number, an object can be passed with the following keys:`;
 
-				<FlexgridItem>
-					<Button noBorder type="submit" className="mb-4 mt-6">
-						Log in
-					</Button>
+	const example = `For example, { fallback: 12, sm: 6, md: 8 } sizes a component to occupy half of its container width (6 columns) when viewport width is between 641 and 769 pixels. Above 769 pixels, it occupies a 2 third of its container (8 columns). For smaller viewports (fallback), the component fills all 12 available columns.`;
+	return (
+		<>
+			<p className="text-copy-lighter">{intro}</p>
+			<Table kind="light" spacing={{ t: 2, b: 2 }}>
+				<TableHead>
+					<TableRow>
+						<TableCell>Breakpoint prefix</TableCell>
+						<TableCell>Minimum width</TableCell>
+					</TableRow>
+				</TableHead>
+
+				<TableBody>
+					{data.map((row) => (
+						<TableRow key={row.id}>
+							<TableCell>{row.prefix}</TableCell>
+							<TableCell>{row.minwidth}</TableCell>
+						</TableRow>
+					))}
+				</TableBody>
+			</Table>
+			<p className="text-copy-lighter">{example}</p>
+			<Flexgrid {...args}>
+				<FlexgridItem span={{ fallback: 12, sm: 6, md: 8 }}>
+					<Card spacing={{ t: 2 }}>
+						<p className="text-center">Responsive Card</p>
+					</Card>
 				</FlexgridItem>
 			</Flexgrid>
-		</form>
-	</Main>
-);
+		</>
+	);
+};

packages/documentation/src/GettingStarted/overview.stories.mdx

@@ -12,7 +12,7 @@ import {
 # UI Components
 
 <Flexgrid alignVertical="center">
-	<FlexgridItem span={6}>
+	<FlexgridItem span={{fallback:12 , lg: 6}}>
 		> UI Components provides a strong, responsive, and accessible library of
 		foundational React components.
 
@@ -26,15 +26,15 @@ import {
     </ButtonIcon>
 
   </FlexgridItem>
-  <FlexgridItem>
+  <FlexgridItem span={{fallback:12 , lg: 6}}>
 		<img
 			className="mt-5"
 			src="hero-14.jpg"
 			alt="An illustration of web page rendered on both desktop and mobile devices."
 			title="Hero image of a web page rendered on both desktop and mobile devices."
-			height={400}
-			width={400}
-		/>
+
+    	/>
+
   </FlexgridItem>
 </Flexgrid>
 

packages/ui-components/bundlesize.config.js

@@ -11,7 +11,7 @@ export default {
 		},
 		{
 			path: `${bundlePath}/assets/index.js`,
-			limit: "19 KB",
+			limit: "20 KB",
 		},
 		{
 			path: `${bundlePath}/assets/vendor.js`,

packages/ui-components/src/components/Flexgrid/FlexgridItem.tsx

@@ -1,13 +1,9 @@
-import clsx from "clsx";
 import { useContext } from "react";
 
-import {
-	FLEXGRID_GAP_RATIO,
-	FLEXGRID_ITEM_CLASSNAME,
-} from "../../common/constants";
+import { FLEXGRID_GAP_RATIO } from "../../common/constants";
 import { FlexgridContext } from "./FlexgridContext";
 import type { FlexgridItemProps } from "./FlexgridTypes";
-import { getBasis } from "./utilities";
+import { getFlexItemClasses } from "./utilities";
 
 /**
  * FlexgridItem is a child of Flexgrid. It is used to define the width of a
@@ -21,16 +17,15 @@ export const FlexgridItem = ({
 	...otherProps
 }: FlexgridItemProps) => {
 	const { columnGap, rowGap } = useContext(FlexgridContext);
+
 	const cssRoot = {
-		...getBasis(span),
 		paddingLeft: columnGap * FLEXGRID_GAP_RATIO + "rem",
 		paddingTop: rowGap * FLEXGRID_GAP_RATIO + "rem",
 	};
-	const flexgridItemClassName = clsx(
+	const flexgridItemClassName = getFlexItemClasses({
 		className,
-		FLEXGRID_ITEM_CLASSNAME,
-		"box-border",
-	);
+		span,
+	});
 
 	return (
 		<div className={flexgridItemClassName} style={cssRoot} {...otherProps}>

packages/ui-components/src/components/Flexgrid/FlexgridTypes.d.ts

@@ -80,5 +80,14 @@ export type FlexgridItemProps = {
 	className?: string;
 
 	/** The item will span across the provided number of grid tracks. */
-	span?: number | "auto";
+	span?:
+		| number
+		| "auto"
+		| {
+				fallback?: number;
+				lg?: number;
+				md?: number;
+				sm?: number;
+				xl?: number;
+		  };
 };

packages/ui-components/src/components/Flexgrid/__tests__/FlexgridItem.test.tsx

@@ -23,6 +23,7 @@ describe("FlexgridItem (exceptions)", () => {
 			"padding-left": "0px",
 			"padding-top": "0px",
 		});
+		expectToHaveClasses(gridCellRoot, ["box-border", "basis-auto"]);
 	});
 });
 
@@ -37,16 +38,15 @@ describe("FlexgridItem default rules", () => {
 		);
 		const gridCellRoot = getByTestId("gridcell-1");
 		expectToHaveStyles(gridCellRoot, {
-			"flex-basis": "auto",
 			"padding-left": "4px",
 			"padding-top": "0px",
 		});
-		expectToHaveClasses(gridCellRoot, ["box-border"]);
+		expectToHaveClasses(gridCellRoot, ["box-border", "basis-auto"]);
 	});
 });
 
 describe("FlexgridItem props", () => {
-	it("should have attributes to span across 4 columns", () => {
+	it("should render basis rules if span is a number", () => {
 		const { getByTestId } = render(
 			<Flexgrid>
 				<FlexgridItem data-testid="gridcell-1" span={4}>
@@ -55,10 +55,14 @@ describe("FlexgridItem props", () => {
 			</Flexgrid>,
 		);
 		const gridCellRoot = getByTestId("gridcell-1");
-		expect(gridCellRoot).toHaveStyle("flex-basis: 33.333333333333336%");
+		expectToHaveClasses(gridCellRoot, [
+			"box-border",
+			"basis-4/12",
+			"max-w-full",
+		]);
 	});
 
-	it("should have attributes to span across the full space", () => {
+	it("should render basis rules if span is a string set to 'auto'", () => {
 		const { getByTestId } = render(
 			<Flexgrid>
 				<FlexgridItem data-testid="gridcell-1" span="auto">
@@ -67,8 +71,65 @@ describe("FlexgridItem props", () => {
 			</Flexgrid>,
 		);
 		const gridCellRoot = getByTestId("gridcell-1");
-		expect(gridCellRoot).toHaveStyle("flex-basis: auto");
-		expect(gridCellRoot).toHaveStyle("flex-grow: 1");
-		expect(gridCellRoot).toHaveStyle("max-width: 100%");
+		expectToHaveClasses(gridCellRoot, [
+			"box-border",
+			"basis-auto",
+			"max-w-full",
+			"grow",
+		]);
+	});
+
+	describe.each`
+		span
+		${1}
+		${2}
+		${3}
+		${4}
+		${5}
+		${6}
+		${7}
+		${8}
+		${9}
+		${10}
+		${11}
+		${12}
+	`("should render responsive rules if span is $span", ({ span }) => {
+		it.each`
+			breakpoint
+			${"fallback"}
+			${"sm"}
+			${"md"}
+			${"lg"}
+			${"xl"}
+			${"2xl"}
+		`("and the breakpoint is $breakpoint", ({ breakpoint }) => {
+			const { getByTestId } = render(
+				<Flexgrid>
+					<FlexgridItem data-testid="gridcell-1" span={{ [breakpoint]: span }}>
+						<Button>item 1</Button>
+					</FlexgridItem>
+				</Flexgrid>,
+			);
+			const gridCellRoot = getByTestId("gridcell-1");
+			if (breakpoint === "fallback") {
+				if (span < 12) {
+					expectToHaveClasses(gridCellRoot, ["box-border", `basis-${span}/12`]);
+				} else {
+					expectToHaveClasses(gridCellRoot, ["box-border", "basis-full"]);
+				}
+			} else if (typeof breakpoint === "string") {
+				if (span < 12) {
+					expectToHaveClasses(gridCellRoot, [
+						"box-border",
+						`${breakpoint}:basis-${span}/12`,
+					]);
+				} else {
+					expectToHaveClasses(gridCellRoot, [
+						"box-border",
+						`${breakpoint}:basis-full`,
+					]);
+				}
+			}
+		});
 	});
 });