yew-nav-link 0.9.0

Navigation link component for Yew with automatic active state detection
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

//! # `NavTabPanel`
//!
//! Content panel associated with a [`NavTab`](super::NavTab).
//! Renders a `<div>` with `role="tabpanel"` and `aria-labelledby`.
//!
//! # Example
//!
//! ```rust
//! use yew::prelude::*;
//! use yew_nav_link::components::NavTabPanel;
//!
//! #[component]
//! fn Panels() -> Html {
//!     html! {
//!         <>
//!             <NavTabPanel id="panel-1" labelled_by="tab-1" hidden={false}>
//!                 <p>{ "Panel 1 content" }</p>
//!             </NavTabPanel>
//!             <NavTabPanel id="panel-2" labelled_by="tab-2" hidden={true}>
//!                 <p>{ "Panel 2 content" }</p>
//!             </NavTabPanel>
//!         </>
//!     }
//! }
//! ```
//!
//! # CSS Classes
//!
//! | Class | Condition |
//! |-------|-----------|
//! | `nav-tab-panel` | Always applied |
//!
//! # Props
//!
//! | Prop | Type | Default | Description |
//! |------|------|---------|-------------|
//! | `hidden` | `bool` | — | Whether the panel is hidden (required) |
//! | `id` | `Option<&'static str>` | `None` | Panel element id |
//! | `labelled_by` | `Option<&'static str>` | `None` | aria-labelledby target |
//! | `classes` | `Classes` | — | Additional CSS classes |
//! | `children` | `Children` | — | Panel content |

use yew::prelude::*;

/// Properties for the [`NavTabPanel`] component.
///
/// | Prop | Type | Default | Description |
/// |------|------|---------|-------------|
/// | `hidden` | `bool` | — | Whether the panel is hidden (required) |
/// | `id` | `Option<&'static str>` | `None` | Panel element id |
/// | `labelled_by` | `Option<&'static str>` | `None` | aria-labelledby target |
/// | `classes` | `Classes` | — | Additional CSS classes |
/// | `children` | `Children` | — | Panel content |
#[derive(Properties, Clone, PartialEq, Debug)]
pub struct NavTabPanelProps {
    /// Additional CSS classes applied to the panel.
    #[prop_or_default]
    pub classes: Classes,

    /// Optional `id` attribute for the panel element.
    #[prop_or_default]
    pub id: Option<&'static str>,

    /// Optional `aria-labelledby` referencing the tab button `id`.
    #[prop_or_default]
    pub labelled_by: Option<&'static str>,

    /// Whether the panel is hidden.
    pub hidden: bool,

    /// Content rendered inside the panel.
    pub children: Children
}

/// Tab panel component that holds the content for a single tab.
///
/// Renders a `<div>` with `role="tabpanel"`.
///
/// # CSS Classes
///
/// - `nav-tab-panel` - Always applied
#[function_component]
pub fn NavTabPanel(props: &NavTabPanelProps) -> Html {
    let mut classes = props.classes.clone();
    classes.push("nav-tab-panel");

    html! {
        <div
            {classes}
            id={props.id}
            role="tabpanel"
            aria-labelledby={props.labelled_by}
            hidden={props.hidden}
        >
            { for props.children.iter() }
        </div>
    }
}

#[cfg(test)]
mod tests {
    use super::*;

    #[test]
    fn nav_tab_panel_hidden() {
        let props = NavTabPanelProps {
            classes:     Classes::default(),
            id:          Some("panel-1"),
            labelled_by: Some("tab-1"),
            hidden:      true,
            children:    Children::new(vec![])
        };

        assert!(props.hidden);
        assert_eq!(props.id, Some("panel-1"));
    }

    #[test]
    fn nav_tab_panel_visible() {
        let props = NavTabPanelProps {
            classes:     Classes::default(),
            id:          Some("panel-1"),
            labelled_by: Some("tab-1"),
            hidden:      false,
            children:    Children::new(vec![])
        };

        assert!(!props.hidden);
    }
}