Card Layout
A Card Layout API, which has built in predefined padding, and various child components available for consumption including, company logo, edit button, title, subtitle, and content components.
Installation
yarn add @procore/labs-card-layout
Usage
import * as CardLayout from '@procore/labs-card-layout'
const MyComponent = () => (
<CardLayout.Container>
<CardLayout.Header>
<CardLayout.Logo url="https://www.procore.com/logo" />
<CardLayout.TitleContainer>
<CardLayout.SubTitle>Overview</CardLayout.SubTitle>
<CardLayout.Title>Allen Construction</CardLayout.Title>
</CardLayout.TitleContainer>
<CardLayout.Edit
canEdit
onClick={() => alert('clicked')}
label="Edit"
tooltip="Edit Profile"
tooltipPlacement="bottom"
/>
</CardLayout.Header>
<CardLayout.Body>
Location for content to go. Pass any component to me.
</CardLayout.Body>
</CardLayout.Container>
)
Components
<Container />
props |
type |
children |
reactNode |
className |
string |
<Body />
props |
type |
children |
reactNode |
className |
string |
<Header />
props |
type |
children |
reactNode |
action |
reactNode |
status |
reactNode |
<TitleContainer />
props |
type |
children |
reactNode |
<Title />
props |
type |
children |
reactNode |
className |
string |
<SubTitle />
props |
type |
children |
reactNode |
<Edit />
props |
type |
label |
string |
canEdit |
boolean |
onClick |
function |
tooltip |
string |
tooltipPlacement |
string |
<Logo />
Testing
yarn test
Dependencies
@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.