web-components-phionike

web-components-phionike

A React Library containing basic UI components.

Installing

npm install web-components-phionike

Dependencies

npm install styled-components

Components

Avatars

import { Avatars } from 'web-components-phionike';

props

Attribute	Values	Default	Description
size	"xs" : "s" : "m" : "xm" : "l" : "xl"	m	The size of Avatar.
mode	square : circle	square	The shape of Avatar.
src	-	NULL	The source location of Avatar image.

Banner

import { Banner } from 'web-components-phionike';

props

Attribute	Values	Default	Description
backgroundColor	String	#FAFAFA	The color of Banner.
image	-	NULL	The source location of Avatar image.
button1	String	#FAFAFA	The bgColor of button1.
button1Color	String	#0B5FFF	The color of button1.
button2	String	#FAFAFA	The bgColor of button2.
button2Color	String	#0B5FFF	The color of button2.
borderRadius	Integer	0	Border Radius of Banner.
button1OnClick	()=>{}	null	Call to action of Button 1.
button2OnClick	()=>{}	null	Call to action of Button 2.

Button

import { Button } from 'web-components-phionike';

props

Attribute	Values	Default	Description
size	"small" : "medium" : "large"	medium	The size of Button.
radius	Integer	8	The border-radius of Button.
primary	Boolean	false	The background-color of Button.
onClick	()=>{}	null	Call to action of Button.

Buttonicon

import { Buttonicon } from 'web-components-phionike';

props

Attribute	Values	Default	Description
icon	-	PlusIcon	Icon of Buttonicon.
radius	Integer	8	Border Radius of Buttonicon.
size	Integer	52	The width & height of Buttonicon.
disabled	Boolean	false	Disable or Enable Buttonicon.
primary	Boolean	false	Primary or Default Buttonicon.
onClick	()=>{}	null	Call to action of Button.

Chips

import { Chips } from 'web-components-phionike';

props

Attribute	Values	Default	Description
disable	Boolean	false	Disable Chip.
label	String	Chip Label	The label of Chip.
avatar	-	img	The source location of Avatar image.
avatarVisible	Boolean	true	The visibility of Avatar.
crossVisible	Boolean	true	The visibility of Cross Icon.

Circular Progress

import { CircularProgressBar } from 'web-components-phionike';

props

Attribute	Values	Default	Description
strokeWidth	Integer	10	Width of Color Indicator Strip.
percentage	Integer	50	Percentage Progress Completed.
width	Integer	50	The total width of Indicator.
height	Integer	50	The total height of Indicator.
color	String	#0B5FFF	The color of Indicator.

Input

import { Input } from 'web-components-phionike';

props

Attribute	Values	Default	Description
placeholder	String	Text	The placeholder of Input.
label	String	Label	The label of Input.
success	Boolean	false	Error-free Input.
successText	String	Success Message	The Success Message of Input.
error	Boolean	false	Error Input.
errorText	String	Error Message	The Error Message of Input.

Progress Indicators

import { ProgressIndicators } from 'web-components-phionike';

props

Attribute	Values	Default	Description
bgColor	String	#0B5FFF	The background-color of Indicator.
count	Boolean	false	The count meter of Indicator.

Sidebar

import { Sidebar } from 'web-components-phionike';

props

Attribute	Values	Default	Description
theme	light : dark	dark	Theme of the Sidebar.
logoIcon	-	default img	Main Site Logo.
logoText	String	logo	Main Site Name.
sections	Array	sections	Subsections of the Sidebar.

sections = [
	{icon:  TN,
	text:  "module 1",
	link:  "https://www.google.com",
	},
	{
	icon:  TN,
	text:  "module 2",
	link:  "https://www.google.com",
	},
]

Snackbar

import { Snackbar } from 'web-components-phionike';

props

Attribute	Values	Default	Description
text	String	Lorem Ipsum	The text of Snackbar.
action	String	Small Button	The title of action button.
show	Boolean	false	Toggle visibility.
successText	String	Success Message	The Success Message of Input.
setShow	Boolean	false	Setter Function for toggling show.
actionBtn	Boolean	false	Action Button visibility.

Tooltip

import { Tooltip } from 'web-components-phionike';

props

Attribute	Values	Default	Description
pointer	Boolean	false	Pointer.
content	String	This is a tooltip	Text of the Tooltip.
direction	top : left: right: bottom	top	Location of Tooltip.
textColor	String	white	The Color of Message of Tooltip.
delay	Integer	400	Time delay to show Tooltip.

NotifWrapper

import { NotifWrapper } from 'web-components-phionike';

props

Attribute	Values	Default	Description
theme	light : dark	dark	Theme of the NotifWrapper.
wrapper	state	NULL	state of NotifWrapper.
setWrapper	setter function	NULL	state updation function of NotifWrapper.
drawerSize	Integer	200	Width of the notification wrapper.

Navbar

import { Navbar } from 'web-components-phionike'

props

Attribute	Values	Default	Description
bgColor	String	#B9C0C5	The background-color of Navbar.
color	String	#20272C	Color of the text.
icon	-	SideNavIcon	Icon of Logo inside navbar.
links	Object	links	Navigation Links of navbar.

links={
	product:{},
	overview:{
		link1: "link-1",
    		link2: "link-2",
		},
	contact:{}
}

Responsive Navbar

import { ResponsiveNavbar } from 'web-components-phionike'

props

Attribute	Values	Default	Description
bgColor	String	#B9C0C5	The background-color of Navbar.
color	String	#20272C	Color of the text.
icon	-	SideNavIcon	Icon of Logo inside navbar.
links	Object	links	Navigation Links of navbar.

links={
	product:{},
	overview:{
		link1: "link-1",
    		link2: "link-2",
		},
	contact:{}
}

Modal

import { Modal } from 'web-components-phionike'

props

Attribute	Values	Default	Description
size	"small" : "medium" : "large" : "extraLarge"	small	The size of Modal.
title	String	Modal Title	Title of the modal.
content	String	Modal Content	Content inside the modal.
primary	Boolean	false	The background-color of Button.
button1Text	String	Button	Text of the button1.
button2Text	String	""	Text of the button2.
showModal	Boolean	false	Toggle visibility.
button1OnClick	()=>{}	null	Call to action of Button 1.
button2OnClick	()=>{}	null	Call to action of Button 2.

About

Contributors

	Shubh Nisar	https://shubh-nisar.github.io
	Tanay Naik	www.linkedin.com/in/tanay-naik-9693831a4