Merge branch 'master' into 251-fix-icon-button-styling; cleaned up in…

…dex.html
Infineon · Jul 21, 2023 · 6fc13d1 · 6fc13d1
2 parents dacd8a6 + 007087b
commit 6fc13d1
Show file tree

Hide file tree

Showing 62 changed files with 806 additions and 559 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,82 +11,84 @@ import Sidebar from './components/Sidebar.vue'
 import NumberIndicator from './components/NumberIndicator.vue'
 import Spinner from './components/Spinner.vue'
 import Checkbox from './components/Checkbox/Checkbox';
+import Navbar from './components/Navbar/Navbar';
 import IconButton from './components/IconButton/IconButton';
 import Tab from './components/Tab/Tab';
 import Tag from './components/Tag/Tag';
 
-
 function App() {
-  return (
-    <div>
-      <h1>Stencil Framework integration - React + JS</h1>
+      return (
+            <div>
+                  <Navbar />
+
+                  <h1>Stencil Framework integration - React + JS</h1>
 
-      <h2>Alert</h2>
-      <Alert />
-      <br />
+                  <h2>Alert</h2>
+                  <Alert />
+                  <br />
 
-      <h2>Button</h2>
-      <Button />
-      <br />
+                  <h2>Button</h2>
+                  <Button />
+                  <br />
 
-      <h2>Progress Bar</h2>
-      <ProgressBar />
-      <br />
+                  <h2>Progress Bar</h2>
+                  <ProgressBar />
+                  <br />
 
-      <h2>Text Field</h2>
-      <TextField />
-      <br />
+                  <h2>Text Field</h2>
+                  <TextField />
+                  <br />
 
-      <h2>Accordion</h2>
-      <Accordion />
-      <br />
+                  <h2>Accordion</h2>
+                  <Accordion />
+                  <br />
 
-      <h2>Radio Button</h2>
-      <RadioButton />
-      <br />
+                  <h2>Radio Button</h2>
+                  <RadioButton />
+                  <br />
 
-      <h2>Checkbox</h2>
-      <Checkbox />
-      <br />
+                  <h2>Checkbox</h2>
+                  <Checkbox />
+                  <br />
 
-      <h2>Link</h2>
-      <Link />
-      <br />
+                  <h2>Link</h2>
+                  <Link />
+                  <br />
 
-      <h2>Spinner</h2>
-      <Link />
-      <br />
+                  <h2>Spinner</h2>
+                  <Link />
+                  <br />
 
-      <h2>Search Bar</h2>
-      <SearchBar />
-      <br />
+                  <h2>Search Bar</h2>
+                  <SearchBar />
+                  <br />
 
-      <h2>Spinner</h2>
-      <Spinner />
-      <br />
+                  <h2>Spinner</h2>
+                  <Spinner />
+                  <br />
 
-      <h2>Tabs</h2>
-      <Tab />
-      <br />
+                  <h2>Tabs</h2>
+                  <Tab />
+                  <br />
 
-      <h2>Tag</h2>
-      <Tag />
-      <br />
+                  <h2>Tag</h2>
+                  <Tag />
+                  <br />
 
-      <h2>Number indicator</h2>
-      <NumberIndicator />
-      <br />
+                  <h2>Number indicator</h2>
+                  <NumberIndicator />
+                  <br />
 
-      <h2>Sidebar</h2>
-      <Sidebar />
-      <br />
+                  <h2>Sidebar</h2>
+                  <Sidebar />
+                  <br />
 
-      <h2>IconButton</h2>
-      <IconButton />
-      <br />
+                  <h2>IconButton</h2>
+                  <IconButton />
+                  <br />
 
-    </div>
+            </div>
 
-  )
+      )
 }
 export default App;
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
@@ -10,11 +10,14 @@ import Tag from './components/Tag/Tag';
 import Sidebar from './components/Sidebar/Sidebar';
 import NumberIndicator from './components/NumberIndicator/NumberIndicator';
 import IconButton from './components/IconButton/IconButton';
+import Navbar from './components/Navbar/Navbar';
 
 function App() {
 
   return (
       <div>
+               <Navbar />      
+
          <h1 className="header">Stencil Framework integration - React + TS </h1>
 
          <h2>Tag</h2>

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 />
@@ -32,12 +33,8 @@ 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'
 import IconButton from './components/IconButton.vue'
 
 </script>
 
-<style scoped>
-.header {
-  text-align: center;
-}
-</style>