chore: add illustration and icon explorer

packages/website/plugins/docusaurus-plugin-icons/index.js

@@ -0,0 +1,56 @@
+import { _getRegisteredNames as getIconNames, getIconData } from "@ui5/webcomponents-base/dist/asset-registries/Icons.js";
+import "@ui5/webcomponents-icons/dist/AllIcons.js";
+import "@ui5/webcomponents-icons-tnt/dist/AllIcons.js";
+import "@ui5/webcomponents-icons-business-suite/dist/AllIcons.js";
+
+const COLLECTION_NAMES = {
+	"SAP-icons": "SAP Icons",
+	"tnt": "SAP TNT Icons",
+	"business-suite": "SAP BSuite Icons"
+}
+
+export default function iconsPlugin(context, options) {
+	return {
+		name: 'docusaurus-plugin-icons',
+		async contentLoaded({ content, actions }) {
+			const iconNames = await getIconNames();
+			const iconsInfo = [];
+			const collections = new Set();
+
+			await Promise.all(iconNames.map(async (name) => {
+				const iconData = await getIconData(name);
+				const collection = iconData.collection.replace(/-v\d+/, "");
+
+				collections.add(collection);
+				iconsInfo.push({ ...iconData, name: name.split("/").pop(), collection }); // remove collection version if present
+			}));
+
+			const { createData, addRoute } = actions;
+
+			await Promise.all([...collections].map(async (collection) => {
+				const icons = iconsInfo.filter(icon => icon.collection === collection);
+
+				const iconsJsonPath = await createData(
+					`${collection}-icons.json`,
+					JSON.stringify(icons),
+				);
+
+				const collectNameJsonPath = await createData(
+					`icons-${collection}-name.json`,
+					`"${COLLECTION_NAMES[collection] || collection}"`,
+				);
+
+				addRoute({
+					path: `/resources/icons/${collection}`,
+					component: '@site/src/components/Resources/IconCollection',
+					modules: {
+						// propName -> JSON file path
+						icons: iconsJsonPath,
+						collectioName: collectNameJsonPath
+					},
+					exact: true,
+				});
+			}));
+		},
+	};
+}

packages/website/plugins/docusaurus-plugin-illustrations/index.js

@@ -0,0 +1,72 @@
+import "@ui5/webcomponents-icons/dist/AllIcons.js";
+import "@ui5/webcomponents-icons-tnt/dist/AllIcons.js";
+import "@ui5/webcomponents-icons-business-suite/dist/AllIcons.js";
+import { createRequire } from 'module';
+
+const require = createRequire(import.meta.url);
+
+
+const COLLECTION_NAMES = {
+	"fiori": "SAP Fiori Illustrations",
+	"tnt": "SAP TNT Illustrations",
+}
+
+export default async function illustrationsPlugin(context, options) {
+	const customManifest = require("@ui5/webcomponents-fiori/dist/custom-elements-internal.json");
+
+	const illustrationType = customManifest
+		.modules
+		.find(m => m.path.includes("dist/types/IllustrationMessageType.js"))
+		.declarations
+		.find(d => d.name === "IllustrationMessageType")
+		.members
+		.map(d => ({ name: d.name, deprecated: d.deprecated }));
+
+
+	const illustrationDesign = customManifest
+		.modules
+		.find(m => m.path.includes("dist/types/IllustrationMessageDesign.js"))
+		.declarations
+		.find(d => d.name === "IllustrationMessageDesign")
+		.members
+		.map(d => ({ name: d.name, deprecated: d.deprecated }));
+
+	return {
+		name: 'docusaurus-plugin-illustrations',
+		async contentLoaded({ content, actions }) {
+			const { createData, addRoute } = actions;
+			const illustrationsInfo = {
+				"fiori": illustrationType.filter(i => !i.name.startsWith("Tnt")),
+				"tnt": illustrationType.filter(i => i.name.startsWith("Tnt"))
+			};
+
+			const illustrationDesignJsonPath = await createData(
+				`illustration-design.json`,
+				JSON.stringify(illustrationDesign)
+			);
+
+			await Promise.all(Object.entries(illustrationsInfo).map(async ([collection, illustrations]) => {
+				const illustrationsJsonPath = await createData(
+					`${collection}-illustrations.json`,
+					JSON.stringify(illustrations),
+				);
+				const collectNameJsonPath = await createData(
+					`illustrations-${collection}-name.json`,
+					`"${COLLECTION_NAMES[collection] || collection}"`,
+				);
+
+				addRoute({
+					path: `/resources/illustrations/${collection}`,
+					component: '@site/src/components/Resources/IllustrationCollection',
+					modules: {
+						// propName -> JSON file path
+						illustrationTypes: illustrationsJsonPath,
+						illustrationDesign: illustrationDesignJsonPath,
+						collectioName: collectNameJsonPath
+					},
+					exact: true,
+				});
+			}))
+		},
+	};
+}

packages/website/src/components/Editor/GitHubGist.js

@@ -28,10 +28,10 @@ export default function GitHubGist({
   return (
     <div>
       <ui5-label style={{ marginTop: "1rem" }}>GitHub Gist</ui5-label>
-      
+
       {!githubUser ? (
         <div style={{ textAlign: "center", padding: "1rem 0" }}>
-          <ui5-button 
+          <ui5-button
             onClick={onSignIn}
             disabled={isAuthenticating ? true : undefined}
             style={{ width: "100%" }}
@@ -44,11 +44,11 @@ export default function GitHubGist({
         <div>
           {gistUrl ? (
             <div>
-              <div style={{ 
-                display: "flex", 
-                gap: "0.5rem", 
-                alignItems: "center", 
-                marginBottom: "0.5rem" 
+              <div style={{
+                display: "flex",
+                gap: "0.5rem",
+                alignItems: "center",
+                marginBottom: "0.5rem"
               }}>
                 <ui5-input readonly value={gistUrl}></ui5-input>
                 <ui5-button
@@ -60,7 +60,7 @@ export default function GitHubGist({
             </div>
           ) : (
             <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
-              <ui5-button 
+              <ui5-button
                 onClick={onCreateGist}
                 disabled={isCreatingGist ? true : undefined}
                 icon={GithubIcon}
@@ -76,23 +76,23 @@ export default function GitHubGist({
               </ui5-button>
             </div>
           )}
-          
-          <span style={{ 
-            fontSize: "0.8rem", 
-            color: "var(--sapSuccessColor)" 
+
+          <span style={{
+            fontSize: "0.8rem",
+            color: "var(--ui5-sapSuccessColor)"
           }}>
-            ✓ Signed in as {githubUser.login} 
+            ✓ Signed in as {githubUser.login}
             {githubUser.avatar_url && (
-              <img 
-                src={githubUser.avatar_url} 
-                alt="avatar" 
-                style={{ 
-                  width: "1.5rem", 
-                  height: "1.5rem", 
-                  borderRadius: "50%", 
-                  verticalAlign: "middle", 
-                  marginLeft: "0.5rem" 
-                }} 
+              <img
+                src={githubUser.avatar_url}
+                alt="avatar"
+                style={{
+                  width: "1.5rem",
+                  height: "1.5rem",
+                  borderRadius: "50%",
+                  verticalAlign: "middle",
+                  marginLeft: "0.5rem"
+                }}
               />
             )}
           </span>

packages/website/src/components/Editor/examples/counter/html.js

@@ -3,7 +3,7 @@ export default `<!-- playground-fold -->
 <head>
 </head>
 
-<body style="background-color: var(--sapBackgroundColor); color: var(--sapTextColor);">
+<body style="background-color: var(--ui5-sapBackgroundColor); color: var(--ui5-sapTextColor);">
   <!-- playground-fold-end -->
 
   <my-counter>

packages/website/src/components/Editor/examples/hello-world/html.js

@@ -3,7 +3,7 @@ export default `<!-- playground-fold -->
 <head>
 </head>
 
-<body style="background-color: var(--sapBackgroundColor); color: var(--sapTextColor);">
+<body style="background-color: var(--ui5-sapBackgroundColor); color: var(--ui5-sapTextColor);">
   <!-- playground-fold-end -->
 
   <my-element></my-element>

packages/website/src/components/Resources/IconCollection/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import "@ui5/webcomponents/dist/Icon.js"
+import "@ui5/webcomponents/dist/Button.js"
+import "@ui5/webcomponents/dist/Input.js"
+import "@ui5/webcomponents/dist/Text.js"
+import "@ui5/webcomponents/dist/Title.js"
+import "@ui5/webcomponents-icons/dist/AllIcons.js";
+import "@ui5/webcomponents-icons-tnt/dist/AllIcons.js";
+import "@ui5/webcomponents-icons-business-suite/dist/AllIcons.js";
+import ResourceLayout from '@site/src/components/Resources/ResourcesLayout';
+
+import "./styles.css";
+
+
+// @ts-ignore
+export default function FriendsComponent({ collectioName, icons }) {
+	const [filterValue, setFilterValue] = React.useState("");
+
+	const handleFilterChange = (event: CustomEvent) => {
+		const input = event.target as HTMLInputElement;
+		setFilterValue(input.value);
+	}
+	return <ResourceLayout>
+		<div className='icon-collection-header'>
+			<ui5-title level="H1" size="H1" wrapping-type="None" class="icon-collection-header--title">{collectioName}</ui5-title>
+			<ui5-input placeholder="Filter icons..." class="icon-collection-header--filter" onInput={handleFilterChange} />
+		</div>
+		<div className="icon-collection-list">
+			{
+				icons.filter(iconData => iconData.name.includes(filterValue)).map((iconData) => (
+					<div key={`${iconData.collection}/${iconData.name}`} className="icon-collection-list-item">
+						<ui5-icon name={`${iconData.collection}/${iconData.name}`} class="icon-collection-list-item--icon"></ui5-icon>
+						<ui5-text class="icon-collection-list-item--title">
+							{iconData.name}
+						</ui5-text>
+						<div className='icon-collection-list-item--actions'>
+							<ui5-button design="Transparent" icon="copy"></ui5-button>
+							<ui5-button design="Transparent" icon="picture"></ui5-button>
+						</div>
+					</div>
+				))
+			}
+		</div>
+	</ResourceLayout>
+}

packages/website/src/components/Resources/IconCollection/styles.css

@@ -0,0 +1,55 @@
+.icon-collection-header {
+	display: flex;
+	align-items: center;
+	gap: 1rem;
+}
+
+.icon-collection-header--title {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	flex-grow: 1;
+	white-space: nowrap;
+}
+
+.icon-collection-header--filter {
+	flex-shrink: 0;
+}
+
+.icon-collection-list {
+	display: grid;
+	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+	gap: 1rem;
+}
+
+.icon-collection-list-item {
+	padding: 1rem;
+	box-shadow: var(--ui5-sapContent_Shadow0);
+	background-color: var(--ui5-sapList_Background);
+	border-radius: var(--ui5-sapTile_BorderCornerRadius);
+	display: flex;
+	box-sizing: border-box;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	text-align: center;
+	gap: 0.5rem;
+}
+
+.icon-collection-list-item--icon {
+	width: 2rem;
+	height: 2rem;
+}
+
+.icon-collection-list-item--title {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	;
+	width: 100%;
+	display: block;
+}
+
+.icon-collection-list-item--actions {
+	display: flex;
+	gap: 0.5rem;
+}