chore: copy icon names to clipboard (#8382)

SAP · Mar 1, 2024 · 8ea2ab9 · 8ea2ab9
1 parent 78b98a5
commit 8ea2ab9
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 57 deletions.
diff --git a/docs/3-customizing/02-theme.md b/docs/3-customizing/02-theme.md
@@ -1,4 +1,4 @@
-# Custom Theming with `UI Theme Designer`
+# Custom Theming with UI Theme Designer
 
 UI5 Web Components are fully compatible with `UI Theme Designer`, a tool for building a custom theme. You can create your own theme and effortlessly integrate it in your UI5 Web Components project on HTML level. On top, this does not prevent you from switching to and from officially supported themes, while having your own.
 

diff --git a/docs/5-development/04-understanding-hbs-templates.md b/docs/5-development/04-understanding-hbs-templates.md
@@ -1,4 +1,4 @@
-# Understanding the Handlebars (`.hbs`) templates
+# Understanding the Handlebars (.hbs) templates
 
 The preferred way to write the renderers for UI5 Web Components (and supported directly by the build tools) is to use standard Handlebars templates with some additional custom syntax.
 

diff --git a/packages/website/build-scripts/icons-generation/index.mjs b/packages/website/build-scripts/icons-generation/index.mjs
@@ -18,6 +18,13 @@ const capitalize = (str) => {
     return capitalizedWord;
 }
 
+const commonImports = `
+import React from 'react';
+import clsx from "clsx";
+import Heading from '@theme/Heading';
+import Link from '@docusaurus/Link';
+`
+
 const _generateIconsPage = (sourceDir, collection, version) => {
     let imports = ``;
     let icons = ``;
@@ -36,17 +43,22 @@ import ${svgImport} from "../local-cdn/local-cdn/${collection}/dist/${version}/$
 `;
 
         icons += `
-<div style={{
-    display: "flex",
-    alignItems: "center",
-    flexDirection: "column",
-    padding: "1rem",
-    backgroundColor: "var(--ifm-background-surface-color)",
-    boxShadow: "rgba(0, 0, 0, 0.15) 0px 1.5px 3px 0px", 
-    borderRadius: "0.5rem",
-}}>
-    <div style={{width: "3rem", height: "3rem"}}><${svgImport} fill="var(--ifm-font-color-base)"/></div>
-    <span style={{ color: "var(--ifm-font-color-base)", textAlign: "center", marginTop: "0.5rem", wordBreak: "break-all" }}>{${iconNameImport}}</span>
+<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");
+        }, 500)
+    }}>
+    <CopySvg className="icon__wrapper__copy"/>
+    <div className="icon__wrapper__svg"><${svgImport} fill="var(--ifm-font-color-base)"/></div>
+    <span className="icon__wrapper__title">{${iconNameImport}}</span>
 </div>`;
         }
     });
@@ -58,29 +70,18 @@ const generateIconsPage = (sourceDir, collection, version) => {
    const { imports, icons} = _generateIconsPage(sourceDir, collection, version);
 
     const content =`
-import React from 'react';
-
-import Heading from '@theme/Heading';
-import Link from '@docusaurus/Link';
+${commonImports}
 
 ${imports}
 
 export default function SAPIcons() {
     return (
-            <div style={{
-                    padding: "2rem 2rem",
-                }}>
+            <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 style={{
-                    display: "grid",
-                    padding: "2rem 0",
-                    gap: "2rem",
-                    rowGap: "2rem",
-                    gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))"
-                }}>
+                <div className="icon__grid">
                     ${icons}
                 </div>
             </div>
@@ -100,12 +101,10 @@ const generateTNTIconsPage = (sourceDir, collection, version) => {
     const { imports, icons} = _generateIconsPage(sourceDir, collection, version);
 
      const content =`
- import React from 'react';
- 
- import Heading from '@theme/Heading';
- import Link from '@docusaurus/Link';
- 
- ${imports}
+${commonImports}
+import CopySvg from "../local-cdn/local-cdn/icons/dist/v5/copy.svg";
+
+${imports}
  
  export default function SAPTNTIcons() {
      return (
@@ -116,13 +115,7 @@ const generateTNTIconsPage = (sourceDir, collection, version) => {
                  <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 style={{
-                     display: "grid",
-                     padding: "2rem 0",
-                     gap: "2rem",
-                     rowGap: "2rem",
-                     gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))"
-                 }}>
+                 <div className="icon__grid">
                      ${icons}
                  </div>
              </div>
@@ -142,12 +135,10 @@ const generateBSIconsPage = (sourceDir, collection, version) => {
     const { imports, icons} = _generateIconsPage(sourceDir, collection, version);
 
      const content =`
- import React from 'react';
- 
- import Heading from '@theme/Heading';
- import Link from '@docusaurus/Link';
+${commonImports}
  
- ${imports}
+import CopySvg from "../local-cdn/local-cdn/icons/dist/v5/copy.svg";
+${imports}
  
  export default function SAPBSIcons() {
      return (
@@ -158,13 +149,7 @@ const generateBSIconsPage = (sourceDir, collection, version) => {
                  <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 style={{
-                     display: "grid",
-                     padding: "2rem 0",
-                     gap: "2rem",
-                     rowGap: "2rem",
-                     gridTemplateColumns: "repeat(auto-fill, minmax(100px, 1fr))"
-                 }}>
+                 <div className="icon__grid">
                      ${icons}
                  </div>
              </div>

diff --git a/packages/website/src/pages/icons.css b/packages/website/src/pages/icons.css
@@ -1,3 +1,62 @@
+.icon__grid {
+	display: grid;
+	padding: 2rem 0;
+	gap: 2rem;
+	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
+}
+
+.icon__wrapper {
+	position: relative;
+	display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding: 0.5rem;
+    background-color: var(--ifm-background-surface-color);
+    box-shadow: rgba(0, 0, 0, 0.15) 0px 1.5px 3px 0px;
+    border-radius: 0.5rem;
+    cursor: pointer;
+	justify-content: center;
+}
+
+[data-theme='dark'] .icon__wrapper:hover {
+	background-color: var(--ifm-background-color);
+}
+
+.icon__wrapper:hover {
+	background-color: var(--ifm-menu-color-background-active);
+}
+
+.icon__wrapper.icon__wrapper--copied .icon__wrapper__copy {
+	fill: var(--ifm-color-primary);
+}
+
+.icon__wrapper__svg {
+	width: 2rem;
+	height: 2rem;
+	pointer-events: none;
+}
+
+.icon__wrapper__copy {
+	fill: var(--ifm-color-primary);
+}
+
+.icon__wrapper__copy {
+	width: 1rem;
+	height: 1rem;
+	align-self: end;
+	fill: var(--ifm-font-color-base);
+	pointer-events: none;
+}
+
+.icon__wrapper__title {
+	color: var(--ifm-font-color-base);
+	text-align: center;
+	margin-top: 0.5rem;
+	word-break: break-all;
+	font-size: 0.813rem;
+	pointer-events: none;
+}
+
 .segmented__button {
 	display: inline-flex;
     align-items: center;

diff --git a/packages/website/src/pages/icons.tsx b/packages/website/src/pages/icons.tsx
@@ -28,19 +28,19 @@ const Select = ({ updateState }) => {
 
     <div
         onClick={() => { 
-          setCollection("SAP BS Icons");
-          updateState("SAP BS Icons");
+          setCollection("SAP BSuite Icons");
+          updateState("SAP BSuite Icons");
         }}
-        className={clsx("segmented__button__item", { 'segmented__button__item--active': collection === "SAP BS Icons" })}
-    >SAP BS Icons</div>
+        className={clsx("segmented__button__item", { 'segmented__button__item--active': collection === "SAP BSuite Icons" })}
+    >SAP BSuite Icons</div>
   </div>;
 };
 
 
 const Collection = ({ currCollection }) => { 
   if (currCollection === "SAP TNT Icons") {
       return <SAPTNTIcons />
-  } else if (currCollection === "SAP BS Icons") {
+  } else if (currCollection === "SAP BSuite Icons") {
       return <SAPBSIcons />
   }