From c66fb5f6ecf76bf9269f552f42e92783d3e50f52 Mon Sep 17 00:00:00 2001
From: Ehsan Rezaei <ehsan.rezaei@hyland.com>
Date: Mon, 12 Jun 2023 15:31:38 +0200
Subject: [PATCH] [AAE-15149] Added reference variables to edit task filter
 component (#8636)

* AAE-15149: Added reference variables to edit task filter component

* AAE-15149: Added component variables

* AAE-15149: updated variable names

* AAE-15149: updated class names targeting directly the elements

* AAE-15149: updated class names targeting directly the elements

* AAE-15149: Fixed lint errors
---
 .../src/lib/styles/_components-variables.scss | 16 ++++++++++++++++
 lib/core/src/lib/styles/_index.scss           |  2 ++
 .../src/lib/styles/_reference-variables.scss  |  3 +++
 ...base-edit-task-filter-cloud.component.html |  8 ++++----
 ...base-edit-task-filter-cloud.component.scss | 19 +++++++++++++++----
 5 files changed, 40 insertions(+), 8 deletions(-)
 create mode 100644 lib/core/src/lib/styles/_components-variables.scss
 create mode 100644 lib/core/src/lib/styles/_reference-variables.scss

diff --git a/lib/core/src/lib/styles/_components-variables.scss b/lib/core/src/lib/styles/_components-variables.scss
new file mode 100644
index 0000000000..bb17524444
--- /dev/null
+++ b/lib/core/src/lib/styles/_components-variables.scss
@@ -0,0 +1,16 @@
+@use './reference-variables' as *;
+
+@mixin adf-components-variables() {
+    $defaults: (
+        --adf-edit-task-and-service-filter-header-title-color: $adf-ref-edit-task-and-service-filter-header-title-color,
+        --adf-edit-task-and-service-filter-header-description-color: $adf-ref-edit-task-and-service-filter-header-description-color,
+        --adf-edit-task-and-service-filter-header-height: $adf-ref-edit-task-and-service-filter-header-height,
+    );
+
+    // propagates SCSS variables into the CSS variables scope
+    :root {
+        @each $name, $value in $defaults {
+            #{$name}: #{$value};
+        }
+    }
+}
diff --git a/lib/core/src/lib/styles/_index.scss b/lib/core/src/lib/styles/_index.scss
index 57e7ac22d2..63e23e3fa0 100644
--- a/lib/core/src/lib/styles/_index.scss
+++ b/lib/core/src/lib/styles/_index.scss
@@ -10,6 +10,7 @@
 @import '../clipboard/clipboard.theme';
 @import './snackbar.theme';
 @import './material.theme';
+@import './components-variables';
 @import '../../../../../node_modules/@mat-datetimepicker/core/datetimepicker/datetimepicker-theme';
 
 @mixin alfresco-material-theme($theme) {
@@ -112,6 +113,7 @@
     @include mat-datetimepicker-theme($theme);
     @include adf-snackbar-theme;
     @include adf-material-theme;
+    @include adf-components-variables;
 }
 
 $adf-custom-theme-sizes: (
diff --git a/lib/core/src/lib/styles/_reference-variables.scss b/lib/core/src/lib/styles/_reference-variables.scss
new file mode 100644
index 0000000000..d115dd233a
--- /dev/null
+++ b/lib/core/src/lib/styles/_reference-variables.scss
@@ -0,0 +1,3 @@
+$adf-ref-edit-task-and-service-filter-header-title-color: rgba(0, 0, 0, 0.87);          
+$adf-ref-edit-task-and-service-filter-header-description-color: rgba(0, 0, 0, 0.54);          
+$adf-ref-edit-task-and-service-filter-header-height: 48px;
\ No newline at end of file
diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.html b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.html
index 137605c23d..1080c914cd 100644
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.html
@@ -1,10 +1,10 @@
-<mat-accordion [hideToggle]="isLoading">
+<mat-accordion [hideToggle]="isLoading" class="adf-edit-task-filter">
     <mat-expansion-panel (afterExpand)="onExpand()" (closed)="onClose()">
-        <mat-expansion-panel-header *ngIf="taskFilter" id="adf-edit-task-filter-expansion-header">
+        <mat-expansion-panel-header *ngIf="taskFilter" id="adf-edit-task-filter-expansion-header" class="adf-edit-task-filter-header">
             <ng-container *ngIf="!isLoading; else loadingTemplate">
-                <mat-panel-title *ngIf="showTaskFilterName" id="adf-edit-task-filter-title-id"
+                <mat-panel-title *ngIf="showTaskFilterName" id="adf-edit-task-filter-title-id" class="adf-edit-task-filter-header__title"
                     >{{taskFilter.name | translate}}</mat-panel-title>
-                <mat-panel-description class="adf-edit-task-filter-description" id="adf-edit-task-filter-sub-title-id">
+                <mat-panel-description class="adf-edit-task-filter-header__description" id="adf-edit-task-filter-sub-title-id">
                     <span *ngIf="showTitle">{{ 'ADF_CLOUD_EDIT_TASK_FILTER.TITLE' | translate}}</span>
                     <div *ngIf="showFilterActions" class="adf-cloud-edit-task-filter-actions">
                         <ng-container *ngIf="toggleFilterActions">
diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.scss b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.scss
index e467a96868..4e109e9688 100644
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.scss
@@ -42,10 +42,6 @@
         margin-right: calc((100% - 100px) / 2);
     }
 
-    &-edit-task-filter-description {
-        place-content: center space-between;
-    }
-
     &-edit-task-filter-form {
         flex-flow: row wrap;
         display: flex;
@@ -72,4 +68,19 @@
             }
         }
     }
+
+    &-edit-task-filter {
+        &-header {
+            height: var(--adf-edit-task-and-service-filter-header-height);
+
+            &__title {
+                color: var(--adf-edit-task-and-service-filter-header-title-color);
+            }
+
+            &__description {
+                color: var(--adf-edit-task-and-service-filter-header-description-color);
+                place-content: center space-between;
+            }
+        }
+    }
 }