orbital-base-components 0.1.1

Headless base primitives for Orbital — structure, semantics, and accessibility
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

use leptos::prelude::*;

use crate::overlay::FeedbackIntent;

use super::intent_icon::message_bar_intent_icon;

#[derive(Clone, Copy, Default, PartialEq, Eq)]
pub enum MessageBarLayout {
    #[default]
    Singleline,
    Multiline,
}

impl MessageBarLayout {
    pub fn as_str(&self) -> &'static str {
        match self {
            Self::Singleline => "singleline",
            Self::Multiline => "multiline",
        }
    }
}

#[component]
pub fn BaseMessageBar(
    #[prop(optional, into)] class: MaybeProp<String>,
    #[prop(default = MessageBarLayout::Singleline)] layout: MessageBarLayout,
    #[prop(optional, into)] intent: Signal<FeedbackIntent>,
    children: Children,
) -> impl IntoView {
    view! {
        <div
            class=move || {
                let mut parts = vec![
                    "orbital-message-bar".to_string(),
                    format!("orbital-message-bar--{}", intent.get().as_str()),
                    format!("orbital-message-bar--{}", layout.as_str()),
                ];
                if let Some(extra) = class.get() {
                    if !extra.is_empty() {
                        parts.push(extra);
                    }
                }
                parts.join(" ")
            }
            role="group"
        >
            <div class="orbital-message-bar__icon">
                {move || message_bar_intent_icon(intent.get())}
            </div>
            {children()}
        </div>
    }
}

#[component]
pub fn BaseMessageBarTitle(
    #[prop(optional, into)] class: MaybeProp<String>,
    children: Children,
) -> impl IntoView {
    view! {
        <div class=move || format_class("orbital-message-bar-title", class.get())>
            {children()}
        </div>
    }
}

#[component]
pub fn BaseMessageBarBody(
    #[prop(optional, into)] class: MaybeProp<String>,
    children: Children,
) -> impl IntoView {
    view! {
        <div class=move || format_class("orbital-message-bar-body", class.get())>
            {children()}
        </div>
    }
}

#[component]
pub fn BaseMessageBarActions(
    #[prop(optional, into)] class: MaybeProp<String>,
    children: Children,
) -> impl IntoView {
    view! {
        <div class=move || format_class("orbital-message-bar-actions", class.get())>
            {children()}
        </div>
    }
}

fn format_class(base: &str, extra: Option<String>) -> String {
    match extra {
        Some(extra) if !extra.is_empty() => format!("{base} {extra}"),
        _ => base.to_string(),
    }
}