Skip to content

Commit e995af7

Browse files
MarcAntoine-Arnaudctron
MarcAntoine-Arnaud
authored and
ctron
committed
feat: add Progress Stepper examples
1 parent 3f4d609 commit e995af7

19 files changed

Lines changed: 520 additions & 87 deletions

‎Cargo.lock‎

Lines changed: 78 additions & 78 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/app/mod.rs‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ pub enum Component {
4646
Pagination,
4747
Popover,
4848
Progress,
49+
ProgressStepper,
4950
SearchInput,
5051
SimpleList,
5152
Skeleton,
@@ -169,6 +170,7 @@ fn switch_app_route(target: AppRoute) -> Html {
169170
Component::Pagination => html! { <components::PaginationExample /> },
170171
Component::Popover => html! { <components::PopoverExample /> },
171172
Component::Progress => html! { <components::ProgressExample /> },
173+
Component::ProgressStepper => html! { <components::ProgressStepperExample /> },
172174
Component::SearchInput => html! { <components::SearchInputExample /> },
173175
Component::SimpleList => html! { <components::SimpleListExample /> },
174176
Component::Skeleton => html! { <components::SkeletonExample /> },
@@ -430,6 +432,11 @@ fn page(props: &PageProps) -> Html {
430432
<NavRouterItem<AppRoute> to={AppRoute::Component(Component::Progress)}>
431433
{ "Progress" }
432434
</NavRouterItem<AppRoute>>
435+
<NavRouterItem<AppRoute>
436+
to={AppRoute::Component(Component::ProgressStepper)}
437+
>
438+
{ "Progress Stepper" }
439+
</NavRouterItem<AppRoute>>
433440
<NavRouterItem<AppRoute> to={AppRoute::Component(Component::SearchInput)}>
434441
{ "Search Input" }
435442
</NavRouterItem<AppRoute>>

‎src/components/mod.rs‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,7 @@ mod number_input;
2929
mod pagination;
3030
mod popover;
3131
mod progress;
32+
mod progress_stepper;
3233
mod search_input;
3334
mod simple_list;
3435
mod skeleton;
@@ -77,6 +78,7 @@ pub use number_input::*;
7778
pub use pagination::*;
7879
pub use popover::*;
7980
pub use progress::*;
81+
pub use progress_stepper::*;
8082
pub use search_input::*;
8183
pub use simple_list::*;
8284
pub use skeleton::*;

‎src/components/progress_stepper/mod.rs‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
use crate::{example, example::ExamplePage};
2+
use patternfly_yew::prelude::*;
3+
use yew::prelude::*;
4+
5+
#[function_component(ProgressStepperExample)]
6+
pub fn progress() -> Html {
7+
let example_1 = example! ("Basic" => "progress_stepper.1.example");
8+
let example_2 = example! ("Basic with descriptions" => "progress_stepper.2.example");
9+
let example_3 = example! ("Vertical, horizontal responsive" => "progress_stepper.3.example");
10+
let example_4 = example! ("Center aligned with descriptions" => "progress_stepper.4.example");
11+
let example_5 = example! ("Center aligned, vertical" => "progress_stepper.5.example");
12+
let example_6 = example! ("Vertical with descriptions" => "progress_stepper.6.example");
13+
let example_7 = example! ("Compact" => "progress_stepper.7.example");
14+
let example_8 = example! ("Compact Vertical" => "progress_stepper.8.example");
15+
let example_9 = example! ("Compact, vertical responsive" => "progress_stepper.9.example");
16+
let example_10 = example! ("Compact, vertical, centered" => "progress_stepper.10.example");
17+
let example_11 = example! ("Compact, centered" => "progress_stepper.11.example");
18+
let example_12 = example! ("Basic with an issue" => "progress_stepper.12.example");
19+
let example_13 = example! ("Basic with a failure" => "progress_stepper.13.example");
20+
let example_14 = example! ("With help text" => "progress_stepper.14.example");
21+
22+
html! {
23+
<ExamplePage title="Progress Stepper">
24+
{ example_1 }
25+
{ example_2 }
26+
{ example_3 }
27+
{ example_4 }
28+
{ example_5 }
29+
{ example_6 }
30+
{ example_7 }
31+
{ example_8 }
32+
{ example_9 }
33+
{ example_10 }
34+
{ example_11 }
35+
{ example_12 }
36+
{ example_13 }
37+
{ example_14 }
38+
</ExamplePage>
39+
}
40+
}

‎src/components/progress_stepper/progress_stepper.1.example‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
html!(
2+
<ProgressStepper>
3+
<ProgressStepperStep
4+
status={ProgressStepperStepStatus::Success}
5+
>
6+
{"First Step"}
7+
</ProgressStepperStep>
8+
<ProgressStepperStep
9+
status={ProgressStepperStepStatus::Default}
10+
is_current=true
11+
>
12+
{"Second Step"}
13+
</ProgressStepperStep>
14+
<ProgressStepperStep
15+
status={ProgressStepperStepStatus::Pending}
16+
>
17+
{"Third Step"}
18+
</ProgressStepperStep>
19+
</ProgressStepper>
20+
)

‎src/components/progress_stepper/progress_stepper.10.example‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
html!(
2+
<ProgressStepper compact=true vertical=true centered=true>
3+
<ProgressStepperStep
4+
description="This is the first thing to happen"
5+
status={ProgressStepperStepStatus::Success}
6+
>
7+
{"First Step"}
8+
</ProgressStepperStep>
9+
<ProgressStepperStep
10+
description="This is the second thing to happen"
11+
status={ProgressStepperStepStatus::Default}
12+
is_current=true
13+
>
14+
{"Second Step"}
15+
</ProgressStepperStep>
16+
<ProgressStepperStep
17+
description="This is the last thing to happen"
18+
status={ProgressStepperStepStatus::Pending}
19+
>
20+
{"Third Step"}
21+
</ProgressStepperStep>
22+
</ProgressStepper>
23+
)

‎src/components/progress_stepper/progress_stepper.11.example‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
html!(
2+
<ProgressStepper compact=true centered=true>
3+
<ProgressStepperStep
4+
description="This is the first thing to happen"
5+
status={ProgressStepperStepStatus::Success}
6+
>
7+
{"First Step"}
8+
</ProgressStepperStep>
9+
<ProgressStepperStep
10+
description="This is the second thing to happen"
11+
status={ProgressStepperStepStatus::Default}
12+
is_current=true
13+
>
14+
{"Second Step"}
15+
</ProgressStepperStep>
16+
<ProgressStepperStep
17+
description="This is the last thing to happen"
18+
status={ProgressStepperStepStatus::Pending}
19+
>
20+
{"Third Step"}
21+
</ProgressStepperStep>
22+
</ProgressStepper>
23+
)

‎src/components/progress_stepper/progress_stepper.12.example‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
html!(
2+
<ProgressStepper>
3+
<ProgressStepperStep
4+
status={ProgressStepperStepStatus::Success}
5+
>
6+
{"First Step"}
7+
</ProgressStepperStep>
8+
<ProgressStepperStep
9+
status={ProgressStepperStepStatus::Success}
10+
>
11+
{"Second Step"}
12+
</ProgressStepperStep>
13+
<ProgressStepperStep
14+
status={ProgressStepperStepStatus::Warning}
15+
>
16+
{"Third Step"}
17+
</ProgressStepperStep>
18+
<ProgressStepperStep
19+
status={ProgressStepperStepStatus::Default}
20+
is_current=true
21+
>
22+
{"Fourth Step"}
23+
</ProgressStepperStep>
24+
<ProgressStepperStep
25+
status={ProgressStepperStepStatus::Pending}
26+
>
27+
{"Fifth Step"}
28+
</ProgressStepperStep>
29+
</ProgressStepper>
30+
)

‎src/components/progress_stepper/progress_stepper.13.example‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
html!(
2+
<ProgressStepper>
3+
<ProgressStepperStep
4+
status={ProgressStepperStepStatus::Success}
5+
>
6+
{"First Step"}
7+
</ProgressStepperStep>
8+
<ProgressStepperStep
9+
status={ProgressStepperStepStatus::Success}
10+
>
11+
{"Second Step"}
12+
</ProgressStepperStep>
13+
<ProgressStepperStep
14+
status={ProgressStepperStepStatus::Success}
15+
>
16+
{"Third Step"}
17+
</ProgressStepperStep>
18+
<ProgressStepperStep
19+
status={ProgressStepperStepStatus::Danger}
20+
is_current=true
21+
>
22+
{"Fourth Step"}
23+
</ProgressStepperStep>
24+
<ProgressStepperStep
25+
status={ProgressStepperStepStatus::Pending}
26+
>
27+
{"Fifth Step"}
28+
</ProgressStepperStep>
29+
</ProgressStepper>
30+
)

‎src/components/progress_stepper/progress_stepper.14.example‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{
2+
#[component]
3+
fn Example() -> Html {
4+
let first_header = html!({"First step popover"});
5+
let first_body = html!({"Additional info or help text content."});
6+
let first_footer = html!();
7+
8+
let second_header = html!({"Second step popover"});
9+
let second_body = html!({"Additional info or help text content."});
10+
let second_footer = html!();
11+
12+
let third_header = html!({"Third step popover"});
13+
let third_body = html!({"Additional info or help text content."});
14+
let third_footer = html!();
15+
16+
html!(
17+
<ProgressStepper>
18+
<ProgressStepperStep
19+
status={ProgressStepperStepStatus::Success}
20+
popover={(first_header, first_body, first_footer)}
21+
>
22+
{"First Step"}
23+
</ProgressStepperStep>
24+
<ProgressStepperStep
25+
status={ProgressStepperStepStatus::Danger}
26+
popover={(second_header, second_body, second_footer)}
27+
>
28+
{"Second Step"}
29+
</ProgressStepperStep>
30+
<ProgressStepperStep
31+
status={ProgressStepperStepStatus::Default}
32+
popover={(third_header, third_body, third_footer)}
33+
is_current=true
34+
>
35+
{"Third Step"}
36+
</ProgressStepperStep>
37+
<ProgressStepperStep
38+
status={ProgressStepperStepStatus::Pending}
39+
>
40+
{"Fourth Step"}
41+
</ProgressStepperStep>
42+
</ProgressStepper>
43+
)
44+
}
45+
46+
html! (<Example />)
47+
}

0 commit comments

Comments
 (0)