From 6cba7be670b4c5dac5864c98c7ad9ae85f141415 Mon Sep 17 00:00:00 2001
From: Hinton <hinton@users.noreply.github.com>
Date: Mon, 12 Sep 2022 19:56:12 +0200
Subject: [PATCH 1/2] Add support for using block without argument in button,
 add block to submit-button

---
 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 +++++++-
 4 files changed, 37 insertions(+), 8 deletions(-)

diff --git a/libs/components/src/button/button.directive.ts b/libs/components/src/button/button.directive.ts
index 827c49c22dbc..d5bf9df52c9e 100644
--- a/libs/components/src/button/button.directive.ts
+++ b/libs/components/src/button/button.directive.ts
@@ -60,13 +60,12 @@ export class ButtonDirective {
       "focus:tw-ring-primary-700",
       "focus: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 35a7dbfe8296..f09b8701b1be 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 f3c097b2f342..9d9657ba7ee6 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 b005974a1ce0..27408349da7c 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"];
+  }
 }

From 27fe4be82fee6fd07523635878d4cce531a9a4a9 Mon Sep 17 00:00:00 2001
From: Hinton <hinton@users.noreply.github.com>
Date: Tue, 13 Sep 2022 10:44:21 +0200
Subject: [PATCH 2/2] Fix storybook width setting

---
 libs/components/src/submit-button/submit-button.stories.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/libs/components/src/submit-button/submit-button.stories.ts b/libs/components/src/submit-button/submit-button.stories.ts
index fddf6a043c17..cf19b1c8e4b6 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>`,
 });