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