From 448dd0c63ea08327c2254ef6036c18384f864fde Mon Sep 17 00:00:00 2001
From: Jiawei Cai <83235260+jiaweicai92@users.noreply.github.com>
Date: Fri, 20 Aug 2021 10:55:53 -0400
Subject: [PATCH] [Chore] Panel Disable Option (#824)

* add disable option

* add documentation

* update on feedbacks

* rm trailing whitespace

* use ngClass for disabling

* update on style for style

* update code climate

* cleanup

* update on variable
---
 .../go-action-sheet/go-panel/go-panel.component.html   |  1 +
 .../go-action-sheet/go-panel/go-panel.component.scss   | 10 ++++++++++
 .../go-action-sheet/go-panel/go-panel.component.ts     |  4 +++-
 .../action-sheet-panel-docs.component.html             |  8 ++++++++
 .../action-sheet-panel-docs.component.ts               |  1 +
 5 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.html b/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.html
index 86521accb..3ec89597a 100644
--- a/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.html
+++ b/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.html
@@ -17,6 +17,7 @@
 <ng-template #noLink>
   <button
     class="go-panel"
+    [disabled]="disablePanel"
     [ngClass]="panelClasses()"
     (click)="handleAction()">
     <span class="go-panel__title">
diff --git a/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.scss b/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.scss
index 6244b3b36..1b1d69a3f 100644
--- a/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.scss
+++ b/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.scss
@@ -2,6 +2,7 @@
 @import '../../../../../styles/mixins';
 
 $base-medium: #767676 !default;
+$theme-light-transparentized: rgba($theme-light-color, .5);
 
 .go-panel {
   @include transition;
@@ -72,6 +73,11 @@ $base-medium: #767676 !default;
   &--header {
     color: $base-medium;
   }
+
+  &--disabled {
+    color: $theme-light-transparentized;
+    pointer-events: none;
+ }
 }
 
 .go-action-sheet {
@@ -116,4 +122,8 @@ button {
   &:focus {
     outline: none;
   }
+
+  &:disabled {
+    color: $theme-light-transparentized;
+  }
 }
diff --git a/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.ts b/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.ts
index 8e12ba6b5..8d2e9cd85 100644
--- a/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.ts
+++ b/projects/go-lib/src/lib/components/go-action-sheet/go-panel/go-panel.component.ts
@@ -15,6 +15,7 @@ export class GoPanelComponent {
   @Input() panelContent: string;
   @Input() target: string;
   @Input() closeOnClick: boolean = true;
+  @Input() disablePanel: boolean = false;
 
   @Output() action: EventEmitter<void> = new EventEmitter<void>();
 
@@ -23,7 +24,8 @@ export class GoPanelComponent {
   panelClasses(): object {
     return {
       'go-panel--danger': this.danger,
-      'go-panel--header': this.showHeader
+      'go-panel--header': this.showHeader,
+      'go-panel--disabled': this.disablePanel
     };
   }
 
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.html b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.html
index 527b92563..b2784dc11 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.html
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.html
@@ -78,6 +78,14 @@ <h4 class="go-heading-4">closeOnClick</h4>
         </p>
       </div>
 
+      <div class="go-column go-column--100">
+        <h4 class="go-heading-4">disablePanel</h4>
+        <p class="go-body-copy">
+          This determines whether the panel will be disabled or not.
+          Defaults to <code class="code-block--inline">false</code>.
+        </p>
+      </div>
+
     </div>
   </go-card>
 
diff --git a/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.ts b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.ts
index 52eb792b6..b84aadd6b 100644
--- a/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.ts
+++ b/projects/go-style-guide/src/app/features/ui-kit/components/action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.ts
@@ -16,6 +16,7 @@ export class ActionSheetPanelDocsComponent {
   @Input() panelContent: string;
   @Input() target: string = '_blank';
   @Input() closeOnClick: boolean = true;
+  @Input() disablePanel: boolean = false;
 
   @Output() action: EventEmitter<void> = new EventEmitter<void>();
   `;