1use gpui::Render;
2use story::{StoryContainer, StoryItem, StorySection};
3
4use crate::{prelude::*, IconButtonShape, 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/ui/src/components/stories/icon_button.rs",
117 )
118 .child(StorySection::new().children(buttons))
119 .child(
120 StorySection::new().child(StoryItem::new(
121 "Square",
122 h_flex()
123 .gap_2()
124 .child(
125 IconButton::new("square-medium", IconName::Close)
126 .shape(IconButtonShape::Square)
127 .icon_size(IconSize::Medium),
128 )
129 .child(
130 IconButton::new("square-small", IconName::Close)
131 .shape(IconButtonShape::Square)
132 .icon_size(IconSize::Small),
133 )
134 .child(
135 IconButton::new("square-xsmall", IconName::Close)
136 .shape(IconButtonShape::Square)
137 .icon_size(IconSize::XSmall),
138 )
139 .child(
140 IconButton::new("square-indicator", IconName::Close)
141 .shape(IconButtonShape::Square)
142 .icon_size(IconSize::Indicator),
143 ),
144 )),
145 )
146 .into_element()
147 }
148}