fix(core/push-card): adjust colors and v3 adaptions (#1317)

Co-authored-by: Daniel Leroux <[email protected]>
siemens · Aug 13, 2024 · c8b2d3c · c8b2d3c
1 parent bf48208
commit c8b2d3c
Show file tree

Hide file tree

Showing 8 changed files with 98 additions and 28 deletions.
diff --git a/.changeset/giant-tigers-decide.md b/.changeset/giant-tigers-decide.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix': minor
+---
+
+feat(core/push-card): add alternative card types
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -125,10 +125,10 @@
         },
         {
           "name": "variant",
-          "type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"",
+          "type": "\"alarm\" | \"critical\" | \"filled\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"",
           "complexType": {
             "original": "ActionCardVariant",
-            "resolved": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"",
+            "resolved": "\"alarm\" | \"critical\" | \"filled\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"",
             "references": {
               "ActionCardVariant": {
                 "location": "local",
@@ -141,8 +141,14 @@
           "attr": "variant",
           "reflectToAttr": false,
           "docs": "Card variant",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "variant \"insight\" and \"notification\" will be removed in 3.0. Use \"outline\" or \"filled\" instead."
+            }
+          ],
           "default": "'insight'",
+          "deprecation": "variant \"insight\" and \"notification\" will be removed in 3.0. Use \"outline\" or \"filled\" instead.",
           "values": [
             {
               "value": "alarm",
@@ -152,6 +158,10 @@
               "value": "critical",
               "type": "string"
             },
+            {
+              "value": "filled",
+              "type": "string"
+            },
             {
               "value": "info",
               "type": "string"
@@ -168,6 +178,10 @@
               "value": "notification",
               "type": "string"
             },
+            {
+              "value": "outline",
+              "type": "string"
+            },
             {
               "value": "primary",
               "type": "string"
@@ -876,10 +890,10 @@
         },
         {
           "name": "variant",
-          "type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"",
+          "type": "\"alarm\" | \"critical\" | \"filled\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"",
           "complexType": {
             "original": "BlindVariant",
-            "resolved": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"",
+            "resolved": "\"alarm\" | \"critical\" | \"filled\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"",
             "references": {
               "BlindVariant": {
                 "location": "local",
@@ -908,6 +922,10 @@
               "value": "critical",
               "type": "string"
             },
+            {
+              "value": "filled",
+              "type": "string"
+            },
             {
               "value": "info",
               "type": "string"
@@ -1528,10 +1546,10 @@
         },
         {
           "name": "variant",
-          "type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"",
+          "type": "\"alarm\" | \"critical\" | \"filled\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"",
           "complexType": {
             "original": "CardVariant",
-            "resolved": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"",
+            "resolved": "\"alarm\" | \"critical\" | \"filled\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"",
             "references": {
               "CardVariant": {
                 "location": "local",
@@ -1544,8 +1562,14 @@
           "attr": "variant",
           "reflectToAttr": false,
           "docs": "Card variant",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "variant insight and notification will be removed in 3.0. Use 'outline' or 'filled' instead."
+            }
+          ],
           "default": "'insight'",
+          "deprecation": "variant insight and notification will be removed in 3.0. Use 'outline' or 'filled' instead.",
           "values": [
             {
               "value": "alarm",
@@ -1555,6 +1579,10 @@
               "value": "critical",
               "type": "string"
             },
+            {
+              "value": "filled",
+              "type": "string"
+            },
             {
               "value": "info",
               "type": "string"
@@ -1571,6 +1599,10 @@
               "value": "notification",
               "type": "string"
             },
+            {
+              "value": "outline",
+              "type": "string"
+            },
             {
               "value": "primary",
               "type": "string"
@@ -12691,7 +12723,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -12734,7 +12766,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -12755,15 +12787,15 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
           "name": "variant",
-          "type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"",
+          "type": "\"alarm\" | \"critical\" | \"filled\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"",
           "complexType": {
             "original": "PushCardVariant",
-            "resolved": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"",
+            "resolved": "\"alarm\" | \"critical\" | \"filled\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"",
             "references": {
               "PushCardVariant": {
                 "location": "local",
@@ -12776,8 +12808,14 @@
           "attr": "variant",
           "reflectToAttr": false,
           "docs": "Card variant",
-          "docsTags": [],
+          "docsTags": [
+            {
+              "name": "deprecated",
+              "text": "variant \"insight\" and \"notification\" will be removed in 3.0. Use \"outline\" or \"filled\" instead."
+            }
+          ],
           "default": "'insight'",
+          "deprecation": "variant \"insight\" and \"notification\" will be removed in 3.0. Use \"outline\" or \"filled\" instead.",
           "values": [
             {
               "value": "alarm",
@@ -12787,6 +12825,10 @@
               "value": "critical",
               "type": "string"
             },
+            {
+              "value": "filled",
+              "type": "string"
+            },
             {
               "value": "info",
               "type": "string"
@@ -12803,6 +12845,10 @@
               "value": "notification",
               "type": "string"
             },
+            {
+              "value": "outline",
+              "type": "string"
+            },
             {
               "value": "primary",
               "type": "string"
@@ -17568,7 +17614,7 @@
   ],
   "typeLibrary": {
     "src/components/card/card.tsx::CardVariant": {
-      "declaration": "export type CardVariant =\n  | 'insight'\n  | 'notification'\n  | 'alarm'\n  | 'critical'\n  | 'warning'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'primary';",
+      "declaration": "export type CardVariant =\n  | 'insight'\n  | 'notification'\n  | 'alarm'\n  | 'critical'\n  | 'warning'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'primary'\n  | 'outline'\n  | 'filled';",
       "docstring": "",
       "path": "src/components/card/card.tsx"
     },
@@ -17593,7 +17639,7 @@
       "path": "src/components/typography/typography.tsx"
     },
     "src/components/action-card/action-card.tsx::ActionCardVariant": {
-      "declaration": "export type CardVariant =\n  | 'insight'\n  | 'notification'\n  | 'alarm'\n  | 'critical'\n  | 'warning'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'primary';",
+      "declaration": "export type CardVariant =\n  | 'insight'\n  | 'notification'\n  | 'alarm'\n  | 'critical'\n  | 'warning'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'primary'\n  | 'outline'\n  | 'filled';",
       "docstring": "",
       "path": "src/components/action-card/action-card.tsx"
     },
@@ -17723,7 +17769,7 @@
       "path": "src/components/pane/pane.tsx"
     },
     "src/components/push-card/push-card.tsx::PushCardVariant": {
-      "declaration": "export type CardVariant =\n  | 'insight'\n  | 'notification'\n  | 'alarm'\n  | 'critical'\n  | 'warning'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'primary';",
+      "declaration": "export type CardVariant =\n  | 'insight'\n  | 'notification'\n  | 'alarm'\n  | 'critical'\n  | 'warning'\n  | 'info'\n  | 'neutral'\n  | 'success'\n  | 'primary'\n  | 'outline'\n  | 'filled';",
       "docstring": "",
       "path": "src/components/push-card/push-card.tsx"
     },

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -110,6 +110,7 @@ export namespace Components {
         "subheading": string;
         /**
           * Card variant
+          * @deprecated variant "insight" and "notification" will be removed in 3.0. Use "outline" or "filled" instead.
          */
         "variant": ActionCardVariant;
     }
@@ -292,6 +293,7 @@ export namespace Components {
         "selected": boolean;
         /**
           * Card variant
+          * @deprecated variant insight and notification will be removed in 3.0. Use 'outline' or 'filled' instead.
          */
         "variant": CardVariant;
     }
@@ -1827,21 +1829,22 @@ export namespace Components {
         /**
           * Card heading
          */
-        "heading": string;
+        "heading"?: string;
         /**
           * Card icon
          */
         "icon": string | undefined;
         /**
           * Card KPI value
          */
-        "notification": string;
+        "notification"?: string;
         /**
           * Card subheading
          */
-        "subheading": string;
+        "subheading"?: string;
         /**
           * Card variant
+          * @deprecated variant "insight" and "notification" will be removed in 3.0. Use "outline" or "filled" instead.
          */
         "variant": PushCardVariant;
     }
@@ -4132,6 +4135,7 @@ declare namespace LocalJSX {
         "subheading"?: string;
         /**
           * Card variant
+          * @deprecated variant "insight" and "notification" will be removed in 3.0. Use "outline" or "filled" instead.
          */
         "variant"?: ActionCardVariant;
     }
@@ -4327,6 +4331,7 @@ declare namespace LocalJSX {
         "selected"?: boolean;
         /**
           * Card variant
+          * @deprecated variant insight and notification will be removed in 3.0. Use 'outline' or 'filled' instead.
          */
         "variant"?: CardVariant;
     }
@@ -6023,6 +6028,7 @@ declare namespace LocalJSX {
         "subheading"?: string;
         /**
           * Card variant
+          * @deprecated variant "insight" and "notification" will be removed in 3.0. Use "outline" or "filled" instead.
          */
         "variant"?: PushCardVariant;
     }

diff --git a/packages/core/src/components/action-card/action-card.tsx b/packages/core/src/components/action-card/action-card.tsx
@@ -24,6 +24,7 @@ export type ActionCardVariant = CardVariant;
 export class IxActionCard {
   /**
    * Card variant
+   * @deprecated variant "insight" and "notification" will be removed in 3.0. Use "outline" or "filled" instead.
    */
   @Prop() variant: ActionCardVariant = 'insight';
 

diff --git a/packages/core/src/components/card-accordion/card-accordion.scss b/packages/core/src/components/card-accordion/card-accordion.scss
@@ -30,7 +30,14 @@
     background-color: var(--theme-color-component-1);
     align-items: center;
     justify-content: flex-start;
-    @include ghost-hover-pressed();
+
+    &:hover {
+      background: var(--theme-color-component-1--hover);
+    }
+
+    &:active {
+      background: var(--theme-color-component-1--active);
+    }
 
     @include focus-visible {
       outline: 1px solid var(--theme-color-focus-bdr);

diff --git a/packages/core/src/components/card/card.scss b/packages/core/src/components/card/card.scss
@@ -41,12 +41,12 @@
   }
 }
 
-:host(.card-insight) {
+:host(.card-insight), :host(.card-outline) {
   --ix-card-background: transparent;
   --ix-card-border-color: var(--theme-color-soft-bdr);
 }
 
-:host(.card-notification) {
+:host(.card-notification), :host(.card-filled) {
   --ix-card-background: var(--theme-color-component-1);
 }
 

diff --git a/packages/core/src/components/card/card.tsx b/packages/core/src/components/card/card.tsx
@@ -1,5 +1,6 @@
 import { Component, Element, h, Host, Prop } from '@stencil/core';
 
+//TODO(IX-1601): Remove insight, notification in 3.0
 export type CardVariant =
   | 'insight'
   | 'notification'
@@ -9,7 +10,9 @@ export type CardVariant =
   | 'info'
   | 'neutral'
   | 'success'
-  | 'primary';
+  | 'primary'
+  | 'outline'
+  | 'filled';
 
 /**
  * @since 1.6.0
@@ -24,6 +27,7 @@ export class Card {
 
   /**
    * Card variant
+   * @deprecated variant insight and notification will be removed in 3.0. Use 'outline' or 'filled' instead.
    */
   @Prop() variant: CardVariant = 'insight';
 

diff --git a/packages/core/src/components/push-card/push-card.tsx b/packages/core/src/components/push-card/push-card.tsx
@@ -30,20 +30,21 @@ export class PushCard {
   /**
    * Card KPI value
    */
-  @Prop() notification: string;
+  @Prop() notification?: string;
 
   /**
    * Card heading
    */
-  @Prop() heading: string;
+  @Prop() heading?: string;
 
   /**
    * Card subheading
    */
-  @Prop() subheading: string;
+  @Prop() subheading?: string;
 
   /**
    * Card variant
+   * @deprecated variant "insight" and "notification" will be removed in 3.0. Use "outline" or "filled" instead.
    */
   @Prop() variant: PushCardVariant = 'insight';
 
@@ -54,7 +55,7 @@ export class PushCard {
   @Prop() collapse: boolean = true;
 
   render() {
-    const color: TypographyColors =
+    const color: TypographyColors | undefined =
       this.variant === 'insight' || this.variant === 'notification'
         ? 'std'
         : undefined;