Implement compact grid

Amsterdam · Feb 7, 2024 · 98e5068 · 98e5068
1 parent e907f7d
commit 98e5068
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 65 deletions.
diff --git a/packages/css/src/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss
@@ -6,9 +6,6 @@
 @import "../../common/breakpoint";
 
 .amsterdam-grid {
-  --amsterdam-grid-gap: var(--amsterdam-grid-spacious-gap);
-  --amsterdam-grid-padding-inline: var(--amsterdam-grid-spacious-padding-inline);
-
   display: grid;
   gap: var(--amsterdam-grid-gap);
   grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
@@ -23,11 +20,6 @@
   }
 }
 
-.amsterdam-grid--compact {
-  --amsterdam-grid-gap: var(--amsterdam-grid-compact-gap);
-  --amsterdam-grid-padding-inline: var(--amsterdam-grid-compact-padding-inline);
-}
-
 .amsterdam-grid--gap-vertical--none {
   row-gap: initial;
 }

diff --git a/packages/react/src/Grid/Grid.test.tsx b/packages/react/src/Grid/Grid.test.tsx
@@ -24,48 +24,24 @@ describe('Grid', () => {
     expect(component).toHaveClass('amsterdam-grid')
   })
 
-  it('renders the compact class name', () => {
-    const { container } = render(<Grid compact />)
-    const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--compact')
-  })
-
-  it('renders a medium vertical spacing class name for a spacious grid', () => {
+  it('renders a medium vertical spacing class name', () => {
     const { container } = render(<Grid paddingVertical="medium" />)
     const component = container.querySelector(':only-child')
     expect(component).toHaveClass('amsterdam-grid--padding-vertical--medium')
   })
 
-  it('renders a medium vertical spacing class name for a compact grid', () => {
-    const { container } = render(<Grid compact paddingVertical="medium" />)
-    const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--padding-vertical--medium')
-  })
-
-  it('renders a small top class name for a spacious grid', () => {
+  it('renders a small top class name', () => {
     const { container } = render(<Grid paddingTop="small" />)
     const component = container.querySelector(':only-child')
     expect(component).toHaveClass('amsterdam-grid--padding-top--small')
   })
 
-  it('renders a small top class name for a compact grid', () => {
-    const { container } = render(<Grid compact paddingTop="small" />)
-    const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--padding-top--small')
-  })
-
-  it('renders a large bottom class name for a spacious grid', () => {
+  it('renders a large bottom class name', () => {
     const { container } = render(<Grid paddingBottom="large" />)
     const component = container.querySelector(':only-child')
     expect(component).toHaveClass('amsterdam-grid--padding-bottom--large')
   })
 
-  it('renders a large bottom class name for a compact grid', () => {
-    const { container } = render(<Grid compact paddingBottom="large" />)
-    const component = container.querySelector(':only-child')
-    expect(component).toHaveClass('amsterdam-grid--padding-bottom--large')
-  })
-
   it('renders a class name for a vertical gap', () => {
     const { container } = render(<Grid gapVertical="large" />)
     const component = container.querySelector(':only-child')

diff --git a/packages/react/src/Grid/Grid.tsx b/packages/react/src/Grid/Grid.tsx
@@ -34,13 +34,6 @@ type GridPaddingTopAndBottomProps = {
 }
 
 export type GridProps = {
-  /**
-   * Opts in to a less spacious layout.
-   * Decreases whitespace between columns and to the sides of the grid.
-   * This usually works well for applications.
-   * @todo Implement more generally – it will be moved into a theme soon.
-   */
-  compact?: boolean
   /** The amount of vertical whitespace between rows of the grid. */
   gapVertical?: 'none' | 'small' | 'large'
 } & (GridPaddingVerticalProp | GridPaddingTopAndBottomProps) &
@@ -74,15 +67,14 @@ type GridComponent = {
 
 export const Grid = forwardRef(
   (
-    { children, className, compact, gapVertical, paddingBottom, paddingTop, paddingVertical, ...restProps }: GridProps,
+    { children, className, gapVertical, paddingBottom, paddingTop, paddingVertical, ...restProps }: GridProps,
     ref: ForwardedRef<HTMLDivElement>,
   ) => (
     <div
       {...restProps}
       ref={ref}
       className={clsx(
         'amsterdam-grid',
-        compact && `amsterdam-grid--compact`,
         gapVertical && `amsterdam-grid--gap-vertical--${gapVertical}`,
         paddingClasses(paddingBottom, paddingTop, paddingVertical),
         className,

diff --git a/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.compact.tokens.json
@@ -0,0 +1,14 @@
+{
+  "amsterdam": {
+    "grid": {
+      "gap": {
+        "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
+        "comment": "Grows from 16px at 1088px wide to 40px at 2624px wide."
+      },
+      "padding-inline": {
+        "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
+        "comment": "Equals the gap."
+      }
+    }
+  }
+}
diff --git a/proprietary/tokens/src/components/amsterdam/grid.tokens.json b/proprietary/tokens/src/components/amsterdam/grid.tokens.json
@@ -2,25 +2,13 @@
   "amsterdam": {
     "grid": {
       "column-count": { "value": "4" },
-      "spacious": {
-        "gap": {
-          "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
-          "comment": "Grows from 16px at 320px wide to 56px at 1600px wide."
-        },
-        "padding-inline": {
-          "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)",
-          "comment": "Equals 1.5 times the gap."
-        }
+      "gap": {
+        "value": "clamp(1rem, calc(3.125vw + 0.375rem), 3.5rem)",
+        "comment": "Grows from 16px at 320px wide to 56px at 1600px wide."
       },
-      "compact": {
-        "gap": {
-          "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
-          "comment": "Grows from 16px at 1088px wide to 40px at 2624px wide."
-        },
-        "padding-inline": {
-          "value": "clamp(1rem, calc(1.5625vw - 0.0625rem), 2.5rem)",
-          "comment": "Equals the gap."
-        }
+      "padding-inline": {
+        "value": "clamp(1.5rem, calc(4.6875vw + 0.5625rem), 5.25rem)",
+        "comment": "Equals 1.5 times the gap."
       },
       "medium": {
         "column-count": { "value": "8" }

diff --git a/proprietary/tokens/src/components/amsterdam/header.tokens.json b/proprietary/tokens/src/components/amsterdam/header.tokens.json
@@ -1,7 +1,7 @@
 {
   "amsterdam": {
     "header": {
-      "column-gap": { "value": "{amsterdam.grid.spacious.gap}" }
+      "column-gap": { "value": "{amsterdam.grid.gap}" }
     }
   }
 }
diff --git a/proprietary/tokens/src/components/amsterdam/mega-menu.tokens.json b/proprietary/tokens/src/components/amsterdam/mega-menu.tokens.json
@@ -2,10 +2,10 @@
   "amsterdam": {
     "mega-menu": {
       "list-category": {
-        "column-gap": { "value": "{amsterdam.grid.spacious.gap}" },
+        "column-gap": { "value": "{amsterdam.grid.gap}" },
         "column-width": { "value": "20rem" },
         "padding-block-start": { "value": "1rem" },
-        "padding-block-end": { "value": "{amsterdam.grid.spacious.gap}" }
+        "padding-block-end": { "value": "{amsterdam.grid.gap}" }
       }
     }
   }