@navinc/base-react-components
Version:
Nav's Pattern Library
61 lines • 2.61 kB
JavaScript
import styled from 'styled-components';
import { PageContainer } from './page-container';
// purple
const BottomWave = 'https://design-assets.nav.com/illustrations/color-wave-up.svg';
const TopWave = 'https://design-assets.nav.com/illustrations/color-wave-down.svg';
const TopDynamicWave = 'https://design-assets.nav.com/illustrations/color-wave-down-dynamic.svg';
// light purple
const TopWaveLight = 'https://design-assets.nav.com/illustrations/color-wave-down-light.svg';
const TopDynamicWaveLight = 'https://design-assets.nav.com/illustrations/color-wave-down-light-dynamic.svg';
// tan
const BottomWaveTan = 'https://design-assets.nav.com/illustrations/tan-wave-up.svg';
const TopWaveTanLight = 'https://design-assets.nav.com/illustrations/tan-wave-down.svg';
const TopDynamicWaveTanLight = 'https://design-assets.nav.com/illustrations/tan-wave-down-dynamic.svg';
const variations = {
// purple
bottom: {
image: BottomWave,
position: '0 100%',
},
top: {
image: TopWave,
position: '0 0',
},
topDynamic: {
image: TopDynamicWave,
position: '0 0',
},
// light purple
topLight: {
image: TopWaveLight,
position: '0 0',
},
topLightDynamic: {
image: TopDynamicWaveLight,
position: '0 0',
},
// tan
bottomTan: {
image: BottomWaveTan,
position: '0 100%',
},
topTan: {
image: TopWaveTanLight,
position: '0 0',
},
topTanDynamic: {
image: TopDynamicWaveTanLight,
position: '0 0',
},
};
export const WavePageContainer = styled(PageContainer).withConfig({ displayName: "brc-sc-WavePageContainer", componentId: "brc-sc-16unq91" }) `
background-image: url(${({ variation = 'bottom' }) => { var _a, _b; return (_b = (_a = variations[variation]) === null || _a === void 0 ? void 0 : _a.image) !== null && _b !== void 0 ? _b : ''; }});
background-position: ${({ variation = 'bottom' }) => { var _a, _b; return (_b = (_a = variations[variation]) === null || _a === void 0 ? void 0 : _a.position) !== null && _b !== void 0 ? _b : '0 100%'; }};
background-repeat: no-repeat;
background-size: ${({ variation, height = 350 }) => ['topDynamic', 'topLightDynamic', 'topTanDynamic'].includes(variation) ? `100% ${height}px` : 'inherit'};
background-position-x: center;
@media (min-width: 1400px) {
background-size: ${({ variation, height = 350 }) => ['topDynamic', 'topLightDynamic', 'topTanDynamic'].includes(variation) ? `100% ${height}px` : 'contain'};
}
`;
//# sourceMappingURL=wave-page-container.js.map