diff --git a/alfa-client/apps/admin/src/app/app.module.ts b/alfa-client/apps/admin/src/app/app.module.ts index 0c4fd5127eaa8546579fdd4268244081b370da46..e9868f426a87d94c943e79534a14d117a60bcd97 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 436ac2a76728c0b0b9b9da7d5e67d8bc0765a98d..5a8615c2b8e3a086b9c120a8b3bd559026f06308 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 70c324948070f3e79d92bf51dca0f8f8f577d821..fdf43fddda45e553a07c2048650a65530d03d889 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 8adc00f2d8215c5f947d879874ed17e6f190184a..66a8edbf5276fb89aeef9d1754b943ef5e17188f 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 3d624f9674b26a1f03a2e024f0139f9eb8230746..ac287358b10a9a5bbc1e4095a568c1e4435c6e0a 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 3bc88c4c30db6091ccf72a4e3658972fe4f117b6..a35d2681656a4e30254d4b8543b040660fac37ae 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 fe6160acf32b4e63623ac2996b32f6222e377188..e92f25cefc12b32010640735451b62b6ea8db50a 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 60adf093640b07510296fab35c0a6e4fbb3650e9..2e3c6a46a37205524f9b2453cdf12c1cc4125002 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 015112aabc92eee9b30ec4ab36ab84cce8da850c..b6ff20dbc244451b92c5bfd93ce5460eafc39022 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 a28201314e94cc47b348fd9082f158ec06326174..0000000000000000000000000000000000000000 --- 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', - }, -};