hikari-components 0.2.2

Core UI components (40+) for the Hikari design system
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

// hi-components/src/basic/badge.rs
// Badge component

use hikari_palette::classes::{BadgeClass, ClassesBuilder, Display};

use crate::prelude::*;
use crate::styled::StyledComponent;

pub struct BadgeComponent;

#[derive(Clone, Copy, PartialEq, Debug, Default)]
pub enum BadgeVariant {
    #[default]
    Default,
    Primary,
    Secondary,
    Success,
    Warning,
    Danger,
    Info,
}

#[define_props]
pub struct BadgeProps {
    #[default]
    pub variant: BadgeVariant,

    #[default]
    pub dot: bool,

    #[default]
    pub count: Option<i32>,

    #[default]
    pub max: Option<i32>,

    #[default]
    pub show_zero: bool,

    #[default]
    pub class: String,

    pub children: Element,
}

#[component]
pub fn Badge(props: BadgeProps) -> Element {
    let display_count = if let Some(count) = props.count {
        if count == 0 && !props.show_zero {
            None
        } else if let Some(max) = props.max {
            if count > max {
                Some(format!("{max}+"))
            } else {
                Some(format!("{count}"))
            }
        } else {
            Some(format!("{count}"))
        }
    } else {
        None
    };

    let variant_class = match props.variant {
        BadgeVariant::Default => None,
        BadgeVariant::Primary => Some(BadgeClass::Primary),
        BadgeVariant::Secondary => Some(BadgeClass::Secondary),
        BadgeVariant::Success => Some(BadgeClass::Success),
        BadgeVariant::Warning => Some(BadgeClass::Warning),
        BadgeVariant::Danger => Some(BadgeClass::Danger),
        BadgeVariant::Info => Some(BadgeClass::Info),
    };

    let is_standalone = !props.dot && display_count.is_none();

    if is_standalone {
        let mut builder = ClassesBuilder::new()
            .add_typed(BadgeClass::Badge)
            .add_typed(Display::InlineFlex);

        if let Some(vc) = variant_class {
            builder = builder.add_typed(vc);
        }

        let badge_classes = builder.add(&props.class).build();

        rsx! {
            span { class: badge_classes,
                {props.children}
            }
        }
    } else {
        let mut builder = ClassesBuilder::new()
            .add_typed(BadgeClass::Badge)
            .add_typed(BadgeClass::Dot);

        if let Some(vc) = variant_class {
            builder = builder.add_typed(vc);
        }

        let badge_classes = builder.build();

        rsx! {
            div { class: format!("hi-badge-wrapper {}", props.class),

                {props.children}

                span { class: badge_classes,

                    if props.dot {
                        span { class: "hi-badge-dot-inner" }
                    } else if let Some(count) = display_count.clone() {
                        "{count}"
                    }
                }
            }
        }
    }
}

impl StyledComponent for BadgeComponent {
    fn styles() -> &'static str {
        include_str!(concat!(env!("OUT_DIR"), "/styles/badge.css"))
    }

    fn name() -> &'static str {
        "badge"
    }
}