bit-ui-wise

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.

---

When users add their own content, the card will resize to the proper dimensions within itself, giving the content room to grow or shrink.

---

 

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