orbital-core-components 0.1.1

Themed Orbital UI components for Leptos applications
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

use leptos::prelude::*;
use orbital_macros::component_doc;

use super::styles::card_header_styles;

/// Card header with title row and optional description and action slots.
///
/// # Examples
///
/// ## Title only
/// Header row with a single title line.
/// <!-- default -->
/// <!-- preview -->
/// ```rust
/// use crate::{Card, CardHeader, Subtitle1};
/// view! {
///     <div data-testid="card-header-preview">
///         <div data-testid="card-header-title" style="max-width: 360px;">
///             <Card>
///                 <CardHeader>
///                     <Subtitle1>"Overview"</Subtitle1>
///                 </CardHeader>
///             </Card>
///         </div>
///     </div>
/// }
/// ```
///
/// ## Title and description
/// Header with a secondary description row below the title.
/// <!-- preview -->
/// ```rust
/// use crate::{Card, CardHeader, CardHeaderDescription, Subtitle1};
/// view! {
///     <div data-testid="card-header-description" style="max-width: 360px;">
///         <Card>
///             <CardHeader>
///                 <Subtitle1>"Team workspace"</Subtitle1>
///                 <CardHeaderDescription slot>
///                     <span>"Shared files and tasks"</span>
///                 </CardHeaderDescription>
///             </CardHeader>
///         </Card>
///     </div>
/// }
/// ```
///
/// ## Title, description, and action
/// Header with description and a trailing action control.
/// <!-- preview -->
/// ```rust
/// use crate::{Button, ButtonAppearance, Card, CardHeader, CardHeaderAction, CardHeaderDescription, Subtitle1};
/// view! {
///     <div data-testid="card-header-action" style="max-width: 360px;">
///         <Card>
///             <CardHeader>
///                 <Subtitle1>"Team workspace"</Subtitle1>
///                 <CardHeaderDescription slot>
///                     <span>"Shared files and tasks"</span>
///                 </CardHeaderDescription>
///                 <CardHeaderAction slot>
///                     <Button appearance=ButtonAppearance::Transparent icon=icondata::AiMoreOutlined />
///                 </CardHeaderAction>
///             </CardHeader>
///         </Card>
///     </div>
/// }
/// ```
///
/// ## Header with media
/// Title and description above a hero image — images belong in [`CardMedia`](crate::CardMedia), not inside the header.
/// <!-- preview -->
/// ```rust
/// use crate::{Card, CardContent, CardHeader, CardHeaderDescription, CardMedia, Subtitle1};
/// view! {
///     <div data-testid="card-header-media" style="max-width: 360px;">
///         <Card>
///             <CardHeader>
///                 <Subtitle1>"Mountain trail"</Subtitle1>
///                 <CardHeaderDescription slot>
///                     <span>"Photo by Picsum"</span>
///                 </CardHeaderDescription>
///             </CardHeader>
///             <CardMedia
///                 src="https://picsum.photos/seed/orbital-card/360/140"
///                 alt="Sample card illustration"
///                 height=140
///             />
///             <CardContent>"Card body copy below the hero image."</CardContent>
///         </Card>
///     </div>
/// }
/// ```
#[component_doc(
    category = "Surfaces",
    preview_slug = "card-header",
    preview_label = "Card Header",
    preview_icon = icondata::AiLayoutOutlined,
)]
#[component]
pub fn CardHeader(
    /// Extra CSS class names merged onto the header row container.
    #[prop(optional, into)]
    class: MaybeProp<String>,
    /// Optional subtitle slot rendered below the title row via [`CardHeaderDescription`].
    #[prop(optional)]
    card_header_description: Option<CardHeaderDescription>,
    /// Optional trailing action slot (icon button, menu) via [`CardHeaderAction`].
    #[prop(optional)]
    card_header_action: Option<CardHeaderAction>,
    /// Title row content — typically [`Subtitle1`] or a heading preset.
    children: Children,
) -> impl IntoView {
    let style_sheet = card_header_styles();
    let has_description = card_header_description.is_some();
    let root_class = Memo::new(move |_| {
        let extra = class.get().unwrap_or_default();
        let base = if has_description {
            "orbital-card-header orbital-card-header-with-description"
        } else {
            "orbital-card-header"
        };
        if extra.is_empty() {
            base.to_string()
        } else {
            format!("{base} {extra}")
        }
    });

    view! {
        <style>{style_sheet}</style>
        <div class=root_class>
            <div class="orbital-card-header__header">{children()}</div>
            {card_header_description.map(|desc| {
                view! {
                    <div class="orbital-card-header__description">{(desc.children)()}</div>
                }
            })}
            {card_header_action.map(|action| {
                view! {
                    <div class="orbital-card-header__action">{(action.children)()}</div>
                }
            })}
        </div>
    }
}

#[slot]
pub struct CardHeaderDescription {
    children: Children,
}

#[slot]
pub struct CardHeaderAction {
    children: Children,
}