patternfly_yew/components/progress_stepper/
item.rs

1use super::ProgressStepperStepStatus;
2use crate::prelude::{Popover, PopoverBody};
3use yew::prelude::*;
4
5#[derive(Clone, PartialEq, Properties)]
6pub struct ProgressStepperStepProperties {
7    pub title: String,
8    #[prop_or_default]
9    pub description: Option<String>,
10    #[prop_or_default]
11    pub is_current: bool,
12    pub status: ProgressStepperStepStatus,
13    #[prop_or_default]
14    pub icon: Option<Html>,
15    #[prop_or_default]
16    /// (header, body, footer)
17    pub popover: Option<(Html, Html, Html)>,
18}
19
20#[component]
21pub fn ProgressStepperStep(props: &ProgressStepperStepProperties) -> Html {
22    let mut class = classes!("pf-v6-c-progress-stepper__step");
23
24    let (status_class, icon_class) = match props.status {
25        ProgressStepperStepStatus::Default => {
26            ("", classes!("pf-v6-pficon", "pf-v6-pficon-resources-full"))
27        }
28        ProgressStepperStepStatus::Success => ("pf-m-success", classes!("fas", "fa-check-circle")),
29        ProgressStepperStepStatus::Info => (
30            "pf-m-info",
31            classes!("pf-v6-pficon", "pf-v6-pficon-resources-full"),
32        ),
33        ProgressStepperStepStatus::Pending => ("pf-m-pending", classes!("pf-v6-pficon", "")),
34        ProgressStepperStepStatus::Warning => {
35            ("pf-m-warning", classes!("fas", "fa-exclamation-triangle"))
36        }
37        ProgressStepperStepStatus::Danger => {
38            ("pf-m-danger", classes!("fas", "fa-exclamation-circle"))
39        }
40    };
41
42    class.push(classes!(status_class));
43
44    if props.is_current {
45        class.push("pf-m-current");
46    }
47
48    let description = props.description.as_ref().map(|description|
49        html!(<div class="pf-v6-c-progress-stepper__step-description">{ description }</div>)
50    ).unwrap_or_default();
51
52    let icon = props
53        .icon
54        .clone()
55        .unwrap_or(html!(<i class={icon_class} aria-hidden="true" />));
56
57    let title = if let Some((header, body, footer)) = props.popover.clone() {
58        let target = html! { props.title.clone() };
59        let body = html_nested! { <PopoverBody {header} {footer}>{ body }</PopoverBody> };
60
61        html!(<Popover {target} {body} />)
62    } else {
63        html!(props.title.clone())
64    };
65
66    let mut title_class = classes!("pf-v6-c-progress-stepper__step-title");
67    if props.popover.is_some() {
68        title_class.push(classes!("pf-m-help-text"));
69    }
70
71    html! {
72        <li {class}>
73            <span class="pf-v6-c-progress-stepper__step-connector">
74                <span class="pf-v6-c-progress-stepper__step-icon">{ icon }</span>
75            </span>
76            <span class="pf-v6-c-progress-stepper__step-main">
77                <span class={title_class}>{ title }</span>
78                { description }
79            </span>
80        </li>
81    }
82}
patternfly_yew/components/progress_stepper/item.rs

patternfly_yew/components/progress_stepper/
item.rs
