@procore/labs-centered-page-layout v0.3.0

Centered Page Layout

A page Centered page layout, with available left and right rails to put content in normally blank areas. Includes fixed side navigation and routing.

Installation

yarn add @procore/labs-centered-page-layout
yarn add react-router-dom

Usage

import * as CenteredPageLayout from '@procore/labs-centered-page-layout'

const MyLayout = () => (
    <CenteredPageLayout.Container>
        <CenteredPageLayout.Left fixed>
        my left content
        </CenteredPageLayout.Left>
        <CenteredPageLayout.Body>
        My body content
        </CenteredPageLayout.Body>
        <CenteredPageLayout.Right>
        My right content
        </CenteredPageLayout.Right>
    </CenteredPageLayout.Container>
)

Usage with Navigation

import * as CenteredPageLayout from '@procore/labs-centered-page-layout'
import { BrowserRouter } from 'react-router-dom'

const MyComponentWithNav = () => {
    const navigationItems = [
        {
            title: 'Procore',
            url: '/procore',
            active: false,
        },
        {
            title: 'Preconstruction',
            url: '/precon',
            active: true,
            subtabs: [
                {
                    title: 'Bidding',
                    url: '/precon/bidding',
                    active: true,
                },
                {
                    title: 'Planroom',
                    url: '/precon/planroom',
                    active: false,
                },
            ],
        },
    ];
    return (
        <BrowserRouter>
            <CenteredPageLayout.Container>
                <CenteredPageLayout.Left fixed>
                    <CenteredPageLayout.Navigation title="Welcome" url="/" active>
                        <CenteredPageLayout.NavigationTabs tabs={navigationItems} />
                    </CenteredPageLayout.Navigation>
                </CenteredPageLayout.Left>
                <CenteredPageLayout.Body>
                    Center
                </CenteredPageLayout.Body>
                <CenteredPageLayout.Right>
                    Right
                </CenteredPageLayout.Right>
            </CenteredPageLayout.Container>
        </BrowserRouter>
    )
}

Testing

yarn test

Examples

yarn storybook

Dependencies

react-router-dom, @procore/core-react, and react are listed as external peer dependencies. The package will not bundle the code, and requires the app client to provide it as a dependency. The external peer dep is to assure React Context is consistent in a client's React tree, the child consumers can reference the correct parent provider. If the package uses latest features or bug fixes and a new minimum version of core-react is required, it should be considered a breaking change as the peer dependency version must be met.