chore(fg-169): sync and fixes with release/5.x.x branch

ironSource · Sep 20, 2023 · 850a1db · 850a1db
1 parent 329729a
commit 850a1db
Show file tree

Hide file tree

Showing 16 changed files with 314 additions and 28 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -1,5 +1,5 @@
 <link rel="stylesheet" href="https://fusion.ironsrc.net/Angular_14/v26/styles.5859cbb869f0ab3e.css">
-<link rel="stylesheet" href="https://fusion-ui.s3.eu-west-1.amazonaws.com/release/5.6.8/style/v4/fonts.css">
+<link rel="stylesheet" href="https://fusion-ui.s3.eu-west-1.amazonaws.com/release/5.7.7/style/v4/fonts.css">
 
 <style>
     body {
@@ -60,6 +60,36 @@
     }
     /* endregion */
 
+    /* region shadows */
+    .fu-shadow-xs{box-shadow:0px 1px 2px 0px rgba(16,24,40,.05)}.fu-shadow-sm{box-shadow:0px 1px 3px 0px rgba(16,24,40,.1),0px 1px 2px 0px rgba(16,24,40,.06)}.fu-shadow-md{box-shadow:0px 4px 8px -2px rgba(16,24,40,.1),0px 2px 4px -2px rgba(16,24,40,.06)}.fu-shadow-lg{box-shadow:0px 12px 16px -4px rgba(16,24,40,.08),0px 4px 6px -2px rgba(16,24,40,.03)}.fu-shadow-xl{box-shadow:0px 20px 24px -6px rgba(16,24,40,.08),0px 8px 8px -4px rgba(16,24,40,.03)}.fu-shadow-xxl{box-shadow:0px 24px 48px -12px rgba(16,24,40,.18)}.fu-shadow-xxxl{box-shadow:0px 19px 32px 2px rgba(44,45,45,.14)}.fu-shadow-slg{box-shadow:0px 27px 27px 2px rgba(44,45,45,.14)}
+
+    .fu-shadow-examples{
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+        gap: 38px;
+        padding: 80px;
+        background-color: #EDEDED;
+    }
+    .fu-shadow-example {
+        width: 124px;
+        height: 124px;
+        background-color: #fff;
+        border-radius: 16px;
+        display: flex;
+        gap: 8px;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        font-size: 12px;
+    }
+    .fu-shadow-hr{
+        flex-basis: 100%;
+    }
+    /* endregion */
+
+    /* region grid */
     .fu-grid-example-wrapper{
         padding: 16px;
         border-radius: 16px;
@@ -102,7 +132,9 @@
         height: 32px;
         background-color: rgba(150, 192, 255, 0.3);
     }
+    /* endregion */
 
+    /*region breackpoints*/
     .fu-breakpoint_xl{
         background-image: url('data:image/svg+xml,%3Csvg xmlns=\'http://www.w3.org/2000/svg\' viewBox=\'0 0 48 43\'%3E%3Cpath d=\'M44 0H4C1.792 0 0 1.806 0 4.031v24.188c0 2.225 1.792 4.031 4 4.031h16l-2 8.063h-6c-.733 0-1.333.604-1.333 1.343 0 .74.6 1.344 1.333 1.344h24c.733 0 1.333-.605 1.333-1.344 0-.739-.6-1.343-1.333-1.343h-6l-2-8.063h16c2.208 0 4-1.806 4-4.031V4.031C48 1.806 46.208 0 44 0zM20.75 40.313l1.333-5.376h3.834l1.333 5.376h-6.5zm24.583-12.094c0 .739-.6 1.343-1.333 1.343H4a1.342 1.342 0 01-1.333-1.343V4.031c0-.739.6-1.343 1.333-1.343h40c.733 0 1.333.604 1.333 1.343v24.188z\' fill=\'%23C2CDD7\' fill-rule=\'nonzero\'/%3E%3C/svg%3E');
         width: 48px;
@@ -149,4 +181,5 @@
         font-family: monospace, monospace;
         width: fit-content;
     }
+    /*endregion*/
 </style>
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -14,7 +14,7 @@ const preview = {
             }
         },
         stackblitzAdditionalDependency: {
-            "@ironsource/fusion-ui": '5.6.3'
+            "@ironsource/fusion-ui": '5.7.15'
         },
         viewMode: 'story',
         docs: {inlineStories: true},

diff --git a/projects/fusion-ui/components/layout/v4/layout.component.ts b/projects/fusion-ui/components/layout/v4/layout.component.ts
@@ -129,6 +129,8 @@ export class LayoutComponent implements OnInit, OnDestroy {
         if (itemFound) {
             this.navigationMenu.setActiveMenu(primaryItemFound, itemFound);
             this.menuItemSelectedByRoute.emit(itemFound);
+        } else {
+            this.navigationMenu.setActiveMenu(null, null);
         }
         return !!itemFound;
     }

diff --git a/projects/fusion-ui/components/navigation-menu/v4/navigation-menu.component.ts b/projects/fusion-ui/components/navigation-menu/v4/navigation-menu.component.ts
@@ -171,12 +171,18 @@ export class NavigationMenuComponent implements OnInit {
     }
 
     setActiveMenu(primary: PrimaryMenuItem, secondary: MenuItem) {
-        this.selectedPrimaryMenuItem = primary;
-        this.preSelectedPrimaryMenuItem = primary;
-        this.selectedSecondaryMenuItem = secondary;
-        this.setSecondaryMenu(primary);
-        this.primaryMenu.setSelectedPrimaryMenuItem(primary);
-        this.primaryMenu.setColorTheme(primary?.cssTheme ?? null);
+        if (isNullOrUndefined(primary) || isNullOrUndefined(secondary)) {
+            this.secondaryMenu.setSelected(null);
+        } else {
+            this.selectedPrimaryMenuItem = primary;
+            this.preSelectedPrimaryMenuItem = primary;
+            this.selectedSecondaryMenuItem = secondary;
+            this.setSecondaryMenu(primary);
+            this.primaryMenu.setSelectedPrimaryMenuItem(primary);
+            setTimeout(() => {
+                this.primaryMenu.setColorTheme(primary?.cssTheme ?? null);
+            });
+        }
     }
 
     private setSecondaryMenu(selectedNetwork: PrimaryMenuItem) {

diff --git a/...n-ui/components/navigation-menu/v4/navigation-pop-menu/navigation-pop-menu.component.html b/...n-ui/components/navigation-menu/v4/navigation-pop-menu/navigation-pop-menu.component.html
@@ -6,19 +6,23 @@
             <fusion-icon *ngIf="!layoutUser.avatar" class="fu-user-icon" [name]="userIcon"></fusion-icon>
         </div>
         <div class="fu-user-data-holder">
-            <div class="fu-user-name">{{layoutUser.name}}</div>
-            <div class="fu-user-email">{{layoutUser.email}}</div>
+            <div class="fu-user-name truncate" [fusionTooltip]="layoutUser.name">{{layoutUser.name}}</div>
+            <div class="fu-user-email truncate" [fusionTooltip]="layoutUser.email">{{layoutUser.email}}</div>
         </div>
     </div>
     <!--endregion logged user info-->
     <div class="fu-pop-menu-items">
         <!--region menu items-->
         <ng-container *ngFor="let menuItem of menuItems">
             <div *ngIf="menuItem.withTopDelimiter" class="fu-pop-menu-item-delimiter"></div>
-            <div class="fu-pop-menu-item {{menuItem.cssClass}}" (click)="menuItemClicked.emit(menuItem)">
+            <a class="fu-pop-menu-item {{menuItem.cssClass}}"
+               [href]="menuItem.route || menuItem.redirect"
+               [target]="menuItem.target ?? '_self'"
+               (click)="onMenuItemClicked($event,menuItem)"
+            >
                 <fusion-icon class="fu-pop-menu-icon" *ngIf="menuItem.icon" [name]="menuItem.icon"></fusion-icon>
                 <div class="fu-pop-menu-text">{{menuItem.name}}</div>
-            </div>
+            </a>
         </ng-container>
         <!--endregion menu items-->
     </div>

diff --git a/...n-ui/components/navigation-menu/v4/navigation-pop-menu/navigation-pop-menu.component.scss b/...n-ui/components/navigation-menu/v4/navigation-pop-menu/navigation-pop-menu.component.scss
@@ -24,6 +24,10 @@ $menuItemHoverColor: #F5F5F5;
         box-shadow: $boxShadowLG;
         border-radius: $borderRadius;
 
+        .truncate{
+            @extend %truncate;
+        }
+
         .fu-pop-menu-header{
             display: flex;
             flex-direction: row;
@@ -52,17 +56,23 @@ $menuItemHoverColor: #F5F5F5;
                 flex-direction: column;
                 align-items: flex-start;
                 gap: 4px;
+                width: calc(#{$menuWidth} - 88px); // 88px = 8px +8px + 32px + 16px + 16px + 8px
                 .fu-user-name{
+                    cursor: default;
                     @extend %font-v4-heading-4;
                     color: $fu-nav-text-primary;
                 }
                 .fu-user-email{
+                    cursor: default;
                     @extend %font-v4-caption;
                     color: $fu-nav-text-secondary;
                 }
             }
         }
 
+        a {
+            text-decoration: none;
+        }
         .fu-pop-menu-items{
             display: flex;
             flex-direction: column;

diff --git a/...ion-ui/components/navigation-menu/v4/navigation-pop-menu/navigation-pop-menu.component.ts b/...ion-ui/components/navigation-menu/v4/navigation-pop-menu/navigation-pop-menu.component.ts
@@ -3,11 +3,12 @@ import {CommonModule} from '@angular/common';
 import {IconData, IconModule} from '@ironsource/fusion-ui/components/icon/v1';
 import {LayoutUser} from '@ironsource/fusion-ui/entities';
 import {MenuItem} from '@ironsource/fusion-ui/components/menu/common/base';
+import {TooltipModule} from '@ironsource/fusion-ui/components/tooltip';
 
 @Component({
     selector: 'fusion-navigation-pop-menu',
     standalone: true,
-    imports: [CommonModule, IconModule],
+    imports: [CommonModule, IconModule, TooltipModule],
     templateUrl: './navigation-pop-menu.component.html',
     styleUrls: ['./navigation-pop-menu.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
@@ -31,4 +32,15 @@ export class NavigationPopMenuComponent implements OnInit, AfterViewInit {
             this.element.nativeElement.style.height = `${popupHeight}px`;
         }
     }
+
+    onMenuItemClicked($event: MouseEvent, menuItem: MenuItem) {
+        if ($event && $event.metaKey) {
+            return;
+        }
+        if ($event && !menuItem.target) {
+            $event.preventDefault();
+            $event.stopPropagation();
+            this.menuItemClicked.emit(menuItem);
+        }
+    }
 }
diff --git a/...ponents/navigation-menu/v4/navigation-primary-menu/navigation-primary-menu.component.html b/...ponents/navigation-menu/v4/navigation-primary-menu/navigation-primary-menu.component.html
@@ -34,6 +34,7 @@
                         [menuItems]="bottomItem.menuItems"
                         [fusionReposition]="'#fu-bottom-nav-item-btn_'+bottomItemIndex"
                         [fusionRepositionPlacement]="popMenuPosition"
+                        [fusionRepositionOffset]="popMenuOffset$ | async"
                         (menuItemClicked)="onPopMenuItemClicked($event)"
                         (fusionClickOutside)="onPopMenuOutsideClick($event)"></fusion-navigation-pop-menu>
                 </ng-container>
@@ -54,6 +55,7 @@
     <div class="fu-navigation-bar-button" id="fu-bottom-nav-item-btn_{{index}}"
          [class.fu-selected]="selectedItem"
          [class.fu-with-pop-menu]="popMenu"
+         [class.fu-selected]="popMenu && (showPopMenu$ | async)"
          [class.fu-triangle]="menuOpened && (item === menuOpenForPrimaryMenuItem)"
          (click)="networkItemClicked(item)"
     >

diff --git a/...omponents/navigation-menu/v4/navigation-primary-menu/navigation-primary-menu.component.ts b/...omponents/navigation-menu/v4/navigation-primary-menu/navigation-primary-menu.component.ts
@@ -1,17 +1,18 @@
 import {ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Input, OnInit, Output} from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {BehaviorSubject} from 'rxjs';
+import {BehaviorSubject, Observable} from 'rxjs';
 import {isNullOrUndefined} from '@ironsource/fusion-ui/utils';
 import {SvgModule} from '@ironsource/fusion-ui/components/svg';
 import {IconModule} from '@ironsource/fusion-ui/components/icon/v1';
 import {TooltipModule} from '@ironsource/fusion-ui/components/tooltip';
 import {ClickOutsideModule} from '@ironsource/fusion-ui/directives/click-outside';
 import {LayoutUser} from '@ironsource/fusion-ui/entities';
 import {TooltipPosition} from '@ironsource/fusion-ui/components/tooltip/common/base';
-import {RepositionDirective} from '@ironsource/fusion-ui/directives/reposition';
+import {RepositionDirective, RepositionOffset} from '@ironsource/fusion-ui/directives/reposition';
 import {MenuItem} from '@ironsource/fusion-ui/components/menu/common/base';
 import {NavigationBarItemType, PrimaryMenuItem} from '../navigation-menu.entities';
 import {NavigationPopMenuComponent} from '../navigation-pop-menu/navigation-pop-menu.component';
+import {map} from 'rxjs/operators';
 
 @Component({
     selector: 'fusion-navigation-primary-menu',
@@ -43,6 +44,7 @@ export class NavigationPrimaryMenuComponent implements OnInit {
     get nativeElement(): HTMLElement {
         return this.elementRef.nativeElement;
     }
+
     get bottomItemsTopPosition(): number {
         return (this.nativeElement.querySelector('.fu-navigation-bar-bottom-items > div:first-child') as HTMLElement)?.offsetTop ?? 0;
     }
@@ -60,6 +62,12 @@ export class NavigationPrimaryMenuComponent implements OnInit {
     menuExpandedIcon = {iconName: 'arrowLineRight', iconVersion: 'v4'};
     popMenuPosition = TooltipPosition.BottomLeft;
 
+    popMenuOffset$: Observable<RepositionOffset> = this.selectedBarItem$.asObservable().pipe(
+        map((selectedBarItem: PrimaryMenuItem) => {
+            return selectedBarItem?.type === NavigationBarItemType.Main ? {x: 64, y: 48} : {x: 64};
+        })
+    );
+
     private primaryMenuOpenedItem: PrimaryMenuItem;
 
     defaultCssTheme: {[key: string]: string};
@@ -113,7 +121,6 @@ export class NavigationPrimaryMenuComponent implements OnInit {
     }
 
     menuToggleButtonClicked(event: MouseEvent) {
-        event.stopPropagation();
         this.menuToggleCollapsed = !this.menuToggleCollapsed;
         this.toggleMenu.emit();
     }

diff --git a/projects/fusion-ui/components/navigation-menu/v4/stories/navigation-menu.mock.ts b/projects/fusion-ui/components/navigation-menu/v4/stories/navigation-menu.mock.ts
@@ -24,7 +24,8 @@ export const USER_PROFILE_MENU_ITEMS: MenuItem[] = [
         withTopDelimiter: true,
         icon: {iconName: 'mail_outline', iconVersion: 'v4'},
         name: 'Contact us',
-        route: '/'
+        redirect: 'https://ironsrc.formtitan.com/contact-us',
+        target: '_contactUs'
     },
     {
         name: 'Logout',
@@ -341,7 +342,7 @@ export const IS_MENU_ITEMS: MenuItem[] = [
         children: [
             {
                 name: 'MMP',
-                route: '/MMP'
+                route: '/docs/components/checkbox'
             },
             {
                 name: 'SKAdNetwork',

diff --git a/projects/fusion-ui/components/shadows-v4.mdx b/projects/fusion-ui/components/shadows-v4.mdx
@@ -0,0 +1,65 @@
+import {Meta} from '@storybook/addon-docs';
+
+<Meta title="Styleguide/V4/Shadows"/>
+
+# Shadows
+
+CSS **box-shadow** is a style property used to add a shadow effect to an element's box (such as a div or an image) on a web page. The property allows you to create a visually appealing 3D-like effect, making the element appear elevated or floating.
+
+To use our shadows scss variables add in your *.scss
+```css
+  @import '~@ironsource/fusion-ui/style/v4/vars/shadows';
+```
+Or Import css file for *.css with shadow classes
+```css
+  @import '~@ironsource/fusion-ui/style/v4/shadows.css';
+```
+
+## Shadows:
+<div class="sb-unstyled">
+    <div class="fu-shadow-examples">
+        <div class="fu-shadow-example fu-shadow-xs">
+            <div class="font-v4-subtitle-2">x small</div>
+            <div>$boxShadowXS</div>
+            <div>.fu-shadow-xs</div>
+        </div>
+        <div class="fu-shadow-example fu-shadow-sm">
+            <div class="font-v4-subtitle-2">small</div>
+            <div>$boxShadowSM</div>
+            <div>.fu-shadow-sm</div>
+        </div>
+        <div class="fu-shadow-example fu-shadow-md">
+            <div class="font-v4-subtitle-2">medium</div>
+            <div>$boxShadowMD</div>
+            <div>.fu-shadow-md</div>
+        </div>
+        <div class="fu-shadow-example fu-shadow-lg">
+            <div class="font-v4-subtitle-2">large</div>
+            <div>$boxShadowLG</div>
+            <div>.fu-shadow-lg</div>
+        </div>
+        <div class="fu-shadow-hr"></div>
+        <div class="fu-shadow-example fu-shadow-xl">
+            <div class="font-v4-subtitle-2">x large</div>
+            <div>$boxShadowXL</div>
+            <div>.fu-shadow-xl</div>
+        </div>
+        <div class="fu-shadow-example fu-shadow-xxl">
+            <div class="font-v4-subtitle-2">xx large</div>
+            <div>$boxShadowXXL</div>
+            <div>.fu-shadow-xxl</div>
+        </div>
+        <div class="fu-shadow-example fu-shadow-xxxl">
+            <div class="font-v4-subtitle-2">xxx large</div>
+            <div>$boxShadowXXXL</div>
+            <div>.fu-shadow-xxxl</div>
+        </div>
+        <div class="fu-shadow-example fu-shadow-slg">
+            <div class="font-v4-subtitle-2">super large</div>
+            <div>$boxShadowSLG</div>
+            <div>.fu-shadow-slg</div>
+        </div>
+    </div>
+</div>
+
+