diff --git a/packages/website/docusaurus.config.ts b/packages/website/docusaurus.config.ts index 2a41300248cf..180d015ad367 100644 --- a/packages/website/docusaurus.config.ts +++ b/packages/website/docusaurus.config.ts @@ -2,7 +2,8 @@ import { themes as prismThemes } from 'prism-react-renderer'; import type { Config } from '@docusaurus/types'; import type * as Preset from '@docusaurus/preset-classic'; import packageJson from "./package.json"; - +import pluginIcons from './plugins/docusaurus-plugin-icons/index.js'; +import pluginIllustrations from './plugins/docusaurus-plugin-illustrations/index.js'; console.log("DEPLOYMENT_TYPE", process.env.DEPLOYMENT_TYPE); // eslint-disable-line @@ -14,281 +15,288 @@ const NETLIFY_PREVIEW_URL_PATH = process.env.DEPLOYMENT_NETLIFY_PREVIEW_BASE_URL const LATEST_DEPLOYMENT = process.env.DEPLOYMENT_TYPE === "latest"; const PREVIEW_DEPLOYMENT = process.env.DEPLOYMENT_TYPE === "preview"; const PREVIEW_NETLIFY_DEPLOYMENT = process.env.DEPLOYMENT_TYPE === "netlify_preview"; -const DEVELOPMENT_ENVIRONMENT = process.env.NODE_ENV === "development"; +const DEVELOPMENT_ENVIRONMENT = process.env.NODE_ENV === "development"; const getSiteUrl = () => { - if (PREVIEW_NETLIFY_DEPLOYMENT) { - return NETLIFY_PREVIEW_URL_PATH; - } - return 'https://ui5.github.io'; + if (PREVIEW_NETLIFY_DEPLOYMENT) { + return NETLIFY_PREVIEW_URL_PATH; + } + return 'https://ui5.github.io'; } const getBaseURL = () => { - // localhost - if (DEVELOPMENT_ENVIRONMENT || PREVIEW_NETLIFY_DEPLOYMENT) { - return "/"; - } + // localhost + if (DEVELOPMENT_ENVIRONMENT || PREVIEW_NETLIFY_DEPLOYMENT) { + return "/"; + } - // PR preview deployment - if (PREVIEW_DEPLOYMENT) { - return PREVIEW_URL_PATH; - } + // PR preview deployment + if (PREVIEW_DEPLOYMENT) { + return PREVIEW_URL_PATH; + } - // latest deployment or nightly deployment - return LATEST_DEPLOYMENT ? LATEST_URL_PATH : NIGHTLY_URL_PATH; + // latest deployment or nightly deployment + return LATEST_DEPLOYMENT ? LATEST_URL_PATH : NIGHTLY_URL_PATH; }; const SITE_URL = getSiteUrl(); const BASE_URL = getBaseURL(); const getFullURL = () => { - return DEVELOPMENT_ENVIRONMENT ? `${BASE_URL}` : `${SITE_URL}${BASE_URL}`; + return DEVELOPMENT_ENVIRONMENT ? `${BASE_URL}` : `${SITE_URL}${BASE_URL}`; } // ["v1", "nightly", "current"] const siteVersion = LATEST_DEPLOYMENT ? (packageJson.version.startsWith("1") ? "v1" : "current") : "nightly"; const config: Config = { - customFields: { - ui5Version: packageJson.version, - ui5DeploymentType: process.env.DEPLOYMENT_TYPE, - ui5PreviewPath: PREVIEW_URL_PATH, - }, - title: 'UI5 Web Components', - tagline: 'An open-source UI components library for building enterprise-ready applications!', - favicon: 'img/favicon.ico', + customFields: { + ui5Version: packageJson.version, + ui5DeploymentType: process.env.DEPLOYMENT_TYPE, + ui5PreviewPath: PREVIEW_URL_PATH, + }, + title: 'UI5 Web Components', + tagline: 'An open-source UI components library for building enterprise-ready applications!', + favicon: 'img/favicon.ico', - // Set the production url of your site here - url: SITE_URL, - // Set the // pathname under which your site is served - // For GitHub pages deployment, it is often '//' - baseUrl: BASE_URL, - // github pages makes a redirect to a trailing slash url, which prevents pages from being crawled by google - trailingSlash: true, + // Set the production url of your site here + url: SITE_URL, + // Set the // pathname under which your site is served + // For GitHub pages deployment, it is often '//' + baseUrl: BASE_URL, + // github pages makes a redirect to a trailing slash url, which prevents pages from being crawled by google + trailingSlash: true, - // GitHub pages deployment config. - // If you aren't using GitHub pages, you don't need these. - organizationName: 'SAP', // Usually your GitHub org/user name. - projectName: 'webcomponents', // Usually your repo name. + // GitHub pages deployment config. + // If you aren't using GitHub pages, you don't need these. + organizationName: 'SAP', // Usually your GitHub org/user name. + projectName: 'webcomponents', // Usually your repo name. - onBrokenLinks: 'throw', - onBrokenMarkdownLinks: 'warn', + onBrokenLinks: 'throw', + onBrokenMarkdownLinks: 'warn', - staticDirectories: ['public', 'static', 'local-cdn'], - // Even if you don't use internationalization, you can use this field to set - // useful metadata like html lang. For example, if your site is Chinese, you - // may want to replace "en" with "zh-Hans". - i18n: { - defaultLocale: 'en', - locales: ['en'], - }, + staticDirectories: ['public', 'static', 'local-cdn'], + // Even if you don't use internationalization, you can use this field to set + // useful metadata like html lang. For example, if your site is Chinese, you + // may want to replace "en" with "zh-Hans". + i18n: { + defaultLocale: 'en', + locales: ['en'], + }, - presets: [ - [ - 'classic', - { - docs: { - routeBasePath: '/', - sidebarPath: './sidebars.ts', - }, - theme: { - customCss: './src/css/custom.css', - }, - blog: { - blogSidebarTitle: 'All our posts', - blogSidebarCount: 'ALL', - }, - } satisfies Preset.Options, - ], - ], - plugins: [ - ], - themeConfig: { - algolia: { - // The application ID provided by Algolia - appId: '622UUS4QSN', + presets: [ + [ + 'classic', + { + docs: { + routeBasePath: '/', + sidebarPath: './sidebars.ts', + }, + theme: { + customCss: './src/css/custom.css', + }, + blog: { + blogSidebarTitle: 'All our posts', + blogSidebarCount: 'ALL', + }, + } satisfies Preset.Options, + ], + ], + plugins: [ + pluginIcons, + pluginIllustrations + ], + themeConfig: { + algolia: { + // The application ID provided by Algolia + appId: '622UUS4QSN', - // Public API key: it is safe to commit it - apiKey: '27580e2427e91972e5385a935bafb0a1', + // Public API key: it is safe to commit it + apiKey: '27580e2427e91972e5385a935bafb0a1', - indexName: 'sapio', + indexName: 'sapio', - // Optional: see doc section below - contextualSearch: true, + // Optional: see doc section below + contextualSearch: true, - // Optional: Algolia search parameters - searchParameters: { - facetFilters: [`version:${siteVersion}`], - }, + // Optional: Algolia search parameters + searchParameters: { + facetFilters: [`version:${siteVersion}`], + }, - // Optional: path for search page that enabled by default (`false` to disable it) - searchPagePath: 'search', + // Optional: path for search page that enabled by default (`false` to disable it) + searchPagePath: 'search', - // // Optional: whether the insights feature is enabled or not on Docsearch (`false` by default) - // insights: false, + // // Optional: whether the insights feature is enabled or not on Docsearch (`false` by default) + // insights: false, - //... other Algolia params - }, - colorMode: { - defaultMode: 'light', - disableSwitch: true, - respectPrefersColorScheme: false, - }, - // Replace with your project's social card - image: 'img/docusaurus-social-card.jpg', - navbar: { - title: 'UI5 Web Components', - logo: { - alt: 'UI5 Web Components Logo', - src: 'img/logos/LogoWater.svg', - }, - items: [ - { - to: 'docs', - label: 'Docs', - activeBasePath: 'docs', - }, - { - to: 'blog', - label: 'Blog', - activeBasePath: 'blog', - }, - { - to: 'components/', - label: 'Components', - activeBasePath: 'components', - }, - { - to: 'icons/', - label: 'Icons', - activeBasePath: 'icons', - }, - { - to: 'play/', - label: 'Playground', - activeBasePath: 'play', - }, - { - type: 'custom-versionsNavbarItem', - position: "right", - }, - { - type: 'custom-settingsNavbarItem', - position: "right", - }, - { - type: 'custom-GitHubNavbarItem', - position: "right", - }, - ], - }, - footer: { - style: 'dark', - copyright: `© Copyright ${new Date().getFullYear()}, SAP SE and UI5 Web Components Contributors`, - logo: { - alt: 'SAP Logo', - src: 'https://ui5.github.io/webcomponents/img/footer/sap-1920-1440.svg', - width: 160, - height: 51, - }, - links: [ - { - title: 'Community', - items: [ - { - label: 'Twitter', - to: 'https://twitter.com/ui5webcomps', - }, - { - label: 'Slack', - to: 'https://openui5.slack.com/', - }, - { - label: 'Youtube', - to: 'https://www.youtube.com/watch?v=9P5Jk4S3438&list=PLHUs_FUbq4dXkQpUt6b4eCXAAjiOg0IC-', - }, - { - label: 'GitHub', - to: 'https://github.com/UI5/webcomponents/', - }, - // { - // html: ` - //
- // - // Twitter - // - // - // Slack - // - // - // Youtube - // - // - // GitHub - // - //
- // `, - // }, - ], - }, - { - title: 'Docs', - items: [ - { - label: 'Documentation', - to: '/docs/getting-started/first-steps', - }, - { - label: 'FAQ', - to: 'docs/FAQ/', - }, - ], - }, - { - title: 'Legal & Privacy', - items: [ - { - label: 'Privacy', - href: `${getFullURL()}Privacy`, - }, - { - label: 'Legal Disclosure', - href: 'https://www.sap.com/impressum', - }, - { - label: 'Terms of Use', - href: 'https://www.sap.com/terms-of-use', - }, - { - label: 'Trademark', - href: 'https://www.sap.com/trademark', - }, - ], - }, - { - title: 'Contact Us', - items: [ - { - label: 'Report Issue', - to: 'https://github.com/UI5/webcomponents/issues/new', - }, - { - label: 'Technical Questions', - to: 'https://openui5.slack.com/', - }, - { - label: 'Product Questions', - to: 'mailto:openui5@sap.com?subject=[UI5 Web Components]', - }, - ], - }, - ], - }, - prism: { - theme: prismThemes.github, - darkTheme: prismThemes.dracula, - }, - } satisfies Preset.ThemeConfig, + //... other Algolia params + }, + colorMode: { + defaultMode: 'light', + disableSwitch: true, + respectPrefersColorScheme: false, + }, + // Replace with your project's social card + image: 'img/docusaurus-social-card.jpg', + navbar: { + title: 'UI5 Web Components', + logo: { + alt: 'UI5 Web Components Logo', + src: 'img/logos/LogoWater.svg', + }, + items: [ + { + to: 'docs', + label: 'Docs', + activeBasePath: 'docs', + }, + { + to: 'blog', + label: 'Blog', + activeBasePath: 'blog', + }, + { + to: 'components/', + label: 'Components', + activeBasePath: 'components', + }, + { + to: 'icons/', + label: 'Icons', + activeBasePath: 'icons', + }, + { + to: 'play/', + label: 'Playground', + activeBasePath: 'play', + }, + { + to: 'resources/', + label: 'Resources', + activeBasePath: 'resources', + }, + { + type: 'custom-versionsNavbarItem', + position: "right", + }, + { + type: 'custom-settingsNavbarItem', + position: "right", + }, + { + type: 'custom-GitHubNavbarItem', + position: "right", + }, + ], + }, + footer: { + style: 'dark', + copyright: `© Copyright ${new Date().getFullYear()}, SAP SE and UI5 Web Components Contributors`, + logo: { + alt: 'SAP Logo', + src: 'https://ui5.github.io/webcomponents/img/footer/sap-1920-1440.svg', + width: 160, + height: 51, + }, + links: [ + { + title: 'Community', + items: [ + { + label: 'Twitter', + to: 'https://twitter.com/ui5webcomps', + }, + { + label: 'Slack', + to: 'https://openui5.slack.com/', + }, + { + label: 'Youtube', + to: 'https://www.youtube.com/watch?v=9P5Jk4S3438&list=PLHUs_FUbq4dXkQpUt6b4eCXAAjiOg0IC-', + }, + { + label: 'GitHub', + to: 'https://github.com/UI5/webcomponents/', + }, + // { + // html: ` + //
+ // + // Twitter + // + // + // Slack + // + // + // Youtube + // + // + // GitHub + // + //
+ // `, + // }, + ], + }, + { + title: 'Docs', + items: [ + { + label: 'Documentation', + to: '/docs/getting-started/first-steps', + }, + { + label: 'FAQ', + to: 'docs/FAQ/', + }, + ], + }, + { + title: 'Legal & Privacy', + items: [ + { + label: 'Privacy', + href: `${getFullURL()}Privacy`, + }, + { + label: 'Legal Disclosure', + href: 'https://www.sap.com/impressum', + }, + { + label: 'Terms of Use', + href: 'https://www.sap.com/terms-of-use', + }, + { + label: 'Trademark', + href: 'https://www.sap.com/trademark', + }, + ], + }, + { + title: 'Contact Us', + items: [ + { + label: 'Report Issue', + to: 'https://github.com/UI5/webcomponents/issues/new', + }, + { + label: 'Technical Questions', + to: 'https://openui5.slack.com/', + }, + { + label: 'Product Questions', + to: 'mailto:openui5@sap.com?subject=[UI5 Web Components]', + }, + ], + }, + ], + }, + prism: { + theme: prismThemes.github, + darkTheme: prismThemes.dracula, + }, + } satisfies Preset.ThemeConfig, }; export default config; diff --git a/packages/website/plugins/docusaurus-plugin-icons/index.js b/packages/website/plugins/docusaurus-plugin-icons/index.js new file mode 100644 index 000000000000..fcad09576a18 --- /dev/null +++ b/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, + }); + })); + }, + }; +} \ No newline at end of file diff --git a/packages/website/plugins/docusaurus-plugin-illustrations/index.js b/packages/website/plugins/docusaurus-plugin-illustrations/index.js new file mode 100644 index 000000000000..240f54fd72f6 --- /dev/null +++ b/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, + }); + })) + }, + }; +} \ No newline at end of file diff --git a/packages/website/src/components/Editor/GitHubGist.js b/packages/website/src/components/Editor/GitHubGist.js index 6bb257dad64b..cc9d29b079f9 100644 --- a/packages/website/src/components/Editor/GitHubGist.js +++ b/packages/website/src/components/Editor/GitHubGist.js @@ -28,10 +28,10 @@ export default function GitHubGist({ return (
GitHub Gist - + {!githubUser ? (
- {gistUrl ? (
-
) : (
-
)} - - - ✓ Signed in as {githubUser.login} + ✓ Signed in as {githubUser.login} {githubUser.avatar_url && ( - avatar )} diff --git a/packages/website/src/components/Editor/examples/counter/html.js b/packages/website/src/components/Editor/examples/counter/html.js index 1d6c046c6ae6..88ae23e85ad6 100644 --- a/packages/website/src/components/Editor/examples/counter/html.js +++ b/packages/website/src/components/Editor/examples/counter/html.js @@ -3,7 +3,7 @@ export default ` - + diff --git a/packages/website/src/components/Editor/examples/hello-world/html.js b/packages/website/src/components/Editor/examples/hello-world/html.js index d3886b61831a..903bbcfa5a7d 100644 --- a/packages/website/src/components/Editor/examples/hello-world/html.js +++ b/packages/website/src/components/Editor/examples/hello-world/html.js @@ -3,7 +3,7 @@ export default ` - + diff --git a/packages/website/src/components/Resources/IconCollection/index.tsx b/packages/website/src/components/Resources/IconCollection/index.tsx new file mode 100644 index 000000000000..824dd7f3b883 --- /dev/null +++ b/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 +
+ {collectioName} + +
+
+ { + icons.filter(iconData => iconData.name.includes(filterValue)).map((iconData) => ( +
+ + + {iconData.name} + +
+ + +
+
+ )) + } +
+ +} \ No newline at end of file diff --git a/packages/website/src/components/Resources/IconCollection/styles.css b/packages/website/src/components/Resources/IconCollection/styles.css new file mode 100644 index 000000000000..498d4fbdb939 --- /dev/null +++ b/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; +} \ No newline at end of file diff --git a/packages/website/src/components/Resources/IllustrationCollection/index.tsx b/packages/website/src/components/Resources/IllustrationCollection/index.tsx new file mode 100644 index 000000000000..62f2cce0374a --- /dev/null +++ b/packages/website/src/components/Resources/IllustrationCollection/index.tsx @@ -0,0 +1,110 @@ +import React, { useEffect } 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/Bar.js' +import '@ui5/webcomponents/dist/Panel.js' +import '@ui5/webcomponents/dist/Select.js' +import '@ui5/webcomponents/dist/Option.js' +import '@ui5/webcomponents/dist/Title.js' +import '@ui5/webcomponents-icons/dist/decline.js' +import '@ui5/webcomponents-fiori/dist/IllustratedMessage.js' +import '@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js' +import ResourcesLayout from '@site/src/components/Resources/ResourcesLayout'; +import SidePanel from '@site/src/components/Resources/SidePanel'; + +import './styles.css'; + + +// @ts-ignore +export default function FriendsComponent({ collectioName, illustrationTypes, illustrationDesign }) { + const [filterValue, setFilterValue] = React.useState(''); + const [selectedDesign, setSelectedDesign] = React.useState('Large'); + const [selectedIllustration, setSelectedIllustration] = React.useState(null); + const elRef = React.useRef(null); + + const handleFilterChange = (event: CustomEvent) => { + const input = event.target as HTMLInputElement; + setFilterValue(input.value); + } + + React.useEffect(() => { + const el = elRef.current; + if (!el) return; + + const handleSelectionChange = (event: CustomEvent) => { + const select = event.target as HTMLSelectElement; + setSelectedDesign(select.value); + } + + el.addEventListener("ui5-change", handleSelectionChange); + + return () => { + el.removeEventListener("ui5-change", handleSelectionChange); + }; + }, []); + + const handleClose = () => { + setSelectedIllustration(null); + } + + + return +
+ {collectioName} + + { + illustrationDesign.filter(design => !design.deprecated && design.name !== 'Auto' && design.name !== 'Base').map(design => ( + {design.name} + )) + } + + +
+
+ { + illustrationTypes.filter(illustration => illustration.name.includes(filterValue)).map((illustration) => ( +
{ + setSelectedIllustration(illustration.name); + }} + className='illustration-collection-list-item'> + + {illustration.name} + {selectedDesign} + +
+ )) + } +
+ + {!!selectedIllustration && + + + + Illustration: {selectedIllustration} + + + +
+ + + + + + + + + + + + + + +
+ + + } + +} \ No newline at end of file diff --git a/packages/website/src/components/Resources/IllustrationCollection/styles.css b/packages/website/src/components/Resources/IllustrationCollection/styles.css new file mode 100644 index 000000000000..2694e25bb6af --- /dev/null +++ b/packages/website/src/components/Resources/IllustrationCollection/styles.css @@ -0,0 +1,48 @@ +.illustration-collection-header { + display: flex; + align-items: center; + gap: 1rem; +} + +.illustration-collection-header--title { + overflow: hidden; + text-overflow: ellipsis; + flex-grow: 1; + white-space: nowrap; +} + +.illustration-collection-header--filter { + flex-shrink: 0; +} + +.illustration-collection-list { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); + gap: 1rem; +} + +.illustration-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; +} +.illustration-collection-list-item:hover { + background-color: var(--ui5-sapList_Hover_Background); + box-shadow: var(--ui5-sapContent_Shadow2); +} + +.illustration-collection-list-item:active { + background-color: var(--ui5-sapList_Active_Background); +} + +.illustration-collection-list-item--title { + font-size: 1rem; +} diff --git a/packages/website/src/components/Resources/ResourcesLayout/index.tsx b/packages/website/src/components/Resources/ResourcesLayout/index.tsx new file mode 100644 index 000000000000..1e18042384a7 --- /dev/null +++ b/packages/website/src/components/Resources/ResourcesLayout/index.tsx @@ -0,0 +1,34 @@ +import "@ui5/webcomponents-fiori/dist/NavigationLayout.js"; +import "@ui5/webcomponents-fiori/dist/SideNavigation.js"; +import "@ui5/webcomponents-fiori/dist/SideNavigationItem.js"; +import "@ui5/webcomponents-fiori/dist/SideNavigationGroup.js"; +import "@ui5/webcomponents-fiori/dist/Page.js"; +import "@ui5/webcomponents-fiori/dist/ShellBar.js"; +import "@ui5/webcomponents-fiori/dist/ShellBarBranding.js"; + +export default function ResourceLayout({ children }: { children: React.ReactNode }) { + return ( + + + + Resources + + + + + + + + + + + + + + + + {children} + + + ) +} \ No newline at end of file diff --git a/packages/website/src/components/Resources/SidePanel/index.tsx b/packages/website/src/components/Resources/SidePanel/index.tsx new file mode 100644 index 000000000000..90eaabfec3f4 --- /dev/null +++ b/packages/website/src/components/Resources/SidePanel/index.tsx @@ -0,0 +1,45 @@ +import React, { useEffect, useRef } 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/Bar.js' +import '@ui5/webcomponents/dist/Panel.js' +import '@ui5/webcomponents/dist/Select.js' +import '@ui5/webcomponents/dist/Option.js' +import '@ui5/webcomponents/dist/Title.js' +import '@ui5/webcomponents-icons/dist/decline.js' +import '@ui5/webcomponents-fiori/dist/IllustratedMessage.js' +import '@ui5/webcomponents-fiori/dist/illustrations/AllIllustrations.js' + +import './styles.css'; + + +// @ts-ignore +export default function SidePanel({ children, open }) { + const blockRef = useRef(null); + const panelRef = useRef(null); + + useEffect(() => { + const handle = setTimeout(() => { + if (open) { + blockRef.current?.showPopover(); + panelRef.current?.showPopover(); + } else { + panelRef.current?.hidePopover(); + blockRef.current?.hidePopover(); + } + }, 0); + + return () => clearTimeout(handle); + }, [open]); + + return ( + <> +
+
+ {children} +
+ + ); +} \ No newline at end of file diff --git a/packages/website/src/components/Resources/SidePanel/styles.css b/packages/website/src/components/Resources/SidePanel/styles.css new file mode 100644 index 000000000000..c76a9e65c690 --- /dev/null +++ b/packages/website/src/components/Resources/SidePanel/styles.css @@ -0,0 +1,38 @@ +#block-layer, +#panel { + all: unset; +} + +#block-layer { + position: fixed; + inset: 0; + pointer-events: all; +} + +#panel { + overflow: hidden; + position: fixed; + height: 100vh; + border: none; + min-width: 70%; + margin: 0; + padding: 0; + inset: unset; + right: 0; + border-start-start-radius: var(--ui5-sapElement_BorderCornerRadius); + border-end-start-radius: var(--ui5-sapElement_BorderCornerRadius); + box-shadow: var(--ui5-sapContent_Shadow2); +} + +#panel::backdrop { + background-color: var(--ui5-sapBlockLayer_Background); + opacity: 0.2; +} + +@media (max-width: 768px) { + #panel { + width: 100%; + min-width: 100%; + border-radius: 0; + } +} \ No newline at end of file diff --git a/packages/website/src/pages/resources.tsx b/packages/website/src/pages/resources.tsx new file mode 100644 index 000000000000..7b0e9ba045b3 --- /dev/null +++ b/packages/website/src/pages/resources.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import ResourceLayout from '@site/src/components/Resources/ResourcesLayout'; + + +export default function Resources() { + return + Resources starting page + +} \ No newline at end of file