feat(isct-381): text with dropped list component (#348)

* chore(isct-381): start with TextWithDroppedListComponent

* chore(isct-381): added text styles in TextWithDroppedListComponent

* feat(isct-381): added dropped-list component

* ci(isct-381): added dropped-list component unit-tests

* chore(isct-381): re-arrange dropped-list component stories

* feat(isct-381): added text-with-dropped-list component

* feat(isct-381): added unit tests for text-with-dropped-list component

* chore(isct-381): code refactor for text-with-dropped-list component

* chore(isct-381): update unit test by changes

* chore(ci): check runner

* chore(ci): check runner revert

* chore(ci): check runner

* chore(ci): check runner

* chore(ci): check runner

* chore(ci): check runner

.github/workflows/deploy-storybook.yml

@@ -9,7 +9,7 @@ permissions:
 
 jobs:
   Deploy:
-    runs-on: [self-hosted, x64, linux, eks, us, demand, dev]
+    runs-on: [self-hosted, demand-amd64, dev]
     outputs:
       branch_name: ${{ steps.branch_name.outputs.branch }}
       folder_name: ${{ steps.branch_name.outputs.folder }}
@@ -72,7 +72,7 @@ jobs:
   notify-success:
     needs: Deploy
     if: ${{ always() && needs.Deploy.result == 'success'}}
-    runs-on: [self-hosted, x64, linux, eks, us, demand, dev]
+    runs-on: [self-hosted, demand-amd64, dev]
     steps:
 
       - name: 'Deploy success notify'

projects/fusion-ui/components/dropped-list/v4/dropped-list.component.html

@@ -0,0 +1,14 @@
+<ul class="fu-list-wrapper">
+    @for (listItem of list; track listItem){
+        <li class="fu-list-item">
+            @if (listItem.flag){
+                <fusion-flag [countryCode]="listItem.flag"></fusion-flag>
+            }
+            @if (listItem.imageUrl){
+                <img class="fu-list-item-image" [src]="listItem.imageUrl" alt="listItem.label" loading="lazy">
+            }
+            <div class="fu-list-item-label truncate" [fusionTooltip]="listItem.label">{{listItem.label}}</div>
+        </li>
+    }
+</ul>
+

projects/fusion-ui/components/dropped-list/v4/dropped-list.component.scss

@@ -0,0 +1,41 @@
+@import '../../../src/style/scss/v4/vars/vars';
+@import '../../../src/style/scss/v4/mixins/mixins';
+
+:host {
+  @extend %reset;
+
+  .fu-list-wrapper{
+    display: flex;
+    flex-direction: column;
+    width: var(--fu-item-list-width, 224px);
+    padding: var(--fu-item-list-padding, 0 8px);
+    margin: 0;
+    list-style-type: none;
+    border-radius: var(--fu-item-list-border-radius, 8px);
+    border: var(--fu-item-list-border, 1px solid var(--common-divider, #{$color-v4-common-divider}));
+    box-shadow: var(--fu-item-list-box-shadow, #{$boxShadowV4-MD});
+    background-color: var(--fu-item-list-background-color, var(--background-default, #{$color-v4-background-default}));
+    max-height: var(--fu-item-list-max-height, 210px);
+    overflow-x: hidden;
+    overflow-y: auto;
+    --fu-custom-scroll-bg-color: transparent;
+    @extend %customScroll;
+
+    .fu-list-item{
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      @extend %font-v4-body-2;
+      color: var(--fu-item-color, var(--text-primary, #{$color-v4-text-primary}));
+      padding: var(--fu-item-padding, 6px 8px);
+
+      .fu-list-item-image{
+        @include size(20px);
+        border-radius: 4px;
+      }
+    }
+  }
+  .truncate{
+    @extend %truncate;
+  }
+}

projects/fusion-ui/components/dropped-list/v4/dropped-list.component.spec.ts

@@ -0,0 +1,79 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DroppedListComponent } from './dropped-list.component';
+import {
+  APPLICATION_LIST_OPTIONS,
+  BASE_LIST_OPTIONS,
+  COUNTRY_LIST_OPTIONS
+} from "@ironsource/fusion-ui/components/dropped-list/v4/dropped-list.mock";
+
+describe('DroppedListComponent', () => {
+  let component: DroppedListComponent;
+  let fixture: ComponentFixture<DroppedListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [DroppedListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(DroppedListComponent);
+    component = fixture.componentInstance;
+    component.list = BASE_LIST_OPTIONS;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should has li list elements', () => {
+    const itemsEl = fixture.nativeElement.querySelectorAll('li');
+    expect(itemsEl.length).toBe(BASE_LIST_OPTIONS.length);
+  });
+
+  it('should has li item with text', () => {
+    const itemsEl = fixture.nativeElement.querySelectorAll('li');
+    itemsEl.forEach((item, index) => {
+      expect(item.textContent).toBe(BASE_LIST_OPTIONS[index].label);
+    });
+  });
+
+  describe('DroppedListComponent with countries', () => {
+    beforeEach(async () => {
+      fixture = TestBed.createComponent(DroppedListComponent);
+      component = fixture.componentInstance;
+      component.list = COUNTRY_LIST_OPTIONS;
+      fixture.detectChanges();
+    });
+
+    it('should has li item with Country flag and name', () => {
+      const itemsEl = fixture.nativeElement.querySelectorAll('li');
+      itemsEl.forEach((item, index) => {
+        const flagEl = item.querySelector('fusion-flag');
+        expect(flagEl.getAttribute('ng-reflect-country-code')).toBe(COUNTRY_LIST_OPTIONS[index].flag);
+        expect(item.textContent).toBe(COUNTRY_LIST_OPTIONS[index].label);
+      });
+    });
+  });
+
+  describe('DroppedListComponent with applications', () => {
+    beforeEach(async () => {
+      fixture = TestBed.createComponent(DroppedListComponent);
+      component = fixture.componentInstance;
+      component.list = APPLICATION_LIST_OPTIONS;
+      fixture.detectChanges();
+    });
+
+    it('should has li item with application image and name', () => {
+      const itemsEl = fixture.nativeElement.querySelectorAll('li');
+      itemsEl.forEach((item, index) => {
+        const appImageEl = item.querySelector('img.fu-list-item-image');
+        expect(appImageEl.getAttribute('src')).toBe(APPLICATION_LIST_OPTIONS[index].imageUrl);
+        expect(item.textContent).toBe(APPLICATION_LIST_OPTIONS[index].label);
+      });
+    });
+  });
+
+
+});

projects/fusion-ui/components/dropped-list/v4/dropped-list.component.stories.ts

@@ -0,0 +1,40 @@
+import {componentWrapperDecorator, Meta, moduleMetadata, StoryObj} from '@storybook/angular';
+import {CommonModule} from '@angular/common';
+import {APPLICATION_LIST_OPTIONS, BASE_LIST_OPTIONS, COUNTRY_LIST_OPTIONS} from './dropped-list.mock';
+import {DroppedListComponent} from './dropped-list.component';
+import {SvgModule} from '@ironsource/fusion-ui/components/svg';
+import {environment} from '../../../../../stories/environments/environment';
+import {FlagComponent} from '@ironsource/fusion-ui/components/flag/v4';
+import {TooltipDirective} from '@ironsource/fusion-ui/components/tooltip/v4';
+
+export default {
+    title: 'V4/Components/DataDisplay/Text with dropped list/Dropped List',
+    component: DroppedListComponent,
+    decorators: [
+        moduleMetadata({
+            declarations: [],
+            imports: [CommonModule, SvgModule.forRoot({assetsPath: environment.assetsPath}), FlagComponent, TooltipDirective]
+        }),
+        componentWrapperDecorator(story => `<div style="width: fit-content;">${story}</div>`)
+    ],
+    tags: ['autodocs'],
+    parameters: {
+        options: {
+            showPanel: true,
+            panelPosition: 'bottom'
+        }
+    },
+    args: {
+        list: BASE_LIST_OPTIONS
+    }
+} as Meta<DroppedListComponent>;
+
+type Story = StoryObj<DroppedListComponent>;
+
+export const Basic: Story = {};
+
+export const WithApplication: Story = {};
+WithApplication.args = {list: APPLICATION_LIST_OPTIONS};
+
+export const WithFlag: Story = {};
+WithFlag.args = {list: COUNTRY_LIST_OPTIONS};

projects/fusion-ui/components/dropped-list/v4/dropped-list.component.ts

@@ -0,0 +1,17 @@
+import {ChangeDetectionStrategy, Component, Input} from '@angular/core';
+import {DroppedListOption} from './dropped-list.entities';
+import {FlagComponent} from '@ironsource/fusion-ui/components/flag/v4';
+import {TooltipDirective} from '@ironsource/fusion-ui/components/tooltip/v4';
+
+@Component({
+    selector: 'fusion-dropped-list',
+    standalone: true,
+    host: {class: 'fusion-v4'},
+    imports: [FlagComponent, TooltipDirective],
+    templateUrl: './dropped-list.component.html',
+    styleUrl: './dropped-list.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DroppedListComponent {
+    @Input() list: DroppedListOption[] = [];
+}

projects/fusion-ui/components/dropped-list/v4/dropped-list.entities.ts

@@ -0,0 +1,8 @@
+import {CountryCode} from '@ironsource/fusion-ui/components/flag/v4';
+
+export interface DroppedListOption {
+    id?: string | number;
+    label: string;
+    flag?: CountryCode;
+    imageUrl?: string;
+}

projects/fusion-ui/components/dropped-list/v4/dropped-list.mock.ts

@@ -0,0 +1,19 @@
+import {
+    MOCK_OPTIONS_COUNTRIES,
+    MOK_APPLICATIONS_ONE_LINE_OPTIONS
+} from '@ironsource/fusion-ui/components/dropdown/v3/stories/dropdown.mock';
+import {CountryCode} from '@ironsource/fusion-ui/components/flag/v4';
+
+export const BASE_LIST_OPTIONS = new Array(10).fill(null).map((_, index) => ({
+    label: `Option ${index + 1}`
+}));
+
+export const COUNTRY_LIST_OPTIONS = MOCK_OPTIONS_COUNTRIES.map(country => ({
+    flag: country.flag.toLowerCase() as CountryCode,
+    label: country.title
+}));
+
+export const APPLICATION_LIST_OPTIONS = MOK_APPLICATIONS_ONE_LINE_OPTIONS.map(country => ({
+    label: country.displayText,
+    imageUrl: country.image
+}));

projects/fusion-ui/components/dropped-list/v4/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

projects/fusion-ui/components/dropped-list/v4/ng-package.json

@@ -0,0 +1,7 @@
+{
+    "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    },
+    "allowedNonPeerDependencies": ["."]
+}

projects/fusion-ui/components/dropped-list/v4/public-api.ts

@@ -0,0 +1,2 @@
+export * from './dropped-list.component';
+export * from './dropped-list.entities';

projects/fusion-ui/components/text-with-dropped-list/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

projects/fusion-ui/components/text-with-dropped-list/ng-package.json

@@ -0,0 +1,7 @@
+{
+    "$schema": "../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    },
+    "allowedNonPeerDependencies": ["."]
+}

projects/fusion-ui/components/text-with-dropped-list/public-api.ts

@@ -0,0 +1 @@
+export * from './v4';

projects/fusion-ui/components/text-with-dropped-list/v4/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

projects/fusion-ui/components/text-with-dropped-list/v4/ng-package.json

@@ -0,0 +1,7 @@
+{
+    "$schema": "../../../../../node_modules/ng-packagr/ng-package.schema.json",
+    "lib": {
+        "entryFile": "public-api.ts"
+    },
+    "allowedNonPeerDependencies": ["."]
+}

projects/fusion-ui/components/text-with-dropped-list/v4/public-api.ts

@@ -0,0 +1 @@
+export * from './text-with-dropped-list.component';

projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.html

@@ -0,0 +1,7 @@
+<div class="fu-text">{{text}}</div>
+@if (showedList$ | async){
+    <fusion-dropped-list
+            class="fu-dropped-list"
+            [list]="list"
+    />
+}

projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.scss

@@ -0,0 +1,46 @@
+@import '../../../src/style/scss/v4/vars/vars';
+@import '../../../src/style/scss/v4/mixins/mixins';
+
+:host {
+  @extend %reset;
+
+  --fu-text-color: var(--text-primary, #{$color-v4-text-primary});
+  --fu-text-disabled-color: var(--text-disabled, #{$color-v4-text-disabled});
+  --fu-text-border-width: 1px;
+  --fu-text-border-type: dashed;
+  --fu-text-border-color: var(--text-secondary, #{$color-v4-text-secondary});
+  --fu-text-disabled-border-color: var(--text-disabled, #{$color-v4-text-disabled});
+
+  display: flex;
+  width: fit-content;
+  align-items: center;
+  position: relative;
+
+  .fu-text{
+    @extend %font-v4-body-1;
+    color: var(--fu-text-color);
+    border-bottom: var(--fu-text-border-width) var(--fu-text-border-type) var(--fu-text-border-color);
+    cursor: default;
+  }
+
+  &.fu-small{
+    .fu-text{
+      @extend %font-v4-body-2;
+    }
+  }
+  &.fu-disabled{
+    pointer-events: none;
+    .fu-text{
+      pointer-events: none;
+      color: var(--fu-text-disabled-color);
+      border-bottom-color: var(--fu-text-disabled-border-color);
+    }
+  }
+
+  .fu-dropped-list{
+    position: absolute;
+    top: calc(100% + 4px);
+    right: var(--fu-dropped-list-right);
+    z-index: getZIndexLayerOffset(notification, 3);
+  }
+}

projects/fusion-ui/components/text-with-dropped-list/v4/text-with-dropped-list.component.spec.ts

@@ -0,0 +1,45 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { TextWithDroppedListComponent } from './text-with-dropped-list.component';
+import {BASE_LIST_OPTIONS} from "@ironsource/fusion-ui/components/dropped-list/v4/dropped-list.mock";
+
+const TEXT = 'Test text';
+
+describe('TextWithDroppedListComponent', () => {
+  let component: TextWithDroppedListComponent;
+  let fixture: ComponentFixture<TextWithDroppedListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TextWithDroppedListComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(TextWithDroppedListComponent);
+    component = fixture.componentInstance;
+    component.text = TEXT;
+    component.list = BASE_LIST_OPTIONS
+    component.size = 'small';
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should have text', () => {
+    const textEl = fixture.nativeElement.querySelector('.fu-text');
+    expect(textEl).toBeTruthy();
+    expect(textEl.textContent).toBe(TEXT);
+  });
+
+  it('should have class small', () => {
+    expect(fixture.nativeElement.classList).toContain('fu-small')
+  });
+
+  it('should have list on mouseenter', () => {
+    fixture.nativeElement.dispatchEvent(new Event('mouseenter'));
+    fixture.detectChanges();
+    const droppedListEl = fixture.nativeElement.querySelector('.fu-dropped-list');
+    expect(droppedListEl).toBeTruthy();
+  });
+});