From 8cb92d425c8ebcc8d09bf7258fa9133ab31725c6 Mon Sep 17 00:00:00 2001 From: Thomas Avery <43214426+Thomas-Avery@users.noreply.github.com> Date: Fri, 22 Jul 2022 10:55:45 -0500 Subject: [PATCH] [CL-29] Modal Components for the component library (#3053) The purpose of this PR is to add Modals into the component library. To note, this PR is focused on the visual of the modal that will "pop-up" and not the actual pop-up implementation. --- libs/components/src/index.ts | 1 + libs/components/src/modal/index.ts | 3 + .../src/modal/modal-simple.component.html | 19 +++++ .../src/modal/modal-simple.component.ts | 16 ++++ .../src/modal/modal-simple.stories.ts | 85 +++++++++++++++++++ .../components/src/modal/modal.component.html | 25 ++++++ libs/components/src/modal/modal.component.ts | 23 +++++ libs/components/src/modal/modal.module.ts | 12 +++ libs/components/src/modal/modal.stories.ts | 80 +++++++++++++++++ 9 files changed, 264 insertions(+) create mode 100644 libs/components/src/modal/index.ts create mode 100644 libs/components/src/modal/modal-simple.component.html create mode 100644 libs/components/src/modal/modal-simple.component.ts create mode 100644 libs/components/src/modal/modal-simple.stories.ts create mode 100644 libs/components/src/modal/modal.component.html create mode 100644 libs/components/src/modal/modal.component.ts create mode 100644 libs/components/src/modal/modal.module.ts create mode 100644 libs/components/src/modal/modal.stories.ts diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts index 5ccceae874..10553ab5c7 100644 --- a/libs/components/src/index.ts +++ b/libs/components/src/index.ts @@ -5,6 +5,7 @@ export * from "./toggle-group"; export * from "./callout"; export * from "./form-field"; export * from "./menu"; +export * from "./modal"; export * from "./utils/i18n-mock.service"; export * from "./tabs"; export * from "./submit-button"; diff --git a/libs/components/src/modal/index.ts b/libs/components/src/modal/index.ts new file mode 100644 index 0000000000..5c8ac1f8e8 --- /dev/null +++ b/libs/components/src/modal/index.ts @@ -0,0 +1,3 @@ +export * from "./modal.component"; +export * from "./modal-simple.component"; +export * from "./modal.module"; diff --git a/libs/components/src/modal/modal-simple.component.html b/libs/components/src/modal/modal-simple.component.html new file mode 100644 index 0000000000..f60d2e3e33 --- /dev/null +++ b/libs/components/src/modal/modal-simple.component.html @@ -0,0 +1,19 @@ +
+
+ + + + +

+ +

+
+
+ +
+
+ +
+
diff --git a/libs/components/src/modal/modal-simple.component.ts b/libs/components/src/modal/modal-simple.component.ts new file mode 100644 index 0000000000..b083e784cf --- /dev/null +++ b/libs/components/src/modal/modal-simple.component.ts @@ -0,0 +1,16 @@ +import { Component, ContentChild, Directive } from "@angular/core"; + +@Directive({ selector: "[bit-modal-icon]" }) +export class IconDirective {} + +@Component({ + selector: "bit-simple-modal", + templateUrl: "./modal-simple.component.html", +}) +export class ModalSimpleComponent { + @ContentChild(IconDirective) icon!: IconDirective; + + get hasIcon() { + return this.icon != null; + } +} diff --git a/libs/components/src/modal/modal-simple.stories.ts b/libs/components/src/modal/modal-simple.stories.ts new file mode 100644 index 0000000000..5f28e63bb0 --- /dev/null +++ b/libs/components/src/modal/modal-simple.stories.ts @@ -0,0 +1,85 @@ +import { Meta, moduleMetadata, Story } from "@storybook/angular"; + +import { ButtonModule } from "../button"; + +import { IconDirective, ModalSimpleComponent } from "./modal-simple.component"; + +export default { + title: "Component Library/Modals/Simple Modal", + component: ModalSimpleComponent, + decorators: [ + moduleMetadata({ + imports: [ButtonModule], + declarations: [IconDirective], + }), + ], + parameters: { + design: { + type: "figma", + url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library", + }, + }, +} as Meta; + +const Template: Story = (args: ModalSimpleComponent) => ({ + props: args, + template: ` + + Alert Modal + + Message Content + +
+ + +
+ + `, +}); + +export const Default = Template.bind({}); + +const TemplateWithIcon: Story = (args: ModalSimpleComponent) => ({ + props: args, + template: ` + + + Premium Subscription Available + + Message Content + +
+ + +
+ + `, +}); + +export const CustomIcon = TemplateWithIcon.bind({}); + +const TemplateScroll: Story = (args: ModalSimpleComponent) => ({ + props: args, + template: ` + + Alert Modal + + Message Content + Message text goes here.
+ + repeating lines of characters
+ + end of sequence! + +
+ + +
+ + `, +}); + +export const ScrollingContent = TemplateScroll.bind({}); +ScrollingContent.args = { + useDefaultIcon: true, +}; diff --git a/libs/components/src/modal/modal.component.html b/libs/components/src/modal/modal.component.html new file mode 100644 index 0000000000..e6d0fb5001 --- /dev/null +++ b/libs/components/src/modal/modal.component.html @@ -0,0 +1,25 @@ +
+
+

+ +

+ +
+ +
+ +
+ +
+ +
+
diff --git a/libs/components/src/modal/modal.component.ts b/libs/components/src/modal/modal.component.ts new file mode 100644 index 0000000000..208929bf02 --- /dev/null +++ b/libs/components/src/modal/modal.component.ts @@ -0,0 +1,23 @@ +import { Component, Input } from "@angular/core"; + +@Component({ + selector: "bit-modal", + templateUrl: "./modal.component.html", +}) +export class ModalComponent { + @Input() modalSize: "small" | "default" | "large"; + + get width() { + switch (this.modalSize) { + case "small": { + return "tw-max-w-xs"; + } + case "large": { + return "tw-max-w-4xl"; + } + default: { + return "tw-max-w-xl"; + } + } + } +} diff --git a/libs/components/src/modal/modal.module.ts b/libs/components/src/modal/modal.module.ts new file mode 100644 index 0000000000..340a6b2dee --- /dev/null +++ b/libs/components/src/modal/modal.module.ts @@ -0,0 +1,12 @@ +import { CommonModule } from "@angular/common"; +import { NgModule } from "@angular/core"; + +import { ModalSimpleComponent } from "./modal-simple.component"; +import { ModalComponent } from "./modal.component"; + +@NgModule({ + imports: [CommonModule], + exports: [ModalComponent, ModalSimpleComponent], + declarations: [ModalComponent, ModalSimpleComponent], +}) +export class ModalModule {} diff --git a/libs/components/src/modal/modal.stories.ts b/libs/components/src/modal/modal.stories.ts new file mode 100644 index 0000000000..6225dbe6aa --- /dev/null +++ b/libs/components/src/modal/modal.stories.ts @@ -0,0 +1,80 @@ +import { Meta, moduleMetadata, Story } from "@storybook/angular"; + +import { ButtonModule } from "../button"; + +import { ModalComponent } from "./modal.component"; + +export default { + title: "Component Library/Modals/Modal", + component: ModalComponent, + decorators: [ + moduleMetadata({ + imports: [ButtonModule], + }), + ], + args: { + modalSize: "small", + }, + parameters: { + design: { + type: "figma", + url: "https://www.figma.com/file/Zt3YSeb6E6lebAffrNLa0h/Tailwind-Component-Library", + }, + }, +} as Meta; + +const Template: Story = (args: ModalComponent) => ({ + props: args, + template: ` + + Modal Title + + Modal body text goes here. + +
+ + +
+ + `, +}); + +export const Default = Template.bind({}); +Default.args = { + modalSize: "default", +}; + +export const Small = Template.bind({}); +Small.args = { + modalSize: "small", +}; + +export const Large = Template.bind({}); +Large.args = { + modalSize: "large", +}; + +const TemplateScrolling: Story = (args: ModalComponent) => ({ + props: args, + template: ` + + Modal Title + + Modal body text goes here.
+ + repeating lines of characters
+ + end of sequence! + +
+ + +
+ + `, +}); + +export const ScrollingContent = TemplateScrolling.bind({}); +ScrollingContent.args = { + modalSize: "small", +};