1use gpui::Render;
2use story::{StoryContainer, StoryItem, StorySection};
3
4use crate::{prelude::*, Tooltip};
5use crate::{IconButton, IconName};
6
7pub struct IconButtonStory;
8
9impl Render for IconButtonStory {
10 fn render(&mut self, _cx: &mut ViewContext<Self>) -> impl IntoElement {
11 let default_button = StoryItem::new(
12 "Default",
13 IconButton::new("default_icon_button", IconName::Hash),
14 )
15 .description("Displays an icon button.")
16 .usage(
17 r#"
18 IconButton::new("default_icon_button", Icon::Hash)
19 "#,
20 );
21
22 let selected_button = StoryItem::new(
23 "Selected",
24 IconButton::new("selected_icon_button", IconName::Hash).selected(true),
25 )
26 .description("Displays an icon button that is selected.")
27 .usage(
28 r#"
29 IconButton::new("selected_icon_button", Icon::Hash).selected(true)
30 "#,
31 );
32
33 let selected_with_selected_icon = StoryItem::new(
34 "Selected with `selected_icon`",
35 IconButton::new("selected_with_selected_icon_button", IconName::AudioOn)
36 .selected(true)
37 .selected_icon(IconName::AudioOff),
38 )
39 .description(
40 "Displays an icon button that is selected and shows a different icon when selected.",
41 )
42 .usage(
43 r#"
44 IconButton::new("selected_with_selected_icon_button", Icon::AudioOn)
45 .selected(true)
46 .selected_icon(Icon::AudioOff)
47 "#,
48 );
49
50 let disabled_button = StoryItem::new(
51 "Disabled",
52 IconButton::new("disabled_icon_button", IconName::Hash).disabled(true),
53 )
54 .description("Displays an icon button that is disabled.")
55 .usage(
56 r#"
57 IconButton::new("disabled_icon_button", Icon::Hash).disabled(true)
58 "#,
59 );
60
61 let with_on_click_button = StoryItem::new(
62 "With `on_click`",
63 IconButton::new("with_on_click_button", IconName::Ai).on_click(|_event, _cx| {
64 println!("Clicked!");
65 }),
66 )
67 .description("Displays an icon button which triggers an event on click.")
68 .usage(
69 r#"
70 IconButton::new("with_on_click_button", Icon::Ai).on_click(|_event, _cx| {
71 println!("Clicked!");
72 })
73 "#,
74 );
75
76 let with_tooltip_button = StoryItem::new(
77 "With `tooltip`",
78 IconButton::new("with_tooltip_button", IconName::MessageBubbles)
79 .tooltip(|cx| Tooltip::text("Open messages", cx)),
80 )
81 .description("Displays an icon button that has a tooltip when hovered.")
82 .usage(
83 r#"
84 IconButton::new("with_tooltip_button", Icon::MessageBubbles)
85 .tooltip(|cx| Tooltip::text("Open messages", cx))
86 "#,
87 );
88
89 let selected_with_tooltip_button = StoryItem::new(
90 "Selected with `tooltip`",
91 IconButton::new("selected_with_tooltip_button", IconName::InlayHint)
92 .selected(true)
93 .tooltip(|cx| Tooltip::text("Toggle inlay hints", cx)),
94 )
95 .description("Displays a selected icon button with tooltip.")
96 .usage(
97 r#"
98 IconButton::new("selected_with_tooltip_button", Icon::InlayHint)
99 .selected(true)
100 .tooltip(|cx| Tooltip::text("Toggle inlay hints", cx))
101 "#,
102 );
103
104 let buttons = vec![
105 default_button,
106 selected_button,
107 selected_with_selected_icon,
108 disabled_button,
109 with_on_click_button,
110 with_tooltip_button,
111 selected_with_tooltip_button,
112 ];
113
114 StoryContainer::new(
115 "Icon Button",
116 "crates/ui2/src/components/stories/icon_button.rs",
117 )
118 .children(vec![StorySection::new().children(buttons)])
119 .into_element()
120
121 // Story::container()
122 // .child(Story::title_for::<IconButton>())
123 // .child(Story::label("Default"))
124 // .child(div().w_8().child(IconButton::new("icon_a", Icon::Hash)))
125 // .child(Story::label("Selected"))
126 // .child(
127 // div()
128 // .w_8()
129 // .child(IconButton::new("icon_a", Icon::Hash).selected(true)),
130 // )
131 // .child(Story::label("Selected with `selected_icon`"))
132 // .child(
133 // div().w_8().child(
134 // IconButton::new("icon_a", Icon::AudioOn)
135 // .selected(true)
136 // .selected_icon(Icon::AudioOff),
137 // ),
138 // )
139 // .child(Story::label("Disabled"))
140 // .child(
141 // div()
142 // .w_8()
143 // .child(IconButton::new("icon_a", Icon::Hash).disabled(true)),
144 // )
145 // .child(Story::label("With `on_click`"))
146 // .child(
147 // div()
148 // .w_8()
149 // .child(
150 // IconButton::new("with_on_click", Icon::Ai).on_click(|_event, _cx| {
151 // println!("Clicked!");
152 // }),
153 // ),
154 // )
155 // .child(Story::label("With `tooltip`"))
156 // .child(
157 // div().w_8().child(
158 // IconButton::new("with_tooltip", Icon::MessageBubbles)
159 // .tooltip(|cx| Tooltip::text("Open messages", cx)),
160 // ),
161 // )
162 // .child(Story::label("Selected with `tooltip`"))
163 // .child(
164 // div().w_8().child(
165 // IconButton::new("selected_with_tooltip", Icon::InlayHint)
166 // .selected(true)
167 // .tooltip(|cx| Tooltip::text("Toggle inlay hints", cx)),
168 // ),
169 // )
170 }
171}