Feature/add reusable premium indicator component (#1041)

* Add premium indicator component

* Update changelog

libs/ui/src/lib/no-transactions-info/no-transactions-info.component.stories.ts

@@ -1,3 +1,4 @@
+import { RouterTestingModule } from '@angular/router/testing';
 import { GfLogoModule } from '@ghostfolio/ui/logo';
 import { Meta, Story, moduleMetadata } from '@storybook/angular';
 
@@ -8,7 +9,7 @@ export default {
   component: NoTransactionsInfoComponent,
   decorators: [
     moduleMetadata({
-      imports: [GfLogoModule]
+      imports: [GfLogoModule, RouterTestingModule]
     })
   ]
 } as Meta<NoTransactionsInfoComponent>;

libs/ui/src/lib/premium-indicator/index.ts

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

libs/ui/src/lib/premium-indicator/premium-indicator.component.html

@@ -0,0 +1,6 @@
+<a
+  class="align-items-center d-flex"
+  [ngStyle]="{ 'pointer-events': enableLink ? 'initial' : 'none' }"
+  [routerLink]="['/pricing']"
+  ><ion-icon class="text-muted" name="diamond-outline"></ion-icon
+></a>

libs/ui/src/lib/premium-indicator/premium-indicator.component.scss

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

libs/ui/src/lib/premium-indicator/premium-indicator.component.stories.ts

@@ -0,0 +1,29 @@
+import { CommonModule } from '@angular/common';
+import { RouterTestingModule } from '@angular/router/testing';
+import { Meta, Story, moduleMetadata } from '@storybook/angular';
+
+import { PremiumIndicatorComponent } from './premium-indicator.component';
+
+export default {
+  title: 'Premium Indicator',
+  component: PremiumIndicatorComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [CommonModule, RouterTestingModule]
+    })
+  ]
+} as Meta<PremiumIndicatorComponent>;
+
+const Template: Story<PremiumIndicatorComponent> = (
+  args: PremiumIndicatorComponent
+) => ({
+  props: args
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const WithoutLink = Template.bind({});
+WithoutLink.args = {
+  enableLink: false
+};

libs/ui/src/lib/premium-indicator/premium-indicator.component.ts

@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'gf-premium-indicator',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  templateUrl: './premium-indicator.component.html',
+  styleUrls: ['./premium-indicator.component.scss']
+})
+export class PremiumIndicatorComponent {
+  @Input() enableLink = true;
+
+  public constructor() {}
+}

libs/ui/src/lib/premium-indicator/premium-indicator.module.ts

@@ -0,0 +1,14 @@
+import { CommonModule } from '@angular/common';
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { RouterModule } from '@angular/router';
+
+import { PremiumIndicatorComponent } from './premium-indicator.component';
+
+@NgModule({
+  declarations: [PremiumIndicatorComponent],
+  exports: [PremiumIndicatorComponent],
+  imports: [CommonModule, RouterModule],
+  providers: [],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class GfPremiumIndicatorModule {}