BCGov Theme

This is a theme following the BCGov Design Guide for the component-library.

Getting Started

1. Install the package using your preferred package manager:

• npm i @button-inc/bcgov-theme OR
• yarn add @button-inc/bcgov-theme

2. Import the components you need using the following syntax:

• import { Button } from @button-inc/bcgov-theme OR
• import Button from @button-inc/bcgov-theme/Button

Note: If you are only importing a few components and are concerned about bundle size, the second syntax will only import code for the individual components you are using and should be preferred. As of version 1.0.0-alpha.4, the difference between the methods for importing a single button is ~63kB.

3. Include the component in your code

• <Button>Click Me!</Button>

Components

Note: React props (e.g onClick, onChange) are passed through to the topmost component unless otherwise specified. This list covers our custom props.

Accordion

Note: The accordion component works like a toggleable panel currently, and an interactive multi-panel accordion is on the roadmap.

The accordion component is used to display toggleable content, and will display a single accordion panel.

  <Accordion title="My Title">
    Content to display when toggled open.
  </Accordion>

To display multiple panels, they can be stacked

  <Accordion title="My Title">
    Content to display when toggled open.
  </Accordion>
  <Accordion title="My Title" defaultToggled>
    Content to display when toggled open.
  </Accordion>

Alert

Alert banners notify users of important information or changes on a page. Typically, they appear at the top of a page.

  <Alert content="My Title" closable />

Content can also be passed as children.

  <Alert size="small" variant="info">
    <strong>Child Content.</strong>
  </Alert>

Button

A button.

  <Button>Click Me!</Button>

Callout

Callouts are an excerpt of text that has been pulled out and used as a visual clue to draw the eye to the text. They are used to help direct a user's attention to important pieces of information.

  <Callout>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a tincidunt risus.</Callout>

Content can also be passed through props:

  <Callout content="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer a tincidunt risus." />

Card

A BCGov themed card for containing a styled header and content.

  <Card title="Online Registration">
    Register to our program.
    <Button>Click here to register</Button>
  </Card>

Checkbox

Checkboxes are a type of input that allow users to select one or more options from a list.

  <Checkbox size="small" label="Lorem ipsum dolor sit amet" />

DatePicker

Datepickers are a type of input that allow users to select a date.

  <Datepicker label="Birthday" size="small" required />

Dropdown

Dropdowns allow users to select one option from a list.

  <Dropdown label="Label" size="small">
    <option value="option1">Option 1</option>
    <option value="option1">Option 2</option>
  </Dropdown>

Fieldset

Fieldsets are used to group logically related inputs, e.g. a group of address fields.

Note: The fieldset will pass the size, required, disabled and variant props on to its children

  <Fieldset title="Address" required>
    <Input label="Street Address" />
    <Input label="City" />
    <Input label="Province" />
  </Fieldset>

FilePicker

FilePickers allow users to select a local file to upload.

  <FilePicker label="Upload a file" size="small">
    Choose File
  </FilePicker>

Footer

Footers help people find what they need after scrolling to the bottom of a web page. They provide supplementary information such as copyright, contact information, social media links, and links to other pages within a website.

To add links to a footer, include anchor tags in an unordered list.

  <Footer>
    <ul>
      <li>
        <a href=".">Link 1</a>
      </li>
      <li>
        <a href=".">Link 2</a>
      </li>
      <li>
        <a href=".">Link 3</a>
      </li>
      <li>
    </ul>
  </Footer>

Grid

The grid component helps layout content on the page, and can be used with two child components, Grid.Row and Grid.Col.

  <Grid cols={5}>
    <Grid.Row>
      <Grid.Col span={2}>
        content spanning two fifths of parent
      <Grid.Col>
      <Grid.Col span={3}>
        content spanning three fifths of parent
      <Grid.Col>
    </Grid.Row>
  </Grid>

Header

Headers help people understand what the product or service is about while providing a consistent look, feel, and functionality across government sites.

  <Header title="Hello British Columbia" onBannerClick={handleBannerClick} />

HeroImage

An image with an overlay to write content on top of it.

  <HeroImage url="my-image.png">
    <h2>Header Text</h2>
    <p>This is a subtitle with some extra information</p>
  </HeroImage>

Input

A text input. Text inputs allow users to enter a single line of text. Note: Default React props such as onClick, onChange are passed on to the input element.

Link

Links lead people to a different page.

  <Link href="#link1" content="Lorem ipsum dolor sit amet" size="small" external />

Modal

A modal window to display important content to the user. Note that modals should be used sparingly, and other methods of conveying information should be preferred for best accessibility practices. The modal can include a Modal.Header, Modal.Content, Modal.Footer, and Modal.Close sub component. The Header, Footer and Content components help to layout the modal, and the Close component will be the area to click to escape the modal.

To allow users to open the modal, include a link to the modals id, e.g. href="modal-id". See below for an example.

<Modal id="modal-id">
  <Modal.Header>
    Need Help? <Modal.Close>Close</Modal.Close>
  </Modal.Header>
  <Modal.Content>
    If you have specific questions, contact the Ministry of Children and Family Development.
  </Modal.Content>
  <Modal.Footer>
    <Link href="#link3">[email protected]</Link>
  </Modal.Footer>
</Modal>

<Link href="#modal-id">Open Modal</Link>

Navigation

A responsive site header with links.

  <Navigation title="Hello British Columbia" onBannerClick={handleClick}>
    <Menu />
  </Navigation>

RadioButton

Radio buttons are a type of input that allow users to select only one option from a list.

  <RadioButton size="small" label="Lorem ipsum dolor sit amet" />

TextArea

A textarea allows users to input multiple lines of text.

Typography

A set of typography rules to apply bcgov font styling. The typography is designed to be used with the typography.js library. For more details of setting up as a react component, see here.

To use the typography definitions in an importable component, create a Typography.js component:

import { TypographyStyle } from 'react-typography';
import typography from '@button-inc/bcgov-theme/typography';
import '@bcgov/bc-sans/css/BCSans.css';

export default function BCGovTypography() {
  return <TypographyStyle typography={typography} />;
}

Then this component can be included in any component where you want to apply the bcgov font style.

Sizes

Set the size of an element with this prop. The supported options are:

• small
• medium
• large