feat: support responsive grid

example/Example.stories.tsx

@@ -73,3 +73,44 @@ DifferentColor.parameters = {
 		color: 'rgba(0, 0, 255, 0.1)',
 	},
 };
+
+export const ResponsiveGrid: Story = () => (
+	<>
+		<style
+			dangerouslySetInnerHTML={{
+				__html: `
+		 body {
+		  --columns: 4;
+		  --gap: 8px;
+		  --gutter: 16px;
+          }
+
+		  @media (min-width: 768px) {
+		  body {
+		    --columns: 8;
+		    --gap: 12px;
+		    --gutter: 24px;
+		    }
+		  }
+
+		  @media (min-width: 1024px) {
+		  body {
+		    --columns: 12;
+		    --gap: 24px;
+		    --gutter: 48px;
+		    }
+		  }
+
+		`,
+			}}
+		/>
+		<ComponentTest />
+	</>
+);
+ResponsiveGrid.parameters = {
+	grid: {
+		columns: 'var(--columns)',
+		gutter: 'var(--gutter)',
+		gap: 'var(--gap)',
+	},
+};

index.d.ts

@@ -3,9 +3,9 @@
  */
 export interface GridConfig {
 	/**
-	 * Number of columns, default: 12
+	 * Number of columns, default: 12 max: 24
 	 */
-	columns?: number | undefined;
+	columns?: number | string | undefined;
 	/**
 	 * Gap between columns
 	 */
@@ -14,12 +14,10 @@ export interface GridConfig {
 	 * Gutter (margin) on the left and/or right.
 	 */
 	gutter?: string | [string, string] | undefined;
-
 	/**
 	 * maximum allowed width
 	 */
 	maxWidth?: string | undefined;
-
 	/**
 	 * Sets the color used for the column guides, defaults to red (rgba(255, 0, 0, 0.1))
 	 */

readme.md

@@ -129,6 +129,42 @@ Example.parameters = {
 };
 ```
 
+### Responsive properties
+
+The way `storybook-addon-grid` solves responsive properties is leaving this up to you. We don't you to build
+abstractions and implementations for this addon, we want to reuse existing patterns you may already be using.
+
+In fact all properties map through to css, so any css variable you expose is consumable.
+
+eg:
+
+```css
+// file: my-styles.css
+@media (min-width: 768px) {
+  :root {
+    --columns: 8;
+    --gap: 12px;
+    --gutter: 24px;
+    }
+  }
+}
+```
+
+```ts
+Story.parameters = {
+  grid: {
+    // a custom variable names for the number of columns
+    columns: 'var(--columns)',
+    // or the gutter
+    gutter: 'var(--gutter)',
+    // or the gap
+    gap: 'var(--gap)',
+  },
+};
+```
+
+You can see this in action over at our [example story `ResponsiveGrid`](./example/Example.stories.tsx).
+
 ## 📚 Further Readings
 
 - https://compassofdesign.com/articles/design-principle-1-guides-gutters-and-grids

src/components/ui.tsx

@@ -5,6 +5,7 @@ import { ADDON_ID } from 'src/constants';
 import type { AddonState, GridConfig } from 'storybook-addon-grid';
 
 const ANIMATION_DURATION = 130;
+const MAX_COLUMNS = 24;
 
 const fadeIn = keyframes`
 	from {
@@ -36,26 +37,23 @@ const Wrapper = styled.div<{ active: boolean; animation: boolean }>(
 	}),
 );
 
-const Grid = styled.div<Exclude<GridConfig, 'color' | 'animation'>>(
-	({ columns, gap, gutter, maxWidth }) => {
+const Grid = styled.div<Omit<Required<GridConfig>, 'color' | 'animation'>>(
+	({ gap, gutter, maxWidth, columns }) => {
 		let gutterRight = '0',
 			gutterLeft = '0';
 		if (Array.isArray(gutter)) {
-			gutterLeft = gutter[0];
-			gutterRight = gutter[0];
+			[gutterLeft, gutterRight] = gutter;
 		} else if (gutter != null) {
 			gutterLeft = gutterRight = gutter;
 		}
 
 		return {
 			position: 'fixed',
-			top: '0',
-			bottom: '0',
-			left: '0',
-			right: '0',
+			inset: '0',
 
 			display: 'grid',
-			gridTemplateColumns: `repeat(${columns}, 1fr)`,
+			gridTemplateColumns: `repeat(min(${columns}, ${MAX_COLUMNS}), 1fr)`,
+			gridTemplateRows: '100%',
 			gridColumnGap: gap,
 
 			width: '100%',
@@ -91,14 +89,14 @@ export const Grids: FunctionComponent<
 }) => {
 	const columnDivs = useMemo(
 		() =>
-			Array.from({ length: columns }).map((_, index) => (
-				<Column key={index} color={color} />
-			)),
+			Array.from({
+				length: typeof columns === 'number' ? columns : MAX_COLUMNS,
+			}).map((_, index) => <Column key={index} color={color} />),
 		[columns, color],
 	);
 
 	const gridNodes = (
-		<Grid columns={columns} gap={gap} gutter={gutter} maxWidth={maxWidth}>
+		<Grid gap={gap} gutter={gutter} maxWidth={maxWidth} columns={columns}>
 			{columnDivs}
 		</Grid>
 	);