OZG-6101 OZG-6194 Add popup logic

alfa-client/libs/design-system/src/index.ts

@@ -21,4 +21,6 @@ export * from './lib/icons/save-icon/save-icon.component';
 export * from './lib/icons/send-icon/send-icon.component';
 export * from './lib/icons/spinner-icon/spinner-icon.component';
 export * from './lib/icons/stamp-icon/stamp-icon.component';
+export * from './lib/popup/popup-layer/popup-layer.component';
+export * from './lib/popup/popup-list-item/popup-list-item.component';
 export * from './lib/testbtn/testbtn.component';

alfa-client/libs/design-system/src/lib/popup/popup-layer/popup-layer.component.spec.ts

@@ -18,4 +18,22 @@ describe('PopupLayerComponent', () => {
   it('should create', () => {
     expect(component).toBeTruthy();
   });
+
+  describe('toggleShowPopupList', () => {
+    it('should change false to true', () => {
+      component.showPopupList = false;
+
+      component.toggleShowPopupList();
+
+      expect(component.showPopupList).toBe(true);
+    });
+
+    it('should change true to false', () => {
+      component.showPopupList = true;
+
+      component.toggleShowPopupList();
+
+      expect(component.showPopupList).toBe(false);
+    });
+  });
 });

alfa-client/libs/design-system/src/lib/popup/popup-layer/popup-layer.component.ts

 import { CommonModule } from '@angular/common';
-import { Component } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'ods-popup-layer',
   standalone: true,
   imports: [CommonModule],
-  template: `<div>
-    <button>
+  template: `<div class="relative w-fit">
+    <button class="w-fit" (click)="toggleShowPopupList()">
       <ng-content select="[button]" />
     </button>
-    <ul class="rounded shadow-lg">
+    <ul
+      *ngIf="showPopupList"
+      class="animate-fadeIn absolute min-w-44 max-w-80 rounded shadow-lg shadow-grayborder"
+      [ngClass]="alignTo === 'left' ? 'right-0' : 'left-0'"
+    >
       <ng-content />
     </ul>
   </div>`,
 })
-export class PopupLayerComponent {}
+export class PopupLayerComponent {
+  @Input() alignTo: 'left' | 'right' = 'left';
+
+  showPopupList: boolean = false;
+
+  toggleShowPopupList() {
+    this.showPopupList = !this.showPopupList;
+  }
+}

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

-import { moduleMetadata, type Meta, type StoryObj } from '@storybook/angular';
+import {
+  argsToTemplate,
+  componentWrapperDecorator,
+  moduleMetadata,
+  type Meta,
+  type StoryObj,
+} from '@storybook/angular';
 
 import { PopupListItemComponent } from '../popup-list-item/popup-list-item.component';
 import { PopupLayerComponent } from './popup-layer.component';
@@ -10,6 +16,7 @@ const meta: Meta<PopupLayerComponent> = {
     moduleMetadata({
       imports: [PopupLayerComponent, PopupListItemComponent],
     }),
+    componentWrapperDecorator((story) => `<div class="flex justify-center mb-20">${story}</div>`),
   ],
   excludeStories: /.*Data$/,
   tags: ['autodocs'],
@@ -19,8 +26,19 @@ export default meta;
 type Story = StoryObj<PopupLayerComponent>;
 
 export const Default: Story = {
-  render: () => ({
-    template: `<ods-popup-layer>
+  args: { alignTo: 'left' },
+  argTypes: {
+    alignTo: {
+      control: 'select',
+      options: ['left', 'right'],
+      table: {
+        defaultValue: { summary: 'left' },
+      },
+    },
+  },
+  render: (args) => ({
+    props: args,
+    template: `<ods-popup-layer ${argsToTemplate(args)}>
         <p button>Trigger popup</p>
         <ods-popup-list-item caption="Lorem" />
         <ods-popup-list-item caption="Ipsum" />

alfa-client/libs/design-system/src/lib/tailwind-preset/tailwind.config.js

@@ -13,7 +13,11 @@ module.exports = {
   darkMode: 'class',
   theme: {
     extend: {
-      animation: { dash: 'dash 1.5s ease-in-out infinite', 'spin-slow': 'spin 2s linear infinite' },
+      animation: {
+        dash: 'dash 1.5s ease-in-out infinite',
+        'spin-slow': 'spin 2s linear infinite',
+        fadeIn: 'fade-in 0.2s ease-in-out 1',
+      },
       keyframes: {
         dash: {
           from: {
@@ -29,6 +33,14 @@ module.exports = {
             'stroke-dashoffset': '-49',
           },
         },
+        'fade-in': {
+          '0%': {
+            opacity: 0,
+          },
+          '100%': {
+            opacity: 1,
+          },
+        },
       },
       borderWidth: {
         3: '3px',