From 296cd238813aa043fe3c0dde13ed8a201361ac59 Mon Sep 17 00:00:00 2001
From: Vincent Smedinga <v.smedinga@amsterdam.nl>
Date: Wed, 17 Jul 2024 22:57:06 +0200
Subject: [PATCH] =?UTF-8?q?Include=20=E2=80=98gap=E2=80=99=20in=20class=20?=
 =?UTF-8?q?names=20for=20Row=20and=20Column?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/css/src/components/column/column.scss | 2 +-
 packages/css/src/components/row/row.scss       | 2 +-
 packages/react/src/Column/Column.test.tsx      | 7 ++++---
 packages/react/src/Column/Column.tsx           | 2 +-
 packages/react/src/Row/Row.test.tsx            | 7 ++++---
 packages/react/src/Row/Row.tsx                 | 2 +-
 6 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/packages/css/src/components/column/column.scss b/packages/css/src/components/column/column.scss
index 3ef57d2cfe..8d91a219f8 100644
--- a/packages/css/src/components/column/column.scss
+++ b/packages/css/src/components/column/column.scss
@@ -11,7 +11,7 @@
 }
 
 @each $size, $label in $ams-sizes {
-  .ams-column--#{$label} {
+  .ams-column--gap-#{$label} {
     gap: var(--ams-column-gap-#{$size});
   }
 }
diff --git a/packages/css/src/components/row/row.scss b/packages/css/src/components/row/row.scss
index 2d45fbc419..fb99684470 100644
--- a/packages/css/src/components/row/row.scss
+++ b/packages/css/src/components/row/row.scss
@@ -11,7 +11,7 @@
 }
 
 @each $size, $label in $ams-sizes {
-  .ams-row--#{$label} {
+  .ams-row--gap-#{$label} {
     gap: var(--ams-row-gap-#{$size});
   }
 }
diff --git a/packages/react/src/Column/Column.test.tsx b/packages/react/src/Column/Column.test.tsx
index a4823ac292..0a61d667d6 100644
--- a/packages/react/src/Column/Column.test.tsx
+++ b/packages/react/src/Column/Column.test.tsx
@@ -18,7 +18,8 @@ describe('Column', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('ams-column--medium')
+    expect(component).toHaveClass('ams-column')
+    expect(component).toHaveClass('ams-column--gap-medium')
   })
 
   columnGapSizes.map((size) =>
@@ -27,7 +28,7 @@ describe('Column', () => {
 
       const component = container.querySelector(':only-child')
 
-      expect(component).toHaveClass(`ams-column--${size}`)
+      expect(component).toHaveClass(`ams-column--gap-${size}`)
     }),
   )
 
@@ -36,7 +37,7 @@ describe('Column', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('ams-column--medium extra')
+    expect(component).toHaveClass('ams-column extra')
   })
 
   it('renders with an article tag', () => {
diff --git a/packages/react/src/Column/Column.tsx b/packages/react/src/Column/Column.tsx
index 2005be4b9b..31a63aedd4 100644
--- a/packages/react/src/Column/Column.tsx
+++ b/packages/react/src/Column/Column.tsx
@@ -21,7 +21,7 @@ export type ColumnProps = {
 
 export const Column = forwardRef(
   ({ as: Tag = 'div', children, className, gap = 'medium', ...restProps }: ColumnProps, ref: any) => (
-    <Tag {...restProps} ref={ref} className={clsx('ams-column', `ams-column--${gap}`, className)}>
+    <Tag {...restProps} ref={ref} className={clsx('ams-column', `ams-column--gap-${gap}`, className)}>
       {children}
     </Tag>
   ),
diff --git a/packages/react/src/Row/Row.test.tsx b/packages/react/src/Row/Row.test.tsx
index a13ac09f39..141c78f88a 100644
--- a/packages/react/src/Row/Row.test.tsx
+++ b/packages/react/src/Row/Row.test.tsx
@@ -19,7 +19,8 @@ describe('Row', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('ams-row--medium')
+    expect(component).toHaveClass('ams-row')
+    expect(component).toHaveClass('ams-row--gap-medium')
   })
 
   rowGapSizes.map((size) =>
@@ -28,7 +29,7 @@ describe('Row', () => {
 
       const component = container.querySelector(':only-child')
 
-      expect(component).toHaveClass(`ams-row--${size}`)
+      expect(component).toHaveClass(`ams-row--gap-${size}`)
     }),
   )
 
@@ -37,7 +38,7 @@ describe('Row', () => {
 
     const component = container.querySelector(':only-child')
 
-    expect(component).toHaveClass('ams-row--medium extra')
+    expect(component).toHaveClass('ams-row extra')
   })
 
   it('renders with an article tag', () => {
diff --git a/packages/react/src/Row/Row.tsx b/packages/react/src/Row/Row.tsx
index 649df27795..4879ccb1f2 100644
--- a/packages/react/src/Row/Row.tsx
+++ b/packages/react/src/Row/Row.tsx
@@ -36,7 +36,7 @@ export const Row = forwardRef(
       ref={ref}
       className={clsx(
         'ams-row',
-        `ams-row--${gap}`,
+        `ams-row--gap-${gap}`,
         align && `ams-row--align-${align}`,
         alignVertical && `ams-row--align-vertical-${alignVertical}`,
         wrap && 'ams-row--wrap',