Skip to content

Commit 89e9c0d

Browse files
author
Kubit
committed
Improve Footer functionalitie
1 parent 1acaf24 commit 89e9c0d

File tree

8 files changed

+259
-113
lines changed

8 files changed

+259
-113
lines changed

‎src/components/footer/__tests__/footer.test.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -89,9 +89,11 @@ describe('Footer component', () => {
8989

9090
const leftContent = getByText('Left content');
9191
const centerContent = getByText('Center content');
92+
const rightContent = getByText('Right content');
9293

93-
// centerContent is before than leftContent
94-
expect(centerContent.compareDocumentPosition(leftContent)).toBe(4);
94+
expect(leftContent).toHaveAttribute('data-position', 'LEFT');
95+
expect(centerContent).toHaveAttribute('data-position', 'CENTER');
96+
expect(rightContent).toHaveAttribute('data-position', 'RIGHT');
9597
});
9698

9799
it('Elements inner group direction can be changed for MOBILE', () => {
@@ -116,7 +118,6 @@ describe('Footer component', () => {
116118
const leftContentI = getByText('Left content I');
117119
const leftContentII = getByText('Left content II');
118120

119-
// leftContent if before than leftContentI
120121
expect(leftContentII.compareDocumentPosition(leftContentI)).toBe(4);
121122
});
122123

‎src/components/footer/components/footerSection.tsx‎

Lines changed: 15 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,16 @@ import { FooterPositionType, FooterPropsStylesType } from '../types';
55

66
interface IFooterSection {
77
styles: FooterPropsStylesType;
8-
forceVertical?: boolean;
8+
setVertical?: boolean;
99
position: string;
10-
tabInverse?: boolean;
10+
orderConfiguration: {
11+
flexReverse?: boolean;
12+
reverse?: boolean;
13+
};
14+
/**
15+
* @deprecated
16+
*/
17+
alignItems?: string;
1118
children: React.ReactNode[];
1219
}
1320

@@ -18,22 +25,23 @@ export const FooterSection = (props: IFooterSection): JSX.Element | null => {
1825

1926
const getElementJustify = (position: string) => {
2027
const styles = {
21-
[FooterPositionType.LEFT]: props.tabInverse ? 'flex-end' : 'flex-start',
28+
[FooterPositionType.LEFT]: props.orderConfiguration.reverse ? 'flex-end' : 'flex-start',
2229
[FooterPositionType.CENTER]: 'center',
23-
[FooterPositionType.RIGHT]: props.tabInverse ? 'flex-start' : 'flex-end',
30+
[FooterPositionType.RIGHT]: props.orderConfiguration.reverse ? 'flex-start' : 'flex-end',
2431
};
2532
return styles[position] || 'center';
2633
};
2734

2835
return (
2936
<FooterSectionStyled
30-
$forceVertical={props.forceVertical}
37+
$alignItems={props.alignItems}
38+
$flexReverse={props.orderConfiguration.flexReverse}
3139
$justifyContent={getElementJustify(props.position)}
32-
$tabInverse={props.tabInverse}
40+
$setVertical={props.setVertical}
3341
aria-hidden={!props.children.length}
3442
styles={props.styles}
3543
>
36-
{props.tabInverse ? props.children.reverse() : props.children}
44+
{props.orderConfiguration.reverse ? props.children.reverse() : props.children}
3745
</FooterSectionStyled>
3846
);
3947
};

‎src/components/footer/footer.styled.ts‎

Lines changed: 58 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,12 @@ import { FooterPropsStylesType } from './types';
77

88
type FooterStylesType = {
99
styles: FooterPropsStylesType;
10-
$forceVertical?: boolean;
11-
$tabInverse?: boolean;
10+
$setVertical?: boolean;
11+
$flexReverse?: boolean;
12+
/**
13+
* @deprecated
14+
*/
15+
$alignItems?: string;
1216
};
1317

1418
type FooterSectionStyledType = FooterStylesType & {
@@ -19,66 +23,63 @@ type RootContainerStyledType = FooterStylesType & {
1923
lineSeparatorLineStyles: LineSeparatorLinePropsStylesType;
2024
};
2125

22-
export const FooterStyled = styled.div<RootContainerStyledType>`
23-
${({ lineSeparatorLineStyles }) =>
24-
lineSeparatorLineStyles?.buildLineStyles?.(LineSeparatorPositionType.TOP)}
25-
${props => getStyles(props.styles?.rootContainer)}
26-
27-
display: flex;
28-
${() =>
29-
({
30-
theme: {
31-
MEDIA_QUERIES: { onlyMobile, tabletAndDesktop },
32-
},
33-
$forceVertical,
34-
$tabInverse,
35-
}) => css`
36-
${tabletAndDesktop} {
37-
flex-direction: ${$forceVertical
38-
? $tabInverse
39-
? 'column-reverse'
40-
: 'column'
41-
: $tabInverse
42-
? 'row-reverse'
43-
: 'row'};
44-
}
45-
${onlyMobile} {
46-
flex-direction: ${$tabInverse ? 'column-reverse' : 'column'};
47-
justify-content: center;
48-
}
49-
`};
50-
`;
51-
5226
export const FooterSectionStyled = styled.div<FooterSectionStyledType>`
5327
${props => getStyles(props.styles?.contentContainer)}
5428
5529
display: flex;
5630
width: 100%;
57-
${() =>
58-
({
59-
theme: {
60-
MEDIA_QUERIES: { onlyMobile, tabletAndDesktop },
61-
},
31+
${({
32+
$justifyContent,
33+
$setVertical,
34+
$flexReverse,
35+
$alignItems,
36+
theme: {
37+
MEDIA_QUERIES: { onlyMobile, tabletAndDesktop },
38+
},
39+
}) => css`
40+
${onlyMobile} {
41+
flex-direction: ${$flexReverse ? 'column-reverse' : 'column'};
42+
}
6243
63-
$justifyContent,
64-
$forceVertical,
65-
$tabInverse,
66-
}) => css`
67-
${tabletAndDesktop} {
68-
justify-content: ${$forceVertical ? 'center' : $justifyContent};
69-
flex-direction: ${$forceVertical
70-
? $tabInverse
71-
? 'column-reverse'
72-
: 'column'
73-
: $tabInverse
74-
? 'row-reverse'
75-
: 'row'};
44+
${tabletAndDesktop} {
45+
align-items: ${$alignItems};
46+
justify-content: ${$setVertical ? 'center' : $justifyContent};
47+
flex-direction: ${$setVertical
48+
? $flexReverse
49+
? 'column-reverse'
50+
: 'column'
51+
: $flexReverse
52+
? 'row-reverse'
53+
: 'row'};
54+
}
55+
`};
56+
`;
57+
58+
export const FooterStyled = styled.div<RootContainerStyledType>`
59+
${({ lineSeparatorLineStyles }) =>
60+
lineSeparatorLineStyles?.buildLineStyles?.(LineSeparatorPositionType.TOP)}
61+
${props => getStyles(props.styles?.rootContainer)}
62+
63+
display: flex;
64+
${({
65+
$setVertical,
66+
$flexReverse,
67+
theme: {
68+
MEDIA_QUERIES: { onlyMobile, tabletAndDesktop },
69+
},
70+
}) => css`
71+
${onlyMobile} {
72+
flex-direction: ${$flexReverse ? 'column-reverse' : 'column'};
73+
}
7674
77-
align-items: ${$forceVertical && 'center'};
78-
}
79-
${onlyMobile} {
80-
flex-direction: ${$tabInverse ? 'column-reverse' : 'column'};
81-
align-items: center;
82-
}
83-
`};
75+
${tabletAndDesktop} {
76+
flex-direction: ${$setVertical
77+
? $flexReverse
78+
? 'column-reverse'
79+
: 'column'
80+
: $flexReverse
81+
? 'row-reverse'
82+
: 'row'};
83+
}
84+
`};
8485
`;

‎src/components/footer/footerStandAlone.tsx‎

Lines changed: 47 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import * as React from 'react';
22

3+
import { DeviceBreakpointsType } from '@/types';
34
import { pickAriaProps } from '@/utils/aria/aria';
45

56
// inner components
@@ -10,27 +11,49 @@ import {
1011
FooterMobileColumnFlow,
1112
FooterPositionType,
1213
IFooterStandAlone,
14+
MobileSort,
1315
} from './types';
16+
import { getOrderConfiguration } from './utils/getOrderConfiguration';
1417

1518
// simple container tag
1619
const FOOTER = 'footer';
1720

21+
const DEFAULT_SORT: MobileSort = {
22+
column: FooterMobileColumnFlow.DEFAULT,
23+
firstContent: FooterPositionType.LEFT,
24+
secondContent: FooterPositionType.CENTER,
25+
thirdContent: FooterPositionType.RIGHT,
26+
};
27+
1828
const FooterStandAloneComponent = (
19-
{ ...props }: IFooterStandAlone,
29+
{ orderInverse = [], footerMobileSortConfig = DEFAULT_SORT, ...props }: IFooterStandAlone,
2030
ref: React.ForwardedRef<HTMLElement> | undefined | null
2131
): JSX.Element | null => {
2232
if (!props.children) {
2333
return null;
2434
}
2535

2636
const ariaProps = pickAriaProps(props);
27-
2837
const asFooter = props.simpleContainer ? undefined : FOOTER;
2938

39+
// START CONTENT: Remove when footerMobileSortConfig is removed
40+
if (footerMobileSortConfig?.column === FooterMobileColumnFlow.REVERSE) {
41+
orderInverse.push(DeviceBreakpointsType.MOBILE);
42+
}
43+
// END CONTENT
44+
45+
const setVertical =
46+
props.contentDirection === ContentDirectionType.VERTICAL ||
47+
// START CONTENT: Remove when forceVertical is removed
48+
props.forceVertical;
49+
// END CONTENT
50+
51+
const orderConfiguration = getOrderConfiguration(props.tabInverse || [], orderInverse);
52+
3053
const renderChildren = (children: JSX.Element | JSX.Element[]) => {
3154
const childrenArray = React.Children.toArray(children);
3255

33-
const positions = {
56+
const positions: { [key in FooterPositionType]: React.ReactNode[] } = {
3457
[FooterPositionType.LEFT]: [],
3558
[FooterPositionType.CENTER]: [],
3659
[FooterPositionType.RIGHT]: [],
@@ -42,13 +65,18 @@ const FooterStandAloneComponent = (
4265
let position = (child as JSX.Element)?.props?.['data-position'];
4366

4467
// START CONTENT: Remove when footerMobileSortConfig is removed
45-
if (props.footerMobileSortConfig) {
46-
if (props.footerMobileSortConfig.firstContent === position) {
47-
position = FooterPositionType.LEFT;
48-
} else if (props.footerMobileSortConfig.secondContent === position) {
49-
position = FooterPositionType.CENTER;
50-
} else if (props.footerMobileSortConfig.thirdContent === position) {
51-
position = FooterPositionType.RIGHT;
68+
if (footerMobileSortConfig && props.device === DeviceBreakpointsType.MOBILE) {
69+
const { firstContent, secondContent, thirdContent } = footerMobileSortConfig;
70+
71+
if (position === firstContent) {
72+
positions[FooterPositionType.LEFT].push(child);
73+
return;
74+
} else if (position === secondContent) {
75+
positions[FooterPositionType.CENTER].push(child);
76+
return;
77+
} else if (position === thirdContent) {
78+
positions[FooterPositionType.RIGHT].push(child);
79+
return;
5280
}
5381
}
5482
// END CONTENT
@@ -70,35 +98,29 @@ const FooterStandAloneComponent = (
7098
const sections = Object.entries(positions).map(([position, children]) => (
7199
<FooterSection
72100
key={position}
73-
forceVertical={forceVertical}
101+
alignItems={props.alignItems}
102+
orderConfiguration={{
103+
flexReverse: orderConfiguration[props.device].flexReverse,
104+
reverse: orderConfiguration[props.device].reverse,
105+
}}
74106
position={position}
107+
setVertical={setVertical}
75108
styles={props.styles}
76-
tabInverse={tabInverse}
77109
>
78110
{children}
79111
</FooterSection>
80112
));
81113

82-
return <>{tabInverse ? sections.reverse() : sections}</>;
114+
return <>{orderConfiguration[props.device].reverse ? sections.reverse() : sections}</>;
83115
};
84116

85-
// START CONTENT: Remove when contentDirection is removed
86-
const forceVertical =
87-
props.forceVertical || props.contentDirection === ContentDirectionType.VERTICAL;
88-
// END CONTENT
89-
90-
// START CONTENT: Remove when footerMobileSortConfig is removed
91-
const tabInverse =
92-
props.tabInverse || props.footerMobileSortConfig?.column === FooterMobileColumnFlow.REVERSE;
93-
// END CONTENT
94-
95117
return (
96118
<FooterStyled
97119
{...ariaProps}
98120
{...props}
99121
ref={ref}
100-
$forceVertical={forceVertical}
101-
$tabInverse={tabInverse}
122+
$flexReverse={orderConfiguration[props.device].flexReverse}
123+
$setVertical={setVertical}
102124
as={asFooter}
103125
data-testid={props.dataTestId}
104126
lineSeparatorLineStyles={props.lineSeparatorLineStyles}

0 commit comments

Comments
 (0)