Merge pull request #941 from Infineon/938-navbar-implementation-mobil…

…e-menu Navbar: version 2
Infineon · Apr 3, 2024 · 687098e · 687098e
2 parents 0d470e1 + 1c21143
commit 687098e
Show file tree

Hide file tree

Showing 33 changed files with 6,637 additions and 9,127 deletions.
diff --git a/.gitignore b/.gitignore
@@ -117,6 +117,7 @@ packages/components/package-lock.json
 packages/components/stencil-components/
 packages/components/src/components.d.ts
 packages/components-vue/lib/components.ts
+packages/components-vue/lib/vue-component-lib/
 packages/components-react/lib/components/stencil-generated/index.ts
 packages/components-angular/projects/component-library/src/lib/stencil-generated/components.ts
 packages/components/public-storybook/fonts/*
diff --git a/examples/stencil-components/vanilla-cdn/index.html b/examples/stencil-components/vanilla-cdn/index.html
@@ -16,24 +16,75 @@
 <body>
 
   <div>
-    <ifx-navbar application-name="Application name" fixed="false" logo-href="https://google.com"
-      logo-href-target="_self">
-      <ifx-navbar-item hide-label="false" icon="calendar16" slot="left-item" target="_blank"
-        href="https://google.com">Menu Item1</ifx-navbar-item>
-      <ifx-navbar-item slot="left-item">Menu Item</ifx-navbar-item>
-      <ifx-navbar-item slot="left-item">Menu Item</ifx-navbar-item>
-
-      <ifx-navbar-menu slot="menu">
-        <ifx-navbar-menu-item hrefs="https://google.com" target="_blank">Item 1</ifx-navbar-menu-item>
-        <ifx-navbar-menu-item href="https://google.com">Item 2</ifx-navbar-menu-item>
-        <ifx-navbar-menu-item href="https://google.com">Item 3</ifx-navbar-menu-item>
-      </ifx-navbar-menu>
-
-      <ifx-search-bar size="default" slot="search-bar-right" is-open="false" show-close-button="true"></ifx-search-bar>
-
-      <ifx-navbar-item hide-label="false" slot="right-item">Right One</ifx-navbar-item>
-      <ifx-navbar-item hide-label="false" slot="right-item">Right Two</ifx-navbar-item>
-      <ifx-navbar-item hide-label="false" slot="right-profile-item">Tisho</ifx-navbar-item>
+    <ifx-navbar  show-logo-and-appname="true" application-name="App name" fixed="false" logo-href="http://google.com" logo-href-target="_self">
+      <ifx-navbar-item icon="calendar16" slot="left-item" target="" href="" >
+        Menu Item 1
+        <ifx-navbar-item icon="calendar16">
+          Layer 1 Nested Item 1
+          <ifx-navbar-item>
+            Layer 2 Nested Item 2
+            <ifx-navbar-item href="http://google.com" target="_blank">Link Layer 3 Nested Item 1</ifx-navbar-item>
+            <ifx-navbar-item>Layer 3 Nested Item 2</ifx-navbar-item>
+            <ifx-navbar-item>Layer 3 Nested Item 3</ifx-navbar-item>
+            <ifx-navbar-item>Layer 3 Nested Item 4</ifx-navbar-item>
+          </ifx-navbar-item>
+          <ifx-navbar-item >Layer 2 Nested Item 3</ifx-navbar-item>
+          <ifx-navbar-item>Layer 2 Nested Item 4</ifx-navbar-item>
+          <ifx-navbar-item>Layer 2 Nested Item 5</ifx-navbar-item>
+        </ifx-navbar-item>
+
+        <ifx-navbar-item>
+          Layer 1 Nested Item 2
+          <ifx-navbar-item>Layer 2 Item 1</ifx-navbar-item>
+          <ifx-navbar-item>Layer 2 Item 2</ifx-navbar-item>
+          <ifx-navbar-item>Layer 2 Item 3</ifx-navbar-item>
+        </ifx-navbar-item>
+
+        <ifx-navbar-item>Nested Item 3</ifx-navbar-item>
+
+        <ifx-navbar-item>
+          Layer 1 Nested Item 4
+          <ifx-navbar-item>Nested Item 4</ifx-navbar-item>
+        </ifx-navbar-item>
+
+      </ifx-navbar-item>
+
+      <ifx-navbar-item href="http://google.com" target="_blank" slot="left-item" icon="calendar16" show-label="true">
+        Menu Item 2
+      </ifx-navbar-item>
+
+      <ifx-navbar-item slot="left-item">
+        More
+        <ifx-navbar-item>Item1</ifx-navbar-item>
+        <ifx-navbar-item>Item2</ifx-navbar-item>
+      </ifx-navbar-item>
+
+      <ifx-search-bar slot="search-bar-left" is-open="false"></ifx-search-bar>
+
+      <ifx-navbar-item slot="right-item" target="_blank" href="http://google.com" hide-on-mobile="false" show-label="false" icon="cartf16">Right Item</ifx-navbar-item>
+      <ifx-navbar-item slot="right-item" hide-on-mobile="true" show-label='true' icon="airplane16">
+        Right Item
+        <ifx-navbar-item>
+          Nested one
+          <ifx-navbar-item>
+            Nested one
+            <ifx-navbar-item>
+              Nested one
+              <ifx-navbar-item>Final one</ifx-navbar-item>
+            </ifx-navbar-item>
+          </ifx-navbar-item>
+        </ifx-navbar-item>
+      </ifx-navbar-item>
+
+      <ifx-navbar-profile slot="right-item" image-url="https://i.pinimg.com/originals/82/d4/92/82d4926dcf09dd4c73eb1a6c0300c135.jpg" show-label="true" href="" target="_blank">
+        User
+        <ifx-navbar-item>
+          Item
+        </ifx-navbar-item>
+        <ifx-navbar-item>Item</ifx-navbar-item>
+        <ifx-navbar-item>Item</ifx-navbar-item>
+        <ifx-navbar-item>Item</ifx-navbar-item>
+      </ifx-navbar-profile>
     </ifx-navbar>
 
 

diff --git a/examples/wrapper-components/react-javascript/package.json b/examples/wrapper-components/react-javascript/package.json
@@ -25,9 +25,7 @@
     "eject": "react-scripts eject",
     "watch:library": "cd ../../../packages/components && npm run watch:stencil",
     "build:wrapper": "cd ../../../packages/components && npm i && npm run build:stencil && cd ../components-react && npm run build",
-    "link-clean": "node ../../../utils/os-type.js",
-    "link-clean-win": "cd ../../../packages/components-react && rmdir /s /q node_modules && npm run build && npm link && cd ../../examples/wrapper-components/react-javascript && npm link @infineon/infineon-design-system-react",
-    "link-clean-unix": "cd ../../../packages/components-react && rm -rf node_modules &&  npm run build && npm link && cd ../../examples/wrapper-components/react-javascript && npm link @infineon/infineon-design-system-react",
+    "link-clean": "cd ../../../packages/components-react && npm run build && npm link && cd ../../examples/wrapper-components/react-javascript && npm link @infineon/infineon-design-system-react",
     "preview:link": "run-s link-clean start",
     "test:local": "run-p preview:link watch:library"
   },

diff --git a/examples/wrapper-components/react-javascript/src/assets/default_profile2.png b/examples/wrapper-components/react-javascript/src/assets/default_profile2.png
diff --git a/examples/wrapper-components/react-javascript/src/components/Navbar/Navbar.js b/examples/wrapper-components/react-javascript/src/components/Navbar/Navbar.js
@@ -1,27 +1,76 @@
 import React from 'react';
-import { IfxNavbar, IfxNavbarMenuItem, IfxSearchBar, IfxNavbarItem, IfxNavbarMenu } from '@infineon/infineon-design-system-react';
+import { IfxNavbar, IfxNavbarProfile, IfxSearchBar, IfxNavbarItem } from '@infineon/infineon-design-system-react';
 
 function Navbar() {
   return (
-    <div>
-      <IfxNavbar application-name="Application name" fixed="false" logo-href="https://google.com">
-        <IfxNavbarItem hide-label="false" icon="calendar16" slot="left-item" target="_blank" href="https://google.com">Menu Item1</IfxNavbarItem>
-        <IfxNavbarItem  slot="left-item">Menu Item</IfxNavbarItem>
-        <IfxNavbarItem  slot="left-item">Menu Item</IfxNavbarItem>
-
-        <IfxNavbarMenu slot="menu">
-          <IfxNavbarMenuItem href="https://google.com" target="_blank">Item 1</IfxNavbarMenuItem>
-          <IfxNavbarMenuItem href="https://google.com">Item 2</IfxNavbarMenuItem>
-          <IfxNavbarMenuItem href="https://google.com">Item 3</IfxNavbarMenuItem>
-        </IfxNavbarMenu>
-
-        <IfxSearchBar size="default" slot="search-bar-right" is-open="false" show-close-button="true"></IfxSearchBar>
-
-        <IfxNavbarItem hide-label="false" slot="right-item">Right One</IfxNavbarItem>
-        <IfxNavbarItem hide-label="false" slot="right-item">Right Two</IfxNavbarItem>
-        <IfxNavbarItem hide-label="false" slot="right-profile-item">Tisho</IfxNavbarItem>
-      </IfxNavbar>
-    </div>
+  <IfxNavbar  show-logo-and-appname="true" application-name="App name" fixed="false" logo-href="http://google.com" logo-href-target="_self">
+    <IfxNavbarItem icon="calendar16" slot="left-item" target="" href="" >
+      Menu Item 1
+      <IfxNavbarItem icon="calendar16">
+        Layer 1 Nested Item 1
+        <IfxNavbarItem>
+          Layer 2 Nested Item 2
+          <IfxNavbarItem href="http://google.com" target="_blank">Link Layer 3 Nested Item 1</IfxNavbarItem>
+          <IfxNavbarItem>Layer 3 Nested Item 2</IfxNavbarItem>
+          <IfxNavbarItem>Layer 3 Nested Item 3</IfxNavbarItem>
+          <IfxNavbarItem>Layer 3 Nested Item 4</IfxNavbarItem>
+        </IfxNavbarItem>
+        <IfxNavbarItem >Layer 2 Nested Item 3</IfxNavbarItem>
+        <IfxNavbarItem>Layer 2 Nested Item 4</IfxNavbarItem>
+        <IfxNavbarItem>Layer 2 Nested Item 5</IfxNavbarItem>
+      </IfxNavbarItem>
+
+      <IfxNavbarItem>
+        Layer 1 Nested Item 2
+        <IfxNavbarItem>Layer 2 Item 1</IfxNavbarItem>
+        <IfxNavbarItem>Layer 2 Item 2</IfxNavbarItem>
+        <IfxNavbarItem>Layer 2 Item 3</IfxNavbarItem>
+      </IfxNavbarItem>
+
+      <IfxNavbarItem>Nested Item 3</IfxNavbarItem>
+
+      <IfxNavbarItem>
+        Layer 1 Nested Item 4
+        <IfxNavbarItem>Nested Item 4</IfxNavbarItem>
+      </IfxNavbarItem>
+
+    </IfxNavbarItem>
+
+    <IfxNavbarItem href="http://google.com" target="_blank" slot="left-item" icon="calendar16" show-label="true">
+      Menu Item 2
+    </IfxNavbarItem>
+
+    <IfxNavbarItem slot="left-item">
+      More
+      <IfxNavbarItem>Item1</IfxNavbarItem>
+      <IfxNavbarItem>Item2</IfxNavbarItem>
+    </IfxNavbarItem>
+
+    <IfxSearchBar id="myBar" slot="search-bar-left" is-open="false"></IfxSearchBar>
+
+    <IfxNavbarItem slot="right-item" target="_blank" href="http://google.com" hide-on-mobile="false" show-label="false" icon="cartf16">Right Item</IfxNavbarItem>
+    <IfxNavbarItem slot="right-item" hide-on-mobile="true" show-label='true' icon="airplane16">
+      Right Item
+      <IfxNavbarItem>
+        Nested one
+        <IfxNavbarItem>
+          Nested one
+          <IfxNavbarItem>
+            Nested one
+            <IfxNavbarItem>Final one</IfxNavbarItem>
+          </IfxNavbarItem>
+        </IfxNavbarItem>
+      </IfxNavbarItem>
+    </IfxNavbarItem>
+
+    <IfxNavbarProfile slot="right-item" image-url='' show-label="true" href="" target="_blank">
+      User
+      <IfxNavbarItem>Item</IfxNavbarItem>
+      <IfxNavbarItem>Item</IfxNavbarItem>
+      <IfxNavbarItem>Item</IfxNavbarItem>
+      <IfxNavbarItem>Item</IfxNavbarItem>
+    </IfxNavbarProfile>
+  </IfxNavbar>
   );
 }
 

diff --git a/examples/wrapper-components/react-typescript/src/components/Navbar/Navbar.tsx b/examples/wrapper-components/react-typescript/src/components/Navbar/Navbar.tsx
@@ -1,26 +1,91 @@
 
-import { IfxNavbar, IfxNavbarMenuItem, IfxSearchBar, IfxNavbarItem, IfxNavbarMenu } from '@infineon/infineon-design-system-react';
+import { IfxNavbar, IfxNavbarProfile, IfxSearchBar, IfxNavbarItem } from '@infineon/infineon-design-system-react';
 
 function Navbar() {
   return (
     <div>
-     <IfxNavbar application-name="Application name" fixed="false">
-        <IfxNavbarItem hide-label="false" icon="calendar16" slot="left-item" target="_blank" href="https://google.com">Menu Item1</IfxNavbarItem>
-        <IfxNavbarItem  slot="left-item">Menu Item</IfxNavbarItem>
-        <IfxNavbarItem  slot="left-item">Menu Item</IfxNavbarItem>
-
-        <IfxNavbarMenu slot="menu">
-          <IfxNavbarMenuItem href="https://google.com" target="_blank">Item 1</IfxNavbarMenuItem>
-          <IfxNavbarMenuItem href="https://google.com">Item 2</IfxNavbarMenuItem>
-          <IfxNavbarMenuItem href="https://google.com">Item 3</IfxNavbarMenuItem>
-        </IfxNavbarMenu>
-
-        <IfxSearchBar size="default" slot="search-bar-right" is-open="false" show-close-button="true"></IfxSearchBar>
-
-        <IfxNavbarItem hide-label="false" slot="right-item">Right One</IfxNavbarItem>
-        <IfxNavbarItem hide-label="false" slot="right-item">Right Two</IfxNavbarItem>
-        <IfxNavbarItem hide-label="false" slot="right-profile-item">Tisho</IfxNavbarItem>
-      </IfxNavbar>
+      <IfxNavbar  show-logo-and-appname="true" application-name="App name" fixed="false" logo-href="http://google.com" logo-href-target="_self">
+    <IfxNavbarItem icon="calendar16" slot="left-item" target="" href="" >
+      Menu Item 1
+      <IfxNavbarItem icon="calendar16">
+        Layer 1 Nested Item 1
+        <IfxNavbarItem>
+          Layer 2 Nested Item 2
+          <IfxNavbarItem href="http://google.com" target="_blank">Link Layer 3 Nested Item 1</IfxNavbarItem>
+          <IfxNavbarItem>Layer 3 Nested Item 2</IfxNavbarItem>
+          <IfxNavbarItem>Layer 3 Nested Item 3</IfxNavbarItem>
+          <IfxNavbarItem>Layer 3 Nested Item 4</IfxNavbarItem>
+        </IfxNavbarItem>
+        <IfxNavbarItem >Layer 2 Nested Item 3</IfxNavbarItem>
+        <IfxNavbarItem>Layer 2 Nested Item 4</IfxNavbarItem>
+        <IfxNavbarItem>Layer 2 Nested Item 5</IfxNavbarItem>
+      </IfxNavbarItem>
+
+      <IfxNavbarItem>
+        Layer 1 Nested Item 2
+        <IfxNavbarItem>Layer 2 Item 1</IfxNavbarItem>
+        <IfxNavbarItem>Layer 2 Item 2</IfxNavbarItem>
+        <IfxNavbarItem>Layer 2 Item 3</IfxNavbarItem>
+      </IfxNavbarItem>
+
+      <IfxNavbarItem>Nested Item 3</IfxNavbarItem>
+
+      <IfxNavbarItem>
+        Layer 1 Nested Item 4
+        <IfxNavbarItem>Nested Item 4</IfxNavbarItem>
+      </IfxNavbarItem>
+
+    </IfxNavbarItem>
+
+    <IfxNavbarItem href="http://google.com" target="_blank" slot="left-item" icon="calendar16" show-label="true">
+      Menu Item 2
+    </IfxNavbarItem>
+
+    <IfxNavbarItem slot="left-item">
+      More
+      <IfxNavbarItem>Item1</IfxNavbarItem>
+      <IfxNavbarItem>Item2</IfxNavbarItem>
+    </IfxNavbarItem>
+
+    <IfxSearchBar id="myBar" slot="search-bar-left" is-open="false"></IfxSearchBar>
+
+    <IfxNavbarItem slot="right-item" target="_blank" href="http://google.com" hide-on-mobile="false" show-label="false" icon="cartf16">Right Item</IfxNavbarItem>
+    <IfxNavbarItem slot="right-item" hide-on-mobile="true" show-label='true' icon="airplane16">
+      Right Item
+      <IfxNavbarItem>
+        Nested one
+        <IfxNavbarItem>
+          Nested one
+          <IfxNavbarItem>
+            Nested one
+            <IfxNavbarItem>Final one</IfxNavbarItem>
+          </IfxNavbarItem>
+        </IfxNavbarItem>
+      </IfxNavbarItem>
+    </IfxNavbarItem>
+
+    <IfxNavbarProfile slot="right-item" image-url="https://i.pinimg.com/originals/82/d4/92/82d4926dcf09dd4c73eb1a6c0300c135.jpg" show-label="true" href="" target="_blank">
+      Tisho
+      <IfxNavbarItem>
+        Item
+        <IfxNavbarItem>
+          Item
+          <IfxNavbarItem>
+            Item
+            <IfxNavbarItem>
+              Item
+              <IfxNavbarItem>
+                Item
+              </IfxNavbarItem>
+            </IfxNavbarItem>
+          </IfxNavbarItem>
+        </IfxNavbarItem>
+      </IfxNavbarItem>
+      <IfxNavbarItem>Item</IfxNavbarItem>
+      <IfxNavbarItem>Item</IfxNavbarItem>
+      <IfxNavbarItem>Item</IfxNavbarItem>
+    </IfxNavbarProfile>
+  </IfxNavbar>
     </div>
   );
 }