nexus-stratum-components 0.1.0

Styled UI components for NexusStratum
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

//! Styled Switch toggle component.

use crate::common::{Size, merge_classes};
use stratum_core::aria::{AriaAttributes, AriaRole, TriState};
use stratum_core::render::{AttrValue, RenderOutput};

/// Properties for the styled Switch.
#[derive(Debug, Clone, PartialEq, Default)]
pub struct SwitchProps {
    pub size: Size,
    pub checked: bool,
    pub disabled: bool,
    pub class: Option<String>,
    pub aria_label: Option<String>,
    pub id: Option<String>,
}

pub struct Switch;

impl Switch {
    const BASE: &'static str = "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input";

    pub fn classes(props: &SwitchProps) -> String {
        let size_cls = match props.size {
            Size::Xs => "h-4 w-7",
            Size::Sm => "h-4 w-8",
            Size::Md => "h-5 w-9",
            Size::Lg => "h-6 w-11",
            Size::Xl => "h-7 w-14",
        };

        let computed = format!("{} {}", Self::BASE, size_cls);
        merge_classes(&computed, &props.class)
    }

    pub fn render(props: &SwitchProps) -> RenderOutput {
        let classes = Self::classes(props);
        let mut aria = AriaAttributes::new()
            .with_role(AriaRole::Switch)
            .with_checked(if props.checked {
                TriState::True
            } else {
                TriState::False
            });

        if let Some(ref label) = props.aria_label {
            aria = aria.with_label(label.clone());
        }
        if props.disabled {
            aria = aria.with_disabled(true);
        }

        let mut output = RenderOutput::new()
            .with_tag("button")
            .with_class(classes)
            .with_aria(aria)
            .with_attr("type", AttrValue::String("button".to_string()))
            .with_data(
                "state",
                if props.checked {
                    "checked"
                } else {
                    "unchecked"
                },
            );

        if props.disabled {
            output = output.with_attr("disabled", AttrValue::Bool(true));
        }
        if let Some(ref id) = props.id {
            output = output.with_attr("id", AttrValue::String(id.clone()));
        }

        output
    }
}

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

    #[test]
    fn default_switch_classes() {
        let props = SwitchProps::default();
        let classes = Switch::classes(&props);
        assert!(classes.contains("rounded-full"));
        assert!(classes.contains("h-5 w-9"));
    }

    #[test]
    fn render_checked_switch() {
        let props = SwitchProps {
            checked: true,
            ..Default::default()
        };
        let output = Switch::render(&props);
        assert_eq!(output.aria.checked, Some(TriState::True));
        assert!(
            output
                .data_attrs
                .iter()
                .any(|(k, v)| k == "state" && v == "checked")
        );
    }

    #[test]
    fn render_unchecked_switch() {
        let props = SwitchProps::default();
        let output = Switch::render(&props);
        assert_eq!(output.aria.checked, Some(TriState::False));
    }

    #[test]
    fn render_tag_is_button() {
        let props = SwitchProps::default();
        let output = Switch::render(&props);
        assert_eq!(output.effective_tag(), "button");
    }
}