Base Design system framework

Installation instructions

1. Clone this repo

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

2. cd into the designsystem directory

cd designsystem

3. Run npm install

npm install

4. Run npm start to run the application code

npm start

5. 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 |