Blob-components NPM

Blob Components

A component library built in a day!

Installation

Install this library into another project using npm i blob-components

Development

To view the components in story book npm run storybook

To run the tests npm test

Publication

To compile the components into a library npm build

To publish the library to the npm registry run npm publish (Ben will do this after lunch as a demo)

Building Our Components

Each team will have one component to build. You must think about what your component must do, and what props it will need. What options might you want eg large/small. Use storybook for development and to document how your component can be used. Write tests to show your component works.

Button (Example)
Dropdown Menu (Team 1)
Checkbox (Team 2)
Toggle Switch (Team 3)
Time Picker (Team 4)
Range Input (Team 5)
Number Input (Team 6)
Star Rating (Team 7)

Toggle Team Disney Ideation

** Dreamer

Three sizes - small, medium, large
When toggled will have special effects
Let user set colours for switched on / off - given few choices
Change the shape of the toggle switch

** Realist

Amendable size for toggle
Amendable colours to show when toggle is on / off
Amendable text in toggle
Horizontal / vertical

PLAN

callback function to handle toggle
size
colour
text (outside) **(stretch goal - inside)
useState for isOn, initialState(false)
CSS module for styling
- isOn
- isOff
- toggle size - s / m / l
- set colours - red/blue/yellow/black/white/grey
- horizontal / vertical
test to see if rendered
test to see if clicked on / off
test to see if amendable (color/size)