Challenge: Create a reusable button with all the states in the design and a page displaying all the states. You can work on the same project with other design system challenges. Use Front-end libraries like React or Vue. Don't look at the existing solution. Fulfill user stories below:
- User story: I can see different button types: default, outline and text
- User story: I can choose to disable box-shadow
- User story: I can choose to disable the button
- User story: I can choose to have an icon on the left or right (Use Google Icon and at least 5 variants)
- User story: I can have different button sizes
- User story: I can have different colors
- User story: When I hover or focus, I can see visual indicators
- User story: I can still access all button attributes
- User story (optional): Show button in a similar way like the design or use Storybook. Otherwise, showing the button in multiple states is enough
- React.js
- TypeScript
- Vite
- Sass
- BEM
- clsx
- @hrc/material-icons
- @hrc/toggle-theme
- @hrc/type-utils
- fontsource
- @material-design-icons/font
In this challenge I learned:
- Integrate easily
BEMandReact.jswithclsx - Use
Material Iconsfor a web project - Use CSS
custom propertiesfor re-calculate easily properties values - Use
ComponentPropsutility for extend component props
To clone and run this application, you'll need Git, Node.js and pnpm installed on your computer. From your command line:
# Clone this repository
git clone https://github.com/Hdoc1509/dev-challenges
# install workspace dependencies
cd dev-challenges && pnpm install
# Run button-component in dev-mode
cd apps/button-component
pnpm run dev --open