@procore/labs-card-layout
A card layout with built in company logo img support, edit button, and set title and subtitle fonts
$ cnpm install @procore/labs-card-layout 
SYNC missed versions from official npm registry.

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.

Current Tags

  • 0.1.1-types.10                                ...           latest (2 months ago)

16 Versions

  • 0.1.1-types.10                                ...           2 months ago
  • 0.1.1-types.8                                ...           2 months ago
  • 0.1.1-types.7                                ...           2 months ago
  • 0.1.1-types.6                                ...           2 months ago
  • 0.1.1-types.5                                ...           2 months ago
  • 0.1.1-types.4                                ...           2 months ago
  • 0.1.1-types.3                                ...           2 months ago
  • 0.1.1-types.2                                ...           2 months ago
  • 0.1.1-types.1                                ...           2 months ago
  • 0.1.1-alpha-types.2                                ...           2 months ago
  • 0.1.1-alpha-types.1                                ...           2 months ago
  • 0.1.1-alpha.4                                ...           2 months ago
  • 0.1.1-alpha.3                                ...           2 months ago
  • 0.1.1-alpha.2                                ...           2 months ago
  • 0.1.1-alpha.0                                ...           2 months ago
  • 0.1.1                                ...           2 months ago

Copyright 2014 - 2017 © taobao.org |