feat(core/card): add selection and mouse states (#1089)

siemens · Feb 15, 2024 · 6eb71c2 · 6eb71c2
1 parent 2f07aa0
commit 6eb71c2
Show file tree

Hide file tree

Showing 17 changed files with 338 additions and 277 deletions.
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -222,14 +222,14 @@ export declare interface IxButton extends Components.IxButton {}
 
 
 @ProxyCmp({
-  inputs: ['variant']
+  inputs: ['selected', 'variant']
 })
 @Component({
   selector: 'ix-card',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['variant'],
+  inputs: ['selected', 'variant'],
 })
 export class IxCard {
   protected el: HTMLElement;

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -1488,6 +1488,32 @@
         ]
       },
       "props": [
+        {
+          "name": "selected",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "selected",
+          "reflectToAttr": false,
+          "docs": "",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "2.1.0"
+            }
+          ],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "variant",
           "type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"primary\" | \"success\" | \"warning\"",

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -295,6 +295,10 @@ export namespace Components {
      * @since 1.6.0
      */
     interface IxCard {
+        /**
+          * @since 2.1.0
+         */
+        "selected": boolean;
         /**
           * Card variant
          */
@@ -4266,6 +4270,10 @@ declare namespace LocalJSX {
      * @since 1.6.0
      */
     interface IxCard {
+        /**
+          * @since 2.1.0
+         */
+        "selected"?: boolean;
         /**
           * Card variant
          */

diff --git a/packages/core/src/components/action-card/action-card.scss b/packages/core/src/components/action-card/action-card.scss
@@ -24,194 +24,4 @@
     width: 100%;
     height: 100%;
   }
-
-  ix-card.card-insight:hover {
-    --ix-card-background: var(--theme-color-ghost--hover);
-  }
-
-  ix-card.card-insight:active {
-    --ix-card-background: var(--theme-color-ghost--active);
-  }
-
-  ix-card.card-notification:hover {
-    --ix-card-background: var(--theme-color-component-1--hover);
-  }
-
-  ix-card.card-notification:active {
-    --ix-card-background: var(--theme-color-component-1--active);
-  }
-
-  ix-card.card-alarm:hover {
-    --ix-card-background: var(--theme-color-alarm--hover);
-  }
-
-  ix-card.card-alarm:active {
-    --ix-card-background: var(--theme-color-alarm--active);
-  }
-
-  ix-card.card-critical:hover {
-    --ix-card-background: var(--theme-color-critical--hover);
-  }
-
-  ix-card.card-critical:active {
-    --ix-card-background: var(--theme-color-critical--active);
-  }
-
-  ix-card.card-warning:hover {
-    --ix-card-background: var(--theme-color-warning--hover);
-  }
-
-  ix-card.card-warning:active {
-    --ix-card-background: var(--theme-color-warning--active);
-  }
-
-  ix-card.card-success:hover {
-    --ix-card-background: var(--theme-color-success--hover);
-  }
-
-  ix-card.card-success:active {
-    --ix-card-background: var(--theme-color-success--active);
-  }
-
-  ix-card.card-info:hover {
-    --ix-card-background: var(--theme-color-info--hover);
-  }
-
-  ix-card.card-info:active {
-    --ix-card-background: var(--theme-color-info--active);
-  }
-
-  ix-card.card-neutral:hover {
-    --ix-card-background: var(--theme-color-neutral--hover);
-  }
-
-  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) {
-  ix-card.card-insight:hover {
-    --ix-card-background: var(--theme-color-ghost--hover);
-  }
-
-  ix-card.card-notification:hover {
-    --ix-card-background: var(--theme-color-component-1--hover);
-  }
-
-  ix-card.card-alarm:hover {
-    --ix-card-background: var(--theme-color-alarm--hover);
-  }
-
-  ix-card.card-critical:hover {
-    --ix-card-background: var(--theme-color-critical--hover);
-  }
-
-  ix-card.card-warning:hover {
-    --ix-card-background: var(--theme-color-warning--hover);
-  }
-
-  ix-card.card-success:hover {
-    --ix-card-background: var(--theme-color-success--hover);
-  }
-
-  ix-card.card-info:hover {
-    --ix-card-background: var(--theme-color-info--hover);
-  }
-
-  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) {
-  ix-card.card-insight:active {
-    --ix-card-background: var(--theme-color-ghost--active);
-  }
-
-  ix-card.card-notification:active {
-    --ix-card-background: var(--theme-color-component-1--active);
-  }
-
-  ix-card.card-alarm:active {
-    --ix-card-background: var(--theme-color-alarm--active);
-  }
-
-  ix-card.card-critical:active {
-    --ix-card-background: var(--theme-color-critical--active);
-  }
-
-  ix-card.card-warning:active {
-    --ix-card-background: var(--theme-color-warning--active);
-  }
-
-  ix-card.card-success:active {
-    --ix-card-background: var(--theme-color-success--active);
-  }
-
-  ix-card.card-info:active {
-    --ix-card-background: var(--theme-color-info--active);
-  }
-
-  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) {
-  ix-card {
-    --ix-card-border-color: var(--theme-color-dynamic);
-  }
-
-  ix-card.card-insight {
-    --ix-card-background: var(--theme-color-ghost--selected);
-  }
-
-  ix-card.card-notification {
-    --ix-card-background: var(--theme-color-ghost--selected);
-  }
-
-  ix-card.card-alarm {
-    --ix-card-background: var(--theme-color-alarm--active);
-  }
-
-  ix-card.card-critical {
-    --ix-card-background: var(--theme-color-critical--active);
-  }
-
-  ix-card.card-warning {
-    --ix-card-background: var(--theme-color-warning--active);
-  }
-
-  ix-card.card-success {
-    --ix-card-background: var(--theme-color-success--active);
-  }
-
-  ix-card.card-info {
-    --ix-card-background: var(--theme-color-info--active);
-  }
-
-  ix-card.card-neutral {
-    --ix-card-background: var(--theme-color-neutral--active);
-  }
-
-  ix-card.card-primary {
-    --ix-card-background: var(--theme-color-primary--active);
-  }
 }
diff --git a/packages/core/src/components/action-card/action-card.tsx b/packages/core/src/components/action-card/action-card.tsx
@@ -48,12 +48,12 @@ export class IxActionCard {
 
   render() {
     return (
-      <Host
-        class={{
-          selected: this.selected,
-        }}
-      >
-        <ix-card variant={this.variant} class={'pointer'}>
+      <Host>
+        <ix-card
+          selected={this.selected}
+          variant={this.variant}
+          class={'pointer'}
+        >
           <ix-card-content>
             {this.icon ? (
               <ix-icon class={'icon'} name={this.icon} size="24"></ix-icon>