LogoBrand is the big logo used in the hero section

<LogoBrand />

LogoIcon is the little icon that lives in the navigation

<LogoIcon />

Dropdown is used in the main navigation and can be used to navigate to internal routes or external urls. The trigger render prop can compose any React component.

<Dropdown
  trigger={<MenuButton aria-label="Menu" />}
  items={[
    {
      name: 'BumHub',
      to: '/',
    },
    {
      name: 'Bum Search',
      to: '/search',
    },
    {
      name: 'Bum Bum Maker',
      to: '/bum-bum-maker',
    },
    {
      name: 'paulie.dev',
      url: 'https://paulie.dev/',
    },
  ]}
/>

Starburst

<Starburst />

ThemeUIBum is used in the Bum UI section

<ThemeUIBum />

SearchBum is used in the Search section

<SearchBum />

LaptopBum is used in the Hero section on /bums/name-of-repo

<LaptopBum />

PantsUp Bum is displayed when a calendar day is in the future

<PantsUp />

PantsDown Bum is displayed when a calendar day is in the past or is the current day. For the current day a different shadowColor is required

<PantsDown />
<PantsDown shadowColor="#df3022" />

Reef is displayed when a calendar day is the current day

<Reef />

Mistletoe is displayed when a calendar day is in the past

<Mistletoe />

Advent Card is of HTML <a /> and <div /> depending on states provided to determine it's active status

<AdventCard to="/" day={1} repoName="repo name 1" isToday={false} isDisabled={false} />
<AdventCard to="/" day={2} repoName="repo name 2" isToday={true} isDisabled={false} />
<AdventCard to="/" day={25} repoName="repo name 3" isToday={false} isDisabled={true} />

GitHubStat is used on the /bums/name-of-repo page and is used to display GitHub data

<GitHubStat description="User" value="@PaulieScanlon" color="#e260d3" icon="accountCircle" />
<GitHubStat description="Language" value="JavaScript" color="#00cfff" icon="code" />

EcoStat is used in the EcoBum section

<EcoStat statistic=".28g" />
<EcoStat statistic="5.2kb" />

FartBum is used in the EcoBum section

<FartBum />

The Footer is displayed at the bottom of the site

<Footer />

BumToneTester is WIP and is being used to create different skin tones

<BumToneTester tone={0} />
<BumToneTester tone={1} />
<BumToneTester tone={2} />
<BumToneTester tone={3} />
<BumToneTester tone={4} />
<BumToneTester tone={5} />

Heading is of HTML type <h(N) /> Use the variant prop to change the heading styles

<Heading as="h1" variant="styles.h1">Heading h1</Heading>
<Heading as="h2" variant="styles.h2">Heading h2</Heading>
<Heading as="h3" variant="styles.h3">Heading h3</Heading>
<Heading as="h4" variant="styles.h4">Heading h4</Heading>
<Heading as="h5" variant="styles.h5">Heading h5</Heading>
<Heading as="h6" variant="styles.h6">Heading h6</Heading>

Button is of HTML type <button /> Use the variant prop to change the button styles

<Button>primary</Button>
<Button variant='secondary'>secondary</Button>
<Button variant="accent">accent</Button>

Input is of HTML type <input type='text'/>

<Input placeholder="Bums" />

Select is of HTML type <select />

<Select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</Select>

Radio is of HTML type <input type='radio' />

<Radio id='radio2' name='radios' value='radio2' defaultChecked={true} />
<Radio id='radio1' name='radios' value='radio1'  />