Skip to content

Commit 6c592a6

Browse files
ritesh-karankalritesh-karankal
authored
Merge branch 'master' into plugin
2 parents 7aaf49f + 94a7430 commit 6c592a6

File tree

11 files changed

+878
-338
lines changed

11 files changed

+878
-338
lines changed

‎src/components/CopyValue/index.js‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import React, { useCallback, useState } from "react";
2+
import { copyToClipboard } from "../CodeBlock/copy-to-clipboard";
3+
import { Box, CustomTooltip } from "@sistent/sistent";
4+
5+
const CopyValue = ({ copyValue }) => {
6+
const [copyState, setCopyState] = useState({
7+
isCopied: false
8+
});
9+
10+
const handleCopy = useCallback(async () => {
11+
await copyToClipboard(copyValue);
12+
13+
setCopyState({
14+
isCopied: true,
15+
});
16+
17+
setTimeout(() => {
18+
setCopyState({
19+
isCopied: false,
20+
});
21+
}, 2000);
22+
}, [copyValue]);
23+
24+
25+
const getTooltipTitle = () => {
26+
if (copyState.isCopied) {
27+
return "Copied";
28+
}
29+
return "Click to copy to clipboard";
30+
};
31+
32+
return (
33+
<CustomTooltip
34+
title={getTooltipTitle()}
35+
enterDelay={600}
36+
leaveDelay={100}
37+
placement="right"
38+
>
39+
<Box
40+
component="button"
41+
role="button"
42+
tabIndex={0}
43+
aria-label={`Copy ${copyValue} to clipboard`}
44+
sx={{
45+
display: "inline-flex",
46+
alignItems: "center",
47+
cursor: "pointer",
48+
padding: "4px 8px",
49+
borderRadius: "4px",
50+
background: "transparent",
51+
fontFamily: "monospace",
52+
fontSize: "0.875rem",
53+
color: (theme) => theme.palette.text.primary,
54+
transition: "all 0.2s ease-in-out",
55+
outline: "none",
56+
border: "2px solid",
57+
width: "fit-content",
58+
minWidth: "200px",
59+
borderColor: "transparent",
60+
boxShadow: "none",
61+
"&:hover, &:focus, &:active": {
62+
backgroundColor: (theme) => theme.palette.action.hover,
63+
boxShadow: "none",
64+
},
65+
"&:focus, &:active": {
66+
borderColor: (theme) => theme.palette.primary.main,
67+
boxShadow: "none",
68+
},
69+
...(copyState.isCopied && {
70+
borderColor: (theme) => theme.palette.primary.main,
71+
backgroundColor: (theme) => theme.palette.action.hover,
72+
}),
73+
}}
74+
onClick={handleCopy}
75+
>
76+
<span>{copyValue}</span>
77+
</Box>
78+
</CustomTooltip>
79+
);
80+
};
81+
82+
export default CopyValue;

‎src/components/SistentNavigation/content.js‎

Lines changed: 40 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -56,51 +56,55 @@ export const content = [
5656
{ id: 39, link: "/projects/sistent/components/link/guidance", text: "Link" },
5757
{ id: 40, link: "/projects/sistent/components/link/code", text: "Link" },
5858

59-
{ id: 41, link: "/projects/sistent/components/modal", text: "Modal" },
60-
{ id: 42, link: "/projects/sistent/components/modal/guidance", text: "Modal" },
61-
{ id: 43, link: "/projects/sistent/components/modal/code", text: "Modal" },
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" },
6262

63-
{ id: 44, link: "/projects/sistent/components/pagination", text: "Pagination" },
64-
{ id: 45, link: "/projects/sistent/components/pagination/guidance", text: "Pagination" },
65-
{ id: 46, link: "/projects/sistent/components/pagination/code", text: "Pagination" },
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" },
6666

67-
{ id: 47, link: "/projects/sistent/components/paper", text: "Paper" },
68-
{ id: 48, link: "/projects/sistent/components/paper/guidance", text: "Paper" },
69-
{ id: 49, link: "/projects/sistent/components/paper/code", text: "Paper" },
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" },
7070

71-
{ id: 50, link: "/projects/sistent/components/popper", text: "Popper" },
72-
{ id: 51, link: "/projects/sistent/components/popper/guidance", text: "Popper" },
73-
{ id: 52, link: "/projects/sistent/components/popper/code", text: "Popper" },
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" },
7474

75-
{ id: 53, link: "/projects/sistent/components/radiogroup", text: "RadioGroup" },
76-
{ id: 54, link: "/projects/sistent/components/radiogroup/guidance", text: "RadioGroup" },
77-
{ id: 55, link: "/projects/sistent/components/radiogroup/code", text: "RadioGroup" },
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" },
7878

79-
{ id: 56, link: "/projects/sistent/components/select", text: "Select" },
80-
{ id: 57, link: "/projects/sistent/components/select/guidance", text: "Select" },
81-
{ id: 58, link: "/projects/sistent/components/select/code", text: "Select" },
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" },
8282

83-
{ id: 59, link: "/projects/sistent/components/switch", text: "Switch" },
84-
{ id: 60, link: "/projects/sistent/components/switch/guidance", text: "Switch" },
85-
{ id: 61, link: "/projects/sistent/components/switch/code", text: "Switch" },
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" },
8686

87-
{ id: 62, link: "/projects/sistent/components/tabs", text: "Tabs" },
88-
{ id: 63, link: "/projects/sistent/components/tabs/guidance", text: "Tabs" },
89-
{ id: 64, link: "/projects/sistent/components/tabs/code", text: "Tabs" },
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" },
9090

91-
{ id: 65, link: "/projects/sistent/components/text-field", text: "Text Field" },
92-
{ id: 66, link: "/projects/sistent/components/text-field/guidance", text: "Text Field" },
93-
{ id: 67, link: "/projects/sistent/components/text-field/code", text: "Text Field" },
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" },
9494

95-
{ id: 68, link: "/projects/sistent/components/text-input", text: "Text Input" },
96-
{ id: 69, link: "/projects/sistent/components/text-input/guidance", text: "Text Input" },
97-
{ id: 70, link: "/projects/sistent/components/text-input/code", text: "Text Input" },
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" },
9898

99-
{ id: 71, link: "/projects/sistent/components/toolbar", text: "Toolbar" },
100-
{ id: 72, link: "/projects/sistent/components/toolbar/guidance", text: "Toolbar" },
101-
{ id: 73, link: "/projects/sistent/components/toolbar/code", text: "Toolbar" },
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" },
102102

103-
{ id: 74, link: "/projects/sistent/components/tooltip", text: "Tooltip" },
104-
{ id: 75, link: "/projects/sistent/components/tooltip/guidance", text: "Tooltip" },
105-
{ id: 76, link: "/projects/sistent/components/tooltip/code", text: "Tooltip" },
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" },
106+
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" },
106110
];

‎src/components/SistentNavigation/index.js‎

Lines changed: 32 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { useLocation } from "@reach/router";
1212
const TOC = () => {
1313
const [expand, setExpand] = useState(false);
1414
const location = useLocation();
15-
const [expandIdenity, setExpandIdentity] = useState(
15+
const [expandIdentity, setExpandIdentity] = useState(
1616
location.pathname.includes("/identity")
1717
);
1818
const [expandComponent, setExpandComponent] = useState(
@@ -28,7 +28,7 @@ const TOC = () => {
2828
<TOCWrapper>
2929
<div className="go-back">
3030
<Link to="/projects/sistent">
31-
<HiOutlineChevronLeft />
31+
<HiOutlineChevronLeft/>
3232
<h4>Table of Contents</h4>
3333
</Link>
3434
<div className="toc-toggle-btn">
@@ -62,18 +62,19 @@ const TOC = () => {
6262
</li>
6363
<li>
6464
<div>
65-
<li
65+
<div
66+
type="button"
6667
className="toc-sub-heading identity"
6768
onClick={() => setExpandIdentity((prev) => !prev)}
6869
>
6970
Identity
70-
{expandIdenity ?
71-
<IoIosArrowDown style={{ zIndex: 2 }} /> :
72-
<IoIosArrowForward style={{ zIndex: 2 }} />
71+
{expandIdentity ?
72+
<IoIosArrowDown style={{ zIndex: 2 }}/> :
73+
<IoIosArrowForward style={{ zIndex: 2 }}/>
7374
}
74-
</li>
75-
{expandIdenity && (
76-
<div className="identity-sublinks">
75+
</div>
76+
{expandIdentity && (
77+
<ul className="identity-sublinks">
7778
<li>
7879
<Link
7980
to="/projects/sistent/identity/color"
@@ -119,42 +120,40 @@ const TOC = () => {
119120
Typography
120121
</Link>
121122
</li>
122-
</div>
123+
</ul>
123124
)}
124125
</div>
125126
</li>
126127
<li>
127128
<div>
128-
<li
129+
<div
129130
className="toc-sub-heading components"
130131
onClick={() => setExpandComponent((prev) => !prev)}
131132
>
132133
Components
133134
{expandComponent ?
134-
<IoIosArrowDown style={{ zIndex: 2 }} /> :
135-
<IoIosArrowForward style={{ zIndex: 2 }} />
135+
<IoIosArrowDown style={{ zIndex: 2 }}/> :
136+
<IoIosArrowForward style={{ zIndex: 2 }}/>
136137
}
137-
</li>
138+
</div>
138139
{expandComponent && (
139-
<div className="components-sublinks">
140-
<li>
141-
{sortedComponentArray.map((component) => (
142-
<li key={component.id}>
143-
<Link
144-
to={component.url}
145-
className={`toc-sub-heading toc-sub-inline components-item ${
146-
location.pathname.split("/")[4] === component.url.split("/")[4]
147-
? "active"
148-
: ""
149-
}`}
150-
activeClassName="active"
151-
>
152-
{component.name}
153-
</Link>
154-
</li>
155-
))}
156-
</li>
157-
</div>
140+
<ul className="components-sublinks">
141+
{sortedComponentArray.map((component) => (
142+
<li key={component.id}>
143+
<Link
144+
to={component.url}
145+
className={`toc-sub-heading toc-sub-inline components-item ${
146+
location.pathname.split("/")[4] === component.url.split("/")[4]
147+
? "active"
148+
: ""
149+
}`}
150+
activeClassName="active"
151+
>
152+
{component.name}
153+
</Link>
154+
</li>
155+
))}
156+
</ul>
158157
)}
159158
</div>
160159
</li>

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -201,7 +201,14 @@ const componentsData = [
201201
"description": "The Grid component in Sistent provides a flexible and responsive layout system for arranging content in rows and columns.",
202202
"url": "/projects/sistent/components/grid",
203203
"src": "/grid"
204-
}
204+
},
205+
{
206+
"id": 27,
207+
"name": "List",
208+
"description": "Lists are essential UI elements that allow items to be organized sequentially in a structured and readable way. They help users view, select, and interact with multiple items conveniently.",
209+
"url": "/projects/sistent/components/list",
210+
"src": "/list",
211+
},
205212
];
206213

207214
module.exports = { componentsData };

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,14 +57,14 @@ const SistentComponents = () => {
5757
</div>
5858
<div>
5959
<div className="card_bottom">
60-
<a className="learn" href={comp.url}>
60+
<div className="learn" href={comp.url}>
6161
<div className="learn-more">
6262
<div>Learn more</div>
6363
<div className="icon">
6464
<FaArrowRight />
6565
</div>
6666
</div>
67-
</a>
67+
</div>
6868
</div>
6969
</div>
7070
</div>

0 commit comments

Comments
 (0)