Merge pull request #201 from Infineon/165-rework-card-component-resol…

…ve-overflow-icon-and-image-boolean-issues-implement-new-structure 165 rework card component resolve overflow icon and image boolean issues implement new structure
Infineon · Aug 1, 2023 · 89027ba · 89027ba
2 parents edcc480 + 651fed2
commit 89027ba
Show file tree

Hide file tree

Showing 37 changed files with 16,538 additions and 2,942 deletions.
diff --git a/examples/stencil-components/angular/src/app/app.component.html b/examples/stencil-components/angular/src/app/app.component.html
@@ -126,6 +126,21 @@ <h2>Sidebar</h2>
   </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 color="primary">Button</ifx-button>
+        <ifx-button color="secondary">Button</ifx-button>
+      </ifx-card-links>
+  </ifx-card>
+  <br />
+
   <h2>Switch</h2>
   <ifx-switch [disabled]="switchDisabled" [value]="switchChecked" (ifxChange)="toggleSwitchValue()"></ifx-switch>
   <br />

diff --git a/examples/stencil-components/vanilla-cdn/index.html b/examples/stencil-components/vanilla-cdn/index.html
@@ -130,9 +130,37 @@ <h2>Sidebar</h2>
     </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 />
+
     <h2>Switch</h2>
     <ifx-switch id="switch" disabled="false" value="false"></ifx-switch>
     <br />
+
   </div>
 
 </body>
@@ -155,7 +183,7 @@ <h2>Switch</h2>
   const radioBtn = document.querySelector('#radio-btn');
   const numberIndicator = document.querySelector('#number-indicator');
   const switchToggle = document.querySelector('#switch');
-
+  const cardBtn = document.querySelector('#cardBtn');
 
   const toggleDisabledButton = document.querySelector("#toggleDisabled");
   const toggleErrorButton = document.querySelector("#toggleError");
@@ -237,6 +265,11 @@ <h2>Switch</h2>
     });
 
 
+    cardBtn.addEventListener('click', () => {
+      console.log("card button click event");
+    });
+
+
   });
 
 

diff --git a/examples/wrapper-components/react-javascript/src/App.js b/examples/wrapper-components/react-javascript/src/App.js
@@ -16,6 +16,7 @@ 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 (
@@ -32,6 +33,10 @@ function App() {
                   <Button />
                   <br />
 
+                  <h2>Card</h2>
+                  <Card />
+                  <br />
+
                   <h2>Progress Bar</h2>
                   <ProgressBar />
                   <br />

diff --git a/examples/wrapper-components/react-javascript/src/components/Card/Card.js b/examples/wrapper-components/react-javascript/src/components/Card/Card.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import { IfxCard, IfxCardHeadline, IfxButton, IfxCardOverline, IfxCardText, IfxCardImage, IfxCardLinks } from '@infineon/infineon-design-system-react';
+
+function Card() {
+  return (
+    <IfxCard href="http://google.com" target="_blank" direction="vertical">
+      <IfxCardImage position="right" src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg" alt="" slot="img"></IfxCardImage>
+      <IfxCardOverline>Overline</IfxCardOverline>
+      <IfxCardHeadline>Headline</IfxCardHeadline>
+      <IfxCardText>
+        Some quick example text to build on the card title and make up the bulk of the card's content
+      </IfxCardText>
+      <IfxCardLinks slot="buttons">
+        <IfxButton color='primary'>Button</IfxButton>  
+        <IfxButton color='primary'>Button</IfxButton>  
+      </IfxCardLinks>  
+    </IfxCard>
+  );
+}
+
+export default Card;
diff --git a/examples/wrapper-components/react-typescript/src/App.tsx b/examples/wrapper-components/react-typescript/src/App.tsx
@@ -1,4 +1,4 @@
- import './App.css'
+import './App.css'
 import Button from './components/Button/button';
 import TextField from './components/TextField/TextField';
 import ProgressBar from './components/ProgressBar/ProgressBar';
@@ -7,9 +7,13 @@ import Accordion from './components/Accordion/Accordion';
 import RadioButton from './components/RadioButton/RadioButton';
 import Tabs from './components/Tab/Tab';
 import Tag from './components/Tag/Tag';
+
+import Card from './components/Card/Card';
+
 import Sidebar from './components/Sidebar/Sidebar';
 import NumberIndicator from './components/NumberIndicator/NumberIndicator';
 import IconButton from './components/IconButton/IconButton';
+
 import Navbar from './components/Navbar/Navbar';
 
 function App() {
@@ -44,13 +48,17 @@ function App() {
          <Accordion />
          <br />
 
-      <h2>Radio Button</h2>
-      <RadioButton />
-      <br />
+         <h2>Radio Button</h2>
+         <RadioButton />
+         <br />
+
+         <h2>Tabs</h2>
+         <Tabs />
+         <br/>
 
-      <h2>Tabs</h2>
-      <Tabs />
-      <br/>
+         <h2>Card</h2>
+         <Card />
+         <br/>
 
       <h2>Number indicator</h2>
       <NumberIndicator />

diff --git a/examples/wrapper-components/react-typescript/src/components/Card/Card.tsx b/examples/wrapper-components/react-typescript/src/components/Card/Card.tsx
@@ -0,0 +1,21 @@
+
+import { IfxCard, IfxCardHeadline, IfxButton, IfxCardOverline, IfxCardText, IfxCardImage, IfxCardLinks } from '@infineon/infineon-design-system-react';
+
+function Card() {
+  return (
+    <IfxCard href="http://google.com" target="_blank" direction="vertical">
+      <IfxCardImage position="right" src="https://upload.wikimedia.org/wikipedia/commons/e/e4/Latte_and_dark_coffee.jpg" alt="" slot="img"></IfxCardImage>
+      <IfxCardOverline>Overline</IfxCardOverline>
+      <IfxCardHeadline>Headline</IfxCardHeadline>
+      <IfxCardText>
+        Some quick example text to build on the card title and make up the bulk of the card's content
+      </IfxCardText>
+      <IfxCardLinks slot="buttons">
+        <IfxButton color='primary'>Button</IfxButton>  
+        <IfxButton color='primary'>Button</IfxButton>  
+      </IfxCardLinks>  
+    </IfxCard>
+  );
+}
+
+export default Card;
diff --git a/examples/wrapper-components/vue-javascript/src/App.vue b/examples/wrapper-components/vue-javascript/src/App.vue
@@ -16,6 +16,7 @@
   <NumberIndicator />
   <Sidebar />
   <IconButton />
+  <Card />
   <Switch />
 </template>
 
@@ -35,6 +36,7 @@ import Link from './components/Link.vue'
 import Tabs from './components/Tabs.vue'
 import Sidebar from './components/Sidebar.vue'
 import Navbar from './components/Navbar.vue'
+import Card from './components/Card.vue'
 import IconButton from './components/IconButton.vue'
 import Switch from './components/Switch.vue'
 

diff --git a/examples/wrapper-components/vue-javascript/src/components/Card.vue b/examples/wrapper-components/vue-javascript/src/components/Card.vue
@@ -0,0 +1,29 @@
+
+
+<template>
+  <div>
+    <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 color="primary">Button</ifx-button>
+        <ifx-button color="secondary">Button</ifx-button>
+      </ifx-card-links>
+  </ifx-card>
+    <br />
+    <br />
+  </div>
+</template>
+
+<script setup>
+
+
+</script>
+
+
+