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,
  Popover,
  Menu,
  Card,
  LoadingButton,
  Accordion,
} from 'chaser-components';
import 'chaser-components/dist/index.css';

const App = () => {
  return (
    <Box>
      <Stack>
        <div>
          <Button>A button!</Button>
          <LoadingButton loading={false}>Loading?</LoadingButton>
        </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>
        <Popover
          onToggle={setMenuOpen}
          shown={menuOpen}
          position={Position.BOTTOM_RIGHT}
          target={
            <Button
              style={{ padding: 0 }}
              appearance="minimal"
              active={menuOpen}
              icon="options"
            />
          }
        >
          <Card>
            <Menu>
              <Menu.Label>Label</Menu.Label>
              <Menu.Item>An item!</Menu.Item>
            </Menu>
          </Card>
        </Popover>
      </Stack>
    </Box>
  );
};

export default App;

License

MIT © AshCorah