Skip to content

Commit 907af22

Browse files
ritesh-karankalritesh-karankal
authored
Merge pull request #6985 from Rajesh-Nagarajan-11/Chip-sistent
Added `Chip` component to Sistent components page
2 parents b5c6f50 + f7bf5d1 commit 907af22

5 files changed

Lines changed: 615 additions & 55 deletions

File tree

‎src/components/SistentNavigation/content.js‎

Lines changed: 59 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -34,77 +34,81 @@ export const content = [
3434
{ id: 23, link: "/projects/sistent/components/button-group/guidance", text: "Button Group" },
3535
{ id: 24, link: "/projects/sistent/components/button-group/code", text: "Button Group" },
3636

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" },
37+
{ id: 25, link: "/projects/sistent/components/chip", text: "Chip" },
38+
{ id: 26, link: "/projects/sistent/components/chip/guidance", text: "Chip" },
39+
{ id: 27, link: "/projects/sistent/components/chip/code", text: "Chip" },
4040

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" },
41+
{ id: 28, link: "/projects/sistent/components/circularprogress", text: "Circular Progress" },
42+
{ id: 29, link: "/projects/sistent/components/circularprogress/guidance", text: "Circular Progress" },
43+
{ id: 30, link: "/projects/sistent/components/circularprogress/code", text: "Circular Progress" },
4444

45-
{ id: 31, link: "/projects/sistent/components/dialog", text: "Dialog" },
46-
{ id: 32, link: "/projects/sistent/components/dialog/guidance", text: "Dialog" },
47-
{ id: 33, link: "/projects/sistent/components/dialog/code", text: "Dialog" },
45+
{ id: 31, link: "/projects/sistent/components/container", text: "Container" },
46+
{ id: 32, link: "/projects/sistent/components/container/guidance", text: "Container" },
47+
{ id: 33, link: "/projects/sistent/components/container/code", text: "Container" },
4848

49-
{ id: 34, link: "/projects/sistent/components/grid", text: "Grid" },
50-
{ id: 35, link: "/projects/sistent/components/grid/guidance", text: "Grid" },
51-
{ id: 36, link: "/projects/sistent/components/grid/code", text: "Grid" },
49+
{ id: 34, link: "/projects/sistent/components/dialog", text: "Dialog" },
50+
{ id: 35, link: "/projects/sistent/components/dialog/guidance", text: "Dialog" },
51+
{ id: 36, link: "/projects/sistent/components/dialog/code", text: "Dialog" },
5252

53-
{ id: 37, link: "/projects/sistent/components/icons", text: "Icons" },
53+
{ id: 37, link: "/projects/sistent/components/grid", text: "Grid" },
54+
{ id: 38, link: "/projects/sistent/components/grid/guidance", text: "Grid" },
55+
{ id: 39, link: "/projects/sistent/components/grid/code", text: "Grid" },
5456

55-
{ id: 38, link: "/projects/sistent/components/link", text: "Link" },
56-
{ id: 39, link: "/projects/sistent/components/link/guidance", text: "Link" },
57-
{ id: 40, link: "/projects/sistent/components/link/code", text: "Link" },
57+
{ id: 40, link: "/projects/sistent/components/icons", text: "Icons" },
5858

59-
{ id: 41, link: "/projects/sistent/components/list", text: "List" },
60-
{ id: 42, link: "/projects/sistent/components/list/guidance", text: "List" },
61-
{ id: 43, link: "/projects/sistent/components/list/code", text: "List" },
59+
{ id: 41, link: "/projects/sistent/components/link", text: "Link" },
60+
{ id: 42, link: "/projects/sistent/components/link/guidance", text: "Link" },
61+
{ id: 43, link: "/projects/sistent/components/link/code", text: "Link" },
6262

63-
{ id: 44, link: "/projects/sistent/components/modal", text: "Modal" },
64-
{ id: 45, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
65-
{ id: 46, link: "/projects/sistent/components/modal/code", text: "Modal" },
63+
{ id: 44, link: "/projects/sistent/components/list", text: "List" },
64+
{ id: 45, link: "/projects/sistent/components/list/guidance", text: "List" },
65+
{ id: 46, link: "/projects/sistent/components/list/code", text: "List" },
6666

67-
{ id: 47, link: "/projects/sistent/components/pagination", text: "Pagination" },
68-
{ id: 48, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
69-
{ id: 49, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
67+
{ id: 47, link: "/projects/sistent/components/modal", text: "Modal" },
68+
{ id: 48, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
69+
{ id: 49, link: "/projects/sistent/components/modal/code", text: "Modal" },
7070

71-
{ id: 50, link: "/projects/sistent/components/paper", text: "Paper" },
72-
{ id: 51, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
73-
{ id: 52, link: "/projects/sistent/components/paper/code", text: "Paper" },
71+
{ id: 50, link: "/projects/sistent/components/pagination", text: "Pagination" },
72+
{ id: 51, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
73+
{ id: 52, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
7474

75-
{ id: 53, link: "/projects/sistent/components/popper", text: "Popper" },
76-
{ id: 54, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
77-
{ id: 55, link: "/projects/sistent/components/popper/code", text: "Popper" },
75+
{ id: 53, link: "/projects/sistent/components/paper", text: "Paper" },
76+
{ id: 54, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
77+
{ id: 55, link: "/projects/sistent/components/paper/code", text: "Paper" },
7878

79-
{ id: 56, link: "/projects/sistent/components/radiogroup", text: "RadioGroup" },
80-
{ id: 57, link: "/projects/sistent/components/radiogroup/guidance", text: "RadioGroup" },
81-
{ id: 58, link: "/projects/sistent/components/radiogroup/code", text: "RadioGroup" },
79+
{ id: 56, link: "/projects/sistent/components/popper", text: "Popper" },
80+
{ id: 57, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
81+
{ id: 58, link: "/projects/sistent/components/popper/code", text: "Popper" },
8282

83-
{ id: 59, link: "/projects/sistent/components/select", text: "Select" },
84-
{ id: 60, link: "/projects/sistent/components/select/guidance", text: "Select" },
85-
{ id: 61, link: "/projects/sistent/components/select/code", text: "Select" },
83+
{ id: 59, link: "/projects/sistent/components/radiogroup", text: "RadioGroup" },
84+
{ id: 60, link: "/projects/sistent/components/radiogroup/guidance", text: "RadioGroup" },
85+
{ id: 61, link: "/projects/sistent/components/radiogroup/code", text: "RadioGroup" },
8686

87-
{ id: 62, link: "/projects/sistent/components/switch", text: "Switch" },
88-
{ id: 63, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
89-
{ id: 64, link: "/projects/sistent/components/switch/code", text: "Switch" },
87+
{ id: 62, link: "/projects/sistent/components/select", text: "Select" },
88+
{ id: 63, link: "/projects/sistent/components/select/guidance", text: "Select" },
89+
{ id: 64, link: "/projects/sistent/components/select/code", text: "Select" },
9090

91-
{ id: 65, link: "/projects/sistent/components/tabs", text: "Tabs" },
92-
{ id: 66, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
93-
{ id: 67, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
91+
{ id: 65, link: "/projects/sistent/components/switch", text: "Switch" },
92+
{ id: 66, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
93+
{ id: 67, link: "/projects/sistent/components/switch/code", text: "Switch" },
9494

95-
{ id: 68, link: "/projects/sistent/components/text-field", text: "Text Field" },
96-
{ id: 69, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
97-
{ id: 70, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
95+
{ id: 68, link: "/projects/sistent/components/tabs", text: "Tabs" },
96+
{ id: 69, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
97+
{ id: 70, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
9898

99-
{ id: 71, link: "/projects/sistent/components/text-input", text: "Text Input" },
100-
{ id: 72, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
101-
{ id: 73, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
99+
{ id: 71, link: "/projects/sistent/components/text-field", text: "Text Field" },
100+
{ id: 72, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
101+
{ id: 73, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
102102

103-
{ id: 74, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
104-
{ id: 75, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
105-
{ id: 76, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
103+
{ id: 74, link: "/projects/sistent/components/text-input", text: "Text Input" },
104+
{ id: 75, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
105+
{ id: 76, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
106106

107-
{ id: 77, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
108-
{ id: 78, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
109-
{ id: 79, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
107+
{ id: 77, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
108+
{ id: 78, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
109+
{ id: 79, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
110+
111+
{ id: 80, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
112+
{ id: 81, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
113+
{ id: 82, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
110114
];

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

Lines changed: 206 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,206 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
5+
import { Chip, SistentThemeProvider, DesignIcon } from "@sistent/sistent";
6+
import { CodeBlock } from "../button/code-block";
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+
<Chip label="Basic Chip" />
15+
</SistentThemeProvider>`,
16+
` <SistentThemeProvider>
17+
<Chip label="Clickable" clickable />
18+
</SistentThemeProvider>`,
19+
` <SistentThemeProvider>
20+
<Chip label="Deletable" onDelete={() => {}} />
21+
</SistentThemeProvider>`,
22+
` <SistentThemeProvider>
23+
<Chip label="Filled" variant="filled" />
24+
<Chip label="Outlined" variant="outlined" />
25+
</SistentThemeProvider>`,
26+
` <SistentThemeProvider>
27+
<Chip label="Small" size="small" />
28+
<Chip label="Medium" size="medium" />
29+
</SistentThemeProvider>`,
30+
` <SistentThemeProvider>
31+
<Chip label="Design" variant="outlined" icon={<DesignIcon />} />
32+
</SistentThemeProvider>`,
33+
` <SistentThemeProvider>
34+
<Chip label="Primary" color="primary" />
35+
<Chip label="Secondary" color="secondary" />
36+
<Chip label="Success" color="success" />
37+
<Chip label="Error" color="error" />
38+
</SistentThemeProvider>`,
39+
];
40+
41+
const ChipCode = () => {
42+
const location = useLocation();
43+
const { isDark } = useStyledDarkMode();
44+
45+
return (
46+
<SistentLayout title="Chip">
47+
<div className="content">
48+
<a id="Identity">
49+
<h2>Chip</h2>
50+
</a>
51+
<p>
52+
Chips are compact elements that represent an input, attribute, or action.
53+
They allow users to enter information, make selections, filter content, or trigger actions.
54+
</p>
55+
<div className="filterBtns">
56+
<TabButton
57+
className={
58+
location.pathname === "/projects/sistent/components/chip"
59+
? "active"
60+
: ""
61+
}
62+
onClick={() => navigate("/projects/sistent/components/chip")}
63+
title="Overview"
64+
/>
65+
<TabButton
66+
className={
67+
location.pathname ===
68+
"/projects/sistent/components/chip/guidance"
69+
? "active"
70+
: ""
71+
}
72+
onClick={() =>
73+
navigate("/projects/sistent/components/chip/guidance")
74+
}
75+
title="Guidance"
76+
/>
77+
<TabButton
78+
className={
79+
location.pathname === "/projects/sistent/components/chip/code"
80+
? "active"
81+
: ""
82+
}
83+
onClick={() => navigate("/projects/sistent/components/chip/code")}
84+
title="Code"
85+
/>
86+
</div>
87+
<div className="main-content">
88+
<p>
89+
Chips can be used to display information, enable user interaction,
90+
and provide a way to input or filter data.
91+
</p>
92+
<a id="Basic Chip">
93+
<h2>Basic Chip</h2>
94+
</a>
95+
<p>The chip comes in different types: Basic, Clickable, and Deletable.</p>
96+
<h3>Basic Chip</h3>
97+
<p>
98+
Basic chips display simple information and are typically non-interactive.
99+
They're useful for showing tags, categories, or labels.
100+
</p>
101+
<div className="showcase">
102+
<div className="items">
103+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
104+
<Chip label="Basic Chip" />
105+
</SistentThemeProvider>
106+
</div>
107+
<CodeBlock name="basic-chip" code={codes[0]} />
108+
</div>
109+
<h3>Clickable Chip</h3>
110+
<p>
111+
Clickable chips respond to user interaction and can trigger actions
112+
when clicked.
113+
</p>
114+
<div className="showcase">
115+
<div className="items">
116+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
117+
<Chip label="Clickable" clickable />
118+
</SistentThemeProvider>
119+
</div>
120+
<CodeBlock name="clickable-chip" code={codes[1]} />
121+
</div>
122+
<h3>Deletable Chip</h3>
123+
<p>
124+
Deletable chips include a delete icon that allows users to remove them.
125+
</p>
126+
<div className="showcase">
127+
<div className="items">
128+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
129+
<Chip label="Deletable" onDelete={() => {}} />
130+
</SistentThemeProvider>
131+
</div>
132+
<CodeBlock name="deletable-chip" code={codes[2]} />
133+
</div>
134+
<a id="Variants">
135+
<h2>Variants</h2>
136+
</a>
137+
<p>
138+
Chips come in different visual styles: filled and outlined.
139+
</p>
140+
<div className="showcase">
141+
<div className="items">
142+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
143+
<Chip label="Filled" variant="filled" />
144+
<Chip label="Outlined" variant="outlined" />
145+
</SistentThemeProvider>
146+
</div>
147+
<CodeBlock name="chip-variants" code={codes[3]} />
148+
</div>
149+
<a id="Sizes">
150+
<h2>Sizes</h2>
151+
</a>
152+
<p>
153+
Chips are available in different sizes: small and medium.
154+
</p>
155+
<div className="showcase">
156+
<div className="items">
157+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
158+
<Chip label="Small" size="small" />
159+
<Chip label="Medium" size="medium" />
160+
</SistentThemeProvider>
161+
</div>
162+
<CodeBlock name="chip-sizes" code={codes[4]} />
163+
</div>
164+
<a id="Logo Chip">
165+
<h2>Logo Chip</h2>
166+
</a>
167+
<p>
168+
Chips can display icons alongside text labels for enhanced visual identification.
169+
</p>
170+
<div className="showcase">
171+
<div className="items">
172+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
173+
<Chip
174+
label="Design"
175+
variant="outlined"
176+
icon={<DesignIcon style={{ marginLeft: "8px", marginRight: "8px" }} />}
177+
style={{ paddingLeft: "4px", margin: "0 8px" }}
178+
/>
179+
</SistentThemeProvider>
180+
</div>
181+
<CodeBlock name="logo-chip" code={codes[5]} />
182+
</div>
183+
<a id="Colors">
184+
<h2>Colors</h2>
185+
</a>
186+
<p>
187+
Chips can use different colors to convey meaning or status.
188+
</p>
189+
<div className="showcase">
190+
<div className="items">
191+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
192+
<Chip label="Primary" color="primary" />
193+
<Chip label="Secondary" color="secondary" />
194+
<Chip label="Success" color="success" />
195+
<Chip label="Error" color="error" />
196+
</SistentThemeProvider>
197+
</div>
198+
<CodeBlock name="chip-colors" code={codes[6]} />
199+
</div>
200+
</div>
201+
</div>
202+
</SistentLayout>
203+
);
204+
};
205+
206+
export default ChipCode;

0 commit comments

Comments
 (0)