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    #[prop_or_default]
8    pub description: Option<String>,
9    #[prop_or_default]
10    pub is_current: bool,
11    pub status: ProgressStepperStepStatus,
12    #[prop_or_default]
13    pub icon: Option<Html>,
14    #[prop_or_default]
15    /// (header, body, footer)
16    pub popover: Option<(Html, Html, Html)>,
17    #[prop_or_default]
18    pub children: Children,
19}
20
21#[component]
22pub fn ProgressStepperStep(props: &ProgressStepperStepProperties) -> Html {
23    let mut class = classes!("pf-v6-c-progress-stepper__step");
24
25    let (status_class, icon_class) = match props.status {
26        ProgressStepperStepStatus::Default => {
27            ("", classes!("pf-v6-pficon", "pf-v6-pficon-resources-full"))
28        }
29        ProgressStepperStepStatus::Success => ("pf-m-success", classes!("fas", "fa-check-circle")),
30        ProgressStepperStepStatus::Info => (
31            "pf-m-info",
32            classes!("pf-v6-pficon", "pf-v6-pficon-resources-full"),
33        ),
34        ProgressStepperStepStatus::Pending => ("pf-m-pending", classes!("pf-v6-pficon", "")),
35        ProgressStepperStepStatus::Warning => {
36            ("pf-m-warning", classes!("fas", "fa-exclamation-triangle"))
37        }
38        ProgressStepperStepStatus::Danger => {
39            ("pf-m-danger", classes!("fas", "fa-exclamation-circle"))
40        }
41    };
42
43    class.push(classes!(status_class));
44
45    if props.is_current {
46        class.push("pf-m-current");
47    }
48
49    let description = props.description.as_ref().map(|description|
50        html!(<div class="pf-v6-c-progress-stepper__step-description">{ description }</div>)
51    ).unwrap_or_default();
52
53    let icon = props
54        .icon
55        .clone()
56        .unwrap_or(html!(<i class={icon_class} aria-hidden="true" />));
57
58    let title = if let Some((header, body, footer)) = props.popover.clone() {
59        let body = html_nested! { <PopoverBody {header} {footer}>{ body }</PopoverBody> };
60
61        html!(<Popover target={props.children.clone()} {body} />)
62    } else {
63        html!(props.children.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
