slightly updated

Infineon · Jun 20, 2023 · 58abe69 · 58abe69
1 parent 8342e38
commit 58abe69
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 60 deletions.
diff --git a/examples/wrapper-components/react-javascript/src/App.js b/examples/wrapper-components/react-javascript/src/App.js
@@ -1,31 +1,11 @@
 import './App.css';
+import ProgressBar from './components/ProgressBar/ProgressBar';
 
 
-import { IfxAccordion, IfxAccordionItem } from '@infineon/infineon-design-system-react';
-
 
 function App() {
-
-  const handleItems = () => { 
-    console.log('here')
-  }
-
   return (
-    <IfxAccordion auto-collapse="true" onIfxItemOpen={handleItems}>
-      <IfxAccordionItem caption="How to be happy?">
-        I have no idea. I have no idea.  I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.  I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.I have no idea. I have no idea.  I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.I have no idea. I have no idea.  I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.
-        I have no idea. I have no idea.  I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.  I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.I have no idea. I have no idea.  I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.I have no idea. I have no idea.  I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.
-        I have no idea. I have no idea.  I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.  I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.I have no idea. I have no idea.  I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.I have no idea. I have no idea.  I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.
-        I have no idea. I have no idea.  I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.  I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.I have no idea. I have no idea.  I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.I have no idea. I have no idea.  I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.
-        I have no idea. I have no idea.  I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.  I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.I have no idea. I have no idea.  I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.I have no idea. I have no idea.  I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea. I have no idea.
-      </IfxAccordionItem>
-      <IfxAccordionItem caption="How to be happy?">
-        I have no idea.
-      </IfxAccordionItem>
-      <IfxAccordionItem caption="How to be happy?">
-        I have no idea.
-      </IfxAccordionItem>
-    </IfxAccordion>
+    <ProgressBar />
   )
 }
 

diff --git a/examples/wrapper-components/react-javascript/src/components/ProgressBar/ProgressBar.js b/examples/wrapper-components/react-javascript/src/components/ProgressBar/ProgressBar.js
@@ -0,0 +1,12 @@
+import React from 'react';
+import { IfxProgressBar } from '@infineon/infineon-design-system-react';
+
+function ProgressBar() {
+  return (
+    <div>
+      <IfxProgressBar value={50} showLabel={true}></IfxProgressBar>
+    </div>
+  );
+}
+
+export default ProgressBar;
diff --git a/examples/wrapper-components/vue-javascript/src/App.vue b/examples/wrapper-components/vue-javascript/src/App.vue
@@ -1,11 +1,9 @@
 
 <template>
   <h1 class="header">Using Stencil web components in a Vue application</h1>
-  <Alert />
-  <Button />
-  <Checkbox />
+
   <ProgressBar />
-  <Search />
+
 </template>
 
 

diff --git a/packages/components/src/components/progress-bar/progress-bar.scss b/packages/components/src/components/progress-bar/progress-bar.scss
@@ -1,15 +1,14 @@
 @use "../../../node_modules/@infineon/design-system-tokens/dist/tokens";
 
 
-:host {
-  display: flex;
-  width: 100%;
-}
+// :host {
+//   display: flex;
+//   width: 100%;
+// }
 
 
 .progress-bar {
   height: 16px;
-  border-radius: 1px;
   bottom: 0;
   right: 0;
   top: 0;
@@ -20,12 +19,9 @@
   width: 100%; // Ensure the bar itself can grow up to 100% width
   overflow: hidden; // Ensures that the inner progress bar doesn't exceed the width of the outer progress bar
 
-
-
   .label {
     height: 17px;
     border-radius: 1px 0px 0px 1px;
-
   }
 
   &.s {
@@ -57,7 +53,7 @@
     font-size: 14px;
     line-height: 20px;
     font-family: tokens.$font-family-body;
-    color: #fff;
+    color: tokens.$color-text-white;
     top: 0;
     bottom: 0;
     left: 0;

diff --git a/packages/components/src/index.html b/packages/components/src/index.html
@@ -26,31 +26,10 @@
 
 <body>
 
-  <!-- <ifx-breadcrumb>
-    <ifx-breadcrumb-item>
-      <ifx-breadcrumb-item-label slot="label" icon="">Breadcrumb 1</ifx-breadcrumb-item-label>
-      <ifx-dropdown-menu>
-        <ifx-dropdown-item url="http://google.com">gdgd</ifx-dropdown-item>
-        <ifx-dropdown-item url="http://bing.com">gdgd</ifx-dropdown-item>
-        <ifx-dropdown-item url="http://yahoo.com">gdgd</ifx-dropdown-item>
-        <ifx-dropdown-item url="http://naver.com">gdgd</ifx-dropdown-item>
-      </ifx-dropdown-menu>
-    </ifx-breadcrumb-item>
-
-    <ifx-breadcrumb-item>
-      <ifx-breadcrumb-item-label slot="label" icon="">Breadcrumb 2</ifx-breadcrumb-item-label>
-      <ifx-dropdown-menu>
-        <ifx-dropdown-item url="http://google.com">gdgd</ifx-dropdown-item>
-        <ifx-dropdown-item url="http://bing.com">gdgd</ifx-dropdown-item>
-        <ifx-dropdown-item url="http://yahoo.com">gdgd</ifx-dropdown-item>
-        <ifx-dropdown-item url="http://naver.com">gdgd</ifx-dropdown-item>
-      </ifx-dropdown-menu>
-    </ifx-breadcrumb-item>
-
-    <ifx-breadcrumb-item>
-      <ifx-breadcrumb-item-label slot="label" icon="" url="http://google.com">Breadcrumb 3</ifx-breadcrumb-item-label>
-    </ifx-breadcrumb-item>
-  </ifx-breadcrumb> -->
+  <ifx-progress-bar
+  value="50"
+  show-label="true"
+></ifx-progress-bar>