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)

** 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~~