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
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

//! Styled Heading component (h1-h6) with size mapping.

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

/// Heading level (h1 through h6).
#[derive(Debug, Clone, Copy, Default, PartialEq, Eq)]
pub enum HeadingLevel {
    H1,
    #[default]
    H2,
    H3,
    H4,
    H5,
    H6,
}

impl HeadingLevel {
    pub fn tag(&self) -> &'static str {
        match self {
            HeadingLevel::H1 => "h1",
            HeadingLevel::H2 => "h2",
            HeadingLevel::H3 => "h3",
            HeadingLevel::H4 => "h4",
            HeadingLevel::H5 => "h5",
            HeadingLevel::H6 => "h6",
        }
    }

    pub fn aria_level(&self) -> u8 {
        match self {
            HeadingLevel::H1 => 1,
            HeadingLevel::H2 => 2,
            HeadingLevel::H3 => 3,
            HeadingLevel::H4 => 4,
            HeadingLevel::H5 => 5,
            HeadingLevel::H6 => 6,
        }
    }
}

/// Properties for the Heading component.
#[derive(Debug, Clone, PartialEq, Default)]
pub struct HeadingProps {
    pub level: HeadingLevel,
    pub class: Option<String>,
    pub id: Option<String>,
}

pub struct Heading;

impl Heading {
    pub fn classes(props: &HeadingProps) -> String {
        let size_cls = match props.level {
            HeadingLevel::H1 => "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl",
            HeadingLevel::H2 => "scroll-m-20 text-3xl font-semibold tracking-tight",
            HeadingLevel::H3 => "scroll-m-20 text-2xl font-semibold tracking-tight",
            HeadingLevel::H4 => "scroll-m-20 text-xl font-semibold tracking-tight",
            HeadingLevel::H5 => "scroll-m-20 text-lg font-semibold tracking-tight",
            HeadingLevel::H6 => "scroll-m-20 text-base font-semibold tracking-tight",
        };
        merge_classes(size_cls, &props.class)
    }

    pub fn render(props: &HeadingProps) -> RenderOutput {
        let classes = Self::classes(props);
        let mut aria = AriaAttributes::new();
        aria.level = Some(props.level.aria_level());

        let mut output = RenderOutput::new()
            .with_tag(props.level.tag())
            .with_class(classes)
            .with_aria(aria);

        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 heading_h1_classes() {
        let props = HeadingProps {
            level: HeadingLevel::H1,
            ..Default::default()
        };
        let classes = Heading::classes(&props);
        assert!(classes.contains("text-4xl"));
        assert!(classes.contains("font-extrabold"));
    }

    #[test]
    fn heading_h3_tag() {
        let props = HeadingProps {
            level: HeadingLevel::H3,
            ..Default::default()
        };
        let output = Heading::render(&props);
        assert_eq!(output.effective_tag(), "h3");
        assert_eq!(output.aria.level, Some(3));
    }

    #[test]
    fn heading_default_is_h2() {
        let props = HeadingProps::default();
        let output = Heading::render(&props);
        assert_eq!(output.effective_tag(), "h2");
        assert_eq!(output.aria.level, Some(2));
    }

    #[test]
    fn heading_all_levels() {
        let levels = [
            HeadingLevel::H1,
            HeadingLevel::H2,
            HeadingLevel::H3,
            HeadingLevel::H4,
            HeadingLevel::H5,
            HeadingLevel::H6,
        ];
        for level in levels {
            let props = HeadingProps {
                level,
                ..Default::default()
            };
            let output = Heading::render(&props);
            assert_eq!(output.aria.level, Some(level.aria_level()));
        }
    }
}