Component library for react

• Buttons
• Card

Buttons

    <Button size="small" variant="primary">Small</Button>
    <Button size="medium" variant="primary">Medium</Button>
    <Button size="large" variant="primary">Large</Button>

Props

'size' has available options: 'sm' for small, 'md' for medium, 'rgl' for large.
'variant' options: 'primary', 'secondary', 'warning', 'delete', 'send'.
'type' optinos: 'outlined', 'contained'.

If no props are passed, the default styling will be size 'md', variant 'primary', and type 'contained'.

Props

| | | | | | | | -------- | --------- | --------- | ------- | ------ | ---- | | size: | sm | md | rgl | | | | variant: | primary | secondary | warning | delete | send | | type | oputlined | contained | | | |

Card

The card component is designed to take in other components like Typography and Button. As you import these components in to your card, the content within the card component will flex as needed to the height and width necessary.

import CardText from 'bit-ui-wise'
import Typography from 'bit-ui-wise'

class CardText extends Component {
  render() {
    return (
      <CardText>
        <Typography varient='header' varient='sub-header'></Typography>
      </CardText>
    )
  }
}

import CardButton from 'bit-ui-wise'
import Button from 'bit-ui-wise'

class CardButton extends Component {
  render() {
    return (
      <Button size='small' variant='primary'>
        Small
      </Button>
    )
  }
}

Default Card

The default option for the card component is an empty container wit set styling, that allows the user to add content at their own discretion.

Card

Card component also returns props.children so all components within the Card component will take those style properties with it.

Props

| property | props | default | values | | | | --------------------- | ---------- | ------- | ------------- | -------- | ---------------- | | minWidth && maxWidth: | size: | '100%' | 'sm' | 'md' | 'lrg' | | height: | height: | null | 'px' | 'rem' | '%' | | flexDirection: | direction: | 'row' | 'row-reverse' | 'column' | 'column-reverse' | | backgroundColor: | bgColor: | 'white' | hex | rgb | 'color' |

  <Card size='sm' flexDirection='row' bgColor='#F9EAE1'>
    <Child Component>
  </Card>

CardImage

CardImage is a self closing component that takes in a image as a prop with a url, also props passed allowing for sizing and positioning.

Props

| property | props | default | values | | | | ---------------- | -------- | --------- | ------- | ----- | ------- | | backgroundColor: | bgColor: | 'white' | hex | rgb | 'color' | | backgroundImage: | img: | null | url | | | | backgroundSize: | bgSize: | 'contain' | 'cover' | '%' | 'px' | | height: | height: | '300px' | 'px' | 'rem' | '%' | | width: | imgSize: | '100%' | 'sm' | 'md' | 'lrg' |

<CardImage img={'url'} bgSize='cover' height='150px' />

CardText

CardText takes {props.children} which will give a container for the typography component

Props

| property | props | default | values | | | | ---------------- | -------- | ------- | ------ | --- | ------- | | backgroundColor: | bgColor: | 'white' | hex | rgb | 'color' |

<CardText bgColor='lightgrey'>
  <Typography> Hello World! </Typography>
<CardText />

*Refer to Typography for specific Typography Props

CardButton

CardButton takes in an array of buttons using props and the .map() method.

Props

| property | props | default | values | | | | ---------------- | --------- | -------------- | ----------------------- | -------- | ---------------------- | | justifyContent: | position: | 'space-evenly' | 'left' === 'flex-start' | 'center' | 'right' === 'flex-end' | | backgroundColor: | bgColor: | 'white' | hex | rgb | 'color' |

<CardButton position='right'>
  buttons={[
            <Button size='md' variant={'primary'}>
              Click Me!
            </Button>,
            <Button size='md' variant={'delete'}>
              Delete Me!
            </Button>
          ]}
<CardButton />

Input

props: type, value, placeholder, onchange, type

| props | | | | | ----------- | ---------- | -------- | ---- | | type | email | password | text | | placeholder | "String" | | | | value | "String" | | | | onChange | "Function" | | |

<TextField />
<TextField placeholder={'im a placeholder'} />
<TextField
  inputStyle={'outline'}
  value={'im a value'}
  width={'25%'}
/>
<TextField inputStyle={'filled'} width={'25%'} />