Skip to content

Commit 96d180f

Browse files
nnaydenownnaydenow
committed
chore: align icon and illustration pages
1 parent 5e90907 commit 96d180f

File tree

6 files changed

+230
-139
lines changed

6 files changed

+230
-139
lines changed

‎packages/website/build-scripts/icons-generation/index.mjs‎

Lines changed: 1 addition & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -131,29 +131,7 @@ const _generateIconsPage = (sourceDir, config) => {
131131

132132
const classDef = `export default function ${config.componentName}() {
133133
return (
134-
<div style={{
135-
padding: "2rem 2rem",
136-
}}>
137-
<div style={{ display: "flex", flexDirection: "column" }}>
138-
<div style={{ display: "flex", flexDirection: "column" }}>
139-
<Heading as="h2" style={{ marginBottom: "0.125rem" }}>${config.title}</Heading>
140-
<Link to="${config.npmLink}">${config.npmPackage}</Link>
141-
</div>
142-
<div style={{ marginTop: "1rem" }}>
143-
<span role="presentation"></span>
144-
<input className="icons__search" type="search" placeholder="Filter icons..." aria-label="Filter icons" onInput={function (e) {
145-
[...document.querySelectorAll("[data-icon-name]")].forEach(iconWrapper => {
146-
const iconName = iconWrapper.getAttribute("data-icon-name").toLowerCase();
147-
iconWrapper.classList.toggle("hidden", !iconName.includes(e.target.value))
148-
})
149-
150-
document
151-
.querySelector(".icon__not__found")
152-
.classList
153-
.toggle("hidden", ![...document.querySelectorAll("[data-icon-name]")].every(iconWrapper => iconWrapper.classList.contains("hidden")))
154-
}} />
155-
</div>
156-
</div>
134+
<div>
157135
<div className="icon__grid">
158136
${icons}
159137
</div>

‎packages/website/src/pages/icons.css‎

Lines changed: 70 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,72 @@
1+
@import "./shared.css";
2+
3+
/* Main container */
4+
.icons__container {
5+
width: 100%;
6+
min-height: calc(100vh - var(--ifm-navbar-height));
7+
display: flex;
8+
flex-direction: column;
9+
}
10+
11+
/* Header with collection switcher and search */
12+
.icons__header {
13+
padding: 1rem 2rem;
14+
border-bottom: 1px solid var(--ifm-color-emphasis-300);
15+
background-color: var(--ifm-background-surface-color);
16+
display: flex;
17+
align-items: center;
18+
gap: 1.5rem;
19+
flex-wrap: wrap;
20+
}
21+
22+
/* Collection metadata (title + package link) */
23+
.icons__header__metadata {
24+
display: flex;
25+
flex-direction: column;
26+
align-items: flex-start;
27+
gap: 0.125rem;
28+
min-width: 200px;
29+
}
30+
31+
/* Collection metadata (title + package link) */
32+
.icons__header__separator {
33+
flex: 1;
34+
}
35+
36+
.icons__header__title {
37+
margin: 0;
38+
font-size: 1.25rem;
39+
font-weight: 600;
40+
color: var(--ifm-font-color-base);
41+
}
42+
43+
.icons__header__package {
44+
font-size: 0.875rem;
45+
color: var(--ifm-color-primary);
46+
text-decoration: none;
47+
}
48+
49+
.icons__header__package:hover {
50+
text-decoration: underline;
51+
}
52+
53+
/* Responsive: Stack header elements on mobile */
54+
@media (max-width: 996px) {
55+
.icons__header {
56+
flex-direction: column;
57+
align-items: flex-start;
58+
gap: 1rem;
59+
}
60+
61+
.icons__header__metadata {
62+
align-items: flex-start;
63+
width: 100%;
64+
}
65+
}
66+
167
.icon__grid {
268
display: grid;
3-
padding: 2rem 0;
69+
padding: 2rem;
470
gap: 2rem;
571
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
672
}
@@ -15,21 +81,7 @@
1581
justify-content: center;
1682
}
1783

18-
.icons__search {
19-
-webkit-appearance: none;
20-
-moz-appearance: none;
21-
appearance: none;
22-
background: var(--ifm-navbar-search-input-background-color) var(--ifm-navbar-search-input-icon) no-repeat 0.75rem center / 1rem 1rem;
23-
border: none;
24-
border-radius: 2rem;
25-
color: var(--ifm-navbar-search-input-color);
26-
cursor: text;
27-
display: inline-block;
28-
font-size: 0.9rem;
29-
height: 2.5rem;
30-
padding: 0 0.5rem 0 2.25rem;
31-
width: 12.5rem;
32-
}
84+
/* Search input styles moved to shared.css */
3385

3486
.icon__wrapper {
3587
position: relative;
@@ -81,7 +133,7 @@
81133
[data-theme='dark'] .icon__svg--picture {
82134
fill: var(--ifm-color-primary);
83135
}
84-
136+
85137

86138
.icon__wrapper__title {
87139
color: var(--ifm-font-color-base);
@@ -119,30 +171,4 @@
119171
background-color: var(--ifm-background-surface-color);
120172
}
121173

122-
123-
124-
.segmented__button {
125-
display: inline-flex;
126-
align-items: center;
127-
justify-content: center;
128-
background-color: var(--ifm-background-surface-color);
129-
padding: 0.5rem;
130-
}
131-
132-
.segmented__button__item {
133-
padding: 0.25rem 0.5rem;
134-
margin: 0 0.125rem;
135-
border-radius: 0.5rem;
136-
color: var(--ifm-navbar-link-color);
137-
}
138-
139-
.segmented__button__item:hover {
140-
cursor: pointer;
141-
transition: all 0.5s;
142-
background-color: var(--ifm-menu-color-background-active);
143-
}
144-
145-
.segmented__button__item--active {
146-
color: var(--ifm-menu-color-active);
147-
background-color: var(--ifm-menu-color-background-active);
148-
}
174+
/* Segmented button styles moved to shared.css */

‎packages/website/src/pages/icons.tsx‎

Lines changed: 106 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,139 @@
1-
import React, { useState } from 'react';
1+
import React, { useState, useEffect } from 'react';
22
import clsx from "clsx";
33
import SAPIcons from "../../icons/index.js";
44
import SAPTNTIcons from "../../icons-tnt/index.js";
55
import SAPBSIcons from "../../icons-business-suite/index.js";
66
import Layout from '@theme/Layout';
7+
import "./shared.css";
78
import "./icons.css";
89

10+
// Collection metadata
11+
const COLLECTION_METADATA = {
12+
"SAP Icons": {
13+
title: "SAP Icons",
14+
package: "@ui5/webcomponents-icons",
15+
packageUrl: "https://www.npmjs.com/package/@ui5/webcomponents-icons"
16+
},
17+
"SAP TNT Icons": {
18+
title: "SAP TNT Icons",
19+
package: "@ui5/webcomponents-icons-tnt",
20+
packageUrl: "https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt"
21+
},
22+
"SAP BSuite Icons": {
23+
title: "SAP BSuite Icons",
24+
package: "@ui5/webcomponents-icons-business-suite",
25+
packageUrl: "https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite"
26+
}
27+
};
928

1029
const Select = ({ updateState }) => {
11-
const [ collection, setCollection ] = useState("SAP Icons");
30+
const [collection, setCollection] = useState("SAP Icons");
1231

1332
return <div className="segmented__button">
1433
<div
15-
onClick={() => {
16-
setCollection("SAP Icons")
17-
updateState("SAP Icons");
18-
}}
19-
className={clsx("segmented__button__item", { 'segmented__button__item--active': collection === "SAP Icons" })}
34+
onClick={() => {
35+
setCollection("SAP Icons")
36+
updateState("SAP Icons");
37+
}}
38+
className={clsx("segmented__button__item", { 'segmented__button__item--active': collection === "SAP Icons" })}
2039
>SAP Icons</div>
2140
<div
22-
onClick={() => {
23-
setCollection("SAP TNT Icons");
24-
updateState("SAP TNT Icons");
25-
}}
26-
className={clsx("segmented__button__item", { 'segmented__button__item--active': collection === "SAP TNT Icons" })}
41+
onClick={() => {
42+
setCollection("SAP TNT Icons");
43+
updateState("SAP TNT Icons");
44+
}}
45+
className={clsx("segmented__button__item", { 'segmented__button__item--active': collection === "SAP TNT Icons" })}
2746
>SAP TNT Icons</div>
2847

2948
<div
30-
onClick={() => {
31-
setCollection("SAP BSuite Icons");
32-
updateState("SAP BSuite Icons");
33-
}}
34-
className={clsx("segmented__button__item", { 'segmented__button__item--active': collection === "SAP BSuite Icons" })}
49+
onClick={() => {
50+
setCollection("SAP BSuite Icons");
51+
updateState("SAP BSuite Icons");
52+
}}
53+
className={clsx("segmented__button__item", { 'segmented__button__item--active': collection === "SAP BSuite Icons" })}
3554
>SAP BSuite Icons</div>
3655
</div>;
3756
};
3857

3958

40-
const Collection = ({ currCollection }) => {
41-
if (currCollection === "SAP TNT Icons") {
42-
return <SAPTNTIcons />
43-
} else if (currCollection === "SAP BSuite Icons") {
44-
return <SAPBSIcons />
45-
}
59+
const Collection = ({ currCollection }) => {
60+
// if (currCollection === "SAP TNT Icons") {
61+
// return <SAPTNTIcons />
62+
// } else if (currCollection === "SAP BSuite Icons") {
63+
// return <SAPBSIcons />
64+
// }
4665

4766
return <SAPIcons />
4867
};
4968

5069
export default function Icons() {
51-
const [ collection, setCollection ] = useState("SAP Icons");
70+
const [collection, setCollection] = useState("SAP Icons");
71+
const [searchQuery, setSearchQuery] = useState("");
72+
73+
// Client-side search filtering using DOM manipulation
74+
useEffect(() => {
75+
if (typeof window === 'undefined') return;
76+
77+
const iconWrappers = document.querySelectorAll('.icon__wrapper');
78+
const notFoundElement = document.querySelector('.icon__not__found');
79+
let visibleCount = 0;
80+
81+
iconWrappers.forEach(wrapper => {
82+
const iconName = wrapper.getAttribute('data-icon-name') || '';
83+
const matches = iconName.toLowerCase().includes(searchQuery.toLowerCase());
84+
85+
if (matches) {
86+
wrapper.classList.remove('hidden');
87+
visibleCount++;
88+
} else {
89+
wrapper.classList.add('hidden');
90+
}
91+
});
92+
93+
// Show/hide "not found" message
94+
if (visibleCount === 0 && searchQuery) {
95+
notFoundElement?.classList.remove('hidden');
96+
} else {
97+
notFoundElement?.classList.add('hidden');
98+
}
99+
}, [searchQuery, collection]); // Re-run when search or collection changes
52100

53101
return (
54102
<Layout title="UI5 Web Components Icons" description="UI5 Web Components Icons">
55-
<Select updateState={setCollection}/>
56-
<Collection currCollection={collection}/>
103+
<div className="icons__container">
104+
{/* Header with collection switcher, title, and search */}
105+
<div className="icons__header">
106+
<div className="icons__header__metadata">
107+
<h2 className="icons__header__title">
108+
{COLLECTION_METADATA[collection].title}
109+
</h2>
110+
<a
111+
href={COLLECTION_METADATA[collection].packageUrl}
112+
target="_blank"
113+
rel="noopener noreferrer"
114+
className="icons__header__package"
115+
>
116+
{COLLECTION_METADATA[collection].package}
117+
</a>
118+
</div>
119+
120+
<Select updateState={setCollection} />
121+
122+
<div className='icons__header__separator'></div>
123+
124+
<input
125+
className="page__search"
126+
type="search"
127+
placeholder="Filter icons..."
128+
aria-label="Filter icons"
129+
value={searchQuery}
130+
onChange={(e) => setSearchQuery(e.target.value)}
131+
/>
132+
</div>
133+
134+
{/* Icons grid */}
135+
<Collection currCollection={collection} />
136+
</div>
57137
</Layout>
58138
);
59139
};

‎packages/website/src/pages/illustrations.css‎

Lines changed: 4 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
@import "./shared.css";
2+
13
:root {
24
--sapIllus_BrandColorPrimary: var(--sapContent_Illustrative_Color1);
35
--sapIllus_BrandColorSecondary: var(--sapContent_Illustrative_Color2);
@@ -206,51 +208,8 @@
206208
color: var(--ifm-color-primary);
207209
}
208210

209-
/* Search input */
210-
.illustrations__search {
211-
-webkit-appearance: none;
212-
-moz-appearance: none;
213-
appearance: none;
214-
background: var(--ifm-navbar-search-input-background-color) var(--ifm-navbar-search-input-icon) no-repeat 0.75rem center / 1rem 1rem;
215-
border: none;
216-
border-radius: 2rem;
217-
color: var(--ifm-navbar-search-input-color);
218-
cursor: text;
219-
display: inline-block;
220-
font-size: 0.9rem;
221-
height: 2.5rem;
222-
padding: 0 0.5rem 0 2.25rem;
223-
width: 12.5rem;
224-
}
225-
226-
/* Segmented button */
227-
.segmented__button {
228-
display: inline-flex;
229-
align-items: center;
230-
justify-content: center;
231-
background-color: var(--ifm-background-color);
232-
padding: 0.5rem;
233-
border-radius: 0.5rem;
234-
}
235-
236-
.segmented__button__item {
237-
padding: 0.5rem 1rem;
238-
margin: 0 0.125rem;
239-
border-radius: 0.5rem;
240-
color: var(--ifm-navbar-link-color);
241-
font-weight: 500;
242-
}
243-
244-
.segmented__button__item:hover {
245-
cursor: pointer;
246-
transition: all 0.2s;
247-
background-color: var(--ifm-menu-color-background-hover);
248-
}
249-
250-
.segmented__button__item--active {
251-
color: var(--ifm-menu-color-active);
252-
background-color: var(--ifm-menu-color-background-active);
253-
}
211+
/* Segmented button styles moved to shared.css */
212+
/* Search input styles moved to shared.css */
254213

255214
/* Responsive: Stack panes on mobile */
256215
@media (max-width: 996px) {

0 commit comments

Comments
 (0)