Merge branch 'master' into 188-review-searchbar; added 3rd size class…

… to the search-field
Infineon · Jul 13, 2023 · 247326d · 247326d
2 parents 19da4ea + 7c7dcb4
commit 247326d
Show file tree

Hide file tree

Showing 33 changed files with 729 additions and 459 deletions.
diff --git a/examples/stencil-components/angular/src/app/app.component.html b/examples/stencil-components/angular/src/app/app.component.html
@@ -103,4 +103,12 @@ <h2>Search Bar</h2>
   <br />
   <br />
 
+  <h2>Sidebar</h2>
+  <ifx-sidebar application-name="Application Name">
+    <ifx-sidebar-item href="http://google.com" target="_blank" icon="image-16">Item One</ifx-sidebar-item>
+    <ifx-sidebar-item href="http://google.com" target="_blank" icon="image-16">Item Two</ifx-sidebar-item>
+    <ifx-sidebar-item href="http://google.com" target="_blank" icon="image-16">Item Three</ifx-sidebar-item>
+    <ifx-sidebar-item href="http://google.com" target="_blank" icon="image-16">Item Four</ifx-sidebar-item>
+  </ifx-sidebar>
+  <br />
 </div>
diff --git a/examples/stencil-components/react/package-lock.json b/examples/stencil-components/react/package-lock.json
diff --git a/examples/stencil-components/vanilla-cdn/index.html b/examples/stencil-components/vanilla-cdn/index.html
@@ -77,13 +77,25 @@ <h2>Link</h2>
       Link
     </ifx-link>
     <br />
+    <br />
 
     <h2>Number Indicator</h2>
     <ifx-number-indicator id="number-indicator" inverted='false'>1</ifx-number-indicator>
     <button onClick="increaseNumber()">+</button>
     <button onClick="decreaseNumber()">-</button>
     <br />
 
+
+    <h2>Sidebar</h2>
+    <ifx-sidebar application-name="Application Name">
+      <ifx-sidebar-item href="http://google.com" target="_blank" icon="image-16">Item One</ifx-sidebar-item>
+      <ifx-sidebar-item href="http://google.com" target="_blank" icon="image-16">Item Two</ifx-sidebar-item>
+      <ifx-sidebar-item href="http://google.com" target="_blank" icon="image-16">Item Three</ifx-sidebar-item>
+      <ifx-sidebar-item href="http://google.com" target="_blank" icon="image-16">Item Four</ifx-sidebar-item>
+    </ifx-sidebar>
+    <br />
+    <br />
+
     <h2>Search field</h2>
     <ifx-search-field id="search-field" size="m" disabled="false" show-delete-icon="true"></ifx-search-field>
     <br />
@@ -205,8 +217,5 @@ <h2>Search bar</h2>
 
 </script>
 
-<style>
-
-</style>
 
 </html>
diff --git a/examples/wrapper-components/react-javascript/package-lock.json b/examples/wrapper-components/react-javascript/package-lock.json
diff --git a/examples/wrapper-components/react-javascript/src/App.js b/examples/wrapper-components/react-javascript/src/App.js
@@ -1,30 +1,79 @@
 import './App.css';
+import Alert from './components/Alert.vue'
 import Link from './components/Link/Link';
+import Button from './components/Button/button';
+import TextField from './components/TextFIeld/TextField';
+import ProgressBar from './components/ProgressBar/ProgressBar';
+import SearchBar from './components/SearchBar/SearchBar';
+import Accordion from './components/Accordion/Accordion';
+import RadioButton from './components/RadioButton/RadioButton';
+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 SearchField from './components/SearchField/SearchField';
-import Spinner from './components/Spinner/Spinner';
-import NumberIndicator from './components/NumberIndicator/NumberIndicator';
+
 
 function App() {
   return (
     <div>
       <h1>Stencil Framework integration - React + TS </h1>
 
-      <h2>Search Field</h2>
-      <SearchField />
+      <h2>Alert</h2>
+      <Alert />
       <br />
 
-      <h2>Spinner</h2>
-      <Spinner />
+      <h2>Button</h2>
+      <Button />
+      <br />
+
+      <h2>Progress Bar</h2>
+      <ProgressBar />
+      <br />
+
+      <h2>Text Field</h2>
+      <TextField />
+      <br />
+
+      <h2>Accordion</h2>
+      <Accordion />
+      <br />
+
+      <h2>Radio Button</h2>
+      <RadioButton />
+      <br />
+
+      <h2>Checkbox</h2>
+      <Checkbox />
       <br />
 
       <h2>Link</h2>
       <Link />
       <br />
 
+      <h2>Spinner</h2>
+      <Link />
+      <br />
+
+      <h2>Search Bar</h2>
+      <SearchBar />
+      <br />
+
+      <h2>Search Field</h2>
+      <SearchField />
 
-      <h2>Number Indicator</h2>
+      <h2>Spinner</h2>
+      <Spinner />
+      <br />
+
+      <h2>Number indicator</h2>
       <NumberIndicator />
       <br />
+
+      <h2>Sidebar</h2>
+      <Sidebar />
+      <br />
+
     </div>
   )
 }

diff --git a/examples/wrapper-components/react-javascript/src/components/Sidebar/Sidebar.js b/examples/wrapper-components/react-javascript/src/components/Sidebar/Sidebar.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import { IfxSidebar, IfxSidebarItem } from '@infineon/infineon-design-system-react';
+
+function Sidebar() {
+  return (
+    <div >
+      <IfxSidebar>
+        <IfxSidebarItem href="http://google.com" target="_blank" icon="image-16">Item One</IfxSidebarItem>
+        <IfxSidebarItem href="http://google.com" target="_blank" icon="image-16">Item Two</IfxSidebarItem>
+        <IfxSidebarItem href="http://google.com" target="_blank" icon="image-16">Item Three</IfxSidebarItem>
+        <IfxSidebarItem href="http://google.com" target="_blank" icon="image-16">Item Four</IfxSidebarItem>
+      </IfxSidebar>
+    </div>
+  )
+}
+
+export default Sidebar;
+
+
diff --git a/examples/wrapper-components/react-typescript/src/App.tsx b/examples/wrapper-components/react-typescript/src/App.tsx
@@ -1,22 +1,17 @@
-
-import './App.css'
-import Link from './components/Link/Link'
+ import './App.css'
 import Button from './components/Button/button';
 import TextField from './components/TextFIeld/TextField';
 import ProgressBar from './components/ProgressBar/ProgressBar';
 import SearchBar from './components/SearchBar/SearchBar';
 import Accordion from './components/Accordion/Accordion';
 import RadioButton from './components/RadioButton/RadioButton';
-
 import Spinner from './components/Spinner'
-
 import NumberIndicator from './components/NumberIndicator/NumberIndicator'
-
+import Link from './components/Link/Link';
 import SearchField from './components/SearchField/SearchField'
 
 function App() {
-
-
+
 
   return (
     <div>
@@ -54,15 +49,13 @@ function App() {
       <h2>Number Indicator</h2>
       <NumberIndicator />
       <br />
-
+      
       <h2>Search Field</h2>
-       <SearchField />
-       <br />
-
-       <h2>Search Bar</h2>
-      <SearchBar />
+      <SearchField />
       <br />
+
     </div>
-  )
+   )
+
 }
-export default App
+export default App
diff --git a/examples/wrapper-components/react-typescript/src/components/Sidebar/Sidebar.tsx b/examples/wrapper-components/react-typescript/src/components/Sidebar/Sidebar.tsx
@@ -0,0 +1,19 @@
+
+import { IfxSidebar, IfxSidebarItem } from '@infineon/infineon-design-system-react';
+
+function Sidebar() {
+  return (
+    <div >
+      <IfxSidebar>
+        <IfxSidebarItem href="http://google.com" target="_blank" icon="image-16">Item One</IfxSidebarItem>
+        <IfxSidebarItem href="http://google.com" target="_blank" icon="image-16">Item Two</IfxSidebarItem>
+        <IfxSidebarItem href="http://google.com" target="_blank" icon="image-16">Item Three</IfxSidebarItem>
+        <IfxSidebarItem href="http://google.com" target="_blank" icon="image-16">Item Four</IfxSidebarItem>
+      </IfxSidebar>
+    </div>
+  )
+}
+
+export default Sidebar;
+
+
diff --git a/examples/wrapper-components/vue-javascript/src/App.vue b/examples/wrapper-components/vue-javascript/src/App.vue
@@ -12,6 +12,7 @@
   <Spinner />
   <Link />
   <NumberIndicator />
+  <Sidebar />
 </template>
 
 
@@ -27,6 +28,7 @@ import RadioButton from './components/RadioButton.vue'
 import TextInput from './components/TextInput.vue'
 import Spinner from './components/Spinner.vue'
 import Link from './components/Link.vue'
+import Sidebar from './components/Sidebar.vue'
 
 </script>
 

diff --git a/examples/wrapper-components/vue-javascript/src/components/Sidebar.vue b/examples/wrapper-components/vue-javascript/src/components/Sidebar.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="app">
+    <ifx-sidebar application-name="This is a very long application">
+    <ifx-sidebar-item href="http://google.com" target="_blank" icon="image-16">Item One</ifx-sidebar-item>
+    <ifx-sidebar-item href="http://yahoo.com" target="_blank" icon="image-16">Item Two</ifx-sidebar-item>
+    <ifx-sidebar-item href="http://bing.com" target="_blank" icon="image-16">Item Three</ifx-sidebar-item>
+    <ifx-sidebar-item href="http://naver.com" target="_blank" icon="image-16">Item Four</ifx-sidebar-item>
+  </ifx-sidebar>
+  </div>
+</template>
+
+<script setup>
+
+
+
+</script>
+
+
+<style scoped>
+.app {
+
+}
+</style>
diff --git a/examples/wrapper-components/vue-typescript/src/App.vue b/examples/wrapper-components/vue-typescript/src/App.vue
@@ -5,13 +5,14 @@
   <Alert />
   <Button />
   <Checkbox />
-  <RadioButton />
   <ProgressBar />
   <SearchField />
+  <SearchBar />
   <TextInput />
+  <NumberIndicator />
   <Spinner />
   <Link />
-  <NumberIndicator />
+  <Sidebar />
 </template>
 
 
@@ -24,7 +25,8 @@ import Checkbox from './components/Checkbox.vue'
 import NumberIndicator from './components/NumberIndicator.vue'
 import ProgressBar from './components/ProgressBar.vue'
 import SearchField from './components/SearchField.vue'
-import RadioButton from './components/RadioButton.vue'
+import SearchBar from './components/SearchBar.vue'
+import Sidebar from './components/Sidebar.vue'
 import TextInput from './components/TextInput.vue'
 import Spinner from './components/Spinner.vue'
 import Link from './components/Link.vue'
@@ -35,4 +37,4 @@ import Link from './components/Link.vue'
 .header {
   text-align: center;
 }
-</style>
+</style>
diff --git a/.../vue-typescript/src/components/Search.vue → ...e-typescript/src/components/SearchBar.vue b/.../vue-typescript/src/components/Search.vue → ...e-typescript/src/components/SearchBar.vue
diff --git a/examples/wrapper-components/vue-typescript/src/components/Sidebar.vue b/examples/wrapper-components/vue-typescript/src/components/Sidebar.vue
@@ -0,0 +1,23 @@
+<template>
+  <div class="app">
+    <ifx-sidebar application-name="This is a very long application">
+    <ifx-sidebar-item href="http://google.com" target="_blank" icon="image-16">Item One</ifx-sidebar-item>
+    <ifx-sidebar-item href="http://yahoo.com" target="_blank" icon="image-16">Item Two</ifx-sidebar-item>
+    <ifx-sidebar-item href="http://bing.com" target="_blank" icon="image-16">Item Three</ifx-sidebar-item>
+    <ifx-sidebar-item href="http://naver.com" target="_blank" icon="image-16">Item Four</ifx-sidebar-item>
+  </ifx-sidebar>
+  </div>
+</template>
+
+<script setup>
+
+
+
+</script>
+
+
+<style scoped>
+.app {
+
+}
+</style>
diff --git a/packages/components-vue/lib/components.ts b/packages/components-vue/lib/components.ts
@@ -168,7 +168,8 @@ export const IfxFooterColumn = /*@__PURE__*/ defineContainer<JSX.IfxFooterColumn
 
 export const IfxIcon = /*@__PURE__*/ defineContainer<JSX.IfxIcon>('ifx-icon', undefined, [
   'icon',
-  'ifxIcon'
+  'ifxIcon',
+  'consoleError'
 ]);
 
 
@@ -293,7 +294,6 @@ export const IfxSearchBar = /*@__PURE__*/ defineContainer<JSX.IfxSearchBar, JSX.
   'isOpen',
   'value',
   'hideLabel',
-  'size',
   'ifxInput'
 ],
 'value', 'ifxInput');
@@ -312,11 +312,15 @@ export const IfxSearchField = /*@__PURE__*/ defineContainer<JSX.IfxSearchField,
 export const IfxSelectInput = /*@__PURE__*/ defineContainer<JSX.IfxSelectInput>('ifx-select-input', undefined);
 
 
-export const IfxSidebar = /*@__PURE__*/ defineContainer<JSX.IfxSidebar>('ifx-sidebar', undefined);
+export const IfxSidebar = /*@__PURE__*/ defineContainer<JSX.IfxSidebar>('ifx-sidebar', undefined, [
+  'applicationName'
+]);
 
 
 export const IfxSidebarItem = /*@__PURE__*/ defineContainer<JSX.IfxSidebarItem>('ifx-sidebar-item', undefined, [
-  'icon'
+  'icon',
+  'href',
+  'target'
 ]);
 
 

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,3 +1,36 @@
+# v18.2.16 (Thu Jul 13 2023)
+
+#### 🐛 Bug Fix
+
+- 190 review sidebar [#215](https://github.com/Infineon/infineon-design-system-stencil/pull/215) ([@tishoyanchev](https://github.com/tishoyanchev) [email protected])
+
+#### 🔩 Dependency Updates
+
+- Bump semver from 5.7.1 to 5.7.2 in /examples/stencil-components/react [#253](https://github.com/Infineon/infineon-design-system-stencil/pull/253) ([@dependabot[bot]](https://github.com/dependabot[bot]))
+- Bump semver from 5.7.1 to 5.7.2 in /examples/wrapper-components/react-javascript [#254](https://github.com/Infineon/infineon-design-system-stencil/pull/254) ([@dependabot[bot]](https://github.com/dependabot[bot]))
+- Bump semver from 5.7.1 to 5.7.2 in /packages/components [#246](https://github.com/Infineon/infineon-design-system-stencil/pull/246) ([@dependabot[bot]](https://github.com/dependabot[bot]))
+
+#### Authors: 3
+
+- [@dependabot[bot]](https://github.com/dependabot[bot])
+- Tisho Yanchev ([@tishoyanchev](https://github.com/tishoyanchev))
+- verena-ifx ([email protected])
+
+---
+
+# v18.2.15 (Mon Jul 10 2023)
+
+#### 🐛 Bug Fix
+
+- 218-add-about-and-faq-section-to-storybook [#221](https://github.com/Infineon/infineon-design-system-stencil/pull/221) ([@tishoyanchev](https://github.com/tishoyanchev) [email protected])
+
+#### Authors: 2
+
+- Tisho Yanchev ([@tishoyanchev](https://github.com/tishoyanchev))
+- verena-ifx ([email protected])
+
+---
+
 # v18.2.14 (Mon Jul 10 2023)
 
 #### 🐛 Bug Fix