update grid to allow for xs breakpoint

kadena-community · Oct 5, 2023 · 08aeb3c · 08aeb3c
1 parent 44b2c39
commit 08aeb3c
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 30 deletions.
diff --git a/packages/libs/react-ui/src/components/Grid/Grid.css.ts b/packages/libs/react-ui/src/components/Grid/Grid.css.ts
@@ -55,8 +55,27 @@ const columnCount: Record<number, number> = {
   12: 12,
 };
 
-const containerColumnVariantsArray = Object.keys(breakpoints).map((key) => {
+export type breakpointOptions = 'xs' | keyof typeof breakpoints;
+export type ResponsiveVariant = Record<
+  breakpointOptions,
+  Record<number, string>
+>;
+
+const breakpointsArray = [
+  'xs',
+  ...Object.keys(breakpoints),
+] as breakpointOptions[];
+
+const containerColumnVariantsArray = breakpointsArray.map((key) => {
   return styleVariants(columnCount, (count) => {
+    if (key === 'xs') {
+      return [
+        {
+          gridTemplateColumns: `repeat(${count}, minmax(0, 1fr))`,
+        },
+      ];
+    }
+
     return [
       {
         '@media': {
@@ -77,18 +96,22 @@ export const explicitColumnVariant = styleVariants(columnCount, (count) => {
   ];
 });
 
-export type ResponsiveVariant = Record<string, Record<number, string>>;
-
-export const containerColumnVariants: ResponsiveVariant = {
-  sm: containerColumnVariantsArray[0],
-  md: containerColumnVariantsArray[1],
-  lg: containerColumnVariantsArray[2],
-  xl: containerColumnVariantsArray[3],
-  xxl: containerColumnVariantsArray[4],
-};
+export const containerColumnVariants: ResponsiveVariant =
+  breakpointsArray.reduce((acc, key, index) => {
+    acc[key] = containerColumnVariantsArray[index];
+    return acc;
+  }, {} as ResponsiveVariant);
 
-const itemColumnVariantsArray = Object.keys(breakpoints).map((key) => {
+const itemColumnVariantsArray = breakpointsArray.map((key) => {
   return styleVariants(columnCount, (count) => {
+    if (key === 'xs') {
+      return [
+        {
+          gridColumn: `span ${count}`,
+        },
+      ];
+    }
+
     return [
       {
         '@media': {
@@ -109,14 +132,14 @@ export const explicitItemColumnVariant = styleVariants(columnCount, (count) => {
   ];
 });
 
-export const itemColumnVariants: ResponsiveVariant = {
-  sm: itemColumnVariantsArray[0],
-  md: itemColumnVariantsArray[1],
-  lg: itemColumnVariantsArray[2],
-  xl: itemColumnVariantsArray[3],
-  xxl: itemColumnVariantsArray[4],
-};
+export const itemColumnVariants: ResponsiveVariant = breakpointsArray.reduce(
+  (acc, key, index) => {
+    acc[key] = itemColumnVariantsArray[index];
+    return acc;
+  },
+  {} as ResponsiveVariant,
+);
 
 export type ResponsiveInputType =
   | number
-  | Record<keyof typeof breakpoints, keyof typeof columnCount>;
+  | Record<breakpointOptions, keyof typeof columnCount>;
diff --git a/packages/libs/react-ui/src/components/Grid/Grid.stories.tsx b/packages/libs/react-ui/src/components/Grid/Grid.stories.tsx
@@ -1,7 +1,9 @@
+import classNames from 'classnames';
 import type { ResponsiveInputType } from './Grid.css';
 import { gapVariants } from './Grid.css';
 import type { IGridRootProps } from './GridRoot';
 import { ContentClass } from './stories.css';
+import { sprinkles } from '@theme/sprinkles.css';
 
 import { Grid } from '@components/Grid';
 import type { Meta, StoryObj } from '@storybook/react';
@@ -39,6 +41,7 @@ const meta: Meta<
       control: { type: 'object' },
       description: 'Defines the number of columns.',
       options: {
+        xs: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
         sm: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
         md: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
         lg: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
@@ -50,6 +53,7 @@ const meta: Meta<
       control: { type: 'object' },
       description: 'Defines the column span.',
       options: {
+        xs: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
         sm: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
         md: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
         lg: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
@@ -191,6 +195,7 @@ export const GridRoot: Story = {
   args: {
     gap: '$xl',
     columns: {
+      xs: 1,
       sm: 2,
       md: 4,
       lg: 6,
@@ -287,19 +292,30 @@ export const GridItem: Story = {
     gap: '$xl',
     columns: 12,
     columnSpan: {
-      sm: 2,
-      md: 4,
-      lg: 6,
-      xl: 10,
-      xxl: 12,
+      xs: 12,
+      sm: 10,
+      md: 6,
+      lg: 4,
+      xl: 2,
+      xxl: 1,
     },
   },
   render: ({ gap, columns, columnSpan }) => (
     <>
       <Grid.Root gap={gap} columns={columns}>
-        {Array.from(new Array(12)).map((empty, i) => (
-          <Grid.Item key={i} columnSpan={columnSpan}>
-            <div className={ContentClass}>{i}</div>
+        <Grid.Item columnSpan={columnSpan}>
+          <div
+            className={classNames(
+              ContentClass,
+              sprinkles({ bg: '$primaryAccent' }),
+            )}
+          >
+            dynamic
+          </div>
+        </Grid.Item>
+        {Array.from(new Array(12)).map((_, i) => (
+          <Grid.Item key={i} columnSpan={1}>
+            <div className={ContentClass}>1</div>
           </Grid.Item>
         ))}
       </Grid.Root>

diff --git a/packages/libs/react-ui/src/components/Grid/GridItem.tsx b/packages/libs/react-ui/src/components/Grid/GridItem.tsx
@@ -23,9 +23,10 @@ const assembleColumnSpanVariants = (
     return explicitItemColumnVariant[columnSpan];
   }
 
-  const { sm, md, lg, xl, xxl } = columnSpan;
+  const { xs, sm, md, lg, xl, xxl } = columnSpan;
 
   return [
+    itemColumnVariants.xs[xs],
     itemColumnVariants.sm[sm],
     itemColumnVariants.md[md],
     itemColumnVariants.lg[lg],

diff --git a/packages/libs/react-ui/src/components/Grid/GridRoot.tsx b/packages/libs/react-ui/src/components/Grid/GridRoot.tsx
@@ -42,9 +42,10 @@ const assembleColumnVariants = (
     return explicitColumnVariant[columns];
   }
 
-  const { sm, md, lg, xl, xxl } = columns;
+  const { xs, sm, md, lg, xl, xxl } = columns;
 
   return [
+    containerColumnVariants.xs[xs],
     containerColumnVariants.sm[sm],
     containerColumnVariants.md[md],
     containerColumnVariants.lg[lg],

diff --git a/packages/libs/react-ui/src/styles/sprinkles.css.ts b/packages/libs/react-ui/src/styles/sprinkles.css.ts
@@ -2,7 +2,7 @@ import { darkThemeClass, vars } from './vars.css';
 
 import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
 
-export const breakpoints: Record<string, string> = {
+export const breakpoints = {
   sm: `(min-width: ${640 / 16}rem)`,
   md: `(min-width: ${768 / 16}rem)`,
   lg: `(min-width: ${1024 / 16}rem)`,