Skip to content

Commit 84a0d12

Browse files
naikmubashirnaikmubashir
committed
feat(sistent): add IconButton interactive code examples
Signed-off-by: Naik Mubashir <naikmubashir095@gmail.com>
1 parent bac92a8 commit 84a0d12

2 files changed

Lines changed: 384 additions & 0 deletions

File tree

‎src/sections/Projects/Sistent/components/iconbutton/code-block.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import React, { useState } from "react";
2+
import Code from "../../../../../components/CodeBlock";
3+
4+
export const CodeBlock = ({ name, code }) => {
5+
const [showCode, setShowCode] = useState(false);
6+
const onChange = () => {
7+
setShowCode((prev) => !prev);
8+
};
9+
return (
10+
<div className="show-code">
11+
<input type="checkbox" name={name} id={name} onChange={onChange} />
12+
<label htmlFor={name} className="label">
13+
Show Code
14+
</label>
15+
{showCode && <Code codeString={code} language="javascript" />}
16+
</div>
17+
);
18+
};

‎src/sections/Projects/Sistent/components/iconbutton/code.js‎

Lines changed: 366 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,366 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
5+
import { IconButton, SistentThemeProvider } from "@sistent/sistent";
6+
import { CodeBlock } from "./code-block";
7+
import { FaEdit } from "@react-icons/all-files/fa/FaEdit";
8+
import { FaHeart } from "@react-icons/all-files/fa/FaHeart";
9+
import { FaTrash } from "@react-icons/all-files/fa/FaTrash";
10+
import { FaSearch } from "@react-icons/all-files/fa/FaSearch";
11+
import { FaShare } from "@react-icons/all-files/fa/FaShare";
12+
import { SistentLayout } from "../../sistent-layout";
13+
14+
import TabButton from "../../../../../reusecore/Button";
15+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
16+
17+
const codes = [
18+
` <SistentThemeProvider>
19+
<IconButton aria-label="edit">
20+
<FaEdit />
21+
</IconButton>
22+
</SistentThemeProvider>`,
23+
` <SistentThemeProvider>
24+
<IconButton size="small" aria-label="search">
25+
<FaSearch />
26+
</IconButton>
27+
<IconButton size="medium" aria-label="edit">
28+
<FaEdit />
29+
</IconButton>
30+
<IconButton size="large" aria-label="delete">
31+
<FaTrash />
32+
</IconButton>
33+
</SistentThemeProvider>`,
34+
` <SistentThemeProvider>
35+
<IconButton color="primary" aria-label="share">
36+
<FaShare />
37+
</IconButton>
38+
<IconButton color="error" aria-label="delete">
39+
<FaTrash />
40+
</IconButton>
41+
<IconButton color="success" aria-label="favorite">
42+
<FaHeart />
43+
</IconButton>
44+
</SistentThemeProvider>`,
45+
` <SistentThemeProvider>
46+
<IconButton
47+
aria-label="favorite"
48+
sx={{
49+
backgroundColor: 'primary.main',
50+
color: 'white',
51+
'&:hover': {
52+
backgroundColor: 'primary.dark',
53+
}
54+
}}
55+
>
56+
<FaHeart />
57+
</IconButton>
58+
</SistentThemeProvider>`,
59+
` <SistentThemeProvider>
60+
<IconButton
61+
disabled
62+
aria-label="edit"
63+
>
64+
<FaEdit />
65+
</IconButton>
66+
</SistentThemeProvider>`,
67+
];
68+
69+
const IconButtonCode = () => {
70+
const location = useLocation();
71+
const { isDark } = useStyledDarkMode();
72+
73+
return (
74+
<SistentLayout title="IconButton">
75+
<div className="content">
76+
<a id="Identity">
77+
<h2>IconButton</h2>
78+
</a>
79+
<p>
80+
IconButton provides an interactive button component that displays only
81+
an icon, ideal for compact UIs where space is limited and actions are
82+
easily recognizable through iconography.
83+
</p>
84+
<div className="filterBtns">
85+
<TabButton
86+
className={
87+
location.pathname === "/projects/sistent/components/iconbutton"
88+
? "active"
89+
: ""
90+
}
91+
onClick={() => navigate("/projects/sistent/components/iconbutton")}
92+
title="Overview"
93+
/>
94+
<TabButton
95+
className={
96+
location.pathname ===
97+
"/projects/sistent/components/iconbutton/guidance"
98+
? "active"
99+
: ""
100+
}
101+
onClick={() =>
102+
navigate("/projects/sistent/components/iconbutton/guidance")
103+
}
104+
title="Guidance"
105+
/>
106+
<TabButton
107+
className={
108+
location.pathname ===
109+
"/projects/sistent/components/iconbutton/code"
110+
? "active"
111+
: ""
112+
}
113+
onClick={() =>
114+
navigate("/projects/sistent/components/iconbutton/code")
115+
}
116+
title="Code"
117+
/>
118+
</div>
119+
<div className="main-content">
120+
<p>
121+
IconButtons provide a compact way to trigger actions using only
122+
iconography. They're essential for creating clean, space-efficient
123+
interfaces.
124+
</p>
125+
<a id="Basic IconButton">
126+
<h2>Basic IconButton</h2>
127+
</a>
128+
<p>
129+
The most basic form of an IconButton with an icon and proper
130+
accessibility attributes.
131+
</p>
132+
<div className="showcase">
133+
<div className="items">
134+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
135+
<IconButton aria-label="edit">
136+
<FaEdit />
137+
</IconButton>
138+
</SistentThemeProvider>
139+
</div>
140+
<CodeBlock name="basic-iconbutton" code={codes[0]} />
141+
</div>
142+
143+
<a id="IconButton Sizes">
144+
<h2>IconButton Sizes</h2>
145+
</a>
146+
<p>
147+
IconButtons come in three sizes: small (32px), medium (40px), and
148+
large (48px). Choose the appropriate size based on your interface
149+
requirements and accessibility needs.
150+
</p>
151+
<div className="showcase">
152+
<div className="items">
153+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
154+
<IconButton size="small" aria-label="search">
155+
<FaSearch />
156+
</IconButton>
157+
<IconButton size="medium" aria-label="edit">
158+
<FaEdit />
159+
</IconButton>
160+
<IconButton size="large" aria-label="delete">
161+
<FaTrash />
162+
</IconButton>
163+
</SistentThemeProvider>
164+
</div>
165+
<CodeBlock name="iconbutton-sizes" code={codes[1]} />
166+
</div>
167+
168+
<a id="Colored IconButtons">
169+
<h2>Colored IconButtons</h2>
170+
</a>
171+
<p>
172+
IconButtons can be colored using the color prop to convey different
173+
meanings or align with your design system's color palette.
174+
</p>
175+
<div className="showcase">
176+
<div className="items">
177+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
178+
<IconButton color="primary" aria-label="share">
179+
<FaShare />
180+
</IconButton>
181+
<IconButton color="error" aria-label="delete">
182+
<FaTrash />
183+
</IconButton>
184+
<IconButton color="success" aria-label="favorite">
185+
<FaHeart />
186+
</IconButton>
187+
</SistentThemeProvider>
188+
</div>
189+
<CodeBlock name="colored-iconbuttons" code={codes[2]} />
190+
</div>
191+
192+
<a id="Custom Styled IconButton">
193+
<h2>Custom Styled IconButton</h2>
194+
</a>
195+
<p>
196+
You can customize IconButtons using the sx prop to apply custom
197+
styling, including background colors, borders, and hover effects.
198+
</p>
199+
<div className="showcase">
200+
<div className="items">
201+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
202+
<IconButton
203+
aria-label="favorite"
204+
sx={{
205+
backgroundColor: "primary.main",
206+
color: "white",
207+
"&:hover": {
208+
backgroundColor: "primary.dark",
209+
},
210+
}}
211+
>
212+
<FaHeart />
213+
</IconButton>
214+
</SistentThemeProvider>
215+
</div>
216+
<CodeBlock name="custom-styled-iconbutton" code={codes[3]} />
217+
</div>
218+
219+
<a id="Disabled IconButton">
220+
<h2>Disabled IconButton</h2>
221+
</a>
222+
<p>
223+
IconButtons can be disabled to prevent user interaction when an
224+
action is not available or appropriate.
225+
</p>
226+
<div className="showcase">
227+
<div className="items">
228+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
229+
<IconButton disabled aria-label="edit">
230+
<FaEdit />
231+
</IconButton>
232+
</SistentThemeProvider>
233+
</div>
234+
<CodeBlock name="disabled-iconbutton" code={codes[4]} />
235+
</div>
236+
237+
<a id="Props">
238+
<h2>Props</h2>
239+
</a>
240+
<p>
241+
The IconButton component accepts all standard button props plus
242+
additional customization options:
243+
</p>
244+
245+
<div className="table-container">
246+
<table className="props-table">
247+
<thead>
248+
<tr>
249+
<th>Prop</th>
250+
<th>Type</th>
251+
<th>Default</th>
252+
<th>Description</th>
253+
</tr>
254+
</thead>
255+
<tbody>
256+
<tr>
257+
<td>children</td>
258+
<td>node</td>
259+
<td>-</td>
260+
<td>The icon element to display inside the button</td>
261+
</tr>
262+
<tr>
263+
<td>size</td>
264+
<td>'small' | 'medium' | 'large'</td>
265+
<td>'medium'</td>
266+
<td>The size of the IconButton</td>
267+
</tr>
268+
<tr>
269+
<td>color</td>
270+
<td>
271+
'inherit' | 'primary' | 'secondary' | 'error' | 'info' |
272+
'success' | 'warning'
273+
</td>
274+
<td>'inherit'</td>
275+
<td>The color of the IconButton</td>
276+
</tr>
277+
<tr>
278+
<td>disabled</td>
279+
<td>bool</td>
280+
<td>false</td>
281+
<td>If true, the IconButton is disabled</td>
282+
</tr>
283+
<tr>
284+
<td>onClick</td>
285+
<td>func</td>
286+
<td>-</td>
287+
<td>Callback fired when the IconButton is clicked</td>
288+
</tr>
289+
<tr>
290+
<td>aria-label</td>
291+
<td>string</td>
292+
<td>-</td>
293+
<td>Accessibility label for screen readers (required)</td>
294+
</tr>
295+
<tr>
296+
<td>sx</td>
297+
<td>object</td>
298+
<td>-</td>
299+
<td>System prop for custom styling</td>
300+
</tr>
301+
</tbody>
302+
</table>
303+
</div>
304+
305+
<a id="Best Practices">
306+
<h2>Best Practices</h2>
307+
</a>
308+
<ul>
309+
<li>
310+
<strong>Always include aria-label:</strong> Essential for
311+
accessibility and screen readers
312+
</li>
313+
<li>
314+
<strong>Use recognizable icons:</strong> Choose icons that clearly
315+
represent the action
316+
</li>
317+
<li>
318+
<strong>Maintain adequate spacing:</strong> Ensure sufficient
319+
space between IconButtons
320+
</li>
321+
<li>
322+
<strong>Provide hover feedback:</strong> Clear visual feedback for
323+
interactive states
324+
</li>
325+
<li>
326+
<strong>Consider touch targets:</strong> Use appropriate sizes for
327+
mobile interfaces
328+
</li>
329+
<li>
330+
<strong>Test with users:</strong> Verify that icon meanings are
331+
clear to your target audience
332+
</li>
333+
</ul>
334+
335+
<a id="Common Use Cases">
336+
<h2>Common Use Cases</h2>
337+
</a>
338+
<ul>
339+
<li>
340+
<strong>Toolbar actions:</strong> Edit, delete, share, and other
341+
quick actions
342+
</li>
343+
<li>
344+
<strong>Navigation:</strong> Back, forward, close, and menu
345+
toggles
346+
</li>
347+
<li>
348+
<strong>Media controls:</strong> Play, pause, skip, and volume
349+
controls
350+
</li>
351+
<li>
352+
<strong>List item actions:</strong> Quick actions for items in
353+
lists or tables
354+
</li>
355+
<li>
356+
<strong>Toggle states:</strong> Favorite, bookmark, or
357+
follow/unfollow actions
358+
</li>
359+
</ul>
360+
</div>
361+
</div>
362+
</SistentLayout>
363+
);
364+
};
365+
366+
export default IconButtonCode;

0 commit comments

Comments
 (0)