From 8e2c8df8fe6bfc1e722027be33d668df78d0678a Mon Sep 17 00:00:00 2001
From: Sriyansh Shivam <96797205+SoNiC-HeRE@users.noreply.github.com>
Date: Tue, 21 Mar 2023 23:02:05 +0530
Subject: [PATCH] library: Add Toggle Button Entry (#219)

---
 src/Library/demos/Toggle Button/main.blp  | 90 +++++++++++++++++++++++
 src/Library/demos/Toggle Button/main.js   | 14 ++++
 src/Library/demos/Toggle Button/main.json | 10 +++
 3 files changed, 114 insertions(+)
 create mode 100644 src/Library/demos/Toggle Button/main.blp
 create mode 100644 src/Library/demos/Toggle Button/main.js
 create mode 100644 src/Library/demos/Toggle Button/main.json

diff --git a/src/Library/demos/Toggle Button/main.blp b/src/Library/demos/Toggle Button/main.blp
new file mode 100644
index 000000000..c98a6548c
--- /dev/null
+++ b/src/Library/demos/Toggle Button/main.blp	
@@ -0,0 +1,90 @@
+using Gtk 4.0;
+using Adw 1;
+
+Adw.StatusPage {
+  title: "Toggle Button";
+  description: _("Represent active-state visually");
+
+  Box {
+    orientation: vertical;
+
+    Box {
+      orientation: horizontal;
+      halign: center;
+      margin-bottom: 6;
+      styles ["linked"]
+
+      ToggleButton button_no_look {
+        active: true;
+        icon-name: "eye-not-looking-symbolic";
+      }
+
+      ToggleButton button_look {
+        active: false;
+        icon-name: "eye-open-negative-filled-symbolic";
+        group: button_no_look;
+      }
+    }
+
+    Label {
+      label: "Grouped";
+      margin-bottom: 24;
+    }
+
+    Box  {
+      orientation: horizontal;
+      halign: center;
+      spacing: 6;
+      margin-bottom: 6;
+
+      ToggleButton button_camera {
+        active: false;
+        icon-name: "photo-camera-symbolic";
+        halign: center;
+      }
+
+      ToggleButton button_flashlight {
+        active: false;
+        icon-name: "flashlight-symbolic";
+        halign: center;
+      }
+    }
+
+    Label {
+      label: "Independent";
+      margin-bottom: 24;
+    }
+
+    ToggleButton button_console {
+      halign: center;
+      margin-bottom: 6;
+
+      Adw.ButtonContent {
+        halign: center;
+        valign: center;
+        label: "Console";
+        icon-name: "terminal-symbolic";
+      }
+    }
+
+    Label {
+      label: "With label";
+      margin-bottom: 24;
+    }
+
+    LinkButton{
+      label: "Tutorial";
+      uri: "https://developer.gnome.org/documentation/tutorials/beginners/components/toggle.html";
+    }
+
+    LinkButton{
+      label: "API Reference";
+      uri: "https://docs.gtk.org/gtk4/class.ToggleButton.html";
+    }
+
+    LinkButton{
+      label: "Human Interface Guidelines";
+      uri: "https://developer.gnome.org/hig/patterns/controls/buttons.html";
+    }
+  }
+}
diff --git a/src/Library/demos/Toggle Button/main.js b/src/Library/demos/Toggle Button/main.js
new file mode 100644
index 000000000..870047a95
--- /dev/null
+++ b/src/Library/demos/Toggle Button/main.js	
@@ -0,0 +1,14 @@
+const buttons = {
+  button_no_look: "Don't look",
+  button_look: "Look",
+  button_camera: "Camera",
+  button_flashlight: "Flashlight",
+  button_console: "Console",
+};
+
+for (const [id, name] of Object.entries(buttons)) {
+  const button = workbench.builder.get_object(id);
+  button.connect("notify::active", () => {
+    console.log(`${name} ${button.active ? "On" : "Off"}`);
+  });
+}
diff --git a/src/Library/demos/Toggle Button/main.json b/src/Library/demos/Toggle Button/main.json
new file mode 100644
index 000000000..b1c830741
--- /dev/null
+++ b/src/Library/demos/Toggle Button/main.json	
@@ -0,0 +1,10 @@
+{
+  "name": "Toggle Button",
+  "category": "user_interface",
+  "description": "Represent active-state visually",
+  "panels": [
+    "ui",
+    "preview"
+  ],
+  "autorun": true
+}