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

//! Chip Group

use crate::prelude::{use_prop_id, Chip};
use yew::prelude::*;

#[derive(Clone, Debug, PartialEq, Properties)]
pub struct ChipGroupProperties {
    #[prop_or_default]
    pub children: ChildrenWithProps<Chip>,

    #[prop_or_default]
    pub id: Option<String>,

    #[prop_or_default]
    pub label: Option<String>,

    #[prop_or("Chip group list".into())]
    pub aria_label: AttrValue,
}

#[function_component(ChipGroup)]
pub fn chip_group(props: &ChipGroupProperties) -> Html {
    let id = use_prop_id(props.id.clone());

    let (aria_label, aria_labelled_by) = match props.label.is_some() {
        true => (AttrValue::default(), Some(id.to_string())),
        false => (props.aria_label.clone(), None),
    };

    let mut class = classes!("pf-v5-c-chip-group");

    if props.label.is_some() {
        class.push(classes!("pf-m-category"));
    }

    html! (
        <div {class}>
            <div class="pf-v5-c-chip-group__main">
                if let Some(label) = &props.label {
                    <span
                        class="pf-v5-c-chip-group__label"
                        aria-hidden="true"
                        id={format!("{id}-label")}
                    >
                        { &label }
                    </span>
                }
                <ul
                    class="pf-v5-c-chip-group__list"
                    role="list"
                    aria-label={aria_label}
                    aria-labelledby={aria_labelled_by}
                >
                    { for props.children.iter().map(|chip| {
                        html!(
                            <li class="pf-v5-c-chip-group__list-item">
                                { chip }
                            </li>
                        )
                    })}
                </ul>
            </div>
        </div>
    )
}