Boohoo-component-library NPM

Boohoo component library

This is going to be the repository for shared react components to speed up development.

It'll also contain some shared styles, brand guidelines even maybe, for those projects which aren't based on react.

If you wanted to set this up again...

npx sb init

Development (of new components)

Deployment

npm publish...

Usage

boohoo-component-library

Button

Primary button for use throughout the applications

Props:

color: string - 'primary', 'secondary', 'tertiary',

outline: boolean,

label: string - text displayed on button,

icon: string - material icon to be displayed in button,

iconSide: string = 'left', 'right',

width: string - enter a value such as '10em / 100px'

height: string - enter a value such as '10em / 50px'

onClick: function - function fired when button is clicked

type: string - defined button type, defaults to "button"

fontSize: string - determines font size in button

disabled: boolean - adds inactive styling for button

ChatInput

Input bubble for chatbot featured in supplier portal

Props:

onChange: function - function fired on input value change,

id: string,

value: string - value of input,

placeholder: string - placeholder seen when input has no value,

label: string - aria label,

buttonText: string - text for button placed to the right of input,

onSubmit: function - function for when button is clicked,

error: string - displays above input when input has failed validation

Checkbox

Checkbox component for forms

Props:

whiteSpace: string  - css styling for label text,

checked: boolean - determines whether box is checked or not,

handleClick: function - function fired when box is selected,

label: string - label attached to checkbox,

labelPosition: string - determines position of label, one of "left", "right", "top", "bottom". Defaults to "left".

DocUpload

Document upload input for files can be used in forms

Props:

label: string - label for input field,

width: string - enter a value such as '10em / 100px'

height: string - enter a value such as '10em / 50px'

padding: string - enter a value such as '0px 0px 13px 13px'

extensions: array - array of strings of accepted file extensions eg: '.pdf',

allowMultiple: boolean - allow multiple files to be selected,

onChange: function - function fired on value of file changing,

icon: any - can be image or material ui icon component

Dropdown

Dropdown component for use in forms

Props:

name: string- name for dropdown/select

label: string - label shown above dropdown,

options: array[{}] - array of objects containing `id` - number, `value` - any, `label` - string

onChange: function - function fires on selection of new item in dropdown

width: string - enter a value such as '10em / 100px'

height: string - enter a value such as '10em / 100px'

padding: string - enter a value such as '0px 0px 13px 13px'

initialValue: string - enter a value identical to the value of an option in the options list to set it as the default value

Header

Header component with option to include link to home and icon buttons

Props:

bannerTitle: string - title of hero banner,

homeLink: string - url path to homepage,

links: array[{}] - array of objects of links to be displayed on header navbar made up of `title` - string, `link` - string(url), `active` - boolean,

buttons: array[{}] - array of icon buttons to be displayed on right side of header made up of `icon` - string, `onClickHandler` - function

IconButton

Icon button for use across applications - makes use of Material Icons

Props:

icon: string - material icon to be displayed on button,

dataTestId: string - id to be used to grab element in test suite,

onClickHandler: function - function fired when button is clicked

width: string - enter a value such as '10em / 100px'

height: string - enter a value such as '10em / 50px'

IconButtonGroup

Group of Icon Buttons

Props:

buttons: array[{}] - array of icon button components made up of `icon` - string, `onClickHandler` - function

Input

Input component for use in forms

Props:

placeholder: string - text seen when input has no value,

label: string - text seen above input, also an aria label

value: string - text seen within input,

id: string,

onChange: function - function fired when value of input changes,

width: string - enter a value such as '10em'

height: string - enter a value such as '10em / 100px'

padding: string - enter a value such as '0px 0px 13px 13px'

isValid: boolean - if true then input will have an error border

disabled: boolean - if true then the input will show disabled styling and be unusable

TextArea

TextArea component for use in forms

Props:

placeholder: string - text seen when input has no value,

label: string - text seen above input, also an aria label

value: string - text seen within input,

id: string,

width: string - enter a value such as '10em / 100px'

height: string - enter a value such as '10em / 50px'

onChange: function - function fired when value of input changes

isValid: boolean - if true then textarea will have an error border

disabled: boolean - if true then the input will show disabled styling and be unusable

ProgressBar

Progress bar animates from left to right

Props:

fillColour: string - colour bar fills up with,

backgroundColour: string - background colour of progress bar,

completed: number - progress as a percentage

RadioButton

Radio Button for use in forms

Props:

checked: boolean - determines whether radio is checked or not,

handleClick: function - function fired when radio is selected,

label: string - label attached to radio

labelPosition: string - determines position of label, one of "left", "right", "top", "bottom". Defaults to "left".

SelectorField

Clickable/Selectable fields for use in forms

Props:

selectorTitle: string - title to appear above field,

view: string - 'row', 'column' - defines direction of field,

selectorSize: string - 'default', 'medium', 'large' - defines size of field,

options: array[{}] - array of objects defining the configuration and number of fields made up of `id` -number, `value` - string

SpeechBubble

Basic speech bubble in which text appears in the chat bot present in supplier portal

Props:

isUser: boolean - determines if speechbubble belongs to user or Boohoo, changes colour.

message: string - message displayed in chat bubble

SecondaryNav

Secondary navigation component adds a more personable feel and can include more links relevant to the page/section of the application.

Props:

title: string - title displayed at top of nav

id: string - passed for value of key in div

name: string - name of client/customer to be displayed underneath nav title - if left blank the name will just say "Hi".

description: string - brief description of what current page/tab is for

links: array[{}] - array of objects, each of which will render a button below the nav description inline. Made up of - `name` - string, `to` - string, `isActive` - boolean.

StatusIndicator

Status Indicator that displays text and a colour representative of the status of a document/section

Props:

text: string - text to be displayed within status indicator

statusId: number(1, 2, 3, 4) - One of either 1, 2 3 or 4. 1 for red, 2 for amber, 3 for green , 4 for blue. Colour representation of status - changes background colour.

width: string - enter a value such as '10em / 100px'

height: string - enter a value such as '10em / 100px'