From bbed5ef7dd06202f92d41ed17a3ad8efc1145174 Mon Sep 17 00:00:00 2001
From: OZGCloud <ozgcloud@mgm-tp.com>
Date: Thu, 19 Sep 2024 13:02:15 +0200
Subject: [PATCH] OZG-3539 OZG-6755 rename popup to dropdown menu

---
 alfa-client/apps/admin/src/app/app.module.ts  |  8 +--
 ...er-profile-button-container.component.html |  8 +--
 ...profile-button-container.component.spec.ts |  6 +--
 alfa-client/libs/design-system/src/index.ts   |  4 +-
 .../dropdown-menu-item.component.spec.ts}     | 12 ++---
 .../dropdown-menu-item.component.ts}          |  4 +-
 .../dropdown-menu.component.spec.ts}          | 14 +++---
 .../dropdown-menu/dropdown-menu.component.ts} |  6 +--
 .../dropdown-menu/dropdown-menu.stories.ts}   | 49 ++++++++++---------
 .../popup-list-item.stories.ts                | 24 ---------
 10 files changed, 58 insertions(+), 77 deletions(-)
 rename alfa-client/libs/design-system/src/lib/{popup/popup-list-item/popup-list-item.component.spec.ts => dropdown-menu/dropdown-menu-item/dropdown-menu-item.component.spec.ts} (66%)
 rename alfa-client/libs/design-system/src/lib/{popup/popup-list-item/popup-list-item.component.ts => dropdown-menu/dropdown-menu-item/dropdown-menu-item.component.ts} (89%)
 rename alfa-client/libs/design-system/src/lib/{popup/popup/popup.component.spec.ts => dropdown-menu/dropdown-menu/dropdown-menu.component.spec.ts} (94%)
 rename alfa-client/libs/design-system/src/lib/{popup/popup/popup.component.ts => dropdown-menu/dropdown-menu/dropdown-menu.component.ts} (95%)
 rename alfa-client/libs/design-system/src/lib/{popup/popup/popup.stories.ts => dropdown-menu/dropdown-menu/dropdown-menu.stories.ts} (52%)
 delete mode 100644 alfa-client/libs/design-system/src/lib/popup/popup-list-item/popup-list-item.stories.ts

diff --git a/alfa-client/apps/admin/src/app/app.module.ts b/alfa-client/apps/admin/src/app/app.module.ts
index 0c4fd5127e..e9868f426a 100644
--- a/alfa-client/apps/admin/src/app/app.module.ts
+++ b/alfa-client/apps/admin/src/app/app.module.ts
@@ -15,13 +15,13 @@ import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import {
   AdminLogoIconComponent,
+  DropdownMenuComponent,
+  DropdownMenuItemComponent,
   LogoutIconComponent,
   MailboxIconComponent,
   NavItemComponent,
   NavbarComponent,
   OrgaUnitIconComponent,
-  PopupComponent,
-  PopupListItemComponent,
 } from '@ods/system';
 import { OAuthModule } from 'angular-oauth2-oidc';
 import { HttpUnauthorizedInterceptor } from 'libs/authentication/src/lib/http-unauthorized.interceptor';
@@ -44,8 +44,8 @@ import { appRoutes } from './app.routes';
   imports: [
     CommonModule,
     AdminLogoIconComponent,
-    PopupComponent,
-    PopupListItemComponent,
+    DropdownMenuComponent,
+    DropdownMenuItemComponent,
     NavItemComponent,
     NavbarComponent,
     OrgaUnitIconComponent,
diff --git a/alfa-client/apps/admin/src/common/user-profile-button-container/user-profile-button-container.component.html b/alfa-client/apps/admin/src/common/user-profile-button-container/user-profile-button-container.component.html
index 436ac2a767..5a8615c2b8 100644
--- a/alfa-client/apps/admin/src/common/user-profile-button-container/user-profile-button-container.component.html
+++ b/alfa-client/apps/admin/src/common/user-profile-button-container/user-profile-button-container.component.html
@@ -1,4 +1,4 @@
-<ods-popup buttonClass="rounded-full">
+<ods-dropdown-menu buttonClass="rounded-full">
   <div
     button-content
     role="img"
@@ -8,11 +8,11 @@
       {{ currentUserInitials }}
     </p>
   </div>
-  <ods-popup-list-item
+  <ods-dropdown-menu-item
     caption="Abmelden"
     (itemClicked)="authenticationService.logout()"
     data-test-id="popup-logout-button"
   >
     <ods-logout-icon icon />
-  </ods-popup-list-item>
-</ods-popup>
+  </ods-dropdown-menu-item>
+</ods-dropdown-menu>
diff --git a/alfa-client/apps/admin/src/common/user-profile-button-container/user-profile-button-container.component.spec.ts b/alfa-client/apps/admin/src/common/user-profile-button-container/user-profile-button-container.component.spec.ts
index 70c3249480..fdf43fddda 100644
--- a/alfa-client/apps/admin/src/common/user-profile-button-container/user-profile-button-container.component.spec.ts
+++ b/alfa-client/apps/admin/src/common/user-profile-button-container/user-profile-button-container.component.spec.ts
@@ -6,7 +6,7 @@ import {
 } from '@alfa-client/test-utils';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
-import { LogoutIconComponent, PopupComponent, PopupListItemComponent } from '@ods/system';
+import { DropdownMenuComponent, DropdownMenuItemComponent, LogoutIconComponent } from '@ods/system';
 import { AuthenticationService } from 'authentication';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
 import { MockComponent } from 'ng-mocks';
@@ -26,8 +26,8 @@ describe('UserProfileButtonContainerComponent', () => {
       declarations: [UserProfileButtonContainerComponent],
       imports: [
         RouterTestingModule,
-        MockComponent(PopupComponent),
-        MockComponent(PopupListItemComponent),
+        MockComponent(DropdownMenuComponent),
+        MockComponent(DropdownMenuItemComponent),
         MockComponent(LogoutIconComponent),
       ],
       providers: [
diff --git a/alfa-client/libs/design-system/src/index.ts b/alfa-client/libs/design-system/src/index.ts
index 8adc00f2d8..66a8edbf52 100644
--- a/alfa-client/libs/design-system/src/index.ts
+++ b/alfa-client/libs/design-system/src/index.ts
@@ -5,6 +5,8 @@ export * from './lib/bescheid-status-text/bescheid-status-text.component';
 export * from './lib/bescheid-wrapper/bescheid-wrapper.component';
 export * from './lib/button-card/button-card.component';
 export * from './lib/button/button.component';
+export * from './lib/dropdown-menu/dropdown-menu-item/dropdown-menu-item.component';
+export * from './lib/dropdown-menu/dropdown-menu/dropdown-menu.component';
 export * from './lib/form/error-message/error-message.component';
 export * from './lib/form/file-upload-button/file-upload-button.component';
 export * from './lib/form/radio-button-card/radio-button-card.component';
@@ -32,6 +34,4 @@ export * from './lib/instant-search/instant-search/instant-search.component';
 export * from './lib/instant-search/instant-search/instant-search.model';
 export * from './lib/navbar/nav-item/nav-item.component';
 export * from './lib/navbar/navbar/navbar.component';
-export * from './lib/popup/popup-list-item/popup-list-item.component';
-export * from './lib/popup/popup/popup.component';
 export * from './lib/testbtn/testbtn.component';
diff --git a/alfa-client/libs/design-system/src/lib/popup/popup-list-item/popup-list-item.component.spec.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-item/dropdown-menu-item.component.spec.ts
similarity index 66%
rename from alfa-client/libs/design-system/src/lib/popup/popup-list-item/popup-list-item.component.spec.ts
rename to alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-item/dropdown-menu-item.component.spec.ts
index 3d624f9674..ac287358b1 100644
--- a/alfa-client/libs/design-system/src/lib/popup/popup-list-item/popup-list-item.component.spec.ts
+++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-item/dropdown-menu-item.component.spec.ts
@@ -1,17 +1,17 @@
 import { dispatchEventFromFixture } from '@alfa-client/test-utils';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { PopupListItemComponent } from './popup-list-item.component';
+import { DropdownMenuItemComponent } from './dropdown-menu-item.component';
 
-describe('PopupListItemComponent', () => {
-  let component: PopupListItemComponent;
-  let fixture: ComponentFixture<PopupListItemComponent>;
+describe('DropdownMenuItemComponent', () => {
+  let component: DropdownMenuItemComponent;
+  let fixture: ComponentFixture<DropdownMenuItemComponent>;
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [PopupListItemComponent],
+      imports: [DropdownMenuItemComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(PopupListItemComponent);
+    fixture = TestBed.createComponent(DropdownMenuItemComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/alfa-client/libs/design-system/src/lib/popup/popup-list-item/popup-list-item.component.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-item/dropdown-menu-item.component.ts
similarity index 89%
rename from alfa-client/libs/design-system/src/lib/popup/popup-list-item/popup-list-item.component.ts
rename to alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-item/dropdown-menu-item.component.ts
index 3bc88c4c30..a35d268165 100644
--- a/alfa-client/libs/design-system/src/lib/popup/popup-list-item/popup-list-item.component.ts
+++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-item/dropdown-menu-item.component.ts
@@ -2,7 +2,7 @@ import { CommonModule } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 
 @Component({
-  selector: 'ods-popup-list-item',
+  selector: 'ods-dropdown-menu-item',
   standalone: true,
   imports: [CommonModule],
   template: `<button
@@ -14,7 +14,7 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
     <p class="text-text">{{ caption }}</p>
   </button>`,
 })
-export class PopupListItemComponent {
+export class DropdownMenuItemComponent {
   @Input({ required: true }) caption!: string;
 
   @Output() itemClicked: EventEmitter<MouseEvent> = new EventEmitter();
diff --git a/alfa-client/libs/design-system/src/lib/popup/popup/popup.component.spec.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.spec.ts
similarity index 94%
rename from alfa-client/libs/design-system/src/lib/popup/popup/popup.component.spec.ts
rename to alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.spec.ts
index fe6160acf3..e92f25cefc 100644
--- a/alfa-client/libs/design-system/src/lib/popup/popup/popup.component.spec.ts
+++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.spec.ts
@@ -1,19 +1,19 @@
 import { getElementFromFixture } from '@alfa-client/test-utils';
 import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { getDataTestIdOf } from 'libs/tech-shared/test/data-test';
-import { PopupComponent } from './popup.component';
+import { DropdownMenuComponent } from './dropdown-menu.component';
 
-describe('PopupComponent', () => {
-  let component: PopupComponent;
-  let fixture: ComponentFixture<PopupComponent>;
-  const popupButton: string = getDataTestIdOf('popup-button');
+describe('DropdownMenuComponent', () => {
+  let component: DropdownMenuComponent;
+  let fixture: ComponentFixture<DropdownMenuComponent>;
+  const popupButton: string = getDataTestIdOf('dropdown-button');
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      imports: [PopupComponent],
+      imports: [DropdownMenuComponent],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(PopupComponent);
+    fixture = TestBed.createComponent(DropdownMenuComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
   });
diff --git a/alfa-client/libs/design-system/src/lib/popup/popup/popup.component.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.ts
similarity index 95%
rename from alfa-client/libs/design-system/src/lib/popup/popup/popup.component.ts
rename to alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.ts
index 60adf09364..2e3c6a46a3 100644
--- a/alfa-client/libs/design-system/src/lib/popup/popup/popup.component.ts
+++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.ts
@@ -4,7 +4,7 @@ import { Component, ElementRef, HostListener, Input, ViewChild } from '@angular/
 import { twMerge } from 'tailwind-merge';
 
 @Component({
-  selector: 'ods-popup',
+  selector: 'ods-dropdown-menu',
   standalone: true,
   imports: [CommonModule, CdkTrapFocus],
   template: `<div class="relative w-fit">
@@ -14,7 +14,7 @@ import { twMerge } from 'tailwind-merge';
       [attr.aria-expanded]="isPopupOpen"
       aria-haspopup="true"
       [attr.aria-label]="label"
-      data-test-id="popup-button"
+      data-test-id="dropdown-button"
       #button
     >
       <ng-content select="[button-content]" />
@@ -33,7 +33,7 @@ import { twMerge } from 'tailwind-merge';
     </ul>
   </div>`,
 })
-export class PopupComponent {
+export class DropdownMenuComponent {
   @Input() alignTo: 'left' | 'right' = 'left';
   @Input() label: string = '';
   @Input() buttonClass: string = '';
diff --git a/alfa-client/libs/design-system/src/lib/popup/popup/popup.stories.ts b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.stories.ts
similarity index 52%
rename from alfa-client/libs/design-system/src/lib/popup/popup/popup.stories.ts
rename to alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.stories.ts
index 015112aabc..b6ff20dbc2 100644
--- a/alfa-client/libs/design-system/src/lib/popup/popup/popup.stories.ts
+++ b/alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.stories.ts
@@ -8,15 +8,20 @@ import {
 
 import { SaveIconComponent } from '../../icons/save-icon/save-icon.component';
 import { UserIconComponent } from '../../icons/user-icon/user-icon.component';
-import { PopupListItemComponent } from '../popup-list-item/popup-list-item.component';
-import { PopupComponent } from './popup.component';
+import { DropdownMenuItemComponent } from '../dropdown-menu-item/dropdown-menu-item.component';
+import { DropdownMenuComponent } from './dropdown-menu.component';
 
-const meta: Meta<PopupComponent> = {
-  title: 'Popup/Popup',
-  component: PopupComponent,
+const meta: Meta<DropdownMenuComponent> = {
+  title: 'Dropdown menu/Dropdown menu',
+  component: DropdownMenuComponent,
   decorators: [
     moduleMetadata({
-      imports: [PopupComponent, PopupListItemComponent, SaveIconComponent, UserIconComponent],
+      imports: [
+        DropdownMenuComponent,
+        DropdownMenuItemComponent,
+        SaveIconComponent,
+        UserIconComponent,
+      ],
     }),
     componentWrapperDecorator((story) => `<div class="flex justify-center mb-32">${story}</div>`),
   ],
@@ -25,7 +30,7 @@ const meta: Meta<PopupComponent> = {
 };
 
 export default meta;
-type Story = StoryObj<PopupComponent>;
+type Story = StoryObj<DropdownMenuComponent>;
 
 export const Default: Story = {
   args: { alignTo: 'left', label: '', buttonClass: '' },
@@ -42,37 +47,37 @@ export const Default: Story = {
   },
   render: (args) => ({
     props: args,
-    template: `<ods-popup ${argsToTemplate(args)}>
+    template: `<ods-dropdown-menu ${argsToTemplate(args)}>
         <ods-user-icon button-content />
-        <ods-popup-list-item caption="Lorem" />
-        <ods-popup-list-item caption="Ipsum" />
-        <ods-popup-list-item caption="Dolor" />
-      </ods-popup>`,
+        <ods-dropdown-menu-item caption="Lorem" />
+        <ods-dropdown-menu-item caption="Ipsum" />
+        <ods-dropdown-menu-item caption="Dolor" />
+      </ods-dropdown-menu>`,
   }),
 };
 
 export const LongText: Story = {
   render: (args) => ({
     props: args,
-    template: `<ods-popup ${argsToTemplate(args)}>
+    template: `<ods-dropdown-menu ${argsToTemplate(args)}>
         <p button-content>Trigger popup</p>
-        <ods-popup-list-item caption="Lorem" />
-        <ods-popup-list-item caption="Lorem ipsum dolor sit amet" />
-      </ods-popup>`,
+        <ods-dropdown-menu-item caption="Lorem" />
+        <ods-dropdown-menu-item caption="Lorem ipsum dolor sit amet" />
+      </ods-dropdown-menu>`,
   }),
 };
 
 export const ItemsWithIcons: Story = {
   render: (args) => ({
     props: args,
-    template: `<ods-popup ${argsToTemplate(args)}>
+    template: `<ods-dropdown-menu ${argsToTemplate(args)}>
         <p button-content>Trigger popup</p>
-        <ods-popup-list-item caption="Lorem">
+        <ods-dropdown-menu-item caption="Lorem">
           <ods-save-icon icon size="small" />
-        </ods-popup-list-item>
-        <ods-popup-list-item caption="Lorem ipsum dolor sit amet">
+        </ods-dropdown-menu-item>
+        <ods-dropdown-menu-item caption="Lorem ipsum dolor sit amet">
           <ods-save-icon icon size="small" />
-        </ods-popup-list-item>
-      </ods-popup>`,
+        </ods-dropdown-menu-item>
+      </ods-dropdown-menu>`,
   }),
 };
diff --git a/alfa-client/libs/design-system/src/lib/popup/popup-list-item/popup-list-item.stories.ts b/alfa-client/libs/design-system/src/lib/popup/popup-list-item/popup-list-item.stories.ts
deleted file mode 100644
index a28201314e..0000000000
--- a/alfa-client/libs/design-system/src/lib/popup/popup-list-item/popup-list-item.stories.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
-
-import { PopupListItemComponent } from './popup-list-item.component';
-
-const meta: Meta<PopupListItemComponent> = {
-  title: 'Popup/Popup list item',
-  component: PopupListItemComponent,
-  decorators: [
-    moduleMetadata({
-      imports: [PopupListItemComponent],
-    }),
-  ],
-  excludeStories: /.*Data$/,
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<PopupListItemComponent>;
-
-export const Default: Story = {
-  args: {
-    caption: 'List item',
-  },
-};
-- 
GitLab