[CL-11] Submit button (#2971)

* Begin implementing submit button

* Add submit button

* Update figma url

* Add disabled when loading

* Update existing submit buttons

* Move template to it's own file

libs/components/src/index.ts

@@ -5,3 +5,4 @@ export * from "./callout";
 export * from "./form-field";
 export * from "./menu";
 export * from "./utils/i18n-mock.service";
+export * from "./submit-button";

libs/components/src/submit-button/index.ts

@@ -0,0 +1 @@
+export * from "./submit-button.module";

libs/components/src/submit-button/submit-button.component.html

@@ -0,0 +1,10 @@
+<button bitButton type="submit" [buttonType]="buttonType" [disabled]="loading || disabled">
+  <span class="tw-relative">
+    <span [ngClass]="{ 'tw-invisible': loading }">
+      <ng-content></ng-content>
+    </span>
+    <span class="tw-absolute tw-inset-0" [ngClass]="{ 'tw-invisible': !loading }">
+      <i class="bwi bwi-spinner bwi-lg bwi-spin tw-align-baseline" aria-hidden="true"></i>
+    </span>
+  </span>
+</button>

libs/components/src/submit-button/submit-button.component.ts

@@ -0,0 +1,13 @@
+import { Component, Input } from "@angular/core";
+
+import { ButtonTypes } from "../button";
+
+@Component({
+  selector: "bit-submit-button",
+  templateUrl: "./submit-button.component.html",
+})
+export class SubmitButtonComponent {
+  @Input() buttonType: ButtonTypes = "primary";
+  @Input() disabled = false;
+  @Input() loading: boolean;
+}

libs/components/src/submit-button/submit-button.module.ts

@@ -0,0 +1,13 @@
+import { CommonModule } from "@angular/common";
+import { NgModule } from "@angular/core";
+
+import { ButtonModule } from "../button";
+
+import { SubmitButtonComponent } from "./submit-button.component";
+
+@NgModule({
+  imports: [CommonModule, ButtonModule],
+  exports: [SubmitButtonComponent],
+  declarations: [SubmitButtonComponent],
+})
+export class SubmitButtonModule {}

libs/components/src/submit-button/submit-button.stories.ts

@@ -0,0 +1,44 @@
+import { Meta, moduleMetadata, Story } from "@storybook/angular";
+
+import { SubmitButtonComponent } from "./submit-button.component";
+import { SubmitButtonModule } from "./submit-button.module";
+
+export default {
+  title: "Component Library/Submit Button",
+  component: SubmitButtonComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [SubmitButtonModule],
+    }),
+  ],
+  args: {
+    buttonType: "primary",
+    loading: false,
+  },
+  parameters: {
+    design: {
+      type: "figma",
+      url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library?node-id=1881%3A16733",
+    },
+  },
+} as Meta;
+
+const Template: Story<SubmitButtonComponent> = (args: SubmitButtonComponent) => ({
+  props: args,
+  template: `<bit-submit-button [buttonType]="buttonType" [loading]="loading" [disabled]="disabled">
+    Submit
+  </bit-submit-button>`,
+});
+
+export const Primary = Template.bind({});
+Primary.args = {};
+
+export const Loading = Template.bind({});
+Loading.args = {
+  loading: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};