From 5d438f7111cd92ee4577313f7d3d2e083c827e8f Mon Sep 17 00:00:00 2001 From: Shane Melton Date: Mon, 17 Oct 2022 15:27:41 -0700 Subject: [PATCH] [EC-86] Refactor badge-list module/component - Move the badge list component to its own module. - Extract badge list stories from badge stories. - Cleanup bade stories and module after refactor. --- apps/web/src/app/shared/shared.module.ts | 3 + .../badge-list.component.html | 0 .../badge-list.component.ts | 2 +- .../src/badge-list/badge-list.module.ts | 13 +++++ .../src/badge-list/badge-list.stories.ts | 57 +++++++++++++++++++ libs/components/src/badge-list/index.ts | 1 + libs/components/src/badge/badge.module.ts | 10 ++-- libs/components/src/badge/badge.stories.ts | 34 +---------- libs/components/src/badge/index.ts | 2 +- libs/components/src/index.ts | 1 + 10 files changed, 84 insertions(+), 39 deletions(-) rename libs/components/src/{badge => badge-list}/badge-list.component.html (100%) rename libs/components/src/{badge => badge-list}/badge-list.component.ts (94%) create mode 100644 libs/components/src/badge-list/badge-list.module.ts create mode 100644 libs/components/src/badge-list/badge-list.stories.ts create mode 100644 libs/components/src/badge-list/index.ts diff --git a/apps/web/src/app/shared/shared.module.ts b/apps/web/src/app/shared/shared.module.ts index 43a63fa1b2a..af336ffa176 100644 --- a/apps/web/src/app/shared/shared.module.ts +++ b/apps/web/src/app/shared/shared.module.ts @@ -8,6 +8,7 @@ import { ToastrModule } from "ngx-toastr"; import { JslibModule } from "@bitwarden/angular/jslib.module"; import { + BadgeListModule, BadgeModule, ButtonModule, CalloutModule, @@ -44,6 +45,7 @@ import "./locales"; CalloutModule, ToastrModule, BadgeModule, + BadgeListModule, ButtonModule, MenuModule, FormFieldModule, @@ -62,6 +64,7 @@ import "./locales"; ReactiveFormsModule, RouterModule, BadgeModule, + BadgeListModule, ButtonModule, CalloutModule, ToastrModule, diff --git a/libs/components/src/badge/badge-list.component.html b/libs/components/src/badge-list/badge-list.component.html similarity index 100% rename from libs/components/src/badge/badge-list.component.html rename to libs/components/src/badge-list/badge-list.component.html diff --git a/libs/components/src/badge/badge-list.component.ts b/libs/components/src/badge-list/badge-list.component.ts similarity index 94% rename from libs/components/src/badge/badge-list.component.ts rename to libs/components/src/badge-list/badge-list.component.ts index 6d59b69bf05..c507dc2515a 100644 --- a/libs/components/src/badge/badge-list.component.ts +++ b/libs/components/src/badge-list/badge-list.component.ts @@ -1,6 +1,6 @@ import { Component, Input, OnChanges } from "@angular/core"; -import { BadgeTypes } from "./badge.directive"; +import { BadgeTypes } from "../badge"; @Component({ selector: "bit-badge-list", diff --git a/libs/components/src/badge-list/badge-list.module.ts b/libs/components/src/badge-list/badge-list.module.ts new file mode 100644 index 00000000000..d2a4ce211b1 --- /dev/null +++ b/libs/components/src/badge-list/badge-list.module.ts @@ -0,0 +1,13 @@ +import { NgModule } from "@angular/core"; + +import { BadgeModule } from "../badge"; +import { SharedModule } from "../shared"; + +import { BadgeListComponent } from "./badge-list.component"; + +@NgModule({ + imports: [SharedModule, BadgeModule], + exports: [BadgeListComponent], + declarations: [BadgeListComponent], +}) +export class BadgeListModule {} diff --git a/libs/components/src/badge-list/badge-list.stories.ts b/libs/components/src/badge-list/badge-list.stories.ts new file mode 100644 index 00000000000..c655e0eb510 --- /dev/null +++ b/libs/components/src/badge-list/badge-list.stories.ts @@ -0,0 +1,57 @@ +import { Meta, moduleMetadata, Story } from "@storybook/angular"; + +import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; + +import { BadgeModule, BadgeTypes } from "../badge"; +import { SharedModule } from "../shared"; +import { I18nMockService } from "../utils/i18n-mock.service"; + +import { BadgeListComponent } from "./badge-list.component"; + +export default { + title: "Component Library/Badge/List", + decorators: [ + moduleMetadata({ + imports: [SharedModule, BadgeModule], + declarations: [BadgeListComponent], + providers: [ + { + provide: I18nService, + useFactory: () => { + return new I18nMockService({ + plusNMore: (n) => `+ ${n} more`, + }); + }, + }, + ], + }), + ], + args: { + badgeType: "primary", + }, + argTypes: { + badgeType: { + options: ["primary", "secondary", "success", "danger", "warning", "info"] as BadgeTypes[], + control: { type: "inline-radio" }, + }, + }, + parameters: { + design: { + type: "figma", + url: "https://www.figma.com/file/f32LSg3jaegICkMu7rPARm/Tailwind-Component-Library-Update?node-id=1881%3A16956", + }, + }, +} as Meta; + +const ListTemplate: Story = (args: BadgeListComponent) => ({ + props: args, + template: ` + `, +}); + +export const Default = ListTemplate.bind({}); +Default.args = { + badgeType: "info", + maxItems: 3, + items: ["Badge 1", "Badge 2", "Badge 3", "Badge 4", "Badge 5"], +}; diff --git a/libs/components/src/badge-list/index.ts b/libs/components/src/badge-list/index.ts new file mode 100644 index 00000000000..087403c3e97 --- /dev/null +++ b/libs/components/src/badge-list/index.ts @@ -0,0 +1 @@ +export * from "./badge-list.module"; diff --git a/libs/components/src/badge/badge.module.ts b/libs/components/src/badge/badge.module.ts index f89929b0dd2..e1b8292363f 100644 --- a/libs/components/src/badge/badge.module.ts +++ b/libs/components/src/badge/badge.module.ts @@ -1,13 +1,11 @@ +import { CommonModule } from "@angular/common"; import { NgModule } from "@angular/core"; -import { SharedModule } from "../shared"; - -import { BadgeListComponent } from "./badge-list.component"; import { BadgeDirective } from "./badge.directive"; @NgModule({ - imports: [SharedModule], - exports: [BadgeDirective, BadgeListComponent], - declarations: [BadgeDirective, BadgeListComponent], + imports: [CommonModule], + exports: [BadgeDirective], + declarations: [BadgeDirective], }) export class BadgeModule {} diff --git a/libs/components/src/badge/badge.stories.ts b/libs/components/src/badge/badge.stories.ts index 9a0e4ee2d5c..983d52b626a 100644 --- a/libs/components/src/badge/badge.stories.ts +++ b/libs/components/src/badge/badge.stories.ts @@ -1,29 +1,14 @@ +import { CommonModule } from "@angular/common"; import { Meta, moduleMetadata, Story } from "@storybook/angular"; -import { I18nService } from "@bitwarden/common/abstractions/i18n.service"; - -import { SharedModule } from "../shared"; -import { I18nMockService } from "../utils/i18n-mock.service"; - -import { BadgeListComponent } from "./badge-list.component"; import { BadgeDirective, BadgeTypes } from "./badge.directive"; export default { title: "Component Library/Badge", decorators: [ moduleMetadata({ - imports: [SharedModule], - declarations: [BadgeDirective, BadgeListComponent], - providers: [ - { - provide: I18nService, - useFactory: () => { - return new I18nMockService({ - plusNMore: (n) => `+ ${n} more`, - }); - }, - }, - ], + imports: [CommonModule], + declarations: [BadgeDirective], }), ], args: { @@ -81,16 +66,3 @@ export const Info = Template.bind({}); Info.args = { badgeType: "info", }; - -const ListTemplate: Story = (args: BadgeListComponent) => ({ - props: args, - template: ` - `, -}); - -export const BadgeList = ListTemplate.bind({}); -BadgeList.args = { - badgeType: "info", - maxItems: 3, - items: ["Badge 1", "Badge 2", "Badge 3", "Badge 4", "Badge 5"], -}; diff --git a/libs/components/src/badge/index.ts b/libs/components/src/badge/index.ts index 0a709d152d2..574db348ba6 100644 --- a/libs/components/src/badge/index.ts +++ b/libs/components/src/badge/index.ts @@ -1,2 +1,2 @@ -export { BadgeDirective } from "./badge.directive"; +export { BadgeDirective, BadgeTypes } from "./badge.directive"; export * from "./badge.module"; diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts index 604d2316fd0..333cb68e157 100644 --- a/libs/components/src/index.ts +++ b/libs/components/src/index.ts @@ -1,4 +1,5 @@ export * from "./badge"; +export * from "./badge-list"; export * from "./banner"; export * from "./button"; export * from "./callout";