From 58abe695ffc01cff40956726113fc777e72847e3 Mon Sep 17 00:00:00 2001 From: tishoyanchev Date: Tue, 20 Jun 2023 16:06:19 +0200 Subject: [PATCH] slightly updated --- .../react-javascript/src/App.js | 24 ++------------- .../src/components/ProgressBar/ProgressBar.js | 12 ++++++++ .../vue-javascript/src/App.vue | 6 ++-- .../components/progress-bar/progress-bar.scss | 14 ++++----- packages/components/src/index.html | 29 +++---------------- 5 files changed, 25 insertions(+), 60 deletions(-) create mode 100644 examples/wrapper-components/react-javascript/src/components/ProgressBar/ProgressBar.js diff --git a/examples/wrapper-components/react-javascript/src/App.js b/examples/wrapper-components/react-javascript/src/App.js index 4c325702d3..8eff47b20a 100644 --- 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 ( - - - 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. - - - I have no idea. - - - I have no idea. - - + ) } diff --git a/examples/wrapper-components/react-javascript/src/components/ProgressBar/ProgressBar.js b/examples/wrapper-components/react-javascript/src/components/ProgressBar/ProgressBar.js new file mode 100644 index 0000000000..a1ec906107 --- /dev/null +++ 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 ( +
+ +
+ ); +} + +export default ProgressBar; \ No newline at end of file diff --git a/examples/wrapper-components/vue-javascript/src/App.vue b/examples/wrapper-components/vue-javascript/src/App.vue index ccd91aaaa5..20463632b5 100644 --- a/examples/wrapper-components/vue-javascript/src/App.vue +++ b/examples/wrapper-components/vue-javascript/src/App.vue @@ -1,11 +1,9 @@ diff --git a/packages/components/src/components/progress-bar/progress-bar.scss b/packages/components/src/components/progress-bar/progress-bar.scss index 0f88893c6d..8998ea71f0 100644 --- 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 index 4666d50820..1674dae126 100644 --- a/packages/components/src/index.html +++ b/packages/components/src/index.html @@ -26,31 +26,10 @@ - +