lpdesignsystem

Base Design system framework

Installation instructions

1. Clone this repo

git clone https://gitlab.com/bplaunchpad2/lpds.git

1. cd into the designsystem directory

cd designsystem

1. Run npm install

npm install

1. Run npm start to run the application code

npm start

1. Run npm run book instance which will allow you to see all the working components in indivdually

npm run book

Precommit Hooks

Husky precommit hooks are installed but not configured by default if you wish to use them please add this to the bottom of your package.json file

    "husky": {
        "hooks": {
            "pre-commit": "npm test",
            "pre-push": "npm test",
            "...": "..."
        }
    }

Conponents Contained with in the Design System

Alerts

<Alerts />

Props	Type	Required	Default	Description
AlertClassName	string	no	''	The class given to the alert if required
alertColor	"error" , "info" , "success" , "warning"	yes	success	The colour of the alert
alertMessage	string	yes	''	The alert message
buttonColor	any	yes	default	The colour of the Button
buttonSize	"medium" ,"small"	yes	medium	The size of the close button
icon	any	no	''	Whether or not to include an icon with the alert
severity_type	"error" , "info" , "success" , "warning"	yes	success	The type of alert from materialUI drilled down to the component
variant_type	"filled" , "outlined" , "standard"	yes	standard	The fill type of the alert

Cards

“CardContent1”

Filling card content component

<CardContent1 />

Props	Type	Required	Default	Description
id	number	yes	-	id
title	string	yes	-	Title
tags	[{ id: string; type: string; value: string; tagColor: string; tagTypeStyle: string; tagType: string; }]	yes	-	Tags
budget	string	yes	-	Budget
target_date	string

SingleCard

<SingleCard />

Props	Type	Required	Default	Description
actionArea	string	no	() => {} or null	Function to allow entire card to be clickable should usually mirror the button function
button	string	yes	() => {} or null	Function to for the button should usually mirror the actionArea function
backGroundImage	string	no	''	If you want the card to have a header image
content	string	yes	''	The content for the card
minWidth	string	no	''	The minimum width for the card if required
value	string	yes	''	Card specific data which can be returned from the object this includes: id, title, tags, budget, target_date

ViewPocCard

<ViewPocCard />

Props	Type	Required	Default	Description
title	string	yes	''	Title of the card
budget	string	yes	''	budget of the card
PocEndDate	string	yes	''	start date of the card
PocStartDate	string	yes	''	end date of the card

Carousel

<Carousel />

Props	Type	Required	Default	Description
data	insideData[]	yes	''	Data arr with component relative information

Chips

ChipsWithTitle

<ChipsWithTitle />

Props	Type	Required	Default	Description
tags	tag[]	yes	''	Tag name
title	string	yes	''	Title name
tagType	string	yes	''	Tag Type

TagsChipMap

<TagsChipMap />

Props	Type	Required	Default	Description
mapValue	mapValue[]	yes	''	Map of tag values
tagColor	string	yes	''	Tag colour
tagTypeStyle	string	yes	''	Tag style type
tagType	string	yes	''	Tag type

Contact Options

<ContactOptions />

Props	Type	Required	Default	Description
users	User[]	yes	''	Array of Users
contact	string	yes	''	Contact info
setNewContact	string	yes	''	Set an new user contact

Docusign

<Docusign />

Props	Type	Required	Default	Description
link	string	yes	''	Docusign powerform variables
linkID	string	yes	''	Docusign powerform link id
callback	(event: any) => void	yes	''	Button callback function
disabled	boolean	yes	''	Button is disabled, this can be set after a click to submit action to prevent multiple clicks
color	primary, default, inherit , secondary	yes	''	Button colour
variant	text, outlined, contained	yes	''	Button variant function

Footer Menu

<FooterMenu />

Props	Type	Required	Default	Description
label1	string	yes	''	Label 1 Text
label2	string	yes	''	Label 2 Text
label3	string	yes	''	Label 3 Text

Form

Form

<Form />

Props	Type	Required	Default	Description
none	N/A	N/A	N/A	N/A

Edit Form

<StartupEditForm />

Props	Type	Required	Default	Description
websiteProp	string	No	''	Website address
employeeNumberProp	string	No	''	Number of employees
userListProp	User[]	No	''	List of users assigned to this entity
contactUserProp	string	No	''	Assigns the user as the primary contact
descriptionProp	string	No	''	Allows the setting of core technologies

Graph QL Search

Search

<Search />

| Props | Type | Required | Default | Description |
| ----- | ---- | -------- | ------- | ----------- |
| none  | N/A  | N/A      | N/A     | N/A         |

#### Icons

##### Available Icons within the system

```

Props	Type	Required	Default	Description
none	N/A	N/A	N/A	N/A

KPI's Highlight map

KpisTickMap

<KpisTickMap />

Props	Type	Required	Default	Description
kpiMapItems	kpis[]	yes	''	List of KPI's

KpiWithTitle

<KpiWithTitle />

Props	Type	Required	Default	Description
title	string	Yes	''	Title of the KPI field shown
kpiMapItems	kpis[]	yes	''	List of KPI's

AddKpis

<AddKpis />

Props	Type	Required	Default	Description
kpiMapItems	kpis[]	yes	''	List of KPI's

Popover Alerts

<PopoverAlerts />

Props	Type	Required	Default	Description
alerts	string	yes	''	Alert Text content

Submit Leader

<SubmitLoader />

Props	Type	Required	Default	Description
Action	(props?: any) => string	No	''	Callback1 function after button is clicked
buttonColor	inherit , default , primary , secondary	Yes	''	Button color following material design props
buttonText	string	Yes	''	Text displayed in the button
buttonVariant	outlined, text, contained	Yes	''	Button variant following material design props
loadingText	string	Yes	''	Text showed while loading animation
saveIconRef	Any	Yes	''	Custom icon
timeout	number	Yes	''	Timeout time

Tag Picker

<Tags />

Props	Type	Required	Default	Description
data	data	Yes	''	Tags data
tagsProps	otherTags[]	Yes	''	Already inserted custom tags
otherOptions	boolean	Yes	''	To allow or disallow other options
type	string	Yes	''	Type
tagClass	string	Yes	''	Tag class for styling

Upload

<UploadInput />

Props	Type	Required	Default	Description
ButtonColor	inherit , default,primary,secondary	Yes	''	Button color
Comp	any	Yes	''	Component
icon	any	Yes	''	Custom icon
label	string	Yes	''	Label Text for upload
Styled	outlined, text, contained	Yes	''	Button styling
UploadText	string	Yes	''	Upload Text
setUploadFile	any	Yes	''	Set upload file function
format	any	Yes	''	Acceptable file format

View Content

<ViewPoc />

Props	Type	Required	Default	Description
entityTitle	string	Yes	''	Entity value
coverImage	any	Yes	''	Cover image path
tags	tag[]	Yes	''	List of tags
kpis	kpis[]	Yes	''	List of kpis
description	string	Yes	''	Description
budget	string	Yes	''	Budget
BackButtonText	string	Yes	''	Back button text
PocEndDate	string	Yes	''	End date
PocStartDate	string	Yes	''	Start date
PocTitle	string	Yes	''	Title