Merge branch 'master' into 193-review-textinput

Infineon · Jun 21, 2023 · 5d4a55b · 5d4a55b
2 parents 2042729 + 6cd0e1f
commit 5d4a55b
Show file tree

Hide file tree

Showing 9 changed files with 141 additions and 44 deletions.
diff --git a/.gitignore b/.gitignore
@@ -109,4 +109,6 @@ typings/
 
 .angular
 
-packages/components/src/components.d.ts
+packages/components/src/components.d.ts
+
+.angular
diff --git a/examples/wrapper-components/react-javascript/src/App.js b/examples/wrapper-components/react-javascript/src/App.js
@@ -1,19 +1,45 @@
 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';
 
 
 function App() {
 
+
+
+
   return (
     <div>
-      <TextField />
+      <h1 className="header">Stencil Framework integration - React + JS</h1>
+
+      <h2>Search Bar</h2>
+      <SearchBar />
+      <br />
+
+      <h2>Button</h2>
+      <Button />
+      <br />
+
+      <h2>Progress Bar</h2>
       <ProgressBar />
+      <br />
+
+      <h2>Text Field</h2>
+      <TextField />
+      <br />
+
+      <h2>Accordion</h2>
+      <Accordion />
+
     </div>
 
   )
 }
-
 export default App;
diff --git a/examples/wrapper-components/react-javascript/src/components/Accordion/Accordion.js b/examples/wrapper-components/react-javascript/src/components/Accordion/Accordion.js
diff --git a/examples/wrapper-components/react-javascript/src/components/Button/button.js b/examples/wrapper-components/react-javascript/src/components/Button/button.js
@@ -0,0 +1,13 @@
+import React from 'react';
+import { IfxButton } from '@infineon/infineon-design-system-react';
+
+function Button() {
+  return (
+    <div >
+      <IfxButton color='primary'>Yes</IfxButton>
+      <IfxButton color='secondary'>No</IfxButton>
+    </div>
+  )
+}
+
+export default Button;
diff --git a/examples/wrapper-components/react-javascript/src/components/ProgressBar/ProgressBar.js b/examples/wrapper-components/react-javascript/src/components/ProgressBar/ProgressBar.js
@@ -1,12 +1,30 @@
-import React from 'react';
-import { IfxProgressBar } from '@infineon/infineon-design-system-react';
+import React, { useState } from 'react';
+import { IfxProgressBar, IfxButton } from '@infineon/infineon-design-system-react';
 
 function ProgressBar() {
+  const [progressValue, setProgressValue] = useState(25);
+
+  // Define your methods here
+  const updateProgressOnClick = () => {
+    setProgressValue((currentValue) => {
+      console.log("updating progress-bar value ", progressValue)
+      if (currentValue < 100) {
+        return currentValue + 10;
+      } else {
+        return 10;
+      }
+    });
+  };
+
   return (
     <div>
-      <IfxProgressBar value={50} showLabel={true}></IfxProgressBar>
-    </div>
+      <IfxProgressBar value={progressValue} showLabel={true}></IfxProgressBar>
+      <IfxButton onClick={updateProgressOnClick} variant="outline" href="" target="_blank" color="primary" size="s"
+        disabled={false} icon={false}>
+        Update Progress
+      </IfxButton>
+    </div >
   );
 }
 
-export default ProgressBar;
+export default ProgressBar;
diff --git a/examples/wrapper-components/react-javascript/src/components/SearchBar/SearchBar.js b/examples/wrapper-components/react-javascript/src/components/SearchBar/SearchBar.js
@@ -0,0 +1,18 @@
+import React from 'react';
+import { IfxSearchBar } from '@infineon/infineon-design-system-react';
+
+function SearchBar() {
+  const handleSearch = (event) => {
+    console.log("handling search: ", event.detail?.detail)
+  };
+  return (
+    <div  >
+      <IfxSearchBar onIfxChange={handleSearch} style={{ width: '100%' }} show-close-button="true"></IfxSearchBar>
+
+    </div>
+  )
+}
+
+export default SearchBar;
+
+
diff --git a/packages/components/src/components/button/button.scss b/packages/components/src/components/button/button.scss
@@ -91,36 +91,17 @@
 
 .btn {
 
+  & ifx-icon:empty { 
+    display: none;
+  }
+
   &.btn-s {
     font-size: tokens.$font-size-s;
     min-width: 71px;
     min-height: 32px;
     line-height: 16px;
   }
 
-  &.icon-button {
-    min-width: initial;
-    min-height: initial;
-    width: 40px;
-    height: 40px;
-    padding: 0;
-    justify-content: center;
-
-    &.btn-round {
-      border-radius: 100px;
-    }
-
-    &.btn-square {
-      border-radius: 1px;
-    }
-
-    &.btn-s {
-      width: 32px;
-      height: 32px;
-    }
-
-  }
-
   &.btn-primary,
   &.btn-outline-primary,
   &.btn-secondary,

diff --git a/packages/components/src/components/button/button.tsx b/packages/components/src/components/button/button.tsx
@@ -1,4 +1,4 @@
-import { Component, Prop, h, Host, Method, Element } from '@stencil/core';
+import { Component, Prop, h, Host, Method, Element, Watch, State } from '@stencil/core';
 import classNames from 'classnames';
 
 @Component({
@@ -10,30 +10,37 @@ import classNames from 'classnames';
 export class Button {
   @Prop() variant: 'solid' | 'outline' | 'outline-text' = 'solid';
   @Prop() color: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' = 'primary';
-  @Prop() size: string = 'm';
+  @Prop() size: string;
   @Prop() disabled: boolean;
   @Prop() icon: string;
-  @Prop({ mutable: true }) position: string = 'left'
-
+  @Prop() position: string = 'left'
+  @State() internalPosition: string;
   @Prop() href: string;
   @Prop() target: string = '_self';
   @Element() el;
 
   private focusableElement: HTMLElement;
 
+  @Watch('position')
+  reassignPosition(newValue: string) {
+    if (newValue && newValue !== this.internalPosition) {
+      if(newValue.toUpperCase() === "LEFT" || newValue.toUpperCase() === "RIGHT")
+      this.internalPosition = newValue;
+    }
+  }
+
   @Method()
   async setFocus() {
     this.focusableElement.focus();
   }
 
   componentWillLoad() {
     if (this.position.toUpperCase() !== "LEFT") {
-      this.position = 'right';
-    }
+      this.internalPosition = 'left';
+    } else this.internalPosition = this.position;
   }
 
 
-
   render() {
     return (
       <Host>
@@ -45,20 +52,19 @@ export class Button {
             target={this.target}
             rel={this.target === '_blank' ? 'noopener noreferrer' : undefined}
           >
-            {this.icon && this.position.toUpperCase() === "LEFT" && <ifx-icon icon={this.icon}></ifx-icon>}
+            {this.icon && this.internalPosition.toUpperCase() === "LEFT" && <ifx-icon icon={this.icon}></ifx-icon>}
             <slot></slot>
-            {this.icon && this.position.toUpperCase() === "RIGHT" && <ifx-icon icon={this.icon}></ifx-icon>}
+            {this.icon && this.internalPosition.toUpperCase() === "RIGHT" && <ifx-icon icon={this.icon}></ifx-icon>}
 
           </a>
         ) : (
           <button
             class={this.getClassNames()}
-
             type="button"
           >
-            {this.icon && this.position.toUpperCase() === "LEFT" && <ifx-icon icon={this.icon}></ifx-icon>}
+            {this.icon && this.internalPosition.toUpperCase() === "LEFT" && <ifx-icon icon={this.icon}></ifx-icon>}
             <slot></slot>
-            {this.icon && this.position.toUpperCase() === "RIGHT" && <ifx-icon icon={this.icon}></ifx-icon>}
+            {this.icon && this.internalPosition.toUpperCase() === "RIGHT" && <ifx-icon icon={this.icon}></ifx-icon>}
           </button>
         )}
       </Host>

diff --git a/packages/components/src/components/button/readme.md b/packages/components/src/components/button/readme.md
@@ -14,7 +14,7 @@
 | `href`     | `href`     |             | `string`                                                         | `undefined` |
 | `icon`     | `icon`     |             | `string`                                                         | `undefined` |
 | `position` | `position` |             | `string`                                                         | `'left'`    |
-| `size`     | `size`     |             | `string`                                                         | `'m'`       |
+| `size`     | `size`     |             | `string`                                                         | `undefined` |
 | `target`   | `target`   |             | `string`                                                         | `'_self'`   |
 | `variant`  | `variant`  |             | `"outline" \| "outline-text" \| "solid"`                         | `'solid'`   |