patternfly-yew 0.7.4

PatternFly 5 components for Yew
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

use super::ProgressStepperStepStatus;
use crate::prelude::{Popover, PopoverBody};
use yew::prelude::*;

#[derive(Clone, PartialEq, Properties)]
pub struct ProgressStepperStepProperties {
    #[prop_or_default]
    pub description: Option<String>,
    #[prop_or_default]
    pub is_current: bool,
    pub status: ProgressStepperStepStatus,
    #[prop_or_default]
    pub icon: Option<Html>,
    #[prop_or_default]
    /// (header, body, footer)
    pub popover: Option<(Html, Html, Html)>,
    #[prop_or_default]
    pub children: Children,
}

#[component]
pub fn ProgressStepperStep(props: &ProgressStepperStepProperties) -> Html {
    let mut class = classes!("pf-v6-c-progress-stepper__step");

    let (status_class, icon_class) = match props.status {
        ProgressStepperStepStatus::Default => {
            ("", classes!("pf-v6-pficon", "pf-v6-pficon-resources-full"))
        }
        ProgressStepperStepStatus::Success => ("pf-m-success", classes!("fas", "fa-check-circle")),
        ProgressStepperStepStatus::Info => (
            "pf-m-info",
            classes!("pf-v6-pficon", "pf-v6-pficon-resources-full"),
        ),
        ProgressStepperStepStatus::Pending => ("pf-m-pending", classes!("pf-v6-pficon", "")),
        ProgressStepperStepStatus::Warning => {
            ("pf-m-warning", classes!("fas", "fa-exclamation-triangle"))
        }
        ProgressStepperStepStatus::Danger => {
            ("pf-m-danger", classes!("fas", "fa-exclamation-circle"))
        }
    };

    class.push(classes!(status_class));

    if props.is_current {
        class.push("pf-m-current");
    }

    let description = props.description.as_ref().map(|description|
        html!(<div class="pf-v6-c-progress-stepper__step-description">{ description }</div>)
    ).unwrap_or_default();

    let icon = props
        .icon
        .clone()
        .unwrap_or(html!(<i class={icon_class} aria-hidden="true" />));

    let title = if let Some((header, body, footer)) = props.popover.clone() {
        let body = html_nested! { <PopoverBody {header} {footer}>{ body }</PopoverBody> };

        html!(<Popover target={props.children.clone()} {body} />)
    } else {
        html!(props.children.clone())
    };

    let mut title_class = classes!("pf-v6-c-progress-stepper__step-title");
    if props.popover.is_some() {
        title_class.push(classes!("pf-m-help-text"));
    }

    html! {
        <li {class}>
            <span class="pf-v6-c-progress-stepper__step-connector">
                <span class="pf-v6-c-progress-stepper__step-icon">{ icon }</span>
            </span>
            <span class="pf-v6-c-progress-stepper__step-main">
                <span class={title_class}>{ title }</span>
                { description }
            </span>
        </li>
    }
}