feat(core/card): add primary variant (#780)

Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>

packages/core/component-doc.json

@@ -105,7 +105,7 @@
         },
         {
           "name": "variant",
-          "type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"success\" | \"warning\"",
+          "type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"",
           "mutable": false,
           "attr": "variant",
           "reflectToAttr": false,
@@ -137,6 +137,10 @@
               "value": "notification",
               "type": "string"
             },
+            {
+              "value": "primary",
+              "type": "string"
+            },
             {
               "value": "success",
               "type": "string"
@@ -1017,7 +1021,7 @@
       "props": [
         {
           "name": "variant",
-          "type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"success\" | \"warning\"",
+          "type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"",
           "mutable": false,
           "attr": "variant",
           "reflectToAttr": false,
@@ -1049,6 +1053,10 @@
               "value": "notification",
               "type": "string"
             },
+            {
+              "value": "primary",
+              "type": "string"
+            },
             {
               "value": "success",
               "type": "string"
@@ -8607,7 +8615,7 @@
         },
         {
           "name": "variant",
-          "type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"success\" | \"warning\"",
+          "type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"",
           "mutable": false,
           "attr": "variant",
           "reflectToAttr": false,
@@ -8639,6 +8647,10 @@
               "value": "notification",
               "type": "string"
             },
+            {
+              "value": "primary",
+              "type": "string"
+            },
             {
               "value": "success",
               "type": "string"

packages/core/src/components/action-card/action-card.scss

@@ -88,6 +88,14 @@
   ix-card.card-neutral:active {
     --ix-card-background: var(--theme-color-neutral--active);
   }
+
+  ix-card.card-primary:hover {
+    --ix-card-background: var(--theme-color-primary--hover);
+  }
+
+  ix-card.card-primary:active {
+    --ix-card-background: var(--theme-color-primary--active);
+  }
 }
 
 :host(:hover) {
@@ -122,6 +130,10 @@
   ix-card.card-neutral:hover {
     --ix-card-background: var(--theme-color-neutral--hover);
   }
+
+  ix-card.card-primary:hover {
+    --ix-card-background: var(--theme-color-primary--hover);
+  }
 }
 
 :host(:active) {
@@ -156,6 +168,10 @@
   ix-card.card-neutral:active {
     --ix-card-background: var(--theme-color-neutral--active);
   }
+
+  ix-card.card-primary:active {
+    --ix-card-background: var(--theme-color-primary--active);
+  }
 }
 
 :host(.selected) {
@@ -194,4 +210,8 @@
   ix-card.card-neutral {
     --ix-card-background: var(--theme-color-neutral--active);
   }
+
+  ix-card.card-primary {
+    --ix-card-background: var(--theme-color-primary--active);
+  }
 }

packages/core/src/components/blind/blind.tsx

@@ -21,7 +21,7 @@ import anime from 'animejs';
 import { CardVariant } from '../card/card';
 import { a11yBoolean } from '../utils/a11y';
 
-export type BlindVariant = CardVariant | 'primary' | 'outline';
+export type BlindVariant = CardVariant | 'outline';
 
 let sequentialInstanceId = 0;
 

packages/core/src/components/card/card.scss

@@ -80,6 +80,11 @@
   color: var(--theme-color-neutral--contrast);
 }
 
+:host(.card-primary) {
+  --ix-card-background: var(--theme-color-primary);
+  color: var(--theme-color-neutral--contrast);
+}
+
 :host(:not(.card-insight)) {
   --ix-card-border-color: transparent;
 }

packages/core/src/components/card/card.tsx

@@ -8,7 +8,8 @@ export type CardVariant =
   | 'warning'
   | 'info'
   | 'neutral'
-  | 'success';
+  | 'success'
+  | 'primary';
 
 /**
  * @since 1.6.0

packages/core/src/components/push-card/push-card.scss

@@ -56,6 +56,10 @@
   ix-card.card-neutral:hover {
     --ix-card-background: var(--theme-color-neutral--hover);
   }
+
+  ix-card.card-primary:hover {
+    --ix-card-background: var(--theme-color-primary--hover);
+  }
 }
 
 :host(:active) {
@@ -90,4 +94,8 @@
   ix-card.card-neutral:active {
     --ix-card-background: var(--theme-color-neutral--active);
   }
+
+  ix-card.card-primary:active {
+    --ix-card-background: var(--theme-color-primary--active);
+  }
 }

packages/core/src/tests/action-card/basic/index.html

@@ -21,51 +21,57 @@
   <body>
     <ix-action-card
       icon="refresh"
-      heading="Scan forn new devices"
+      heading="Scan for new devices"
       subheading="Secondary text"
     ></ix-action-card>
     <ix-action-card
       icon="refresh"
-      heading="Scan forn new devices"
+      heading="Scan for new devices"
       subheading="Secondary text"
       variant="notification"
     ></ix-action-card>
     <ix-action-card
       icon="refresh"
-      heading="Scan forn new devices"
+      heading="Scan for new devices"
       subheading="Secondary text"
       variant="alarm"
     ></ix-action-card>
     <ix-action-card
       icon="refresh"
-      heading="Scan forn new devices"
+      heading="Scan for new devices"
       subheading="Secondary text"
       variant="critical"
     ></ix-action-card>
     <ix-action-card
       icon="refresh"
-      heading="Scan forn new devices"
+      heading="Scan for new devices"
       subheading="Secondary text"
       variant="warning"
     ></ix-action-card>
     <ix-action-card
       icon="refresh"
-      heading="Scan forn new devices"
+      heading="Scan for new devices"
       subheading="Secondary text"
       variant="info"
     ></ix-action-card>
     <ix-action-card
       icon="refresh"
-      heading="Scan forn new devices"
+      heading="Scan for new devices"
       subheading="Secondary text"
       variant="neutral"
     ></ix-action-card>
     <ix-action-card
       icon="refresh"
-      heading="Scan forn new devices"
+      heading="Scan for new devices"
       subheading="Secondary text"
       variant="success"
     ></ix-action-card>
+    <ix-action-card
+      icon="refresh"
+      heading="Scan for new devices"
+      subheading="Secondary text"
+      variant="primary"
+    ></ix-action-card>
     <ix-action-card>
       <div class="d-flex flex-column align-items-center" style="color: #ff00ff">
         <ix-icon name="refresh"></ix-icon>

packages/core/src/tests/action-card/selected/index.html

@@ -22,58 +22,65 @@
     <ix-action-card
       selected
       icon="refresh"
-      heading="Scan forn new devices"
+      heading="Scan for new devices"
       subheading="Secondary text"
     ></ix-action-card>
     <ix-action-card
       selected
       icon="refresh"
-      heading="Scan forn new devices"
+      heading="Scan for new devices"
       subheading="Secondary text"
       variant="notification"
     ></ix-action-card>
     <ix-action-card
       selected
       icon="refresh"
-      heading="Scan forn new devices"
+      heading="Scan for new devices"
       subheading="Secondary text"
       variant="alarm"
     ></ix-action-card>
     <ix-action-card
       selected
       icon="refresh"
-      heading="Scan forn new devices"
+      heading="Scan for new devices"
       subheading="Secondary text"
       variant="critical"
     ></ix-action-card>
     <ix-action-card
       selected
       icon="refresh"
-      heading="Scan forn new devices"
+      heading="Scan for new devices"
       subheading="Secondary text"
       variant="warning"
     ></ix-action-card>
     <ix-action-card
       selected
       icon="refresh"
-      heading="Scan forn new devices"
+      heading="Scan for new devices"
       subheading="Secondary text"
       variant="info"
     ></ix-action-card>
     <ix-action-card
       selected
       icon="refresh"
-      heading="Scan forn new devices"
+      heading="Scan for new devices"
       subheading="Secondary text"
       variant="neutral"
     ></ix-action-card>
     <ix-action-card
       selected
       icon="refresh"
-      heading="Scan forn new devices"
+      heading="Scan for new devices"
       subheading="Secondary text"
       variant="success"
     ></ix-action-card>
+    <ix-action-card
+      selected
+      icon="refresh"
+      heading="Scan for new devices"
+      subheading="Secondary text"
+      variant="primary"
+    ></ix-action-card>
     <ix-action-card selected>
       <div class="d-flex flex-column align-items-center" style="color: #ff00ff">
         <ix-icon name="refresh"></ix-icon>

packages/core/src/tests/card-list/basic/index.html

@@ -82,6 +82,13 @@
         subheading="Subheading"
         variant="neutral"
       ></ix-push-card>
+      <ix-push-card
+        icon="bulb"
+        notification="99"
+        heading="Heading content"
+        subheading="Subheading"
+        variant="primary"
+      ></ix-push-card>
     </ix-card-list>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>

packages/core/src/tests/card-list/card-list.e2e.ts

@@ -14,20 +14,26 @@ regressionTest.describe('card-list: basic', () => {
   regressionTest('should not have visual regressions', async ({ page }) => {
     await page.goto('card-list/basic');
     await page.waitForTimeout(1000);
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    expect(
+      await page.screenshot({ fullPage: true, animations: 'disabled' })
+    ).toMatchSnapshot();
   });
 
   regressionTest('layout scrolling', async ({ page }) => {
     await page.goto('card-list/layout-scroll');
     await page.waitForTimeout(1000);
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    expect(
+      await page.screenshot({ fullPage: true, animations: 'disabled' })
+    ).toMatchSnapshot();
   });
 
   regressionTest('layout scrolling end', async ({ page }) => {
     await page.goto('card-list/layout-scroll');
 
     await page.locator('#end').scrollIntoViewIfNeeded();
     await page.waitForTimeout(1000);
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    expect(
+      await page.screenshot({ fullPage: true, animations: 'disabled' })
+    ).toMatchSnapshot();
   });
 });

packages/core/src/tests/card-list/layout-scroll/index.html

@@ -111,6 +111,13 @@
         subheading="Subheading"
         variant="success"
       ></ix-push-card>
+      <ix-push-card
+        icon="bulb"
+        notification="99"
+        heading="Heading content"
+        subheading="Subheading"
+        variant="primary"
+      ></ix-push-card>
     </ix-card-list>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>

packages/core/src/tests/push-card/basic/index.html

@@ -104,6 +104,15 @@
       >
         <ix-topography format="h2">Some Content</ix-topography>
       </ix-push-card>
+      <ix-push-card
+        icon="bulb"
+        notification="99"
+        heading="Heading content"
+        subheading="Subheading"
+        variant="primary"
+      >
+        <ix-topography format="h2">Some Content</ix-topography>
+      </ix-push-card>
     </div>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>

packages/core/src/tests/push-card/push-card.e2e.ts

@@ -13,7 +13,9 @@ import { regressionTest } from '@utils/test';
 regressionTest.describe('push-card: basic', () => {
   regressionTest('should not have visual regressions', async ({ page }) => {
     await page.goto('push-card/basic');
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    expect(
+      await page.screenshot({ fullPage: true, animations: 'disabled' })
+    ).toMatchSnapshot();
   });
 
   regressionTest('should click accordion', async ({ page }) => {
@@ -27,6 +29,8 @@ regressionTest.describe('push-card: basic', () => {
     // Animation time
     await page.waitForTimeout(500);
 
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    expect(
+      await page.screenshot({ fullPage: true, animations: 'disabled' })
+    ).toMatchSnapshot();
   });
 });