Skip to content

Commit 129dcc5

Browse files
mxschllmxschll
authored
fix: set header bg to transparent if root bg is provided (#4029)
1 parent 83500f3 commit 129dcc5

File tree

3 files changed

+348
-48
lines changed

3 files changed

+348
-48
lines changed

‎src/container/__tests__/__snapshots__/styles.test.tsx.snap‎

Lines changed: 152 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,152 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`getContentStyles handles all possible style configurations 1`] = `
4+
{
5+
"paddingBlock": undefined,
6+
"paddingInline": undefined,
7+
}
8+
`;
9+
10+
exports[`getContentStyles handles all possible style configurations 2`] = `
11+
{
12+
"paddingBlock": undefined,
13+
"paddingInline": undefined,
14+
}
15+
`;
16+
17+
exports[`getContentStyles handles all possible style configurations 3`] = `
18+
{
19+
"paddingBlock": "16px",
20+
"paddingInline": "20px",
21+
}
22+
`;
23+
24+
exports[`getFooterStyles handles all possible style configurations 1`] = `
25+
{
26+
"borderColor": undefined,
27+
"borderWidth": undefined,
28+
"paddingBlock": undefined,
29+
"paddingInline": undefined,
30+
}
31+
`;
32+
33+
exports[`getFooterStyles handles all possible style configurations 2`] = `
34+
{
35+
"borderColor": undefined,
36+
"borderWidth": undefined,
37+
"paddingBlock": undefined,
38+
"paddingInline": undefined,
39+
}
40+
`;
41+
42+
exports[`getFooterStyles handles all possible style configurations 3`] = `
43+
{
44+
"borderColor": "#e0e0e0",
45+
"borderWidth": "1px",
46+
"paddingBlock": "12px",
47+
"paddingInline": "20px",
48+
}
49+
`;
50+
51+
exports[`getHeaderStyles handles all possible style configurations 1`] = `
52+
{
53+
"borderRadius": undefined,
54+
"paddingBlock": undefined,
55+
"paddingInline": undefined,
56+
}
57+
`;
58+
59+
exports[`getHeaderStyles handles all possible style configurations 2`] = `
60+
{
61+
"borderRadius": undefined,
62+
"paddingBlock": undefined,
63+
"paddingInline": undefined,
64+
}
65+
`;
66+
67+
exports[`getHeaderStyles handles all possible style configurations 3`] = `
68+
{
69+
"background": "transparent",
70+
"borderRadius": "8px",
71+
"paddingBlock": "12px",
72+
"paddingInline": "20px",
73+
}
74+
`;
75+
76+
exports[`getMediaStyles handles all possible style configurations 1`] = `
77+
{
78+
"borderEndEndRadius": "0px",
79+
"borderEndStartRadius": "0px",
80+
"borderRadius": undefined,
81+
}
82+
`;
83+
84+
exports[`getMediaStyles handles all possible style configurations 2`] = `
85+
{
86+
"borderEndEndRadius": "0px",
87+
"borderEndStartRadius": "0px",
88+
"borderRadius": undefined,
89+
}
90+
`;
91+
92+
exports[`getMediaStyles handles all possible style configurations 3`] = `
93+
{
94+
"borderEndEndRadius": "0px",
95+
"borderEndStartRadius": "0px",
96+
"borderRadius": "8px",
97+
}
98+
`;
99+
100+
exports[`getMediaStyles handles all possible style configurations 4`] = `
101+
{
102+
"borderEndEndRadius": "0px",
103+
"borderRadius": undefined,
104+
"borderStartEndRadius": "0px",
105+
}
106+
`;
107+
108+
exports[`getMediaStyles handles all possible style configurations 5`] = `
109+
{
110+
"borderEndEndRadius": "0px",
111+
"borderRadius": undefined,
112+
"borderStartEndRadius": "0px",
113+
}
114+
`;
115+
116+
exports[`getMediaStyles handles all possible style configurations 6`] = `
117+
{
118+
"borderEndEndRadius": "0px",
119+
"borderRadius": "8px",
120+
"borderStartEndRadius": "0px",
121+
}
122+
`;
123+
124+
exports[`getRootStyles handles all possible style configurations 1`] = `
125+
{
126+
"background": undefined,
127+
"borderColor": undefined,
128+
"borderRadius": undefined,
129+
"borderWidth": undefined,
130+
"boxShadow": undefined,
131+
}
132+
`;
133+
134+
exports[`getRootStyles handles all possible style configurations 2`] = `
135+
{
136+
"background": undefined,
137+
"borderColor": undefined,
138+
"borderRadius": undefined,
139+
"borderWidth": undefined,
140+
"boxShadow": undefined,
141+
}
142+
`;
143+
144+
exports[`getRootStyles handles all possible style configurations 3`] = `
145+
{
146+
"background": "#ffffff",
147+
"borderColor": "#e0e0e0",
148+
"borderRadius": "8px",
149+
"borderWidth": "1px",
150+
"boxShadow": "0 1px 3px rgba(0,0,0,0.1)",
151+
}
152+
`;

‎src/container/__tests__/styles.test.tsx‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import { getContentStyles, getFooterStyles, getHeaderStyles, getMediaStyles, getRootStyles } from '../style';
4+
5+
jest.mock('../../internal/environment', () => ({
6+
SYSTEM: 'core',
7+
}));
8+
9+
const allStyles = {
10+
root: {
11+
background: '#ffffff',
12+
borderColor: '#e0e0e0',
13+
borderRadius: '8px',
14+
borderWidth: '1px',
15+
boxShadow: '0 1px 3px rgba(0,0,0,0.1)',
16+
},
17+
content: {
18+
paddingBlock: '16px',
19+
paddingInline: '20px',
20+
},
21+
header: {
22+
paddingBlock: '12px',
23+
paddingInline: '20px',
24+
},
25+
footer: {
26+
root: {
27+
paddingBlock: '12px',
28+
paddingInline: '20px',
29+
},
30+
divider: {
31+
borderColor: '#e0e0e0',
32+
borderWidth: '1px',
33+
},
34+
},
35+
};
36+
37+
describe('getRootStyles', () => {
38+
afterEach(() => {
39+
jest.resetModules();
40+
});
41+
42+
test('handles all possible style configurations', () => {
43+
expect(getRootStyles(undefined)).toMatchSnapshot();
44+
expect(getRootStyles({})).toMatchSnapshot();
45+
expect(getRootStyles(allStyles)).toMatchSnapshot();
46+
});
47+
48+
test('returns empty object when SYSTEM is not core', async () => {
49+
jest.resetModules();
50+
jest.doMock('../../internal/environment', () => ({
51+
SYSTEM: 'visual-refresh',
52+
}));
53+
54+
const { getRootStyles: getRootStylesNonCore } = await import('../style');
55+
56+
const result = getRootStylesNonCore(allStyles);
57+
expect(result).toEqual({});
58+
});
59+
});
60+
61+
describe('getContentStyles', () => {
62+
afterEach(() => {
63+
jest.resetModules();
64+
});
65+
66+
test('handles all possible style configurations', () => {
67+
expect(getContentStyles(undefined)).toMatchSnapshot();
68+
expect(getContentStyles({})).toMatchSnapshot();
69+
expect(getContentStyles(allStyles)).toMatchSnapshot();
70+
});
71+
72+
test('returns empty object when SYSTEM is not core', async () => {
73+
jest.resetModules();
74+
jest.doMock('../../internal/environment', () => ({
75+
SYSTEM: 'visual-refresh',
76+
}));
77+
78+
const { getContentStyles: getContentStylesNonCore } = await import('../style');
79+
80+
const result = getContentStylesNonCore(allStyles);
81+
expect(result).toEqual({});
82+
});
83+
});
84+
85+
describe('getHeaderStyles', () => {
86+
afterEach(() => {
87+
jest.resetModules();
88+
});
89+
90+
test('handles all possible style configurations', () => {
91+
expect(getHeaderStyles(undefined)).toMatchSnapshot();
92+
expect(getHeaderStyles({})).toMatchSnapshot();
93+
expect(getHeaderStyles(allStyles)).toMatchSnapshot();
94+
});
95+
96+
test('returns empty object when SYSTEM is not core', async () => {
97+
jest.resetModules();
98+
jest.doMock('../../internal/environment', () => ({
99+
SYSTEM: 'visual-refresh',
100+
}));
101+
102+
const { getHeaderStyles: getHeaderStylesNonCore } = await import('../style');
103+
104+
const result = getHeaderStylesNonCore(allStyles);
105+
expect(result).toEqual({});
106+
});
107+
});
108+
109+
describe('getFooterStyles', () => {
110+
afterEach(() => {
111+
jest.resetModules();
112+
});
113+
114+
test('handles all possible style configurations', () => {
115+
expect(getFooterStyles(undefined)).toMatchSnapshot();
116+
expect(getFooterStyles({})).toMatchSnapshot();
117+
expect(getFooterStyles(allStyles)).toMatchSnapshot();
118+
});
119+
120+
test('returns empty object when SYSTEM is not core', async () => {
121+
jest.resetModules();
122+
jest.doMock('../../internal/environment', () => ({
123+
SYSTEM: 'visual-refresh',
124+
}));
125+
126+
const { getFooterStyles: getFooterStylesNonCore } = await import('../style');
127+
128+
const result = getFooterStylesNonCore(allStyles);
129+
expect(result).toEqual({});
130+
});
131+
});
132+
133+
describe('getMediaStyles', () => {
134+
afterEach(() => {
135+
jest.resetModules();
136+
});
137+
138+
test('handles all possible style configurations', () => {
139+
expect(getMediaStyles('top', undefined)).toMatchSnapshot();
140+
expect(getMediaStyles('top', {})).toMatchSnapshot();
141+
expect(getMediaStyles('top', allStyles)).toMatchSnapshot();
142+
expect(getMediaStyles('side', undefined)).toMatchSnapshot();
143+
expect(getMediaStyles('side', {})).toMatchSnapshot();
144+
expect(getMediaStyles('side', allStyles)).toMatchSnapshot();
145+
});
146+
147+
test('returns empty object when SYSTEM is not core', async () => {
148+
jest.resetModules();
149+
jest.doMock('../../internal/environment', () => ({
150+
SYSTEM: 'visual-refresh',
151+
}));
152+
153+
const { getMediaStyles: getMediaStylesNonCore } = await import('../style');
154+
155+
const result = getMediaStylesNonCore('top', allStyles);
156+
expect(result).toEqual({});
157+
});
158+
});

0 commit comments

Comments
 (0)