From 9ae30cf69688da72f06d0e289bd8eb4353a3eaf7 Mon Sep 17 00:00:00 2001
From: Ari Breitkreuz <ari@alpico.io>
Date: Tue, 6 Feb 2024 14:39:51 +0100
Subject: [PATCH] feature(ToggleGroup): Add ToggleGroup examples

---
 Cargo.lock                                    |  2 +-
 Cargo.toml                                    |  5 +-
 src/app/mod.rs                                |  3 ++
 src/components/mod.rs                         |  2 +
 src/components/toggle_group/mod.rs            | 22 +++++++++
 .../toggle_group/toggle_group.1.example       | 46 +++++++++++++++++++
 .../toggle_group/toggle_group.2.example       | 40 ++++++++++++++++
 .../toggle_group/toggle_group.3.example       | 33 +++++++++++++
 .../toggle_group/toggle_group.4.example       | 36 +++++++++++++++
 .../toggle_group/toggle_group.5.example       | 34 ++++++++++++++
 10 files changed, 220 insertions(+), 3 deletions(-)
 create mode 100644 src/components/toggle_group/mod.rs
 create mode 100644 src/components/toggle_group/toggle_group.1.example
 create mode 100644 src/components/toggle_group/toggle_group.2.example
 create mode 100644 src/components/toggle_group/toggle_group.3.example
 create mode 100644 src/components/toggle_group/toggle_group.4.example
 create mode 100644 src/components/toggle_group/toggle_group.5.example

diff --git a/Cargo.lock b/Cargo.lock
index 3e3f4a8..659cba8 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -826,7 +826,7 @@ checksum = "3fdb12b2476b595f9358c5161aa467c2438859caa136dec86c26fdd2efe17b92"
 [[package]]
 name = "patternfly-yew"
 version = "0.6.0"
-source = "git+https://github.com/patternfly-yew/patternfly-yew?rev=af7b1b00dc278816b1ff19b04b74967e2f28b48e#af7b1b00dc278816b1ff19b04b74967e2f28b48e"
+source = "git+https://github.com/aDogCalledSpot/patternfly-yew?branch=toggle_group#a7b3eb057e5f3a851ac3b15c580bea6d8892600b"
 dependencies = [
  "chrono",
  "gloo-events 0.2.0",
diff --git a/Cargo.toml b/Cargo.toml
index a605009..ebede40 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -34,8 +34,9 @@ features = [
 ]
 
 [patch.crates-io]
-#patternfly-yew = { path = "../patternfly-yew" }
-patternfly-yew = { git = "https://github.com/patternfly-yew/patternfly-yew", rev = "af7b1b00dc278816b1ff19b04b74967e2f28b48e" } # FIXME: awaiting release
+# patternfly-yew = { path = "../patternfly-test-minimal/patternfly-yew" }
+patternfly-yew = { git = "https://github.com/aDogCalledSpot/patternfly-yew", branch = "toggle_group" }
+# patternfly-yew = { git = "https://github.com/patternfly-yew/patternfly-yew", rev = "af7b1b00dc278816b1ff19b04b74967e2f28b48e" } # FIXME: awaiting release
 #yew-nested-router = { path = "../yew-nested-router" }
 #yew-more-hooks = { git = "https://github.com/ctron/yew-more-hooks", rev = "f535bb2e7b227aac7010035215c11d4aeae6cb62" } # FIXME: awaiting release
 #yew-more-hooks = { path = "../yew-more-hooks" }
diff --git a/src/app/mod.rs b/src/app/mod.rs
index af8a633..7df00db 100644
--- a/src/app/mod.rs
+++ b/src/app/mod.rs
@@ -58,6 +58,7 @@ pub enum Component {
     TextInputGroup,
     Title,
     Toast,
+    ToggleGroup,
     Tooltip,
     Tree,
     Truncate,
@@ -180,6 +181,7 @@ fn switch_app_route(target: AppRoute) -> Html {
         Component::TextInputGroup => html! {<components::TextInputGroupExample/>},
         Component::Title => html! {<components::TitleExample/>},
         Component::Toast => html! {<components::ToastExample/>},
+        Component::ToggleGroup => html! {<components::ToggleGroupExample/>},
         Component::Tooltip => html! {<components::TooltipExample/>},
         Component::Tree => html! {<components::TreeExample/>},
         Component::Truncate => html! {<components::TruncateExample/>},
@@ -320,6 +322,7 @@ fn page(props: &PageProps) -> Html {
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::TextInputGroup)}>{"Text Input Group"}</NavRouterItem<AppRoute>>
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::Title)}>{"Title"}</NavRouterItem<AppRoute>>
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::Toast)}>{"Toast"}</NavRouterItem<AppRoute>>
+                        <NavRouterItem<AppRoute> to={AppRoute::Component(Component::ToggleGroup)}>{"Toggle Group"}</NavRouterItem<AppRoute>>
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::Tooltip)}>{"Tooltip"}</NavRouterItem<AppRoute>>
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::Tree)}>{"Tree"}</NavRouterItem<AppRoute>>
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::Truncate)}>{"Truncate"}</NavRouterItem<AppRoute>>
diff --git a/src/components/mod.rs b/src/components/mod.rs
index 6ba907f..b94b845 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -41,6 +41,7 @@ mod text;
 mod text_input_group;
 mod title;
 mod toast;
+mod toggle_group;
 mod tooltip;
 mod tree;
 mod truncate;
@@ -88,6 +89,7 @@ pub use text::*;
 pub use text_input_group::*;
 pub use title::*;
 pub use toast::*;
+pub use toggle_group::*;
 pub use tooltip::*;
 pub use tree::*;
 pub use truncate::*;
diff --git a/src/components/toggle_group/mod.rs b/src/components/toggle_group/mod.rs
new file mode 100644
index 0000000..bdc08f5
--- /dev/null
+++ b/src/components/toggle_group/mod.rs
@@ -0,0 +1,22 @@
+use crate::{example, example::ExamplePage};
+use yew::prelude::*;
+use patternfly_yew::prelude::*;
+
+#[function_component(ToggleGroupExample)]
+pub fn toast() -> Html {
+    let example1 = example!("Basic" => "toggle_group.1.example");
+    let example2 = example!("Single Select" => "toggle_group.2.example");
+    let example3 = example!("Icons" => "toggle_group.3.example");
+    let example4 = example!("Icons and Text" => "toggle_group.4.example");
+    let example5 = example!("Compact" => "toggle_group.5.example");
+
+    html!(
+        <ExamplePage title="Toggle Group">
+            {example1}
+            {example2}
+            {example3}
+            {example4}
+            {example5}
+        </ExamplePage>
+    )
+}
diff --git a/src/components/toggle_group/toggle_group.1.example b/src/components/toggle_group/toggle_group.1.example
new file mode 100644
index 0000000..e5ba1b5
--- /dev/null
+++ b/src/components/toggle_group/toggle_group.1.example
@@ -0,0 +1,46 @@
+{
+    #[function_component(ToggleGroupBasicDemo)]
+    fn toggle_group_basic() -> Html {
+        let first_selected = use_state(|| false);
+        let second_selected = use_state(|| false);
+        let onclick_first = use_callback(first_selected.clone(), |_, selected| {
+            selected.set(!(**selected))
+        });
+        let onclick_second = use_callback(second_selected.clone(), |_, selected| {
+            selected.set(!(**selected))
+        });
+
+        let all_disabled = use_state(|| false);
+        let onclick_all_disabled = use_callback(all_disabled.clone(), |_, all_disabled| {
+            all_disabled.set(!(**all_disabled))
+        });
+
+        html! {
+            <Stack gutter=true>
+                <StackItem>
+                    <Button onclick={onclick_all_disabled.clone()} label="Disable all" variant={ButtonVariant::Primary}/>
+                </StackItem>
+                <StackItem>
+                    <ToggleGroup all_disabled={*all_disabled}>
+                        <ToggleGroupItem
+                            text="Option 1"
+                            key=0
+                            onchange={onclick_first.clone()}
+                            selected={*first_selected}
+                        />
+                        <ToggleGroupItem
+                            text="Option 2"
+                            key=1
+                            onchange={onclick_second.clone()}
+                            selected={*second_selected}
+                        />
+                        <ToggleGroupItem text="Option 3" key=2 disabled=true />
+                    </ToggleGroup>
+                </StackItem>
+            </Stack>
+        }
+    }
+    html! {
+        <ToggleGroupBasicDemo />
+    }
+}
diff --git a/src/components/toggle_group/toggle_group.2.example b/src/components/toggle_group/toggle_group.2.example
new file mode 100644
index 0000000..d367eb7
--- /dev/null
+++ b/src/components/toggle_group/toggle_group.2.example
@@ -0,0 +1,40 @@
+{
+    #[function_component(ToggleGroupSingleSelect)]
+    fn toggle_group_single_select() -> Html {
+        #[derive(Debug, Clone, Copy, PartialEq, Eq)]
+        enum Choices {
+            One,
+            Two,
+            Three,
+        }
+        let selected = use_state(|| None);
+        let callback = use_callback(selected.clone(), |input, selected| {
+            selected.set(Some(input))
+        });
+        html! {
+            <ToggleGroup>
+                <ToggleGroupItem
+                    text="Option 1"
+                    key=0
+                    onchange={let cb = callback.clone(); move |_| cb.emit(Choices::One)}
+                    selected={*selected == Some(Choices::One)}
+                />
+                <ToggleGroupItem
+                    text="Option 2"
+                    key=1
+                    onchange={let cb = callback.clone(); move |_| cb.emit(Choices::Two)}
+                    selected={*selected == Some(Choices::Two)}
+                />
+                <ToggleGroupItem
+                    text="Option 3"
+                    key=2
+                    onchange={let cb = callback.clone(); move |_| cb.emit(Choices::Three)}
+                    selected={*selected == Some(Choices::Three)}
+                />
+            </ToggleGroup>
+        }
+    }
+    html! {
+        <ToggleGroupSingleSelect />
+    }
+}
diff --git a/src/components/toggle_group/toggle_group.3.example b/src/components/toggle_group/toggle_group.3.example
new file mode 100644
index 0000000..3d7fc14
--- /dev/null
+++ b/src/components/toggle_group/toggle_group.3.example
@@ -0,0 +1,33 @@
+{
+    #[function_component(ToggleGroupIcons)]
+    fn toggle_group_icons() -> Html {
+        let first_selected = use_state(|| false);
+        let second_selected = use_state(|| false);
+        let third_selected = use_state(|| true);
+        html! {
+            <ToggleGroup>
+                <ToggleGroupItem
+                    icon={html!(Icon::Copy)}
+                    key=0
+                    onchange={let state = first_selected.clone(); move |_| state.set(!(*state))}
+                    selected={*first_selected}
+                />
+                <ToggleGroupItem
+                    icon={html!(Icon::Undo)}
+                    key=1
+                    onchange={let state = second_selected.clone(); move |_| state.set(!(*state))}
+                    selected={*second_selected}
+                />
+                <ToggleGroupItem
+                    icon={html!(Icon::ShareSquare)}
+                    key=2
+                    onchange={let state = third_selected.clone(); move |_| state.set(!(*state))}
+                    selected={*third_selected}
+                />
+            </ToggleGroup>
+        }
+    }
+    html! {
+        <ToggleGroupIcons />
+    }
+}
diff --git a/src/components/toggle_group/toggle_group.4.example b/src/components/toggle_group/toggle_group.4.example
new file mode 100644
index 0000000..090c56d
--- /dev/null
+++ b/src/components/toggle_group/toggle_group.4.example
@@ -0,0 +1,36 @@
+{
+    #[function_component(ToggleGroupIconsAndText)]
+    fn toggle_group_icons_and_text() -> Html {
+        let first_selected = use_state(|| false);
+        let second_selected = use_state(|| false);
+        let third_selected = use_state(|| false);
+        html! {
+            <ToggleGroup>
+                <ToggleGroupItem
+                    icon={html!(Icon::Copy)}
+                    text="Copy"
+                    key=0
+                    onchange={let state = first_selected.clone(); move |_| state.set(!(*state))}
+                    selected={*first_selected}
+                />
+                <ToggleGroupItem
+                    icon={html!(Icon::Undo)}
+                    text="Undo"
+                    key=1
+                    onchange={let state = second_selected.clone(); move |_| state.set(!(*state))}
+                    selected={*second_selected}
+                />
+                <ToggleGroupItem
+                    icon={html!(Icon::ShareSquare)}
+                    text="Share"
+                    key=2
+                    onchange={let state = third_selected.clone(); move |_| state.set(!(*state))}
+                    selected={*third_selected}
+                />
+            </ToggleGroup>
+        }
+    }
+    html! {
+        <ToggleGroupIconsAndText />
+    }
+}
diff --git a/src/components/toggle_group/toggle_group.5.example b/src/components/toggle_group/toggle_group.5.example
new file mode 100644
index 0000000..d0c4d2c
--- /dev/null
+++ b/src/components/toggle_group/toggle_group.5.example
@@ -0,0 +1,34 @@
+{
+    #[function_component(ToggleGroupCompact)]
+    fn toggle_group_basic() -> Html {
+        let first_selected = use_state(|| false);
+        let second_selected = use_state(|| false);
+        let onclick_first = use_callback(first_selected.clone(), |_, selected| {
+            selected.set(!(**selected))
+        });
+        let onclick_second = use_callback(second_selected.clone(), |_, selected| {
+            selected.set(!(**selected))
+        });
+
+        html! {
+            <ToggleGroup compact=true>
+                <ToggleGroupItem
+                    text="Option 1"
+                    key=0
+                    onchange={onclick_first.clone()}
+                    selected={*first_selected}
+                />
+                <ToggleGroupItem
+                    text="Option 2"
+                    key=1
+                    onchange={onclick_second.clone()}
+                    selected={*second_selected}
+                />
+                <ToggleGroupItem text="Option 3" key=2 disabled=true />
+            </ToggleGroup>
+        }
+    }
+    html! {
+        <ToggleGroupCompact />
+    }
+}