docs(core/card): show how to build push card that can not be expanded (…

…#1199)
siemens · Apr 15, 2024 · 716ed56 · 716ed56
1 parent 5b4e96e
commit 716ed56
Show file tree

Hide file tree

Showing 7 changed files with 161 additions and 43 deletions.
diff --git a/packages/angular-test-app/src/preview-examples/card.html b/packages/angular-test-app/src/preview-examples/card.html
@@ -12,3 +12,13 @@
     <ix-typography format="h1">123</ix-typography>
   </ix-card-content>
 </ix-card>
+<ix-card>
+  <ix-card-content>
+    <ix-card-title>
+      <ix-icon class="icon" name="bulb" size="32"></ix-icon>
+      <span class="notification">99</span>
+    </ix-card-title>
+    <ix-typography color="std" format="h4"> Heading content </ix-typography>
+    <ix-typography color="std">Subheading</ix-typography>
+  </ix-card-content>
+</ix-card>
diff --git a/packages/angular-test-app/src/preview-examples/card.ts b/packages/angular-test-app/src/preview-examples/card.ts
@@ -14,19 +14,40 @@ import { Component } from '@angular/core';
   templateUrl: './card.html',
   styles: [
     `
+      :host {
+        display: flex;
+      }
+
+      .card-example {
+        display: flex;
+      }
+
       ix-card {
         height: 15.75rem;
         width: 19.875rem;
+        cursor: pointer;
+      }
+
+      ix-card:first-of-type {
         background-image: url("data:image/svg+xml,%3Csvg width='318' height='86' viewBox='0 0 318 86' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_970_13027)'%3E%3Cpath d='M35.4501 66.5689L0 86H318V21L267.317 28.5806C265.662 28.8282 264.06 29.3508 262.578 30.127L245.842 38.8902C244.608 39.536 243.291 40.007 241.928 40.2895L215.209 45.8274C213.928 46.0928 212.618 46.1896 211.312 46.1153L180 44.3334C178.238 44.2331 176.473 44.4444 174.785 44.9575L144.989 54.0147C143.575 54.4446 142.105 54.6631 140.627 54.6631H111.372C109.394 54.6631 107.436 55.0543 105.61 55.8142L80.6845 66.1855C78.4653 67.1089 76.0567 67.4855 73.6615 67.2835L43.9203 64.7756C40.982 64.5279 38.0359 65.1516 35.4501 66.5689Z' fill='url(%23paint0_linear_970_13027)' shape-rendering='crispEdges'/%3E%3Cpath d='M-0.480655 85.1231L0 87H318H319V86V21V19.8393L317.852 20.011L267.169 27.5916C265.404 27.8557 263.695 28.4132 262.114 29.2411L245.378 38.0043C244.227 38.6071 242.997 39.0466 241.725 39.3103L215.006 44.8482C213.81 45.096 212.588 45.1863 211.369 45.1169L180.057 43.335C178.178 43.2281 176.295 43.4534 174.494 44.0008L144.699 53.0579C143.379 53.4592 142.007 53.6631 140.627 53.6631H111.372C109.262 53.6631 107.173 54.0804 105.225 54.8909L80.3003 65.2622C78.2291 66.1241 75.981 66.4756 73.7456 66.2871L44.0044 63.7792C40.8702 63.5149 37.7276 64.1802 34.9695 65.692L-0.480655 85.1231Z' stroke='%2300FFB9' stroke-width='2' shape-rendering='crispEdges'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_970_13027' x='-17.9613' y='0.678711' width='354.961' height='103.321' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='-1'/%3E%3CfeGaussianBlur stdDeviation='8.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 1 0 0 0 0 0.72549 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_970_13027'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_970_13027' result='shape'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_970_13027' x1='264.817' y1='21' x2='264.817' y2='86' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2300FFB9' stop-opacity='0.4'/%3E%3Cstop offset='1' stop-color='%2300FFB9' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
         background-position: bottom;
         background-repeat: no-repeat;
-        cursor: pointer;
+        margin-inline-end: 1.5rem;
       }
-      ix-typography:last-of-type {
+
+      ix-card:first-of-type ix-typography:last-of-type {
         position: absolute;
         bottom: 1rem;
         right: 1rem;
       }
+
+      .notification {
+        font-size: 2.5rem;
+      }
+
+      .icon {
+        transform: scale(1.25);
+      }
     `,
   ],
 })

diff --git a/packages/html-test-app/src/preview-examples/card.html b/packages/html-test-app/src/preview-examples/card.html
@@ -11,26 +11,42 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite App</title>
     <style>
+      .card-example {
+        display: flex;
+      }
+
       ix-card {
         height: 15.75rem;
         width: 19.875rem;
+        cursor: pointer;
+      }
+
+      ix-card:first-of-type {
         background-image: url("data:image/svg+xml,%3Csvg width='318' height='86' viewBox='0 0 318 86' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_970_13027)'%3E%3Cpath d='M35.4501 66.5689L0 86H318V21L267.317 28.5806C265.662 28.8282 264.06 29.3508 262.578 30.127L245.842 38.8902C244.608 39.536 243.291 40.007 241.928 40.2895L215.209 45.8274C213.928 46.0928 212.618 46.1896 211.312 46.1153L180 44.3334C178.238 44.2331 176.473 44.4444 174.785 44.9575L144.989 54.0147C143.575 54.4446 142.105 54.6631 140.627 54.6631H111.372C109.394 54.6631 107.436 55.0543 105.61 55.8142L80.6845 66.1855C78.4653 67.1089 76.0567 67.4855 73.6615 67.2835L43.9203 64.7756C40.982 64.5279 38.0359 65.1516 35.4501 66.5689Z' fill='url(%23paint0_linear_970_13027)' shape-rendering='crispEdges'/%3E%3Cpath d='M-0.480655 85.1231L0 87H318H319V86V21V19.8393L317.852 20.011L267.169 27.5916C265.404 27.8557 263.695 28.4132 262.114 29.2411L245.378 38.0043C244.227 38.6071 242.997 39.0466 241.725 39.3103L215.006 44.8482C213.81 45.096 212.588 45.1863 211.369 45.1169L180.057 43.335C178.178 43.2281 176.295 43.4534 174.494 44.0008L144.699 53.0579C143.379 53.4592 142.007 53.6631 140.627 53.6631H111.372C109.262 53.6631 107.173 54.0804 105.225 54.8909L80.3003 65.2622C78.2291 66.1241 75.981 66.4756 73.7456 66.2871L44.0044 63.7792C40.8702 63.5149 37.7276 64.1802 34.9695 65.692L-0.480655 85.1231Z' stroke='%2300FFB9' stroke-width='2' shape-rendering='crispEdges'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_970_13027' x='-17.9613' y='0.678711' width='354.961' height='103.321' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='-1'/%3E%3CfeGaussianBlur stdDeviation='8.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 1 0 0 0 0 0.72549 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_970_13027'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_970_13027' result='shape'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_970_13027' x1='264.817' y1='21' x2='264.817' y2='86' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2300FFB9' stop-opacity='0.4'/%3E%3Cstop offset='1' stop-color='%2300FFB9' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
         background-position: bottom;
         background-repeat: no-repeat;
-        cursor: pointer;
+        margin-inline-end: 1.5rem;
       }
 
-      ix-typography:last-of-type {
+      ix-card:first-of-type ix-typography:last-of-type {
         position: absolute;
         bottom: 1rem;
         right: 1rem;
       }
+
+      .notification {
+        font-size: 2.5rem;
+      }
+
+      .icon {
+        transform: scale(1.25);
+      }
     </style>
   </head>
   <body>
     <!-- Preview code -->
     <div class="card-example">
-      <ix-card variant="insight">
+      <ix-card id="card-a" variant="insight">
         <ix-card-content>
           <ix-icon name="capacity"></ix-icon>
           <ix-typography bold>Number of components</ix-typography>
@@ -44,6 +60,18 @@
           <ix-typography format="h1">123</ix-typography>
         </ix-card-content>
       </ix-card>
+      <ix-card>
+        <ix-card-content>
+          <ix-card-title>
+            <ix-icon class="icon" name="bulb" size="32"></ix-icon>
+            <span class="notification">99</span>
+          </ix-card-title>
+          <ix-typography color="std" format="h4">
+            Heading content
+          </ix-typography>
+          <ix-typography color="std">Subheading</ix-typography>
+        </ix-card-content>
+      </ix-card>
     </div>
 
     <script type="module">

diff --git a/packages/react-test-app/src/preview-examples/card.tsx b/packages/react-test-app/src/preview-examples/card.tsx
@@ -10,26 +10,42 @@
 import { IxCard, IxCardContent, IxIcon, IxTypography } from '@siemens/ix-react';
 import React from 'react';
 import './styles/card.css';
+import { IxCardTitle } from '@siemens/ix-react';
 
 export default () => {
   return (
-    <IxCard variant="insight" onClick={console.log}>
-      <IxCardContent>
-        <IxIcon name="capacity"></IxIcon>
-        <IxTypography bold>Number of components</IxTypography>
-        <IxTypography>
-          Vanilla JavaScript
-          <br />
-          Angular
-          <br />
-          Blazor
-          <br />
-          React
-          <br />
-          Vue.js
-        </IxTypography>
-        <IxTypography format="h1">123</IxTypography>
-      </IxCardContent>
-    </IxCard>
+    <div className="card-example">
+      <IxCard variant="insight" onClick={console.log}>
+        <IxCardContent>
+          <IxIcon name="capacity"></IxIcon>
+          <IxTypography bold>Number of components</IxTypography>
+          <IxTypography>
+            Vanilla JavaScript
+            <br />
+            Angular
+            <br />
+            Blazor
+            <br />
+            React
+            <br />
+            Vue.js
+          </IxTypography>
+          <IxTypography format="h1">123</IxTypography>
+        </IxCardContent>
+      </IxCard>
+      <IxCard variant="insight" onClick={console.log}>
+        <IxCardContent>
+          <IxCardTitle>
+            <IxIcon
+              style={{ transform: 'scale(1.25)' }}
+              name="bulb"
+              size="32"
+            ></IxIcon>
+            <span style={{ fontSize: '2.5rem' }}>99</span>
+          </IxCardTitle>
+          <IxTypography color="std">Subheading</IxTypography>
+        </IxCardContent>
+      </IxCard>
+    </div>
   );
 };
diff --git a/packages/react-test-app/src/preview-examples/styles/card.css b/packages/react-test-app/src/preview-examples/styles/card.css
@@ -6,16 +6,24 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
- ix-card {
+.card-example {
+  display: flex;
+}
+
+ix-card {
   height: 15.75rem;
   width: 19.875rem;
+  cursor: pointer;
+}
+
+ix-card:first-of-type {
   background-image: url("data:image/svg+xml,%3Csvg width='318' height='86' viewBox='0 0 318 86' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_970_13027)'%3E%3Cpath d='M35.4501 66.5689L0 86H318V21L267.317 28.5806C265.662 28.8282 264.06 29.3508 262.578 30.127L245.842 38.8902C244.608 39.536 243.291 40.007 241.928 40.2895L215.209 45.8274C213.928 46.0928 212.618 46.1896 211.312 46.1153L180 44.3334C178.238 44.2331 176.473 44.4444 174.785 44.9575L144.989 54.0147C143.575 54.4446 142.105 54.6631 140.627 54.6631H111.372C109.394 54.6631 107.436 55.0543 105.61 55.8142L80.6845 66.1855C78.4653 67.1089 76.0567 67.4855 73.6615 67.2835L43.9203 64.7756C40.982 64.5279 38.0359 65.1516 35.4501 66.5689Z' fill='url(%23paint0_linear_970_13027)' shape-rendering='crispEdges'/%3E%3Cpath d='M-0.480655 85.1231L0 87H318H319V86V21V19.8393L317.852 20.011L267.169 27.5916C265.404 27.8557 263.695 28.4132 262.114 29.2411L245.378 38.0043C244.227 38.6071 242.997 39.0466 241.725 39.3103L215.006 44.8482C213.81 45.096 212.588 45.1863 211.369 45.1169L180.057 43.335C178.178 43.2281 176.295 43.4534 174.494 44.0008L144.699 53.0579C143.379 53.4592 142.007 53.6631 140.627 53.6631H111.372C109.262 53.6631 107.173 54.0804 105.225 54.8909L80.3003 65.2622C78.2291 66.1241 75.981 66.4756 73.7456 66.2871L44.0044 63.7792C40.8702 63.5149 37.7276 64.1802 34.9695 65.692L-0.480655 85.1231Z' stroke='%2300FFB9' stroke-width='2' shape-rendering='crispEdges'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_970_13027' x='-17.9613' y='0.678711' width='354.961' height='103.321' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='-1'/%3E%3CfeGaussianBlur stdDeviation='8.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 1 0 0 0 0 0.72549 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_970_13027'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_970_13027' result='shape'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_970_13027' x1='264.817' y1='21' x2='264.817' y2='86' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2300FFB9' stop-opacity='0.4'/%3E%3Cstop offset='1' stop-color='%2300FFB9' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
   background-position: bottom;
   background-repeat: no-repeat;
-  cursor: pointer;
+  margin-inline-end: 1.5rem;
 }
 
-ix-typography:last-of-type {
+ix-card:first-of-type ix-typography:last-of-type {
   position: absolute;
   bottom: 1rem;
   right: 1rem;

diff --git a/packages/vue-test-app/src/Root.vue b/packages/vue-test-app/src/Root.vue
@@ -27,6 +27,7 @@ import Breadcrumb from './preview-examples/breadcrumb.vue';
 import ButtonGroup from './preview-examples/button-group.vue';
 import ButtonWithIcon from './preview-examples/button-with-icon.vue';
 import Buttons from './preview-examples/buttons.vue';
+import Card from './preview-examples/card.vue';
 import CheckboxIndeterminate from './preview-examples/checkbox-indeterminate.vue';
 import Checkbox from './preview-examples/checkbox.vue';
 import Chip from './preview-examples/chip.vue';
@@ -121,6 +122,7 @@ const routes: any = {
   '/preview/application-header': ApplicationHeader,
   '/preview/application-breakpoints': ApplicationBreakpoints,
   '/preview/application-app-switch': ApplicationAppSwitch,
+  '/preview/card': Card,
   '/preview/content': content,
   '/preview/checkbox': Checkbox,
   '/preview/checkbox-indeterminate': CheckboxIndeterminate,

diff --git a/packages/vue-test-app/src/preview-examples/card.vue b/packages/vue-test-app/src/preview-examples/card.vue
@@ -8,42 +8,75 @@
 -->
 
 <script setup lang="ts">
-import { IxCard, IxCardContent, IxIcon, IxTypography } from '@siemens/ix-vue';
+import {
+  IxCard,
+  IxCardContent,
+  IxCardTitle,
+  IxIcon,
+  IxTypography,
+} from '@siemens/ix-vue';
 const onClick = (event: Event) => {
   console.log(event);
 };
 </script>
 
 <style scoped>
+.card-example {
+  display: flex;
+}
+
 ix-card {
   height: 15.75rem;
   width: 19.875rem;
+  cursor: pointer;
+}
+
+ix-card:first-of-type {
   background-image: url("data:image/svg+xml,%3Csvg width='318' height='86' viewBox='0 0 318 86' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg filter='url(%23filter0_d_970_13027)'%3E%3Cpath d='M35.4501 66.5689L0 86H318V21L267.317 28.5806C265.662 28.8282 264.06 29.3508 262.578 30.127L245.842 38.8902C244.608 39.536 243.291 40.007 241.928 40.2895L215.209 45.8274C213.928 46.0928 212.618 46.1896 211.312 46.1153L180 44.3334C178.238 44.2331 176.473 44.4444 174.785 44.9575L144.989 54.0147C143.575 54.4446 142.105 54.6631 140.627 54.6631H111.372C109.394 54.6631 107.436 55.0543 105.61 55.8142L80.6845 66.1855C78.4653 67.1089 76.0567 67.4855 73.6615 67.2835L43.9203 64.7756C40.982 64.5279 38.0359 65.1516 35.4501 66.5689Z' fill='url(%23paint0_linear_970_13027)' shape-rendering='crispEdges'/%3E%3Cpath d='M-0.480655 85.1231L0 87H318H319V86V21V19.8393L317.852 20.011L267.169 27.5916C265.404 27.8557 263.695 28.4132 262.114 29.2411L245.378 38.0043C244.227 38.6071 242.997 39.0466 241.725 39.3103L215.006 44.8482C213.81 45.096 212.588 45.1863 211.369 45.1169L180.057 43.335C178.178 43.2281 176.295 43.4534 174.494 44.0008L144.699 53.0579C143.379 53.4592 142.007 53.6631 140.627 53.6631H111.372C109.262 53.6631 107.173 54.0804 105.225 54.8909L80.3003 65.2622C78.2291 66.1241 75.981 66.4756 73.7456 66.2871L44.0044 63.7792C40.8702 63.5149 37.7276 64.1802 34.9695 65.692L-0.480655 85.1231Z' stroke='%2300FFB9' stroke-width='2' shape-rendering='crispEdges'/%3E%3C/g%3E%3Cdefs%3E%3Cfilter id='filter0_d_970_13027' x='-17.9613' y='0.678711' width='354.961' height='103.321' filterUnits='userSpaceOnUse' color-interpolation-filters='sRGB'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeColorMatrix in='SourceAlpha' type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0' result='hardAlpha'/%3E%3CfeOffset dy='-1'/%3E%3CfeGaussianBlur stdDeviation='8.5'/%3E%3CfeComposite in2='hardAlpha' operator='out'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 1 0 0 0 0 0.72549 0 0 0 0.2 0'/%3E%3CfeBlend mode='normal' in2='BackgroundImageFix' result='effect1_dropShadow_970_13027'/%3E%3CfeBlend mode='normal' in='SourceGraphic' in2='effect1_dropShadow_970_13027' result='shape'/%3E%3C/filter%3E%3ClinearGradient id='paint0_linear_970_13027' x1='264.817' y1='21' x2='264.817' y2='86' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2300FFB9' stop-opacity='0.4'/%3E%3Cstop offset='1' stop-color='%2300FFB9' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
   background-position: bottom;
   background-repeat: no-repeat;
-  cursor: pointer;
+  margin-inline-end: 1.5rem;
 }
 
-ix-typography:last-of-type {
+ix-card:first-of-type ix-typography:last-of-type {
   position: absolute;
   bottom: 1rem;
   right: 1rem;
 }
+
+.notification {
+  font-size: 2.5rem;
+}
+
+.icon {
+  transform: scale(1.25);
+}
 </style>
 
 <template>
-  <IxCard variant="insight" @click="onClick">
-    <IxCardContent>
-      <IxIcon name="capacity"></IxIcon>
-      <IxTypography bold>Number of components</IxTypography>
-      <IxTypography>
-        Vanilla JavaScript<br />
-        Angular<br />
-        Blazor<br />
-        React<br />
-        Vue.js
-      </IxTypography>
-      <IxTypography format="h1">123</IxTypography>
-    </IxCardContent>
-  </IxCard>
+  <div class="card-example">
+    <IxCard variant="insight" @click="onClick">
+      <IxCardContent>
+        <IxIcon name="capacity"></IxIcon>
+        <IxTypography bold>Number of components</IxTypography>
+        <IxTypography>
+          Vanilla JavaScript<br />
+          Angular<br />
+          Blazor<br />
+          React<br />
+          Vue.js
+        </IxTypography>
+        <IxTypography format="h1">123</IxTypography>
+      </IxCardContent>
+    </IxCard>
+    <IxCard variant="insight" @click="onClick">
+      <IxCardContent>
+        <IxCardTitle>
+          <IxIcon class="icon" name="bulb" size="32"></IxIcon>
+          <span class="notification">99</span>
+        </IxCardTitle>
+        <IxTypography color="std">Subheading</IxTypography>
+      </IxCardContent>
+    </IxCard>
+  </div>
 </template>