Skip to content

Commit

Permalink
docs: add copy svg to icon explorer (#8389)
Browse files Browse the repository at this point in the history
  • Loading branch information
@ilhan007
ilhan007 authored Mar 3, 2024
1 parent 498b5e1 commit 3d15ab7
Show file tree
Hide file tree
Showing 2 changed files with 164 additions and 135 deletions.
245 changes: 122 additions & 123 deletions packages/website/build-scripts/icons-generation/index.mjs
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,35 @@
import fs from "fs";
import path from "path";

let counter = 0;

const SAPIconsConfig = {
title: "SAP Icons",
npmLink: "https://www.npmjs.com/package/@ui5/webcomponents-icons",
npmPackage: "@ui5/webcomponents-icons",
version: "v5",
dir: "icons",
componentName: "SAPIcons",
};

const SAPTNTIconsConfig = {
title: "SAP TNT Icons",
npmLink: "https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt",
npmPackage: "@ui5/webcomponents-icons-tnt",
version: "v3",
dir: "icons-tnt",
componentName: "SAPTNTIcons",
};

const SAPBSIconsConfig = {
title: "SAP Business Suite Icons",
npmLink: "https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite",
npmPackage: "@ui5/webcomponents-icons-business-suite",
version: "v2",
dir: "icons-business-suite",
componentName: "SAPBSIcons"
};

const replaceFirstNumber = (str) => {
const firstLetter = str.charAt(0);
if (!isNaN(firstLetter)) {
Expand All @@ -16,7 +44,17 @@ const capitalize = (str) => {
const remainingLetters = str.slice(1);
const capitalizedWord = firstLetterCap + remainingLetters;
return capitalizedWord;
}
};

const writeFile = (targetDir, content) => {
const targetPath = path.resolve(`./${targetDir}`);
const targetFile = path.resolve(`${targetPath}/index.js`);

if (!fs.existsSync(targetPath)) {
fs.mkdirSync(targetPath, { recursive: true });
}
fs.writeFileSync(targetFile, content,{ encoding:'utf8', flag:'w' });
};

const commonImports = `
import React from 'react';
Expand All @@ -25,7 +63,14 @@ import Heading from '@theme/Heading';
import Link from '@docusaurus/Link';
`

const _generateIconsPage = (sourceDir, collection, version) => {
const additionalImports = `
import CopySvg from "../local-cdn/local-cdn/icons/dist/v5/copy.svg";
import AcceptSvg from "../local-cdn/local-cdn/icons/dist/v5/accept.svg";
import PictureSvg from "../local-cdn/local-cdn/icons/dist/v5/picture.svg";
`;


const _generateIconsPage = (sourceDir, config) => {
let imports = ``;
let icons = ``;

Expand All @@ -36,139 +81,93 @@ const _generateIconsPage = (sourceDir, collection, version) => {

const iconNameImport = `${fileNameImportName}SvgName`;
const svgImport = `${capitalize(fileNameImportName)}Svg`;

imports += `
import ${iconNameImport} from "../local-cdn/local-cdn/${collection}/dist/${fileName}.js";
import ${svgImport} from "../local-cdn/local-cdn/${collection}/dist/${version}/${fileName}.svg";
`;
imports += `
import ${iconNameImport} from "../local-cdn/local-cdn/${config.dir}/dist/${fileName}.js";
import ${svgImport} from "../local-cdn/local-cdn/${config.dir}/dist/${config.version}/${fileName}.svg";
`;

icons += `
<div
tabIndex="-1"
title="Copy the icon name"
className="icon__wrapper"
onClick={function(e) {
navigator.clipboard.writeText(${iconNameImport});
const target = e.target;
target.classList.add("icon__wrapper--copied");
setTimeout(() => {
target.classList.remove("icon__wrapper--copied");
}, 600)
}}>
<CopySvg className="icon__wrapper__copy"/>
<AcceptSvg className="icon__wrapper__accept"/>
<div className="icon__wrapper__svg"><${svgImport} fill="var(--ifm-font-color-base)"/></div>
<span className="icon__wrapper__title">{${iconNameImport}}</span>
</div>`;
<div
tabIndex="-1"
title="Copy Icon"
className="icon__wrapper"
onClick={function(e) {
const target = e.target;
if (target.classList.contains("icon__button--picture") || target.classList.contains("icon__button--copy")) {
const acceptSVG = document.querySelector("#${svgImport}_accept");
acceptSVG?.classList.add("icon__svg--accept--visible");
setTimeout(() => {
acceptSVG.classList.remove("icon__svg--accept--visible");
}, 600);
}
}}>
<AcceptSvg id="${svgImport}_accept" className="icon__svg--accept"/>
<div id="${svgImport}_svg" className="icon__wrapper__svg"><${svgImport} fill="var(--ifm-font-color-base)"/></div>
<span className="icon__wrapper__title">{${iconNameImport}.replace("tnt/", "").replace("business-suite/", "")}</span>
<div style={{ display: "flex", alignItems: "center", justifyContent: "center" }}>
<button className="button button--secondary icon__button--copy"
onClick={function(e) {
navigator.clipboard.writeText(${iconNameImport});
}}>
<CopySvg className="icon__svg--copy" />
</button>
<button className="button button--secondary icon__button--picture"
onClick={function(e) {
navigator.clipboard.writeText(document.querySelector("#${svgImport}_svg")?.innerHTML);
}}>
<PictureSvg className="icon__svg--picture" />
</button>
</div>
</div>`;
}
});

return { imports, icons};
};

const generateIconsPage = (sourceDir, collection, version) => {
const { imports, icons} = _generateIconsPage(sourceDir, collection, version);

const content =`
${commonImports}
${imports}
export default function SAPIcons() {
return (
<div style={{ padding: "2rem 2rem" }}>
<Heading as="h2" style={{ marginBottom: "0.125rem" }}>SAP Icons</Heading>
<Link to="https://www.npmjs.com/package/@ui5/webcomponents-icons">@ui5/webcomponents-icons</Link>
<div className="icon__grid">
${icons}
const classDef = `export default function ${config.componentName}() {
return (
<div style={{
padding: "2rem 2rem",
}}>
<Heading as="h2" style={{ marginBottom: "0.125rem" }}>${config.title}</Heading>
<Link to="${config.npmLink}">${config.npmPackage}</Link>
<div className="icon__grid">
${icons}
</div>
</div>
</div>
);
}`;

const targetPath = path.resolve(`./${collection}`);
const targetFile = path.resolve(`${targetPath}/index.js`);
);
}`

if (!fs.existsSync(targetPath)) {
fs.mkdirSync(targetPath, { recursive: true });
}
fs.writeFileSync(targetFile,content,{ encoding:'utf8', flag:'w' });
return { imports, classDef};
};

const generateTNTIconsPage = (sourceDir, collection, version) => {
const { imports, icons} = _generateIconsPage(sourceDir, collection, version);

const content =`
${commonImports}
import CopySvg from "../local-cdn/local-cdn/icons/dist/v5/copy.svg";
import AcceptSvg from "../local-cdn/local-cdn/icons/dist/v5/accept.svg";
const generateIconsPage = (sourceDir, config) => {
const { imports, classDef} = _generateIconsPage(sourceDir, config);

let content
if (config.componentName === "SAPIcons" ) {
content =`
${commonImports}
${imports}
export default function SAPTNTIcons() {
return (
<div style={{
padding: "2rem 2rem",
}}>
<Heading as="h2" style={{ marginBottom: "0.125rem" }}>SAP TNT Icons</Heading>
<Link to="https://www.npmjs.com/package/@ui5/webcomponents-icons-tnt">@ui5/webcomponents-icons-tnt</Link>
<div className="icon__grid">
${icons}
</div>
</div>
);
}`;

const targetPath = path.resolve(`./${collection}`);
const targetFile = path.resolve(`${targetPath}/index.js`);

if (!fs.existsSync(targetPath)) {
fs.mkdirSync(targetPath, { recursive: true });
}
fs.writeFileSync(targetFile, content,{ encoding:'utf8', flag:'w' });
};

const generateBSIconsPage = (sourceDir, collection, version) => {
const { imports, icons} = _generateIconsPage(sourceDir, collection, version);

const content =`
${classDef}`;
} else {
content =`
${commonImports}
import CopySvg from "../local-cdn/local-cdn/icons/dist/v5/copy.svg";
import AcceptSvg from "../local-cdn/local-cdn/icons/dist/v5/accept.svg";
${additionalImports}
${imports}
export default function SAPBSIcons() {
return (
<div style={{
padding: "2rem 2rem",
}}>
<Heading as="h2" style={{ marginBottom: "0.125rem" }}>SAP Business Suite Icons</Heading>
<Link to="https://www.npmjs.com/package/@ui5/webcomponents-icons-business-suite">@ui5/webcomponents-icons-business-suite</Link>
<div className="icon__grid">
${icons}
</div>
</div>
);
}`;

const targetPath = path.resolve(`./${collection}`);
const targetFile = path.resolve(`${targetPath}/index.js`);

if (!fs.existsSync(targetPath)) {
fs.mkdirSync(targetPath, { recursive: true });
}
fs.writeFileSync(targetFile, content,{ encoding:'utf8', flag:'w' });
${classDef}`;
}

writeFile(config.dir, content);
};

generateIconsPage(path.join(path.resolve(), "./local-cdn/local-cdn/icons/dist/v5"), "icons", "v5");
generateTNTIconsPage(path.join(path.resolve(), "./local-cdn/local-cdn/icons-tnt/dist/v3"), "icons-tnt", "v3");
generateBSIconsPage(path.join(path.resolve(), "./local-cdn/local-cdn/icons-business-suite/dist/v2"), "icons-business-suite", "v2");

generateIconsPage(path.join(path.resolve(), "./local-cdn/local-cdn/icons/dist/v5"), SAPIconsConfig);
generateIconsPage(path.join(path.resolve(), "./local-cdn/local-cdn/icons-tnt/dist/v3"), SAPTNTIconsConfig);
generateIconsPage(path.join(path.resolve(), "./local-cdn/local-cdn/icons-business-suite/dist/v2"), SAPBSIconsConfig);
54 changes: 42 additions & 12 deletions packages/website/src/pages/icons.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,29 +32,30 @@
background-color: var(--ifm-menu-color-background-active);
}

.icon__wrapper.icon__wrapper--copied .icon__wrapper__copy {
display: none;
}

.icon__wrapper.icon__wrapper--copied .icon__wrapper__accept {
.icon__svg--accept.icon__svg--accept--visible {
fill: var(--ifm-color-primary);
display: inline-block;
visibility: visible;
}

.icon__wrapper__copy,
.icon__wrapper__accept {
.icon__svg--copy,
.icon__svg--accept,
.icon__svg--picture {
width: 1rem;
height: 1rem;
align-self: end;
fill: var(--ifm-font-color-base);
pointer-events: none;
}

.icon__wrapper__accept {
display: none;
.icon__svg--accept {
visibility: hidden;
}


[data-theme='dark'] .icon__svg--copy,
[data-theme='dark'] .icon__svg--accept,
[data-theme='dark'] .icon__svg--picture {
fill: var(--ifm-color-primary);
}


.icon__wrapper__title {
color: var(--ifm-font-color-base);
Expand All @@ -63,8 +64,37 @@
word-break: break-all;
font-size: 0.813rem;
pointer-events: none;
overflow: hidden;
text-overflow: ellipsis;
text-wrap: nowrap;
width: 100%;
}

.icon__button--copy,
.icon__button--picture {
width: 1.5rem;
height: 1.5rem;
display: inline-flex;
width: 100%;
align-items: center;
justify-content: center;
padding: 0.25rem;
margin: 0.25rem;
}

[data-theme='dark'] .icon__button--copy,
[data-theme='dark'] .icon__button--picture {
background-color: transparent;
border-color: transparent;
}

[data-theme='dark'] .icon__button--copy:hover,
[data-theme='dark'] .icon__button--picture:hover {
background-color: var(--ifm-background-surface-color);
}



.segmented__button {
display: inline-flex;
align-items: center;
Expand Down

0 comments on commit 3d15ab7

Please sign in to comment.