From 42e9800bdeac71f120c1418dcdea9bd67b9fca4d Mon Sep 17 00:00:00 2001
From: Marshall Bowers <elliott.codes@gmail.com>
Date: Mon, 9 Oct 2023 11:55:27 -0400
Subject: [PATCH] Add `Details` component

---
 crates/storybook2/src/stories/elements.rs     |  1 +
 .../src/stories/elements/details.rs           | 31 ++++++++++++++
 crates/storybook2/src/story_selector.rs       |  2 +
 crates/ui2/src/elements.rs                    |  2 +
 crates/ui2/src/elements/details.rs            | 40 +++++++++++++++++++
 5 files changed, 76 insertions(+)
 create mode 100644 crates/storybook2/src/stories/elements/details.rs
 create mode 100644 crates/ui2/src/elements/details.rs

diff --git a/crates/storybook2/src/stories/elements.rs b/crates/storybook2/src/stories/elements.rs
index f7afec4d883ce12d62df968862f9de3265cbad54..ec9a6aa86e65f41fc51260ac4d733282760fa86e 100644
--- a/crates/storybook2/src/stories/elements.rs
+++ b/crates/storybook2/src/stories/elements.rs
@@ -1,5 +1,6 @@
 pub mod avatar;
 pub mod button;
+pub mod details;
 pub mod icon;
 pub mod input;
 pub mod label;
diff --git a/crates/storybook2/src/stories/elements/details.rs b/crates/storybook2/src/stories/elements/details.rs
new file mode 100644
index 0000000000000000000000000000000000000000..889770cacd52f3a30e98b401a7347d9b7424904a
--- /dev/null
+++ b/crates/storybook2/src/stories/elements/details.rs
@@ -0,0 +1,31 @@
+use std::marker::PhantomData;
+
+use ui::prelude::*;
+use ui::Details;
+
+use crate::story::Story;
+
+#[derive(Element)]
+pub struct DetailsStory<S: 'static + Send + Sync + Clone> {
+    state_type: PhantomData<S>,
+}
+
+impl<S: 'static + Send + Sync + Clone> DetailsStory<S> {
+    pub fn new() -> Self {
+        Self {
+            state_type: PhantomData,
+        }
+    }
+
+    fn render(&mut self, cx: &mut ViewContext<S>) -> impl Element<State = S> {
+        Story::container(cx)
+            .child(Story::title_for::<_, Details<S>>(cx))
+            .child(Story::label(cx, "Default"))
+            .child(Details::new("The quick brown fox jumps over the lazy dog"))
+            .child(Story::label(cx, "With meta"))
+            .child(
+                Details::new("The quick brown fox jumps over the lazy dog")
+                    .meta_text("Sphinx of black quartz, judge my vow."),
+            )
+    }
+}
diff --git a/crates/storybook2/src/story_selector.rs b/crates/storybook2/src/story_selector.rs
index b1df686f7c1cb6c5f73436c555c5bbab42e65a34..2b0f4c8b536ea3efa2402b23e097de02a2450ee5 100644
--- a/crates/storybook2/src/story_selector.rs
+++ b/crates/storybook2/src/story_selector.rs
@@ -14,6 +14,7 @@ use ui::prelude::*;
 pub enum ElementStory {
     Avatar,
     Button,
+    Details,
     Icon,
     Input,
     Label,
@@ -26,6 +27,7 @@ impl ElementStory {
         match self {
             Self::Avatar => elements::avatar::AvatarStory::new().into_any(),
             Self::Button => elements::button::ButtonStory::new().into_any(),
+            Self::Details => elements::details::DetailsStory::new().into_any(),
             Self::Icon => elements::icon::IconStory::new().into_any(),
             Self::Input => elements::input::InputStory::new().into_any(),
             Self::Label => elements::label::LabelStory::new().into_any(),
diff --git a/crates/ui2/src/elements.rs b/crates/ui2/src/elements.rs
index 81a306d3e4508e4d7bed21b838d2befc6eaf3330..c60902ae9865e5a3756e893745e764c2d3c5f304 100644
--- a/crates/ui2/src/elements.rs
+++ b/crates/ui2/src/elements.rs
@@ -1,5 +1,6 @@
 mod avatar;
 mod button;
+mod details;
 mod icon;
 mod input;
 mod label;
@@ -9,6 +10,7 @@ mod tool_divider;
 
 pub use avatar::*;
 pub use button::*;
+pub use details::*;
 pub use icon::*;
 pub use input::*;
 pub use label::*;
diff --git a/crates/ui2/src/elements/details.rs b/crates/ui2/src/elements/details.rs
new file mode 100644
index 0000000000000000000000000000000000000000..fbf6d820d2c3692778aa6b5af3a99871daeeec90
--- /dev/null
+++ b/crates/ui2/src/elements/details.rs
@@ -0,0 +1,40 @@
+use std::marker::PhantomData;
+
+use crate::prelude::*;
+use crate::theme;
+
+#[derive(Element, Clone)]
+pub struct Details<S: 'static + Send + Sync + Clone> {
+    state_type: PhantomData<S>,
+    text: &'static str,
+    meta: Option<&'static str>,
+}
+
+impl<S: 'static + Send + Sync + Clone> Details<S> {
+    pub fn new(text: &'static str) -> Self {
+        Self {
+            state_type: PhantomData,
+            text,
+            meta: None,
+        }
+    }
+
+    pub fn meta_text(mut self, meta: &'static str) -> Self {
+        self.meta = Some(meta);
+        self
+    }
+
+    fn render(&mut self, cx: &mut ViewContext<S>) -> impl Element<State = S> {
+        let theme = theme(cx);
+
+        div()
+            // .flex()
+            // .w_full()
+            .p_1()
+            .gap_0p5()
+            .text_xs()
+            .text_color(theme.lowest.base.default.foreground)
+            .child(self.text)
+            .children(self.meta.map(|m| m))
+    }
+}