Skip to content

Commit 968b3e0

Browse files
Vaibhavsg17Vaibhavsg17
authored
Merge branch 'master' into improved-event-page-performance
2 parents 041cdae + 62fe668 commit 968b3e0

File tree

5 files changed

+806
-43
lines changed

5 files changed

+806
-43
lines changed

‎src/components/SistentNavigation/content.js‎

Lines changed: 50 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -57,61 +57,68 @@ export const content = [
5757
{ id: 38, link: "/projects/sistent/components/grid/guidance", text: "Grid" },
5858
{ id: 39, link: "/projects/sistent/components/grid/code", text: "Grid" },
5959

60-
{ id: 40, link: "/projects/sistent/components/icons", text: "Icons" },
60+
{ id: 40, link: "/projects/sistent/components/iconbutton", text: "IconButton" },
61+
{ id: 41, link: "/projects/sistent/components/iconbutton/guidance", text: "IconButton" },
62+
{ id: 42, link: "/projects/sistent/components/iconbutton/code", text: "IconButton" },
6163

62-
{ id: 41, link: "/projects/sistent/components/link", text: "Link" },
63-
{ id: 42, link: "/projects/sistent/components/link/guidance", text: "Link" },
64-
{ id: 43, link: "/projects/sistent/components/link/code", text: "Link" },
64+
{ id: 43, link: "/projects/sistent/components/icons", text: "Icons" },
6565

66-
{ id: 44, link: "/projects/sistent/components/list", text: "List" },
67-
{ id: 45, link: "/projects/sistent/components/list/guidance", text: "List" },
68-
{ id: 46, link: "/projects/sistent/components/list/code", text: "List" },
66+
{ id: 44, link: "/projects/sistent/components/link", text: "Link" },
67+
{ id: 45, link: "/projects/sistent/components/link/guidance", text: "Link" },
68+
{ id: 46, link: "/projects/sistent/components/link/code", text: "Link" },
6969

70-
{ id: 47, link: "/projects/sistent/components/modal", text: "Modal" },
71-
{ id: 48, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
72-
{ id: 49, link: "/projects/sistent/components/modal/code", text: "Modal" },
70+
{ id: 47, link: "/projects/sistent/components/list", text: "List" },
71+
{ id: 48, link: "/projects/sistent/components/list/guidance", text: "List" },
72+
{ id: 49, link: "/projects/sistent/components/list/code", text: "List" },
7373

74-
{ id: 50, link: "/projects/sistent/components/pagination", text: "Pagination" },
75-
{ id: 51, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
76-
{ id: 52, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
74+
{ id: 50, link: "/projects/sistent/components/modal", text: "Modal" },
75+
{ id: 51, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
76+
{ id: 52, link: "/projects/sistent/components/modal/code", text: "Modal" },
7777

78-
{ id: 53, link: "/projects/sistent/components/paper", text: "Paper" },
79-
{ id: 54, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
80-
{ id: 55, link: "/projects/sistent/components/paper/code", text: "Paper" },
78+
{ id: 53, link: "/projects/sistent/components/pagination", text: "Pagination" },
79+
{ id: 54, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
80+
{ id: 55, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
8181

82-
{ id: 56, link: "/projects/sistent/components/popper", text: "Popper" },
83-
{ id: 57, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
84-
{ id: 58, link: "/projects/sistent/components/popper/code", text: "Popper" },
82+
{ id: 56, link: "/projects/sistent/components/paper", text: "Paper" },
83+
{ id: 57, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
84+
{ id: 58, link: "/projects/sistent/components/paper/code", text: "Paper" },
8585

86-
{ id: 59, link: "/projects/sistent/components/radiogroup", text: "RadioGroup" },
87-
{ id: 60, link: "/projects/sistent/components/radiogroup/guidance", text: "RadioGroup" },
88-
{ id: 61, link: "/projects/sistent/components/radiogroup/code", text: "RadioGroup" },
86+
{ id: 59, link: "/projects/sistent/components/popper", text: "Popper" },
87+
{ id: 60, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
88+
{ id: 61, link: "/projects/sistent/components/popper/code", text: "Popper" },
8989

90-
{ id: 62, link: "/projects/sistent/components/select", text: "Select" },
91-
{ id: 63, link: "/projects/sistent/components/select/guidance", text: "Select" },
92-
{ id: 64, link: "/projects/sistent/components/select/code", text: "Select" },
90+
{ id: 62, link: "/projects/sistent/components/radiogroup", text: "RadioGroup" },
91+
{ id: 63, link: "/projects/sistent/components/radiogroup/guidance", text: "RadioGroup" },
92+
{ id: 64, link: "/projects/sistent/components/radiogroup/code", text: "RadioGroup" },
9393

94-
{ id: 65, link: "/projects/sistent/components/switch", text: "Switch" },
95-
{ id: 66, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
96-
{ id: 67, link: "/projects/sistent/components/switch/code", text: "Switch" },
94+
{ id: 65, link: "/projects/sistent/components/select", text: "Select" },
95+
{ id: 66, link: "/projects/sistent/components/select/guidance", text: "Select" },
96+
{ id: 67, link: "/projects/sistent/components/select/code", text: "Select" },
9797

98-
{ id: 68, link: "/projects/sistent/components/tabs", text: "Tabs" },
99-
{ id: 69, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
100-
{ id: 70, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
98+
{ id: 68, link: "/projects/sistent/components/switch", text: "Switch" },
99+
{ id: 69, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
100+
{ id: 70, link: "/projects/sistent/components/switch/code", text: "Switch" },
101101

102-
{ id: 71, link: "/projects/sistent/components/text-field", text: "Text Field" },
103-
{ id: 72, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
104-
{ id: 73, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
102+
{ id: 71, link: "/projects/sistent/components/tabs", text: "Tabs" },
103+
{ id: 72, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
104+
{ id: 73, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
105+
106+
{ id: 74, link: "/projects/sistent/components/text-field", text: "Text Field" },
107+
{ id: 75, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
108+
{ id: 76, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
109+
110+
{ id: 77, link: "/projects/sistent/components/text-input", text: "Text Input" },
111+
{ id: 78, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
112+
{ id: 79, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
113+
114+
{ id: 80, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
115+
{ id: 81, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
116+
{ id: 82, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
117+
118+
{ id: 83, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
119+
{ id: 84, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
120+
{ id: 85, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
105121

106-
{ id: 74, link: "/projects/sistent/components/text-input", text: "Text Input" },
107-
{ id: 75, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
108-
{ id: 76, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
109122

110-
{ id: 77, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
111-
{ id: 78, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
112-
{ id: 79, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
113123

114-
{ id: 80, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
115-
{ id: 81, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
116-
{ id: 82, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
117124
];

‎src/sections/Projects/Sistent/components/content.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,13 @@ const componentsData = [
216216
"url": "/projects/sistent/components/chip",
217217
"src": "/chip",
218218
},
219+
{
220+
id: 29,
221+
name: "IconButton",
222+
description: "IconButton provides an interactive button component that displays only an icon, ideal for compact UIs where space is limited and actions are easily recognizable through iconography.",
223+
url: "/projects/sistent/components/iconbutton",
224+
src: "/iconbutton",
225+
},
219226
];
220227

221228
module.exports = { componentsData };

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

Lines changed: 241 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,241 @@
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 "../button/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 compact action triggers using iconography,
122+
essential for clean, space-efficient interfaces.
123+
</p>
124+
<a id="Basic IconButton">
125+
<h2>Basic IconButton</h2>
126+
</a>
127+
<p>
128+
The most basic form of an IconButton with an icon and proper
129+
accessibility attributes.
130+
</p>
131+
<div className="showcase">
132+
<div className="items">
133+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
134+
<IconButton aria-label="edit">
135+
<FaEdit />
136+
</IconButton>
137+
</SistentThemeProvider>
138+
</div>
139+
<CodeBlock name="basic-iconbutton" code={codes[0]} />
140+
</div>
141+
142+
<a id="IconButton Sizes">
143+
<h2>IconButton Sizes</h2>
144+
</a>
145+
<p>
146+
IconButtons come in three sizes: small (32px), medium (40px), and
147+
large (48px). Choose based on interface requirements and
148+
accessibility needs.
149+
</p>
150+
<div className="showcase">
151+
<div className="items">
152+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
153+
<IconButton size="small" aria-label="search">
154+
<FaSearch />
155+
</IconButton>
156+
<IconButton size="medium" aria-label="edit">
157+
<FaEdit />
158+
</IconButton>
159+
<IconButton size="large" aria-label="delete">
160+
<FaTrash />
161+
</IconButton>
162+
</SistentThemeProvider>
163+
</div>
164+
<CodeBlock name="iconbutton-sizes" code={codes[1]} />
165+
</div>
166+
167+
<a id="Colored IconButtons">
168+
<h2>Colored IconButtons</h2>
169+
</a>
170+
<p>
171+
IconButtons can be colored using the color prop to convey different
172+
meanings or align with your design system's color palette.
173+
</p>
174+
<div className="showcase">
175+
<div className="items">
176+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
177+
<IconButton color="primary" aria-label="share">
178+
<FaShare />
179+
</IconButton>
180+
<IconButton color="error" aria-label="delete">
181+
<FaTrash />
182+
</IconButton>
183+
<IconButton color="success" aria-label="favorite">
184+
<FaHeart />
185+
</IconButton>
186+
</SistentThemeProvider>
187+
</div>
188+
<CodeBlock name="colored-iconbuttons" code={codes[2]} />
189+
</div>
190+
191+
<a id="Custom Styled IconButton">
192+
<h2>Custom Styled IconButton</h2>
193+
</a>
194+
<p>
195+
You can customize IconButtons using the sx prop to apply custom
196+
styling, including background colors, borders, and hover effects.
197+
</p>
198+
<div className="showcase">
199+
<div className="items">
200+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
201+
<IconButton
202+
aria-label="favorite"
203+
sx={{
204+
backgroundColor: "primary.main",
205+
color: "white",
206+
"&:hover": {
207+
backgroundColor: "primary.dark",
208+
},
209+
}}
210+
>
211+
<FaHeart />
212+
</IconButton>
213+
</SistentThemeProvider>
214+
</div>
215+
<CodeBlock name="custom-styled-iconbutton" code={codes[3]} />
216+
</div>
217+
218+
<a id="Disabled IconButton">
219+
<h2>Disabled IconButton</h2>
220+
</a>
221+
<p>
222+
IconButtons can be disabled to prevent user interaction when an
223+
action is not available or appropriate.
224+
</p>
225+
<div className="showcase">
226+
<div className="items">
227+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
228+
<IconButton disabled aria-label="edit">
229+
<FaEdit />
230+
</IconButton>
231+
</SistentThemeProvider>
232+
</div>
233+
<CodeBlock name="disabled-iconbutton" code={codes[4]} />
234+
</div>
235+
</div>
236+
</div>
237+
</SistentLayout>
238+
);
239+
};
240+
241+
export default IconButtonCode;

0 commit comments

Comments
 (0)