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

//! Brand visual
use yew::prelude::*;

/// Properties for [`Brand`]
#[derive(PartialEq, Properties)]
pub struct BrandProperties {
    pub src: AttrValue,
    pub alt: AttrValue,

    /// Additional style
    #[prop_or_default]
    pub style: AttrValue,

    #[prop_or_default]
    pub children: ChildrenWithProps<BrandSource>,
}

#[derive(Clone, PartialEq, Properties)]
pub struct BrandSourceProperties {
    #[prop_or_default]
    /// media selector
    pub media: Option<String>,
    /// source
    pub srcset: AttrValue,
}

#[function_component(BrandSource)]
pub fn brand_source(props: &BrandSourceProperties) -> Html {
    html!(
        <source
            media={props.media.clone()}
            srcset={&props.srcset}
        />
    )
}

/// Brand component
///
/// > A **brand** is used to place a product logotype on a screen.
///
/// See: <https://www.patternfly.org/components/brand>
///
/// Both basic and responsive modes are supported. If the list of sources is empty, then the basic
/// mode is used. Otherwise it will use the response mode, with the default image as fallback.
///
/// The additional style will either be applied to the plain `img` element, or to the `picture`
/// element in case of the responsive mode.
///
/// ## Properties
///
/// Defined by [`BrandProperties`].
#[function_component(Brand)]
pub fn brand(props: &BrandProperties) -> Html {
    if props.children.is_empty() {
        html! (
            <img
                class="pf-v5-c-brand"
                style={&props.style}
                src={&props.src}
                alt={&props.alt}
            />
        )
    } else {
        html! (
            <picture
                class="pf-v5-c-brand pf-m-picture"
                style={&props.style}
            >
                { for props.children.iter() }
                <img
                    class="pf-v5-c-brand"
                    src={&props.src}
                    alt={&props.alt}
                />
            </picture>
        )
    }
}