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
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159

//! Description list
use crate::core::WithBreakpoints;
use crate::prelude::{AsClasses, ExtendClasses};
use yew::prelude::*;

/// Properties for [`DescriptionList`]
#[derive(Properties, Clone, Debug, PartialEq)]
pub struct DescriptionListProperties {
    #[prop_or_default]
    pub id: AttrValue,

    #[prop_or_default]
    pub style: Option<AttrValue>,

    #[prop_or_default]
    pub children: Html,

    #[prop_or_default]
    pub mode: WithBreakpoints<DescriptionListMode>,

    #[prop_or_default]
    pub compact: bool,

    #[prop_or_default]
    pub auto_column_widths: bool,

    #[prop_or_default]
    pub fill_columns: bool,

    #[prop_or_default]
    pub inline_grid: bool,

    #[prop_or_default]
    pub auto_fit: bool,

    #[prop_or_default]
    pub columns: WithBreakpoints<DescriptionListColumns>,
}

#[derive(Copy, Clone, Debug, Default, Eq, PartialEq)]
pub enum DescriptionListColumns {
    #[default]
    One,
    Two,
    Three,
}

impl AsClasses for DescriptionListColumns {
    fn extend_classes(&self, classes: &mut Classes) {
        match self {
            Self::One => classes.extend(classes!("pf-m-1-col")),
            Self::Two => classes.extend(classes!("pf-m-2-col")),
            Self::Three => classes.extend(classes!("pf-m-3-col")),
        }
    }
}

#[derive(Copy, Clone, Debug, Default, Eq, PartialEq)]
pub enum DescriptionListMode {
    #[default]
    Vertical,
    Horizontal,
    Fluid,
}

impl AsClasses for DescriptionListMode {
    fn extend_classes(&self, classes: &mut Classes) {
        match self {
            Self::Vertical => {}
            Self::Horizontal => classes.extend(classes!("pf-m-horizontal")),
            Self::Fluid => classes.extend(classes!("pf-m-horizontal", "pf-m-fluid")),
        }
    }
}

/// The Description list component.
///
/// > A **description list** contains terms and their corresponding descriptions.
///
/// See: <https://www.patternfly.org/components/description-list>
///
/// ## Properties
///
/// Defined by [`DescriptionListProperties`]. The component only has children.
///
/// ## Example
///
/// ```rust
/// use patternfly_yew::prelude::*;
/// use yew::prelude::*;
///
/// #[function_component(Example)]
/// pub fn example() -> Html {
///   html!(
///     <DescriptionList>
///       <DescriptionGroup term="42">{"Answer to the Ultimate Question of Life, The Universe, and Everything"}</DescriptionGroup>
///     </DescriptionList>
///   )
/// }
/// ```
#[function_component(DescriptionList)]
pub fn dl(props: &DescriptionListProperties) -> Html {
    let mut class = Classes::from("pf-v6-c-description-list");

    class.extend_from(&props.mode);

    if props.compact {
        class.extend(classes!("pf-m-compact"));
    }

    if props.auto_column_widths {
        class.extend(classes!("pf-m-auto-column-widths"));
    }

    if props.fill_columns {
        class.extend(classes!(
            "pf-m-2-col",
            "pf-m-3-col-on-lg",
            "pf-m-fill-columns"
        ));
    }

    if props.inline_grid {
        class.extend(classes!("pf-m-inline-grid"));
    }

    if props.auto_fit {
        class.extend(classes!("pf-m-auto-fit"));
    }

    class.extend_from(&props.columns);

    html! (<dl id={&props.id} {class} style={props.style.clone()}>{ props.children.clone() }</dl>)
}

/// Properties for [`DescriptionGroup`]
#[derive(Properties, Clone, Debug, PartialEq)]
pub struct DescriptionGroupProperties {
    /// The term to describe
    pub term: AttrValue,
    /// The definition
    #[prop_or_default]
    pub children: Html,
}

/// A [`DescriptionList`] entry.
#[function_component(DescriptionGroup)]
pub fn desc_group(props: &DescriptionGroupProperties) -> Html {
    html! (
        <div class="pf-v6-c-description-list__group">
            <dt class="pf-v6-c-description-list__term">
                <span class="pf-v6-c-description-list__text">{ &props.term }</span>
            </dt>
            <dd class="pf-v6-c-description-list__description">
                <div class="pf-v6-c-description-list__text">{ props.children.clone() }</div>
            </dd>
        </div>
    )
}