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

//! Preview frame body for component gallery examples.
//!
//! The preview shell zeroes `--orbital-card-content-padding` for flush section
//! borders, then resets it on `.PreviewDemo` so demoed cards keep their own
//! default content padding (custom properties inherit into nested components).

use crate::{
    Button, ButtonAppearance, Card, CardContent, CardPreview, CardSectionBorder, Code, Flex,
    FlexAlign, FlexGap, FlexJustify, MaterialElevation, MaterialVariant,
};
use leptos::prelude::*;
use turf::inline_style_sheet_values;

#[component]
pub fn OrbitalPreviewCardBody(
    #[prop(optional, into)] code: MaybeProp<&'static str>,
    children: Children,
) -> impl IntoView {
    let (show_code, set_show_code) = signal(false);
    let (style_sheet, class_names) = inline_style_sheet_values! {
        .Frame {
            width: 100%;
            margin: 0;
        }
        .PreviewShell {
            --orbital-card-content-padding: 0;
            background: var(--orb-color-surface-canvas);
        }
        .PreviewDemo {
            --orbital-card-content-padding: initial;
            max-width: 700px;
            padding: var(--orb-space-block-lg) var(--orb-space-inline-lg);
        }
        .Toolbar {
            --orbital-card-content-padding: var(--orb-space-block-md) var(--orb-space-inline-lg);
            display: flex;
            align-items: center;
            justify-content: flex-end;
        }
        .CodeHero .orbital-code {
            display: block;
            width: 100%;
            border-radius: 0;
        }
    };
    let code_opt = move || code.get();

    view! {
        <style>{style_sheet}</style>
        <Card
            class=class_names.frame
            variant=MaterialVariant::Outlined
            elevation=MaterialElevation::Flat
            gap=FlexGap::Size(0)
        >
            <CardContent class=class_names.preview_shell>
                <Flex justify=FlexJustify::Center full_width=true>
                    <Flex
                        class=class_names.preview_demo
                        vertical=true
                        gap=FlexGap::Medium
                        align=FlexAlign::Center
                        justify=FlexJustify::Center
                        full_width=true
                    >
                        {children()}
                    </Flex>
                </Flex>
            </CardContent>
            <Show when=move || code_opt().is_some()>
                <CardSectionBorder />
                <CardContent class=class_names.toolbar>
                    <Button
                        appearance=ButtonAppearance::Secondary
                        on_click=Callback::new(move |_| set_show_code.update(|v| *v = !*v))
                    >
                        {move || if show_code.get() { "Hide code" } else { "Show code" }}
                    </Button>
                </CardContent>
                <Show when=move || show_code.get()>
                    {move || code_opt().map(|code_str| {
                        let code_string = code_str.to_string();
                        view! {
                            <CardSectionBorder />
                            <CardPreview class=class_names.code_hero>
                                <Code text=code_string />
                            </CardPreview>
                        }
                    })}
                </Show>
            </Show>
        </Card>
    }
}