Skip to content

Commit 7bc8dd6

Browse files
vr-varadvr-varad
authored
Merge pull request #6751 from Rajesh-Nagarajan-11/add-badge-component
Added `Badge` component to Sistent components page
2 parents 38577e8 + 5576307 commit 7bc8dd6

5 files changed

Lines changed: 819 additions & 49 deletions

File tree

‎src/components/SistentNavigation/content.js‎

Lines changed: 53 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -18,69 +18,73 @@ export const content = [
1818
{ id: 11, link: "/projects/sistent/components/backdrop/guidance", text: "Backdrop" },
1919
{ id: 12, link: "/projects/sistent/components/backdrop/code", text: "Backdrop" },
2020

21-
{ id: 13, link: "/projects/sistent/components/box", text: "Box" },
22-
{ id: 14, link: "/projects/sistent/components/box/guidance", text: "Box" },
23-
{ id: 15, link: "/projects/sistent/components/box/code", text: "Box" },
21+
{ id: 13, link: "/projects/sistent/components/badge", text: "Badge" },
22+
{ id: 14, link: "/projects/sistent/components/badge/guidance", text: "Badge" },
23+
{ id: 15, link: "/projects/sistent/components/badge/code", text: "Badge" },
2424

25-
{ id: 16, link: "/projects/sistent/components/button", text: "Button" },
26-
{ id: 17, link: "/projects/sistent/components/button/guidance", text: "Button" },
27-
{ id: 18, link: "/projects/sistent/components/button/code", text: "Button" },
25+
{ id: 16, link: "/projects/sistent/components/box", text: "Box" },
26+
{ id: 17, link: "/projects/sistent/components/box/guidance", text: "Box" },
27+
{ id: 18, link: "/projects/sistent/components/box/code", text: "Box" },
2828

29-
{ id: 19, link: "/projects/sistent/components/button-group", text: "Button Group" },
30-
{ id: 20, link: "/projects/sistent/components/button-group/guidance", text: "Button Group" },
31-
{ id: 21, link: "/projects/sistent/components/button-group/code", text: "Button Group" },
29+
{ id: 19, link: "/projects/sistent/components/button", text: "Button" },
30+
{ id: 20, link: "/projects/sistent/components/button/guidance", text: "Button" },
31+
{ id: 21, link: "/projects/sistent/components/button/code", text: "Button" },
3232

33-
{ id: 22, link: "/projects/sistent/components/circularprogress", text: "Circular Progress" },
34-
{ id: 23, link: "/projects/sistent/components/circularprogress/guidance", text: "Circular Progress" },
35-
{ id: 24, link: "/projects/sistent/components/circularprogress/code", text: "Circular Progress" },
33+
{ id: 22, link: "/projects/sistent/components/button-group", text: "Button Group" },
34+
{ id: 23, link: "/projects/sistent/components/button-group/guidance", text: "Button Group" },
35+
{ id: 24, link: "/projects/sistent/components/button-group/code", text: "Button Group" },
3636

37-
{ id: 25, link: "/projects/sistent/components/container", text: "Container" },
38-
{ id: 26, link: "/projects/sistent/components/container/guidance", text: "Container" },
39-
{ id: 27, link: "/projects/sistent/components/container/code", text: "Container" },
37+
{ id: 25, link: "/projects/sistent/components/circularprogress", text: "Circular Progress" },
38+
{ id: 26, link: "/projects/sistent/components/circularprogress/guidance", text: "Circular Progress" },
39+
{ id: 27, link: "/projects/sistent/components/circularprogress/code", text: "Circular Progress" },
4040

41-
{ id: 28, link: "/projects/sistent/components/icons", text: "Icons" },
41+
{ id: 28, link: "/projects/sistent/components/container", text: "Container" },
42+
{ id: 29, link: "/projects/sistent/components/container/guidance", text: "Container" },
43+
{ id: 30, link: "/projects/sistent/components/container/code", text: "Container" },
4244

43-
{ id: 29, link: "/projects/sistent/components/link", text: "Link" },
44-
{ id: 30, link: "/projects/sistent/components/link/guidance", text: "Link" },
45-
{ id: 31, link: "/projects/sistent/components/link/code", text: "Link" },
45+
{ id: 31, link: "/projects/sistent/components/icons", text: "Icons" },
4646

47-
{ id: 32, link: "/projects/sistent/components/modal", text: "Modal" },
48-
{ id: 33, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
49-
{ id: 34, link: "/projects/sistent/components/modal/code", text: "Modal" },
47+
{ id: 32, link: "/projects/sistent/components/link", text: "Link" },
48+
{ id: 33, link: "/projects/sistent/components/link/guidance", text: "Link" },
49+
{ id: 34, link: "/projects/sistent/components/link/code", text: "Link" },
5050

51-
{ id: 35, link: "/projects/sistent/components/pagination", text: "Pagination" },
52-
{ id: 36, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
53-
{ id: 37, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
51+
{ id: 35, link: "/projects/sistent/components/modal", text: "Modal" },
52+
{ id: 36, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
53+
{ id: 37, link: "/projects/sistent/components/modal/code", text: "Modal" },
5454

55-
{ id: 38, link: "/projects/sistent/components/paper", text: "Paper" },
56-
{ id: 39, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
57-
{ id: 40, link: "/projects/sistent/components/paper/code", text: "Paper" },
55+
{ id: 38, link: "/projects/sistent/components/pagination", text: "Pagination" },
56+
{ id: 39, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
57+
{ id: 40, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
5858

59-
{ id: 41, link: "/projects/sistent/components/popper", text: "Popper" },
60-
{ id: 42, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
61-
{ id: 43, link: "/projects/sistent/components/popper/code", text: "Popper" },
59+
{ id: 41, link: "/projects/sistent/components/paper", text: "Paper" },
60+
{ id: 42, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
61+
{ id: 43, link: "/projects/sistent/components/paper/code", text: "Paper" },
6262

63-
{ id: 44, link: "/projects/sistent/components/select", text: "Select" },
64-
{ id: 45, link: "/projects/sistent/components/select/guidance", text: "Select" },
65-
{ id: 46, link: "/projects/sistent/components/select/code", text: "Select" },
63+
{ id: 44, link: "/projects/sistent/components/popper", text: "Popper" },
64+
{ id: 45, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
65+
{ id: 46, link: "/projects/sistent/components/popper/code", text: "Popper" },
6666

67-
{ id: 47, link: "/projects/sistent/components/switch", text: "Switch" },
68-
{ id: 48, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
69-
{ id: 49, link: "/projects/sistent/components/switch/code", text: "Switch" },
67+
{ id: 47, link: "/projects/sistent/components/select", text: "Select" },
68+
{ id: 48, link: "/projects/sistent/components/select/guidance", text: "Select" },
69+
{ id: 49, link: "/projects/sistent/components/select/code", text: "Select" },
7070

71-
{ id: 50, link: "/projects/sistent/components/tabs", text: "Tabs" },
72-
{ id: 51, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
73-
{ id: 52, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
71+
{ id: 50, link: "/projects/sistent/components/switch", text: "Switch" },
72+
{ id: 51, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
73+
{ id: 52, link: "/projects/sistent/components/switch/code", text: "Switch" },
7474

75-
{ id: 53, link: "/projects/sistent/components/text-field", text: "Text Field" },
76-
{ id: 54, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
77-
{ id: 55, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
75+
{ id: 53, link: "/projects/sistent/components/tabs", text: "Tabs" },
76+
{ id: 54, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
77+
{ id: 55, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
7878

79-
{ id: 56, link: "/projects/sistent/components/text-input", text: "Text Input" },
80-
{ id: 57, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
81-
{ id: 58, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
79+
{ id: 56, link: "/projects/sistent/components/text-field", text: "Text Field" },
80+
{ id: 57, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
81+
{ id: 58, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
8282

83-
{ id: 59, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
84-
{ id: 60, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
85-
{ id: 61, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
83+
{ id: 59, link: "/projects/sistent/components/text-input", text: "Text Input" },
84+
{ id: 60, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
85+
{ id: 61, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
86+
87+
{ id: 62, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
88+
{ id: 63, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
89+
{ id: 64, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
8690
];

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

Lines changed: 256 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,256 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
import { Badge, SistentThemeProvider, Avatar } from "@sistent/sistent";
5+
import { CodeBlock } from "../button/code-block";
6+
import MailIcon from "@mui/icons-material/Mail";
7+
import { SistentLayout } from "../../sistent-layout";
8+
9+
import TabButton from "../../../../../reusecore/Button";
10+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
11+
12+
const codes = [
13+
` <SistentThemeProvider>
14+
<Badge badgeContent={4} color="primary">
15+
<MailIcon />
16+
</Badge>
17+
</SistentThemeProvider>`,
18+
` <SistentThemeProvider>
19+
<Badge variant="dot" color="secondary">
20+
<MailIcon />
21+
</Badge>
22+
</SistentThemeProvider>`,
23+
` <SistentThemeProvider>
24+
<Badge badgeContent={4} color="primary" />
25+
<Badge badgeContent={4} color="secondary" />
26+
<Badge badgeContent={4} color="error" />
27+
<Badge badgeContent={4} color="warning" />
28+
<Badge badgeContent={4} color="success" />
29+
</SistentThemeProvider>`,
30+
` <SistentThemeProvider>
31+
<Badge
32+
badgeContent={4}
33+
color="primary"
34+
anchorOrigin={{
35+
vertical: 'top',
36+
horizontal: 'right',
37+
}}
38+
>
39+
<MailIcon />
40+
</Badge>
41+
</SistentThemeProvider>`,
42+
` <SistentThemeProvider>
43+
<Avatar>
44+
<Badge
45+
overlap="circular"
46+
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
47+
variant="dot"
48+
color="success"
49+
>
50+
U
51+
</Badge>
52+
</Avatar>
53+
</SistentThemeProvider>`,
54+
];
55+
56+
const BadgeCode = () => {
57+
const location = useLocation();
58+
const { isDark } = useStyledDarkMode();
59+
60+
return (
61+
<SistentLayout title="Badge">
62+
<div className="content">
63+
<a id="Identity">
64+
<h2>Badge</h2>
65+
</a>
66+
<p>
67+
A badge is a small piece of information that is used to convey a
68+
specific message or status. It is often used to provide additional
69+
context or information about an item, such as a notification count,
70+
status indicator, or label.
71+
</p>
72+
<div className="filterBtns">
73+
<TabButton
74+
className={
75+
location.pathname === "/projects/sistent/components/badge"
76+
? "active"
77+
: ""
78+
}
79+
onClick={() => navigate("/projects/sistent/components/badge")}
80+
title="Overview"
81+
/>
82+
<TabButton
83+
className={
84+
location.pathname ===
85+
"/projects/sistent/components/badge/guidance"
86+
? "active"
87+
: ""
88+
}
89+
onClick={() =>
90+
navigate("/projects/sistent/components/badge/guidance")
91+
}
92+
title="Guidance"
93+
/>
94+
<TabButton
95+
className={
96+
location.pathname === "/projects/sistent/components/badge/code"
97+
? "active"
98+
: ""
99+
}
100+
onClick={() => navigate("/projects/sistent/components/badge/code")}
101+
title="Code"
102+
/>
103+
</div>
104+
<div className="main-content">
105+
<p>
106+
Badges display counts, small information indicators, or status
107+
markers that are attached to other interface elements.
108+
</p>
109+
<a id="Basic Badge">
110+
<h2>Basic Badge</h2>
111+
</a>
112+
<p>
113+
Examples of badges containing text, primarily using the badgeContent
114+
prop.
115+
</p>
116+
<div className="showcase">
117+
<div className="items">
118+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
119+
<Badge badgeContent={4} color="primary">
120+
<MailIcon />
121+
</Badge>
122+
</SistentThemeProvider>
123+
</div>
124+
<CodeBlock name="basic-badge" code={codes[0]} />
125+
</div>
126+
<h3>Dot Badge</h3>
127+
<p>The dot badge shows a small dot indicator without any content.</p>
128+
<div className="showcase">
129+
<div className="items">
130+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
131+
<Badge variant="dot" color="secondary">
132+
<MailIcon />
133+
</Badge>
134+
</SistentThemeProvider>
135+
</div>
136+
<CodeBlock name="dot-badge" code={codes[1]} />
137+
</div>
138+
<h3>Badge Colors</h3>
139+
<p>Use the color prop to apply theme palette colors to badges.</p>
140+
<div className="showcase">
141+
<div className="items">
142+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
143+
<div
144+
style={{
145+
display: "flex",
146+
justifyContent: "center",
147+
gap: "20px",
148+
}}
149+
>
150+
<Badge badgeContent={4} color="primary">
151+
<MailIcon />
152+
</Badge>
153+
<Badge badgeContent={4} color="secondary">
154+
<MailIcon />
155+
</Badge>
156+
<Badge badgeContent={4} color="error">
157+
<MailIcon />
158+
</Badge>
159+
<Badge badgeContent={4} color="warning">
160+
<MailIcon />
161+
</Badge>
162+
<Badge badgeContent={4} color="success">
163+
<MailIcon />
164+
</Badge>
165+
</div>
166+
</SistentThemeProvider>
167+
</div>
168+
<CodeBlock name="badge-colors" code={codes[2]} />
169+
</div>
170+
<a id="Badge Position">
171+
<h2>Badge Position</h2>
172+
</a>
173+
<p>Use the anchorOrigin prop to change the position of the badge.</p>
174+
<div className="showcase">
175+
<div className="items">
176+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
177+
<div
178+
style={{
179+
display: "flex",
180+
justifyContent: "center",
181+
gap: "20px",
182+
}}
183+
>
184+
<Badge
185+
badgeContent={4}
186+
color="primary"
187+
anchorOrigin={{
188+
vertical: "top",
189+
horizontal: "right",
190+
}}
191+
>
192+
<MailIcon />
193+
</Badge>
194+
<Badge
195+
badgeContent={4}
196+
color="primary"
197+
anchorOrigin={{
198+
vertical: "top",
199+
horizontal: "left",
200+
}}
201+
>
202+
<MailIcon />
203+
</Badge>
204+
<Badge
205+
badgeContent={4}
206+
color="primary"
207+
anchorOrigin={{
208+
vertical: "bottom",
209+
horizontal: "right",
210+
}}
211+
>
212+
<MailIcon />
213+
</Badge>
214+
<Badge
215+
badgeContent={4}
216+
color="primary"
217+
anchorOrigin={{
218+
vertical: "bottom",
219+
horizontal: "left",
220+
}}
221+
>
222+
<MailIcon />
223+
</Badge>
224+
</div>
225+
</SistentThemeProvider>
226+
</div>
227+
<CodeBlock name="badge-position" code={codes[3]} />
228+
</div>
229+
<a id="Badge with Avatar">
230+
<h2>Badge with Avatar</h2>
231+
</a>
232+
<p>Badges can be used with avatars to show user status.</p>
233+
<div className="showcase">
234+
<div className="items">
235+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
236+
<Avatar>
237+
<Badge
238+
overlap="circular"
239+
anchorOrigin={{ vertical: "bottom", horizontal: "right" }}
240+
variant="dot"
241+
color="success"
242+
>
243+
U
244+
</Badge>
245+
</Avatar>
246+
</SistentThemeProvider>
247+
</div>
248+
<CodeBlock name="badge-avatar" code={codes[4]} />
249+
</div>
250+
</div>
251+
</div>
252+
</SistentLayout>
253+
);
254+
};
255+
256+
export default BadgeCode;

0 commit comments

Comments
 (0)