Basic support for grid-template-areas

This contributes to JetBrains#895
mareklangiewicz · Feb 14, 2022 · e236ebc · e236ebc
1 parent 1c56ad1
commit e236ebc
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 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
@@ -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
@@ -205,4 +205,15 @@ class GridAreaTests {
         assertEquals("span 2 / span another-grid-area / span 3 / span 2", el.style.asDynamic().gridArea)
     }
 
-}
+}
+
+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)
+    }
+}