Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/richardcyrus/devchallenges-button-component
Solution for the Button component challenge from Devchallenges.io.
https://github.com/richardcyrus/devchallenges-button-component
postcss reactjs testing-library typescript vitejs vitest
Last synced: about 1 month ago
JSON representation
Solution for the Button component challenge from Devchallenges.io.
- Host: GitHub
- URL: https://github.com/richardcyrus/devchallenges-button-component
- Owner: richardcyrus
- Created: 2023-03-10T03:16:33.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-03-14T21:19:15.000Z (almost 2 years ago)
- Last Synced: 2024-04-23T20:48:23.177Z (9 months ago)
- Topics: postcss, reactjs, testing-library, typescript, vitejs, vitest
- Language: CSS
- Homepage: https://devchallenges-button-component-seven.vercel.app
- Size: 338 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
devchallenges-button-component
## Table of Contents
- [Overview](#overview)
- [User Stories](#user-stories)
- [Built With](#built-with)
- [Features](#features)
- [How to use](#how-to-use)
- [Acknowledgements](#acknowledgements)
- [Contact](#contact)
## Overview
Create a reusable button with all the states in the design and a page displaying all the states.
### User Stories
- As a user, I want to create buttons of different types: default, outline and text.
- As a user, I want to be able to disable the shadow on a button.
- As a user, I want to be able to disable the button.
- As a user, I want to choose to have an icon on the left or right.
- As a user, I want to have different button sizes.
- As a user, I want to have different button colors.
- As a user, I want to see a different state when the button is focused or hovered.
- As a user, I want to use any of the standard HTML attributes available for buttons.
### Built With
- Flexbox
- CSS Grid
- [React](https://reactjs.org/)
- [Vite](https://vitejs.dev)
- [Vitest](https://vitest.dev) - A blazing fast unit-test framework powered by Vite.
- [Testing Library](https://testing-library.com) - Simple and complete testing utilities that encourage good testing practices.
- [material-icons](https://github.com/marella/material-icons)
- [Sass Color Generator](http://scg.ar-ch.org)
## Features
This application/site was created as a submission to a [DevChallenges](https://devchallenges.io/challenges) challenge. The [challenge](https://devchallenges.io/challenges/ohgVTyJCbm5OZyTB2gNY) was to create a reusable button with all the states in the design and a page displaying all the states.
## How To Use
To clone and run this application, you'll need [Git](https://git-scm.com) and [Node.js](https://nodejs.org/en/download/) (which comes with [npm](http://npmjs.com)) installed on your computer. From your command line:
```bash
# Clone this repository
$ git clone https://github.com/richardcyrus/devchallenges-button-component
# Install dependencies
$ yarn
# Run the app
$ yarn dev
```
## Acknowledgements
- [My Custom CSS Reset](https://www.joshwcomeau.com/css/custom-css-reset/)
- [A Modern CSS Reset](https://piccalil.li/blog/a-modern-css-reset/)
- [Notes on Josh Comeau’s Custom CSS Reset](https://css-tricks.com/notes-on-josh-comeaus-custom-css-reset/)
- [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
- [A Complete Guide to Grid](https://css-tricks.com/snippets/css/complete-guide-grid/)
- [React TypeScript Cheatsheets](https://react-typescript-cheatsheet.netlify.app/)
- [Testing a Button Component](https://debbie.codes/blog/testing-button-component/)
- [How to Test CSS Modules with Vitest](https://runthatline.com/test-css-module-classes-in-vue-with-vitest/)
- [TESTING A REACT APPLICATION WITH VITEST](https://eternaldev.com/blog/testing-a-react-application-with-vitest/)
- [Vitest with React Testing Library](https://www.robinwieruch.de/vitest-react-testing-library/)
- [CSS3 Tip: Removing Box Shadows](https://perishablepress.com/css3-remove-box-shadow/)
- [:focus-visible](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible)
- [CSS Button Styling Guide](https://moderncss.dev/css-button-styling-guide/)
- [Creating a React Input component in typescript](https://giselamirandadifini.com/creating-a-react-input-component-in-typescript)
- [How to use ESLint with TypeScript](https://khalilstemmler.com/blogs/typescript/eslint-for-typescript/)
## Contact
- Website [www.richardcyrus.com](https://www.richardcyrus.com)
- GitHub [@richardcyrus](https://github.com/richardcyrus)