1use gpui::Render;
2use story::{Story, 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 Story::container()
115 .child(Story::title_for::<IconButton>())
116 .child(StorySection::new().children(buttons))
117 .child(
118 StorySection::new().child(StoryItem::new(
119 "Square",
120 h_flex()
121 .gap_2()
122 .child(
123 IconButton::new("square-medium", IconName::Close)
124 .shape(IconButtonShape::Square)
125 .icon_size(IconSize::Medium),
126 )
127 .child(
128 IconButton::new("square-small", IconName::Close)
129 .shape(IconButtonShape::Square)
130 .icon_size(IconSize::Small),
131 )
132 .child(
133 IconButton::new("square-xsmall", IconName::Close)
134 .shape(IconButtonShape::Square)
135 .icon_size(IconSize::XSmall),
136 )
137 .child(
138 IconButton::new("square-indicator", IconName::Close)
139 .shape(IconButtonShape::Square)
140 .icon_size(IconSize::Indicator),
141 ),
142 )),
143 )
144 .into_element()
145 }
146}