[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
mobi · Aug 20, 2021 · 448dd0c · 448dd0c
1 parent e4afdcd
commit 448dd0c
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 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
@@ -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
@@ -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
@@ -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/...tion-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.html b/...tion-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/...action-sheet-docs/components/action-sheet-panel-docs/action-sheet-panel-docs.component.ts b/...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>();
   `;