@navinc/base-react-components/src/wave-page-container.ts

Nav's Pattern Library

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',
  },
}

type Variation = keyof typeof variations

const WavePageContainer = styled(PageContainer)<{ variation: Variation; height: number }>`
  background-image: url(${({ variation = 'bottom' }) => variations[variation]?.image ?? ''});
  background-position: ${({ variation = 'bottom' }) => variations[variation]?.position ?? '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'};
  }
`

export default WavePageContainer