Feature/add storybook story for logo component (#344)

* Add storybook story for logo component

* Update changelog

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
 

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';
 

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';
 

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';

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';

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';

libs/ui/src/lib/logo/index.ts

@@ -0,0 +1 @@
+export * from './logo.module';

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<LogoComponent>;
+
+const Template: Story<LogoComponent> = (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
+};

apps/client/src/app/components/logo/logo.component.ts → 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';
+  @HostBinding('class') @Input() size: 'large' | 'medium' = 'medium';
-  @Input() hideName: boolean;
+  @Input() hideName = false;
 
   public constructor() {}
 
   public ngOnInit() {
     this.hideName = this.hideName ?? false;
-    this.size = this.size ?? 'medium';
   }
 }