From e105a8f2222375ad28213a5046ef308e361bedaf Mon Sep 17 00:00:00 2001
From: Oscar Hinton
Date: Wed, 29 Jun 2022 16:27:42 +0200
Subject: [PATCH] [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
---
...nroll-master-password-reset.component.html | 13 ++----
apps/web/src/app/modules/shared.module.ts | 10 ++++-
.../settings/account.component.html | 7 ++-
.../app/reports/breach-report.component.html | 7 ++-
.../exposed-passwords-report.component.html | 14 ++----
.../app/settings/change-kdf.component.html | 7 ++-
.../settings/change-password.component.html | 7 ++-
.../emergency-access-add-edit.component.html | 17 ++-----
.../src/app/settings/premium.component.html | 20 +++------
.../settings/two-factor-setup.component.html | 19 ++------
libs/components/src/index.ts | 1 +
libs/components/src/submit-button/index.ts | 1 +
.../submit-button.component.html | 10 +++++
.../submit-button/submit-button.component.ts | 13 ++++++
.../src/submit-button/submit-button.module.ts | 13 ++++++
.../submit-button/submit-button.stories.ts | 44 +++++++++++++++++++
16 files changed, 121 insertions(+), 82 deletions(-)
create mode 100644 libs/components/src/submit-button/index.ts
create mode 100644 libs/components/src/submit-button/submit-button.component.html
create mode 100644 libs/components/src/submit-button/submit-button.component.ts
create mode 100644 libs/components/src/submit-button/submit-button.module.ts
create mode 100644 libs/components/src/submit-button/submit-button.stories.ts
diff --git a/apps/web/src/app/modules/organizations/users/enroll-master-password-reset.component.html b/apps/web/src/app/modules/organizations/users/enroll-master-password-reset.component.html
index e232a7987f..f72602ac91 100644
--- a/apps/web/src/app/modules/organizations/users/enroll-master-password-reset.component.html
+++ b/apps/web/src/app/modules/organizations/users/enroll-master-password-reset.component.html
@@ -32,16 +32,9 @@
-
+
+ {{ "save" | i18n }}
+
-
+
+ {{ "checkBreaches" | i18n }}
+
{{ "reportError" | i18n }}...
diff --git a/apps/web/src/app/reports/exposed-passwords-report.component.html b/apps/web/src/app/reports/exposed-passwords-report.component.html
index f0a882f793..32cfaf2019 100644
--- a/apps/web/src/app/reports/exposed-passwords-report.component.html
+++ b/apps/web/src/app/reports/exposed-passwords-report.component.html
@@ -2,17 +2,9 @@
{{ "exposedPasswordsReport" | i18n }}
{{ "exposedPasswordsReportDesc" | i18n }}
-
+
+ {{ "checkExposedPasswords" | i18n }}
+
{{ "noExposedPasswords" | i18n }}
diff --git a/apps/web/src/app/settings/change-kdf.component.html b/apps/web/src/app/settings/change-kdf.component.html
index f5eae39be4..b06cf01d06 100644
--- a/apps/web/src/app/settings/change-kdf.component.html
+++ b/apps/web/src/app/settings/change-kdf.component.html
@@ -71,8 +71,7 @@
-
+
+ {{ "changeKdf" | i18n }}
+
diff --git a/apps/web/src/app/settings/change-password.component.html b/apps/web/src/app/settings/change-password.component.html
index 990d950604..90df85042e 100644
--- a/apps/web/src/app/settings/change-password.component.html
+++ b/apps/web/src/app/settings/change-password.component.html
@@ -87,8 +87,7 @@
-
+
+ {{ "changeMasterPassword" | i18n }}
+
diff --git a/apps/web/src/app/settings/emergency-access-add-edit.component.html b/apps/web/src/app/settings/emergency-access-add-edit.component.html
index 488980a41e..e7198e1903 100644
--- a/apps/web/src/app/settings/emergency-access-add-edit.component.html
+++ b/apps/web/src/app/settings/emergency-access-add-edit.component.html
@@ -100,20 +100,9 @@
-
+
+ {{ "submit" | i18n }}
+
{{ "paymentChargedAnnually" | i18n }}
-
+
+ {{ "submit" | i18n }}
+
diff --git a/apps/web/src/app/settings/two-factor-setup.component.html b/apps/web/src/app/settings/two-factor-setup.component.html
index 8a4a1f698c..698e7fd9c0 100644
--- a/apps/web/src/app/settings/two-factor-setup.component.html
+++ b/apps/web/src/app/settings/two-factor-setup.component.html
@@ -77,22 +77,9 @@
{{ "deviceVerificationDesc" | i18n }}
-
+
+ {{ "save" | i18n }}
+
diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
index a83b561355..cb45e12228 100644
--- a/libs/components/src/index.ts
+++ b/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";
diff --git a/libs/components/src/submit-button/index.ts b/libs/components/src/submit-button/index.ts
new file mode 100644
index 0000000000..ae7d96d2c1
--- /dev/null
+++ b/libs/components/src/submit-button/index.ts
@@ -0,0 +1 @@
+export * from "./submit-button.module";
diff --git a/libs/components/src/submit-button/submit-button.component.html b/libs/components/src/submit-button/submit-button.component.html
new file mode 100644
index 0000000000..f3c097b2f3
--- /dev/null
+++ b/libs/components/src/submit-button/submit-button.component.html
@@ -0,0 +1,10 @@
+
diff --git a/libs/components/src/submit-button/submit-button.component.ts b/libs/components/src/submit-button/submit-button.component.ts
new file mode 100644
index 0000000000..b005974a1c
--- /dev/null
+++ b/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;
+}
diff --git a/libs/components/src/submit-button/submit-button.module.ts b/libs/components/src/submit-button/submit-button.module.ts
new file mode 100644
index 0000000000..c7ab7567e6
--- /dev/null
+++ b/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 {}
diff --git a/libs/components/src/submit-button/submit-button.stories.ts b/libs/components/src/submit-button/submit-button.stories.ts
new file mode 100644
index 0000000000..fddf6a043c
--- /dev/null
+++ b/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 = (args: SubmitButtonComponent) => ({
+ props: args,
+ template: `
+ Submit
+ `,
+});
+
+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,
+};