Row

Install

yarn add @ied/row

If you use icon property, add this to your index.html

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Use

import Row from '@ied/row'

1 - Row with icon + description + inline + hoverable

<Row
  icon="business"
  label="Wednesday"
  description="Filenumber"
  inline
  hoverable
/>

2 - Row with icon + description + hoverable

<Row icon="person" label="Mr World" description="Filenumber" hoverable />

3 - Row with icon + hoverable

<Row icon="date_range" label="Czernobog" hoverable />

4 - Row with description + hoverable

<Row label="Media" description="[email protected]" hoverable />

5 - Row with description + inline + hoverable

<Row label="Media" description="[email protected]" hoverable inline />

6 - Row with badge(icon, small) + description + hoverable

<Row
  label="Shadow Moon"
  badge={{ icon: 'people', small: true }}
  description="[email protected]"
  hoverable
/>

7 - Row with badge(icon) + description + hoverable

<Row
  label="Shadow Moon"
  badge={{ icon: 'people' }}
  description="[email protected]"
  hoverable
/>

8 - Row with badge(fullName) + description + hoverable

<Row
  label="Clark Kent"
  badge={{ firstName: 'Clark', lastName: 'Kent' }}
  description="[email protected]"
  hoverable
/>

9 - Row with badge(fullName, small) + description + hoverable

<Row
  label="Clark Kent"
  badge={{ firstName: 'Clark', lastName: 'Kent', small: true }}
  description="[email protected]"
  hoverable
  inline
/>

Types

type Props = {
  icon?: string,
  label: string,
  description?: string,
  badge?: {
    lastName?: string,
    firstName?: string,
    icon?: string,
    small?: boolean,
  },
  style?: {},
  className?: string,
  inline?: boolean,
  hoverable?: boolean,
}