0.0.3 • Published 4 years ago

lpdesignsystem v0.0.3

Weekly downloads
1
License
MIT
Repository
gitlab
Last release
4 years ago

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 />
PropsTypeRequiredDefaultDescription
AlertClassNamestringno''The class given to the alert if required
alertColor"error" , "info" , "success" , "warning"yessuccessThe colour of the alert
alertMessagestringyes''The alert message
buttonColoranyyesdefaultThe colour of the Button
buttonSize"medium" ,"small"yesmediumThe size of the close button
iconanyno''Whether or not to include an icon with the alert
severity_type"error" , "info" , "success" , "warning"yessuccessThe type of alert from materialUI drilled down to the component
variant_type"filled" , "outlined" , "standard"yesstandardThe fill type of the alert

Cards

“CardContent1”

Filling card content component

<CardContent1 />
PropsTypeRequiredDefaultDescription
idnumberyes-id
titlestringyes-Title
tags{ id: string; type: string; value: string; tagColor: string; tagTypeStyle: string; tagType: string; }yes-Tags
budgetstringyes-Budget
target_datestring
SingleCard
<SingleCard />
PropsTypeRequiredDefaultDescription
actionAreastringno() => {} or nullFunction to allow entire card to be clickable should usually mirror the button function
buttonstringyes() => {} or nullFunction to for the button should usually mirror the actionArea function
backGroundImagestringno''If you want the card to have a header image
contentstringyes''The content for the card
minWidthstringno''The minimum width for the card if required
valuestringyes''Card specific data which can be returned from the object this includes: id, title, tags, budget, target_date
ViewPocCard
<ViewPocCard />
PropsTypeRequiredDefaultDescription
titlestringyes''Title of the card
budgetstringyes''budget of the card
PocEndDatestringyes''start date of the card
PocStartDatestringyes''end date of the card

Carousel

<Carousel />
PropsTypeRequiredDefaultDescription
datainsideData[]yes''Data arr with component relative information

Chips

ChipsWithTitle
<ChipsWithTitle />
PropsTypeRequiredDefaultDescription
tagstag[]yes''Tag name
titlestringyes''Title name
tagTypestringyes''Tag Type
TagsChipMap
<TagsChipMap />
PropsTypeRequiredDefaultDescription
mapValuemapValue[]yes''Map of tag values
tagColorstringyes''Tag colour
tagTypeStylestringyes''Tag style type
tagTypestringyes''Tag type

Contact Options

<ContactOptions />
PropsTypeRequiredDefaultDescription
usersUser[]yes''Array of Users
contactstringyes''Contact info
setNewContactstringyes''Set an new user contact

Docusign

<Docusign />
PropsTypeRequiredDefaultDescription
linkstringyes''Docusign powerform variables
linkIDstringyes''Docusign powerform link id
callback(event: any) => voidyes''Button callback function
disabledbooleanyes''Button is disabled, this can be set after a click to submit action to prevent multiple clicks
colorprimary, default, inherit , secondaryyes''Button colour
varianttext, outlined, containedyes''Button variant function

Footer Menu

<FooterMenu />
PropsTypeRequiredDefaultDescription
label1stringyes''Label 1 Text
label2stringyes''Label 2 Text
label3stringyes''Label 3 Text

Form

Form
<Form />
PropsTypeRequiredDefaultDescription
noneN/AN/AN/AN/A
Edit Form
<StartupEditForm />
PropsTypeRequiredDefaultDescription
websitePropstringNo''Website address
employeeNumberPropstringNo''Number of employees
userListPropUser[]No''List of users assigned to this entity
contactUserPropstringNo''Assigns the user as the primary contact
descriptionPropstringNo''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
PropsTypeRequiredDefaultDescription
noneN/AN/AN/AN/A

KPI's Highlight map

KpisTickMap
<KpisTickMap />
PropsTypeRequiredDefaultDescription
kpiMapItemskpis[]yes''List of KPI's

KpiWithTitle

<KpiWithTitle />
PropsTypeRequiredDefaultDescription
titlestringYes''Title of the KPI field shown
kpiMapItemskpis[]yes''List of KPI's

AddKpis

<AddKpis />
PropsTypeRequiredDefaultDescription
kpiMapItemskpis[]yes''List of KPI's

Popover Alerts

<PopoverAlerts />
PropsTypeRequiredDefaultDescription
alertsstringyes''Alert Text content

Submit Leader

<SubmitLoader />
PropsTypeRequiredDefaultDescription
Action(props?: any) => stringNo''Callback1 function after button is clicked
buttonColorinherit , default , primary , secondaryYes''Button color following material design props
buttonTextstringYes''Text displayed in the button
buttonVariantoutlined, text, containedYes''Button variant following material design props
loadingTextstringYes''Text showed while loading animation
saveIconRefAnyYes''Custom icon
timeoutnumberYes''Timeout time

Tag Picker

<Tags />
PropsTypeRequiredDefaultDescription
datadataYes''Tags data
tagsPropsotherTags[]Yes''Already inserted custom tags
otherOptionsbooleanYes''To allow or disallow other options
typestringYes''Type
tagClassstringYes''Tag class for styling

Upload

<UploadInput />
PropsTypeRequiredDefaultDescription
ButtonColorinherit , default,primary,secondaryYes''Button color
CompanyYes''Component
iconanyYes''Custom icon
labelstringYes''Label Text for upload
Styledoutlined, text, containedYes''Button styling
UploadTextstringYes''Upload Text
setUploadFileanyYes''Set upload file function
formatanyYes''Acceptable file format

View Content

<ViewPoc />
PropsTypeRequiredDefaultDescription
entityTitlestringYes''Entity value
coverImageanyYes''Cover image path
tagstag[]Yes''List of tags
kpiskpis[]Yes''List of kpis
descriptionstringYes''Description
budgetstringYes''Budget
BackButtonTextstringYes''Back button text
PocEndDatestringYes''End date
PocStartDatestringYes''Start date
PocTitlestringYes''Title
@apollo/client@apollo/link-error@apollo/react-hooks@material-ui/core@material-ui/icons@material-ui/lab@mui-treasury/components@mui-treasury/layout@mui-treasury/styles@testing-library/jest-dom@testing-library/react@testing-library/user-event@types/base-64@types/enzyme@types/enzyme-adapter-react-16@types/react-domapollo-cache-inmemoryapollo-clientapollo-linkapollo-link-contextapollo-link-httpapollo-link-restbase-64codemirror-graphqlgraphiqlgraphqlgraphql-anywheregraphql-taglodashnode-sassprop-typesqsreactreact-apolloreact-domreact-hook-formreact-scriptsreact-swipeable-viewsts-loaderstorybook-addon-react-docgentypescript
0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago