Skip to content

Commit

Permalink
Deploying to gh-pages from @ 967977c 🚀
Browse files Browse the repository at this point in the history
  • Loading branch information
@verena-ifx
verena-ifx committed Aug 1, 2023
1 parent f18cc86 commit 987d1dd
Show file tree
Hide file tree
Showing 2 changed files with 308 additions and 0 deletions.
1 change: 1 addition & 0 deletions vanilla-example/assets/index-3cfb730f.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

307 changes: 307 additions & 0 deletions vanilla-example/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,307 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="module" src="https://cdn.jsdelivr.net/npm/@infineon/infineon-design-system-stencil/dist/infineon-design-system-stencil/infineon-design-system-stencil.esm.js"></script>
<!-- <link rel="stylesheet" href="dist/infineon-design-system-stencil/infineon-design-system-stencil.css"> -->


<title>Vanilla</title>
<script type="module" crossorigin src="/assets/index-3cfb730f.js"></script>
</head>

<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>
<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>
<br />

<h2>Button</h2>
<ifx-button variant="solid" href="" target="_blank" color="primary" size="m" disabled="false" icon="false">
Button
</ifx-button>
<br />

<h2>Progress bar</h2>
<ifx-progress-bar id="progress-bar" value="50" size="m" show-label="true"></ifx-progress-bar>
<ifx-button onclick="updateProgress()" variant="outline" href="" target="_blank" color="primary" size="s"
disabled="false" icon="false">
Update Progress
</ifx-button>
<br />
<br />
<h2>Checkbox</h2>

<form id="form">
<ifx-checkbox id="checkbox" name="name">label</ifx-checkbox>
<br />
<ifx-button type="submit" variant="outline">Submit</ifx-button>

</form>

<ifx-button id="toggleDisabled">Toggle Disabled</ifx-button>
<ifx-button id="toggleError">Toggle Error</ifx-button>
<ifx-button id="toggleValue">Toggle Value</ifx-button>


<span id="disabledSpan"></span>
<span id="errorSpan"></span>
<span id="valueSpan"></span>

<br />

<form id="another-form">
<h2>Text Field</h2>
<ifx-text-field id="text-input" error="false" disabled="false" success="false" placeholder="Placeholder"
errorMessage="">Text
field</ifx-text-field>
<br />

</form>

<span id="textInputSpan"></span>
<br />

<h2>Radio Button</h2>
<ifx-radio-button id="radio-btn" size="s" error="false" disabled="false" value="false">Text</ifx-radio-button>
<br />

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


<h2>Link</h2>
<ifx-link color="primary" href="" target="_blank" underline="false">
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 />

<h2>Card</h2>
<ifx-card href="http://google.com" target="_blank" direction="vertical">
<ifx-card-image position="right"
src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg" alt=""
slot="img"></ifx-card-image>

<ifx-card-overline>Overline</ifx-card-overline>
<ifx-card-headline>Headline</ifx-card-headline>
<ifx-card-text>This is a long description in order to test if the text will overflow its container or not. So I am
typing even more text. And more and more. This is a long description in order to test if the text will overflow
its container or not. So I am typing even more text. And more and more. This is a long description in order to
test if the text will overflow its container or not. So I am typing even more text. And more and more. This is a
long description in order to test if the text will overflow its container or not. So I am typing even more text.
And more and more.This is a long description in order to test if the text will overflow its container or not. So
I am typing even more text. And more and more. This is a long description in order to test if the text will
overflow its container or not. So I am typing even more text. And more and more.This is a long description in
order to test if the text will overflow its container or not. So I am typing even more text. And more and more.
This is a long description in order to test if the text will overflow its container or not. So I am typing even
more text. And more and more.</ifx-card-text>

<ifx-card-links slot="buttons">
<ifx-button id="cardBtn" color="primary">Button</ifx-button>
<ifx-button color="secondary">Button</ifx-button>
</ifx-card-links>
</ifx-card>
<br />
<br />

<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>

<script>
let disabled = false;
let checked = false;
let error = false;
let textInputValue = "";
let radioChecked = false;
let number = 1;
let switchChecked = false;

const form = document.querySelector("#form");
const anotherForm = document.querySelector("#another-form");

const checkbox = document.querySelector("#checkbox");
const progressBar = document.querySelector('#progress-bar');
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');

const toggleDisabledButton = document.querySelector("#toggleDisabled");
const toggleErrorButton = document.querySelector("#toggleError");
const toggleValueButton = document.querySelector("#toggleValue");
const disabledSpan = document.querySelector("#disabledSpan");
const errorSpan = document.querySelector("#errorSpan");
const valueSpan = document.querySelector("#valueSpan");
const textInputSpan = document.querySelector("#textInputSpan");

function updateValues() {
checkbox.setAttribute('disabled', disabled);
checkbox.setAttribute('value', checked);
checkbox.setAttribute('error', error);
disabledSpan.textContent = `Disabled: ${disabled}`;
errorSpan.textContent = `Error: ${error}`;
valueSpan.textContent = `Value: ${checked}`;
textInputSpan.textContent = `Text field: ${textInputValue}`;
switchToggle.setAttribute('value', switchChecked);
}

function increaseNumber() {
numberIndicator.textContent = Number(numberIndicator.textContent) + 1;

}

function decreaseNumber() {
numberIndicator.textContent = Number(numberIndicator.textContent) - 1;
}

function updateProgress() {
const newValue = Math.floor(Math.random() * 101);
progressBar.setAttribute('value', newValue);
}

document.addEventListener('DOMContentLoaded', (event) => {
form.addEventListener('submit', () => {
event.preventDefault();
console.log('Form submitted. \nCheckbox value:', checked, '\nSwitchToggle value', switchChecked);
});


checkbox.addEventListener('ifxChange', (event) => {
console.log("checked value change", event.detail);
checked = !checked;
updateValues();
});

switchToggle.addEventListener('ifxChange', (event) => {
console.log("switchToggle value change", event.detail);
switchChecked = !switchChecked;
updateValues();
});

toggleDisabledButton.addEventListener('click', () => {
disabled = !disabled;
updateValues();
});

toggleErrorButton.addEventListener('click', () => {
error = !error;
updateValues();
});

toggleValueButton.addEventListener('click', () => {
checked = !checked;
updateValues();
});


textInput.addEventListener('ifxInput', (event) => {
console.log("Text field: ", event.detail);
textInputValue = event.detail;
updateValues();
});

radioBtn.addEventListener('ifxChange', (event) => {
console.log("radio btn value change", event.detail);
radioChecked = !radioChecked;
});


cardBtn.addEventListener('click', () => {
console.log("card button click event");
});


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

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

});


updateValues();




</script>


</html>

0 comments on commit 987d1dd

Please sign in to comment.