cf-ui

cf-builder-card

const React = require('react');
const {render} = require('react-dom');
const {createStore, combineReducers} = require('redux');
const {Provider} = require('react-redux');
const {
  CardBuilder,
  cardReducer 
= require('../../src/index');
const {Button} = require('cf-component-button');
const {
  Table,
  TableBody,
  TableRow,
  TableCell 
= require('cf-component-table');
 
const EXAMPLE_CARD = 'EXAMPLE_CARD';
 
class Component extends React.Component {
  render() {
    return (
      <CardBuilder
        cardName={EXAMPLE_CARD}
        title="This is a Card"
        description="This is the description of a card."
        control={
          <Button>Click me!</Button>
        }
        table={
          <Table striped>
            <TableBody>
              <TableRow>
                <TableCell>One</TableCell>
                <TableCell>Two</TableCell>
              </TableRow>
              <TableRow>
                <TableCell>Three</TableCell>
                <TableCell>Four</TableCell>
              </TableRow>
            </TableBody>
          </Table>
        }
        drawers={[{
          id: 'api',
          name: 'API',
          content: 'API Content'
        }, {
          id: 'help',
          name: 'Help',
          content: 'Help Content'
        }]}/>
    );
  }
}
 
const reducer = combineReducers({
  cards: cardReducer
});
 
const store = createStore(reducer);
 
render(
  <Provider store={store}>
    <Component/>
  </Provider>,
  document.getElementById('cf-builder-card--basic')
);

<CardBuilder/>

Prop NameProp Validation
cardName
PropTypes.string.isRequired
title
PropTypes.string.isRequired
description
PropTypes.string.isRequired
control
PropTypes.element
table
PropTypes.element
drawers
CardPropTypes.cardDrawers
onDrawerClick
PropTypes.func
activeDrawer
PropTypes.string

cf-builder-pagination

const React = require('react');
const {render} = require('react-dom');
const {PaginationBuilder} = require('../../src/index');
 
function getStartAndEnd(page, pageSize) {
  const start = (page - 1) * pageSize;
  const end = start + pageSize - 1;
  return [start, end];
}
 
function hasAllItems(items, start, end) {
  for (let i = start; i <= end; i++) {
    if (!items[i] || items[i].isRequesting) {
      return false;
    }
  }
 
  return true;
}
 
class Component extends React.Component {
  state = {
    items: [],
    totalCount: 143,
    page: 1,
    perPage: 20
  };
 
  componentDidMount() {
    this.maybeRequestPage(this.state.page);
  }
 
  handlePageChange = page => {
    this.maybeRequestPage(page);
  };
 
  // This is mimicking what will happen in the API actions/reducers: 
  maybeRequestPage(page) {
    const items = this.state.items.slice();
    const [start, end] = getStartAndEnd(page, this.state.perPage);
    const needsRequest = !hasAllItems(items, start, end);
 
    if (!needsRequest) {
      this.setState({ page });
      return;
    }
 
    for (let i = start; i <= end; i++) {
      if (!items[i]) {
        items[i] = {
          isRequesting: true
        };
      }
    }
 
    this.setState({ page, items });
 
    setTimeout(() => {
      const items = this.state.items.slice();
 
      for (let i = start; i <= end; i++) {
        items[i].isRequesting = false;
      }
 
      this.setState({ items });
    }, 500);
  }
 
  render() {
    const [start, end] = getStartAndEnd(this.state.page, this.state.perPage);
    const loading = !hasAllItems(this.state.items, start, end);
 
    return (
      <PaginationBuilder
        onPageChange={this.handlePageChange}
        loading={loading}
        totalCount={this.state.totalCount}
        page={this.state.page}
        perPage={this.state.perPage}/>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-builder-pagination--basic')
);

<PaginationBuilder/>

Prop NameProp Validation
onPageChange
PropTypes.func.isRequired
loading
PropTypes.bool
totalCount
PropTypes.number.isRequired
page
PropTypes.number.isRequired
perPage
PropTypes.number.isRequired
infoFormatter
PropTypes.func

cf-builder-table

const React = require('react');
const {render} = require('react-dom');
const {createStore, combineReducers, applyMiddleware} = require('redux');
const {Provider, connect} = require('react-redux');
const thunk = require('redux-thunk').default;
const {
  TableBuilder,
  tableReducer,
  tableActions 
= require('../../src/index');
const {TableCell} = require('cf-component-table');
const {Button} = require('cf-component-button');
 
const EXAMPLE_TABLE = 'EXAMPLE_TABLE';
 
class Component extends React.Component {
  state = {
    data: [
      { id: '1', name: 'James', coolness: 1 },
      { id: '2', name: 'David', coolness: -1 }
    ]
  };
 
  handleClick = id => {
    this.setState({
      data: this.state.data.map(item => {
        return item.id === id
          ? { ...item, coolness: item.id === '1' ? Infinity : -Infinity }
          : item;
      })
    }, () => {
      this.props.dispatch(tableActions.flashRow(EXAMPLE_TABLE, id, 'success'));
    });
  };
 
  render() {
    return (
      <TableBuilder
        tableName={EXAMPLE_TABLE}
        rows={this.state.data.map(item => {
          return { id: item.id, cells: item };
        })}
        columns={[{
          label: 'Name',
          cell: cells => {
            return (
              <TableCell key="name">
                {cells.name}
              </TableCell>
            );
          }
        }, {
          label: 'Coolness',
          cell: cells => {
            return (
              <TableCell key="coolness">
                {cells.coolness.toString()}
              </TableCell>
            );
          }
        }, {
          label: 'Update',
          cell: cells => {
            return (
              <TableCell key="actions">
                <Button onClick={this.handleClick.bind(null, cells.id)}>
                  Update
                </Button>
              </TableCell>
            );
          }
        }]}/>
    );
  }
}
 
const ConnectedComponent = connect(() => ({}))(Component);
 
const reducer = combineReducers({
  tables: tableReducer
});
 
const store = createStore(reducer, {}, applyMiddleware(thunk));
 
render(
  <Provider store={store}>
    <ConnectedComponent/>
  </Provider>,
  document.getElementById('cf-builder-table--basic')
);

<TableBuilder/>

Prop NameProp Validation
tableName
PropTypes.string.isRequired
rows
TableBuilderPropTypes.rows.isRequired
columns
TableBuilderPropTypes.columns.isRequired
striped
PropTypes.bool
hover
PropTypes.bool
bordered
PropTypes.bool
condensed
PropTypes.bool
flashes
PropTypes.object

TableBuilderPropTypes

Prop NameProp Validation
row
PropTypes.shape({
  id: PropTypes.string.isRequired,
  cells: PropTypes.object.isRequired,
  type: TablePropTypes.rowType,
  accent: TablePropTypes.rowAccent
})
rows
PropTypes.arrayOf(row)
column
PropTypes.shape({
  label: PropTypes.string.isRequired,
  cell: PropTypes.func.isRequired,
  sortable: PropTypes.bool
})
columns
PropTypes.arrayOf(column)

cf-component-button

const React = require('react');
const {render} = require('react-dom');
const {
  ButtonGroup,
  Button 
= require('../../src/index');
 
class Component extends React.Component {
  handleButtonOneClick = () => {
    console.log('Clicked Button One!');
  };
 
  handleButtonTwoClick = () => {
    console.log('Clicked Button Two!');
  };
 
  render() {
    return (
      <ButtonGroup>
        <Button type="primary" onClick={this.handleButtonOneClick}>
          Button One
        </Button>
        <Button type="primary" onClick={this.handleButtonTwoClick}>
          Button Two
        </Button>
      </ButtonGroup>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-button--basic')
);

<Button/>

Prop NameProp Validation
onClick
PropTypes.func.isRequired
submit
PropTypes.bool
type
PropTypes.oneOf(['default', 'primary', 'success', 'warning', 'danger']).isRequired
disabled
PropTypes.bool
loading
PropTypes.bool

cf-component-callout

const React = require('react');
const {render} = require('react-dom');
 
const Callout = require('../../src/index');
 
class Component extends React.Component {
  render() {
    return (
      <Callout
        title="Callout Title"
        content="Callout content."/>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-callout--basic')
);

<Callout/>

Prop NameProp Validation
type
PropTypes.oneOf(['default', 'info'])
title
PropTypes.string.isRequired
content
PropTypes.string.isRequired

cf-component-card

const React = require('react');
const {render} = require('react-dom');
const {
  Card,
  CardContent,
  CardControl,
  CardDrawers,
  CardLoadingText,
  CardMessages,
  CardSection 
= require('../../src/index');
const {Button} = require('cf-component-button');
 
class Component extends React.Component {
  state = {
    activeDrawer: null
  };
 
  handleDrawerClick = id => {
    this.setState({
      activeDrawer: id === this.state.activeDrawer ? null : id
    });
  };
 
  render() {
    return (
      <Card>
        <CardSection>
          <CardContent title="Hello World" footerMessage="This is a footer message.">
            <p>Here is some content.</p>
            <CardMessages messages={[
              { type: 'info', content: 'Info Message'},
              { type: 'error', content: 'Error Message'}
            ]}/>
          </CardContent>
          <CardControl>
            <Button onClick={() => {}}>Example Control</Button>
          </CardControl>
        </CardSection>
        <CardDrawers
          onClick={this.handleDrawerClick}
          active={this.state.activeDrawer}
          drawers={[{
            id: 'one',
            name: 'One',
            content: <p>One</p>
          }, {
            id: 'two',
            name: 'Two',
            content: <p>Two</p>
          }]}/>
      </Card>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-card--basic')
);

<CardContent/>

Prop NameProp Validation
title
PropTypes.any.isRequired
footerMessage
PropTypes.string

<CardDrawers/>

Prop NameProp Validation
onClick
PropTypes.func.isRequired
active
PropTypes.string
drawers
CardPropTypes.cardDrawers.isRequired
controls
PropTypes.any

<CardMessages/>

Prop NameProp Validation
messages
PropTypes.arrayOf(PropTypes.shape({
  type: PropTypes.oneOf(['info', 'success', 'error', 'warning']),
  content: PropTypes.any.isRequired
})).isRequired

<CardSection/>

Prop NameProp Validation
status
PropTypes.oneOf(['default', 'error'])

<CardToolbar/>

Prop NameProp Validation
controls
PropTypes.any
links
PropTypes.any
Prop NameProp Validation
onClick
PropTypes.func.isRequired
isActive
PropTypes.bool.isRequired
id
PropTypes.string

CardPropTypes

Prop NameProp Validation
cardDrawer
PropTypes.shape({
  id: PropTypes.string.isRequired,
  name: PropTypes.string.isRequired,
  content: PropTypes.any.isRequired
})
cardDrawers
PropTypes.arrayOf(cardDrawer)

cf-component-checkbox

const React = require('react');
const {render} = require('react-dom');
 
const {
  Checkbox,
  CheckboxGroup 
= require('../../src/index');
 
class Component extends React.Component {
  state = {
    checkbox1: true,
    checkbox2: false,
    checkboxValues: ["option1"]
  };
 
  onCheckboxGroupChange = values => {
    this.setState({
      checkboxValues: values
    });
  };
 
  render() {
    return (
      <div>
        <p>You can create them individually with <code>Checkbox</code></p>
 
        <Checkbox
          label="Checkbox 1"
          name="checkbox-1"
          value="checkbox1"
          checked={this.state.checkbox1}
          onChange={checked => this.setState({ checkbox1: checked })}/>
 
        <Checkbox
          label="Checkbox 2"
          name="checkbox-2"
          value="checkbox2"
          checked={this.state.checkbox2}
          onChange={checked => this.setState({ checkbox2: checked })}/>
 
        <p>Or as a group with <code>CheckboxGroup</code></p>
 
        <CheckboxGroup
          values={this.state.checkboxValues}
          onChange={this.onCheckboxGroupChange}
          options={[
            { label: 'Option 1', name: 'group-option-1', value: 'option1' },
            { label: 'Option 2', name: 'group-option-2', value: 'option2' }
          ]}/>
 
        <p>You can also disable a label by passing <code>false</code> explicitly</p>
 
        <Checkbox
          label={false}
          name="checkbox-1-no-label"
          value="checkbox1"
          checked={this.state.checkbox1}
          onChange={checked => this.setState({ checkbox1: checked })}/>
      </div>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-checkbox--basic')
);

<Checkbox/>

Prop NameProp Validation
label
PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([false])]).isRequired
name
PropTypes.string.isRequired
value
PropTypes.string.isRequired
checked
PropTypes.bool.isRequired
onChange
PropTypes.func.isRequired

<CheckboxGroup/>

Prop NameProp Validation
values
PropTypes.arrayOf(PropTypes.string).isRequired
onChange
PropTypes.func.isRequired
options
PropTypes.arrayOf(PropTypes.shape({
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([false])]).isRequired,
  name: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired
})).isRequired

cf-component-code

const React = require('react');
const {render} = require('react-dom');
 
const {
  Code,
  CodeBlock 
= require('../../src/index');
 
class Component extends React.Component {
  render() {
    return (
      <div>
        <p>Look at this <Code>inline code</Code>!</p>
        <CodeBlock>And this code block!</CodeBlock>
      </div>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-code--basic')
);

cf-component-copyable-textarea

const React = require('react');
const {render} = require('react-dom');
 
const CopyableTextarea = require('../../src/index');
const {setText} = require('cf-util-text');
 
setText('Click to copy', 'Click to copy');
setText('Copied text to clipboard', 'Copied text to clipboard');
setText('Press Command/Ctrl+C to copy', 'Press Command/Ctrl+C to copy');
 
class Component extends React.Component {
  render() {
    return (
      <CopyableTextarea
        name="copyable-textarea-example"
        value="Some nice text that needs to be copied"/>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-copyable-textarea--basic')
);

<CopyableTextarea/>

Prop NameProp Validation
name
PropTypes.string.isRequired
value
PropTypes.string.isRequired

cf-component-dropdown

const React = require('react');
const {render} = require('react-dom');
const {handleRoutes} = require('cf-util-route-handler');
 
handleRoutes(route => console.log(route));
 
const {
  Button,
  ButtonGroup 
= require('cf-component-button');
 
const {
  Dropdown,
  DropdownLink,
  DropdownSeparator 
= require('../../src/index');
 
class Component extends React.Component {
  state = {
    dropdown1Open: false,
    dropdown2Open: false
  };
 
  render() {
    return (
      <ButtonGroup>
        <Button type="primary" onClick={() => this.setState({ dropdown1Open: true })}>
          Open Dropdown 1
        </Button>
 
        {this.state.dropdown1Open && (
          <Dropdown onClose={() => this.setState({ dropdown1Open: false })}>
            <DropdownLink to="/foo">Link to /foo</DropdownLink>
            <DropdownLink to="/bar">Link to /bar</DropdownLink>
            <DropdownSeparator/>
            <DropdownLink to="/baz">Link to /baz</DropdownLink>
            <DropdownLink to="/bat">Link to /bat</DropdownLink>
          </Dropdown>
        )}
 
        <Button type="primary" onClick={() => this.setState({ dropdown2Open: true })}>
          Open Dropdown 2
        </Button>
 
        {this.state.dropdown2Open && (
          <Dropdown align="right" onClose={() => this.setState({ dropdown2Open: false })}>
            <DropdownLink to="/foo">Link to /foo</DropdownLink>
            <DropdownLink to="/bar">Link to /bar</DropdownLink>
            <DropdownSeparator/>
            <DropdownLink to="/baz">Link to /baz</DropdownLink>
            <DropdownLink to="/bat">Link to /bat</DropdownLink>
          </Dropdown>
        )}
      </ButtonGroup>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-dropdown--basic')
);
Prop NameProp Validation
onClose
PropTypes.func.isRequired
align
PropTypes.oneOf(['left', 'right'])
Prop NameProp Validation
to
PropTypes.string
onClick
PropTypes.func

cf-component-dynamic-content

const React = require('react');
const {render} = require('react-dom');
 
const DynamicContent = require('../../src/index');
 
class Component extends React.Component {
  render() {
    return (
      <DynamicContent dangerouslySetInnerHTML={{
        __html: '<p>Not an XSS attack, I swear.</p>'
      }}/>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-dynamic-content--basic')
);

<DynamicContent/>

Prop NameProp Validation
dangerouslySetInnerHTML
PropTypes.shape({
  __html: PropTypes.string.isRequired
}).isRequired

cf-component-flex

const React = require('react');
const {render} = require('react-dom');
 
const {
  Flex,
  FlexItem 
= require('../../src/index');
 
class Component extends React.Component {
  render() {
    return (
      <div>
        <Flex spacing={false}>
          <FlexItem>FlexItem 1</FlexItem>
          <FlexItem>FlexItem 2</FlexItem>
          <FlexItem>FlexItem 3</FlexItem>
        </Flex>
 
        <Flex spacing="thin">
          <FlexItem>FlexItem 1</FlexItem>
          <FlexItem>FlexItem 2</FlexItem>
          <FlexItem collapse>Collapsed FlexItem</FlexItem>
        </Flex>
 
        <Flex spacing="wide">
          <FlexItem collapse>FlexItem 1</FlexItem>
          <FlexItem>FlexItem 2</FlexItem>
          <FlexItem collapse>Collapsed FlexItem</FlexItem>
        </Flex>
      </div>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-flex--basic')
);

<Flex/>

Prop NameProp Validation
spacing
PropTypes.oneOf([false, 'thin', 'wide']).isRequired

<FlexItem/>

Prop NameProp Validation
collapse
PropTypes.bool

cf-component-form

const React = require('react');
const {render} = require('react-dom');
const {
  Form,
  FormHeader,
  FormFooter,
  FormFieldset,
  FormLabel,
  FormFieldError 
= require('../../src/index');
const {Flex, FlexItem} = require('cf-component-flex');
const {Button} = require('cf-component-button');
const Input = require('cf-component-input');
const Select = require('cf-component-select');
const Textarea = require('cf-component-textarea');
 
class Component extends React.Component {
  state = {
    firstName: '',
    lastName: '',
    type: 'suggestion',
    message: 'This is blasphemy! This is madness!'
  };
 
  handleFirstNameChange = firstName => {
    this.setState({ firstName });
  };
 
  handleLastNameChange = lastName => {
    this.setState({ lastName });
  };
 
  handleTypeChange = type => {
    this.setState({ type });
  };
 
  handleMessageChange = message => {
    this.setState({ message });
  };
 
  handleSubmit = () => {
    console.log(JSON.stringify(this.state, null, 2));
    this.setState({
      firstName: '',
      lastName: '',
      type: 'suggestion',
      message: ''
    });
  };
 
  render() {
    return (
      <Form layout="horizontal" onSubmit={this.handleSubmit}>
        <FormHeader title="Feedback Form"/>
 
        <FormFieldset legend="Name">
          <Flex spacing="wide">
            <FlexItem>
              <FormLabel>First Name</FormLabel>
              <Input name="firstName" type="text"
                value={this.state.firstName}
                onChange={this.handleFirstNameChange}/>
            </FlexItem>
 
            <FlexItem>
              <FormLabel>Last Name</FormLabel>
              <Input name="lastName" type="text"
                value={this.state.lastName}
                onChange={this.handleLastNameChange}/>
            </FlexItem>
          </Flex>
        </FormFieldset>
 
        <FormFieldset legend="Type">
          <FormLabel hidden>Type</FormLabel>
          <Select
            options={[
              { value: 'suggestion', label: 'Suggestion' },
              { value: 'problem', label: 'Problem' }
            ]}
            value={this.state.type}
            onChange={this.handleTypeChange}/>
        </FormFieldset>
 
        <FormFieldset legend="Message">
          <FormLabel hidden>Message</FormLabel>
          <Textarea name="message"
            value={this.state.message}
            onChange={this.handleMessageChange}/>
          <FormFieldError
            field={{ invalid: true }}
            validations={{ response: 'Madness? This is Sparta!' }}/>
        </FormFieldset>
 
        <FormFooter>
          <Button submit type="primary" onClick={this.handleSubmit}>
            Submit
          </Button>
        </FormFooter>
      </Form>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-form--basic')
);

<Form/>

Prop NameProp Validation
layout
PropTypes.oneOf(['horizontal', 'vertical']).isRequired
onSubmit
PropTypes.func.isRequired

<FormFieldError/>

Prop NameProp Validation
field
PropTypes.object.isRequired
validations
PropTypes.object.isRequired

<FormFieldset/>

Prop NameProp Validation
legend
PropTypes.string.isRequired

<FormHeader/>

Prop NameProp Validation
title
PropTypes.string.isRequired

<FormLabel/>

Prop NameProp Validation
hidden
PropTypes.bool

cf-component-heading

const React = require('react');
const {render} = require('react-dom');
 
const {
  Heading,
  HeadingCaption 
= require('../../src/index');
 
class Component extends React.Component {
  render() {
    return (
      <Heading size={2}>
        Look at this nice heading!
        <HeadingCaption>It even has a nice HeadingCaption</HeadingCaption>
      </Heading>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-heading--basic')
);

<Heading/>

Prop NameProp Validation
size
PropTypes.oneOf([1, 2, 3, 4, 5, 6]).isRequired

cf-component-icon

const React = require('react');
const {render} = require('react-dom');
 
const {TYPES, SIZES} = require('../../src/options');
const Icon = require('../../src/index');
 
class Component extends React.Component {
  render() {
    return (
      <div>
        <p>Types:</p>
        <p>
          {TYPES.map(type =>
            <Icon label={type} type={type} key={type}/>
          )}
        </p>
 
        <p>Sizes:</p>
        <p>
          {SIZES.map(size =>
            <Icon label={size} type="gear" size={size} key={size}/>
          )}
        </p>
 
        <p>Border:</p>
        <p><Icon label="border" type="gear" border/></p>
 
        <p>Spin:</p>
        <p><Icon label="border" type="gear" spin/></p>
 
        <p>Muted:</p>
        <p><Icon label="border" type="gear" muted/></p>
 
        <p>White:</p>
        <p><Icon label="border" type="gear" white/></p>
      </div>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-icon--basic')
);

<Icon/>

Prop NameProp Validation
label
PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([false])]).isRequired
type
PropTypes.oneOf(TYPES).isRequired
size
PropTypes.oneOf(SIZES)
border
PropTypes.bool
spin
PropTypes.bool
muted
PropTypes.bool
white
PropTypes.bool

cf-component-input

const React = require('react');
const {render} = require('react-dom');
 
const Input = require('../../src/index');
 
class Component extends React.Component {
  state = {
    inputValue: 'Hello World'
  };
 
  handleChange = value => {
    this.setState({
      inputValue: value
    });
  };
 
  render() {
    return (
      <div>
        <Input
          name="example"
          value={this.state.inputValue}
          onChange={this.handleChange}/>
 
        <Input
          type="search"
          name="example"
          value={this.state.inputValue}
          onChange={this.handleChange}/>
      </div>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-input--basic')
);

<Input/>

Prop NameProp Validation
type
PropTypes.oneOf(['text', 'email', 'number', 'password', 'search'])
name
PropTypes.string.isRequired
value
PropTypes.string.isRequired
onChange
PropTypes.func.isRequired
placeholder
PropTypes.string
invalid
PropTypes.bool

cf-component-label

const React = require('react');
const {render} = require('react-dom');
 
const Label = require('../../src/index');
 
class Component extends React.Component {
  render() {
    return (
      <p>
        <Label type="default">Default</Label>
        <Label type="info">Info</Label>
        <Label type="success">Success</Label>
        <Label type="warning">Warning</Label>
        <Label type="error">Error</Label>
      </p>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-label--basic')
);

<Label/>

Prop NameProp Validation
type
PropTypes.oneOf(['default', 'info', 'success', 'warning', 'error']).isRequired
tagName
PropTypes.string

cf-component-layout

const React = require('react');
const {render} = require('react-dom');
 
const {
  LayoutContainer,
  LayoutRow,
  LayoutColumn 
= require('../../src/index');
 
class Component extends React.Component {
  render() {
    return (
      <LayoutContainer>
        <LayoutRow>
          <LayoutColumn width={1/2}><p>Column 1/2</p></LayoutColumn>
          <LayoutColumn width={1/2}><p>Column 1/2</p></LayoutColumn>
        </LayoutRow>
 
        <LayoutRow>
          <LayoutColumn width={1/3}><p>Column 1/3</p></LayoutColumn>
          <LayoutColumn width={1/3}><p>Column 1/3</p></LayoutColumn>
          <LayoutColumn width={1/3}><p>Column 1/3</p></LayoutColumn>
        </LayoutRow>
 
        <LayoutRow>
          <LayoutColumn width={1/4}><p>Column 1/4</p></LayoutColumn>
          <LayoutColumn width={1/4}><p>Column 1/4</p></LayoutColumn>
          <LayoutColumn width={1/4}><p>Column 1/4</p></LayoutColumn>
          <LayoutColumn width={1/4}><p>Column 1/4</p></LayoutColumn>
        </LayoutRow>
 
        <LayoutRow>
          <LayoutColumn width={1/4}><p>Column 1/4</p></LayoutColumn>
          <LayoutColumn width={2/4}><p>Column 2/4</p></LayoutColumn>
          <LayoutColumn width={1/4}><p>Column 1/4</p></LayoutColumn>
        </LayoutRow>
      </LayoutContainer>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-layout--basic')
);

<LayoutColumn/>

Prop NameProp Validation
width
PropTypes.number.isRequired
const React = require('react');
const {render} = require('react-dom');
 
const {handleRoutes, routeTo} = require('cf-util-route-handler');
const Backbone = require('backbone');
 
const Link = require('../../src/index');
 
// setup the router 
handleRoutes(function(url) {
  Backbone.history.navigate(url, true);
});
 
new Backbone.Router({
  routes: {
    ''    : () => console.log('/'),
    hello : () => console.log('/hello'),
    world : () => console.log('/world')
  }
});
Backbone.history.start();
 
class Component extends React.Component {
  handleClick = () => {
    console.log('handleClick!');
  };
 
  render() {
    return (
      <div>
        <p>Create a <code>Link</code> with a <code>to</code> prop:</p>
        <Link to="/">Link to /</Link>
 
        <p>Alternatively you can pass an <code>onClick</code> handler:</p>
        <Link onClick={this.handleClick}>Link to something</Link>
        <p>Note: This will give it a <code>role="button"</code></p>
 
        <p>All additional props will be added to the <code>Link</code> element:</p>
        <Link to="/foo" className="special-link">Link to /foo</Link>
 
        <p>You can even specify <code>tagName</code>:</p>
        <Link to="/bar" tagName="button">Link to /bar</Link>
      </div>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-link--basic')
);
Prop NameProp Validation
to
PropTypes.string
onClick
PropTypes.func
tagName
PropTypes.string
disabled
PropTypes.bool

cf-component-list

const React = require('react');
const {render} = require('react-dom');
 
const {List, ListItem} = require('../../src/index');
 
class Component extends React.Component {
  render() {
    return (
      <div>
        <p>Basic usage:</p>
        <List>
          <ListItem>One</ListItem>
          <ListItem>Two</ListItem>
        </List>
 
        <p>Ordered list:</p>
        <List ordered>
          <ListItem>One</ListItem>
          <ListItem>Two</ListItem>
        </List>
 
        <p>Unstyled list:</p>
        <List unstyled>
          <ListItem>One</ListItem>
          <ListItem>Two</ListItem>
        </List>
      </div>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-list--basic')
);

<List/>

Prop NameProp Validation
ordered
PropTypes.bool
unstyled
PropTypes.bool

cf-component-loading

const React = require('react');
const {render} = require('react-dom');
 
const Loading = require('../../src/index');
 
class Component extends React.Component {
  render() {
    return (
      <div>
        <Loading/>
      </div>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-loading--basic')
);

cf-component-modal

const React = require('react');
const {render} = require('react-dom');
 
const {
  Modal,
  ModalHeader,
  ModalTitle,
  ModalClose,
  ModalBody,
  ModalFooter,
  ModalActions 
= require('../../src/index');
const {
  GatewayDest,
  GatewayProvider 
= require('react-gateway');
const ReactModal2 = require('react-modal2');
const {Button} = require('cf-component-button');
 
class Component extends React.Component {
  state = {
    isModalOpen: false
  };
 
  handleRequestOpen = () => {
    this.setState({ isModalOpen: true });
  };
 
  handleRequestClose = () => {
    this.setState({ isModalOpen: false });
  };
 
  render() {
    return (
      <div>
        <Button onClick={this.handleRequestOpen}>Open Modal</Button>
        <Modal
          isOpen={this.state.isModalOpen}
          onRequestClose={this.handleRequestClose}>
          <ModalHeader>
            <ModalTitle>Hello from Modal</ModalTitle>
            <ModalClose onClick={this.handleRequestClose}/>
          </ModalHeader>
          <ModalBody>
            <p>Look at this awesome modal!</p>
          </ModalBody>
          <ModalFooter>
            <ModalActions>
              <button onClick={this.handleRequestClose.bind(this)}>Close Modal</button>
            </ModalActions>
          </ModalFooter>
        </Modal>
      </div>
    );
  }
}
 
const root = document.getElementById('cf-component-modal--basic');
 
ReactModal2.getApplicationElement = () => root;
 
render(
  <Component/>,
  root
);
Prop NameProp Validation
type
PropTypes.oneOf(['confirm'])
isOpen
PropTypes.bool.isRequired
onRequestClose
PropTypes.func.isRequired
closeOnEsc
PropTypes.bool
closeOnBackdropClick
PropTypes.bool

<ModalClose/>

Prop NameProp Validation
onClick
PropTypes.func.isRequired
label
PropTypes.oneOfType([PropTypes.string, PropTypes.bool])

<ModalFooter/>

Prop NameProp Validation
simple
PropTypes.bool

cf-component-notifications

const React = require('react');
const {render} = require('react-dom');
 
const {
  NotificationList,
  Notification,
  NotificationGlobalContainer 
= require('../../src/index');
const {
  Button 
= require('cf-component-button');
 
let UNIQUE_ID = 0;
 
class Component extends React.Component {
  state = {
    notifications: []
  };
 
  handleAdd = (type, persist, delay) => {
    const id = UNIQUE_ID++;
 
    this.setState({
      notifications: this.state.notifications.concat({
        id: id,
        type: type,
        message: 'Item ' + id,
        persist: persist,
        delay: delay
      })
    });
  };
 
  handleClear = () => {
    this.setState({
      notifications: []
    });
  };
 
  handleClose = id => {
    this.setState({
      notifications: this.state.notifications.filter(n => n.id !== id)
    });
  };
 
  render() {
    const notifications = this.state.notifications.map(n => {
      return <Notification
        key={n.id}
        type={n.type}
        message={n.message}
        persist={n.persist}
        delay={n.delay}
        onClose={this.handleClose.bind(null, n.id)}/>
    }).reverse();
 
    return (
      <div>
        <Button type="error" onClick={this.handleAdd.bind(null, 'error', false, 4000)}>Add Error Notification</Button>
        <Button type="warning" onClick={this.handleAdd.bind(null, 'warning', false, 4000)}>Add Warning Notification</Button>
        <Button type="success" onClick={this.handleAdd.bind(null, 'success', false, 4000)}>Add Success Notification</Button>
        <Button type="primary" onClick={this.handleAdd.bind(null, 'info', false, 4000)}>Add Info Notification</Button>
 
        <Button type="primary" onClick={this.handleAdd.bind(null, 'info', false, 10000)}>Add 10000ms Notification</Button>
        <Button type="primary" onClick={this.handleAdd.bind(null, 'info', true, null)}>Add Persistant Notification</Button>
 
        <Button type="default" onClick={this.handleClear}>Clear Notifications</Button>
 
        <NotificationGlobalContainer>
          <NotificationList>
            {notifications}
          </NotificationList>
        </NotificationGlobalContainer>
      </div>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-notifications--basic')
);

<Notification/>

Prop NameProp Validation
type
PropTypes.oneOf(['success', 'error', 'info', 'warning'])
message
PropTypes.string.isRequired
closable
PropTypes.bool
delay
PropTypes.number
persist
PropTypes.bool
onClose
PropTypes.func.isRequired

cf-component-page

const React = require('react');
const {render} = require('react-dom');
 
const {
  Page,
  PageHeader 
= require('../../src/index');
 
class Component extends React.Component {
  render() {
    return (
      <Page>
        <PageHeader
          title="Title"
          subtitle="Subtitle"/>
      </Page>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-page--basic')
);
Prop NameProp Validation
title
PropTypes.string.isRequired
subtitle
PropTypes.string

cf-component-pagination

const React = require('react');
const {render} = require('react-dom');
 
const {
  Pagination,
  PaginationItem 
= require('../../src/index');
const Icon = require('cf-component-icon');
 
class Component extends React.Component {
  state = {
    pages: 4,
    active: 1
  };
 
  handleClickItem = page => {
    if (page >= 1 && page <= this.state.pages) {
      this.setState({ active: page });
    }
  };
 
  handleClickPrev = () => {
    if (this.state.active > 1) {
      this.handleClickItem(this.state.active - 1);
    }
  };
 
  handleClickNext = () => {
    if (this.state.active < this.state.pages) {
      this.handleClickItem(this.state.active + 1);
    }
  };
 
  render() {
    const items = [];
 
    for (let i = 1; i <= this.state.pages; i++) {
      items.push(
        <PaginationItem
          key={i}
          type="number"
          label={'Page ' + i}
          active={this.state.active === i}
          onClick={this.handleClickItem.bind(null, i)}>
          {i}
        </PaginationItem>
      );
    }
 
    return (
      <Pagination>
        <PaginationItem
          type="prev"
          label="Previous Page"
          disabled={this.state.active === 1}
          onClick={this.handleClickPrev}>
          <Icon type="caret-left" label={false}/>
        </PaginationItem>
        {items}
        <PaginationItem
          type="next"
          label="Next Page"
          disabled={this.state.active === this.state.pages}
          onClick={this.handleClickNext}>
          <Icon type="caret-right" label={false}/>
        </PaginationItem>
      </Pagination>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-pagination--basic')
);

<Pagination/>

Prop NameProp Validation
info
PropTypes.string

<PaginationItem/>

Prop NameProp Validation
type
PropTypes.oneOf(['number', 'next', 'prev', 'ellipsis', 'loading']).isRequired
label
PropTypes.string.isRequired
onClick
PropTypes.func.isRequired
active
PropTypes.bool
disabled
PropTypes.bool

cf-component-progress

const React = require('react');
const {render} = require('react-dom');
 
const Progress = require('../../src/index');
 
class Component extends React.Component {
  state = {
    activeStep: 'foo'
  };
 
  handleStepChange = step => {
    this.setState({
      activeStep: step
    });
  };
 
  render() {
    return (
      <Progress
        active={this.state.activeStep}
        onChange={this.handleStepChange}
        steps={[
          { id: 'foo', label: 'Foo', disabled: false },
          { id: 'bar', label: 'Bar', disabled: false },
          { id: 'baz', label: 'Baz', disabled: true  }
        ]}/>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-progress--basic')
);

<Progress/>

Prop NameProp Validation
active
PropTypes.string.isRequired
onChange
PropTypes.func.isRequired
steps
PropTypes.arrayOf(PropTypes.shape({
  id: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired,
  disabled: PropTypes.bool.isRequired
})).isRequired

cf-component-radio

const React = require('react');
const {render} = require('react-dom');
 
const {
  Radio,
  RadioGroup 
= require('../../src/index');
 
class Component extends React.Component {
  state = {
    radioValue: "option1"
  };
 
  onRadioChange = val => {
    this.setState({
      radioValue: val
    });
  };
 
  render() {
    return (
      <div>
        <p>You can create them individually with <code>Radio</code></p>
 
        <Radio
          label="Option 1"
          name="radio-option-1"
          value="option1"
          checked={this.state.radioValue === "option1"}
          onChange={this.onRadioChange}/>
 
        <Radio
          label="Option 2"
          name="radio-option-2"
          value="option2"
          checked={this.state.radioValue === "option2"}
          onChange={this.onRadioChange}/>
 
        <p>Or as a group with <code>RadioGroup</code></p>
 
        <RadioGroup
          value={this.state.radioValue}
          onChange={this.onRadioChange}
          options={[
            { label: 'Option 1', name: 'group-option-1', value: 'option1' },
            { label: 'Option 2', name: 'group-option-2', value: 'option2' }
          ]}/>
 
        <p>You can also disable a label by passing <code>false</code> explicitly</p>
 
        <Radio
          label={false}
          name="radio-option-1-no-label"
          value="option1"
          checked={this.state.radioValue === "option1"}
          onChange={this.onRadioChange}/>
      </div>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-radio--basic')
);

<Radio/>

Prop NameProp Validation
label
PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([false])]).isRequired
name
PropTypes.string.isRequired
value
PropTypes.string.isRequired
checked
PropTypes.bool.isRequired
onChange
PropTypes.func.isRequired

<RadioGroup/>

Prop NameProp Validation
value
PropTypes.string.isRequired
onChange
PropTypes.func.isRequired
options
PropTypes.arrayOf(PropTypes.shape({
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([false])]).isRequired,
  name: PropTypes.string.isRequired,
  value: PropTypes.string.isRequired
})).isRequired

cf-component-select

const React = require('react');
const {render} = require('react-dom');
 
const Select = require('../../src/index');
 
class Component extends React.Component {
  state = {
    value: 1,
    multiValue: [1, 3]
  };
 
  handleChange = value => {
    this.setState({ value });
  };
 
  handleMultiChange = value => {
    this.setState({
      multiValue: value.length ? value.split(',') : []
    });
  };
 
  render() {
    return (
      <div>
        <Select
          label="Basic"
          value={this.state.value}
          options={[
            { value: 1, label: 'One' },
            { value: 2, label: 'Two' },
            { value: 3, label: 'Three' }
          ]}
          onChange={this.handleChange}/>
 
        <Select searchable
          label="Searchable"
          value={this.state.value}
          options={[
            { value: 1, label: 'One' },
            { value: 2, label: 'Two' },
            { value: 3, label: 'Three' }
          ]}
          onChange={this.handleChange}/>
 
        <Select searchable multi
          label="Searchable Multi"
          value={this.state.multiValue}
          options={[
            { value: 1, label: 'One' },
            { value: 2, label: 'Two' },
            { value: 3, label: 'Three' }
          ]}
          onChange={this.handleMultiChange}/>
      </div>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-select--basic')
);

<Select/>

Prop NameProp Validation
label
PropTypes.string
onChange
PropTypes.func.isRequired
onBlur
PropTypes.func
onFocus
PropTypes.func
multi
PropTypes.bool
searchable
PropTypes.bool
value
PropTypes.any
options
PropTypes.arrayOf(PropTypes.shape({
  label: PropTypes.string.isRequired,
  value: PropTypes.any.isRequired
}))
placeholder
PropTypes.string

cf-component-table

const React = require('react');
const {render} = require('react-dom');
 
const {
  Table,
  TableHead,
  TableBody,
  TableFoot,
  TableRow,
  TableHeadCell,
  TableCell 
= require('../../src/index');
 
class Component extends React.Component {
  render() {
    const data = [
      [1, 2, 3],
      [4, 5, 6],
      [7, 8, 9]
    ];
 
    return (
      <Table>
        <TableHead>
          <TableRow>
            <TableHeadCell>One</TableHeadCell>
            <TableHeadCell>Two</TableHeadCell>
            <TableHeadCell>Three</TableHeadCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {data.map((row, r) =>
            <TableRow key={r}>
              {row.map((cell, c) =>
                <TableCell key={c}>
                  {cell}
                </TableCell>
              )}
            </TableRow>
          )}
        </TableBody>
      </Table>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-table--basic')
);

<Table/>

Prop NameProp Validation
striped
PropTypes.bool
hover
PropTypes.bool
bordered
PropTypes.bool
condensed
PropTypes.bool

<TableCell/>

Prop NameProp Validation
align
PropTypes.oneOf(['left', 'center', 'right'])

<TableRow/>

Prop NameProp Validation
type
accent
TablePropTypes.rowAccent

TablePropTypes

Prop NameProp Validation
rowType
PropTypes.oneOf(['default', 'info', 'success', 'warning', 'error'])
rowAccent
PropTypes.oneOf([false, 'gray', 'orange', 'pink', 'red', 'green', 'purple'])

cf-component-tabs

const React = require('react');
const {render} = require('react-dom');
 
const {
  Tabs,
  TabsPanel 
= require('../../src/index');
 
class Component extends React.Component {
  state = {
    activeTab: 'one'
  };
 
  handleTabChange = id => {
    this.setState({ activeTab: id });
  };
 
  render() {
    return (
      <Tabs
        activeTab={this.state.activeTab}
        tabs={[
          { id: 'one',   label: 'Tab One'   },
          { id: 'two',   label: 'Tab Two'   },
          { id: 'three', label: 'Tab Three' }
        ]}
        onChange={this.handleTabChange}>
 
        <TabsPanel id="one">
          <h1>Tab One</h1>
        </TabsPanel>
 
        <TabsPanel id="two">
          <h1>Tab Two</h1>
        </TabsPanel>
 
        <TabsPanel id="three">
          <h1>Tab Three</h1>
        </TabsPanel>
      </Tabs>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-tabs--basic')
);

<Tabs/>

Prop NameProp Validation
onChange
PropTypes.func.isRequired
activeTab
PropTypes.string.isRequired
tabs
PropTypes.arrayOf(PropTypes.shape({
  id: PropTypes.string.isRequired,
  label: PropTypes.string.isRequired
})).isRequired

<TabsPanel/>

Prop NameProp Validation
id
PropTypes.string.isRequired

cf-component-text

const React = require('react');
const {render} = require('react-dom');
 
const Text = require('../../src/index');
 
class Component extends React.Component {
  render() {
    return (
      <div>
        <p>Specify a <code>size</code></p>
        <Text size="normal">Hello World</Text>
        <Text size="small">Hello World</Text>
 
        <p>and/or an <code>align</code></p>
        <Text align="start">Hello World</Text>
        <Text align="center">Hello World</Text>
        <Text align="justify">Hello World</Text>
        <Text align="end">Hello World</Text>
 
        <p>and/or a <code>type</code></p>
        <Text type="info">Hello World</Text>
        <Text type="success">Hello World</Text>
        <Text type="warning">Hello World</Text>
        <Text type="error">Hello World</Text>
        <Text type="muted">Hello World</Text>
 
        <p>and/or a <code>case</code></p>
        <Text case="capitalize">hello world</Text>
        <Text case="titlecase">hello world</Text>
        <Text case="lowercase">Hello World</Text>
        <Text case="uppercase">Hello World</Text>
      </div>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-text--basic')
);

<Text/>

Prop NameProp Validation
size
PropTypes.oneOf(['normal', 'small'])
align
PropTypes.oneOf(['start', 'center', 'justify', 'end'])
type
PropTypes.oneOf(['info', 'success', 'warning', 'error', 'muted'])
case
PropTypes.oneOf(['capitalize', 'titlecase', 'lowercase', 'uppercase'])

cf-component-textarea

const React = require('react');
const {render} = require('react-dom');
 
const Textarea = require('../../src/index');
 
class Component extends React.Component {
  state = {
    textareaValue: ''
  };
 
  handleTextareaChange = value => {
    this.setState({
      textareaValue: value
    });
  };
 
  render() {
    return (
      <Textarea
        name="example"
        value={this.state.textareaValue}
        onChange={this.handleTextareaChange}/>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-textarea--basic')
);

<Textarea/>

Prop NameProp Validation
name
PropTypes.string.isRequired
value
PropTypes.string.isRequired
disabled
PropTypes.bool
readOnly
PropTypes.bool
onChange
requiredIf(PropTypes.func, props => !props.disabled && !props.readOnly)
onFocus
PropTypes.func
onBlur
PropTypes.func

cf-component-toggle

const React = require('react');
const {render} = require('react-dom');
 
const Toggle = require('../../src/index');
 
class Component extends React.Component {
  state = {
    toggleValue: false
  };
 
  handleToggle = value => {
    this.setState({
      toggleValue: value
    });
  };
 
  render() {
    return (
      <Toggle
        label="Example Toggle"
        name="example"
        value={this.state.toggleValue}
        onChange={this.handleToggle}/>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-toggle--basic')
);

<Toggle/>

Prop NameProp Validation
label
PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf([false])]).isRequired
name
PropTypes.string
value
PropTypes.bool
onChange
PropTypes.func
onFocus
PropTypes.func
onBlur
PropTypes.func

cf-component-tooltip

const React = require('react');
const {render} = require('react-dom');
 
const {
  TooltipRegion,
  Tooltip 
= require('../../src/index');
 
class Component extends React.Component {
  render() {
    return (
      <div>
        <TooltipRegion>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti ipsam <a href="#" title="Title of link">nice link</a> quae sint totam dolor distinctio quia eos ipsum porro quam nulla aut sapiente sed quasi aspernatur sit nisi provident, aliquid?
          </p>
        </TooltipRegion>
 
        <TooltipRegion position="bottom left">
          <p>
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti ipsam quae sint totam dolor distinctio quia eos ipsum porro quam nulla aut sapiente <a href="#" title="Title of link">nice link</a> sed quasi aspernatur sit nisi provident, aliquid?
          </p>
        </TooltipRegion>
 
        <Tooltip content="This is a button">
          <button>A nice button</button>
        </Tooltip>
      </div>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-tooltip--basic')
);

<Tooltip/>

Prop NameProp Validation
content
PropTypes.string.isRequired
children
PropTypes.element.isRequired
position
PropTypes.string

<TooltipRegion/>

Prop NameProp Validation
position
PropTypes.string
querySelector
PropTypes.string

cf-component-typography

const React = require('react');
const {render} = require('react-dom');
 
const {
  Abbr,
  Cite,
  Del,
  Em,
  Ins,
  Kbd,
  Mark,
  Samp,
  Small,
  Strike,
  Strong,
  Sub,
  Sup,
  Underline,
  Var 
= require('../../src/index');
 
class Component extends React.Component {
  render() {
    return (
      <div>
        <Abbr title="Abbreviation">Abbr</Abbr>
        <Cite>Cite</Cite>
        <Del>Del</Del>
        <Em>Em</Em>
        <Ins>Ins</Ins>
        <Kbd>Kbd</Kbd>
        <Mark>Mark</Mark>
        <Samp>Samp</Samp>
        <Small>Small</Small>
        <Strike>Strike</Strike>
        <Strong>Strong</Strong>
        <Sub>Sub</Sub>
        <Sup>Sup</Sup>
        <Underline>Underline</Underline>
        <Var>Var</Var>
      </div>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-typography--basic')
);

<Abbr/>

Prop NameProp Validation
title
React.PropTypes.string.isRequired

cf-component-viewport

const React = require('react');
const {render} = require('react-dom');
 
const Viewport = require('../../src/index');
 
class Component extends React.Component {
  render() {
    return (
      <div>
        <p>Resize the window</p>
 
        <Viewport size="mobile">
          <p className="cf-viewport--is">size="mobile"</p>
        </Viewport>
        <Viewport not size="mobile">
          <p className="cf-viewport--not">not size="mobile"</p>
        </Viewport>
 
        <Viewport size="mobileWide">
          <p className="cf-viewport--is">size="mobileWide"</p>
        </Viewport>
        <Viewport not size="mobileWide">
          <p className="cf-viewport--not">not size="mobileWide"</p>
        </Viewport>
 
        <Viewport size="tablet">
          <p className="cf-viewport--is">size="tablet"</p>
        </Viewport>
        <Viewport not size="tablet">
          <p className="cf-viewport--not">not size="tablet"</p>
        </Viewport>
 
        <Viewport size="desktop">
          <p className="cf-viewport--is">size="desktop"</p>
        </Viewport>
        <Viewport not size="desktop">
          <p className="cf-viewport--not">not size="desktop"</p>
        </Viewport>
 
        <Viewport size="desktopLarge">
          <p className="cf-viewport--is">size="desktopLarge"</p>
        </Viewport>
        <Viewport not size="desktopLarge">
          <p className="cf-viewport--not">not size="desktopLarge"</p>
        </Viewport>
      </div>
    );
  }
}
 
render(
  <Component/>,
  document.getElementById('cf-component-viewport--basic')
);

<Viewport/>

Prop NameProp Validation
not
PropTypes.bool
size
PropTypes.oneOf(['mobile', 'mobileWide', 'tablet', 'desktop', 'desktopLarge']).isRequired