OZG-3539 OZG-6755 rename popup to dropdown menu

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,

alfa-client/apps/admin/src/common/user-profile-button-container/user-profile-button-container.component.html

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

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: [

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

alfa-client/libs/design-system/src/lib/popup/popup-list-item/popup-list-item.component.spec.ts → alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu-item/dropdown-menu-item.component.spec.ts

 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();
   });

alfa-client/libs/design-system/src/lib/popup/popup-list-item/popup-list-item.component.ts → 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();

alfa-client/libs/design-system/src/lib/popup/popup/popup.component.spec.ts → alfa-client/libs/design-system/src/lib/dropdown-menu/dropdown-menu/dropdown-menu.component.spec.ts

 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();
   });

alfa-client/libs/design-system/src/lib/popup/popup/popup.component.ts → 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 = '';

alfa-client/libs/design-system/src/lib/popup/popup/popup.stories.ts → 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>`,
   }),
 };

alfa-client/libs/design-system/src/lib/popup/popup-list-item/popup-list-item.stories.ts

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