chaser-components

chaser-components

Chaser HQ Component Library

Install

npm install --save chaser-components

Usage

import React from 'react'
import {
  Button, Text, Heading,
  Icon, Box, Shelf, Stack,
  ButtonGroup, Healthscore, Tooltip,
  Dropdown, DropdownItem, DropdownLabel,
} from 'chaser-components'
import 'chaser-components/dist/index.css'

const App = () => {
  return (<Box>
      <Stack>
        <div>
          <Button>A button!</Button>
        </div>
        <Text>Some normal text</Text>
        <Text weight="bold">Some bold text</Text>
        <Text color="Red" size="large" weight="bold">Some larger red text</Text>
        <Heading>A h1 heading</Heading>
        <Heading color="Mid Neutral 1" size="h3">A h3 heading</Heading>
        <ButtonGroup>
          <Button intent="danger">Grouped button!</Button>
          <Button appearance="secondary">Grouped button!</Button>
        </ButtonGroup>
        <Shelf>
          <Icon name="check-filled" color="Dark Green" />
          <Icon name="pencil" color="Dark Neutral 1" />
          <Icon name="options" color="Mid Neutral 3" />
          <Icon name="clock" />
          <Icon name="alert-filled" color="Orange" />
          <Icon name="tick" color="Blue" />
          <Icon name="alert-square" color="Green" />
          <Icon name="warning-circle" color="Red" />
          <Icon name="help" color="Mid Neutral 1" />
        </Shelf>
        <Shelf>
          <Healthscore score="56" />
          <Healthscore score={undefined} />
          <Healthscore score={undefined} isProcessing />
          <Healthscore score="100" />
          <Healthscore score="12" />
        </Shelf>
        <Shelf>
          <Text>Large healthscores</Text>
          <Healthscore score="56" size="large" />
          <Healthscore score="2" size="large" />
          <Healthscore score="100" size="large" />
          <Healthscore score={undefined} size="large" />
          <Healthscore score={undefined} size="large" isProcessing />
        </Shelf>
        <div>
          <Tooltip underline content="Hello this is a tooltip!">
            <span>A tooltip!</span>
          </Tooltip>
        </div>
        <div>
          <Tooltip position="bottom" content="Hello this is a tooltip with lots of contents a tooltip with lots of contents a tooltip with lots of contents a tooltip with lots of contents a tooltip with lots of content!!!!!">
            <span>A tooltip!</span>
          </Tooltip>
        </div>
        <Dropdown
          width="max"
          shown={menuOpen}
          overflow="hidden"
          position="right"
          onToggle={open => setMenuOpen(open)}
          clickElement={shown => (
            <Button appearance="primary" narrow active={shown}>
              A button!
            </Button>
          )}
        >
          <DropdownLabel>A dropdown label</DropdownLabel>
          <DropdownItem>
            First item
          </DropdownItem>
          <DropdownItem>
            Second item
          </DropdownItem>
        </Dropdown>
      </Stack>
    </Box>)
}

export default App

License

MIT © AshCorah