From cf19b0fba9c678f0e8dc82d072af0486027ffb6b Mon Sep 17 00:00:00 2001
From: Shagen Ogandzhanian <shagen.ogandzhanian@jetbrains.com>
Date: Tue, 20 Jul 2021 15:31:09 +0200
Subject: [PATCH] Introduce basic support for grid-area in CSS API

---
 .../compose/web/css/properties/grid.kt        | 18 +++++++
 web/core/src/jsTest/kotlin/css/GridTests.kt   | 54 ++++++++++++++++---
 2 files changed, 66 insertions(+), 6 deletions(-)

diff --git a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/grid.kt b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/grid.kt
index 79c96c236f..df25440708 100644
--- a/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/grid.kt
+++ b/web/core/src/jsMain/kotlin/org/jetbrains/compose/web/css/properties/grid.kt
@@ -58,3 +58,21 @@ fun StyleBuilder.gridTemplateRows(value: String) {
     property("grid-template-rows", value)
 }
 
+// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area
+fun StyleBuilder.gridArea(rowStart: String) {
+    property("grid-area", rowStart)
+}
+
+fun StyleBuilder.gridArea(rowStart: String, columnStart: String) {
+    property("grid-area", "$rowStart / $columnStart")
+}
+
+fun StyleBuilder.gridArea(rowStart: String, columnStart: String, rowEnd: String) {
+    property("grid-area", "$rowStart / $columnStart / $rowEnd")
+}
+
+fun StyleBuilder.gridArea(rowStart: String, columnStart: String, rowEnd: String, columnEnd: String) {
+    property("grid-area", "$rowStart / $columnStart / $rowEnd / $columnEnd")
+}
+
+
diff --git a/web/core/src/jsTest/kotlin/css/GridTests.kt b/web/core/src/jsTest/kotlin/css/GridTests.kt
index 2046dc4d4d..308459e36f 100644
--- a/web/core/src/jsTest/kotlin/css/GridTests.kt
+++ b/web/core/src/jsTest/kotlin/css/GridTests.kt
@@ -6,10 +6,7 @@
 package org.jetbrains.compose.web.core.tests.css
 
 import org.jetbrains.compose.web.core.tests.runTest
-import org.jetbrains.compose.web.css.gridColumn
-import org.jetbrains.compose.web.css.gridRow
-import org.jetbrains.compose.web.css.gridTemplateColumns
-import org.jetbrains.compose.web.css.gridTemplateRows
+import org.jetbrains.compose.web.css.*
 import org.jetbrains.compose.web.dom.Div
 import org.w3c.dom.HTMLElement
 import org.w3c.dom.get
@@ -131,7 +128,7 @@ class GridRawTests {
     }
 }
 
-class GridTemplateRows {
+class GridTemplateRowsTests {
     @Test
     fun gridTemplateRawsGlobalValues() = runTest {
         composition {
@@ -148,7 +145,7 @@ class GridTemplateRows {
     }
 }
 
-class GridTemplateColumns {
+class GridTemplateColumnsTests {
     @Test
     fun gridTemplateColumnsGlobalValues() = runTest {
         composition {
@@ -163,4 +160,49 @@ class GridTemplateColumns {
         assertEquals("revert", (root.children[2] as HTMLElement).style.asDynamic().gridTemplateColumns)
         assertEquals("unset", (root.children[3] as HTMLElement).style.asDynamic().gridTemplateColumns)
     }
+}
+
+class GridAreaTests {
+    @Test
+    fun gridAreaOneValue() = runTest {
+        composition {
+            Div({ style { gridArea("span 3") } })
+        }
+
+        assertEquals("span 3", (root.children[0] as HTMLElement).style.asDynamic().gridRowStart)
+    }
+
+    @Test
+    fun gridAreaTwoValues() = runTest {
+        composition {
+            Div({ style { gridArea("some-grid-area", "another-grid-area") } })
+        }
+
+        val el = root.children[0] as HTMLElement
+        assertEquals("some-grid-area", el.style.asDynamic().gridRowStart)
+        assertEquals("another-grid-area", el.style.asDynamic().gridColumnStart)
+    }
+
+    @Test
+    fun gridAreaThreeValues() = runTest {
+        composition {
+            Div({ style { gridArea("some-grid-area", "another-grid-area", "yet-another-grid-area") } })
+        }
+
+        val el = root.children[0] as HTMLElement
+        assertEquals("some-grid-area", el.style.asDynamic().gridRowStart)
+        assertEquals("another-grid-area", el.style.asDynamic().gridColumnStart)
+        assertEquals("yet-another-grid-area", el.style.asDynamic().gridRowEnd)
+    }
+
+    @Test
+    fun gridAreaFourValues() = runTest {
+        composition {
+            Div({ style { gridArea("2 span", "another-grid-area span", "span 3", "2 span") } })
+        }
+
+        val el = root.children[0] as HTMLElement
+        assertEquals("span 2 / span another-grid-area / span 3 / span 2", el.style.asDynamic().gridArea)
+    }
+
 }
\ No newline at end of file