From e40f7a0d9a84740787a5c47a781bd06083c48013 Mon Sep 17 00:00:00 2001
From: Oleksandr Karpovich <a.n.karpovich@gmail.com>
Date: Tue, 29 Jun 2021 16:49:17 +0200
Subject: [PATCH] Update web tutorials for 0.5.0-build228 (#833)

Co-authored-by: Oleksandr Karpovich <oleksandr.karpovich@jetbrains.com>
---
 templates/web-template/build.gradle.kts |  2 +-
 tutorials/Web/Building_UI/README.md     | 29 +++++++++++--------------
 tutorials/Web/Events_Handling/README.md | 10 ++++-----
 tutorials/Web/Getting_Started/README.md |  2 +-
 web/gradle.properties                   |  2 +-
 5 files changed, 20 insertions(+), 25 deletions(-)

diff --git a/templates/web-template/build.gradle.kts b/templates/web-template/build.gradle.kts
index f02010db..2bf2a6f9 100644
--- a/templates/web-template/build.gradle.kts
+++ b/templates/web-template/build.gradle.kts
@@ -5,7 +5,7 @@ plugins {
     // __KOTLIN_COMPOSE_VERSION__
     kotlin("multiplatform") version "1.5.10"
     // __LATEST_COMPOSE_RELEASE_VERSION__
-    id("org.jetbrains.compose") version ("0.5.0-build226")
+    id("org.jetbrains.compose") version ("0.5.0-build228")
 }
 
 repositories {
diff --git a/tutorials/Web/Building_UI/README.md b/tutorials/Web/Building_UI/README.md
index d455c552..367d72b3 100644
--- a/tutorials/Web/Building_UI/README.md
+++ b/tutorials/Web/Building_UI/README.md
@@ -26,9 +26,9 @@ Let's have a look at the Composable for a `Div` tag (most other tags have the sa
 Div(
     attrs = {
         // specify attributes here
-    },
-    style = {
-        // specify inline style here
+        style {
+            // specify inline style here
+        }
     }
 ) {
     // div content goes here
@@ -40,9 +40,7 @@ For convenience, some tags like `Input`, `A`, `Form`, or `Img` allow you to spec
 ``` kotlin
 Input(
     type = InputType.Text, // All InputTypes supported
-    value = "", // sets the input value
-    attrs = {},
-    style = {}
+    attrs = {}
 )
 ```
 
@@ -64,7 +62,7 @@ If you want to apply styles to text, it needs to be wrapped in a container with
 
 ``` kotlin
 Span(
-    style = { color("red") } // inline style
+    attrs = { style { color("red") } } // inline style
 ) {
     Text("Red text")
 }
@@ -160,12 +158,14 @@ You can declare inline styles via the `style` block of a component:
 
 ``` kotlin
 Div(
-    style = {
-        display(DisplayStyle.Flex)
-        padding(20.px)
-        
-        // custom property
-        property("font-family", "Arial, Helvetica, sans-serif")
+    attrs = {
+        style {
+            display(DisplayStyle.Flex)
+            padding(20.px)
+            
+            // custom property
+            property("font-family", "Arial, Helvetica, sans-serif")
+        }
     }
 ) { /* content goes here */ }
 ```
@@ -196,12 +196,9 @@ fun main() {
 
         Input(
             type = InputType.Text, // All InputTypes supported
-            value = "", // sets the input value
             attrs = {}
         )
 
-        Input(attrs = { type(InputType.Text) })
-
         Text("Arbitrary text")
 
         Span({
diff --git a/tutorials/Web/Events_Handling/README.md b/tutorials/Web/Events_Handling/README.md
index 670dee2e..c857fc36 100644
--- a/tutorials/Web/Events_Handling/README.md
+++ b/tutorials/Web/Events_Handling/README.md
@@ -27,9 +27,8 @@ val text = remember { mutableStateOf("") }
 TextArea(
     value = text.value,
     attrs = {
-        onTextInput { wrappedTextInputEvent ->
-            // wrappedTextInputEvent is of `WrappedTextInputEvent` type
-            text.value = wrappedTextInputEvent.inputValue
+        onInput {
+            text.value = it.value
         }
     }
 )
@@ -84,9 +83,8 @@ fun main() {
         TextArea(
             value = text.value,
             attrs = {
-                onTextInput { wrappedTextInputEvent ->
-                    // wrappedTextInputEvent is of `WrappedTextInputEvent` type
-                    text.value = wrappedTextInputEvent.inputValue
+                onInput {
+                    text.value = it.value
                 }
             }
         )
diff --git a/tutorials/Web/Getting_Started/README.md b/tutorials/Web/Getting_Started/README.md
index c6d205af..ae8a9d43 100644
--- a/tutorials/Web/Getting_Started/README.md
+++ b/tutorials/Web/Getting_Started/README.md
@@ -43,7 +43,7 @@ pluginManagement {
 // Add compose gradle plugin
 plugins {
     kotlin("multiplatform") version "1.5.10"
-    id("org.jetbrains.compose") version "0.5.0-build226"
+    id("org.jetbrains.compose") version "0.5.0-build228"
 }
 
 // Add maven repositories
diff --git a/web/gradle.properties b/web/gradle.properties
index 808ffdd5..46ac7847 100644
--- a/web/gradle.properties
+++ b/web/gradle.properties
@@ -1,3 +1,3 @@
-COMPOSE_CORE_VERSION=0.5.0-build227
+COMPOSE_CORE_VERSION=0.5.0-build228
 COMPOSE_WEB_VERSION=0.0.16-SNAPSHOT
 COMPOSE_WEB_BUILD_WITH_EXAMPLES=false