/* eslint-disable jsx-a11y/anchor-is-valid */ import { Grid, Row, Col, Button, Alert, ProgressBar } from 'react-bootstrap' import Notification from '../js/shared/components/notification' export const Colors = () => { return (

Colours

                  
                  
                
                  
                  
                
                  
                  
                
                  
                  
                
                  
                  
                
                  
                  
                
                  
                  
                
                  
                  
                
                  
                  
                
                  
                  
                
                  
                  
                
                  
                  
                
) } export const Headings = () => { return (

Headings

Here are our heading styles:

Heading level 1

Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

Heading level 2

Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

Heading level 3

Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

Heading level 4

Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum

) } const ButtonsTemplate = (args, { globals: { theme } }) => { return (

Buttons

Primary Button

Secondary Button

{theme.includes('main') ? ( <>

Deprecated Styles

These are being transitioned to the new secondary style above

) : ( '' )}

Our secondary button is blue or dark gray:

All button styles

{theme.includes('main') ? (

Includes styles being deprecated

) : ( '' )}
{theme.includes('main') ? ( ) : ( '' )}

Sizes

Hyperlinks

Hyperlinks are highlighted as shown.

) } export const Buttons = ButtonsTemplate.bind({}) Buttons.args = { disabled: false, } export const Alerts = () => { return (

Alerts / Notifications

See Notification in shared components for options

.notitifcation .notification-type-info
} /> .notitifcation .notification-type-success
} /> .notitifcation .notification-type-warning
} /> .notitifcation .notification-type-error
} /> .notitifcation .notification-type-offer
} /> Note: these styles below will be deprecated since there are new alert styles rolling out as part of the new design system An .alert-danger alert An .alert-success alert An .alert-info alert An .alert-warning alert
) } export const ProgressBars = () => { return (
{' '}

Progress bars

) } export const Cards = () => { return ( <>

Cards look best on a .content.content-alt{' '} background

New card styles

Header 2

Header 3

Header 4

Dolor sit amet, consectetur adipiscing elit.

) } export const Forms = () => { return (

Form elements—basic example

Example block-level help text here.

Inline form

$
.00

Horizontal form

Supported controls