feat: simplify grid params api

example/Example.stories.tsx

@@ -56,7 +56,7 @@ export const ZIndexCheckFixed: Story = () => (
 export const DifferentGutters: Story = () => <ComponentTest />;
 DifferentGutters.parameters = {
 	grid: {
-		gutterLeft: '240px',
+		gutter: ['240px'],
 	},
 };
 
@@ -70,6 +70,6 @@ NoAnimation.parameters = {
 export const DifferentColor: Story = () => <ComponentTest />;
 DifferentColor.parameters = {
 	grid: {
-		guidesColor: 'rgba(255,255,0, 0.1)',
+		color: 'rgba(0, 0, 255, 0.1)',
 	},
 };

index.d.ts

@@ -11,19 +11,9 @@ export interface GridParameters {
 	 */
 	gap?: string | undefined;
 	/**
-	 * System's gutter (margin) for both left and right
+	 * Gutter (margin) on the left and/or right.
 	 */
-	gutter?: string | undefined;
-
-	/**
-	 * Define to override the {@link gutter} defined on the left-hand-side
-	 */
-	gutterLeft?: string | undefined;
-
-	/**
-	 * Define to override the {@link gutter} defined on the right-hand-side
-	 */
-	gutterRight?: string | undefined;
+	gutter?: string | [string, string] | undefined;
 
 	/**
 	 * maximum allowed width
@@ -38,7 +28,7 @@ export interface GridParameters {
 	/**
 	 * Sets the color used for the column guides, defaults to red (rgba(255, 0, 0, 0.1))
 	 */
-	guidesColor?: string | undefined;
+	color?: string | undefined;
 }
 
 interface State {

readme.md

@@ -91,12 +91,6 @@ The gap between `columns`.
 
 System's gutter (`margin`) for both left and right.
 
-#### `gutterLeft?: string`
-
-Define to override the gutter defined on the left-hand-side.
-
-#### `gutterRight?: string`
-
 Define to override the gutter defined on the right-hand-side.
 
 #### `maxWidth?: string = '1024px'`
@@ -109,7 +103,7 @@ Enable or Disable the guides from fading in or out when toggling the state.
 
 > Chromatic users, this will be `false` by default.
 
-#### `guidesColor?: string = 'rgba(255, 0, 0, 0.1)'`
+#### `color?: string = 'rgba(255, 0, 0, 0.1)'`
 
 Sets the color used for the column guides.
 

src/components/Grids.tsx

@@ -42,28 +42,37 @@ const Wrapper = memo(
 );
 
 const Grid = memo(
-	styled.div<Exclude<GridParameters, 'guidesColor' | 'animation'>>(
-		({ columns, gap, gutter, gutterLeft, gutterRight, maxWidth }) => ({
-			position: 'fixed',
-			top: '0',
-			bottom: '0',
-			left: '0',
-			right: '0',
-
-			display: 'grid',
-			gridTemplateColumns: `repeat(${columns}, 1fr)`,
-			gridColumnGap: gap,
-
-			width: '100%',
-			height: '100%',
-
-			margin: '0 auto',
-			maxWidth,
-			padding: `0 ${gutterRight ?? gutter} 0 ${gutterLeft ?? gutter}`,
-
-			boxSizing: 'border-box',
-			pointerEvents: 'none',
-		}),
+	styled.div<Exclude<GridParameters, 'color' | 'animation'>>(
+		({ columns, gap, gutter, maxWidth }) => {
+			let gutterRight = '0',
+				gutterLeft = '0';
+			if (gutter && Array.isArray(gutter)) {
+				gutterLeft = gutter[0];
+				gutterRight = gutter[0];
+			}
+
+			return {
+				position: 'fixed',
+				top: '0',
+				bottom: '0',
+				left: '0',
+				right: '0',
+
+				display: 'grid',
+				gridTemplateColumns: `repeat(${columns}, 1fr)`,
+				gridColumnGap: gap,
+
+				width: '100%',
+				height: '100%',
+
+				margin: '0 auto',
+				maxWidth,
+				padding: `0 ${gutterRight} 0 ${gutterLeft}`,
+
+				boxSizing: 'border-box',
+				pointerEvents: 'none',
+			};
+		},
 	),
 );
 
@@ -79,18 +88,16 @@ export const Grids: FunctionComponent<AddonParameters & AddonState> = ({
 	columns = 12,
 	gap = '20px',
 	gridOn,
-	guidesColor = 'rgba(255, 0, 0, 0.1)',
+	color = 'rgba(255, 0, 0, 0.1)',
 	gutter = '50px',
-	gutterLeft,
-	gutterRight,
 	maxWidth = '1024px',
 }) => {
 	const columnDivs = useMemo(
 		() =>
 			Array.from({ length: columns }).map((_, index) => (
-				<Column key={index} color={guidesColor} />
+				<Column key={index} color={color} />
 			)),
-		[columns, guidesColor],
+		[columns, color],
 	);
 
 	const grids = (
@@ -99,8 +106,6 @@ export const Grids: FunctionComponent<AddonParameters & AddonState> = ({
 			columns={columns}
 			gap={gap}
 			gutter={gutter}
-			gutterLeft={gutterLeft}
-			gutterRight={gutterRight}
 			maxWidth={maxWidth}
 		>
 			{columnDivs}
@@ -144,28 +149,18 @@ export const Grids: FunctionComponent<AddonParameters & AddonState> = ({
 };
 
 const ManagerRenderedGrids = () => {
-	const {
-		animation,
-		columns,
-		gap,
-		guidesColor,
-		gutter,
-		gutterLeft,
-		gutterRight,
-		maxWidth,
-	} = useParameter<AddonParameters>(PARAM_KEY, {});
+	const { animation, columns, gap, color, gutter, maxWidth } =
+		useParameter<AddonParameters>(PARAM_KEY, {});
 	const [state] = useAddonState<AddonState>(ADDON_ID);
 
 	return (
 		<Grids
 			animation={animation}
 			columns={columns}
-			guidesColor={guidesColor}
+			color={color}
 			gap={gap}
 			gridOn={state?.gridOn}
 			gutter={gutter}
-			gutterLeft={gutterLeft}
-			gutterRight={gutterRight}
 			maxWidth={maxWidth}
 		/>
 	);
@@ -215,17 +210,7 @@ const PreviewRenderedGridsContainer: FunctionComponent<{
 	);
 
 	const {
-		grid: {
-			animation,
-			columns,
-			gap,
-			gridOn,
-			guidesColor,
-			gutter,
-			gutterLeft,
-			gutterRight,
-			maxWidth,
-		} = {},
+		grid: { animation, columns, gap, gridOn, color, gutter, maxWidth } = {},
 	} = context.parameters as Parameters & { grid: AddonParameters };
 
 	return (
@@ -235,10 +220,8 @@ const PreviewRenderedGridsContainer: FunctionComponent<{
 				columns={columns}
 				gap={gap}
 				gridOn={gridOn!}
-				guidesColor={guidesColor}
+				color={color}
 				gutter={gutter}
-				gutterLeft={gutterLeft}
-				gutterRight={gutterRight}
 				maxWidth={maxWidth}
 			/>
 		</CacheProvider>