GV React Component Library
This component library is built using react-styleguidist, documenting the layouts, design patterns and components to be used across our sites and products.
How to use components
GV-CL has a dependency of styled-components.
Install the package
yarn add gv-component-library
Wrap your app with the ThemeProvider and mainTheme
import { ThemeProvider, theme as mainTheme } from 'gv-component-library';
Import components
import { Banner } from 'gv-component-library';
Hide Visually
import { hideVisually } from 'gv-component-library';
how to use in your styled component
export const Component = styled.span'${hideVisually};';
Check if a url is whiteListed. Used to check links and change link target.
Z Index
import { zIndex } from 'gv-component-library';
how to use in your styled component
export const Component = styled.span'${zIndex('high')};';
Spacing
import { spacing } from 'gv-component-library';
Default spacing scale
One spacing unit is equal to 0.25rem, which translates to 4px by default in common browsers.
| Name | Size |
|---|---|
| none | 0 |
| xsm | 0.25rem |
| sm | 0.25rem |
| md | 1rem |
| l | 2rem |
| xl | 4rem |
| xxl | 8rem |
| xxxl | 16rem |
how to use in your styled component
export const Component = styled.span'
padding: ${spacing('md)'} ${spacing('l)'};';
import { Button } from 'gv-component-library';
Button
CTA button
Facebook button
Google button
Basic primary button
Basic success button
Basic info button
Basic warning button
Basic danger button
Full width button
Button with custom props
Button with green background
Large Button with UPPERCASE TEXT
Large Button with weighted text
Full width large Button with weighted text
import { Checkbox } from 'gv-component-library';
CheckBox Field
Checked checkbox
Unchecked checkbox
import { Input } from 'gv-component-library';
Input required with label and hint
*
Input with error message
*This is an error message
Simple input without weighted label
*
Simple password input
*
Simple number input
*
import { Link } from 'gv-component-library';
import { Picture } from 'gv-component-library';
Custom Size.
Single image
import { RichText } from 'gv-component-library';
Some strong test markup
Some italic test markup
Some underlined test markup
Some right aligned test markup
Some left aligned test markup
import { Text } from 'gv-component-library';
Heading 3 high
Heading 3 heavy
Heading 3 large
Heading 3 size xxl
My paragraph
My paragraph xl and yellow
My paragraph xl and font Anton
import { TextArea } from 'gv-component-library';
TextArea Field
Long copy/Message field
Long copy/Message field
import { Card } from 'gv-component-library';
Card
Full width Card.
Title 1
Text body copy description 1
Custom width Card.
Title 2
Text body copy description 2