Doc card

A document in a grid: type tile, title, a three-line snippet, an optional pin and a footer. The whole card opens the document.

Summary

Q3 customer research

Nine of twelve interviewees raised onboarding. Two items need your judgement before this is shared.

JMEdited 26 October

Spreadsheet

Support tickets, September

410 fewer tickets than the August summary. The export may be missing a week.

Opened: nothing yet

Usage

use hydroxy_leptos::avatar::Avatar;
use hydroxy_leptos::doc_card::{DocCard, Jewel};
use hydroxy_leptos::icon::IconName;
use leptos::prelude::*;

pub fn demo() -> AnyView {
    let (pinned, set_pinned) = signal(true);
    let (opened, set_opened) = signal(String::from("nothing yet"));
    view! {
        <div style="display: grid; gap: var(--space-5);">
            <div style="display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-5);">
                <DocCard
                    title="Q3 customer research"
                    type_label="Summary"
                    snippet="Nine of twelve interviewees raised onboarding. Two items need your judgement before this is shared."
                    pinned=pinned
                    on_toggle_pin=move || set_pinned.update(|p| *p = !*p)
                    on_click=move || set_opened.set("Q3 customer research".into())
                >
                    <Avatar initials="JM" title="Jo Marsh" />
                    <span style="font: var(--text-xs); color: var(--text-3);">"Edited 26 October"</span>
                </DocCard>
                <DocCard
                    title="Support tickets, September"
                    type_label="Spreadsheet"
                    icon=IconName::Inbox
                    jewel=Jewel::Sapphire
                    snippet="410 fewer tickets than the August summary. The export may be missing a week."
                    on_click=move || set_opened.set("Support tickets, September".into())
                />
            </div>
            <p style="margin: 0; font: var(--text-sm); color: var(--text-2);">"Opened: " {opened}</p>
        </div>
    }
    .into_any()
}

use dioxus::prelude::*;
use hydroxy_dioxus::avatar::Avatar;
use hydroxy_dioxus::doc_card::{DocCard, Jewel};
use hydroxy_dioxus::icon::IconName;

#[component]
pub fn DocCardDemo() -> Element {
    let mut pinned = use_signal(|| true);
    let mut opened = use_signal(|| String::from("nothing yet"));
    rsx! {
        div { style: "display: grid; gap: var(--space-5);",
            div { style: "display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--space-5);",
                DocCard {
                    title: "Q3 customer research",
                    type_label: "Summary",
                    snippet: "Nine of twelve interviewees raised onboarding. Two items need your judgement before this is shared.",
                    pinned: pinned(),
                    on_toggle_pin: move |()| pinned.toggle(),
                    on_click: move |()| opened.set("Q3 customer research".into()),
                    footer: rsx! {
                        Avatar { initials: "JM", title: "Jo Marsh" }
                        span { style: "font: var(--text-xs); color: var(--text-3);", "Edited 26 October" }
                    },
                }
                DocCard {
                    title: "Support tickets, September",
                    type_label: "Spreadsheet",
                    icon: IconName::Inbox,
                    jewel: Jewel::Sapphire,
                    snippet: "410 fewer tickets than the August summary. The export may be missing a week.",
                    on_click: move |()| opened.set("Support tickets, September".into()),
                }
            }
            p { style: "margin: 0; font: var(--text-sm); color: var(--text-2);", "Opened: {opened}" }
        }
    }
}

Anatomy

Component	data-part	Renders
`DocCard`	—	article; role=button when on_click is set
	icon	Type tile tinted with the jewel
	pin	Button with aria-pressed; doesn't open the card
	title	h3, balanced across lines
	snippet	Clamped to three lines
	footer	Your content, above a hairline

Keyboard

Key	Does
`Enter / Space`	Opens the document when the card has focus

Props

Prop	Type	Notes
`title`	String	Required
`type_label`	String	What kind of document, such as Summary
`icon`	IconName	Type tile icon. Default FileText
`jewel`	Jewel	Type tile colour. Default Amethyst
`snippet`	String	A few lines of the document
`pinned`	bool	Pinned state
`on_toggle_pin`	Callback<()>	Shows the pin button
`on_click`	Callback<()>	Opens the document
`children`	View	Footer content (footer prop in Dioxus)