feat: add Progress Stepper examples

src/app/mod.rs

@@ -46,6 +46,7 @@ pub enum Component {
     Pagination,
     Popover,
     Progress,
+    ProgressStepper,
     SearchInput,
     SimpleList,
     Skeleton,
@@ -169,6 +170,7 @@ fn switch_app_route(target: AppRoute) -> Html {
         Component::Pagination => html! { <components::PaginationExample /> },
         Component::Popover => html! { <components::PopoverExample /> },
         Component::Progress => html! { <components::ProgressExample /> },
+        Component::ProgressStepper => html! { <components::ProgressStepperExample /> },
         Component::SearchInput => html! { <components::SearchInputExample /> },
         Component::SimpleList => html! { <components::SimpleListExample /> },
         Component::Skeleton => html! { <components::SkeletonExample /> },
@@ -430,6 +432,11 @@ fn page(props: &PageProps) -> Html {
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::Progress)}>
                             { "Progress" }
                         </NavRouterItem<AppRoute>>
+                        <NavRouterItem<AppRoute>
+                            to={AppRoute::Component(Component::ProgressStepper)}
+                        >
+                            { "Progress Stepper" }
+                        </NavRouterItem<AppRoute>>
                         <NavRouterItem<AppRoute> to={AppRoute::Component(Component::SearchInput)}>
                             { "Search Input" }
                         </NavRouterItem<AppRoute>>

src/components/mod.rs

@@ -29,6 +29,7 @@ mod number_input;
 mod pagination;
 mod popover;
 mod progress;
+mod progress_stepper;
 mod search_input;
 mod simple_list;
 mod skeleton;
@@ -77,6 +78,7 @@ pub use number_input::*;
 pub use pagination::*;
 pub use popover::*;
 pub use progress::*;
+pub use progress_stepper::*;
 pub use search_input::*;
 pub use simple_list::*;
 pub use skeleton::*;

src/components/progress_stepper/mod.rs

@@ -0,0 +1,40 @@
+use crate::{example, example::ExamplePage};
+use patternfly_yew::prelude::*;
+use yew::prelude::*;
+
+#[function_component(ProgressStepperExample)]
+pub fn progress() -> Html {
+    let example_1 = example! ("Basic" => "progress_stepper.1.example");
+    let example_2 = example! ("Basic with descriptions" => "progress_stepper.2.example");
+    let example_3 = example! ("Vertical, horizontal responsive" => "progress_stepper.3.example");
+    let example_4 = example! ("Center aligned with descriptions" => "progress_stepper.4.example");
+    let example_5 = example! ("Center aligned, vertical" => "progress_stepper.5.example");
+    let example_6 = example! ("Vertical with descriptions" => "progress_stepper.6.example");
+    let example_7 = example! ("Compact" => "progress_stepper.7.example");
+    let example_8 = example! ("Compact Vertical" => "progress_stepper.8.example");
+    let example_9 = example! ("Compact, vertical responsive" => "progress_stepper.9.example");
+    let example_10 = example! ("Compact, vertical, centered" => "progress_stepper.10.example");
+    let example_11 = example! ("Compact, centered" => "progress_stepper.11.example");
+    let example_12 = example! ("Basic with an issue" => "progress_stepper.12.example");
+    let example_13 = example! ("Basic with a failure" => "progress_stepper.13.example");
+    let example_14 = example! ("With help text" => "progress_stepper.14.example");
+
+    html! {
+        <ExamplePage title="Progress Stepper">
+            { example_1 }
+            { example_2 }
+            { example_3 }
+            { example_4 }
+            { example_5 }
+            { example_6 }
+            { example_7 }
+            { example_8 }
+            { example_9 }
+            { example_10 }
+            { example_11 }
+            { example_12 }
+            { example_13 }
+            { example_14 }
+        </ExamplePage>
+    }
+}

src/components/progress_stepper/progress_stepper.1.example

@@ -0,0 +1,20 @@
+html!(
+    <ProgressStepper>
+        <ProgressStepperStep
+            status={ProgressStepperStepStatus::Success}
+        >
+            {"First Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+            status={ProgressStepperStepStatus::Default}
+            is_current=true
+        >
+            {"Second Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+            status={ProgressStepperStepStatus::Pending}
+        >
+            {"Third Step"}
+        </ProgressStepperStep>
+    </ProgressStepper>
+)

src/components/progress_stepper/progress_stepper.10.example

@@ -0,0 +1,23 @@
+html!(
+    <ProgressStepper compact=true vertical=true centered=true>
+        <ProgressStepperStep
+             description="This is the first thing to happen"
+             status={ProgressStepperStepStatus::Success}
+        >
+            {"First Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             description="This is the second thing to happen"
+             status={ProgressStepperStepStatus::Default}
+             is_current=true
+        >
+            {"Second Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             description="This is the last thing to happen"
+             status={ProgressStepperStepStatus::Pending}
+        >
+            {"Third Step"}
+        </ProgressStepperStep>
+    </ProgressStepper>
+)

src/components/progress_stepper/progress_stepper.11.example

@@ -0,0 +1,23 @@
+html!(
+    <ProgressStepper compact=true centered=true>
+        <ProgressStepperStep
+             description="This is the first thing to happen"
+             status={ProgressStepperStepStatus::Success}
+        >
+            {"First Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             description="This is the second thing to happen"
+             status={ProgressStepperStepStatus::Default}
+             is_current=true
+        >
+            {"Second Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             description="This is the last thing to happen"
+             status={ProgressStepperStepStatus::Pending}
+        >
+            {"Third Step"}
+        </ProgressStepperStep>
+    </ProgressStepper>
+)

src/components/progress_stepper/progress_stepper.12.example

@@ -0,0 +1,30 @@
+html!(
+    <ProgressStepper>
+        <ProgressStepperStep
+             status={ProgressStepperStepStatus::Success}
+        >
+            {"First Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             status={ProgressStepperStepStatus::Success}
+        >
+            {"Second Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             status={ProgressStepperStepStatus::Warning}
+        >
+            {"Third Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             status={ProgressStepperStepStatus::Default}
+             is_current=true
+        >
+            {"Fourth Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             status={ProgressStepperStepStatus::Pending}
+        >
+            {"Fifth Step"}
+        </ProgressStepperStep>
+    </ProgressStepper>
+)

src/components/progress_stepper/progress_stepper.13.example

@@ -0,0 +1,30 @@
+html!(
+    <ProgressStepper>
+        <ProgressStepperStep
+             status={ProgressStepperStepStatus::Success}
+        >
+            {"First Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             status={ProgressStepperStepStatus::Success}
+        >
+            {"Second Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             status={ProgressStepperStepStatus::Success}
+        >
+            {"Third Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             status={ProgressStepperStepStatus::Danger}
+             is_current=true
+        >
+            {"Fourth Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             status={ProgressStepperStepStatus::Pending}
+        >
+            {"Fifth Step"}
+        </ProgressStepperStep>
+    </ProgressStepper>
+)

src/components/progress_stepper/progress_stepper.14.example

@@ -0,0 +1,47 @@
+{
+    #[component]
+    fn Example() -> Html {
+        let first_header = html!({"First step popover"});
+        let first_body = html!({"Additional info or help text content."});
+        let first_footer = html!();
+
+        let second_header = html!({"Second step popover"});
+        let second_body = html!({"Additional info or help text content."});
+        let second_footer = html!();
+
+        let third_header = html!({"Third step popover"});
+        let third_body = html!({"Additional info or help text content."});
+        let third_footer = html!();
+
+        html!(
+            <ProgressStepper>
+                <ProgressStepperStep
+                     status={ProgressStepperStepStatus::Success}
+                     popover={(first_header, first_body, first_footer)}
+                >
+                    {"First Step"}
+                </ProgressStepperStep>
+                <ProgressStepperStep
+                     status={ProgressStepperStepStatus::Danger}
+                     popover={(second_header, second_body, second_footer)}
+                >
+                    {"Second Step"}
+                </ProgressStepperStep>
+                <ProgressStepperStep
+                     status={ProgressStepperStepStatus::Default}
+                     popover={(third_header, third_body, third_footer)}
+                     is_current=true
+                >
+                    {"Third Step"}
+                </ProgressStepperStep>
+                <ProgressStepperStep
+                     status={ProgressStepperStepStatus::Pending}
+                >
+                    {"Fourth Step"}
+                </ProgressStepperStep>
+            </ProgressStepper>
+        )
+    }
+
+    html! (<Example />)
+}

src/components/progress_stepper/progress_stepper.2.example

@@ -0,0 +1,23 @@
+html!(
+    <ProgressStepper>
+        <ProgressStepperStep
+             description="This is the first thing to happen"
+             status={ProgressStepperStepStatus::Success}
+        >
+            {"First Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             description="This is the second thing to happen"
+             status={ProgressStepperStepStatus::Default}
+             is_current=true
+        >
+            {"Second Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             description="This is the last thing to happen"
+             status={ProgressStepperStepStatus::Pending}
+        >
+            {"Third Step"}
+        </ProgressStepperStep>
+    </ProgressStepper>
+)

src/components/progress_stepper/progress_stepper.3.example

@@ -0,0 +1,23 @@
+html!(
+    <ProgressStepper responsive=true>
+        <ProgressStepperStep
+             description="This is the first thing to happen"
+             status={ProgressStepperStepStatus::Success}
+        >
+            {"First Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             description="This is the second thing to happen"
+             status={ProgressStepperStepStatus::Default}
+             is_current=true
+        >
+            {"Second Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             description="This is the last thing to happen"
+             status={ProgressStepperStepStatus::Pending}
+        >
+            {"Third Step"}
+        </ProgressStepperStep>
+    </ProgressStepper>
+)

src/components/progress_stepper/progress_stepper.4.example

@@ -0,0 +1,23 @@
+html!(
+    <ProgressStepper centered=true>
+        <ProgressStepperStep
+             description="This is the first thing to happen"
+             status={ProgressStepperStepStatus::Success}
+        >
+            {"First Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             description="This is the second thing to happen"
+             status={ProgressStepperStepStatus::Default}
+             is_current=true
+        >
+            {"Second Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             description="This is the last thing to happen"
+             status={ProgressStepperStepStatus::Pending}
+        >
+            {"Third Step"}
+        </ProgressStepperStep>
+    </ProgressStepper>
+)

src/components/progress_stepper/progress_stepper.5.example

@@ -0,0 +1,23 @@
+html!(
+    <ProgressStepper centered=true vertical=true>
+        <ProgressStepperStep
+             description="This is the first thing to happen"
+             status={ProgressStepperStepStatus::Success}
+        >
+            {"First Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             description="This is the second thing to happen"
+             status={ProgressStepperStepStatus::Default}
+             is_current=true
+        >
+            {"Second Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             description="This is the last thing to happen"
+             status={ProgressStepperStepStatus::Pending}
+        >
+            {"Third Step"}
+        </ProgressStepperStep>
+    </ProgressStepper>
+)

src/components/progress_stepper/progress_stepper.6.example

@@ -0,0 +1,23 @@
+html!(
+    <ProgressStepper vertical=true>
+        <ProgressStepperStep
+             description="This is the first thing to happen"
+             status={ProgressStepperStepStatus::Success}
+        >
+            {"First Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             description="This is the second thing to happen"
+             status={ProgressStepperStepStatus::Default}
+             is_current=true
+        >
+            {"Second Step"}
+        </ProgressStepperStep>
+        <ProgressStepperStep
+             description="This is the last thing to happen"
+             status={ProgressStepperStepStatus::Pending}
+        >
+            {"Third Step"}
+        </ProgressStepperStep>
+    </ProgressStepper>
+)