From 868f12bfd8cc54bf60a6f4c1cc925ac30789bc0f Mon Sep 17 00:00:00 2001
From: Oscar Hinton <Hinton@users.noreply.github.com>
Date: Fri, 16 Sep 2022 11:30:41 +0200
Subject: [PATCH] [CL-54] Add support for button block without argument +
 submit button (#3498)

---
 libs/components/src/button/button.directive.ts | 11 +++++------
 libs/components/src/button/button.stories.ts   | 18 ++++++++++++++++++
 .../submit-button/submit-button.component.html |  8 +++++++-
 .../submit-button/submit-button.component.ts   |  8 +++++++-
 .../src/submit-button/submit-button.stories.ts |  3 ++-
 5 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/libs/components/src/button/button.directive.ts b/libs/components/src/button/button.directive.ts
index 59e7b4269f7..5c4b0039aef 100644
--- a/libs/components/src/button/button.directive.ts
+++ b/libs/components/src/button/button.directive.ts
@@ -59,13 +59,12 @@ export class ButtonDirective {
       "focus-visible:tw-ring-primary-700",
       "focus-visible:tw-z-10",
     ]
-      .concat(this.block ? ["tw-w-full", "tw-block"] : ["tw-inline-block"])
+      .concat(
+        this.block == null || this.block === false ? ["tw-inline-block"] : ["tw-w-full", "tw-block"]
+      )
       .concat(buttonStyles[this.buttonType ?? "secondary"]);
   }
 
-  @Input()
-  buttonType: ButtonTypes = null;
-
-  @Input()
-  block = false;
+  @Input() buttonType: ButtonTypes = null;
+  @Input() block?: boolean;
 }
diff --git a/libs/components/src/button/button.stories.ts b/libs/components/src/button/button.stories.ts
index 35a7dbfe829..f09b8701b1b 100644
--- a/libs/components/src/button/button.stories.ts
+++ b/libs/components/src/button/button.stories.ts
@@ -52,3 +52,21 @@ export const Disabled = DisabledTemplate.bind({});
 Disabled.args = {
   size: "small",
 };
+
+const BlockTemplate: Story<ButtonDirective> = (args: ButtonDirective) => ({
+  props: args,
+  template: `
+    <span class="tw-flex">
+      <button bitButton [buttonType]="buttonType" [block]="block">[block]="true" Button</button>
+      <a bitButton [buttonType]="buttonType" [block]="block" href="#" class="tw-ml-2">[block]="true" Link</a>
+
+      <button bitButton [buttonType]="buttonType" block class="tw-ml-2">block Button</button>
+      <a bitButton [buttonType]="buttonType" block href="#" class="tw-ml-2">block Link</a>
+    </span>
+  `,
+});
+
+export const Block = BlockTemplate.bind({});
+Block.args = {
+  block: true,
+};
diff --git a/libs/components/src/submit-button/submit-button.component.html b/libs/components/src/submit-button/submit-button.component.html
index f3c097b2f34..9d9657ba7ee 100644
--- a/libs/components/src/submit-button/submit-button.component.html
+++ b/libs/components/src/submit-button/submit-button.component.html
@@ -1,4 +1,10 @@
-<button bitButton type="submit" [buttonType]="buttonType" [disabled]="loading || disabled">
+<button
+  bitButton
+  type="submit"
+  [block]="block"
+  [buttonType]="buttonType"
+  [disabled]="loading || disabled"
+>
   <span class="tw-relative">
     <span [ngClass]="{ 'tw-invisible': loading }">
       <ng-content></ng-content>
diff --git a/libs/components/src/submit-button/submit-button.component.ts b/libs/components/src/submit-button/submit-button.component.ts
index b005974a1ce..27408349da7 100644
--- a/libs/components/src/submit-button/submit-button.component.ts
+++ b/libs/components/src/submit-button/submit-button.component.ts
@@ -1,4 +1,4 @@
-import { Component, Input } from "@angular/core";
+import { Component, HostBinding, Input } from "@angular/core";
 
 import { ButtonTypes } from "../button";
 
@@ -10,4 +10,10 @@ export class SubmitButtonComponent {
   @Input() buttonType: ButtonTypes = "primary";
   @Input() disabled = false;
   @Input() loading: boolean;
+
+  @Input() block?: boolean;
+
+  @HostBinding("class") get classList() {
+    return this.block == null || this.block === false ? [] : ["tw-w-full", "tw-block"];
+  }
 }
diff --git a/libs/components/src/submit-button/submit-button.stories.ts b/libs/components/src/submit-button/submit-button.stories.ts
index fddf6a043c1..cf19b1c8e4b 100644
--- a/libs/components/src/submit-button/submit-button.stories.ts
+++ b/libs/components/src/submit-button/submit-button.stories.ts
@@ -14,6 +14,7 @@ export default {
   args: {
     buttonType: "primary",
     loading: false,
+    block: false,
   },
   parameters: {
     design: {
@@ -25,7 +26,7 @@ export default {
 
 const Template: Story<SubmitButtonComponent> = (args: SubmitButtonComponent) => ({
   props: args,
-  template: `<bit-submit-button [buttonType]="buttonType" [loading]="loading" [disabled]="disabled">
+  template: `<bit-submit-button [buttonType]="buttonType" [loading]="loading" [disabled]="disabled" [block]="block">
     Submit
   </bit-submit-button>`,
 });