Task/set up Storybook story for membership card component (#5300)

* Set up Storybook story for membership card component

* Update changelog

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Added
+
+- Added a _Storybook_ story for the membership card component
+
 ### Changed
 
 - Moved the support for changing the asset profile identifier (`dataSource` and `symbol`) in the asset profile details dialog of the admin control panel from experimental to general availability

libs/ui/src/lib/membership-card/membership-card.component.stories.ts

@@ -0,0 +1,50 @@
+import { CommonModule } from '@angular/common';
+import '@angular/localize/init';
+import { MatButtonModule } from '@angular/material/button';
+import { ActivatedRoute, RouterModule } from '@angular/router';
+import { IonIcon } from '@ionic/angular/standalone';
+import { moduleMetadata } from '@storybook/angular';
+import type { Meta, StoryObj } from '@storybook/angular';
+import { addYears } from 'date-fns';
+
+import { GfLogoComponent } from '../logo';
+import { GfMembershipCardComponent } from './membership-card.component';
+
+export default {
+  title: 'Membership Card',
+  component: GfMembershipCardComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [
+        CommonModule,
+        GfLogoComponent,
+        IonIcon,
+        MatButtonModule,
+        RouterModule.forChild([])
+      ],
+      providers: [{ provide: ActivatedRoute, useValue: {} }]
+    })
+  ],
+  argTypes: {
+    name: {
+      control: { type: 'select' },
+      options: ['Basic', 'Premium']
+    }
+  }
+} as Meta<GfMembershipCardComponent>;
+
+type Story = StoryObj<GfMembershipCardComponent>;
+
+export const Basic: Story = {
+  args: {
+    name: 'Basic'
+  }
+};
+
+export const Premium: Story = {
+  args: {
+    expiresAt: addYears(new Date(), 1).toLocaleDateString(),
+    hasPermissionToCreateApiKey: true,
+    name: 'Premium'
+  }
+};