TED Bootstrap

A React-based design system for internal TED projects.

Installation

yarn add @tedconf/react-ted-bootstrap

react-ted-bootstrap requires your project have the follow peer dependencies installed:

• @emotion/core
• react
• react-dom

Components List

• Alert
• Button
• Container
• DataTable
• Dropdown
• Gear
• Input
• Navbar
• NavFlaps
• NavToggle
• Select
• Spinner
• TwistDown

Alert

import { Alert } from '@tedconf/react-ted-bootstrap';

const MyComponent = () => (
  <Alert type="warning" onClose={onClose}>
    My Alert
  </Alert>
)

⬆️ back to top

Button

import { Button } from '@tedconf/react-ted-bootstrap';

const MyComponent = () => (
  <Button>
    My Button
  </Button>
)

⬆️ back to top

Container

Bootstrap's .container equivalent

import { Container } from '@tedconf/react-ted-bootstrap';

const MyComponent = () => (
  <Container>
    // your code here..
  </Container>
)

⬆️ back to top

DataTable

import { DataTable } from '@tedconf/react-ted-bootstrap';

const MyComponent = () => (
  <DataTable headings={headings} rows={rows} onSort={sort} />
)

⬆️ back to top

Dropdown

import { Dropdown } from '@tedconf/react-ted-bootstrap';

const MyComponent = () => (
  <Dropdown options={options} onClick={click} />
)

⬆️ back to top

Gear

import { Gear } from '@tedconf/react-ted-bootstrap';

const MyComponent = () => (
  <Gear>
    <Gear.Item>
      <a href="https://ted.com">TED.com</a>
    </Gear.Item>
  </Gear>
)

⬆️ back to top

Input

import { Input } from '@tedconf/react-ted-bootstrap';

const MyComponent = () => (
  <Input
    type="text"
    placeholder="Text input"
    onChange={onChange}
    onFocus={onFocus}
    onBlur={onBlur}
  />
)

⬆️ back to top

Navbar

import { Navbar } from '@tedconf/react-ted-bootstrap';

const MyComponent = () => (
  <Navbar title="Bootstrap" onClick={click} />
)

⬆️ back to top

NavFlaps

import { NavFlaps, Tab } from '@tedconf/react-ted-bootstrap';

const MyComponent = () => (
  <NavFlaps>
    <Tab label="Tab 1" content={<ComponentOne />} />
    <Tab label="Tab 2" content={<ComponentTwo />} />
  </NavFlaps>
)

⬆️ back to top

NavToggle

import { NavFlaps, Tab } from '@tedconf/react-ted-bootstrap';

const MyComponent = () => (
  <NavToggle label="TED2019">
    <a href="https://ted2019.ted.com">TED2019</a>
    <a href="https://ted2019.ted.com">TED2020</a>
  </NavToggle>
)

⬆️ back to top

Select

import { Select } from '@tedconf/react-ted-bootstrap';

const MyComponent = () => (
  <Select label="My Select" onChange={change}>
    <Select.Item value="value">Select Item</Select.Item>
  </Select>
)

⬆️ back to top

Spinner

import { Spinner } from '@tedconf/react-ted-bootstrap';

const MyComponent = () => (
  <Spinner />
)

⬆️ back to top

TwistDown

import { TwistDown } from '@tedconf/react-ted-bootstrap';

const MyComponent = () => (
  <TwistDown label="twistdown">My TwistDown Content</TwistDown>
)

⬆️ back to top