From 90cecde6f20bc20e3c2cee687763d8120ee6d94d Mon Sep 17 00:00:00 2001
From: Shagen Ogandzhanian <shagen.ogandzhanian@jetbrains.com>
Date: Tue, 20 Jul 2021 15:46:10 +0200
Subject: [PATCH] Basic support for grid-template-areas

This contributes to #895
---
 .../jetbrains/compose/web/css/properties/grid.kt    |  4 ++++
 web/core/src/jsTest/kotlin/css/GridTests.kt         | 13 ++++++++++++-
 2 files changed, 16 insertions(+), 1 deletion(-)

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 df25440708..7de32f6e2b 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
@@ -75,4 +75,8 @@ fun StyleBuilder.gridArea(rowStart: String, columnStart: String, rowEnd: String,
     property("grid-area", "$rowStart / $columnStart / $rowEnd / $columnEnd")
 }
 
+// https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas
+fun StyleBuilder.gridTemplateAreas(vararg rows: String) {
+    property("grid-template-areas", rows.joinToString(" ") { "\"$it\"" })
+}
 
diff --git a/web/core/src/jsTest/kotlin/css/GridTests.kt b/web/core/src/jsTest/kotlin/css/GridTests.kt
index 308459e36f..dd76633f2e 100644
--- a/web/core/src/jsTest/kotlin/css/GridTests.kt
+++ b/web/core/src/jsTest/kotlin/css/GridTests.kt
@@ -205,4 +205,15 @@ class GridAreaTests {
         assertEquals("span 2 / span another-grid-area / span 3 / span 2", el.style.asDynamic().gridArea)
     }
 
-}
\ No newline at end of file
+}
+
+class GridTemplateAreasTests {
+    @Test
+    fun gridTemplateAreas() = runTest {
+        composition {
+            Div({ style { gridTemplateAreas("head head", "nav main", "nav foot")  } })
+        }
+
+        assertEquals("\"head head\" \"nav main\" \"nav foot\"", (root.children[0] as HTMLElement).style.asDynamic().gridTemplateAreas)
+    }
+}