Skip to content

Commit 066b6cc

Browse files
SplinterSwordSplinterSword
committed
Added a tag and changed h3 to h2 tag
Signed-off-by: SplinterSword <sparshj2003@gmail.com>
1 parent 17028f9 commit 066b6cc

3 files changed

Lines changed: 48 additions & 28 deletions

File tree

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -221,7 +221,7 @@ const CollapseComponent = () => {
221221
return (
222222
<SistentLayout title="Collapse">
223223
<section className="content" style={{ padding: "2rem 0" }}>
224-
<a id="Layout" style={{ display: "block", marginBottom: "1.5rem" }}>
224+
<a id="Identity" style={{ display: "block", marginBottom: "1.5rem" }}>
225225
<h2 style={{ marginBottom: "0.5rem" }}>Collapse</h2>
226226
</a>
227227
<p style={{ fontSize: "1.1rem", lineHeight: "1.7", marginBottom: "2.5rem" }}>
@@ -249,13 +249,15 @@ const CollapseComponent = () => {
249249
borderRadius: "8px",
250250
boxShadow: "0 2px 8px rgba(0,0,0,0.1)"
251251
}}>
252-
<h3 style={{
253-
fontSize: "1.5rem",
254-
marginBottom: "1rem",
255-
color: isDark ? "#fff" : "#333"
256-
}}>
257-
{example.title}
258-
</h3>
252+
<a id={example.id} style={{ display: "block" }}>
253+
<h2 style={{
254+
fontSize: "1.5rem",
255+
marginBottom: "1rem",
256+
color: isDark ? "#fff" : "#333"
257+
}}>
258+
{example.title}
259+
</h2>
260+
</a>
259261
<p style={{
260262
fontSize: "1.05rem",
261263
lineHeight: "1.6",

‎src/sections/Projects/Sistent/components/collapse/guidance.js‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,9 @@ const Guidance = () => {
1010
return (
1111
<SistentLayout title="Collapse">
1212
<div className="content" style={{ padding: "2rem 0" }}>
13-
<h2 style={{ marginBottom: "1.5rem" }}>Collapse</h2>
13+
<a id="Identity" style={{ display: "block", marginBottom: "1.5rem" }}>
14+
<h2 style={{ marginBottom: "1.5rem" }}>Collapse</h2>
15+
</a>
1416
<p style={{ fontSize: "1.1rem", lineHeight: "1.7", marginBottom: "2.5rem" }}>
1517
The Collapse component provides a smooth, animated transition for showing and hiding content.
1618
It's an essential UI pattern for managing content density and progressive disclosure of information.
@@ -48,7 +50,9 @@ const Guidance = () => {
4850

4951
<div className="main-content" style={{ display: "flex", flexDirection: "column", gap: "3rem" }}>
5052
<section>
51-
<h3 style={{ fontSize: "1.5rem", marginBottom: "1.5rem", paddingBottom: "0.75rem", borderBottom: "1px solid #e0e0e0" }}>Best Practices</h3>
53+
<a id="Best Practices" style={{ display: "block" }}>
54+
<h2 style={{ fontSize: "1.5rem", marginBottom: "1.5rem", paddingBottom: "0.75rem", borderBottom: "1px solid #e0e0e0" }}>Best Practices</h2>
55+
</a>
5256
<ul style={{ marginTop: "1rem", marginBottom: "0.5rem", paddingLeft: "1.5rem" }}>
5357
<li style={{ marginBottom: "0.75rem" }}>
5458
<strong>Clear Triggers:</strong> Always use clear, descriptive labels for collapse triggers that indicate the action and content.
@@ -70,7 +74,9 @@ const Guidance = () => {
7074
</section>
7175

7276
<section>
73-
<h3 style={{ fontSize: "1.5rem", marginBottom: "1.5rem", paddingBottom: "0.75rem", borderBottom: "1px solid #e0e0e0" }}>Accessibility Considerations</h3>
77+
<a id="Accessibility Considerations" style={{ display: "block" }}>
78+
<h2 style={{ fontSize: "1.5rem", marginBottom: "1.5rem", paddingBottom: "0.75rem", borderBottom: "1px solid #e0e0e0" }}>Accessibility Considerations</h2>
79+
</a>
7480
<ul style={{ marginTop: "1rem", marginBottom: "0.5rem", paddingLeft: "1.5rem" }}>
7581
<li style={{ marginBottom: "0.75rem" }}>
7682
<strong>Keyboard Navigation:</strong> Ensure the collapse trigger is keyboard accessible and can be activated with both Enter and Space keys.
@@ -89,7 +95,9 @@ const Guidance = () => {
8995
</section>
9096

9197
<section>
92-
<h3 style={{ fontSize: "1.5rem", marginBottom: "1.5rem", paddingBottom: "0.75rem", borderBottom: "1px solid #e0e0e0" }}>When to Use</h3>
98+
<a id="When to Use" style={{ display: "block" }}>
99+
<h2 style={{ fontSize: "1.5rem", marginBottom: "1.5rem", paddingBottom: "0.75rem", borderBottom: "1px solid #e0e0e0" }}>When to Use</h2>
100+
</a>
93101
<ul style={{ marginTop: "1rem", marginBottom: "0.5rem", paddingLeft: "1.5rem" }}>
94102
<li style={{ marginBottom: "0.75rem" }}>FAQs and help sections</li>
95103
<li style={{ marginBottom: "0.75rem" }}>Forms with optional or advanced fields</li>
@@ -101,7 +109,9 @@ const Guidance = () => {
101109
</section>
102110

103111
<section>
104-
<h3 style={{ fontSize: "1.5rem", marginBottom: "1.5rem", paddingBottom: "0.75rem", borderBottom: "1px solid #e0e0e0" }}>When to Consider Something Else</h3>
112+
<a id="When to Consider Something Else" style={{ display: "block" }}>
113+
<h2 style={{ fontSize: "1.5rem", marginBottom: "1.5rem", paddingBottom: "0.75rem", borderBottom: "1px solid #e0e0e0" }}>When to Consider Something Else</h2>
114+
</a>
105115
<ul style={{ marginTop: "1rem", marginBottom: "0.5rem", paddingLeft: "1.5rem" }}>
106116
<li style={{ marginBottom: "0.75rem" }}>For simple show/hide without animation, consider conditional rendering</li>
107117
<li style={{ marginBottom: "0.75rem" }}>For modal dialogs or overlays, use the Dialog component instead</li>
@@ -111,7 +121,9 @@ const Guidance = () => {
111121
</section>
112122

113123
<section>
114-
<h3 style={{ fontSize: "1.5rem", marginBottom: "1.5rem", paddingBottom: "0.75rem", borderBottom: "1px solid #e0e0e0" }}>Performance Optimization</h3>
124+
<a id="Performance Optimization" style={{ display: "block" }}>
125+
<h2 style={{ fontSize: "1.5rem", marginBottom: "1.5rem", paddingBottom: "0.75rem", borderBottom: "1px solid #e0e0e0" }}>Performance Optimization</h2>
126+
</a>
115127
<ul style={{ marginTop: "1rem", marginBottom: "0.5rem", paddingLeft: "1.5rem" }}>
116128
<li style={{ marginBottom: "0.75rem" }}>Use <code>unmountOnExit</code> for better performance with large content</li>
117129
<li style={{ marginBottom: "0.75rem" }}>Consider code-splitting for complex content within collapsible sections</li>
@@ -121,7 +133,9 @@ const Guidance = () => {
121133
</section>
122134

123135
<section>
124-
<h3 style={{ fontSize: "1.5rem", marginBottom: "1.5rem", paddingBottom: "0.75rem", borderBottom: "1px solid #e0e0e0" }}>Common Patterns</h3>
136+
<a id="Common Patterns" style={{ display: "block" }}>
137+
<h2 style={{ fontSize: "1.5rem", marginBottom: "1.5rem", paddingBottom: "0.75rem", borderBottom: "1px solid #e0e0e0" }}>Common Patterns</h2>
138+
</a>
125139
<ul style={{ marginTop: "1rem", marginBottom: "0.5rem", paddingLeft: "1.5rem" }}>
126140
<li style={{ marginBottom: "0.75rem" }}><strong>Accordion:</strong> Multiple collapsible sections where only one can be open at a time</li>
127141
<li style={{ marginBottom: "0.75rem" }}><strong>Expandable Cards:</strong> Cards with a summary that can be expanded for more details</li>

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

Lines changed: 17 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const SistentCollapse = () => {
3333
return (
3434
<SistentLayout title="Collapse">
3535
<div className="content" style={{ padding: "2rem 0" }}>
36-
<a id="Layout" style={{ display: "block", marginBottom: "2rem" }}>
36+
<a id="Identity" style={{ display: "block", marginBottom: "2rem" }}>
3737
<h2 style={{ marginBottom: "1rem" }}>Collapse</h2>
3838
</a>
3939
<p style={{ marginBottom: "1rem", fontSize: "1.1rem", lineHeight: "1.6" }}>
@@ -64,12 +64,14 @@ const SistentCollapse = () => {
6464
</p>
6565

6666
<div style={{ marginBottom: "1rem" }}>
67-
<h3 style={{ marginBottom: "1.3rem", fontSize: "1.5rem" }}>Basic Collapse</h3>
68-
<p>
69-
A simple collapsible section that can be toggled with a button click.
70-
</p>
71-
<Row $Vcenter $Hcenter style={{ flexDirection: "column", gap: "1rem" }}>
72-
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
67+
<a id="Basic Collapse" style={{ display: "block" }}>
68+
<h2 style={{ marginBottom: "1.3rem", fontSize: "1.5rem" }}>Basic Collapse</h2>
69+
</a>
70+
<p>
71+
A simple collapsible section that can be toggled with a button click.
72+
</p>
73+
<Row $Vcenter $Hcenter style={{ flexDirection: "column", gap: "1rem" }}>
74+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
7375
<Button
7476
variant="contained"
7577
onClick={() => setExpanded(!expanded)}
@@ -94,12 +96,14 @@ const SistentCollapse = () => {
9496
</div>
9597

9698
<div style={{ marginBottom: "1rem" }}>
97-
<h3 style={{ marginBottom: "1.3rem", fontSize: "1.5rem" }}>Default Expanded</h3>
98-
<p>
99-
A collapsible section that starts expanded by default.
100-
</p>
101-
<Row $Vcenter $Hcenter style={{ flexDirection: "column", gap: "1rem" }}>
102-
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
99+
<a id="Default Expanded" style={{ display: "block" }}>
100+
<h2 style={{ marginBottom: "1.3rem", fontSize: "1.5rem" }}>Default Expanded</h2>
101+
</a>
102+
<p>
103+
A collapsible section that starts expanded by default.
104+
</p>
105+
<Row $Vcenter $Hcenter style={{ flexDirection: "column", gap: "1rem" }}>
106+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
103107
<Button
104108
variant="outlined"
105109
onClick={() => setExpanded2(!expanded2)}

0 commit comments

Comments
 (0)