⬆️ Catch up with SAP 2.1

sherpal · Oct 1, 2024 · 2eec90c · 2eec90c
1 parent cdbbd1d
commit 2eec90c
Show file tree

Hide file tree

Showing 17 changed files with 256 additions and 112 deletions.
diff --git a/README.md b/README.md
@@ -60,9 +60,9 @@ First of all, don't panic. You can do the following things:
 These bindings are barely "facades" types for the official UI5 library. They _won't_ work if you don't handle that npm dependency on your own project. You will need the following imports in your `package.json` (or equivalent tool such as scala-js-bundler):
 
 ```
-"@ui5/webcomponents": "2.0.1",
-"@ui5/webcomponents-fiori": "2.0.1",
-"@ui5/webcomponents-icons": "2.0.1"
+"@ui5/webcomponents": "2.1.0",
+"@ui5/webcomponents-fiori": "2.1.0",
+"@ui5/webcomponents-icons": "2.1.0"
 ```
 
 (and thus `npm install` it). Then, you can use any of the components as defined in the `be.doeraene.webcomponents.ui5` package.

diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/demo/package.json b/demo/package.json
@@ -12,10 +12,10 @@
     "vite-plugin-html": "3.2.0"
   },
   "dependencies": {
-    "@ui5/webcomponents": "2.0.1",
-    "@ui5/webcomponents-fiori": "2.0.1",
-    "@ui5/webcomponents-icons": "2.0.1",
-    "@ui5/webcomponents-compat": "2.0.1",
+    "@ui5/webcomponents": "2.1.0",
+    "@ui5/webcomponents-fiori": "2.1.0",
+    "@ui5/webcomponents-icons": "2.1.0",
+    "@ui5/webcomponents-compat": "2.1.0",
     "highlight.js": "^11.6.0"
   }
-}
+}
diff --git a/demo/src/main/scala/demo/TimelineExample.scala b/demo/src/main/scala/demo/TimelineExample.scala
@@ -14,23 +14,23 @@ object TimelineExample extends Example("Timeline") {
       //-- Begin: Basic Timeline
       Timeline(
         _.item(
-          _.titleText := "called",
-          _.subtitleText := "20.02.2022 11:30",
-          _.icon := IconName.phone,
-          _.name := "John Smith",
+          _.titleText     := "called",
+          _.subtitleText  := "20.02.2022 11:30",
+          _.icon          := IconName.phone,
+          _.name          := "John Smith",
           _.nameClickable := true,
           _.events.onNameClick.mapTo(()) --> Observer[Any](_ => println("Clicked on John Smith!"))
         ),
         _.item(
-          _.titleText := "Weekly Sync - CP Design",
+          _.titleText    := "Weekly Sync - CP Design",
           _.subtitleText := "27.07.2022 (11:00 - 12:30)",
-          _.icon := IconName.calendar,
+          _.icon         := IconName.calendar,
           div("MR SOF02 2.43")
         ),
         _.item(
-          _.titleText := "Video Converence Call - UI5",
+          _.titleText    := "Video Converence Call - UI5",
           _.subtitleText := "31.01.2023 (12:00 - 13:00)",
-          _.icon := IconName.calendar,
+          _.icon         := IconName.calendar,
           div("Online meeting")
         )
       )
@@ -41,26 +41,90 @@ object TimelineExample extends Example("Timeline") {
       Timeline(
         _.layout := TimelineLayout.Horizontal,
         _.item(
-          _.titleText := "called",
-          _.subtitleText := "20.02.2022 11:30",
-          _.icon := IconName.phone,
-          _.name := "John Smith",
+          _.titleText     := "called",
+          _.subtitleText  := "20.02.2022 11:30",
+          _.icon          := IconName.phone,
+          _.name          := "John Smith",
           _.nameClickable := true
         ),
         _.item(
-          _.titleText := "Weekly Sync - CP Design",
+          _.titleText    := "Weekly Sync - CP Design",
           _.subtitleText := "27.07.2022 (11:00 - 12:30)",
-          _.icon := IconName.calendar,
+          _.icon         := IconName.calendar,
           div("MR SOF02 2.43")
         ),
         _.item(
-          _.titleText := "Video Converence Call - UI5",
+          _.titleText    := "Video Converence Call - UI5",
           _.subtitleText := "31.01.2023 (12:00 - 13:00)",
-          _.icon := IconName.calendar,
+          _.icon         := IconName.calendar,
           div("Online meeting")
         )
       )
       //-- End
+    ),
+    DemoPanel("Timeline with group")(
+      //-- Begin: Timeline with group
+      Timeline(
+        _.layout := TimelineLayout.Vertical,
+        _.group(
+          _.groupName := "Events",
+          _.item(
+            _.titleText    := "Event",
+            _.subtitleText := "18.06.2024 11:30",
+            _.name         := "SAP D-com"
+          ),
+          _.item(
+            _.titleText    := "Event",
+            _.subtitleText := "19.06.2024 12:30",
+            _.name         := "SAP Talk",
+            _.icon         := IconName.calendar
+          ),
+          _.item(
+            _.titleText    := "Event",
+            _.subtitleText := "21.06.2024 18:30",
+            _.name         := "SAP iXP Summer Party"
+          )
+        ),
+        _.group(
+          _.groupName := "Meetings",
+          _.item(
+            _.titleText    := "coming-up",
+            _.subtitleText := "10.07.2024 11:30",
+            _.name         := "Team Belgium Meeting",
+            _.icon         := IconName.calendar
+          ),
+          _.item(
+            _.titleText    := "coming-up",
+            _.subtitleText := "20.08.2024 12:30",
+            _.name         := "Team Belgium Planning",
+            _.icon         := IconName.calendar
+          ),
+          _.item(
+            _.titleText    := "coming-up",
+            _.subtitleText := "22.08.2024 14:30",
+            _.name         := "Team Belgium Retrospective",
+            _.icon         := IconName.calendar
+          )
+        ),
+        _.group(
+          _.groupName := "Calls",
+          _.item(
+            _.titleText     := "made group call",
+            _.subtitleText  := "20.09.2024 11:30",
+            _.name          := "John Doe",
+            _.icon          := IconName.calendar,
+            _.nameClickable := true
+          ),
+          _.item(
+            _.subtitleText  := "20.09.2024 12:30",
+            _.name          := "John Doe",
+            _.nameClickable := true,
+            Avatar(_.initials := ('J', 'D')),
+            Label("has ended the call")
+          )
+        )
+      )
+      //-- End
     )
   )
 

diff --git a/demo/src/main/scala/demo/TitleExample.scala b/demo/src/main/scala/demo/TitleExample.scala
@@ -10,9 +10,9 @@ object TitleExample extends Example("Title") {
   def component(using
       demoPanelInfoMap: FetchDemoPanelFromGithub.CompleteDemoPanelInfo
   ): HtmlElement = div(
-    DemoPanel("Title in All Available Levels")(
-      //-- Begin: Title in All Available Levels
-      div(TitleLevel.allValues.map(level => Title(_.level := level, s"Title level ${level.value.tail}")))
+    DemoPanel("Title in All Available Sizes")(
+      //-- Begin: Title in All Available Sizes
+      div(TitleLevel.allValues.map(level => Title(_.size := level, s"Title level ${level.value.tail}")))
       //-- End
     )
   )

diff --git a/demo/src/main/scala/demo/helpers/Example.scala b/demo/src/main/scala/demo/helpers/Example.scala
@@ -20,7 +20,7 @@ trait Example(val name: String) {
 
   def completeComponent: HtmlElement = div(
     padding := "5px",
-    Title(_.level := TitleLevel.H1, name),
+    Title.h1(name),
     div(
       "You can see the source code ",
       Link(