Merge pull request #827 from dxc-technology/jialecl-responsiveness

[Major] New breakpoint values

Author: aidamag

projects/dxc-ngx-cdk/src/lib/dxc-application-layout/dxc-application-layout-sidenav/dxc-application-layout-sidenav.component.html

@@ -4,7 +4,7 @@
   </div>
   <div
     tabindex="0"
-    *ngIf="displayArrow || isResponsive"
+    *ngIf="showArrow"
     class="sidenavArrow"
     (keydown)="arrowKey($event)"
     (click)="arrowClicked()"

projects/dxc-ngx-cdk/src/lib/dxc-application-layout/dxc-application-layout-sidenav/dxc-application-layout-sidenav.component.ts

@@ -52,8 +52,9 @@ export class DxcApplicationLayoutSidenavComponent implements OnInit, OnChanges {
   }
   _displayArrow = true;
 
+  showArrow: boolean;
+
   firstClick: boolean = false; //remove animation on first load
-  innerWidth;
   isResponsive = true;
   isShown: boolean;
 
@@ -72,7 +73,7 @@ export class DxcApplicationLayoutSidenavComponent implements OnInit, OnChanges {
   ) {}
 
   @HostListener("window:resize", ["$event"])
-  onResize(event) {
+  onResize() {
     this.updateCss();
   }
 
@@ -81,7 +82,6 @@ export class DxcApplicationLayoutSidenavComponent implements OnInit, OnChanges {
     this.sidenavStyles = `${this.getDynamicStyle({
       ...this.defaultInputs.getValue(),
       mode: this.mode,
-      innerWidth: this.innerWidth,
       isResponsive: this.isResponsive,
       isShown: this.isShown,
     })}`;
@@ -114,23 +114,16 @@ export class DxcApplicationLayoutSidenavComponent implements OnInit, OnChanges {
   }
 
   updateState() {
-    this.innerWidth = window.innerWidth;
     this.sidenavService.setPushMode(this.mode === "push");
-    if (this.innerWidth <= responsiveSizes.tablet) {
-      this.isResponsive = true;
-      if (!this.displayArrow) {
-        this.displayArrow = true;
-      }
-    } else {
-      this.isResponsive = false;
-      if (!this.displayArrow && !this.isShown) {
-        this.isShown = true;
-      }
+    this.isResponsive = window.matchMedia(`(max-width: ${responsiveSizes.medium}rem)`).matches;
+    this.isResponsive ? this.showArrow = true : this.showArrow = this.displayArrow;
+    if (!this.isResponsive && !this.displayArrow && !this.isShown) {
+      this.isShown = true;
     }
     this.isShown =
       this.isShown !== undefined
         ? this.isShown
-        : this.innerWidth <= responsiveSizes.tablet
+        : this.isResponsive
         ? false
         : true;
     this.sidenavService.showMenu(this.isShown);
@@ -141,7 +134,6 @@ export class DxcApplicationLayoutSidenavComponent implements OnInit, OnChanges {
     this.sidenavStyles = `${this.getDynamicStyle({
       ...this.defaultInputs.getValue(),
       mode: this.mode,
-      innerWidth: this.innerWidth,
       isResponsive: this.isResponsive,
       isShown: this.isShown,
     })}`;
@@ -151,10 +143,10 @@ export class DxcApplicationLayoutSidenavComponent implements OnInit, OnChanges {
     return css`
       z-index: 400;
       position: ${(inputs.mode === "overlay" && this.displayArrow) ||
-      inputs.isResponsive
+      this.isResponsive
         ? "absolute"
         : "relative"};
-      height: ${inputs.mode === "overlay" || inputs.isResponsive ? "100%" : ""};
+      height: ${inputs.mode === "overlay" || this.isResponsive ? "100%" : ""};
       .sidenavContainerClass {
         background-color: var(--sidenav-backgroundColor);
         display: flex;
@@ -192,7 +184,7 @@ export class DxcApplicationLayoutSidenavComponent implements OnInit, OnChanges {
           }
         }
         .sidenavArrow {
-          visibility: ${!this.displayArrow ? "hidden" : "visible"};
+          visibility: ${!this.showArrow ? "hidden" : "visible"};
           width: 42px;
           height: 42px;
           background-color: var(--sidenav-arrowContainerColor);

projects/dxc-ngx-cdk/src/lib/dxc-footer/dxc-footer.component.ts

@@ -76,7 +76,6 @@ export class DxcFooterComponent implements OnChanges {
 
   defaultImglogo: string;
   innerWidth: number;
-  isResponsive: boolean;
   bottomLinksLength: number;
   currentBackgroundColor: string;
 
@@ -90,16 +89,6 @@ export class DxcFooterComponent implements OnChanges {
     tabIndexValue: 0,
   });
 
-  @HostListener("window:resize", ["$event"])
-  onResize(event) {
-    this.innerWidth = event.target.innerWidth;
-    if (this.innerWidth <= responsiveSizes.tablet) {
-      this.isResponsive = true;
-    } else {
-      this.isResponsive = false;
-    }
-    this.footerFooterStyle = `${this.setFooterFooterStyle(this.isResponsive)}`;
-  }
 
   // Styling
   footerContainerStyle: string;
@@ -152,16 +141,8 @@ export class DxcFooterComponent implements OnChanges {
     this.childComponentsStyle = `${this.setChildComponentsStyle(
       this.defaultInputs.getValue()
     )}`;
-    if (this.innerWidth <= responsiveSizes.tablet) {
-      this.isResponsive = true;
-    } else {
-      this.isResponsive = false;
-    }
-    this.footerContainerStyle = `${this.setFooterContainerStyle(
-      this.defaultInputs.getValue(),
-      this.isResponsive
-    )}`;
-    this.footerFooterStyle = `${this.setFooterFooterStyle(this.isResponsive)}`;
+
+    this.footerFooterStyle = `${this.setFooterFooterStyle()}`;
     if (this.bottomLinks) {
       this.bottomLinksLength = this.bottomLinks.length - 1;
     }
@@ -174,13 +155,12 @@ export class DxcFooterComponent implements OnChanges {
     }, {});
     this.defaultInputs.next({ ...this.defaultInputs.getValue(), ...inputs });
     this.footerContainerStyle = `${this.setFooterContainerStyle(
-      this.defaultInputs.getValue(),
-      this.isResponsive
+      this.defaultInputs.getValue()
     )}`;
     this.childComponentsStyle = `${this.setChildComponentsStyle(
       this.defaultInputs.getValue()
     )}`;
-    this.footerFooterStyle = `${this.setFooterFooterStyle(this.isResponsive)}`;
+    this.footerFooterStyle = `${this.setFooterFooterStyle()}`;
     if (this.bottomLinks) {
       this.bottomLinksLength = this.bottomLinks.length - 1;
     }
@@ -190,9 +170,15 @@ export class DxcFooterComponent implements OnChanges {
     return document.body.getAttribute("footer-logo");
   }
 
-  setFooterContainerStyle(input: any, responsive: boolean) {
+  setFooterContainerStyle(input: any) {
     return css`
-      padding: ${responsive ? "20px" : "24px 36px"};
+      @media (min-width: ${responsiveSizes.small}rem) {
+        padding: 24px 36px 24px 36px;
+      }
+
+      @media (max-width: ${responsiveSizes.small}rem) {
+        padding: 20px;
+      }
       background-color: var(--footer-backgroundColor);
       ${this.utils.getTopMargin(input.margin)}
       width: 100%;
@@ -212,12 +198,19 @@ export class DxcFooterComponent implements OnChanges {
     `;
   }
 
-  setFooterFooterStyle(responsive: boolean) {
+  setFooterFooterStyle() {
     return css`
       display: flex;
       justify-content: space-between;
-      flex-direction: ${responsive ? "column" : "row"};
-      align-items: ${responsive ? "center" : "flex-end"};
+      @media (min-width: ${responsiveSizes.small}rem) {
+        flex-direction: row;
+        align-items: flex-end;
+      }
+    
+      @media (max-width: ${responsiveSizes.small}rem) {
+        flex-direction: column;
+        align-items: center;
+      }
       border-top: var(--footer-bottomLinksDividerThickness)
         var(--footer-bottomLinksDividerStyle)
         var(--footer-bottomLinksDividerColor);
@@ -228,19 +221,33 @@ export class DxcFooterComponent implements OnChanges {
         font-style: var(--footer-copyrightFontStyle);
         font-size: var(--footer-copyrightFontSize);
         font-weight: var(--footer-copyrightFontWeight);
-        max-width: ${responsive ? "100%" : "40%"};
-        width: ${responsive ? "100%" : "40%"};
-        text-align: ${responsive ? "center" : "right"};
+        @media (min-width: ${responsiveSizes.small}rem) {
+          max-width: 40%;
+          text-align: right;
+        }
+      
+        @media (max-width: ${responsiveSizes.small}rem) {
+          max-width: 100%;
+          width: 100%;
+          text-align: left;
+        }
       }
 
       .bottomLinksStyle {
         padding-top: var(--footer-bottomLinksDividerSpacing);
         display: inline-flex;
         flex-wrap: wrap;
-        max-width: ${responsive ? "100%" : "60%"};
-        width: ${responsive ? "100%" : "auto"};
-        text-align: ${responsive ? "center" : ""};
-        margin: ${responsive ? "40px 0 40px 0" : ""};
+        @media (min-width: ${responsiveSizes.small}rem) {
+          max-width: 60%;
+        }
+      
+        @media (max-width: ${responsiveSizes.small}rem) {
+          max-width: 100%;
+          width: 100%;
+          text-align: center;
+          margin: 40px 0 40px 0;
+        }
+      
         color: var(--footer-bottomLinksFontColor);
         .point {
           margin: 0px 10px;

projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header.component.spec.ts

@@ -17,6 +17,15 @@ TestBed.initTestEnvironment(
 );
 
 describe("DxcHeader tests", () => {
+  beforeAll(() => {
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: jest.fn().mockImplementation(() => ({
+        matches: false,
+      })),
+    });
+  });
+
   test("should render dxc-header", async () => {
     await render(`<dxc-header></dxc-header>`, {
       imports: [PipesModule, BackgroundProviderInnerModule],
@@ -42,6 +51,12 @@ describe("DxcHeader tests", () => {
       configurable: true,
       value: 375,
     });
+    Object.defineProperty(window, "matchMedia", {
+      writable: true,
+      value: jest.fn().mockImplementation(() => ({
+        matches: true,
+      })),
+    });
     TestBed.overrideComponent(DxcHeaderComponent, {
       set: { selector: "header" },
     });

projects/dxc-ngx-cdk/src/lib/dxc-header/dxc-header.component.ts

@@ -83,8 +83,6 @@ export class DxcHeaderComponent implements OnChanges {
 
   isResponsive = false;
   isMenuVisible = false;
-  innerWidth;
-  innerHeight;
   responsiveMenu: string;
   isClickDefined = false;
 
@@ -99,14 +97,10 @@ export class DxcHeaderComponent implements OnChanges {
     padding: null,
   });
 
-  @HostListener("window:resize", ["$event"])
-  onResize(event) {
-    this.innerWidth = event.target.innerWidth;
-    this.innerHeight = event.target.innerHeight;
-    if (this.innerWidth <= responsiveSizes.tablet) {
-      this.isResponsive = true;
-    } else {
-      this.isResponsive = false;
+  @HostListener('window:resize', ['$event'])
+  onResize() {
+    this.isResponsive = window.matchMedia(`(max-width: ${responsiveSizes.medium}rem)`).matches;
+    if(!this.isResponsive) { 
       this.isMenuVisible = false;
     }
     this.updateCss();
@@ -115,40 +109,26 @@ export class DxcHeaderComponent implements OnChanges {
   constructor(private utils: CssUtils, private elRef: ElementRef) {}
 
   updateCss() {
-    if (this.isMenuVisible) {
-      this.elRef.nativeElement.ownerDocument.body.style.overflow = "hidden";
-    } else {
-      this.elRef.nativeElement.ownerDocument.body.style.overflow = null;
-    }
+                            
     this.currentBackgroundColor = this.utils.readProperty(
       "--header-backgroundColor"
     );
     this.className = `${this.getDynamicStyle({
       ...this.defaultInputs.getValue(),
       isMenuVisible: this.isMenuVisible,
-      isResponsive: this.isResponsive,
-      innerWidth: this.innerWidth,
-      innerHeight: this.innerHeight,
+      isResponsive: this.isResponsive
     })}`;
 
     this.responsiveMenu = `${this.getResponsiveMenuStyle({
       ...this.defaultInputs.getValue(),
       isMenuVisible: this.isMenuVisible,
-      isResponsive: this.isResponsive,
-      innerWidth: this.innerWidth,
-      innerHeight: this.innerHeight,
+      isResponsive: this.isResponsive
     })}`;
   }
 
   public ngOnInit() {
     this.isClickDefined = this.onClick.observers?.length > 0;
-    this.innerWidth = window.innerWidth;
-    this.innerHeight = window.innerHeight;
-    if (this.innerWidth <= responsiveSizes.tablet && !this.isResponsive) {
-      this.isResponsive = true;
-    } else {
-      this.isResponsive = false;
-    }
+    this.isResponsive = window.matchMedia(`(max-width: ${responsiveSizes.medium}rem)`).matches;
     this.updateCss();
   }
 
@@ -298,12 +278,12 @@ export class DxcHeaderComponent implements OnChanges {
         top: 0;
         left: 0;
         width: 100vw;
-        height: ${inputs.innerHeight}px;
+        height: 100vh;
         background-color: var(--header-overlayColor);
         opacity: var(--header-overlayOpacity) !important;
-        display: ${inputs.innerWidth <= responsiveSizes.mobileLarge
-          ? "none"
-          : ""};
+        @media (max-width: ${responsiveSizes.small}rem) { 
+          display: none;
+        }
         transition: opacity 0.2s 0.2s ease-in-out;
         z-index: var(--header-overlayZindex);
       }
@@ -322,11 +302,15 @@ export class DxcHeaderComponent implements OnChanges {
       right: 0;
       z-index: var(--header-menuZindex);
 
-      width: ${inputs.innerWidth <= responsiveSizes.laptop &&
-      inputs.innerWidth > responsiveSizes.mobileLarge
-        ? "var(--header-menuTabletWidth)"
-        : "var(--header-menuMobileWidth)"};
-      height: ${inputs.innerHeight}px;
+
+      @media (max-width: ${responsiveSizes.large}rem) and (min-width: ${responsiveSizes.small}rem) {
+        width: "var(--header-menuTabletWidth)";
+      }
+      @media not((max-width: ${responsiveSizes.large}rem) and (min-width: ${responsiveSizes.small}rem)) {
+        width: "var(--header-menuMobileWidth)"};
+      }
+
+      height: 100vh;
       padding: 20px;
 
       ${this.checkMenuVisible(inputs.isMenuVisible)}

projects/dxc-ngx-cdk/src/lib/variables.ts

@@ -26,10 +26,9 @@ export const colors = {
   };
 
   export const responsiveSizes = {
-    mobileSmall: 320,
-    mobileMedium: 375,
-    mobileLarge: 425,
-    tablet: 768,
-    laptop: 1024,
-    desktop: 1440
+    xsmall: "20",
+    small: "30",
+    medium: "45",
+    large: "66",
+    xlarge: "90",
   }