Skip to content

Commit e33af28

Browse files
JialeclJialecl
authored
Merge pull request #919 from dxc-technology/marcialfps-issue-825
[Major] New breakpoint values
2 parents b5f44d7 + 0f4a987 commit e33af28

File tree

8 files changed

+160
-169
lines changed

8 files changed

+160
-169
lines changed

‎lib/src/accordion/Accordion.tsx‎

Lines changed: 3 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
// @ts-nocheck
2-
import React, { useState, useEffect } from "react";
2+
import React, { useState } from "react";
33
import styled, { ThemeProvider } from "styled-components";
44
import ExpansionPanel from "@material-ui/core/ExpansionPanel";
55
import ExpansionPanelSummary from "@material-ui/core/ExpansionPanelSummary";
66
import ExpansionPanelDetails from "@material-ui/core/ExpansionPanelDetails";
77
import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
88
import { getMargin } from "../common/utils.js";
9-
import { spaces, responsiveSizes } from "../common/variables.js";
9+
import { spaces } from "../common/variables.js";
1010
import useTheme from "../useTheme";
1111
import { BackgroundColorProvider } from "../BackgroundColorContext";
1212
import AccordionPropsType from "./types";
@@ -25,25 +25,8 @@ const DxcAccordion = ({
2525
tabIndex = 0,
2626
}: AccordionPropsType): JSX.Element => {
2727
const [innerIsExpanded, setInnerIsExpanded] = useState(defaultIsExpanded ?? false);
28-
const [isResponsive, setIsResponsive] = useState(false);
2928
const colorsTheme = useTheme();
3029

31-
const handleResize = (width) => {
32-
width && width <= responsiveSizes.tablet ? setIsResponsive(true) : setIsResponsive(false);
33-
};
34-
35-
const handleEventListener = () => {
36-
handleResize(window.innerWidth);
37-
};
38-
39-
useEffect(() => {
40-
window.addEventListener("resize", handleEventListener);
41-
handleResize(window.innerWidth);
42-
return () => {
43-
window.removeEventListener("resize", handleEventListener);
44-
};
45-
}, []);
46-
4730
const handlerAccordion = () => {
4831
if (isExpanded == null) {
4932
setInnerIsExpanded(!innerIsExpanded);
@@ -55,7 +38,7 @@ const DxcAccordion = ({
5538

5639
return (
5740
<ThemeProvider theme={colorsTheme.accordion}>
58-
<DXCAccordion padding={padding} margin={margin} disabled={disabled} icon={icon} isResponsive={isResponsive}>
41+
<DXCAccordion padding={padding} margin={margin} disabled={disabled} icon={icon}>
5942
<ExpansionPanel
6043
disabled={disabled}
6144
onChange={handlerAccordion}

‎lib/src/common/variables.js‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1347,12 +1347,11 @@ export const spaces = {
13471347
xxlarge: "100px",
13481348
};
13491349
export const responsiveSizes = {
1350-
mobileSmall: "320",
1351-
mobileMedium: "375",
1352-
mobileLarge: "425",
1353-
tablet: "768",
1354-
laptop: "1024",
1355-
desktop: "1440",
1350+
xsmall: "20",
1351+
small: "30",
1352+
medium: "45",
1353+
large: "66",
1354+
xlarge: "90",
13561355
};
13571356
export const typeface = {
13581357
body: {

‎lib/src/dialog/Dialog.tsx‎

Lines changed: 12 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// @ts-nocheck
2-
import React, { useState, useEffect } from "react";
2+
import React from "react";
33
import styled, { ThemeProvider } from "styled-components";
44
import Dialog from "@material-ui/core/Dialog";
55
import DialogPropsType from "./types";
@@ -17,7 +17,6 @@ const DxcDialog = ({
1717
padding = "small",
1818
tabIndex = 0,
1919
}: DialogPropsType): JSX.Element => {
20-
const [isResponsive, setIsResponsive] = useState(false);
2120
const colorsTheme = useTheme();
2221

2322
const handleClose = () => {
@@ -28,22 +27,6 @@ const DxcDialog = ({
2827
onBackgroundClick?.();
2928
};
3029

31-
const handleResize = (width) => {
32-
setIsResponsive(width && width <= responsiveSizes.tablet);
33-
};
34-
35-
const handleEventListener = () => {
36-
handleResize(window.innerWidth);
37-
};
38-
39-
useEffect(() => {
40-
window.addEventListener("resize", handleEventListener);
41-
handleResize(window.innerWidth);
42-
return () => {
43-
window.removeEventListener("resize", handleEventListener);
44-
};
45-
}, []);
46-
4730
return (
4831
<ThemeProvider theme={colorsTheme.dialog}>
4932
<DialogContainer
@@ -52,7 +35,6 @@ const DxcDialog = ({
5235
onClose={handleOverlayClick}
5336
overlay={overlay}
5437
padding={padding}
55-
isResponsive={isResponsive}
5638
>
5739
{isCloseVisible && (
5840
<CloseIconContainer onClick={handleClose} tabIndex={tabIndex}>
@@ -86,8 +68,17 @@ const DialogContainer = styled(Dialog)`
8668
}
8769
.MuiDialog-paperWidthSm {
8870
background-color: ${(props) => props.theme.backgroundColor};
89-
max-width: ${(props) => (props.isResponsive ? "92%" : "80%")};
90-
min-width: ${(props) => (props.isResponsive ? "92%" : "800px")};
71+
@media (min-width: ${responsiveSizes.medium}rem) {
72+
max-width: 80%;
73+
min-width: 800px;
74+
}
75+
76+
@media (max-width: ${responsiveSizes.medium}rem) {
77+
//mobile phones
78+
max-width: 92%;
79+
min-width: 92%;
80+
}
81+
9182
box-sizing: border-box;
9283
min-height: ${(props) => (props.isCloseVisible ? "72px" : "")};
9384
box-shadow: ${(props) =>

‎lib/src/footer/Footer.tsx‎

Lines changed: 51 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// @ts-nocheck
2-
import React, { useState, useEffect, useRef, useMemo } from "react";
2+
import React, { useMemo } from "react";
33
import styled, { ThemeProvider } from "styled-components";
44
import { spaces, responsiveSizes } from "../common/variables.js";
55
import useTheme from "../useTheme";
@@ -16,10 +16,6 @@ const DxcFooter = ({
1616
margin,
1717
tabIndex = 0,
1818
}: FooterPropsType): JSX.Element => {
19-
const ref = useRef(null);
20-
const [refSize, setRefSize] = useState();
21-
const [isResponsiveTablet, setIsResponsiveTablet] = useState(false);
22-
const [isResponsivePhone, setIsResponsivePhone] = useState(false);
2319
const colorsTheme = useTheme();
2420

2521
const footerLogo = useMemo(() => {
@@ -32,35 +28,6 @@ const DxcFooter = ({
3228
return colorsTheme.footer.logo;
3329
}, [colorsTheme.footer.logo]);
3430

35-
const handleResize = (refWidth) => {
36-
if (ref.current) {
37-
setRefSize(refWidth);
38-
if (refWidth <= responsiveSizes.tablet && refWidth > responsiveSizes.mobileLarge) {
39-
setIsResponsiveTablet(true);
40-
setIsResponsivePhone(false);
41-
} else if (refWidth <= responsiveSizes.tablet && refWidth <= responsiveSizes.mobileLarge) {
42-
setIsResponsivePhone(true);
43-
setIsResponsiveTablet(false);
44-
} else {
45-
setIsResponsiveTablet(false);
46-
setIsResponsivePhone(false);
47-
}
48-
}
49-
};
50-
51-
const handleEventListener = () => {
52-
handleResize(ref.current.offsetWidth);
53-
};
54-
55-
useEffect(() => {
56-
window.addEventListener("resize", handleEventListener);
57-
handleResize(ref.current.offsetWidth);
58-
59-
return () => {
60-
window.removeEventListener("resize", handleEventListener);
61-
};
62-
}, []);
63-
6431
const socialLink = socialLinks?.map((link, index) => (
6532
<SocialAnchor
6633
tabIndex={tabIndex}
@@ -85,18 +52,18 @@ const DxcFooter = ({
8552

8653
return (
8754
<ThemeProvider theme={colorsTheme.footer}>
88-
<FooterContainer margin={margin} refSize={refSize} ref={ref}>
89-
<FooterHeader refSize={refSize}>
55+
<FooterContainer margin={margin}>
56+
<FooterHeader>
9057
<LogoContainer>{footerLogo}</LogoContainer>
91-
<SocialLinkContainer refSize={refSize}>{socialLink}</SocialLinkContainer>
58+
<SocialLinkContainer>{socialLink}</SocialLinkContainer>
9259
</FooterHeader>
9360
<div>
9461
<ChildComponents padding={padding}>
9562
<BackgroundColorProvider color={colorsTheme.footer.backgroundColor}>{children}</BackgroundColorProvider>
9663
</ChildComponents>
97-
<FooterFooter className="footerFooter" refSize={refSize}>
98-
<BottomLinks refSize={refSize}>{bottomLink}</BottomLinks>
99-
<Copyright refSize={refSize}>{copyright}</Copyright>
64+
<FooterFooter className="footerFooter">
65+
<BottomLinks>{bottomLink}</BottomLinks>
66+
<Copyright>{copyright}</Copyright>
10067
</FooterFooter>
10168
</div>
10269
</FooterContainer>
@@ -105,7 +72,15 @@ const DxcFooter = ({
10572
};
10673

10774
const FooterContainer = styled.footer`
108-
padding: ${(props) => (props.refSize <= responsiveSizes.mobileLarge ? "20px 20px 20px 20px" : "24px 36px 24px 36px")};
75+
@media (min-width: ${responsiveSizes.small}rem) {
76+
padding: 24px 36px 24px 36px;
77+
}
78+
79+
@media (max-width: ${responsiveSizes.small}rem) {
80+
//mobile phones
81+
padding: 20px;
82+
}
83+
10984
background-color: ${(props) => props.theme.backgroundColor};
11085
margin-top: ${(props) => (props.margin && typeof props.margin !== "object" ? spaces[props.margin] : "0px")};
11186
width: 100%;
@@ -127,8 +102,17 @@ const FooterFooter = styled.div`
127102
display: flex;
128103
justify-content: space-between;
129104
align-items: flex-end;
130-
flex-direction: ${(props) => (props.refSize <= responsiveSizes.mobileLarge ? "column" : "row")};
131-
align-items: ${(props) => (props.refSize <= responsiveSizes.mobileLarge ? "center" : "")};
105+
106+
@media (min-width: ${responsiveSizes.small}rem) {
107+
flex-direction: row;
108+
}
109+
110+
@media (max-width: ${responsiveSizes.small}rem) {
111+
//mobile phones
112+
flex-direction: column;
113+
align-items: center;
114+
}
115+
132116
border-top: ${(props) =>
133117
`${props.theme.bottomLinksDividerThickness} ${props.theme.bottomLinksDividerStyle} ${props.theme.bottomLinksDividerColor}`};
134118
margin-top: 16px;
@@ -138,8 +122,17 @@ const BottomLinks = styled.div`
138122
padding-top: ${(props) => props.theme.bottomLinksDividerSpacing};
139123
display: inline-flex;
140124
flex-wrap: wrap;
141-
max-width: ${(props) => (props.refSize <= responsiveSizes.mobileLarge ? "100%" : "60%")};
142-
width: ${(props) => (props.refSize <= responsiveSizes.mobileLarge ? "100%" : "")};
125+
126+
@media (min-width: ${responsiveSizes.small}rem) {
127+
max-width: 60%;
128+
}
129+
130+
@media (max-width: ${responsiveSizes.small}rem) {
131+
//mobile phones
132+
max-width: 100%;
133+
width: 100%;
134+
}
135+
143136
& > span:last-child span {
144137
display: none;
145138
}
@@ -166,9 +159,19 @@ const Copyright = styled.div`
166159
font-style: ${(props) => props.theme.copyrightFontStyle};
167160
font-weight: ${(props) => props.theme.copyrightFontWeight};
168161
color: ${(props) => props.theme.copyrightFontColor};
169-
max-width: ${(props) => (props.refSize <= responsiveSizes.mobileLarge ? "100%" : "40%")};
170-
width: ${(props) => (props.refSize <= responsiveSizes.mobileLarge ? "100%" : "")};
171-
text-align: ${(props) => (props.refSize <= responsiveSizes.mobileLarge ? "left" : "right")};
162+
163+
@media (min-width: ${responsiveSizes.small}rem) {
164+
max-width: 40%;
165+
text-align: right;
166+
}
167+
168+
@media (max-width: ${responsiveSizes.small}rem) {
169+
//mobile phones
170+
max-width: 100%;
171+
width: 100%;
172+
text-align: left;
173+
}
174+
172175
padding-top: ${(props) => props.theme.bottomLinksDividerSpacing};
173176
`;
174177

0 commit comments

Comments
 (0)