Merge pull request #256 from Infineon/252-fix-navbar-component-positi…

…on-inconsistency 252 fix navbar component position inconsistency
Infineon · Jul 21, 2023 · 4a1f726 · 4a1f726
2 parents ce9034c + 4befe37
commit 4a1f726
Show file tree

Hide file tree

Showing 45 changed files with 630 additions and 402 deletions.
diff --git a/examples/stencil-components/angular/src/app/app.component.html b/examples/stencil-components/angular/src/app/app.component.html
@@ -1,13 +1,35 @@
 <div>
+  <ifx-navbar application-name="Application name" fixed="false">
+    <ifx-navbar-menu-item slot="left-menu-item">Menu Item</ifx-navbar-menu-item>
+    <ifx-navbar-menu-item slot="left-menu-item">Menu Item</ifx-navbar-menu-item>
+
+    <ifx-dropdown-menu slot="dropdown-menu">
+      <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+      <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+      <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+    </ifx-dropdown-menu>
+
+    <ifx-search-bar size="default" slot="search-bar-right" is-open="false" show-close-button="true"></ifx-search-bar>
+
+    <ifx-navbar-menu-item hide-label="false" slot="right-menu-item">Right One</ifx-navbar-menu-item>
+    <ifx-navbar-menu-item hide-label="false" slot="right-menu-item">Right Two</ifx-navbar-menu-item>
+    <ifx-navbar-menu-item hide-label="false" slot="right-menu-profile-item">Tisho</ifx-navbar-menu-item>
+  </ifx-navbar>
+
+
   <h1>Using Stencil web components in an Angular application</h1>
 
+  <h2>Alert</h2>
+  <ifx-alert color="primary" icon="c-info-24">Attention! This is an alert message — check it out!</ifx-alert>
+  <br />
+
   <h2>Tabs</h2>
   <ifx-tabs orientation="horizontal">
     <ifx-tab header="tab header 1">tab 1 content</ifx-tab>
     <ifx-tab header="tab header 2">tab 2 content</ifx-tab>
     <ifx-tab header="tab header 3">tab 3 content</ifx-tab>
   </ifx-tabs>
-
+  <br />
 
   <h2>Tag</h2>
   <ifx-tag>tag</ifx-tag>
@@ -48,9 +70,10 @@ <h2>Checkbox</h2>
   <span>Disabled: {{ checkboxDisabled }} </span>
   <span>Error: {{ checkboxError }} </span>
   <span>Value: {{ checkboxChecked }}</span>
+  <br />
 
 
-  <h2>Text Input</h2>
+  <h2>Text Field</h2>
   <form (ngSubmit)="handleSubmit()">
     <ifx-text-input (ifxInput)="handleIfxInput($event)" [error]="false" [disabled]="false" [success]="false"
       placeholder="Placeholder" [errorMessage]="">Text

diff --git a/examples/stencil-components/angular/src/app/app.component.ts b/examples/stencil-components/angular/src/app/app.component.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  // styleUrls: ['./app.component.css']
 })
 export class AppComponent {
   progressValue = 10;

diff --git a/examples/stencil-components/vanilla-cdn/index.html b/examples/stencil-components/vanilla-cdn/index.html
@@ -15,8 +15,30 @@
 <body>
 
   <div>
+    <ifx-navbar application-name="Application name" fixed="false">
+      <ifx-navbar-menu-item slot="left-menu-item">Menu Item</ifx-navbar-menu-item>
+      <ifx-navbar-menu-item slot="left-menu-item">Menu Item</ifx-navbar-menu-item>
+
+      <ifx-dropdown-menu slot="dropdown-menu">
+        <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+        <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+        <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+      </ifx-dropdown-menu>
+
+      <ifx-search-bar size="default" slot="search-bar-right" is-open="false" show-close-button="true"></ifx-search-bar>
+
+      <ifx-navbar-menu-item hide-label="false" slot="right-menu-item">Right One</ifx-navbar-menu-item>
+      <ifx-navbar-menu-item hide-label="false" slot="right-menu-item">Right Two</ifx-navbar-menu-item>
+      <ifx-navbar-menu-item hide-label="false" slot="right-menu-profile-item">Tisho</ifx-navbar-menu-item>
+    </ifx-navbar>
+
+
     <h1>Using Stencil web components in an Vanilla JS</h1>
 
+    <h2>Alert</h2>
+    <ifx-alert color="primary" icon="c-info-24">Attention! This is an alert message — check it out!</ifx-alert>
+    <br />
+
     <h2>Tabs</h2>
     <ifx-tabs orientation="horizontal">
       <ifx-tab header="tab header 1">tab 1 content</ifx-tab>
@@ -66,7 +88,7 @@ <h2>Checkbox</h2>
     <br />
 
     <form id="another-form">
-      <h2>Text Input</h2>
+      <h2>Text Field</h2>
       <ifx-text-input id="text-input" error="false" disabled="false" success="false" placeholder="Placeholder"
         errorMessage="">Text
         field</ifx-text-input>

diff --git a/examples/wrapper-components/react-javascript/src/App.js b/examples/wrapper-components/react-javascript/src/App.js
@@ -11,20 +11,14 @@ import Sidebar from './components/Sidebar/Sidebar'
 import NumberIndicator from './components/NumberIndicator/NumberIndicator'
 import Spinner from './components/Spinner/Spinner'
 import Checkbox from './components/Checkbox/Checkbox';
-import Tag from './components/Tag/Tag';
-import Tab from './components/Tab/Tab';
+import Navbar from './components/Navbar/Navbar';
+
 function App() {
   return (
     <div>
-      <h1>Stencil Framework integration - React + JS</h1>
+      <Navbar />
 
-      <h2>Tag</h2>
-      <Tag>Label Tag</Tag>
-      <br />
-
-      <h2>Search Bar</h2>
-      <SearchBar />
-      <br />
+      <h1>Stencil Framework integration - React + JS</h1>
 
       <h2>Alert</h2>
       <Alert />
@@ -56,21 +50,30 @@ function App() {
 
       <h2>Link</h2>
       <Link />
+      <br />
 
-      <h2>Tab</h2>
-      <Tab />
+      <h2>Spinner</h2>
+      <Link />
+      <br />
+
+      <h2>Search Bar</h2>
+      <SearchBar />
+      <br />
 
       <h2>Spinner</h2>
       <Spinner />
       <br />
 
-      <h2>Number Indicator</h2>
+      <h2>Number indicator</h2>
       <NumberIndicator />
       <br />
 
       <h2>Sidebar</h2>
       <Sidebar />
       <br />
+
+
+
     </div>
 
   )

diff --git a/examples/wrapper-components/react-javascript/src/components/Navbar/Navbar.js b/examples/wrapper-components/react-javascript/src/components/Navbar/Navbar.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { IfxNavbar, IfxNavbarMenuItem, IfxSearchBar, IfxDropdownMenu, IfxDropdownItem } from '@infineon/infineon-design-system-react';
+
+function Navbar() {
+  return (
+    <div>
+      <IfxNavbar application-name="Application name">
+        <IfxNavbarMenuItem  slot="left-menu-item">Menu Item</IfxNavbarMenuItem>
+        <IfxNavbarMenuItem  slot="left-menu-item">Menu Item</IfxNavbarMenuItem>
+
+        <IfxDropdownMenu slot="dropdown-menu">
+          <IfxDropdownItem>Menu Item</IfxDropdownItem>
+          <IfxDropdownItem>Menu Item</IfxDropdownItem>
+          <IfxDropdownItem>Menu Item</IfxDropdownItem>
+        </IfxDropdownMenu>
+
+        <IfxSearchBar size="default" slot="search-bar-right" is-open="false" show-close-button="true"></IfxSearchBar>
+
+        <IfxNavbarMenuItem hide-label="false" slot="right-menu-item">Right One</IfxNavbarMenuItem>
+        <IfxNavbarMenuItem hide-label="false" slot="right-menu-item">Right Two</IfxNavbarMenuItem>
+        <IfxNavbarMenuItem hide-label="false" slot="right-menu-profile-item">Tisho</IfxNavbarMenuItem>
+      </IfxNavbar>
+    </div>
+  );
+}
+
+export default Navbar;
diff --git a/examples/wrapper-components/react-javascript/src/index.css b/examples/wrapper-components/react-javascript/src/index.css
@@ -1,4 +1,4 @@
-body {
+/* body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
@@ -10,4 +10,4 @@ body {
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
-}
+} */
diff --git a/examples/wrapper-components/react-javascript/src/index.js b/examples/wrapper-components/react-javascript/src/index.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
+// import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import { defineCustomElements } from '@infineon/infineon-design-system-react';

diff --git a/examples/wrapper-components/react-typescript/src/App.tsx b/examples/wrapper-components/react-typescript/src/App.tsx
@@ -8,11 +8,14 @@ import RadioButton from './components/RadioButton/RadioButton';
 import Tabs from './components/Tab/Tab';
 import Tag from './components/Tag/Tag';
 
+import Navbar from './components/Navbar/Navbar';
 
 function App() {
 
   return (
       <div>
+               <Navbar />      
+
          <h1 className="header">Stencil Framework integration - React + TS </h1>
 
          <h2>Tag</h2>
@@ -46,6 +49,9 @@ function App() {
       <h2>Tabs</h2>
       <Tabs />
       <br/>
+
+
+
       </div>
    )
 }

diff --git a/examples/wrapper-components/react-typescript/src/components/Navbar/Navbar.tsx b/examples/wrapper-components/react-typescript/src/components/Navbar/Navbar.tsx
@@ -0,0 +1,27 @@
+
+import { IfxNavbar, IfxNavbarMenuItem, IfxSearchBar, IfxDropdownMenu, IfxDropdownItem } from '@infineon/infineon-design-system-react';
+
+function Navbar() {
+  return (
+    <div>
+      <IfxNavbar application-name="Application name">
+        <IfxNavbarMenuItem  slot="left-menu-item">Menu Item</IfxNavbarMenuItem>
+        <IfxNavbarMenuItem  slot="left-menu-item">Menu Item</IfxNavbarMenuItem>
+
+        <IfxDropdownMenu slot="dropdown-menu">
+          <IfxDropdownItem>Menu Item</IfxDropdownItem>
+          <IfxDropdownItem>Menu Item</IfxDropdownItem>
+          <IfxDropdownItem>Menu Item</IfxDropdownItem>
+        </IfxDropdownMenu>
+
+        <IfxSearchBar size="default" slot="search-bar-right" is-open="false" show-close-button="true"></IfxSearchBar>
+
+        <IfxNavbarMenuItem hide-label="false" slot="right-menu-item">Right One</IfxNavbarMenuItem>
+        <IfxNavbarMenuItem hide-label="false" slot="right-menu-item">Right Two</IfxNavbarMenuItem>
+        <IfxNavbarMenuItem hide-label="false" slot="right-menu-profile-item">Tisho</IfxNavbarMenuItem>
+      </IfxNavbar>
+    </div>
+  );
+}
+
+export default Navbar;
diff --git a/examples/wrapper-components/react-typescript/src/index.css b/examples/wrapper-components/react-typescript/src/index.css
@@ -1,8 +1,8 @@
-:root {
+/* :root {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
-}
+} */
diff --git a/examples/wrapper-components/react-typescript/src/main.tsx b/examples/wrapper-components/react-typescript/src/main.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import ReactDOM from 'react-dom/client'
 import { defineCustomElements } from '@infineon/infineon-design-system-react';
 import App from './App.tsx'
-import './index.css'
+// import './index.css'
 
 defineCustomElements(window)
 

diff --git a/examples/wrapper-components/vue-javascript/src/App.vue b/examples/wrapper-components/vue-javascript/src/App.vue
@@ -1,6 +1,7 @@
 
 <template>
-  <h1 class="header">Stencil Framework integration - Vue + JS </h1>
+  <Navbar />
+  <h1>Stencil Framework integration - Vue + JS </h1>
   <Alert />
   <Button />
   <Checkbox />
@@ -31,11 +32,7 @@ import NumberIndicator from './components/NumberIndicator.vue'
 import Link from './components/Link.vue'
 import Tabs from './components/Tabs.vue'
 import Sidebar from './components/Sidebar.vue'
+import Navbar from './components/Navbar.vue'
 
 </script>
 
-<style scoped>
-.header {
-  text-align: center;
-}
-</style>
diff --git a/examples/wrapper-components/vue-javascript/src/components/Navbar.vue b/examples/wrapper-components/vue-javascript/src/components/Navbar.vue
@@ -0,0 +1,32 @@
+
+
+<template>
+  <div>
+    <ifx-navbar application-name="Application name" fixed="true">
+    <ifx-navbar-menu-item  slot="left-menu-item">Menu Item</ifx-navbar-menu-item>
+    <ifx-navbar-menu-item  slot="left-menu-item">Menu Item</ifx-navbar-menu-item>
+
+    <ifx-dropdown-menu slot="dropdown-menu">
+      <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+      <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+      <ifx-dropdown-item>Menu Item</ifx-dropdown-item>
+    </ifx-dropdown-menu>
+
+    <ifx-search-bar size="default" slot="search-bar-right" is-open="false" show-close-button="true"></ifx-search-bar>
+
+    <ifx-navbar-menu-item hide-label="false" slot="right-menu-item">Right One</ifx-navbar-menu-item>
+    <ifx-navbar-menu-item hide-label="false" slot="right-menu-item">Right Two</ifx-navbar-menu-item>
+    <ifx-navbar-menu-item hide-label="false" slot="right-menu-profile-item">Tisho</ifx-navbar-menu-item>
+  </ifx-navbar>
+
+  </div>
+</template>
+
+<script setup>
+
+
+
+</script>
+
+
+
diff --git a/examples/wrapper-components/vue-javascript/src/main.js b/examples/wrapper-components/vue-javascript/src/main.js
@@ -1,7 +1,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 
-import './assets/main.css'
+// import './assets/main.css'
 import { ComponentLibrary } from '@infineon/infineon-design-system-vue';
 
 createApp(App).use(ComponentLibrary).mount('#app');
diff --git a/examples/wrapper-components/vue-typescript/src/App.vue b/examples/wrapper-components/vue-typescript/src/App.vue
@@ -1,7 +1,8 @@
 
 
 <template>
-  <h1 class="header">Stencil Framework integration - Vue + TS </h1>
+  <Navbar />
+  <h1>Stencil Framework integration - Vue + TS </h1>
   <Alert />
   <Button />
   <Checkbox />
@@ -33,11 +34,8 @@ import Spinner from './components/Spinner.vue';
 import Tabs from './components/Tabs.vue'
 import RadioButton from './components/RadioButton.vue'
 import Tag from './components/Tag.vue'
+import Navbar from './components/Navbar.vue'
 
 </script>
 
-<style scoped>
-.header {
-  text-align: center;
-}
-</style>
+