@procore/labs-card-layout NPM

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.

classnames react-router-dom

@infinitebrahmanuniverse/nolb-_proc @everything-registry/sub-chunk-738

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago