feat(core/blind): add variant property (#767)

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

packages/angular-test-app/src/preview-examples/blind-variants.html

@@ -0,0 +1,32 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+-->
+<ix-blind icon="bulb" label="Insight" sublabel="sublabel">
+  <div>Insight content</div>
+</ix-blind>
+<ix-blind variant="outline" icon="bulb" label="Outline" sublabel="sublabel">
+  <div>Outline content</div>
+</ix-blind>
+<ix-blind icon="bulb" variant="alarm" label="Alarm" sublabel="sublabel">
+  <div>Alarm content</div>
+</ix-blind>
+<ix-blind icon="bulb" variant="critical" label="Critical" sublabel="sublabel">
+  <div>Critical content</div>
+</ix-blind>
+<ix-blind icon="bulb" variant="warning" label="Warning" sublabel="sublabel">
+  <div>Warning content</div>
+</ix-blind>
+<ix-blind icon="bulb" variant="info" label="Info" sublabel="sublabel">
+  <div>Info content</div>
+</ix-blind>
+<ix-blind icon="bulb" variant="success" label="Success" sublabel="sublabel">
+  <div>Success content</div>
+</ix-blind>
+<ix-blind icon="bulb" variant="neutral" label="Neutral" sublabel="sublabel">
+  <div>Neutral content</div>
+</ix-blind>

packages/angular-test-app/src/preview-examples/blind-variants.ts

@@ -0,0 +1,16 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './blind.html',
+})
+export default class Blind {}

packages/angular/src/components.ts

@@ -96,14 +96,14 @@ export declare interface IxBasicNavigation extends Components.IxBasicNavigation
 
 
 @ProxyCmp({
-  inputs: ['collapsed', 'icon', 'label', 'sublabel']
+  inputs: ['collapsed', 'icon', 'label', 'sublabel', 'variant']
 })
 @Component({
   selector: 'ix-blind',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['collapsed', 'icon', 'label', 'sublabel'],
+  inputs: ['collapsed', 'icon', 'label', 'sublabel', 'variant'],
 })
 export class IxBlind {
   protected el: HTMLElement;

packages/core/component-doc.json

@@ -511,6 +511,65 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "variant",
+          "type": "\"alarm\" | \"critical\" | \"info\" | \"insight\" | \"neutral\" | \"notification\" | \"outline\" | \"primary\" | \"success\" | \"warning\"",
+          "mutable": false,
+          "attr": "variant",
+          "reflectToAttr": false,
+          "docs": "Blind variant",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "2.0.0"
+            }
+          ],
+          "default": "'insight'",
+          "values": [
+            {
+              "value": "alarm",
+              "type": "string"
+            },
+            {
+              "value": "critical",
+              "type": "string"
+            },
+            {
+              "value": "info",
+              "type": "string"
+            },
+            {
+              "value": "insight",
+              "type": "string"
+            },
+            {
+              "value": "neutral",
+              "type": "string"
+            },
+            {
+              "value": "notification",
+              "type": "string"
+            },
+            {
+              "value": "outline",
+              "type": "string"
+            },
+            {
+              "value": "primary",
+              "type": "string"
+            },
+            {
+              "value": "success",
+              "type": "string"
+            },
+            {
+              "value": "warning",
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
         }
       ],
       "methods": [],

packages/core/src/components.d.ts

@@ -8,6 +8,7 @@ import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
 import { ActionCardVariant } from "./components/action-card/action-card";
 import { IxTheme } from "./components/utils/theme-switcher";
 import { Breakpoint } from "./components/utils/breakpoints";
+import { BlindVariant } from "./components/blind/blind";
 import { ButtonVariant } from "./components/button/button";
 import { CardVariant } from "./components/card/card";
 import { CardAccordionExpandChangeEvent } from "./components/card-accordion/card-accordion";
@@ -42,6 +43,7 @@ import { UploadFileState } from "./components/upload/upload-file-state";
 export { ActionCardVariant } from "./components/action-card/action-card";
 export { IxTheme } from "./components/utils/theme-switcher";
 export { Breakpoint } from "./components/utils/breakpoints";
+export { BlindVariant } from "./components/blind/blind";
 export { ButtonVariant } from "./components/button/button";
 export { CardVariant } from "./components/card/card";
 export { CardAccordionExpandChangeEvent } from "./components/card-accordion/card-accordion";
@@ -175,6 +177,11 @@ export namespace Components {
           * @since 2.0.0
          */
         "sublabel": string;
+        /**
+          * Blind variant
+          * @since 2.0.0
+         */
+        "variant": BlindVariant;
     }
     interface IxBreadcrumb {
         /**
@@ -3209,6 +3216,11 @@ declare namespace LocalJSX {
           * @since 2.0.0
          */
         "sublabel"?: string;
+        /**
+          * Blind variant
+          * @since 2.0.0
+         */
+        "variant"?: BlindVariant;
     }
     interface IxBreadcrumb {
         /**

packages/core/src/components/blind/blind.scss

@@ -12,12 +12,55 @@
 @import 'mixins/hover';
 @import 'mixins/text-truncation';
 
+@mixin blind($variant: 'insight') {
+  :host(.blind-#{$variant}) {
+    @if $variant == 'outline' {
+      border: solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);
+    }
+
+    .blind-header {
+      @if $variant == 'outline' {
+        background-color: var(--theme-color-ghost);
+      } @else {
+        background-color: var(--theme-color-#{$variant});
+      }
+
+      @if $variant == 'insight' or $variant == 'outline' {
+        .blind-header-title-label {
+          color: var(--theme-color-std-text);
+        }
+        .blind-header-title-sublabel {
+          color: var(--theme-color-soft-text);
+        }
+
+        @include ghost-hover-pressed;
+      } @else {
+        .blind-header-title-label,
+        .blind-header-title-sublabel {
+          color: var(--theme-color-#{$variant}--contrast);
+        }
+
+        @include hover {
+          background-color: var(--theme-color-#{$variant}--hover);
+        }
+
+        @include active {
+          background-color: var(--theme-color-#{$variant}--active);
+        }
+      }
+    }
+
+    @if $variant == 'outline' {
+      border-color: var(--theme-color-soft-bdr);
+    } @else {
+      background-color: var(--theme-blind-base--background);
+    }
+  }
+}
+
 :host {
   display: flex;
   flex-direction: column;
-  background-color: var(--theme-blind-base--background);
-  border: solid var(--theme-blind--border-thickness)
-    var(--theme-blind-base--border-color);
   border-radius: var(--theme-blind--border-radius);
   overflow: hidden;
 
@@ -33,93 +76,63 @@
     border-radius: var(--theme-blind--border-radius)
       var(--theme-blind--border-radius) 0 0;
     padding-right: $small-space;
-    transition: border-radius $default-time;
     cursor: pointer;
 
     z-index: 1;
 
-    color: var(--theme-blind-header-closed--color);
-    background-color: var(--theme-blind-header-closed--background);
-
     .collapse-icon {
-      color: var(--theme-blind-header-icon-closed--color);
       padding: $tiny-space $small-space;
     }
 
-    ix-typography,
-    .blind-header-title-label,
-    .blind-header-title-sublabel {
-      @include ellipsis;
+    .blind-header-title-col {
+      flex-grow: 1;
+      flex-basis: 0;
+      display: inline-flex;
+      align-items: center;
+      min-width: 0;
+    }
+
+    ix-typography {
       flex-grow: 1;
+      @include ellipsis;
+    }
+
+    .blind-header-title-col:not(:first-of-type) {
+      justify-content: flex-end;
     }
 
     .blind-header-title-label {
+      @include ellipsis;
       padding-inline-end: 0.5rem;
     }
 
     .blind-header-title-sublabel {
+      @include ellipsis;
       padding-inline: 0.5rem;
     }
 
     .blind-header-title,
     .blind-header-title-basic {
-      @include ellipsis;
       display: flex;
       align-items: center;
       flex-grow: 1;
       height: 100%;
-
-      .blind-header-title-default {
-        @include ellipsis;
-        @include text-l-title;
-        margin-inline-end: $small-space;
-        flex-grow: 1;
-      }
+      min-width: 0;
     }
 
     .blind-header-title-basic ix-icon {
       margin-inline-end: $small-space;
     }
 
-    @include hover {
-      background-color: var(--theme-blind-header-open--background--hover);
-
-      .collapse-icon {
-        color: var(--theme-blind-header-icon-open--color--hover);
-      }
-    }
-
-    @include active {
-      background-color: var(--theme-blind-header-open--background--active);
-
-      .collapse-icon {
-        color: var(--theme-blind-header-icon-open--color--active);
-      }
-    }
-
     @include focus-visible {
       border-color: var(--theme-color-focus-bdr);
       outline: none;
     }
 
-    &.closed {
-      border-radius: var(--theme-blind--border-radius);
-
-      @include hover {
-        background-color: var(--theme-blind-header-open--background--hover);
-
-        .collapse-icon {
-          color: var(--theme-blind-header-icon-closed--color--hover);
-        }
-      }
-
-      @include active {
-        background-color: var(--theme-blind-header-open--background--active);
-
-        .collapse-icon {
-          color: var(--theme-blind-header-icon-closed--color--active);
-        }
-      }
+    .blind-header-labels {
+      display: inline-flex;
+      flex-grow: 1;
+      min-width: 0;
     }
   }
 
@@ -137,3 +150,20 @@
     }
   }
 }
+
+$blind-variants: (
+  alarm,
+  critical,
+  info,
+  insight,
+  neutral,
+  notification,
+  success,
+  warning,
+  primary,
+  outline
+);
+
+@each $variant in $blind-variants {
+  @include blind($variant);
+}