BCGov Theme

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

Getting Started

Install the package using your preferred package manager:

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

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.

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>

Prop	Value Type	Description
Title	String	The title displayed in the main header.
onToggle	Function	Callback function to fire when the toggle is clicked.
defaultToggled	Boolean	Whether to have the accordion panel open by default

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>

Prop	Value Type	Description
Variant	String	The style variant to use. Use one of ['success', 'info', 'warning', 'danger'].
Content	String or jsx	The content to include inside the alert. Note that contents passed as children will also render.
Size	String	The size variant to use. See sizes for more information on types.
Flex	Boolean	Whether to to display the contents using CSS flexbox. Setting to true will align content horizontally.
Closable	Boolean	Whether to have the accordion panel open by default

Button

A button.

  <Button>Click Me!</Button>

Prop	Value Type	Description
Variant	String	The style variant to use. Use one of ['primary', 'primary-inverse', 'primary-disabled', 'secondary', 'secondary-inverse', 'secondary-disabled'].
Size	String	The size variant to use. See sizes for more information on types.

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." />

Prop	Value Type	Description
Variant	String	The style variant to use. Currently only 'primary' is supported.
Size	String	The size variant to use. See sizes for more information on types.

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>

Prop	Value Type	Description
Title	String	The title of the 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" />

Prop	Value Type	Description
Size	String	The size variant to use. See sizes for more information on types.
Label	String	Pass through a label to connect to the checkbox
Required	Boolean	Indicates whether the field is required.
Disabled	Boolean	Indicates whether the field is disabled.
Value	String	The value of the input. Will be passed to the input itself.
Name	String	The name of the input. Will be passed to the input itself.
Id	String	The id of the input. Will be passed to the input itself.

DatePicker

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

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

Prop	Value Type	Description
Size	String	The size variant to use. See sizes for more information on types.
Label	String	Pass through a label to connect to the datepicker
Required	Boolean	Indicates whether the field is required.
Disabled	Boolean	Indicates whether the field is disabled.
Value	String	The value of the input. Will be passed to the input itself.
Name	String	The name of the input. Will be passed to the input itself.
Id	String	The id of the input. Will be passed to the input itself.
rounded	Boolean	Whether or not to apply a rounded border radius style.

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>

Prop	Value Type	Description
Size	String	The size variant to use. See sizes for more information on types.
Label	String	Pass through a label to connect to the dropdown
Required	Boolean	Indicates whether the field is required.
Disabled	Boolean	Indicates whether the field is disabled.
Name	String	The name of the input. Will be passed to the input itself.
Id	String	The id of the input. Will be passed to the input itself.
Value	String	The value of the input. Will be passed to the input itself.
rounded	Boolean	Whether or not to apply a rounded border radius style.

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>

Prop	Value Type	Description
Size	String	The size variant to use. See sizes for more information on types.
variant	String	The variant property will be forwarded on to any child props.
Title	String	Title of the fieldset.
Required	Boolean	Pass through to the fieldset to require all child inputs.
Disabled	Boolean	Pass through to the fieldset to disable all child inputs.

FilePicker

FilePickers allow users to select a local file to upload.

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

Prop	Value Type	Description
Size	String	The size variant to use. See sizes for more information on types.
Label	String	Pass through a label to connect to the filepicker.
Required	Boolean	Indicates whether the field is required.
Disabled	Boolean	Indicates whether the field is disabled.
Name	String	The name of the input. Will be passed to the input itself.
Id	String	The id of the input. Will be passed to the input itself.

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>

Prop	Value Type	Description
Cols	Number	The total number of columns for the grid to use. Pass to the base Grid component.
Span	Number	The number of total columns a specific Grid.Col section should cover. Pass to the Grid.Col component.

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} />

Prop	Value Type	Description
Title	String	The title to display on the header.
onBannerClick	Function	Callback that will fire when the logo is clicked.
header	string, one of ['main', 'sub']	Different styling options, see storybook for examples.

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>

Prop	Value Type	Description
url	String	The url for the image in the background.

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.

Prop	Value Type	Description
Size	String	The size variant to use. See sizes for more information on types.
Label	String	Pass through a label to connect to the input.
Required	Boolean	Indicates whether the field is required.
Disabled	Boolean	Indicates whether the field is disabled.
Type	String, one of ['email', 'number', 'password', 'tel', 'text', 'url']	Add an html5 input type. Will be passed to the input itself.
Value	String	The value of the input. Will be passed to the input itself.
Name	String	The name of the input. Will be passed to the input itself.
Id	String	The id of the input. Will be passed to the input itself.
Style	Object	Additional styles. Styles will be passed to the container of the input.
rounded	Boolean	Whether or not to apply a rounded border radius style.

Link

Links lead people to a different page.

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

Prop	Value Type	Description
href	String	The url you want to link to.
content	String	The text to display for the link.
content	String	The text to display for the link.
Size	String	The size variant to use. See sizes for more information on types.
External	Boolean	Include an external link icon to indicate to users they will be leaving the website. Will open the external link in a new tab.

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">info@gov.ca</Link>
  </Modal.Footer>
</Modal>

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

Prop	Value Type	Description
id	String	The id of the modal.

Navigation

A responsive site header with links.

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

Prop	Value Type	Description
title	String	The title for the navigation.
onBannerClick	Function	Callback function for when the logo is clicked.
mobileMenu	Function	A function that returns a JSX element. By default, the mobile menu will match the menu passed as a child. This can be used to override the links displayed on mobile.
mobileBreakPoint	String	The number of pixels at which to collapse to a hamburger menu. Enter just the number as a string, e.g "900".

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" />

Prop	Value Type	Description
Size	String	The size variant to use. See sizes for more information on types.
Label	String	Pass through a label to connect to the input.
Required	Boolean	Indicates whether the field is required.
Disabled	Boolean	Indicates whether the field is disabled.
Value	String	The value of the input. Will be passed to the input itself.
Name	String	The name of the input. Will be passed to the input itself.
Id	String	The id of the input. Will be passed to the input itself.
Style	Object	Additional styles. Styles will be passed to the container of the input.

TextArea

A textarea allows users to input multiple lines of text.

Prop	Value Type	Description
Size	String	The size variant to use. See sizes for more information on types.
Label	String	Pass through a label to connect to the input.
Required	Boolean	Indicates whether the field is required.
Disabled	Boolean	Indicates whether the field is disabled.
Value	String	The value of the input. Will be passed to the input itself.
Name	String	The name of the input. Will be passed to the input itself.
Id	String	The id of the input. Will be passed to the input itself.
Style	Object	Additional styles. Styles will be passed to the container of the input.
Resize	String, one of ["none", "both", "horizontal", "vertical"]	The resize settings for the text area, see [here](https://developer.mozilla.org/en-US/docs/Web/CSS/resize) for more information.
rounded	Boolean	Whether or not to apply a rounded border radius style.

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

@button-inc/bcgov-theme

BCGov Theme

Getting Started

Components

Accordion

Alert

Button

Callout

Card

Checkbox

DatePicker

Dropdown

Fieldset

FilePicker

Footer

Grid

Header

HeroImage

Input

Link

Modal

Navigation

RadioButton

TextArea

Typography

Sizes

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

Weekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

@button-inc/bcgov-theme

BCGov Theme

Getting Started

Components

Accordion

Alert

Button

Callout

Card

Checkbox

DatePicker

Dropdown

Fieldset

FilePicker

Footer

Grid

Header

HeroImage

Input

Link

Modal

Navigation

RadioButton

TextArea

Typography

Sizes

Readme

Keywords

Package Sidebar

Install

Repository

Homepage

DownloadsWeekly Downloads

Version

License

Unpacked Size

Total Files

Last publish

Collaborators

Weekly Downloads