
# 📒 Developer style guide for Feedback-Form

Feedback is really import form every sector whether you are providing the product or sevice to customers. So for receiving the feedback there is special type of form is avialable that is what feedback component is. 

It mostly compromise with rating button upto 5, textarea and button as (submit,cancel).

![image](https://i.postimg.cc/CKZV6y2y/Screenshot-2022-12-26-at-10-04-35-PM.png)

---

## General must known design system guideline :

### Color 🎨

|  | Background | Border | 
| --- | --- | --- |
| Color Code in Tailwind | bg-gray-100, bg-white,bg-green-400,bg-red-400  | border-gray-200,border-blue-600 | 
 
Color of `bg` is generally used as shade of 100 / 700 

Color of `text` will depend on the `bg` color
|color | Dark | Light |
| --- | --- | --- |
| Text |Dark | Light |
| Code in Tailwind | text-black | text-gray-900,text-white |

`Note` : Color of the text `[color]` will depend on the color of the background

### Transition ( `transition-all` )

whenever there is a hover effect, one must use `transition-all` class with it.

### Font

For all Feedback-Form font is : **`font-medium font-bold`**

### Hover Color

For all Breadcumbs component the hover color is **`hover:border-blue-600`**.

### Border Radius 🔲

The normal border-radius for the components are `rounded-lg `. However this does not apply in many cases like buttons, input boxes and all.

## Icon guidelines:

Mostly all the icons are taken from → [Hero Icons](https://heroicons.com/)

`Icon-text-gap` :  We follow a convention of equal margin between the text and the icon as padding in y  axis `py`. and always the margin is given from the side of icon.

|  | Width | Type |
| --- | --- | --- |
| Small | w-4 & h-4 | Hero Icons mini |
| Medium | w-5 & h-5 | Hero Icons mini |
| Large | w-6 & h-6 | Hero Icons filled |

---

## Example of Feedback-Form component 👇

Want to see this Avatar in action? Try copy pasting this code in [Tailwind Playground](https://play.tailwindcss.com/). 💥

```html

<!--For Feedback-Form-1 -->
<div class="max-w-sm rounded-lg border border-gray-200 bg-white p-6 shadow-md dark:border-gray-100 dark:bg-gray-100">
    <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-black">Give feedback</h5>
    <p class="mb-3 font-normal text-gray-700 dark:text-gray-400 text-lg">Your suggestions will help us building better UI components</p>
  
    <div class="emoji-icons flex justify-around p-1 text-xl hover:cursor-pointer">
      <button type="button" class="bg-gray mr-2 mb-2 rounded-lg border-2 border-blue-600 px-5 py-2.5 text-xl font-semibold text-gray-900 hover:border-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-600 dark:border-gray-200 dark:text-black dark:hover:border-blue-600 dark:hover:text-blue-600 dark:focus:ring-blue-700">1</button>
      <button type="button" class="bg-gray mr-2 mb-2 rounded-lg border-2 border-blue-600 px-5 py-2.5 text-xl font-semibold text-gray-900 hover:border-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-600 dark:border-gray-200 dark:text-black dark:hover:border-blue-600 dark:hover:text-blue-600 dark:focus:ring-blue-700">2</button>
      <button type="button" class="bg-gray mr-2 mb-2 rounded-lg border-2 border-blue-600 px-5 py-2.5 text-xl font-semibold text-gray-900 hover:border-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-600 dark:border-gray-200 dark:text-black dark:hover:border-blue-600 dark:hover:text-blue-600 dark:focus:ring-blue-700">3</button>
      <button type="button" class="bg-gray mr-2 mb-2 rounded-lg border-2 border-blue-600 px-5 py-2.5 text-xl font-semibold text-gray-900 hover:border-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-600 dark:border-gray-200 dark:text-black dark:hover:border-blue-600 dark:hover:text-blue-600 dark:focus:ring-blue-700">4</button>
      <button type="button" class="bg-gray mr-2 mb-2 rounded-lg border-2 border-blue-600 px-5 py-2.5 text-xl font-semibold text-gray-900 hover:border-blue-600 focus:outline-none focus:ring-4 focus:ring-blue-600 dark:border-gray-200 dark:text-black dark:hover:border-blue-600 dark:hover:text-blue-600 dark:focus:ring-blue-700">5</button>
    </div>
  
    <form action="/">
      <p><label for="feedback">Write your feedback here</label></p>
      <textarea id="fb-01" name="feedback" rows="4" cols="30" placeholder="Enter here..." class="my-2 p-1 w-full"></textarea>
  
      <div class="my-2 flex items-center">
        <input id="link-checkbox" type="checkbox" value="" class="h-4 w-4 rounded border-gray-300 bg-gray-100 text-blue-600 focus:ring-2 focus:ring-blue-500 dark:border-blue-600 dark:bg-blue-700 dark:ring-offset-blue-800 dark:focus:ring-blue-600" required />
        <label for="link-checkbox" class="ml-2 text-sm font-medium text-gray-900 dark:text-gray-300">I agree with the <a href="#" class="text-blue-600 hover:underline dark:text-blue-500">terms and conditions</a>.</label>
      </div>
  
   
  <button type="button" class="text-white bg-gradient-to-r from-green-400 via-green-500 text-lg to-green-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-green-300 dark:focus:ring-green-800 font-medium rounded-lg px-4 py-2 text-center mr-2 mb-2 mt-3">Submit</button>

  <button type="button" class="text-white bg-gradient-to-r from-red-400 via-red-500 to-red-600 hover:bg-gradient-to-br focus:ring-4 focus:outline-none focus:ring-red-300 dark:focus:ring-red-800 font-medium rounded-lg text-lg px-4 py-2 text-center mr-2 mb-2">Cancel</button>
    </form>
  </div>


```

---

## Having some problem ? 😕

If you still have a problem understanding this please join our [discord server](https://discord.gg/zrVMjGW8sB) to get help.

