Skip to content

Commit 944056f

Browse files
saurabhraghuvanshiisaurabhraghuvanshii
authored
Merge pull request #6861 from Rajesh-Nagarajan-11/Fix-Warnings
Fix: Eliminate two build warnings
2 parents ea0628a + 9857fb4 commit 944056f

File tree

3 files changed

+258
-0
lines changed

3 files changed

+258
-0
lines changed

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

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
import { SistentThemeProvider, KubernetesIcon, DesignIcon } from "@sistent/sistent";
5+
import { SistentLayout } from "../../sistent-layout";
6+
import TabButton from "../../../../../reusecore/Button";
7+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
8+
import { CodeBlock } from "../button/code-block";
9+
10+
const codes = [
11+
` <SistentThemeProvider>
12+
<KubernetesIcon />
13+
</SistentThemeProvider>`,
14+
` <SistentThemeProvider>
15+
<DesignIcon width={40} height={40} />
16+
</SistentThemeProvider>`,
17+
];
18+
19+
const IconsCode = () => {
20+
const location = useLocation();
21+
const { isDark } = useStyledDarkMode();
22+
23+
return (
24+
<SistentLayout title="Icons">
25+
<div className="content">
26+
<a id="Identity">
27+
<h2>Icons</h2>
28+
</a>
29+
<p>
30+
Icons are visual symbols used to represent ideas, objects, or actions.
31+
</p>
32+
<div className="filterBtns">
33+
<TabButton
34+
className={
35+
location.pathname === "/projects/sistent/components/icons"
36+
? "active"
37+
: ""
38+
}
39+
onClick={() => navigate("/projects/sistent/components/icons")}
40+
title="Overview"
41+
/>
42+
<TabButton
43+
className={
44+
location.pathname ===
45+
"/projects/sistent/components/icons/guidance"
46+
? "active"
47+
: ""
48+
}
49+
onClick={() =>
50+
navigate("/projects/sistent/components/icons/guidance")
51+
}
52+
title="Guidance"
53+
/>
54+
<TabButton
55+
className={
56+
location.pathname === "/projects/sistent/components/icons/code"
57+
? "active"
58+
: ""
59+
}
60+
onClick={() => navigate("/projects/sistent/components/icons/code")}
61+
title="Code"
62+
/>
63+
</div>
64+
<div className="main-content">
65+
<a id="Default Icon">
66+
<h2>Default Icon</h2>
67+
</a>
68+
<div className="showcase">
69+
<div className="items">
70+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
71+
<KubernetesIcon />
72+
</SistentThemeProvider>
73+
</div>
74+
<CodeBlock name="basic-icon" code={codes[0]} />
75+
</div>
76+
77+
<a id="Custom Size">
78+
<h2>Custom Size</h2>
79+
</a>
80+
<div className="showcase">
81+
<div className="items">
82+
<SistentThemeProvider initialMode={isDark ? "dark" : "light"}>
83+
<DesignIcon
84+
width={40}
85+
height={40}
86+
/>
87+
</SistentThemeProvider>
88+
</div>
89+
<CodeBlock name="sized-icon" code={codes[1]} />
90+
</div>
91+
</div>
92+
</div>
93+
</SistentLayout>
94+
);
95+
};
96+
97+
export default IconsCode;

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

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
import React from "react";
2+
import { navigate } from "gatsby";
3+
import { useLocation } from "@reach/router";
4+
import { Row } from "../../../../../reusecore/Layout";
5+
import { SistentThemeProvider, KubernetesIcon, DesignIcon, PublishIcon } from "@sistent/sistent";
6+
import { SistentLayout } from "../../sistent-layout";
7+
import TabButton from "../../../../../reusecore/Button";
8+
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
9+
10+
const IconsGuidance = () => {
11+
const location = useLocation();
12+
const { isDark } = useStyledDarkMode();
13+
14+
return (
15+
<SistentLayout title="Icons">
16+
<div className="content">
17+
<a id="Identity">
18+
<h2>Icons</h2>
19+
</a>
20+
<p>
21+
Icons are visual symbols used to represent ideas, objects, or actions.
22+
They communicate messages at a glance, afford interactivity, and draw
23+
attention to important information.
24+
</p>
25+
<div className="filterBtns">
26+
<TabButton
27+
className={
28+
location.pathname === "/projects/sistent/components/icons"
29+
? "active"
30+
: ""
31+
}
32+
onClick={() => navigate("/projects/sistent/components/icons")}
33+
title="Overview"
34+
/>
35+
<TabButton
36+
className={
37+
location.pathname ===
38+
"/projects/sistent/components/icons/guidance"
39+
? "active"
40+
: ""
41+
}
42+
onClick={() =>
43+
navigate("/projects/sistent/components/icons/guidance")
44+
}
45+
title="Guidance"
46+
/>
47+
<TabButton
48+
className={
49+
location.pathname === "/projects/sistent/components/icons/code"
50+
? "active"
51+
: ""
52+
}
53+
onClick={() => navigate("/projects/sistent/components/icons/code")}
54+
title="Code"
55+
/>
56+
</div>
57+
<div className="main-content">
58+
<a id="Best Practices">
59+
<h2>Best Practices</h2><br />
60+
</a>
61+
<h3>Clarity and Recognition</h3>
62+
<p>
63+
Use icons that are universally recognized or easily understood within your
64+
target audience. Avoid using obscure or overly abstract symbols that may
65+
confuse users.
66+
</p>
67+
<h3>Consistency</h3>
68+
<p>
69+
Maintain visual consistency across all icons in your interface. Icons should
70+
share similar visual weight, style, and proportions to create a cohesive
71+
design system.
72+
</p>
73+
<h3>Size and Spacing</h3>
74+
<p>
75+
Ensure icons are sized appropriately for their context and maintain adequate
76+
spacing from surrounding elements. Icons should be large enough to be easily
77+
tapped or clicked, especially on touch devices (minimum 24x24px for touch targets).
78+
</p>
79+
<h3>Color and Contrast</h3>
80+
<p>
81+
Use colors that provide sufficient contrast with the background for accessibility.
82+
Consider how icons appear in both light and dark themes, and ensure they remain
83+
visible and recognizable in all contexts.
84+
</p>
85+
<h3>Labels and Tooltips</h3>
86+
<p>
87+
When icons might be ambiguous, always provide text labels or tooltips. This is
88+
especially important for critical actions or less common functions. Labels help
89+
users understand functionality without having to guess.
90+
</p>
91+
<h3>Accessibility</h3>
92+
<p>
93+
Ensure icons are accessible to all users, including those using screen readers.
94+
Provide appropriate aria-labels and alt text where needed. Never rely solely on
95+
color to convey meaning.
96+
</p>
97+
98+
<a id="Usage Guidelines">
99+
<h2>Usage Guidelines</h2><br />
100+
</a>
101+
<h3>When to Use Icons</h3>
102+
<p>
103+
Icons work best when they enhance understanding rather than obscure it. Use icons
104+
when they add visual interest, save space, or make interfaces more scannable.
105+
Avoid using icons just for decoration if they don't serve a functional purpose.
106+
</p>
107+
<h3>Icon Placement</h3>
108+
<p>
109+
Position icons where users expect to find them. Common placements include navigation
110+
menus, buttons, form fields, and action bars. Ensure icons are aligned properly with
111+
accompanying text or other elements.
112+
</p>
113+
<h3>Combining Icons with Text</h3>
114+
<p>
115+
When combining icons with text, ensure proper spacing and alignment. Icons typically
116+
work well when placed to the left of text labels in left-to-right languages. For
117+
buttons, icons can appear on either side of the label depending on the action.
118+
</p>
119+
</div>
120+
</div>
121+
</SistentLayout>
122+
);
123+
};
124+
125+
export default IconsGuidance;

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

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
import React, { useState, useCallback, useMemo } from "react";
22
import PropTypes from "prop-types";
3+
import { navigate } from "gatsby";
4+
import { useLocation } from "@reach/router";
35
import { SistentThemeProvider, KubernetesIcon, DesignIcon, CustomTooltip } from "@sistent/sistent";
46
import { SistentLayout } from "../../sistent-layout";
57
import { useStyledDarkMode } from "../../../../../theme/app/useStyledDarkMode";
8+
import TabButton from "../../../../../reusecore/Button";
69
import debounce from "lodash.debounce";
710
import * as Icons from "@sistent/sistent";
811
import Code from "../../../../../components/CodeBlock";
@@ -110,6 +113,7 @@ IconCard.propTypes = {
110113

111114
// Main SistentIcons component
112115
const SistentIcons = () => {
116+
const location = useLocation();
113117
const { isDark } = useStyledDarkMode();
114118
const [searchTerm, setSearchTerm] = useState("");
115119

@@ -140,6 +144,38 @@ const SistentIcons = () => {
140144
<p>
141145
The icons are available as React components and can be easily imported and used in your application. They are also customizable in terms of size, color, and other properties.
142146
</p>
147+
<div className="filterBtns">
148+
<TabButton
149+
className={
150+
location.pathname === "/projects/sistent/components/icons"
151+
? "active"
152+
: ""
153+
}
154+
onClick={() => navigate("/projects/sistent/components/icons")}
155+
title="Overview"
156+
/>
157+
<TabButton
158+
className={
159+
location.pathname ===
160+
"/projects/sistent/components/icons/guidance"
161+
? "active"
162+
: ""
163+
}
164+
onClick={() =>
165+
navigate("/projects/sistent/components/icons/guidance")
166+
}
167+
title="Guidance"
168+
/>
169+
<TabButton
170+
className={
171+
location.pathname === "/projects/sistent/components/icons/code"
172+
? "active"
173+
: ""
174+
}
175+
onClick={() => navigate("/projects/sistent/components/icons/code")}
176+
title="Code"
177+
/>
178+
</div>
143179
</div>
144180

145181
<div className="showcase">

0 commit comments

Comments
 (0)