Skip to content

Commit

Permalink
Merge pull request #219 from Infineon/188-review-searchbar
Browse files Browse the repository at this point in the history 
188 review search input
  • Loading branch information
@verena-ifx
verena-ifx authored Aug 1, 2023
2 parents ddb7ecd + bca3b81 commit 967977c
Show file tree
Hide file tree
Showing 37 changed files with 778 additions and 406 deletions.
29 changes: 25 additions & 4 deletions examples/stencil-components/angular/src/app/app.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ <h2>Button</h2>
</ifx-button>
</div>
<br />
<br />
<h2>Progress bar</h2>
<ifx-progress-bar [value]="progressValue" size="m" show-label="true"></ifx-progress-bar>
<div>
Expand All @@ -52,13 +53,15 @@ <h2>Progress bar</h2>
</ifx-button>
</div>
<br />
<br />

<h2>Checkbox</h2>

<form (ngSubmit)="handleSubmit()">
<ifx-checkbox [disabled]="checkboxDisabled" [value]="checkboxChecked" [error]="checkboxError" name="name"
(ifxChange)="toggleCheckboxValue()">label</ifx-checkbox>
<br />
<br />

<ifx-button type="submit">Submit</ifx-button>
</form>
Expand All @@ -71,19 +74,21 @@ <h2>Checkbox</h2>
<span>Error: {{ checkboxError }} </span>
<span>Value: {{ checkboxChecked }}</span>
<br />

<br />

<h2>Text Field</h2>
<form (ngSubmit)="handleSubmit()">
<ifx-text-field (ifxInput)="handleIfxInput($event)" [error]="false" [disabled]="false" [success]="false"
<ifx-text-input (ifxInput)="handleTextInput($event)" [error]="false" [disabled]="false" [success]="false"
placeholder="Placeholder" [errorMessage]="">Text
field</ifx-text-field>
field</ifx-text-input>
<br />
<br />

<ifx-button type="submit">Submit</ifx-button>
</form>
<span>Text field value: {{ textFieldValue }}</span>
<br />
<br />

<h2>Radio Button</h2>
<form>
Expand All @@ -100,22 +105,38 @@ <h2>Radio Button</h2>
<span>Value: {{ radioChecked }}</span>
<span>Radio button value: {{ radioButtonValue }}</span>
<br />
<br />

<h2>Spinner</h2>
<ifx-spinner variant="semiconductor" size="m"></ifx-spinner>
<br />
<br />

<h2>Link</h2>
<ifx-link color="primary" href="" target="_blank" underline="false">
Link
</ifx-link>
<br />
<br />

<h2>Number indicator</h2>
<h2>Number Indicator</h2>
<ifx-number-indicator inverted='false'> {{ numberIndicator }}</ifx-number-indicator>
<button (click)="increaseNumber()">+</button>
<button (click)="decreaseNumber()">-</button>
<br />
<br />

<h2>Search Field</h2>
<ifx-search-field size="m" disabled="false" show-delete-icon="true"
(ifxInput)="handleSearchField($event)"></ifx-search-field>
<br />
<br />

<h2>Search Bar</h2>
<ifx-search-bar size="m" disabled="false" show-close-button="true"
(ifxInput)="handleSearchBar($event)"></ifx-search-bar>
<br />
<br />

<h2>Sidebar</h2>
<ifx-sidebar application-name="Application Name">
Expand Down
17 changes: 16 additions & 1 deletion examples/stencil-components/angular/src/app/app.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,8 @@ export class AppComponent {
radioDisabled = false;
radioChecked = false;
textFieldValue = '';
searchFieldValue = '';
searchBarValue = '';
radioButtonValue = false;
numberIndicator = 1;

Expand Down Expand Up @@ -66,12 +68,25 @@ export class AppComponent {
}


handleIfxInput(event: CustomEvent) {
handleTextInput(event: CustomEvent) {
console.log("textInput value change")
this.textFieldValue = event.detail;

}


handleSearchField(event: CustomEvent) {
console.log("searchField value change: ", event.detail)
this.searchFieldValue = event.detail;

}

handleSearchBar(event: CustomEvent) {
console.log("searchBar value change: ", event.detail)
this.searchBarValue = event.detail;

}

increaseNumber() {
this.numberIndicator = this.numberIndicator + 1;

Expand Down
26 changes: 24 additions & 2 deletions examples/stencil-components/vanilla-cdn/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@ <h2>Link</h2>
Link
</ifx-link>
<br />
<br />

<h2>Number Indicator</h2>
<ifx-number-indicator id="number-indicator" inverted='false'>1</ifx-number-indicator>
Expand Down Expand Up @@ -156,11 +157,20 @@ <h2>Card</h2>
</ifx-card-links>
</ifx-card>
<br />
<br />

<h2>Switch</h2>
<ifx-switch id="switch" disabled="false" value="false"></ifx-switch>
<h2>Search field</h2>
<ifx-search-field id="search-field" size="m" disabled="false" show-delete-icon="true"></ifx-search-field>
<br />

<h2>Search bar</h2>
<ifx-search-bar id="search-bar" size="m" disabled="false" show-close-button="true"></ifx-search-field>
<br />

<h2>Switch</h2>
<ifx-switch id="switch" disabled="false" value="false"></ifx-switch>
<br />

</div>

</body>
Expand All @@ -182,6 +192,10 @@ <h2>Switch</h2>
const textInput = document.querySelector('#text-input');
const radioBtn = document.querySelector('#radio-btn');
const numberIndicator = document.querySelector('#number-indicator');

const searchField = document.querySelector('#search-field');
const searchBar = document.querySelector('#search-bar');

const switchToggle = document.querySelector('#switch');
const cardBtn = document.querySelector('#cardBtn');

Expand Down Expand Up @@ -270,6 +284,14 @@ <h2>Switch</h2>
});


searchField.addEventListener('ifxInput', (event) => {
console.log("search field value", event.detail);
});

searchBar.addEventListener('ifxInput', (event) => {
console.log("search bar value", event.detail);
});

});


Expand Down
123 changes: 63 additions & 60 deletions examples/wrapper-components/react-javascript/src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,93 +12,96 @@ import NumberIndicator from './components/NumberIndicator/NumberIndicator'
import Spinner from './components/Spinner/Spinner'
import Checkbox from './components/Checkbox/Checkbox';
import Navbar from './components/Navbar/Navbar';
import SearchField from './components/SearchField/SearchField';
import IconButton from './components/IconButton/IconButton';
import Tab from './components/Tab/Tab';
import Tag from './components/Tag/Tag';
import Switch from './components/Switch/Switch';
import Card from './components/Card/Card';

function App() {
return (
<div>
<Navbar />
return (
<div>
<Navbar />
<h1>Stencil Framework integration - React + JS</h1>

<h1>Stencil Framework integration - React + JS</h1>
<h2>Alert</h2>
<Alert />
<br />

<h2>Alert</h2>
<Alert />
<br />
<h2>IconButton</h2>
<IconButton />
<br />

<h2>Button</h2>
<Button />
<br />
<h2>Tab</h2>
<Tab />
<br />

<h2>Card</h2>
<Card />
<br />
<h2>Tag</h2>
<Tag />
<br />

<h2>Progress Bar</h2>
<ProgressBar />
<br />
<h2>Button</h2>
<Button />
<br />

<h2>Text Field</h2>
<TextField />
<br />
<h2>Card</h2>
<Card />
<br />

<h2>Accordion</h2>
<Accordion />
<br />
<h2>Progress Bar</h2>
<ProgressBar />
<br />

<h2>Radio Button</h2>
<RadioButton />
<br />
<h2>Text Field</h2>
<TextField />
<br />

<h2>Checkbox</h2>
<Checkbox />
<br />
<h2>Accordion</h2>
<Accordion />
<br />

<h2>Link</h2>
<Link />
<br />
<h2>Radio Button</h2>
<RadioButton />
<br />

<h2>Spinner</h2>
<Link />
<br />
<h2>Checkbox</h2>
<Checkbox />
<br />

<h2>Search Bar</h2>
<SearchBar />
<br />
<h2>Link</h2>
<Link />
<br />

<h2>Spinner</h2>
<Spinner />
<br />
<h2>Spinner</h2>
<Link />
<br />

<h2>Tabs</h2>
<Tab />
<br />
<h2>Search Bar</h2>
<SearchBar />
<br />

<h2>Tag</h2>
<Tag />
<br />
<h2>Search Field</h2>
<SearchField />

<h2>Number indicator</h2>
<NumberIndicator />
<br />
<h2>Spinner</h2>
<Spinner />
<br />

<h2>Sidebar</h2>
<Sidebar />
<br />
<h2>Number indicator</h2>
<NumberIndicator />
<br />

<h2>IconButton</h2>
<IconButton />
<br />
<h2>Sidebar</h2>
<Sidebar />
<br />

<h2>Switch</h2>
<Switch />
<br />
<h2>Switch</h2>
<Switch />
<br />

</div>
</div>

)
)
}
export default App;
2 changes: 1 addition & 1 deletion examples/wrapper-components/react-javascript/src/components/SearchBar/SearchBar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { IfxSearchBar } from '@infineon/infineon-design-system-react';

function SearchBar() {
const handleSearch = (event) => {
console.log("handling search: ", event.detail?.detail)
console.log("handling search: ", event.detail)
};
return (
<div >
Expand Down
18 changes: 18 additions & 0 deletions examples/wrapper-components/react-javascript/src/components/SearchField/SearchField.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
import React from 'react';
import { IfxSearchField } from '@infineon/infineon-design-system-react';

function SearchField() {
const handleSearch = (event) => {
console.log("handling input: ", event.detail)
};

return (
<div >
<IfxSearchField disabled="false" size='m' show-delete-icon="true" onIfxInput={handleSearch}></IfxSearchField>
</div>
)
}

export default SearchField;


Loading

0 comments on commit 967977c

Please sign in to comment.