Add docs input Color::class. (#304)

docs/README.md

@@ -53,6 +53,7 @@ This is particularly useful for creating forms and other interactive elements on
 - [button-group](/docs/form/input/ButtonGroup.md)
 - [checkbox](/docs/form/input/Checkbox.md)
 - [checkbox-list](/docs/form/input/CheckboxList.md)
+- [color](/docs/form/input/Color.md)
 - [date](/docs/form/input/Date.md)
 - [datetime](/docs/form/input/Datetime.md)
 - [datetime-local](/docs/form/input/DatetimeLocal.md)

docs/form/input/Color.md

@@ -0,0 +1,167 @@
+# Color
+
+The input element with a type attribute whose value is `color` represents a color-well control, for setting the 
+element’s value to a string representing a simple color.
+
+## Basic Usage
+
+Instantiate the `Color` class using `Color::widget()`.
+
+```php
+$color = Color::widget();
+```
+
+## Generate field id and name
+
+The `generateField` method is used to generate the field id and name for the `HTML` output.
+
+Allowed arguments are:
+
+- `modelName` - The name of the model.
+- `fieldName` - The name of the field.
+- `arrayable` - Whether the field is an array. For default, it is `false`.
+
+```php
+// generate field id and name
+$color->generateField('model', 'field');
+```
+
+## Setting Attributes
+
+Use the provided methods to set specific attributes for the a element.
+
+```php
+// setting class attribute
+$color->class('container');
+```
+
+Or, use the `attributes` method to set multiple attributes at once.
+
+```php
+$color->attributes(['class' => 'container', 'style' => 'background-color: #eee;']);
+```
+
+## Adding value
+
+If you want to include value in the `color` element, use the `value` method.
+
+```php
+$color->value('MyValue');
+```
+
+## Rendering
+
+Generate the `HTML` output using the `render` method, for simple instantiation. 
+
+```php
+$html = $color->render();
+```
+
+Or, use the magic `__toString` method.
+
+```php
+$html = (string) $color;
+```
+
+## Common use cases
+
+Below are examples of common use cases:
+
+```php
+// adding multiple attributes
+$color->class('external')->value('Myvalue');
+
+// using data attributes
+$color->dataAttributes(['analytics' => 'trackClick']);
+```
+
+Explore additional methods for setting various attributes such as `lang`, `name`, `style`, `title`, etc.
+
+## Prefix and Suffix
+
+Use `prefix` and `suffix` methods to add text before and after the `color` tag, respectively.
+
+```php
+// adding a prefix
+$html = $color->value('MyValue')->prefix('MyPrefix')->render();
+
+// adding a suffix
+$html = $color->value('MyValue')->suffix('MySuffix')->render();
+```
+
+## Template
+
+The `template` method allows you to customize the `HTML` output of the a element.
+
+The following template tags are available:
+
+| Tag        | Description      |
+| ---------- | ---------------- |
+| `{prefix}` | The prefix text. |
+| `{tag}`    | The a element.   |
+| `{suffix}` | The suffix text. |
+
+```php
+// using a custom template
+$color->template('<div>{tag}</div>');
+```
+
+## Attributes
+
+Refer to the [Attribute Tests](https://github.com/php-forge/html/blob/main/tests/Input/Color/AttributeTest.php) for 
+comprehensive examples.
+
+The following methods are available for setting attributes:
+
+| Method             | Description                                                                                     |
+| ------------------ | ----------------------------------------------------------------------------------------------- |
+| `ariaDescribedBy()`| Set the `aria-describedby` attribute.                                                           |
+| `ariaLabel()`      | Set the `aria-label` attribute.                                                                 |
+| `attributes()`     | Set multiple `attributes` at once.                                                              |
+| `autofocus()`      | Set the `autofocus` attribute.                                                                  |
+| `class()`          | Set the `class` attribute.                                                                      |
+| `dataAttributes()` | Set multiple `data-attributes` at once.                                                         |
+| `disabled()`       | Set the `disabled` attribute.                                                                   |
+| `form()`           | Set the `form` attribute.                                                                       |
+| `hidden()`         | Set the `hidden` attribute.                                                                     |
+| `id()`             | Set the `id` attribute.                                                                         |
+| `lang()`           | Set the `lang` attribute.                                                                       |
+| `name()`           | Set the `name` attribute.                                                                       |
+| `readOnly()`       | Set the `readonly` attribute.                                                                   |
+| `style()`          | Set the `style` attribute.                                                                      |
+| `tabIndex()`       | Set the `tabindex` attribute.                                                                   |
+| `title()`          | Set the `title` attribute.                                                                      |
+| `value()`          | Set the `value` attribute.                                                                      |
+
+## Custom methods
+
+Refer to the [Custom Methods Tests](https://github.com/php-forge/html/blob/main/tests/Input/Color/CustomMethodTest.php)
+for comprehensive examples.
+
+The following methods are available for customizing the `HTML` output:
+
+| Method                       | Description                                                                           |
+| ---------------------------- | ------------------------------------------------------------------------------------- |
+| `generateField()`           | Generate the field id and name for the `HTML` output.                                  |
+| `prefix()`                   | Add text before the `textarea` element.                                               |
+| `prefixContainer()`          | Set enabled or disabled for the `prefix-container` element.                           |
+| `prefixContainerAttributes()`| Set `attributes` for the `prefix-container` element.                                  |                                            
+| `prefixContainerClass()`     | Set the `class` attribute for the `prefix-container` element.                         |
+| `prefixContainerTag()`       | Set the `tag` for the `prefix-container` element.                                     |
+| `render()`                   | Generates the `HTML` output.                                                          |
+| `suffix()`                   | Add text after the `label` element.                                                   |
+| `suffixContainer()`          | Set enabled or disabled for the `suffix-container` element.                           |
+| `suffixContainerAttributes()`| Set `attributes` for the `suffix-container` element.                                  |
+| `suffixContainerClass()`     | Set the `class` attribute for the `suffix-container` element.                         |
+| `suffixContainerTag()`       | Set the `tag` for the `suffix-container` element.                                     |
+| `template()`                 | Set the template for the `HTML` output.                                               |
+| `widget()`                   | Instantiates the `Color::class`.                                                      |
+
+## Validate methods
+
+Refer to the [Validate Tests](https://github.com/php-forge/html/blob/main/tests/Input/Color/ValidateTest.php) for
+comprehensive examples.
+
+| Method         | Description                                                                                         |
+| -------------- | --------------------------------------------------------------------------------------------------- |
+| `required()`   | Set the `required` attribute.                                                                       |

tests/Input/Color/AttributeTest.php

@@ -173,26 +173,6 @@ public function testReadonly(): void
         );
     }
 
-    public function testRequired(): void
-    {
-        Assert::equalsWithoutLE(
-            <<<HTML
-            <input id="color-6582f2d099e8b" type="color" required>
-            HTML,
-            Color::widget()->id('color-6582f2d099e8b')->required()->render()
-        );
-    }
-
-    public function testRender(): void
-    {
-        Assert::equalsWithoutLE(
-            <<<HTML
-            <input id="color-6582f2d099e8b" type="color">
-            HTML,
-            Color::widget()->id('color-6582f2d099e8b')->render()
-        );
-    }
-
     public function testStyle(): void
     {
         Assert::equalsWithoutLE(

tests/Input/Color/CustomMethodTest.php

@@ -101,6 +101,16 @@ public function testPrefixContainerTag(): void
         );
     }
 
+    public function testRender(): void
+    {
+        Assert::equalsWithoutLE(
+            <<<HTML
+            <input id="color-6582f2d099e8b" type="color">
+            HTML,
+            Color::widget()->id('color-6582f2d099e8b')->render()
+        );
+    }
+
     public function testSuffix(): void
     {
         Assert::equalsWithoutLE(

tests/Input/Color/ValidateTest.php

@@ -0,0 +1,25 @@
+<?php
+
+declare(strict_types=1);
+
+namespace PHPForge\Html\Tests\Input\Color;
+
+use PHPForge\Html\Input\Color;
+use PHPForge\Support\Assert;
+use PHPUnit\Framework\TestCase;
+
+/**
+ * @psalm-suppress PropertyNotSetInConstructor
+ */
+final class ValidateTest extends TestCase
+{
+    public function testRequired(): void
+    {
+        Assert::equalsWithoutLE(
+            <<<HTML
+            <input id="color-6582f2d099e8b" type="color" required>
+            HTML,
+            Color::widget()->id('color-6582f2d099e8b')->required()->render()
+        );
+    }
+}