From 21ed91d184f616206ca9ffd8c5d0317e0a95b6b8 Mon Sep 17 00:00:00 2001 From: Thomas Kaul <4159106+dtslvr@users.noreply.github.com> Date: Sun, 5 Sep 2021 08:03:32 +0200 Subject: [PATCH] Feature/add storybook story for logo component (#344) * Add storybook story for logo component * Update changelog --- CHANGELOG.md | 3 +- .../app/components/header/header.module.ts | 2 +- .../no-transactions-info.module.ts | 2 +- .../app/pages/landing/landing-page.module.ts | 2 +- .../pages/register/register-page.module.ts | 2 +- .../pages/webauthn/webauthn-page.module.ts | 2 +- libs/ui/src/lib/logo/index.ts | 1 + .../ui/src/lib}/logo/logo.component.html | 0 .../ui/src/lib}/logo/logo.component.scss | 0 .../ui/src/lib/logo/logo.component.stories.ts | 30 +++++++++++++++++++ .../ui/src/lib}/logo/logo.component.ts | 5 ++-- .../ui/src/lib}/logo/logo.module.ts | 0 12 files changed, 40 insertions(+), 9 deletions(-) create mode 100644 libs/ui/src/lib/logo/index.ts rename {apps/client/src/app/components => libs/ui/src/lib}/logo/logo.component.html (100%) rename {apps/client/src/app/components => libs/ui/src/lib}/logo/logo.component.scss (100%) create mode 100644 libs/ui/src/lib/logo/logo.component.stories.ts rename {apps/client/src/app/components => libs/ui/src/lib}/logo/logo.component.ts (76%) rename {apps/client/src/app/components => libs/ui/src/lib}/logo/logo.module.ts (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index fbd855281..74fe4f486 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,7 +11,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Extended the statistics section on the about page by the _GitHub_ contributors count - Set up _Storybook_ -- Added a story for the value component + - Added a story for the logo component + - Added a story for the value component ## 1.45.0 - 04.09.2021 diff --git a/apps/client/src/app/components/header/header.module.ts b/apps/client/src/app/components/header/header.module.ts index c8f72b43c..611f26fcf 100644 --- a/apps/client/src/app/components/header/header.module.ts +++ b/apps/client/src/app/components/header/header.module.ts @@ -5,7 +5,7 @@ import { MatMenuModule } from '@angular/material/menu'; import { MatToolbarModule } from '@angular/material/toolbar'; import { RouterModule } from '@angular/router'; import { LoginWithAccessTokenDialogModule } from '@ghostfolio/client/components/login-with-access-token-dialog/login-with-access-token-dialog.module'; -import { GfLogoModule } from '@ghostfolio/client/components/logo/logo.module'; +import { GfLogoModule } from '@ghostfolio/ui/logo'; import { HeaderComponent } from './header.component'; diff --git a/apps/client/src/app/components/no-transactions-info/no-transactions-info.module.ts b/apps/client/src/app/components/no-transactions-info/no-transactions-info.module.ts index 917beb579..78cda4ff9 100644 --- a/apps/client/src/app/components/no-transactions-info/no-transactions-info.module.ts +++ b/apps/client/src/app/components/no-transactions-info/no-transactions-info.module.ts @@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common'; import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { RouterModule } from '@angular/router'; -import { GfLogoModule } from '@ghostfolio/client/components/logo/logo.module'; +import { GfLogoModule } from '@ghostfolio/ui/logo'; import { NoTransactionsInfoComponent } from './no-transactions-info.component'; diff --git a/apps/client/src/app/pages/landing/landing-page.module.ts b/apps/client/src/app/pages/landing/landing-page.module.ts index 9f9e218c9..9c9cec781 100644 --- a/apps/client/src/app/pages/landing/landing-page.module.ts +++ b/apps/client/src/app/pages/landing/landing-page.module.ts @@ -3,7 +3,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { RouterModule } from '@angular/router'; import { GfLineChartModule } from '@ghostfolio/client/components/line-chart/line-chart.module'; -import { GfLogoModule } from '@ghostfolio/client/components/logo/logo.module'; +import { GfLogoModule } from '@ghostfolio/ui/logo'; import { LandingPageRoutingModule } from './landing-page-routing.module'; import { LandingPageComponent } from './landing-page.component'; diff --git a/apps/client/src/app/pages/register/register-page.module.ts b/apps/client/src/app/pages/register/register-page.module.ts index eece7e6ea..9e836335e 100644 --- a/apps/client/src/app/pages/register/register-page.module.ts +++ b/apps/client/src/app/pages/register/register-page.module.ts @@ -3,7 +3,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatCardModule } from '@angular/material/card'; import { RouterModule } from '@angular/router'; -import { GfLogoModule } from '@ghostfolio/client/components/logo/logo.module'; +import { GfLogoModule } from '@ghostfolio/ui/logo'; import { RegisterPageRoutingModule } from './register-page-routing.module'; import { RegisterPageComponent } from './register-page.component'; diff --git a/apps/client/src/app/pages/webauthn/webauthn-page.module.ts b/apps/client/src/app/pages/webauthn/webauthn-page.module.ts index c923b0dc5..44aed99b7 100644 --- a/apps/client/src/app/pages/webauthn/webauthn-page.module.ts +++ b/apps/client/src/app/pages/webauthn/webauthn-page.module.ts @@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; import { MatButtonModule } from '@angular/material/button'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner'; -import { GfLogoModule } from '@ghostfolio/client/components/logo/logo.module'; +import { GfLogoModule } from '@ghostfolio/ui/logo'; import { WebauthnPageComponent } from '@ghostfolio/client/pages/webauthn/webauthn-page.component'; import { WebauthnPageRoutingModule } from './webauthn-page-routing.module'; diff --git a/libs/ui/src/lib/logo/index.ts b/libs/ui/src/lib/logo/index.ts new file mode 100644 index 000000000..a02a37ec8 --- /dev/null +++ b/libs/ui/src/lib/logo/index.ts @@ -0,0 +1 @@ +export * from './logo.module'; diff --git a/apps/client/src/app/components/logo/logo.component.html b/libs/ui/src/lib/logo/logo.component.html similarity index 100% rename from apps/client/src/app/components/logo/logo.component.html rename to libs/ui/src/lib/logo/logo.component.html diff --git a/apps/client/src/app/components/logo/logo.component.scss b/libs/ui/src/lib/logo/logo.component.scss similarity index 100% rename from apps/client/src/app/components/logo/logo.component.scss rename to libs/ui/src/lib/logo/logo.component.scss diff --git a/libs/ui/src/lib/logo/logo.component.stories.ts b/libs/ui/src/lib/logo/logo.component.stories.ts new file mode 100644 index 000000000..ca9530eb8 --- /dev/null +++ b/libs/ui/src/lib/logo/logo.component.stories.ts @@ -0,0 +1,30 @@ +import { Meta, Story, moduleMetadata } from '@storybook/angular'; + +import { LogoComponent } from './logo.component'; + +export default { + title: 'Logo', + component: LogoComponent, + decorators: [ + moduleMetadata({ + imports: [] + }) + ] +} as Meta; + +const Template: Story = (args: LogoComponent) => ({ + props: args +}); + +export const Default = Template.bind({}); +Default.args = {}; + +export const Large = Template.bind({}); +Large.args = { + size: 'large' +}; + +export const NoName = Template.bind({}); +NoName.args = { + hideName: true +}; diff --git a/apps/client/src/app/components/logo/logo.component.ts b/libs/ui/src/lib/logo/logo.component.ts similarity index 76% rename from apps/client/src/app/components/logo/logo.component.ts rename to libs/ui/src/lib/logo/logo.component.ts index 441f12e92..97947891e 100644 --- a/apps/client/src/app/components/logo/logo.component.ts +++ b/libs/ui/src/lib/logo/logo.component.ts @@ -13,13 +13,12 @@ import { styleUrls: ['./logo.component.scss'] }) export class LogoComponent implements OnInit { - @HostBinding('class') @Input() size: 'large' | 'medium'; - @Input() hideName: boolean; + @HostBinding('class') @Input() size: 'large' | 'medium' = 'medium'; + @Input() hideName = false; public constructor() {} public ngOnInit() { this.hideName = this.hideName ?? false; - this.size = this.size ?? 'medium'; } } diff --git a/apps/client/src/app/components/logo/logo.module.ts b/libs/ui/src/lib/logo/logo.module.ts similarity index 100% rename from apps/client/src/app/components/logo/logo.module.ts rename to libs/ui/src/lib/logo/logo.module.ts