@navinc/base-react-components/src/page-container.story.js

Nav's Pattern Library

import React from 'react'
import PageContainer from './page-container.js'
import readme from './page-container.readme.md'

export default {
  title: 'Layout/PageContainer',
  component: PageContainer,
  parameters: {
    readme: { content: readme },
  },
}

export const Basic = () => (
  <div
    style={{
      position: 'absolute',
      height: '100%',
      width: '100%',
      top: '0',
      left: '0',
    }}
  >
    <PageContainer>
      <div
        style={{
          flex: '1 1 100%',
          height: '100%',
          backgroundColor: 'lightgrey',
        }}
      >
        This background is just so you can see how this works. Try adjusting the screen size!!
      </div>
    </PageContainer>
  </div>
)