Components

Alert

An alert displays a brief, important message. It does this in a way that attracts the user's attention without interrupting their task.

import { Alert } from "@project-zero/components";

<Alert type="success" active>
  Content
</Alert>;

Box

Everything in web design is a box, or the absence of a box. This is both the most used and extended component.

import { Box } from "@project-zero/components";

<Box width={[1, 1 / 2]} p={4} mb={3} bg="#eee">
  Content
</Box>;

Breadcrumbs

A list of links to the parent pages of the current page in hierarchical order.

import { Breadcrumbs } from "@project-zero/components";

<Breadcrumbs>
  <Breadcrumbs.Link href="#home">Home</Breadcrumbs.Link>
  <Breadcrumbs.Link href="#about">About</Breadcrumbs.Link>
  <Breadcrumbs.Link href="#writing" selected>
    Writing
  </Breadcrumbs.Link>
</Breadcrumbs>;

Button

Enables users to trigger an action or event. E.g - submitting a form, opening a dialog, canceling an action, or performing a delete operation.

import { Button } from "@project-zero/components";

<Button variant="primary" onClick={handleOnClick}>
  Primary Default
</Button>;

Card

A composition that contains display content and actions for some specific topic.

import { Card } from "@project-zero/components";

<Card
  title="Title"
  description="Short Description"
  image="https://source.unsplash.com/user/erondu/500x500"
  actions={
    <Button variant="light" onClick={handleOnClick}>
      Action
    </Button>
  }
/>;

Clipboard

A light variant of the Button component. The difference is that it interacts with the navigator.clipboard API.

import { Clipboard } from "@project-zero/components";

<Clipboard text="Text to copy" />;

Combobox

A combobox consists of a single-line textbox and an associated pop-up element. It helps a user set the value of the textbox.

import { ComboBox } from "@project-zero/components";

const DEFAULT_OPTIONS = ["a", "b", "c"];
const DEFAULT_PROPS = {
  options: DEFAULT_OPTIONS,
  id: "test",
  label: "test",
  placholder: "Please enter some text...",
};

<ComboBox {...DEFAULT_PROPS} />;

Flex

A box. But, flexible.

import { Flex } from "@project-zero/components";

<Flex justifyContent="space-around" bg="#eee">
  <p>Child one</p>
  <p>Child two</p>
</Flex>;

Heading

Use these to give some hierarchy to a section in a page.

import { Heading } from "@project-zero/components";

<Heading variant="medium">Heading Component</Heading>;

Image

An HTML image element wrapped in the AspectRatio padding-bottom trick. Defaults to an aspect ratio of 9 / 16.

import { Image } from "@project-zero/components";

<Image src="test" alt="" />;

Link

Provides a reference to a resource. The target resource can be either external or local.

import { Link } from "@project-zero/components";

<Link href="#" onPress={handleOnPress}>
  Primary Default
</Link>;

SkipLink

This allows keyboard users to skip ahead and navigate to the main content areas of a page.

import { SkipLink } from "@project-zero/components";

<SkipLink id="main-content">Skip to Content</SkipLink>;

Stack

One of my personal favourites. A layout primitive that applies systemized vertical spacing.

import { Stack } from "@project-zero/components";

<Stack bg="#eee">
  <span>Child one</span>
  <span>Child two</span>
  <span>Child three</span>
</Stack>;

Tabs

Tabs are a set of layered sections of content, known as tab panels. One panel of content is displayed at a time.

import { Tabs } from "@project-zero/components";

<Tabs.Container>
  <Tabs.List justifyContent="space-between">
    <Tabs.Tab>Tab one</Tabs.Tab>
    <Tabs.Tab>Tab two</Tabs.Tab>
    <Tabs.Tab>Tab three</Tabs.Tab>
  </Tabs.List>

  <Tabs.Panels>
    <Tabs.Panel>Content for tab one</Tabs.Panel>
    <Tabs.Panel>Conetent for tab two</Tabs.Panel>
    <Tabs.Panel>Content for tab three</Tabs.Panel>
  </Tabs.Panels>
</Tabs.Container>;

Text

Applies the smaller text variants such as regular body text or smaller body text.

import { Text } from "@project-zero/components";

<Text>Text Component</Text>;

VisuallyHidden

Produces the opposite effect of The aria-hidden="true" attribute. Sighted users won't see it but screen readers will.

import React from "react";
import { VisuallyHidden } from "@project-zero/components";

function IconUi() {
  return (
    <React.Fragment>
      <svg
        viewBox="0 0 32 32"
        width={"1em"}
        height={"1em"}
        fill="none"
        stroke={"currentcolor"}
        strokeLinecap={"round"}
        strokeLinejoin={"round"}
        strokeWidth={4}
      >
        <path d="M12 30 L24 16 12 2" />
      </svg>
      <VisuallyHidden>Arrow Right</VisuallyHidden>
    </React.Fragment>
  );
}