diff --git a/packages/website/docs/_components_pages/fiori/ShellBar/ShellBar.mdx b/packages/website/docs/_components_pages/fiori/ShellBar/ShellBar.mdx index 82f8039d26e9..c48200d2bef4 100644 --- a/packages/website/docs/_components_pages/fiori/ShellBar/ShellBar.mdx +++ b/packages/website/docs/_components_pages/fiori/ShellBar/ShellBar.mdx @@ -1,5 +1,9 @@ import Basic from "../../../_samples/fiori/ShellBar/Basic/Basic.md"; import Advanced from "../../../_samples/fiori/ShellBar/Advanced/Advanced.md"; +import EmbeddedBackNavigation from "../../../_samples/fiori/ShellBar/EmbeddedBackNavigation/EmbeddedBackNavigation.md"; +import MultipleNonProductiveInstances from "../../../_samples/fiori/ShellBar/MultipleNonProductiveInstances/MultipleNonProductiveInstances.md"; +import MultipleProductiveInstances from "../../../_samples/fiori/ShellBar/MultipleProductiveInstances/MultipleProductiveInstances.md"; +import TrialExample from "../../../_samples/fiori/ShellBar/TrialExample/TrialExample.md"; <%COMPONENT_OVERVIEW%> @@ -12,7 +16,27 @@ The ShellBar includes Back button, Logo, Title and Profile image. ## More Samples -### Profile Area -Press the profile image on the right-most side to open a simple popup that one can implment its own profile area. +### All Features +A comprehensive ShellBar demonstrating all available features including notifications, search, content items, and profile. - \ No newline at end of file + + +### Embedded Back Navigation +ShellBar with embedded back navigation button in the start area. + + + +### Trial Example +ShellBar configured for trial environments with trial tags and remaining days indicator. + + + +### Multiple Productive Instances +ShellBar setup for multiple productive system instances with region indicators. + + + +### Multiple Non-Productive Instances +ShellBar setup for multiple non-productive system instances with system and region tags. + + \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/ShellBar/Advanced/Advanced.md b/packages/website/docs/_samples/fiori/ShellBar/Advanced/Advanced.md index 17798ecc59ab..ffccbf6dd13e 100644 --- a/packages/website/docs/_samples/fiori/ShellBar/Advanced/Advanced.md +++ b/packages/website/docs/_samples/fiori/ShellBar/Advanced/Advanced.md @@ -1,4 +1,4 @@ import html from '!!raw-loader!./sample.html'; import js from '!!raw-loader!./main.js'; - + \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/ShellBar/Advanced/main.js b/packages/website/docs/_samples/fiori/ShellBar/Advanced/main.js index 81755ad81c73..bce5940958df 100644 --- a/packages/website/docs/_samples/fiori/ShellBar/Advanced/main.js +++ b/packages/website/docs/_samples/fiori/ShellBar/Advanced/main.js @@ -1,72 +1,16 @@ import "@ui5/webcomponents/dist/Avatar.js"; import "@ui5/webcomponents/dist/Button.js"; -import "@ui5/webcomponents/dist/Input.js"; -import "@ui5/webcomponents/dist/Title.js"; -import "@ui5/webcomponents/dist/ToggleButton.js"; -import "@ui5/webcomponents-fiori/dist/UserMenu.js"; -import "@ui5/webcomponents-fiori/dist/UserMenuAccount.js"; -import "@ui5/webcomponents-fiori/dist/UserMenuItem.js"; +import "@ui5/webcomponents/dist/Text.js"; +import "@ui5/webcomponents/dist/Tag.js"; +import "@ui5/webcomponents/dist/Switch.js"; +import "@ui5/webcomponents/dist/Label.js"; import "@ui5/webcomponents-fiori/dist/ShellBar.js"; +import "@ui5/webcomponents-fiori/dist/ShellBarItem.js"; +import "@ui5/webcomponents-fiori/dist/ShellBarSpacer.js"; import "@ui5/webcomponents-fiori/dist/ShellBarSearch.js"; -import "@ui5/webcomponents-fiori/dist/SearchItem.js"; -import "@ui5/webcomponents-fiori/dist/SearchScope.js"; -import "@ui5/webcomponents-icons/dist/da.js"; -import "@ui5/webcomponents-icons/dist/da-2.js"; +import "@ui5/webcomponents-icons/dist/menu2.js"; import "@ui5/webcomponents-icons/dist/nav-back.js"; -import "@ui5/webcomponents-icons/dist/action-settings.js"; -import "@ui5/webcomponents-icons/dist/official-service.js"; - -const shellbar = document.getElementById("shellbar"); -const menu = document.getElementById("userMenu"); - -shellbar.addEventListener("ui5-profile-click", (event) => { - menu.opener = event.detail.targetRef; - menu.open = true; -}); - -[...document.querySelectorAll("ui5-toggle-button")].forEach(el => { - el.addEventListener("click", event => { - const toggleButton = event.target; - toggleButton.icon = toggleButton.pressed ? "sap-icon://da-2" : "sap-icon://da"; - }); -}); - -const scopeData = [ - { name: "Laptop", scope: "products" }, - { name: "Leave Requests", scope: "apps" }, - { name: "Log work", scope: "apps" }, - { name: "Manage Products", scope: "apps" }, - { name: "Mobile Phones", scope: "products" }, - { name: "Tablet", scope: "products" }, -]; - -function createScopeItems(scope) { - let filterData = []; - - if (!scope) { - filterData = scopeData; - } else { - filterData = scopeData.filter(item => item.scope === scope); - } - - filterData.forEach(item => { - const searchItem = document.createElement("ui5-search-item"); - searchItem.text = item.name; - searchItem.scopeName = item.scope; - searchScope.appendChild(searchItem); - }); -} - -const searchScope = document.getElementById("search-scope"); - -createScopeItems(); - -searchScope.addEventListener("ui5-scope-change", (event) => { - const scope = event.detail.scope.text === "All" ? "" : event.detail.scope.text.toLowerCase(); - - searchScope.innerHTML = ""; - - createScopeItems(scope); -}); +import "@ui5/webcomponents-icons/dist/sys-help.js"; +import "@ui5/webcomponents-icons/dist/customer.js"; \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html b/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html index f2a4edd94d0e..fe5160c018ab 100644 --- a/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html +++ b/packages/website/docs/_samples/fiori/ShellBar/Advanced/sample.html @@ -6,43 +6,36 @@ Sample - - + - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + Trial + 30 days remaining + +
+ + Try Beta Version +
+ + + + + + + +
+ - + \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/ShellBar/Basic/main.js b/packages/website/docs/_samples/fiori/ShellBar/Basic/main.js index aec0379b0378..f129e7dbe1e4 100644 --- a/packages/website/docs/_samples/fiori/ShellBar/Basic/main.js +++ b/packages/website/docs/_samples/fiori/ShellBar/Basic/main.js @@ -1,22 +1,10 @@ - import "@ui5/webcomponents/dist/Avatar.js"; import "@ui5/webcomponents/dist/Button.js"; -import "@ui5/webcomponents/dist/Label.js"; -import "@ui5/webcomponents/dist/Switch.js"; -import "@ui5/webcomponents/dist/ToggleButton.js"; -import "@ui5/webcomponents/dist/Input.js"; -import "@ui5/webcomponents/dist/ListItemStandard.js"; -import "@ui5/webcomponents/dist/Popover.js"; -import "@ui5/webcomponents/dist/Title.js"; -import "@ui5/webcomponents/dist/ToggleButton.js"; -import "@ui5/webcomponents/dist/List.js"; -import "@ui5/webcomponents/dist/Text.js"; -import "@ui5/webcomponents/dist/Tag.js"; import "@ui5/webcomponents-fiori/dist/ShellBar.js"; -import "@ui5/webcomponents-fiori/dist/ShellBarSpacer.js"; +import "@ui5/webcomponents-fiori/dist/ShellBarItem.js"; import "@ui5/webcomponents-fiori/dist/ShellBarSearch.js"; -import "@ui5/webcomponents-icons/dist/customer.js"; -import "@ui5/webcomponents-icons/dist/nav-back.js"; -import "@ui5/webcomponents-icons/dist/edit.js"; +import "@ui5/webcomponents-icons/dist/menu2.js"; +import "@ui5/webcomponents-icons/dist/sys-help.js"; +import "@ui5/webcomponents-icons/dist/customer.js"; \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/ShellBar/Basic/sample.html b/packages/website/docs/_samples/fiori/ShellBar/Basic/sample.html index 8b3da25b7703..e3f02abe24c6 100644 --- a/packages/website/docs/_samples/fiori/ShellBar/Basic/sample.html +++ b/packages/website/docs/_samples/fiori/ShellBar/Basic/sample.html @@ -11,29 +11,21 @@ - - + + - Trial - EMEA - - - - Edit -
- New Version - -
- - - + + + +
+ - + \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/ShellBar/EmbeddedBackNavigation/EmbeddedBackNavigation.md b/packages/website/docs/_samples/fiori/ShellBar/EmbeddedBackNavigation/EmbeddedBackNavigation.md new file mode 100644 index 000000000000..ffccbf6dd13e --- /dev/null +++ b/packages/website/docs/_samples/fiori/ShellBar/EmbeddedBackNavigation/EmbeddedBackNavigation.md @@ -0,0 +1,4 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; + + \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/ShellBar/EmbeddedBackNavigation/main.js b/packages/website/docs/_samples/fiori/ShellBar/EmbeddedBackNavigation/main.js new file mode 100644 index 000000000000..33ab4277c46e --- /dev/null +++ b/packages/website/docs/_samples/fiori/ShellBar/EmbeddedBackNavigation/main.js @@ -0,0 +1,12 @@ +import "@ui5/webcomponents/dist/Avatar.js"; +import "@ui5/webcomponents/dist/Button.js"; + +import "@ui5/webcomponents-fiori/dist/ShellBar.js"; +import "@ui5/webcomponents-fiori/dist/ShellBarItem.js"; +import "@ui5/webcomponents-fiori/dist/ShellBarSearch.js"; + +import "@ui5/webcomponents-icons/dist/nav-back.js"; +import "@ui5/webcomponents-icons/dist/search.js"; +import "@ui5/webcomponents-icons/dist/sys-help.js"; +import "@ui5/webcomponents-icons/dist/bell.js"; +import "@ui5/webcomponents-icons/dist/customer.js"; \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/ShellBar/EmbeddedBackNavigation/sample.html b/packages/website/docs/_samples/fiori/ShellBar/EmbeddedBackNavigation/sample.html new file mode 100644 index 000000000000..e5160dd0cc4b --- /dev/null +++ b/packages/website/docs/_samples/fiori/ShellBar/EmbeddedBackNavigation/sample.html @@ -0,0 +1,31 @@ + + + + + + + + Sample + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/MultipleNonProductiveInstances.md b/packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/MultipleNonProductiveInstances.md new file mode 100644 index 000000000000..ffccbf6dd13e --- /dev/null +++ b/packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/MultipleNonProductiveInstances.md @@ -0,0 +1,4 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; + + \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/main.js b/packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/main.js new file mode 100644 index 000000000000..e852d9c2b752 --- /dev/null +++ b/packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/main.js @@ -0,0 +1,12 @@ +import "@ui5/webcomponents/dist/Avatar.js"; +import "@ui5/webcomponents/dist/Button.js"; +import "@ui5/webcomponents/dist/Text.js"; +import "@ui5/webcomponents/dist/Tag.js"; + +import "@ui5/webcomponents-fiori/dist/ShellBar.js"; +import "@ui5/webcomponents-fiori/dist/ShellBarItem.js"; +import "@ui5/webcomponents-fiori/dist/ShellBarSearch.js"; + +import "@ui5/webcomponents-icons/dist/menu2.js"; +import "@ui5/webcomponents-icons/dist/sys-help.js"; +import "@ui5/webcomponents-icons/dist/customer.js"; \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/sample.html b/packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/sample.html new file mode 100644 index 000000000000..52401b77e546 --- /dev/null +++ b/packages/website/docs/_samples/fiori/ShellBar/MultipleNonProductiveInstances/sample.html @@ -0,0 +1,49 @@ + + + + + + + + Sample + + + + + + + + + + Q System + Region EMEA + + + + + + + + + + + + + + Q System + Region APJ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/ShellBar/MultipleProductiveInstances/MultipleProductiveInstances.md b/packages/website/docs/_samples/fiori/ShellBar/MultipleProductiveInstances/MultipleProductiveInstances.md new file mode 100644 index 000000000000..ffccbf6dd13e --- /dev/null +++ b/packages/website/docs/_samples/fiori/ShellBar/MultipleProductiveInstances/MultipleProductiveInstances.md @@ -0,0 +1,4 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; + + \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/ShellBar/MultipleProductiveInstances/main.js b/packages/website/docs/_samples/fiori/ShellBar/MultipleProductiveInstances/main.js new file mode 100644 index 000000000000..e852d9c2b752 --- /dev/null +++ b/packages/website/docs/_samples/fiori/ShellBar/MultipleProductiveInstances/main.js @@ -0,0 +1,12 @@ +import "@ui5/webcomponents/dist/Avatar.js"; +import "@ui5/webcomponents/dist/Button.js"; +import "@ui5/webcomponents/dist/Text.js"; +import "@ui5/webcomponents/dist/Tag.js"; + +import "@ui5/webcomponents-fiori/dist/ShellBar.js"; +import "@ui5/webcomponents-fiori/dist/ShellBarItem.js"; +import "@ui5/webcomponents-fiori/dist/ShellBarSearch.js"; + +import "@ui5/webcomponents-icons/dist/menu2.js"; +import "@ui5/webcomponents-icons/dist/sys-help.js"; +import "@ui5/webcomponents-icons/dist/customer.js"; \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/ShellBar/MultipleProductiveInstances/sample.html b/packages/website/docs/_samples/fiori/ShellBar/MultipleProductiveInstances/sample.html new file mode 100644 index 000000000000..5321b9977d8b --- /dev/null +++ b/packages/website/docs/_samples/fiori/ShellBar/MultipleProductiveInstances/sample.html @@ -0,0 +1,48 @@ + + + + + + + + Sample + + + + + + + + + + Region EMEA + + + + + + + + + + + + + + + Region APJ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/ShellBar/TrialExample/TrialExample.md b/packages/website/docs/_samples/fiori/ShellBar/TrialExample/TrialExample.md new file mode 100644 index 000000000000..ffccbf6dd13e --- /dev/null +++ b/packages/website/docs/_samples/fiori/ShellBar/TrialExample/TrialExample.md @@ -0,0 +1,4 @@ +import html from '!!raw-loader!./sample.html'; +import js from '!!raw-loader!./main.js'; + + \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/ShellBar/TrialExample/main.js b/packages/website/docs/_samples/fiori/ShellBar/TrialExample/main.js new file mode 100644 index 000000000000..e852d9c2b752 --- /dev/null +++ b/packages/website/docs/_samples/fiori/ShellBar/TrialExample/main.js @@ -0,0 +1,12 @@ +import "@ui5/webcomponents/dist/Avatar.js"; +import "@ui5/webcomponents/dist/Button.js"; +import "@ui5/webcomponents/dist/Text.js"; +import "@ui5/webcomponents/dist/Tag.js"; + +import "@ui5/webcomponents-fiori/dist/ShellBar.js"; +import "@ui5/webcomponents-fiori/dist/ShellBarItem.js"; +import "@ui5/webcomponents-fiori/dist/ShellBarSearch.js"; + +import "@ui5/webcomponents-icons/dist/menu2.js"; +import "@ui5/webcomponents-icons/dist/sys-help.js"; +import "@ui5/webcomponents-icons/dist/customer.js"; \ No newline at end of file diff --git a/packages/website/docs/_samples/fiori/ShellBar/TrialExample/sample.html b/packages/website/docs/_samples/fiori/ShellBar/TrialExample/sample.html new file mode 100644 index 000000000000..1355578745bb --- /dev/null +++ b/packages/website/docs/_samples/fiori/ShellBar/TrialExample/sample.html @@ -0,0 +1,33 @@ + + + + + + + + Sample + + + + + + + + + + Trial + 30 days remaining + + + + + + + + + + + + + + \ No newline at end of file