feature(ToggleGroup): Add ToggleGroup examples (#46)

patternfly-yew · Feb 6, 2024 · 1eda318 · 1eda318
1 parent 080e10e
commit 1eda318
Show file tree

Hide file tree

Showing 9 changed files with 222 additions and 1 deletion.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/src/app/mod.rs b/src/app/mod.rs
@@ -59,6 +59,7 @@ pub enum Component {
     TextInputGroup,
     Title,
     Toast,
+    ToggleGroup,
     Tooltip,
     Tree,
     Truncate,
@@ -182,6 +183,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/>},
@@ -323,6 +325,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
@@ -42,6 +42,7 @@ mod text;
 mod text_input_group;
 mod title;
 mod toast;
+mod toggle_group;
 mod tooltip;
 mod tree;
 mod truncate;
@@ -90,6 +91,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
@@ -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
@@ -0,0 +1,51 @@
+{
+    #[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))
+        });
+        let label = if *all_disabled {
+            "Enable back"
+        } else {
+            "Disable all"
+        };
+
+        html! {
+            <Stack gutter=true>
+                <StackItem>
+                    <Button onclick={onclick_all_disabled.clone()} {label} 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
@@ -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
@@ -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
@@ -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
@@ -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 />
+    }
+}