@procore/labs-card-layout
v0.1.1-types.10
Published
A card layout with built in company logo img support, edit button, and set title and subtitle fonts
Downloads
100
Maintainers
Keywords
Readme
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 />
| props | type | | :---- | :----- | | url | string |
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.