chaser-components

chaser-components

Chaser HQ Component Library

Install

npm install --save chaser-components

Usage

import * as 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