1use gpui::Render;
2use story::{Story, StoryItem, StorySection};
3
4use crate::{IconButton, IconName};
5use crate::{IconButtonShape, Tooltip, prelude::*};
6
7pub struct IconButtonStory;
8
9impl Render for IconButtonStory {
10 fn render(&mut self, _window: &mut Window, cx: &mut Context<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).toggle_state(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 .toggle_state(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(
64 |_event, _window, _cx| {
65 println!("Clicked!");
66 },
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", IconName::Chat)
81 .tooltip(Tooltip::text("Open messages")),
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(Tooltip::text_f("Open messages"))
88 "#,
89 );
90
91 let selected_with_tooltip_button = StoryItem::new(
92 "Selected with `tooltip`",
93 IconButton::new("selected_with_tooltip_button", IconName::CaseSensitive)
94 .toggle_state(true)
95 .tooltip(Tooltip::text("Toggle inlay hints")),
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(Tooltip::text_f("Toggle inlay hints"))
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 Story::container(cx)
117 .child(Story::title_for::<IconButton>(cx))
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}