[Major] New breakpoint values

lib/src/accordion/Accordion.tsx

@@ -1,12 +1,12 @@
 // @ts-nocheck
-import React, { useState, useEffect } from "react";
+import React, { useState } from "react";
 import styled, { ThemeProvider } from "styled-components";
 import ExpansionPanel from "@material-ui/core/ExpansionPanel";
 import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
 import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import { getMargin } from "../common/utils.js";
-import { spaces, responsiveSizes } from "../common/variables.js";
+import { spaces } from "../common/variables.js";
 import useTheme from "../useTheme";
 import { BackgroundColorProvider } from "../BackgroundColorContext";
 import AccordionPropsType from "./types";
@@ -25,25 +25,8 @@ const DxcAccordion = ({
   tabIndex = 0,
 }: AccordionPropsType): JSX.Element => {
   const [innerIsExpanded, setInnerIsExpanded] = useState(defaultIsExpanded ?? false);
-  const [isResponsive, setIsResponsive] = useState(false);
   const colorsTheme = useTheme();
 
-  const handleResize = (width) => {
-    width && width <= responsiveSizes.tablet ? setIsResponsive(true) : setIsResponsive(false);
-  };
-
-  const handleEventListener = () => {
-    handleResize(window.innerWidth);
-  };
-
-  useEffect(() => {
-    window.addEventListener("resize", handleEventListener);
-    handleResize(window.innerWidth);
-    return () => {
-      window.removeEventListener("resize", handleEventListener);
-    };
-  }, []);
-
   const handlerAccordion = () => {
     if (isExpanded == null) {
       setInnerIsExpanded(!innerIsExpanded);
@@ -55,7 +38,7 @@ const DxcAccordion = ({
 
   return (
     <ThemeProvider theme={colorsTheme.accordion}>
-      <DXCAccordion padding={padding} margin={margin} disabled={disabled} icon={icon} isResponsive={isResponsive}>
+      <DXCAccordion padding={padding} margin={margin} disabled={disabled} icon={icon}>
         <ExpansionPanel
           disabled={disabled}
           onChange={handlerAccordion}

lib/src/common/variables.js

@@ -1347,12 +1347,11 @@ export const spaces = {
   xxlarge: "100px",
 };
 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",
 };
 export const typeface = {
   body: {

lib/src/dialog/Dialog.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useState, useEffect } from "react";
+import React from "react";
 import styled, { ThemeProvider } from "styled-components";
 import Dialog from "@material-ui/core/Dialog";
 import DialogPropsType from "./types";
@@ -17,7 +17,6 @@ const DxcDialog = ({
   padding = "small",
   tabIndex = 0,
 }: DialogPropsType): JSX.Element => {
-  const [isResponsive, setIsResponsive] = useState(false);
   const colorsTheme = useTheme();
 
   const handleClose = () => {
@@ -28,22 +27,6 @@ const DxcDialog = ({
     onBackgroundClick?.();
   };
 
-  const handleResize = (width) => {
-    setIsResponsive(width && width <= responsiveSizes.tablet);
-  };
-
-  const handleEventListener = () => {
-    handleResize(window.innerWidth);
-  };
-
-  useEffect(() => {
-    window.addEventListener("resize", handleEventListener);
-    handleResize(window.innerWidth);
-    return () => {
-      window.removeEventListener("resize", handleEventListener);
-    };
-  }, []);
-
   return (
     <ThemeProvider theme={colorsTheme.dialog}>
       <DialogContainer
@@ -52,7 +35,6 @@ const DxcDialog = ({
         onClose={handleOverlayClick}
         overlay={overlay}
         padding={padding}
-        isResponsive={isResponsive}
       >
         {isCloseVisible && (
           <CloseIconContainer onClick={handleClose} tabIndex={tabIndex}>
@@ -86,8 +68,17 @@ const DialogContainer = styled(Dialog)`
   }
   .MuiDialog-paperWidthSm {
     background-color: ${(props) => props.theme.backgroundColor};
-    max-width: ${(props) => (props.isResponsive ? "92%" : "80%")};
-    min-width: ${(props) => (props.isResponsive ? "92%" : "800px")};
+    @media (min-width: ${responsiveSizes.medium}rem) {
+      max-width: 80%;
+      min-width: 800px;
+    }
+
+    @media (max-width: ${responsiveSizes.medium}rem) {
+      //mobile phones
+      max-width: 92%;
+      min-width: 92%;
+    }
+
     box-sizing: border-box;
     min-height: ${(props) => (props.isCloseVisible ? "72px" : "")};
     box-shadow: ${(props) =>

lib/src/footer/Footer.tsx

@@ -1,5 +1,5 @@
 // @ts-nocheck
-import React, { useState, useEffect, useRef, useMemo } from "react";
+import React, { useMemo } from "react";
 import styled, { ThemeProvider } from "styled-components";
 import { spaces, responsiveSizes } from "../common/variables.js";
 import useTheme from "../useTheme";
@@ -16,10 +16,6 @@ const DxcFooter = ({
   margin,
   tabIndex = 0,
 }: FooterPropsType): JSX.Element => {
-  const ref = useRef(null);
-  const [refSize, setRefSize] = useState();
-  const [isResponsiveTablet, setIsResponsiveTablet] = useState(false);
-  const [isResponsivePhone, setIsResponsivePhone] = useState(false);
   const colorsTheme = useTheme();
 
   const footerLogo = useMemo(() => {
@@ -32,35 +28,6 @@ const DxcFooter = ({
     return colorsTheme.footer.logo;
   }, [colorsTheme.footer.logo]);
 
-  const handleResize = (refWidth) => {
-    if (ref.current) {
-      setRefSize(refWidth);
-      if (refWidth <= responsiveSizes.tablet && refWidth > responsiveSizes.mobileLarge) {
-        setIsResponsiveTablet(true);
-        setIsResponsivePhone(false);
-      } else if (refWidth <= responsiveSizes.tablet && refWidth <= responsiveSizes.mobileLarge) {
-        setIsResponsivePhone(true);
-        setIsResponsiveTablet(false);
-      } else {
-        setIsResponsiveTablet(false);
-        setIsResponsivePhone(false);
-      }
-    }
-  };
-
-  const handleEventListener = () => {
-    handleResize(ref.current.offsetWidth);
-  };
-
-  useEffect(() => {
-    window.addEventListener("resize", handleEventListener);
-    handleResize(ref.current.offsetWidth);
-
-    return () => {
-      window.removeEventListener("resize", handleEventListener);
-    };
-  }, []);
-
   const socialLink = socialLinks?.map((link, index) => (
     <SocialAnchor
       tabIndex={tabIndex}
@@ -85,18 +52,18 @@ const DxcFooter = ({
 
   return (
     <ThemeProvider theme={colorsTheme.footer}>
-      <FooterContainer margin={margin} refSize={refSize} ref={ref}>
-        <FooterHeader refSize={refSize}>
+      <FooterContainer margin={margin}>
+        <FooterHeader>
           <LogoContainer>{footerLogo}</LogoContainer>
-          <SocialLinkContainer refSize={refSize}>{socialLink}</SocialLinkContainer>
+          <SocialLinkContainer>{socialLink}</SocialLinkContainer>
         </FooterHeader>
         <div>
           <ChildComponents padding={padding}>
             <BackgroundColorProvider color={colorsTheme.footer.backgroundColor}>{children}</BackgroundColorProvider>
           </ChildComponents>
-          <FooterFooter className="footerFooter" refSize={refSize}>
-            <BottomLinks refSize={refSize}>{bottomLink}</BottomLinks>
-            <Copyright refSize={refSize}>{copyright}</Copyright>
+          <FooterFooter className="footerFooter">
+            <BottomLinks>{bottomLink}</BottomLinks>
+            <Copyright>{copyright}</Copyright>
           </FooterFooter>
         </div>
       </FooterContainer>
@@ -105,7 +72,15 @@ const DxcFooter = ({
 };
 
 const FooterContainer = styled.footer`
-  padding: ${(props) => (props.refSize <= responsiveSizes.mobileLarge ? "20px 20px 20px 20px" : "24px 36px 24px 36px")};
+  @media (min-width: ${responsiveSizes.small}rem) {
+    padding: 24px 36px 24px 36px;
+  }
+
+  @media (max-width: ${responsiveSizes.small}rem) {
+    //mobile phones
+    padding: 20px;
+  }
+
   background-color: ${(props) => props.theme.backgroundColor};
   margin-top: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
   width: 100%;
@@ -127,8 +102,17 @@ const FooterFooter = styled.div`
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
-  flex-direction: ${(props) => (props.refSize <= responsiveSizes.mobileLarge ? "column" : "row")};
-  align-items: ${(props) => (props.refSize <= responsiveSizes.mobileLarge ? "center" : "")};
+
+  @media (min-width: ${responsiveSizes.small}rem) {
+    flex-direction: row;
+  }
+
+  @media (max-width: ${responsiveSizes.small}rem) {
+    //mobile phones
+    flex-direction: column;
+    align-items: center;
+  }
+
   border-top: ${(props) =>
     `${props.theme.bottomLinksDividerThickness} ${props.theme.bottomLinksDividerStyle} ${props.theme.bottomLinksDividerColor}`};
   margin-top: 16px;
@@ -138,8 +122,17 @@ const BottomLinks = styled.div`
   padding-top: ${(props) => props.theme.bottomLinksDividerSpacing};
   display: inline-flex;
   flex-wrap: wrap;
-  max-width: ${(props) => (props.refSize <= responsiveSizes.mobileLarge ? "100%" : "60%")};
-  width: ${(props) => (props.refSize <= responsiveSizes.mobileLarge ? "100%" : "")};
+
+  @media (min-width: ${responsiveSizes.small}rem) {
+    max-width: 60%;
+  }
+
+  @media (max-width: ${responsiveSizes.small}rem) {
+    //mobile phones
+    max-width: 100%;
+    width: 100%;
+  }
+
   & > span:last-child span {
     display: none;
   }
@@ -166,9 +159,19 @@ const Copyright = styled.div`
   font-style: ${(props) => props.theme.copyrightFontStyle};
   font-weight: ${(props) => props.theme.copyrightFontWeight};
   color: ${(props) => props.theme.copyrightFontColor};
-  max-width: ${(props) => (props.refSize <= responsiveSizes.mobileLarge ? "100%" : "40%")};
-  width: ${(props) => (props.refSize <= responsiveSizes.mobileLarge ? "100%" : "")};
-  text-align: ${(props) => (props.refSize <= responsiveSizes.mobileLarge ? "left" : "right")};
+
+  @media (min-width: ${responsiveSizes.small}rem) {
+    max-width: 40%;
+    text-align: right;
+  }
+
+  @media (max-width: ${responsiveSizes.small}rem) {
+    //mobile phones
+    max-width: 100%;
+    width: 100%;
+    text-align: left;
+  }
+
   padding-top: ${(props) => props.theme.bottomLinksDividerSpacing};
 `;
 

lib/src/header/Header.stories.tsx

@@ -26,15 +26,6 @@ export const Chromatic = () => (
       <Title title="Underlined with text" theme="light" level={4} />
       <DxcHeader underlined content={<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras felis.</p>} />
     </ExampleContainer>
-    <ExampleContainer>
-      <Title title="Responsive" theme="light" level={4} />
-      <div style={{ width: "400px" }}>
-        <DxcHeader
-          responsiveContent={(closeHandler) => <DxcHeader.Dropdown options={options} label="Default Dropdown" />}
-          underlined
-        />
-      </div>
-    </ExampleContainer>
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall margin" theme="light" level={4} />
@@ -107,54 +98,60 @@ export const Chromatic = () => (
 const RespHeader = () => (
   <ExampleContainer>
     <Title title="Responsive" theme="light" level={4} />
-    <div style={{ maxWidth: "400px" }}>
-      <DxcHeader
-        responsiveContent={(closeHandler) => <DxcHeader.Dropdown options={options} label="Default Dropdown" />}
-        underlined
-      />
-    </div>
+    <DxcHeader
+      responsiveContent={(closeHandler) => <DxcHeader.Dropdown options={options} label="Default Dropdown" />}
+      underlined
+    />
   </ExampleContainer>
 );
 
 const RespHeaderFocus = () => (
   <ExampleContainer pseudoState="pseudo-focus">
     <Title title="Responsive" theme="light" level={4} />
-    <div style={{ maxWidth: "400px" }}>
-      <DxcHeader
-        responsiveContent={(closeHandler) => <p>Lorem ipsum dolor sit amet.</p>}
-        underlined
-      />
-    </div>
+    <DxcHeader responsiveContent={(closeHandler) => <p>Lorem ipsum dolor sit amet.</p>} underlined />
   </ExampleContainer>
 );
 
 const RespHeaderHover = () => (
   <ExampleContainer pseudoState="pseudo-hover">
     <Title title="Responsive" theme="light" level={4} />
-    <div style={{ maxWidth: "400px" }}>
-      <DxcHeader
-        responsiveContent={(closeHandler) => <p>Lorem ipsum dolor sit amet.</p>}
-        underlined
-      />
-    </div>
+    <DxcHeader responsiveContent={(closeHandler) => <p>Lorem ipsum dolor sit amet.</p>} underlined />
   </ExampleContainer>
 );
 
 export const ResponsiveHeader = RespHeader.bind({});
+ResponsiveHeader.parameters = {
+  viewport: {
+    defaultViewport: "iphonex",
+  },
+  chromatic: { viewports: [720] },
+};
 ResponsiveHeader.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await waitFor(() => canvas.findByText("Menu"));
   await userEvent.click(canvas.getByText("Menu"));
 };
 
 export const ResponsiveHeaderFocus = RespHeaderFocus.bind({});
+ResponsiveHeaderFocus.parameters = {
+  viewport: {
+    defaultViewport: "iphonex",
+  },
+  chromatic: { viewports: [720] },
+};
 ResponsiveHeaderFocus.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await waitFor(() => canvas.findByText("Menu"));
   await userEvent.click(canvas.getByText("Menu"));
 };
 
 export const ResponsiveHeaderHover = RespHeaderHover.bind({});
+ResponsiveHeaderHover.parameters = {
+  viewport: {
+    defaultViewport: "iphonex",
+  },
+  chromatic: { viewports: [720] },
+};
 ResponsiveHeaderHover.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
   await waitFor(() => canvas.findByText("Menu"));