Web-components-phionike NPM

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.