A component library built in a day!
Install this library into another project using npm i blob-components
To view the components in story book npm run storybook
To run the tests npm test
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)
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)
** 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
-
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)
** show features of toggle in StoryBook
- a toggle to show each color with different sizes
** Critic
- text inside toggle too complex
- doesn't toggle with colour change
- mvp working toggle - clicks on/off